refactor(stage-ui,ui): promote Collapsible and Screen to ui package

2026-01-07 21:03:02 +08:00
parent ff119f0d2b
commit 77045c4b98
14 changed files with 133 additions and 21 deletions
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { Screen } from '@proj-airi/stage-ui/components'
 import { Live2DCanvas, Live2DModel } from '@proj-airi/stage-ui/components/scenes'
 import { useSettings } from '@proj-airi/stage-ui/stores/settings'
+import { Screen } from '@proj-airi/ui'
 import { storeToRefs } from 'pinia'
 import { ref, watch } from 'vue'

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { Screen } from '@proj-airi/stage-ui/components'
 import { Live2DCanvas, Live2DModel } from '@proj-airi/stage-ui/components/scenes'
 import { useSettings } from '@proj-airi/stage-ui/stores/settings'
+import { Screen } from '@proj-airi/ui'
 import { storeToRefs } from 'pinia'
 import { ref, watch } from 'vue'

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import Collapsable from '../misc/Collapsable.vue'
+import { Collapsible } from '@proj-airi/ui'

 withDefaults(defineProps<{
  title?: string
@@ -12,7 +12,7 @@ withDefaults(defineProps<{
 </script>

 <template>
-  <Collapsable :default="expand">
+  <Collapsible :default="expand">
    <template #trigger="slotProps">
      <button
        class="w-full flex items-center justify-between rounded-lg px-2 py-1 outline-none transition-all duration-250 ease-in-out"
@@ -37,5 +37,5 @@ withDefaults(defineProps<{
    <div gap="1" grid items-center p-1 :class="innerClass">
      <slot />
    </div>
-  </Collapsable>
+  </Collapsible>
 </template>
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import Collapsable from '../misc/Collapsable.vue'
+import { Collapsible } from '@proj-airi/ui'

 withDefaults(defineProps<{
  title: string
@@ -13,7 +13,7 @@ withDefaults(defineProps<{
 </script>

 <template>
-  <Collapsable :default="expand">
+  <Collapsible :default="expand">
    <template #trigger="slotProps">
      <button
        class="w-full flex items-center justify-between rounded-lg px-3 py-2 outline-none transition-all duration-250 ease-in-out sm:px-4 sm:py-3"
@@ -36,5 +36,5 @@ withDefaults(defineProps<{
    <div grid gap-2 :class="[innerClass, size === 'sm' ? 'p-2' : 'p-4']">
      <slot />
    </div>
-  </Collapsable>
+  </Collapsible>
 </template>
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import Screen from './Screen.vue'
+import { Screen } from '@proj-airi/ui'
 </script>

 <template>
@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import type { ChatAssistantMessage } from '../../../types/chat'

+import { Collapsible } from '@proj-airi/ui'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'

 import MarkdownRenderer from '../../markdown/MarkdownRenderer.vue'
-import Collapsable from '../../misc/Collapsable.vue'

 const props = defineProps<{
  message: ChatAssistantMessage
@@ -24,7 +24,7 @@ const containerClasses = computed(() => [

 <template>
  <div v-if="hasReasoning" :class="containerClasses" flex="~ col" gap-1>
-    <Collapsable :default="false">
+    <Collapsible :default="false">
      <template #trigger="slotProps">
        <button
          class="w-full flex items-center justify-between rounded-lg bg-neutral-100/50 px-2 py-1 text-xs text-neutral-600 outline-none transition-all duration-200 dark:bg-neutral-800/50 hover:bg-neutral-200/50 dark:text-neutral-400 dark:hover:bg-neutral-700/50"
@@ -51,6 +51,6 @@ const containerClasses = computed(() => [
          text="xs neutral-700 dark:neutral-300"
        />
      </div>
-    </Collapsable>
+    </Collapsible>
  </div>
 </template>
@@ -1,8 +1,7 @@
 <script setup lang="ts">
+import { Collapsible } from '@proj-airi/ui'
 import { computed } from 'vue'

-import Collapsable from '../../misc/Collapsable.vue'
-
 const props = defineProps<{
  toolName: string
  args: string
@@ -20,7 +19,7 @@ const formattedArgs = computed(() => {
 </script>

 <template>
-  <Collapsable
+  <Collapsible
    :class="[
      'bg-primary-100/40 dark:bg-primary-900/60 rounded-lg px-2 pb-2 pt-2',
      'flex flex-col gap-2 items-start',
@@ -47,5 +46,5 @@ const formattedArgs = computed(() => {
        {{ formattedArgs }}
      </div>
    </div>
-  </Collapsable>
+  </Collapsible>
 </template>
@@ -1,8 +1,7 @@
 <script setup lang="ts">
+import { Collapsible } from '@proj-airi/ui'
 import { ref } from 'vue'

-import Collapsable from '../../misc/Collapsable.vue'
-
 const props = defineProps<{
  title?: string
  initialVisible?: boolean
@@ -16,7 +15,7 @@ function toggleVisible() {
 </script>

 <template>
-  <Collapsable w-full>
+  <Collapsible w-full>
    <template #trigger="slotProps">
      <button
        transition="all ease-in-out duration-250"
@@ -35,5 +34,5 @@ function toggleVisible() {
    <div mt-4>
      <slot />
    </div>
-  </Collapsable>
+  </Collapsible>
 </template>
@@ -1,8 +1,8 @@
 <script setup lang="ts">
+import { Screen } from '@proj-airi/ui'
 import { storeToRefs } from 'pinia'
 import { ref, watch } from 'vue'

-import Screen from '../misc/Screen.vue'
 import Live2DCanvas from './live2d/Canvas.vue'
 import Live2DModel from './live2d/Model.vue'

@@ -18,6 +18,7 @@
    ".": "./src/index.ts",
    "./components/animations": "./src/components/Animations/index.ts",
    "./components/form": "./src/components/Form/index.ts",
+    "./components/layouts": "./src/components/layouts/index.ts",
    "./*": "./*"
  },
  "scripts": {
@@ -0,0 +1,38 @@
+<script lang="ts" setup>
+import { TransitionVertical } from '@proj-airi/ui'
+import { watchEffect } from 'vue'
+
+const props = defineProps<{
+  default?: boolean
+  label?: string
+}>()
+const visible = defineModel<boolean>({ default: false })
+watchEffect(() => {
+  if (props.default != null) {
+    visible.value = !!props.default
+  }
+})
+
+function setVisible(value: boolean) {
+  visible.value = value
+  return value
+}
+</script>
+
+<template>
+  <div>
+    <slot name="trigger" v-bind="{ visible, setVisible }">
+      <button
+        :class="['sticky top-0 z-10 flex items-center justify-between px2 py1 text-sm backdrop-blur-xl']"
+        @click="visible = !visible"
+      >
+        <span>
+          {{ props.label ?? 'Collapsable' }}
+        </span> <span op50>{{ visible ? '▲' : '▼' }}</span>
+      </button>
+    </slot>
+    <TransitionVertical>
+      <slot v-if="visible" v-bind="{ visible, setVisible }" />
+    </TransitionVertical>
+  </div>
+</template>
@@ -0,0 +1,2 @@
+export { default as Collapsible } from './collapsible.vue'
+export { default as Screen } from './screen.vue'
@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { breakpointsTailwind, useBreakpoints, useElementBounding, useWindowSize } from '@vueuse/core'
+import { computed, onMounted, ref, watch } from 'vue'
+
+const containerRef = ref<HTMLDivElement>()
+
+const breakpoints = useBreakpoints(breakpointsTailwind)
+const { width, height } = useWindowSize()
+const containerElementBounding = useElementBounding(containerRef, { immediate: true, windowResize: true, reset: true })
+
+const isMobile = computed(() => breakpoints.between('sm', 'md').value || breakpoints.smaller('sm').value)
+const isTablet = computed(() => breakpoints.between('md', 'lg').value)
+const isDesktop = computed(() => breakpoints.greaterOrEqual('lg').value)
+
+const canvasWidth = computed(() => {
+  if (isDesktop.value)
+    return containerElementBounding.width.value
+  else if (isMobile.value)
+    return (width.value - 16) // padding
+  else if (isTablet.value)
+    return (width.value - 16) // padding
+  else
+    return containerElementBounding.width.value
+})
+
+const canvasHeight = ref(0)
+
+watch([width, height, containerRef], () => {
+  const bounding = containerRef.value?.parentElement?.getBoundingClientRect()
+
+  if (isDesktop.value) {
+    canvasHeight.value = bounding?.height || 0
+  }
+  else if (isMobile.value) {
+    canvasHeight.value = bounding?.height || 0
+  }
+  else if (isTablet.value) {
+    canvasHeight.value = bounding?.height || 0
+  }
+  else {
+    canvasHeight.value = 600
+  }
+})
+
+watch([containerElementBounding.width, containerElementBounding.height], () => {
+  if (isDesktop.value) {
+    canvasHeight.value = containerElementBounding.height.value
+  }
+  else if (isMobile.value) {
+    canvasHeight.value = containerElementBounding.height.value
+  }
+  else if (isTablet.value) {
+    canvasHeight.value = containerElementBounding.height.value
+  }
+  else {
+    canvasHeight.value = 600
+  }
+})
+
+onMounted(async () => {
+  if (!containerRef.value)
+    return
+
+  containerElementBounding.update()
+})
+</script>
+
+<template>
+  <div ref="containerRef" h-full w-full>
+    <slot :width="canvasWidth" :height="canvasHeight" />
+  </div>
+</template>
@@ -2,6 +2,7 @@ import './fallback.css'

 export * from './components/Animations'
 export * from './components/Form'
+export * from './components/layouts'
 export * from './components/Misc'
 export * from './composables/use-deferred-mount'
 export * from './composables/use-theme'