vanilla-vue-ui 0.0.7 → 0.0.9

package/basic/navigation-drawer/WNavigationDrawer.vue

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

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

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

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

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

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

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

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

@@ -0,0 +1,67 @@
+<!-- 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/select/SelectOption.ts

@@ -0,0 +1,4 @@
+export type SelectOption = {
+  key: string;
+  name: string;
+}

package/basic/select/WSelect.stories.ts

@@ -0,0 +1,56 @@
+// Replace vue3 with vue if you are using Storybook for Vue 2
+import type { Meta, StoryObj } from '@storybook/vue3';
+import { ref, watchEffect } from "vue"
+import Select from './WSelect.vue';
+import type { SelectOption } from './SelectOption';
+
+type SelectProps = InstanceType<typeof Select>['$props']
+
+const meta: Meta<typeof Select> = {
+  component: Select,
+};
+
+export default meta;
+type Story = StoryObj<typeof Select>;
+
+const selectOption: SelectOption[] = [
+  { key: 'milk', name: 'ミルク' },
+  { key: 'orange', name: 'オレンジジュース' },
+  { key: 'coffee', name: 'コーヒー' }
+]
+
+const selected: SelectOption = { key: 'coffee', name: 'コーヒー' }
+
+/*
+ *👇 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: (args: SelectProps) => ({
+    setup() {
+      // `selected`を直接使うのではなく、`modelValue`を経由して初期値を設定
+      const modelValue = ref(args.modelValue);
+      
+      // `update:modelValue`イベントをリッスンして、内部状態を更新
+      watchEffect(() => {
+        modelValue.value = args.modelValue;
+      });
+
+      return {
+        ...args,
+        modelValue,
+        updateModelValue: (newValue: SelectOption) => {
+          modelValue.value = newValue;
+        },
+      };
+    },
+    components: { Select },
+    template: '<Select :options="options" :title="title" v-model="modelValue"></Select>',
+  }),
+  args: {
+    title: '飲み物',
+    options: selectOption,
+    modelValue: selected, // `selected`ではなく、`modelValue`として指定
+  },
+};

package/basic/select/WSelect.vue

@@ -0,0 +1,58 @@
+<template>
+  <Listbox v-model="selected" as="div">
+    <ListboxLabel class="block text-sm font-medium leading-6 text-onSurface dark:text-onSurface-dark">{{ title }}</ListboxLabel>
+    <div class="relative mt-2">
+      <ListboxButton class="relative w-full cursor-default rounded-md bg-surface dark:bg-surface-dark py-1.5 pl-3 pr-10 text-left text-onSurface dark:text-onSurface-dark shadow-sm ring-1 ring-inset ring-gray-300 focus:outline-none focus:ring-2 focus:ring-primary dark:focus:ring-primary-dark sm:text-sm sm:leading-6">
+        <span class="block truncate">{{ selected.name }}</span>
+        <span class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
+          <ChevronUpDownIcon class="h-5 w-5 text-onSurface dark:text-onSurface-dark" aria-hidden="true" />
+        </span>
+      </ListboxButton>
+
+      <transition leave-active-class="transition ease-in duration-100" leave-from-class="opacity-100" leave-to-class="opacity-0">
+        <ListboxOptions class="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-surface dark:bg-surface-dark py-1 text-onSurface dark:text-onSurface-dark shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
+          <ListboxOption v-for="option in props.options" :key="option.key" v-slot="{ active, selected }" as="template" :value="option">
+            <li :class="[active ? 'bg-primaryContainer dark:bg-primaryContainer-dark text-onPrimaryContainer dark:text-onPrimaryContainer-dark' : 'text-onSurface dark:text-onSurface-dark', 'relative cursor-default select-none py-2 pl-8 pr-4']">
+              <span :class="[selected ? 'font-semibold' : 'font-normal', 'block truncate']">{{ option.name }}</span>
+
+              <span v-if="selected" :class="[active ? 'text-onSurface dark:text-onSurface-dark' : 'text-onSurface dark:text-onSurface-dark', 'absolute inset-y-0 left-0 flex items-center pl-1.5']">
+                <CheckIcon class="h-5 w-5" aria-hidden="true" />
+              </span>
+            </li>
+          </ListboxOption>
+        </ListboxOptions>
+      </transition>
+    </div>
+  </Listbox>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, watchEffect, defineProps, defineEmits, type PropType } from 'vue'
+import { Listbox, ListboxButton, ListboxLabel, ListboxOption, ListboxOptions } from '@headlessui/vue'
+import { CheckIcon, ChevronUpDownIcon } from '@heroicons/vue/20/solid'
+import type { SelectOption } from './SelectOption';
+
+
+const props = defineProps({
+  title: String,
+  options: {
+    type: Array as PropType<SelectOption[]>,
+    required: true
+  },
+  modelValue: Object as PropType<SelectOption>
+})
+
+const emits = defineEmits(['update:modelValue'])
+
+const selected = ref<SelectOption>(props.modelValue || props.options[0])
+
+watchEffect(() => {
+  if (props.modelValue) {
+    selected.value = props.modelValue
+  }
+})
+
+watch(selected, (newValue) => {
+  emits('update:modelValue', newValue)
+})
+</script>

package/basic/skeleton-loader/WSkeletonBar.vue

@@ -0,0 +1,24 @@
+<template>
+  <div
+    class="animate-pulse bg-gray-200 rounded"
+    :class="widthClass"
+    :style="{ height: height + 'px' }"
+  />
+</template>
+
+<script setup lang="ts">
+import { defineProps, withDefaults } from 'vue'
+
+// Props の定義とデフォルト値
+withDefaults(defineProps<{
+  /** 幅を指定する Tailwind クラス */
+  widthClass?: string
+  /** 高さ(px) */
+  height?: number
+}>(), {
+  // 幅はデフォルトで w-full
+  widthClass: 'w-full',
+  // 高さはデフォルトで 16px (1rem相当)
+  height: 16,
+})
+</script>

package/basic/skeleton-loader/WSkeletonLoader.stories.ts

@@ -0,0 +1,23 @@
+// Replace vue3 with vue if you are using Storybook for Vue 2
+import type { Meta, StoryObj } from '@storybook/vue3';
+
+import SkeletonLoader from './WSkeletonLoader.vue';
+
+const meta: Meta<typeof SkeletonLoader> = {
+  component: SkeletonLoader,
+};
+
+export default meta;
+type Story = StoryObj<typeof SkeletonLoader>;
+
+/*
+ *👇 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: { SkeletonLoader },
+    template: '<SkeletonLoader></SkeletonLoader>',
+  }),
+};

package/basic/skeleton-loader/WSkeletonLoader.vue

@@ -0,0 +1,17 @@
+<template>
+  <div class="border rounded-xl border-gray-300 p-4 animate-pulse space-y-4">
+    <!-- タイトルっぽいバー -->
+    <WSkeletonBar widthClass="w-3/4" :height="24" />
+
+    <!-- テキストっぽいバーたち -->
+    <div class="space-y-2">
+      <WSkeletonBar widthClass="w-full" :height="16" />
+      <WSkeletonBar widthClass="w-5/6" :height="16" />
+      <WSkeletonBar widthClass="w-4/6" :height="16" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import WSkeletonBar from './WSkeletonBar.vue'
+</script>