vanilla-vue-ui 0.0.7 → 0.0.9

package/basic/date-picker/WDatePicker.vue

@@ -0,0 +1,271 @@
+<template>
+  <div class="mt-10 text-center">
+    <div :class="['flex items-center', mergedClasses.text?.color]">
+      <button
+        type="button"
+        class="-m-1.5 flex flex-none items-center justify-center p-1.5 text-onSurface dark:text-onSurface-dark hover:text-onSurface/10 dark:hover:text-onSurface-dark/10"
+        @click="previousMonth"
+      >
+        <span class="sr-only">Previous month</span>
+        <ChevronLeftIcon class="h-5 w-5" aria-hidden="true" />
+      </button>
+      <div class="flex-auto text-sm font-semibold">{{ currentYear + '年 ' + currentMonth + '月' }}</div>
+      <button
+        type="button"
+        class="-m-1.5 flex flex-none items-center justify-center p-1.5 text-onSurface dark:text-onSurface-dark hover:text-onSurface/10 dark:hover:text-onSurface-dark/10"
+        @click="nextMonth"
+      >
+        <span class="sr-only">Next month</span>
+        <ChevronRightIcon class="h-5 w-5" aria-hidden="true" />
+      </button>
+    </div>
+    
+    <!-- Week -->
+    <div class="mt-6 grid grid-cols-7 text-xs leading-6 text-onSurface dark:text-onSurface-dark">
+      <template v-for="dayOfTheWeek in daysOfTheWeek" :key="dayOfTheWeek">
+        <div>{{ dayOfTheWeek }}</div>
+      </template>
+    </div>
+    <div class="isolate mt-2 grid grid-cols-7 gap-px rounded-lg bg-outline dark:bg-outline-dark text-sm shadow ring-1 ring-outline dark:ring-outline-dark">
+      <button
+       v-for="(day, dayIdx) in days" 
+       :key="day.date" type="button"
+       :disabled="day.disabled ? true : false"
+       :class="[
+        'py-1.5 hover:bg-surface/10 dark:hober:bg-surface-dark/10 focus:z-10',
+        day.isCurrentMonth && !day.disabled ? mergedClasses.backgroundColor : 'bg-surface/10 dark:bg-surface-dark/10',
+        (day.isSelected || day.isToday) && 'font-semibold',
+        day.isSelected && 'text-onPrimary dark:text-onPrimary',
+        !day.isSelected && day.isCurrentMonth && !day.isToday && 'text-onSurface/40 dark:text-onSurface-dark/40', // 通常の日付
+        !day.isSelected && !day.isCurrentMonth && !day.isToday && 'text-onSurface dark:text-onSurface-dark', // 選択した日付
+        day.isToday && !day.isSelected && 'text-primary dark:text-primary-dark',
+        dayIdx === 0 && 'rounded-tl-lg',
+        dayIdx === 6 && 'rounded-tr-lg',
+        dayIdx === days.length - 7 && 'rounded-bl-lg',
+        dayIdx === days.length - 1 && 'rounded-br-lg',
+      ]"
+       @click="changeDatePicker(day)">
+        <time
+          :datetime="day.date"
+          :class="[
+            'mx-auto flex h-7 w-7 items-center justify-center rounded-full',
+            day.isSelected && day.isToday && 'bg-primary dark:bg-primary-dark', // 選択した時の円かつ当日
+            day.isSelected && !day.isToday && 'bg-primary dark:bg-primary-dark' // 選択した時の円
+          ]"
+        >
+          {{ getDayDisplayString(day) }}
+        </time>
+      </button>
+    </div>
+  </div>
+  <input
+   ref="input"
+   hidden
+   @change="changeInput($event)"
+  >
+</template>
+
+<script setup lang="ts">
+import { ref, defineProps, defineEmits, type PropType } from 'vue'
+import {
+  ChevronLeftIcon,
+  ChevronRightIcon,
+} from '@heroicons/vue/20/solid'
+import dayjs from 'dayjs';
+import weekday from 'dayjs/plugin/weekday';
+import localeData from 'dayjs/plugin/localeData';
+import 'dayjs/locale/ja';
+import type { ClassObject } from '../../types/ClassObject';
+import { deepMergeClassObject } from '../../util';
+
+dayjs.extend(weekday);
+dayjs.extend(localeData);
+
+const props = defineProps({
+  locale: {
+    type: String as PropType<string>,
+    default() {
+      return 'en'
+    }
+  },
+  disabledDates: {
+    type: Array as PropType<string[]>,
+    default() {
+      return []
+    }
+  },
+  min: {
+    type: Date,
+  },
+  max: {
+    type: Date,
+  },
+  year: {
+    type: Number as PropType<number>,
+    default() {
+      return new Date().getFullYear()
+    }
+  },
+  month: {
+    type: Number as PropType<number>,
+    default() {
+      return new Date().getMonth() + 1
+    }
+  },
+  classes: {
+    type: Object as PropType<ClassObject>,
+  }
+})
+
+const defaultClasses: ClassObject = {
+  base: '',
+  backgroundColor: 'bg-surface dark:bg-surface-dark',
+  text: {
+    color: 'text-onSurface dark:text-onSurface-dark'
+  },
+  rounded: '',
+  color: '',
+  border: '',
+}
+
+// props.classesが渡されていない場合、defaultClassesを使用する
+const mergedClasses = props.classes ? deepMergeClassObject(defaultClasses, props.classes) : defaultClasses;
+
+const input = ref<HTMLElement | null>(null)
+const daysOfTheWeek = ref<string[]>([])
+
+// emit を定義
+const emit = defineEmits<{
+  change: [value: Event]
+}>()
+
+// 曜日を設定する
+daysOfTheWeek.value = getDaysOfTheWeek(props.locale)
+
+// ロケールを指定すると曜日を返す関数
+function getDaysOfTheWeek(locale: string): string[] {
+  if (locale === 'ja') {
+    return ['月', '火', '水', '木', '金', '土', '日']
+  } else {
+    return ['M', 'T', 'W', 'T', 'F', 'S', 'S']
+  }
+}
+
+function changeDatePicker(day: Day) {
+
+  // myInput が HTMLInputElement であることを TypeScript に伝える
+  const inputElement = input.value as HTMLInputElement | null;
+  
+  if (inputElement) {
+    inputElement.value = day.date;
+    const event = new Event('change');
+    inputElement.dispatchEvent(event);
+  } else {
+    console.error('input element is not mounted yet');
+  }
+}
+
+function changeInput(event: Event) {
+
+  console.log('input chenge.')
+
+  // days に反映
+  const target = event.target as HTMLInputElement
+  selectDay(target.value)
+
+  emit('change', event)
+}
+
+interface Day {
+  date: string;
+  isCurrentMonth?: boolean;
+  isToday?: boolean;
+  isSelected?: boolean;
+  disabled?: boolean;
+}
+
+const currentYear = ref<number>(props.year)
+const currentMonth = ref<number>(props.month)
+const days = ref<Day[]>([])
+
+// 日付データを生成
+days.value = generateCalendarDays({ year: currentYear.value, month: currentMonth.value, locale: props.locale })
+
+function getDayDisplayString(day: Day): string {
+
+    const date: string = day.date
+    return date.split('-').pop()?.replace(/^0/, '') || ''
+}
+
+function generateCalendarDays({ year, month, locale, selectedDates }: { year: number, month: number, locale: string, selectedDates?: string[] }): Day[] {
+  dayjs.locale(locale); // ロケールを設定
+  const days: Day[] = [];
+  const today = dayjs().startOf('day').format('YYYY-MM-DD');
+
+  // new Date に month を流す時は -1 する必要があるので注意
+  const monthIndex = month - 1
+
+  // 月の最初の日と最後の日を取得
+  const firstDayOfMonth = dayjs(new Date(year, monthIndex, 1));
+  const lastDayOfMonth = dayjs(new Date(year, monthIndex + 1, 0));
+
+  // 前月の最後の月曜日から始まるように調整
+  const startDay = firstDayOfMonth.subtract((firstDayOfMonth.weekday() + 6) % 7, 'day');
+
+  // 次月の最初の日曜日で終わるように調整
+  const endDay = lastDayOfMonth.add(7 - lastDayOfMonth.weekday(), 'day');
+
+  for (let d = dayjs(startDay); d.isBefore(endDay) || d.isSame(endDay, 'day'); d = d.add(1, 'day')) {
+
+    const isDisabled = props.disabledDates.includes(d.format('YYYY-MM-DD')) ||
+      (props.max ? d.toDate() > props.max : false) ||
+      (props.min ? d.toDate() < props.min : false)
+
+    days.push({
+      date: d.format('YYYY-MM-DD'),
+      isCurrentMonth: d.month() === monthIndex,
+      isToday: d.format('YYYY-MM-DD') === today,
+      isSelected: selectedDates ? selectedDates.includes(d.format('YYYY-MM-DD')) : false,
+      disabled: isDisabled
+    });
+  }
+
+  return days;
+}
+
+function nextMonth() {
+
+  if (currentMonth.value < 12) {
+    currentMonth.value++
+  } else {
+    currentMonth.value = 1
+    currentYear.value++
+  }
+
+  // 日付データを生成
+  days.value = generateCalendarDays({ year: currentYear.value, month: currentMonth.value, locale: props.locale })
+}
+
+function previousMonth() {
+  
+  if (currentMonth.value > 1) {
+    currentMonth.value--
+  } else {
+    currentMonth.value = 12
+    currentYear.value--
+  }
+
+  // 日付データを生成
+  days.value = generateCalendarDays({ year: currentYear.value, month: currentMonth.value, locale: props.locale })
+}
+
+function selectDay(selectedDate: string) {
+
+  const newDays =  days.value.map(day => ({
+    ...day,
+    isSelected: day.date === selectedDate ? true : false
+  }));
+
+  days.value = newDays
+}
+</script>

package/basic/dialog/DialogStore.ts

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

package/basic/dialog/WDialog.stories.ts

@@ -0,0 +1,38 @@
+// Replace vue3 with vue if you are using Storybook for Vue 2
+import type { Meta, StoryObj } from '@storybook/vue3';
+import { DialogStore } from './DialogStore';
+import Dialog from './Dialog.vue';
+
+const meta: Meta<typeof Dialog> = {
+  component: Dialog,
+};
+
+export default meta;
+type Story = StoryObj<typeof Dialog>;
+
+/*
+ *👇 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 dialogStore = DialogStore()
+      dialogStore.open({ title: 'セール', contentText: '初回５０パーセントオフキャンペーン実施中！！', persistent: true })
+    },
+    components: { Dialog },
+    template: '<Dialog></Dialog>',
+  }),
+};
+
+export const WithCancelButton: Story = {
+  render: () => ({
+    setup() {
+      const dialogStore = DialogStore()
+      dialogStore.open({ title: 'セール', contentText: '初回５０パーセントオフキャンペーン実施中！！', cancelButtonText: 'キャンセル', persistent: true })
+    },
+    components: { Dialog },
+    template: '<Dialog></Dialog>',
+  }),
+};

package/basic/dialog/WDialog.vue

@@ -0,0 +1,66 @@
+<!-- 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="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>
+                <div class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-green-100">
+                  <CheckIcon class="h-6 w-6 text-green-600" aria-hidden="true" />
+                </div>
+                <div class="mt-3 text-center sm:mt-5">
+                  <DialogTitle as="h3" class="text-base font-semibold leading-6 text-gray-900">{{ title }}</DialogTitle>
+                  <div class="mt-2">
+                    <p class="text-sm text-gray-500">{{ contentText }}</p>
+                    <slot />
+                  </div>
+                </div>
+              </div>
+              <div v-if="cancelButtonText.length == 0" class="mt-5 sm:mt-6">
+                <PrimaryButton type="button" class="inline-flex w-full justify-center rounded-md px-3 py-2 text-sm font-semibold shadow-sm" @click="close({ isConfirmed: true })">{{ okButtonText }}</PrimaryButton>
+              </div>
+
+              <div v-else class="mt-5 grid grid-flow-row-dense grid-cols-2 gap-3 sm:mt-6">
+                <SecondaryButton ref="cancelButtonRef" type="button" class="inline-flex w-full justify-center rounded-md px-3 py-2 text-sm font-semibold shadow-sm" @click="close({ isConfirmed: false })">{{ cancelButtonText }}</SecondaryButton>
+                <PrimaryButton type="button" class="inline-flex w-full justify-center rounded-md px-3 py-2 text-sm font-semibold shadow-sm" @click="close({ isConfirmed: true })">{{ okButtonText }}</PrimaryButton>
+              </div>
+            </DialogPanel>
+          </TransitionChild>
+        </div>
+      </div>
+    </Dialog>
+  </TransitionRoot>
+</template>
+
+<script setup lang="ts">
+import { Dialog, DialogPanel, DialogTitle, TransitionChild, TransitionRoot } from '@headlessui/vue'
+import { CheckIcon } from '@heroicons/vue/24/outline'
+import { DialogStore } from './DialogStore'
+import PrimaryButton from '../../template/primary-button/PrimaryButton.vue';
+import SecondaryButton from '../../template/secondary-button/SecondaryButton.vue'
+
+// ダイアログ用 state を購読
+const dialogStore = DialogStore()
+// ストアの状態とアクションをコンポーネントにマッピング
+const isOpen = dialogStore.isOpen;
+const title = dialogStore.getTitle;
+const contentText = dialogStore.getContentText;
+const okButtonText = dialogStore.getOkButtonText
+const cancelButtonText = dialogStore.getCancelButtonText
+const persistent = dialogStore.getPersistent
+
+// ダイアログを閉じる
+function close({ isConfirmed }: { isConfirmed: boolean | null }) {
+  
+  // 回答が強制されていて、ボタンを押してない場合はダイアログを閉じさせない
+  if (persistent.value == false || isConfirmed != null) {
+    dialogStore.close({ isConfirmed: isConfirmed })
+  }
+}
+</script>

package/basic/divider/WDivider.spec.ts

@@ -0,0 +1,42 @@
+// Divider.spec.ts
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import Divider from './Divider.vue';
+
+// コンポーネントのテストを記述します
+describe('Divider', () => {
+  // コンポーネントが正しくレンダリングされるかテスト
+  it('renders properly', () => {
+    const wrapper = mount(Divider);
+    expect(wrapper.exists()).toBeTruthy();
+    expect(wrapper.classes()).toContain('relative');
+  });
+
+  // スロットを通じて渡された内容が正しく表示されるかテスト
+  it('displays slot content', () => {
+    const slotContent = 'テストコンテンツ';
+    const wrapper = mount(Divider, {
+      slots: {
+        default: slotContent,
+      },
+    });
+    expect(wrapper.text()).toContain(slotContent);
+  });
+
+  // ボーダーのクラスが適用されているかテスト
+  it('applies border class correctly', () => {
+    const wrapper = mount(Divider);
+    const border = wrapper.find('.border-t');
+    expect(border.exists()).toBeTruthy();
+    expect(border.classes()).toContain('border-gray-300');
+  });
+
+  // テキスト色とサイズのクラスが適用されているかテスト
+  it('applies text color and size classes correctly', () => {
+    const wrapper = mount(Divider);
+    const text = wrapper.find('.text-sm');
+    expect(text.exists()).toBeTruthy();
+    expect(text.classes()).toContain('text-gray-500');
+    expect(text.classes()).toContain('bg-white');
+  });
+});

package/basic/divider/WDivider.stories.ts

@@ -0,0 +1,40 @@
+// Replace vue3 with vue if you are using Storybook for Vue 2
+import type { Meta, StoryObj } from '@storybook/vue3';
+import Divider from './Divider.vue';
+
+type DividerProps = InstanceType<typeof Divider>['$props']
+
+const meta: Meta<typeof Divider> = {
+  component: Divider,
+};
+
+export default meta;
+type Story = StoryObj<typeof Divider>;
+
+/*
+ *👇 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: DividerProps) => ({
+    setup() {
+      return {
+        ...args
+      }
+    },
+    components: { Divider },
+    template: '<Divider :classes="classes">または</Divider>',
+  }),
+  args: {
+    classes: {
+      text: {
+        color: 'text-onSurface dark:text-onSurface-dark',
+        backgroundColor: 'bg-surface dark:bg-surface-dark'
+      },
+      content: {
+        border: 'border-t border-outline dark:border-outline-dark'
+      }
+    }
+  }
+};

package/basic/divider/WDivider.vue

@@ -0,0 +1,56 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <div class="relative">
+    <div class="absolute inset-0 flex items-center" aria-hidden="true">
+      <div
+        :class="[
+          mergedClasses.content?.spacing,
+          mergedClasses.content?.border
+        ]"
+      />
+    </div>
+    <div class="relative flex justify-center">
+      <span
+        :class="[
+          mergedClasses.text?.backgroundColor,
+          mergedClasses.text?.spacing,
+          mergedClasses.text?.size,
+          mergedClasses.text?.color,
+          mergedClasses.text?.rounded
+        ]"
+      >
+        <slot />
+      </span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { deepMergeClassObject } from '../../util';
+import type { ClassObject } from '../../types/ClassObject';
+import { defineProps, type PropType } from 'vue';
+
+const props = defineProps({
+  classes: {
+    type: Object as PropType<ClassObject>,
+  }
+})
+
+const defaultClasses: ClassObject = {
+  content: {
+    spacing: 'w-full',
+    border: 'border-t border-gray-300',
+  },
+  text: {
+    backgroundColor: 'bg-white',
+    spacing: 'px-2',
+    size: 'text-sm',
+    color: 'text-gray-500',
+    rounded: 'rounded-full'
+  }
+}
+
+// props.classesが渡されていない場合、defaultClassesを使用する
+const mergedClasses = props.classes ? deepMergeClassObject(defaultClasses, props.classes) : defaultClasses;
+
+</script>

package/basic/feed/TimeLine.ts

@@ -0,0 +1,9 @@
+import type { Component } from "vue"
+
+export type TimeLine = {
+  id: number
+  content: string
+  date: string
+  icon: Component
+  iconBackground: string
+}

package/basic/feed/WFeed.spec.ts

@@ -0,0 +1,64 @@
+// Feed.spec.ts
+import { describe, it, expect, beforeEach } from 'vitest'
+import type { VueWrapper } from '@vue/test-utils';
+import { mount } from '@vue/test-utils'
+import Feed from './Feed.vue'
+import { CheckIcon, HandThumbUpIcon, UserIcon } from '@heroicons/vue/20/solid'
+
+// タイムラインのダミーデータを用意します
+const timeline = [
+  {
+    id: 1,
+    content: 'Applied to',
+    date: '2020-09-20',
+    icon: UserIcon,
+    iconBackground: 'bg-gray-400',
+  },
+  {
+    id: 2,
+    content: 'Advanced to phone screening by',
+    date: '2020-09-22',
+    icon: HandThumbUpIcon,
+    iconBackground: 'bg-blue-500',
+  },
+  {
+    id: 3,
+    content: 'Completed phone screening with',
+    date: '2020-09-28',
+    icon: CheckIcon,
+    iconBackground: 'bg-green-500',
+  },
+]
+
+describe('Feed.vue', () => {
+  let wrapper: VueWrapper
+
+  beforeEach(() => {
+    // 各テストケース実行前にコンポーネントをマウントします
+    wrapper = mount(Feed, {
+      props: {
+        timeline: timeline
+      }
+    })
+  })
+
+  it('タイムラインが正しく表示されること', () => {
+    // タイムラインのイベント数が期待通りであることを検証します
+    const events = wrapper.findAll('li')
+    expect(events).toHaveLength(timeline.length)
+
+    // 各イベントが正しくレンダリングされていることを検証します
+    events.forEach((event, index) => {
+      expect(event.text()).toContain(timeline[index].content)
+      expect(event.text()).toContain(timeline[index].date)
+    })
+  })
+
+  it('各イベントに正しいアイコンと背景色が設定されていること', () => {
+    // 各イベントのアイコンと背景色を検証します
+    timeline.forEach((item, index) => {
+      const eventIconWrapper = wrapper.findAll('.flex.items-center')[index]
+      expect(eventIconWrapper.classes()).toContain(item.iconBackground)
+    })
+  })
+})