vanilla-vue-ui 0.0.11 → 0.0.13

package/basic/navigation-drawer/WNavigationDrawer.vue

@@ -1,123 +0,0 @@
-<template>
-  <div>
-    <TransitionRoot as="template" :show="sidebarOpen">
-      <Dialog as="div" class="relative z-50 lg:hidden" @close="sidebarOpen = false">
-        <TransitionChild as="template" enter="transition-opacity ease-linear duration-300" enter-from="opacity-0" enter-to="opacity-100" leave="transition-opacity ease-linear duration-300" leave-from="opacity-100" leave-to="opacity-0">
-          <div class="fixed inset-0 bg-gray-900/80" />
-        </TransitionChild>
-
-        <div class="fixed inset-0 flex">
-          <TransitionChild as="template" enter="transition ease-in-out duration-300 transform" enter-from="-translate-x-full" enter-to="translate-x-0" leave="transition ease-in-out duration-300 transform" leave-from="translate-x-0" leave-to="-translate-x-full">
-            <DialogPanel class="relative mr-16 flex w-full max-w-xs flex-1">
-              <TransitionChild as="template" enter="ease-in-out duration-300" enter-from="opacity-0" enter-to="opacity-100" leave="ease-in-out duration-300" leave-from="opacity-100" leave-to="opacity-0">
-                <div class="absolute left-full top-0 flex w-16 justify-center pt-5">
-                  <button type="button" class="-m-2.5 p-2.5" @click="sidebarOpen = false">
-                    <span class="sr-only">Close sidebar</span>
-                    <XMarkIcon class="h-6 w-6 text-white" aria-hidden="true" />
-                  </button>
-                </div>
-              </TransitionChild>
-              <div class="flex grow flex-col gap-y-5 overflow-y-auto bg-white px-6 pb-2">
-                <div class="flex h-4 shrink-0 items-center"/>
-                <nav class="flex flex-1 flex-col">
-                  <ul role="list" class="flex flex-1 flex-col gap-y-7">
-                    <li>
-                      <ul role="list" class="-mx-2 space-y-1">
-                        <TreeMenu :navigation-items="navigationTop"/>
-                      </ul>
-                    </li>
-
-                    <li class="-mx-6 mt-auto px-6 py-2">
-                      <ul role="list" class="-mx-2 space-y-1">
-                        <TreeMenu :navigation-items="navigationBottom"/>
-                      </ul>
-                    </li>
-
-                  </ul>
-                </nav>
-              </div>
-            </DialogPanel>
-          </TransitionChild>
-        </div>
-      </Dialog>
-    </TransitionRoot>
-
-    <!-- Static sidebar for desktop -->
-    <div class="hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-72 lg:flex-col">
-      <!-- Sidebar component, swap this element with another sidebar if you like -->
-      <div class="flex grow flex-col gap-y-5 overflow-y-auto border-r border-gray-200 bg-white px-6">
-        <div class="flex h-4 shrink-0 items-center">
-          <!-- <img class="h-8 w-auto" src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600" alt="Your Company" /> -->
-        </div>
-        <nav class="flex flex-1 flex-col">
-          <ul role="list" class="flex flex-1 flex-col gap-y-7">
-            <li>
-              <ul role="list" class="-mx-2 space-y-1">
-                <TreeMenu :navigation-items="navigationTop"/>
-              </ul>
-            </li>
-
-
-            <li class="-mx-6 mt-auto p-6 px-2">
-              <ul role="list" class="mx-2 space-y-1">
-                <TreeMenu :navigation-items="navigationBottom"/>
-              </ul>
-            </li>
-          </ul>
-        </nav>
-      </div>
-    </div>
-
-    <AppBar :title="title" @open="sidebarOpen = true"/>
-
-    <main class="lg:pl-72">
-      <div class="">
-        <!-- Your content -->
-        <slot />
-      </div>
-    </main>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { NavigationDrawerContent } from './NavigationDrawerContent'
-import { ref, watch, type PropType } from 'vue'
-import { useRoute } from 'vue-router'
-import { Dialog, DialogPanel, TransitionChild, TransitionRoot } from '@headlessui/vue'
-import {
-  XMarkIcon,
-} from '@heroicons/vue/24/outline'
-import TreeMenu from '../tree-menu/TreeMenu.vue'
-import AppBar from '../app-bar/AppBar.vue'
-
-const props = defineProps({
-  title: {
-    type: String as PropType<string>,
-    default: "Dashboard"
-  },
-  navigationTop: {
-    type: Array as PropType<NavigationDrawerContent[]>,
-    required: true
-  },
-  navigationBottom: {
-    type: Array as PropType<NavigationDrawerContent[]>,
-    required: true
-  }
-})
-
-const navigationTop = ref(props.navigationTop)
-const navigationBottom = ref(props.navigationBottom)
-
-const sidebarOpen = ref(false)
-
-const route = useRoute()
-
-watch(route, (newRoute) => {
-  // current、isOpen を設定
-  navigationTop.value.forEach(item => {
-    item.current = item.href === newRoute.path;
-    // current だったら sub を表示させる
-    item.isOpen = true
-  });
-}, { immediate: true });
-</script>

package/basic/notification/NotificationStore.ts

@@ -1,48 +0,0 @@
-import { computed, ref } from 'vue'
-import { defineStore } from 'pinia'
-
-export const NotificationStore = defineStore('notification', () => {
-
-  // リアクティブにするために ref を使用する
-  const _isOpen = ref(false)
-  let _completion: (() => void) | null = null
-  
-  const _title = ref('')
-  const _description = ref('')
-
-  // computed にすることで直接変更できなくする
-  const isOpen = computed(() => _isOpen)
-  const title = computed(() => _title)
-  const description = computed(() => _description)
-
-  function open({ title = '', description = '', delay = 3000, completion = null }: { title: string, description: string, delay?: number, completion?: (() => void) | null }) {
-    _title.value = title
-    _description.value = description
-
-    _isOpen.value = true
-
-    _completion = completion
-
-    // 余韻を残して非表示にs
-    setTimeout(() => {
-      close()  
-    }, delay);
-  }
-
-  function close() {
- 
-    _isOpen.value = false
-
-    // コールバック関数が含まれていれば実行
-    if (_completion) {
-
-      // 実行
-      _completion()
-
-      // リセット
-      _completion = null
-    }
-  }
-
-  return { isOpen, open, close, title, description }
-})

package/basic/notification/WNotification.stories.ts

@@ -1,27 +0,0 @@
-// Replace vue3 with vue if you are using Storybook for Vue 2
-import type { Meta, StoryObj } from '@storybook/vue3';
-import { NotificationStore } from './NotificationStore';
-import Notification from './Notification.vue';
-
-const meta: Meta<typeof Notification> = {
-  component: Notification,
-};
-
-export default meta;
-type Story = StoryObj<typeof Notification>;
-
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/api/csf
- * to learn how to use render functions.
- */
-export const Primary: Story = {
-  render: () => ({
-    setup() {
-      const notificationStore = NotificationStore()
-      notificationStore.open({ title: 'タイトル', description: 'ここに説明文が表示さえます。'})
-    },
-    components: { Notification },
-    template: '<Notification></Notification>',
-  }),
-};

package/basic/notification/WNotification.vue

@@ -1,44 +0,0 @@
-<!-- eslint-disable vue/multi-word-component-names -->
-<template>
-  <div aria-live="assertive" class="pointer-events-none fixed inset-0 flex items-end px-4 py-6 sm:items-start sm:p-6">
-    <div class="flex w-full flex-col items-center space-y-4 sm:items-end">
-      <transition enter-active-class="transform ease-out duration-300 transition" enter-from-class="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2" enter-to-class="translate-y-0 opacity-100 sm:translate-x-0" leave-active-class="transition ease-in duration-100" leave-from-class="opacity-100" leave-to-class="opacity-0">
-        <div v-show="showNotification" class="pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5">
-          <div class="p-4">
-            <div class="flex items-start">
-              <div class="flex-shrink-0">
-                <CheckCircleIcon class="h-6 w-6 text-green-400" aria-hidden="true" />
-              </div>
-              <div class="ml-3 w-0 flex-1 pt-0.5">
-                <p class="text-sm font-medium text-gray-900">{{ notificationStore.title.value }}</p>
-                <p class="mt-1 text-sm text-gray-500">{{ notificationStore.description.value }}</p>
-              </div>
-              <div class="ml-4 flex flex-shrink-0">
-                <button type="button" class="inline-flex rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2" @click="close()">
-                  <span class="sr-only">Close</span>
-                  <XMarkIcon class="h-5 w-5" aria-hidden="true" />
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </transition>
-    </div>
-  </div>
-</template>
-  
-<script setup lang="ts">
-import { CheckCircleIcon } from '@heroicons/vue/24/outline'
-import { XMarkIcon } from '@heroicons/vue/20/solid'
-import { NotificationStore } from './NotificationStore'
-
-// 通知用 state を購読
-const notificationStore = NotificationStore()
-const showNotification = notificationStore.isOpen
-
-// 通知を閉じる
-function close() {
-  notificationStore.close()
-}
-
-</script>

package/basic/pagination/WPagination.stories.ts

@@ -1,30 +0,0 @@
-// Replace vue3 with vue if you are using Storybook for Vue 2
-import type { Meta, StoryObj } from '@storybook/vue3';
-
-import Pagination from './Pagination.vue';
-
-const meta: Meta<typeof Pagination> = {
-  component: Pagination,
-};
-
-export default meta;
-type Story = StoryObj<typeof Pagination>;
-
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/api/csf
- * to learn how to use render functions.
- */
-export const Primary: Story = {
-  render: () => ({
-    components: { Pagination },
-    template: '<Pagination nextPath="#" previousPath="#"></Pagination>',
-  }),
-};
-
-export const Disable: Story = {
-  render: () => ({
-    components: { Pagination },
-    template: '<Pagination></Pagination>',
-  }),
-};

package/basic/pagination/WPagination.vue

@@ -1,58 +0,0 @@
-<!-- eslint-disable vue/multi-word-component-names -->
-<template>
-  <nav class="flex items-center justify-between border-t border-gray-200 px-4 sm:px-0">
-    <div class="-mt-px flex w-0 flex-1">
-      <a 
-        v-if="props.previousPath" 
-        :href="props.previousPath" 
-        class="inline-flex items-center border-t-2 border-transparent pr-1 pt-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700"
-      >
-        <ArrowLongLeftIcon class="mr-3 size-5 text-gray-400" aria-hidden="true" />
-        Previous
-      </a>
-      <span 
-        v-else 
-        class="inline-flex items-center border-t-2 border-transparent pr-1 pt-4 text-sm font-medium text-gray-300 cursor-not-allowed"
-      >
-        <ArrowLongLeftIcon class="mr-3 size-5 text-gray-300" aria-hidden="true" />
-        Previous
-      </span>
-    </div>
-
-    <div class="-mt-px flex w-0 flex-1 justify-end">
-      <a 
-        v-if="props.nextPath" 
-        :href="props.nextPath" 
-        class="inline-flex items-center border-t-2 border-transparent pl-1 pt-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700"
-      >
-        Next
-        <ArrowLongRightIcon class="ml-3 size-5 text-gray-400" aria-hidden="true" />
-      </a>
-      <span 
-        v-else 
-        class="inline-flex items-center border-t-2 border-transparent pl-1 pt-4 text-sm font-medium text-gray-300 cursor-not-allowed"
-      >
-        Next
-        <ArrowLongRightIcon class="ml-3 size-5 text-gray-300" aria-hidden="true" />
-      </span>
-    </div>
-  </nav>
-</template>
-
-<script setup lang="ts">
-import { ArrowLongLeftIcon, ArrowLongRightIcon } from '@heroicons/vue/20/solid'
-import { defineProps, type PropType } from 'vue';
-
-const props = defineProps({
-  nextPath: {
-    type: String as PropType<string | null>,
-    required: false,
-    default: null
-  },
-  previousPath: {
-    type: String as PropType<string | null>,
-    required: false,
-    default: null
-  }
-})
-</script>

package/basic/popup/PopupStore.ts

@@ -1,40 +0,0 @@
-import { ref, computed } from 'vue'
-import { defineStore } from 'pinia'
-
-export const PopupStore = defineStore('dialog', () => {
-
-  // リアクティブにするために ref を使用する
-  const _isOpen = ref(false)
-  let _completion: ((isConfirmed: boolean | null) => void) | null = null
-  // true にするとダイアログ以外の場所をタップしても消えない
-  // ボタンでしか閉じれなくなる
-  const _persistent = ref(false)
-
-  // computed にすることで直接変更できなくする
-  const isOpen = computed(() => _isOpen)
-  const getPersistent = computed(() => _persistent)
-
-  function open({ persistent = false, completion = null }: { persistent?: boolean; completion?: ((isConfirmed: boolean | null) => void) | null }) {
-    _persistent.value = persistent
-    _isOpen.value = true
-    _completion = completion
-  }
-
-  function close({ isConfirmed = null }: { isConfirmed?: boolean | null }) {
- 
-    _isOpen.value = false
-    _persistent.value = false
-
-    // コールバック関数が含まれていれば実行
-    if (_completion) {
-
-      // 実行
-      _completion(isConfirmed)
-
-      // リセット
-      _completion = null
-    }
-  }
-
-  return { isOpen, getPersistent, open, close }
-})

package/basic/popup/WPopup.stories.ts

@@ -1,27 +0,0 @@
-// Replace vue3 with vue if you are using Storybook for Vue 2
-import type { Meta, StoryObj } from '@storybook/vue3';
-import { PopupStore } from './PopupStore';
-import Popup from './Popup.vue';
-
-const meta: Meta<typeof Popup> = {
-  component: Popup,
-};
-
-export default meta;
-type Story = StoryObj<typeof Popup>;
-
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/api/csf
- * to learn how to use render functions.
- */
-export const Primary: Story = {
-  render: () => ({
-    setup() {
-      const popupStore = PopupStore()
-      popupStore.open({ persistent: true })
-    },
-    components: { Popup },
-    template: '<Popup><p>こんにちわ</p></Popup>',
-  }),
-};

package/basic/popup/WPopup.vue

@@ -1,67 +0,0 @@
-<!-- eslint-disable vue/multi-word-component-names -->
-<template>
-  <TransitionRoot as="template" :show="isOpen">
-    <Dialog as="div" class="relative z-10" @close="close({ isConfirmed: null })">
-      <TransitionChild as="template" enter="ease-out duration-300" enter-from="opacity-0" enter-to="opacity-100" leave="ease-in duration-200" leave-from="opacity-100" leave-to="opacity-0">
-        <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
-      </TransitionChild>
-
-      <div class="fixed inset-0 z-10 w-screen overflow-y-auto">
-        <div class="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
-          <TransitionChild as="template" enter="ease-out duration-300" enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" enter-to="opacity-100 translate-y-0 sm:scale-100" leave="ease-in duration-200" leave-from="opacity-100 translate-y-0 sm:scale-100" leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">
-            <DialogPanel :class="fullClassObject" class="relative transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 w-full sm:w-full sm:max-w-sm sm:p-6">
-              <div :class="{ 'flex-grow': full }" class="">
-                <div class="relative">
-                  <div class="absolute top-0 right-0 z-[41]">
-                    <XmarkSolidIcon @click="forceClose"/>
-                  </div>
-      
-                  <slot />
-                </div>
-              </div>
-            </DialogPanel>
-          </TransitionChild>
-        </div>
-      </div>
-    </Dialog>
-  </TransitionRoot>
-</template>
-
-<script setup lang="ts">
-import type { PropType } from 'vue'
-import { Dialog, DialogPanel, TransitionChild, TransitionRoot } from '@headlessui/vue'
-import { PopupStore } from './PopupStore'
-import XmarkSolidIcon from '../../icon/xmark/XmarkSolidIcon.vue';
-
-const props = defineProps({
-  full: {
-    type: Boolean as PropType<boolean>,
-    default: false
-  }
-})
-
-const fullClassObject = {
-  'flex': props.full,
-  'flex-col': props.full,
-  'min-h-screen': props.full
-}
-
-// ダイアログ用 state を購読
-const dialogStore = PopupStore()
-// ストアの状態とアクションをコンポーネントにマッピング
-const isOpen = dialogStore.isOpen;
-const persistent = dialogStore.getPersistent
-
-// ダイアログを閉じる
-function close({ isConfirmed }: { isConfirmed: boolean | null }) {
-  
-  // 回答が強制されていて、ボタンを押してない場合はダイアログを閉じさせない
-  if (persistent.value == false || isConfirmed != null) {
-    dialogStore.close({ isConfirmed: isConfirmed })
-  }
-}
-
-function forceClose() {
-  dialogStore.close({ isConfirmed: null})
-}
-</script>

package/basic/slide-over/WSlideOver.stories.ts

@@ -1,23 +0,0 @@
-// Replace vue3 with vue if you are using Storybook for Vue 2
-import type { Meta, StoryObj } from '@storybook/vue3';
-
-import SlideOver from './WSlideOver.vue';
-
-const meta: Meta<typeof SlideOver> = {
-  component: SlideOver,
-};
-
-export default meta;
-type Story = StoryObj<typeof SlideOver>;
-
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/api/csf
- * to learn how to use render functions.
- */
-export const Primary: Story = {
-  render: () => ({
-    components: { SlideOver },
-    template: '<SlideOver isOpen="true"></SlideOver>',
-  }),
-};

package/basic/slide-over/WSlideOver.vue

@@ -1,53 +0,0 @@
-<template>
-  <TransitionRoot as="template" :show="isOpen">
-    <Dialog as="div" class="relative z-50" @close="close">
-      <div class="fixed inset-0" />
-
-      <div class="fixed inset-0 overflow-hidden">
-        <div class="absolute inset-0 overflow-hidden">
-          <div class="pointer-events-none fixed inset-y-0 right-0 flex max-w-full pl-10">
-            <TransitionChild as="template" enter="transform transition ease-in-out duration-500 sm:duration-700" enter-from="translate-x-full" enter-to="translate-x-0" leave="transform transition ease-in-out duration-500 sm:duration-700" leave-from="translate-x-0" leave-to="translate-x-full">
-              <DialogPanel class="pointer-events-auto w-screen max-w-md">
-                <div class="flex h-full flex-col overflow-y-scroll bg-white py-6 shadow-xl">
-                  <div class="px-4 sm:px-6">
-                    <div class="flex items-start justify-end">
-                      <div class="ml-3 flex h-7 items-center">
-                        <button type="button" class="relative rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2" @click="close">
-                          <span class="absolute -inset-2.5" />
-                          <span class="sr-only">Close panel</span>
-                          <XMarkIcon class="h-6 w-6" aria-hidden="true" />
-                        </button>
-                      </div>
-                    </div>
-                    <slot />
-                  </div>
-                  <div class="relative mt-6 flex-1 px-4 sm:px-6"/>
-                </div>
-              </DialogPanel>
-            </TransitionChild>
-          </div>
-        </div>
-      </div>
-    </Dialog>
-  </TransitionRoot>
-</template>
-
-<script setup lang="ts">
-import { Dialog, DialogPanel, TransitionChild, TransitionRoot } from '@headlessui/vue'
-import { XMarkIcon } from '@heroicons/vue/24/outline'
-import { defineProps, defineEmits } from 'vue'
-
-defineProps({
-  isOpen: Boolean
-})
-
-// const open = ref(true)
-
-// イベントの定義
-const emit = defineEmits(['update:isOpen'])
-
-const close = () => {
-  // Emit an event to notify parent component to change the state
-  emit('update:isOpen', false)
-}
-</script>

package/basic/step/StepContent.ts

@@ -1,8 +0,0 @@
-import type { StepStatus } from "./StepStatus"
-
-type StepContent = {
-  number: number
-  status: StepStatus
-}
-
-export type { StepContent }

package/basic/step/StepStatus.ts

@@ -1,3 +0,0 @@
-type StepStatus = "Complete" | "Current" | "Upcoming"
-
-export type { StepStatus }

package/basic/step/WStep.stories.ts

@@ -1,42 +0,0 @@
-// Replace vue3 with vue if you are using Storybook for Vue 2
-import type { Meta, StoryObj } from '@storybook/vue3';
-import Step from './Step.vue';
-import type { StepContent } from './StepContent'
-
-type StepProps = InstanceType<typeof Step>['$props']
-
-const meta: Meta<typeof Step> = {
-  component: Step,
-};
-
-export default meta;
-type Story = StoryObj<typeof Step>;
-
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/api/csf
- * to learn how to use render functions.
- */
-
-const steps: StepContent[] = [
-  { number: 1, status: 'Complete' },
-  { number: 2, status: 'Complete' },
-  { number: 3, status: 'Complete' },
-  { number: 4, status: 'Current' },
-  { number: 5, status: 'Upcoming' },
-]
-
-export const Primary: Story = {
-  render: (args: StepProps) => ({
-    setup() {
-      return {
-        ...args,
-      };
-    },
-    components: { Step },
-    template: '<Step :steps="steps"></Step>',
-  }),
-  args: {
-    steps: steps
-  },
-};

package/basic/step/WStep.vue

@@ -1,48 +0,0 @@
-<!-- eslint-disable vue/multi-word-component-names -->
-<template>
-  <div v-if="steps" class="flex justify-center">
-    <nav aria-label="Progress">
-      <ol role="list" class="flex items-center">
-        <li v-for="(step, stepIdx) in steps" :key="step.number" :class="[stepIdx !== steps.length - 1 ? 'pr-8 sm:pr-20' : '', 'relative']">
-          <template v-if="step.status === 'Complete'">
-            <div class="absolute inset-0 flex items-center" aria-hidden="true">
-              <div class="h-0.5 w-full bg-indigo-600" />
-            </div>
-            <div class="relative flex h-8 w-8 items-center justify-center rounded-full bg-indigo-600 hover:bg-indigo-900">
-              <CheckIcon class="h-5 w-5 text-white" aria-hidden="true" />
-            </div>
-          </template>
-          <template v-else-if="step.status === 'Current'">
-            <div class="absolute inset-0 flex items-center" aria-hidden="true">
-              <div class="h-0.5 w-full bg-gray-200" />
-            </div>
-            <div class="relative flex h-8 w-8 items-center justify-center rounded-full border-2 border-indigo-600 bg-white" aria-current="step">
-              <span class="h-2.5 w-2.5 rounded-full bg-indigo-600" aria-hidden="true" />
-            </div>
-          </template>
-          <template v-else>
-            <div class="absolute inset-0 flex items-center" aria-hidden="true">
-              <div class="h-0.5 w-full bg-gray-200" />
-            </div>
-            <div class="group relative flex h-8 w-8 items-center justify-center rounded-full border-2 border-gray-300 bg-white hover:border-gray-400">
-              <span class="h-2.5 w-2.5 rounded-full bg-transparent group-hover:bg-gray-300" aria-hidden="true" />
-            </div>
-          </template>
-        </li>
-      </ol>
-    </nav>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { defineProps, type PropType } from 'vue'
-import { CheckIcon } from '@heroicons/vue/20/solid'
-import type { StepContent } from './StepContent';
-
-defineProps({
-  steps: {
-    type: Array as PropType<StepContent[]>,
-    require: true
-  }
-})
-</script>