refactor(stage-ui): migrated to use ui components

packages/stage-ui/src/components/misc/Collapsable.vue

@@ -1,38 +0,0 @@
-<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
-        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>

packages/stage-ui/src/components/misc/Screen.vue

@@ -1,72 +0,0 @@
-<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>

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

@@ -1,8 +1,6 @@
 export { default as Alert } from './Alert.vue'
-export { default as Collapsable } from './Collapsable.vue'
 export { default as ErrorContainer } from './ErrorContainer.vue'
 export { default as Progress } from './Progress.vue'
-export { default as Screen } from './Screen.vue'
 export { default as Skeleton } from './Skeleton.vue'
 export * from './Steppers'
 export { default as WIP } from './WIP.vue'