vanilla-vue-ui 0.0.1 → 0.0.3

package/basic/app-bar/WAppBar.stories.ts

@@ -0,0 +1,41 @@
+// Replace vue3 with vue if you are using Storybook for Vue 2
+import type { Meta, StoryObj } from '@storybook/vue3';
+import AppBar from './WAppBar.vue';
+
+type AppBarProps = InstanceType<typeof AppBar>['$props']
+
+const meta: Meta<typeof AppBar> = {
+  component: AppBar,
+};
+
+export default meta;
+type Story = StoryObj<typeof AppBar>;
+
+/*
+ *👇 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: AppBarProps) => ({
+    setup() {
+      return {
+        ...args
+      }
+    },
+    components: { AppBar },
+    template: '<AppBar :title="title" :classes="classes"></AppBar>',
+  }),
+  args: {
+    title: 'ダッシュボード',
+    classes: {
+      text: {
+        color: 'text-onSurface dark:text-onSurface-dark'
+      },
+      icon: {
+        color: 'text-onSurface dark:text-onSurface-dark'
+      },
+      border: 'border-b-2 border-outline-100 dark:border-outline-dark'
+    }
+  }
+};

package/basic/app-bar/WAppBar.vue

@@ -0,0 +1,48 @@
+<template>
+  <div :class="['sticky top-0 z-40 flex items-center gap-x-6 px-4 py-4 sm:px-6 lg:pl-80', mergedClasses.border]">
+    <button type="button" :class="['-m-2.5 p-2.5 lg:hidden', mergedClasses.icon?.color]" @click="open()">
+      <span class="sr-only">Open sidebar</span>
+      <Bars3Icon class="h-6 w-6" aria-hidden="true" />
+    </button>
+    <div :class="['flex-1 text-sm font-semibold leading-6', mergedClasses.text?.color]">{{ title }}</div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { PropType } from 'vue'
+import {
+  Bars3Icon,
+} from '@heroicons/vue/24/outline'
+import type { ClassObject } from '../../types/ClassObject';
+import { deepMergeClassObject } from '../../util';
+
+const props = defineProps({
+  title: {
+    type: String as PropType<string>,
+    default: "Dashboard"
+  },
+  classes: {
+    type: Object as PropType<ClassObject>,
+  }
+})
+
+const defaultClasses: ClassObject = {
+  text: {
+    color: 'text-onSurface dark:text-onSurface-dark'
+  },
+  icon: {
+    color: 'text-onSurface dark:text-onSurface-dark'
+  },
+  border: 'border-b border-outline dark:border-outline-dark'
+}
+
+// props.classesが渡されていない場合、defaultClassesを使用する
+const mergedClasses = props.classes ? deepMergeClassObject(defaultClasses, props.classes) : defaultClasses;
+
+const emits = defineEmits(['open'])
+
+function open() {
+  emits('open')
+}
+
+</script>

package/basic/banner/BannerStore.ts

@@ -0,0 +1,54 @@
+import { ref, computed } from 'vue'
+import { defineStore } from 'pinia'
+
+export const BannerStore = defineStore('banner', () => {
+
+  // リアクティブにするために ref を使用する
+  const _isOpen = ref(false)
+  const _title = ref('')
+  const _contentText = ref('')
+  const _okButtonText = 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 getPersistent = computed(() => _persistent)
+
+  function open({ title, contentText, okButtonText = 'OK', persistent = false, completion = null }: { title: string; contentText: string; okButtonText?: string; persistent?: boolean; completion?: ((isConfirmed: boolean | null) => void) | null }) {
+
+    _title.value = title
+    _contentText.value = contentText
+    _okButtonText.value = okButtonText
+    _persistent.value = persistent
+    _isOpen.value = true
+    _completion = completion
+  }
+
+  function close({ isConfirmed = null }: { isConfirmed?: boolean | null }) {
+ 
+    _isOpen.value = false
+    _title.value = ''
+    _contentText.value = ''
+    _okButtonText.value = ''
+    _persistent.value = false
+
+    // コールバック関数が含まれていれば実行
+    if (_completion) {
+
+      // 実行
+      _completion(isConfirmed)
+
+      // リセット
+      _completion = null
+    }
+  }
+
+  return { isOpen, getPersistent, getTitle, getContentText, getOkButtonText, open, close }
+})

package/basic/banner/WBanner.stories.ts

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

package/basic/banner/WBanner.vue

@@ -0,0 +1,41 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <div v-if="isOpen">
+    <div class="relative isolate flex items-center gap-x-6 overflow-hidden bg-gray-50 px-6 py-2.5 sm:px-3.5 sm:before:flex-1">
+      <div class="absolute left-[max(-7rem,calc(50%-52rem))] top-1/2 -z-10 -translate-y-1/2 transform-gpu blur-2xl" aria-hidden="true">
+        <div class="aspect-[577/310] w-[36.0625rem] bg-gradient-to-r from-[#ff80b5] to-[#9089fc] opacity-30" style="clip-path: polygon(74.8% 41.9%, 97.2% 73.2%, 100% 34.9%, 92.5% 0.4%, 87.5% 0%, 75% 28.6%, 58.5% 54.6%, 50.1% 56.8%, 46.9% 44%, 48.3% 17.4%, 24.7% 53.9%, 0% 27.9%, 11.9% 74.2%, 24.9% 54.1%, 68.6% 100%, 74.8% 41.9%)" />
+      </div>
+      <div class="absolute left-[max(45rem,calc(50%+8rem))] top-1/2 -z-10 -translate-y-1/2 transform-gpu blur-2xl" aria-hidden="true">
+        <div class="aspect-[577/310] w-[36.0625rem] bg-gradient-to-r from-[#ff80b5] to-[#9089fc] opacity-30" style="clip-path: polygon(74.8% 41.9%, 97.2% 73.2%, 100% 34.9%, 92.5% 0.4%, 87.5% 0%, 75% 28.6%, 58.5% 54.6%, 50.1% 56.8%, 46.9% 44%, 48.3% 17.4%, 24.7% 53.9%, 0% 27.9%, 11.9% 74.2%, 24.9% 54.1%, 68.6% 100%, 74.8% 41.9%)" />
+      </div>
+      <div class="flex flex-wrap items-center gap-x-4 gap-y-2">
+        <p class="text-sm leading-6 text-gray-900">
+          <strong class="font-semibold">{{ title }}</strong><svg viewBox="0 0 2 2" class="mx-2 inline h-0.5 w-0.5 fill-current" aria-hidden="true"><circle cx="1" cy="1" r="1" /></svg>{{ contentText }}
+        </p>
+        <slot />
+      </div>
+      <div class="flex flex-1 justify-end">
+        <button type="button" class="-m-3 p-3 focus-visible:outline-offset-[-4px]" @click="close">
+          <span class="sr-only">Dismiss</span>
+          <XMarkIcon class="h-5 w-5 text-gray-900" aria-hidden="true" />
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+  
+<script setup lang="ts">
+import { XMarkIcon } from '@heroicons/vue/20/solid'
+import { BannerStore } from './BannerStore'
+
+const bannerStore = BannerStore()
+// ストアの状態とアクションをコンポーネントにマッピング
+const isOpen = bannerStore.isOpen;
+const title = bannerStore.getTitle;
+const contentText = bannerStore.getContentText;
+
+function close() {
+  bannerStore.close({ isConfirmed: false })
+}
+
+</script>

package/basic/breadcrumb/WBreadcrumb.stories.ts

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

package/basic/breadcrumb/WBreadcrumb.vue

@@ -0,0 +1,97 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <nav class="flex" aria-label="Breadcrumb">
+    <ol role="list" class="flex items-center space-x-4">
+      <li>
+        <div>
+          <a href="/" :class="mergedClasses.base">
+            <HomeIcon class="h-5 w-5 flex-shrink-0" aria-hidden="true" />
+            <span class="sr-only">Home</span>
+          </a>
+        </div>
+      </li>
+      <li v-for="page in pages" :key="page.name">
+        <div class="flex items-center">
+          <ChevronRightIcon :class="mergedClasses.icon?.base" aria-hidden="true" />
+          <a
+           :href="`${page.href}`"
+           :class="mergedClasses.text?.base"
+           :aria-current="page.current ? 'page' : undefined"
+          >
+            {{ page.name }}
+          </a>
+        </div>
+      </li>
+    </ol>
+  </nav>
+</template>
+
+<script setup lang="ts">
+import { ChevronRightIcon, HomeIcon } from '@heroicons/vue/20/solid'
+import { useRouter, useRoute } from 'vue-router'
+import type { RouteMeta } from 'vue-router';
+import { ref, onMounted, watch, type PropType } from 'vue';
+import type { ClassObject } from '../../types/ClassObject';
+import { deepMergeClassObject } from '../../util';
+
+const props = defineProps({
+  classes: {
+    type: Object as PropType<ClassObject>,
+  }
+})
+
+const defaultClasses: ClassObject = {
+  base: 'text-gray-400 hover:text-gray-500',
+  text: {
+    base: 'ml-4 text-sm font-medium text-gray-500 hover:text-gray-700'
+  },
+  icon: {
+    base: 'h-5 w-5 flex-shrink-0 text-gray-400'
+  }
+}
+
+// props.classesが渡されていない場合、defaultClassesを使用する
+const mergedClasses = props.classes ? deepMergeClassObject(defaultClasses, props.classes) : defaultClasses;
+
+type Page = {
+    name: string;
+    href: string;
+    current: boolean;
+};
+
+const pages = ref<Page[]>([]);
+
+const router = useRouter();
+const route = useRoute();
+
+onMounted(set);
+watch(() => route.path, set);
+
+function set() {
+  const pathSegments = splitPath(route.path);
+  let fullPath = '';
+
+  pages.value = pathSegments.map((segment, index) => {
+    fullPath += '/' + segment;
+
+    const metaData = getRouteMeta(fullPath);
+    // タイトルが undefined の場合は segment をそのまま使用
+    const title = metaData?.title as string || segment;
+
+    return {
+      name: title,  // ここで string 型を強制的に指定
+      href: fullPath,
+      current: (index === pathSegments.length - 1)  // 最後のセグメントだけを現在とマーク
+    };
+  });
+}
+
+function splitPath(path: string): string[] {
+  return path.replace(/^\//, '').split('/');
+}
+
+function getRouteMeta(path: string): RouteMeta | undefined {
+  const matchedRoute = router.getRoutes().find(route => route.path === path);
+  return matchedRoute?.meta;
+}
+</script>

package/basic/button/WButton.stories.ts

@@ -25,15 +25,15 @@ export const Primary: Story = {
     },
     components: { WButton },
     template: `
-      <div><w-button :classes="classes">OK</w-button></div>
-      <div><w-button :classes="classes" href="/">OK</w-button></div>
+      <div><w-button>OK</w-button></div>
+      <div><w-button href="/">OK</w-button></div>
     `,
   }),
   args: {
     classes: {
       color: 'text-onSurface dark:text-onSurface-dark',
       backgroundColor: '',
-      border: 'border border-outline-100 dark:border-outline-dark'
+      border: 'border border-outline dark:border-outline-dark'
     }
   }
 };
@@ -45,6 +45,13 @@ export const Block: Story = {
   }),
 };
 
+export const Disabled: Story = {
+  render: () => ({
+    components: { WButton },
+    template: '<w-button :disabled="true">OK</w-button>',
+  }),
+};
+
 export const Size: Story = {
   render: () => ({
     components: { WButton },

package/basic/button/WButton.vue

@@ -67,10 +67,10 @@ const props = defineProps({
 const defaultClasses: ClassObject = {
   base: 'font-bold',
   spacing: 'py-2 px-4',
-  backgroundColor: 'bg-white',
+  backgroundColor: '',
   rounded: 'rounded-full',
-  color: 'hover:bg-gray-50',
-  border: 'border border-gray-200',
+  color: 'text-onSurface dark:text-onSurface-dark hover:bg-surfaceHover dark:hover:bg-surfaceHover-dark',
+  border: 'border border-outline dark:border-outline-dark',
   size: '',
 }
 

package/basic/icon/WIcon.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="w-6 fill-current">
+    <slot />
+  </div>
+</template>

package/basic/range/WRange.vue

@@ -1,23 +1,44 @@
 <template>
-  <input
-    type="range"
-    class="w-full"
-    :class="[
-      mergedClasses.content?.base,
-      mergedClasses.content?.backgroundColor,
-      mergedClasses.content?.rounded,
-      mergedClasses.content?.size,
-    ]"
-    :min="min"
-    :max="max"
-    :step="step"
-    :value="modelValue"
-    @input="inputValue"
-  >
+  <div class="flex">
+    <MinusIcon
+      class="flex-none"
+      :class="[
+        mergedClasses.icon?.color
+      ]"
+      @click="decrement()"
+    />
+    <div
+      class="flex-1 px-2 flex items-center"
+    >
+      <input
+       id="input-range"
+       type="range"
+       class="w-full"
+       :class="[
+          mergedClasses.content?.base,
+          mergedClasses.content?.backgroundColor,
+          mergedClasses.content?.rounded,
+          mergedClasses.content?.size,
+        ]"
+       :min="min"
+       :max="max"
+       :step="step"
+       :value="modelValue"
+       @input="inputValue"
+       >
+    </div>
+    <PlusIcon
+      :class="[
+        mergedClasses.icon?.color,
+      ]"
+      @click="increment()"
+    />
+  </div>
 </template>
 
 <script setup lang="ts">
-import { defineProps, type PropType, ref } from 'vue'
+import { defineProps, onMounted, type PropType, ref } from 'vue'
+import { MinusIcon, PlusIcon } from '@heroicons/vue/24/outline'
 import type { ClassObject } from '../../types/ClassObject';
 import { deepMergeClassObject } from '../../util';
 
@@ -57,12 +78,45 @@ const defaultClasses: ClassObject = {
   },
   content: {
     base: 'appearance-none [-webkit-appearance: none]',
-    backgroundColor: 'bg-gray-400',
+    backgroundColor: 'bg-gray-300',
     rounded: 'rounded-full',
     size: 'h-2'
   }
 }
 
+const inputRangeActiveColor = '#f59e0b'
+const inputRangeInactiveColor = '#d1d5db'
+
+type SliderBackgroundOptions = {
+  value: number
+  max: number
+  min: number
+}
+
+function updateSliderBg(sliderBackgroundOptions: SliderBackgroundOptions) {
+  const inputRange = document.getElementById('input-range') as HTMLInputElement
+  if (inputRange) {
+    const value = sliderBackgroundOptions.value
+    const min = sliderBackgroundOptions.min
+    const max = sliderBackgroundOptions.max
+    const ratio = ((value - min) / (max - min)) * 100
+
+    inputRange.style.background = `linear-gradient(90deg, ${inputRangeActiveColor} ${ratio}%, ${inputRangeInactiveColor} ${ratio}%)`
+  }
+}
+
+onMounted(() => {
+  // つまみの前後で色を塗り分ける
+  const inputRange = document.getElementById('input-range') as HTMLInputElement
+
+  if (inputRange) {
+    updateSliderBg({ value: Number(modelValue.value), max: props.max, min: props.min }) // 初期値を反映
+    inputRange.addEventListener('input', function (e) {
+      updateSliderBg({ value: Number(modelValue.value), max: props.max, min: props.min })
+    })
+  }
+})
+
 // props.classesが渡されていない場合、defaultClassesを使用する
 const mergedClasses = props.classes ? deepMergeClassObject(defaultClasses, props.classes) : defaultClasses;
 
@@ -73,6 +127,28 @@ const emit = defineEmits<{
   'update:modelValue': [value: number]
 }>()
 
+function increment() {
+  if (Number(modelValue.value) < props.max) {
+    const number = Number(modelValue.value)
+    modelValue.value = (number + props.step).toString()
+    emitCustomEvent(modelValue.value)
+    emit('update:modelValue', Number(modelValue.value))
+
+    updateSliderBg({ value: Number(modelValue.value), max: props.max, min: props.min})
+  }
+}
+
+function decrement() {
+  if (Number(modelValue.value) > props.min) {
+    const number = Number(modelValue.value)
+    modelValue.value = (number - props.step).toString()
+    emitCustomEvent(modelValue.value)
+    emit('update:modelValue', Number(modelValue.value))
+
+    updateSliderBg({ value: Number(modelValue.value), max: props.max, min: props.min})
+  }
+}
+
 function inputValue(e: Event) {
   const target = e.target as HTMLInputElement | null
   
@@ -91,3 +167,23 @@ function emitCustomEvent(value: string) {
   emit('customInput', event)
 }
 </script>
+
+<style>
+input[type="range"]::-webkit-slider-thumb {
+  background-color: white;
+  appearance: none;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  border: 2px solid rgb(251, 191, 36);
+}
+
+input[type="range"]::-moz-range-thumb {
+  background-color: white;
+  appearance: none;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  border: 2px solid rgb(251, 191, 36);
+}
+</style>

package/basic/text-field/TextFieldSize.ts

@@ -0,0 +1,2 @@
+export const textFieldSizes = ['xs', 'sm', 'base', 'lg', '2xl', '3xl', '6xl'] as const;
+export type TextFieldSize = typeof textFieldSizes[number];

package/basic/text-field/WTextField.stories.ts

@@ -0,0 +1,88 @@
+// Replace vue3 with vue if you are using Storybook for Vue 2
+import type { Meta, StoryObj } from '@storybook/vue3';
+import TextField from './WTextField.vue';
+
+type TextFieldProps = InstanceType<typeof TextField>['$props']
+
+const meta: Meta<typeof TextField> = {
+  component: TextField,
+};
+
+export default meta;
+type Story = StoryObj<typeof TextField>;
+
+/*
+ *👇 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: TextFieldProps) => ({
+    setup() {
+      return {
+        ...args
+      }
+    },
+    components: { TextField },
+    template: `
+      <div class="p-4">
+        <div class="mb-2"><TextField size="xs" value="John" :classes="classes"></TextField></div>
+        <div class="mb-2"><TextField size="sm" value="John" :classes="classes"></TextField></div>
+        <div class="mb-2"><TextField size="base" value="John" :classes="classes"></TextField></div>
+        <div class="mb-2"><TextField size="lg" value="John" :classes="classes"></TextField></div>
+        <div class="mb-2"><TextField size="2xl" value="John" :classes="classes"></TextField></div>
+        <div class="mb-2"><TextField size="3xl" value="John" :classes="classes"></TextField></div>
+        <div class="mb-2"><TextField size="6xl" value="John" :classes="classes"></TextField></div>
+      </div>
+    `,
+  }),
+  args: {
+    classes: {
+      content: {
+        input: {
+          color: 'text-onSurface dark:text-onSurface-dark',
+          backgroundColor: 'bg-white dark:bg-surface-dark'
+        }
+      }
+    }
+  }
+};
+
+export const WithLabel: Story = {
+  render: () => ({
+    components: { TextField },
+    template: `
+      <div class="mb-2"><TextField size="xs" label="Name"></TextField></div>
+      <div class="mb-2"><TextField size="sm" label="Name"></TextField></div>
+      <div class="mb-2"><TextField size="base" label="Name"></TextField></div>
+      <div class="mb-2"><TextField size="lg" label="Name"></TextField></div>
+      <div class="mb-2"><TextField size="2xl" label="Name"></TextField></div>
+      <div class="mb-2"><TextField size="3xl" label="Name"></TextField></div>
+      <div class="mb-2"><TextField size="6xl" label="Name"></TextField></div>
+    `,
+  }),
+};
+
+export const WithPlaceholder: Story = {
+  render: () => ({
+    components: { TextField },
+    template: '<TextField placeholder="入力してください"></TextField>',
+  }),
+};
+
+export const WithError: Story = {
+  render: (args: TextFieldProps) => ({
+    setup() {
+      return {
+        ...args,
+      };
+    },
+    components: { TextField },
+    template: '<TextField value="John Smith" :rules="rules"></TextField>',
+  }),
+  args: {
+    rules: [
+      (value: string) => value.length <= 5 || 'Max 5 characters',
+    ],
+  },
+};