vanilla-vue-ui 0.0.11 → 0.0.13

package/basic/accordion/WAccordion.stories.ts

@@ -47,3 +47,36 @@ export const Primary: Story = {
     }
   }
 };
+
+export const Unmount: Story = {
+  render: (args: AccordionProps) => ({
+    setup() {
+      return {
+        ...args
+      }
+    },
+    components: { Accordion },
+    template: '<Accordion :contents="contents" :classes="classes" :unmount="false"></Accordion>',
+  }),
+  args: {
+    contents: [
+      {
+         title: "What's the best thing about Switzerland?",
+         body: "I don't know, but the flag is a big plus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat."
+      }
+    ],
+    classes: {
+      title: {
+        text: {
+          color: 'text-onSurface dark:text-onSurface-dark'
+        }
+      },
+      content: {
+        text: {
+          color: 'text-onSurface dark:text-onSurface-dark'
+        }
+      }
+    }
+  }
+};
+

package/basic/accordion/WAccordion.vue

@@ -18,7 +18,7 @@
           </span>
         </DisclosureButton>
       </dt>
-      <DisclosurePanel as="dd" class="mt-2 pr-12">
+      <DisclosurePanel as="dd" class="mt-2 pr-12" :unmount="props.unmount">
         <p
           :class="[
             mergedClasses.content?.base,
@@ -46,7 +46,11 @@ const props = defineProps({
   },
   classes: {
     type: Object as PropType<ClassObject>,
-  }
+  },
+  unmount: { 
+    type: Boolean as PropType<boolean>,
+    default: true
+  },
 })
 
 const defaultClasses: ClassObject = {

package/basic/breadcrumb/WBreadcrumb.vue

@@ -10,14 +10,14 @@
         </div>
       </li>
       <li v-for="(page, index) in pages" :key="page.name">
-        <div class="flex items-center">
+        <div v-if="page.name.length > 1" class="flex items-center">
           <ChevronRightIcon
            :class="mergedClasses.icon?.base"
            v-if="index < pages.length - 1"
            aria-hidden="true"
           />
           <a
-           :href="`${page.href}`"
+           :href="`${getHref(page.href)}`"
            :class="mergedClasses.text?.base"
            :aria-current="page.current ? 'page' : undefined"
           >
@@ -36,10 +36,15 @@ import type { RouteMeta } from 'vue-router';
 import { ref, onMounted, watch, type PropType } from 'vue';
 import type { ClassObject } from '../../types/ClassObject';
 import { deepMergeClassObject } from '../../util';
+import { withTrailingSlash } from 'ufo'
 
 const props = defineProps({
   classes: {
     type: Object as PropType<ClassObject>,
+  },
+  trailingSlash: {
+    type: Boolean as PropType<boolean>,
+    default: false
   }
 })
 
@@ -97,4 +102,12 @@ function getRouteMeta(path: string): RouteMeta | undefined {
   const matchedRoute = router.getRoutes().find(route => route.path === path);
   return matchedRoute?.meta;
 }
+
+function getHref(path: string): string {
+  if (props.trailingSlash) {
+    return withTrailingSlash(path)
+  } else {
+    return path
+  }
+}
 </script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vanilla-vue-ui",
-  "version": "0.0.11",
+  "version": "0.0.13",
   "private": false,
   "type": "module",
   "files": [

package/basic/card/WCard.stories.ts

@@ -1,36 +0,0 @@
-// Replace vue3 with vue if you are using Storybook for Vue 2
-import type { Meta, StoryObj } from '@storybook/vue3';
-import Card from './WCard.vue';
-
-type CardProps = InstanceType<typeof Card>['$props']
-
-const meta: Meta<typeof Card> = {
-  component: Card,
-};
-
-export default meta;
-type Story = StoryObj<typeof Card>;
-
-/*
- *👇 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: CardProps) => ({
-    setup() {
-      return {
-        ...args
-      }
-    },
-    components: { Card },
-    template: `
-      <Card :classes="classes">
-        <p class="text-onSurface dark:text-onSurface-dark">Card</p>
-      </Card>
-    `,
-  }),
-  args: {
-    classes: { base: 'py-4 px-4 bg-surfaceContainerLow dark:bg-surfaceContainerLow-dark border border-solid border-outline dark:border-outline-dark rounded-lg' }
-  }
-};

package/basic/card/WCard.vue

@@ -1,22 +0,0 @@
-<!-- eslint-disable vue/multi-word-component-names -->
-<template>
-  <div :class="classes.base">
-    <slot />
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { ClassObject } from '../../types/ClassObject';
-import { defineProps, type PropType } from 'vue';
-
-defineProps({
-  classes: {
-    type: Object as PropType<ClassObject>,
-    default() {
-      return {
-        base: 'bg-white border border-solid border-gray-300 rounded-lg'
-      }
-    }
-  }
-})
-</script>

package/basic/carousel/WCarousel.stories.ts

@@ -1,29 +0,0 @@
-// Replace vue3 with vue if you are using Storybook for Vue 2
-import type { Meta, StoryObj } from '@storybook/vue3';
-
-import Carousel from './WCarousel.vue';
-
-const meta: Meta<typeof Carousel> = {
-  component: Carousel,
-};
-
-export default meta;
-type Story = StoryObj<typeof Carousel>;
-
-/*
- *👇 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: { Carousel },
-    template: `
-      <Carousel>
-        <img src="/carousel-0.webp" alt="Slide 1">
-        <img src="/carousel-1.webp" alt="Slide 2">
-        <img src="/carousel-2.webp" alt="Slide 3">
-      </Carousel>
-    `,
-  }),
-};

package/basic/carousel/WCarousel.vue

@@ -1,90 +0,0 @@
-<!-- eslint-disable vue/multi-word-component-names -->
-<template>
-  <div class="carousel">
-    <div class="carousel-inner" :style="{ transform: `translateX(-${currentIndex * 100}%)` }">
-      <slot/>
-    </div>
-
-    <SecondaryButton class="prev-btn opacity-50" @click="prev">
-      <component :is="ChevronLeftIcon" class="h-5" aria-hidden="true" />
-    </SecondaryButton>
-
-    <SecondaryButton class="next-btn opacity-50" @click="next">
-      <component :is="ChevronRightIcon" class="h-5" aria-hidden="true" />
-    </SecondaryButton>
-
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, onMounted, onUnmounted } from 'vue';
-import { ChevronRightIcon, ChevronLeftIcon } from '@heroicons/vue/24/outline';
-import SecondaryButton from '../../template/secondary-button/WSecondaryButton.vue';
-
-const currentIndex = ref(0);
-const totalItems = ref(0);
-let intervalId: number | undefined;
-
-onMounted(() => {
-  const slotElements = document.querySelector('.carousel-inner')?.children || [];
-  totalItems.value = slotElements.length;
-  startAutoSlide();
-});
-
-onUnmounted(() => {
-  stopAutoSlide();
-});
-
-const next = () => {
-  currentIndex.value = (currentIndex.value + 1) % totalItems.value;
-};
-
-const prev = () => {
-  currentIndex.value = (currentIndex.value + totalItems.value - 1) % totalItems.value;
-};
-
-const startAutoSlide = () => {
-  intervalId = setInterval(() => {
-    next();
-  }, 5000) as unknown as number
-};
-
-const stopAutoSlide = () => {
-  if (intervalId !== undefined) {
-    clearInterval(intervalId);
-  }
-};
-</script>
-
-<style scoped>
-.carousel {
-  position: relative;
-  overflow: hidden;
-}
-.carousel-inner {
-  display: flex;
-  transition: transform 0.5s ease;
-  width: 100%;
-}
-.carousel-inner > * {
-  flex: 0 0 100%;
-}
-.prev-btn,
-.next-btn {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  padding: 10px 20px;
-  border: none;
-  background-color: #333;
-  color: white;
-  cursor: pointer;
-  z-index: 10;
-}
-.prev-btn {
-  left: 10px;
-}
-.next-btn {
-  right: 10px;
-}
-</style>

package/basic/checkbox/WCheckbox.spec.ts

@@ -1,58 +0,0 @@
-// Checkbox.spec.ts
-import { describe, it, expect } from 'vitest';
-import { mount } from '@vue/test-utils';
-import Checkbox from './Checkbox.vue';
-
-// コンポーネントのレンダリングをテスト
-describe('Checkbox.vue', () => {
-  it('タイトルを props 経由で受け取り、表示する', () => {
-    const title = 'コメントを受け取る';
-    const wrapper = mount(Checkbox, {
-      props: { title },
-    });
-
-    // props 経由で渡したタイトルが正しく表示されていることを確認
-    expect(wrapper.text()).toContain(title);
-  });
-
-  it('チェックボックスが正しくレンダリングされる', () => {
-    const wrapper = mount(Checkbox, {
-      props: {
-        title: 'テストタイトル',
-      },
-    });
-
-    // input 要素が存在することを確認
-    expect(wrapper.find('input[type="checkbox"]').exists()).toBeTruthy();
-  });
-
-  // it('チェックボックスがユーザーの操作に応じて状態が変化する', async () => {
-  //   const wrapper = mount(Checkbox, {
-  //     props: {
-  //       title: 'インタラクティブテスト',
-  //     },
-  //   });
-
-  //   // チェックボックスを見つけて、クリックする
-  //   const checkbox = wrapper.find('input[type="checkbox"]');
-  //   await checkbox.setValue(true);
-
-  //   // チェックボックスがチェックされたことを確認
-  //   expect(checkbox.element.checked).toBeTruthy();
-  // });
-
-  it('スロットを介して追加の内容をレンダリングできる', () => {
-    const wrapper = mount(Checkbox, {
-      props: {
-        title: 'スロットテスト',
-      },
-      slots: {
-        default: '<p class="additional-content">追加の内容</p>',
-      },
-    });
-
-    // スロット経由で渡された追加の内容がレンダリングされていることを確認
-    expect(wrapper.find('.additional-content').exists()).toBeTruthy();
-    expect(wrapper.text()).toContain('追加の内容');
-  });
-});

package/basic/checkbox/WCheckbox.stories.ts

@@ -1,51 +0,0 @@
-// Replace vue3 with vue if you are using Storybook for Vue 2
-import type { Meta, StoryObj } from '@storybook/vue3';
-import Checkbox from './Checkbox.vue';
-
-type CheckboxProps = InstanceType<typeof Checkbox>['$props']
-
-const meta: Meta<typeof Checkbox> = {
-  component: Checkbox,
-};
-
-export default meta;
-type Story = StoryObj<typeof Checkbox>;
-
-/*
- *👇 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: { Checkbox },
-    template: '<Checkbox></Checkbox>',
-  }),
-};
-
-export const WithTitle: Story = {
-  render: (args: CheckboxProps) => ({
-    setup() {
-      return {
-        ...args
-      }
-    },
-    components: { Checkbox },
-    template: '<Checkbox title="利用規約に同意" :classes="classes"></Checkbox>',
-  }),
-  args: {
-    title: 'ダッシュボード',
-    classes: {
-      text: {
-        color: 'text-onSurface dark:text-onSurface-dark'
-      },
-    }
-  }
-};
-
-export const WithSlot: Story = {
-  render: () => ({
-    components: { Checkbox },
-    template: '<Checkbox><p id="comments-description" class="text-gray-500">Get notified when someones posts a comment on a posting.</p></Checkbox>',
-  }),
-};

package/basic/checkbox/WCheckbox.vue

@@ -1,42 +0,0 @@
-<!-- eslint-disable vue/multi-word-component-names -->
-<template>
-  <fieldset>
-    <legend class="sr-only">Notifications</legend>
-    <div class="space-y-5">
-      <div class="relative flex items-start">
-        <div class="flex h-6 items-center">
-          <input id="comments" aria-describedby="comments-description" name="comments" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600" >
-        </div>
-        <div class="ml-3 text-sm leading-6">
-          <label for="comments" class="font-medium" :class="[mergedClasses.text?.color]">{{ title }}</label>
-          <slot />
-        </div>
-      </div>
-    </div>
-  </fieldset>
-</template>
-
-<script setup lang="ts">
-import { deepMergeClassObject } from '../../util';
-import type { ClassObject } from '../../types/ClassObject';
-import { defineProps, type PropType } from 'vue';
-
-const props = defineProps({
-  title: {
-    type: String as PropType<string>,
-    required: true
-  },
-  classes: {
-    type: Object as PropType<ClassObject>,
-  }
-})
-
-const defaultClasses: ClassObject = {
-  text: {
-    color: 'text-gray-900'
-  }
-}
-
-// props.classesが渡されていない場合、defaultClassesを使用する
-const mergedClasses = props.classes ? deepMergeClassObject(defaultClasses, props.classes) : defaultClasses;
-</script>

package/basic/date-picker/WDatePicker.stories.ts

@@ -1,79 +0,0 @@
-// Replace vue3 with vue if you are using Storybook for Vue 2
-import type { Meta, StoryObj } from '@storybook/vue3';
-import dayjs from 'dayjs';
-import DatePicker from './WDatePicker.vue';
-
-type DatePickerProps = InstanceType<typeof DatePicker>['$props']
-
-const meta: Meta<typeof DatePicker> = {
-  component: DatePicker,
-};
-
-export default meta;
-type Story = StoryObj<typeof DatePicker>;
-
-/*
- *👇 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: DatePickerProps) => ({
-    setup() {
-      return {
-        ...args
-      }
-    },
-    components: { DatePicker },
-    template: '<DatePicker :disabledDates=["2024-05-10"] :classes="classes"></DatePicker>',
-  }),
-  args: {
-    classes: {
-      text: {
-        color: 'text-onSurface dark:text-onSurface-dark'
-      },
-    }
-  }
-};
-
-export const Range: Story = {
-  render: (args: DatePickerProps) => ({
-    setup() {
-      return {
-        ...args
-      }
-    },
-    components: { DatePicker },
-    template: '<DatePicker :disabledDates=["2024-05-10"] :classes="classes" :min="min" :max="max"></DatePicker>',
-  }),
-  args: {
-    min: dayjs().add(-3, 'day').toDate(),
-    max: dayjs().add(1, 'day').toDate(),
-    classes: {
-      text: {
-        color: 'text-onSurface dark:text-onSurface-dark'
-      },
-    }
-  }
-};
-
-export const OldMonth: Story = {
-  render: (args: DatePickerProps) => ({
-    setup() {
-      return {
-        ...args
-      }
-    },
-    components: { DatePicker },
-    template: '<DatePicker :disabledDates=["2024-05-10"] :classes="classes" :year="year" :month="month"></DatePicker>',
-  }),
-  args: {
-    year: 2000,
-    month: 1,
-    classes: {
-      text: {
-        color: 'text-onSurface dark:text-onSurface-dark'
-      },
-    }
-  }
-};