refactor(stage-web): split to use stage-ui component

apps/stage-web/src/pages/settings/index.vue

@@ -1,12 +1,11 @@
 <script setup lang="ts">
+import { IconItem } from '@proj-airi/stage-ui/components'
 import { useSettings } from '@proj-airi/stage-ui/stores'
 import { useDark } from '@vueuse/core'
 import { storeToRefs } from 'pinia'
 import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 
-import IconItem from '../../components/Menu/IconItem.vue'
-
 const router = useRouter()
 const { t } = useI18n()
 const { language, disableTransitions } = storeToRefs(useSettings())

apps/stage-web/src/pages/settings/modules/index.vue

@@ -1,9 +1,8 @@
 <script setup lang="ts">
+import { IconStatusItem } from '@proj-airi/stage-ui/components'
 import { computed } from 'vue'
 import { useRouter } from 'vue-router'
 
-import IconStatusItem from '../../../components/Menu/IconStatusItem.vue'
-
 const router = useRouter()
 
 interface Module {

apps/stage-web/src/pages/settings/providers/index.vue

@@ -1,10 +1,9 @@
 <script setup lang="ts">
+import { IconStatusItem } from '@proj-airi/stage-ui/components'
 import { useProvidersStore } from '@proj-airi/stage-ui/stores'
 import { storeToRefs } from 'pinia'
 import { useRouter } from 'vue-router'
 
-import IconStatusItem from '../../../components/Menu/IconStatusItem.vue'
-
 const router = useRouter()
 const providersStore = useProvidersStore()
 const { allProvidersMetadata } = storeToRefs(providersStore)

packages/stage-ui/src/components/Form/Radio/RadioCardDetail.vue

@@ -48,13 +48,16 @@ function updateCustomInput(event: Event) {
 <template>
   <label
     :key="id"
-    class="relative flex cursor-pointer items-start rounded-xl p-3 pr-[20px]"
+    class="form_radio-card-detail relative flex cursor-pointer items-start rounded-xl p-3 pr-[20px]"
     transition="all duration-200 ease-in-out"
     border="2 solid"
     :class="[
       modelValue === value
-        ? 'bg-primary-50 dark:bg-primary-900/20 border-primary-100 dark:border-primary-900'
-        : 'bg-white dark:bg-neutral-900/20 border-neutral-200 dark:border-neutral-700 hover:border-primary-500/30 dark:hover:border-primary-400/30',
+        ? 'bg-primary-50 dark:bg-primary-900/20 border-primary-100 dark:border-primary-900 hover:border-primary-500/30 dark:hover:border-primary-400/30'
+        : 'bg-white dark:bg-neutral-900/20 border-neutral-100 dark:border-neutral-700 hover:border-primary-500/30 dark:hover:border-primary-400/30',
+      modelValue === value
+        ? 'form_radio-card-detail-active'
+        : '',
       deprecated ? 'opacity-60' : '',
     ]"
   >
@@ -161,3 +164,35 @@ function updateCustomInput(event: Event) {
     </div>
   </label>
 </template>
+
+<style scoped>
+.form_radio-card-detail {
+  position: relative;
+  overflow: hidden;
+}
+
+.form_radio-card-detail::before {
+  --at-apply: 'bg-gradient-to-r from-primary-500/0 to-primary-500/0 dark:from-primary-400/0 dark:to-primary-400/0';
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  width: 25%;
+  height: 100%;
+  transition: all 0.35s ease-in-out;
+  mask-image: linear-gradient(120deg, white 100%);
+  opacity: 0;
+}
+
+.form_radio-card-detail:hover::before {
+  --at-apply: 'bg-gradient-to-r from-primary-500/20 via-primary-500/10 to-transparent dark:from-primary-400/20 dark:via-primary-400/10 dark:to-transparent';
+  width: 85%;
+  opacity: 1;
+}
+
+.form_radio-card-detail-active::before {
+  --at-apply: 'bg-gradient-to-r from-primary-500/20 via-primary-500/10 to-transparent dark:from-primary-400/20 dark:via-primary-400/10 dark:to-transparent';
+  width: 85%;
+  opacity: 0.5;
+}
+</style>

packages/stage-ui/src/components/Form/Radio/RadioCardSimple.vue

@@ -17,12 +17,15 @@ defineEmits<{
   <label
     :key="id"
     border="2px solid"
-    class="relative"
+    class="form_radio-card-simple relative"
     transition="all duration-200 ease-in-out"
     :class="[
       modelValue === value
-        ? 'bg-primary-50 dark:bg-primary-900/20 border-primary-100 dark:border-primary-900'
-        : 'bg-white dark:bg-neutral-900/20 border-neutral-200 dark:border-neutral-700 hover:border-primary-500/30 dark:hover:border-primary-400/30',
+        ? 'bg-primary-50 dark:bg-primary-900/20 border-primary-100 dark:border-primary-900 hover:border-primary-500/30 dark:hover:border-primary-400/30'
+        : 'bg-white dark:bg-neutral-900/20 border-neutral-100 dark:border-neutral-700 hover:border-primary-500/30 dark:hover:border-primary-400/30',
+      modelValue === value
+        ? 'form_radio-card-simple-active'
+        : '',
     ]"
     flex="~ col"
     block min-w-50 w-fit cursor-pointer items-start rounded-xl p-4 text-left
@@ -79,3 +82,35 @@ defineEmits<{
     />
   </label>
 </template>
+
+<style scoped>
+.form_radio-card-simple {
+  position: relative;
+  overflow: hidden;
+}
+
+.form_radio-card-simple::before {
+  --at-apply: 'bg-gradient-to-r from-primary-500/0 to-primary-500/0 dark:from-primary-400/0 dark:to-primary-400/0';
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  width: 25%;
+  height: 100%;
+  transition: all 0.35s ease-in-out;
+  mask-image: linear-gradient(120deg, white 100%);
+  opacity: 0;
+}
+
+.form_radio-card-simple:hover::before {
+  --at-apply: 'bg-gradient-to-r from-primary-500/20 via-primary-500/10 to-transparent dark:from-primary-400/20 dark:via-primary-400/10 dark:to-transparent';
+  width: 85%;
+  opacity: 1;
+}
+
+.form_radio-card-simple-active::before {
+  --at-apply: 'bg-gradient-to-r from-primary-500/20 via-primary-500/10 to-transparent dark:from-primary-400/20 dark:via-primary-400/10 dark:to-transparent';
+  width: 85%;
+  opacity: 0.5;
+}
+</style>

packages/stage-ui/src/components/Form/Radio/index.ts

@@ -0,0 +1,2 @@
+export { default as RadioCardDetail } from './RadioCardDetail.vue'
+export { default as RadioCardSimple } from './RadioCardSimple.vue'

packages/stage-ui/src/components/Form/index.ts

@@ -0,0 +1,2 @@
+export * from './Radio'
+export { default as RadioCardDetailManySelect } from './RadioCardDetailManySelect.vue'

packages/stage-ui/src/components/Menu/index.ts

@@ -0,0 +1,2 @@
+export { default as IconItem } from './IconItem.vue'
+export { default as IconStatusItem } from './IconStatusItem.vue'

packages/stage-ui/src/components/index.ts

@@ -1,10 +1,9 @@
 export { default as BasicTextarea } from './BasicTextarea.vue'
 export { default as Collapsable } from './Collapsable.vue'
-export { default as RadioCardDetail } from './Form/Radio/RadioCardDetail.vue'
-export { default as RadioCardSimple } from './Form/Radio/RadioCardSimple.vue'
-export { default as RadioCardDetailManySelect } from './Form/RadioCardDetailManySelect.vue'
+export * from './Form'
 export { default as Live2DCanvas } from './Live2D/Canvas.vue'
 export { default as Live2DModel } from './Live2D/Model.vue'
+export * from './Menu'
 export { default as SceneLive2D } from './Scenes/Live2D.vue'
 export { default as SceneVRM } from './Scenes/VRM.vue'
 export { default as TransitionVertical } from './TransitionVertical.vue'