vanilla-vue-ui 0.0.1 → 0.0.2

package/basic/text-field/WTextField.vue

@@ -0,0 +1,188 @@
+<template>
+  <div
+    :class="[
+      mergedClasses.outline?.base,
+      mergedClasses.outline?.backgroundColor,
+    ]"
+  >
+    <label :for="name" :class="mergedClasses.label?.base">{{ label }}</label>
+    <div class="relative flex">
+      <div class="flex-1">
+        <input
+          :id="id"
+          :name="name"
+          :value="value"
+          :placeholder="placeholder"
+          :required="required"
+          :autocomplete="autocomplete"
+          :class="[
+            textSize,
+            mergedClasses.content?.input?.base,
+            mergedClasses.content?.input?.backgroundColor,
+            mergedClasses.content?.input?.color,
+          ]"
+          :type="type"
+          @change="changeValue($event)"
+          @input="inputValue($event)"
+        >
+      </div>
+      
+      <div class="flex-shrink-0">
+        <slot name="trailing" />
+      </div>
+    </div>
+  </div>
+  <p v-if="errorMassage.length > 0" :class="mergedClasses.errorMessage?.base">{{ errorMassage }}</p>
+</template>
+
+<script setup lang="ts">
+import { ref, defineProps, type PropType, defineExpose } from 'vue'
+import type { ClassObject } from '../../types/ClassObject';
+import { deepMergeClassObject } from '../../util';
+// @ts-ignore
+import type { TextFieldSize } from './TextFieldSize'
+
+const props = defineProps({
+  value: {
+    type: String as PropType<string>
+  },
+  label: {
+    type: String as PropType<string>
+  },
+  placeholder: {
+    type: String as PropType<string>
+  },
+  type: {
+    type: String as PropType<string>
+  },
+  autocomplete: {
+    type: String as PropType<string>
+  },
+  required: {
+    type: Boolean as PropType<boolean>
+  },
+  rules: {
+    type: Array as PropType<ValidationRule[]>
+  },
+  size: {
+    type: String as PropType<TextFieldSize>,
+    default: 'base',
+  },
+  name: {
+    type: String as PropType<string>
+  },
+  id: {
+    type: String as PropType<string>
+  },
+  classes: {
+    type: Object as PropType<ClassObject>,
+  }
+});
+
+
+const defaultClasses: ClassObject = {
+  content: {
+    input: {
+      base: "block w-full border-0 p-0 placeholder:text-gray-400 sm:leading-6 focus:outline-none focus:ring-0",
+      backgroundColor: 'bg-surface dark:bg-surface-dark',
+      color: 'text-onSurface dark:text-onSurface-dark'
+    },
+  },
+  outline: {
+    base: "rounded-md px-3 pb-1.5 pt-2.5 shadow-sm ring-1 ring-inset ring-gray-300 focus-within:ring-2 focus-within:ring-primary dark:focus-within:ring-primary-dark",
+    backgroundColor: 'bg-surface dark:bg-surface-dark',
+  },
+  label: {
+    base: "block text-xs font-medium text-onSurface dark:text-onSurface-dark"
+  },
+  errorMessage: {
+    base: "mt-1 ml-1 text-sm text-red-600"
+  }
+}
+
+// props.classesが渡されていない場合、defaultClassesを使用する
+const mergedClasses = props.classes ? deepMergeClassObject(defaultClasses, props.classes) : defaultClasses;
+
+
+const textSize = ref('text-' + props.size)
+
+// emit を定義
+const emit = defineEmits<{
+  input: [value: Event],
+  change: [value: Event]
+}>()
+
+const errorMassage = ref("")
+
+type ValidationRule = (value: string) => boolean | string
+
+//
+// Sample
+//
+// let rules: ValidationRule[] = [
+//   value => !!value || 'Required.', // required
+//   value => value.length <= 20 || 'Max 20 characters', // max
+//   value => {
+//     const pattern = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
+//     return pattern.test(value) || 'Invalid e-mail.'
+//   }, // email
+// ]
+
+// 初回バリデーション
+// undefined じゃなかったら
+if (typeof props.value === "string") {
+  const setupErrorMessage = validate(props.value)
+  if (setupErrorMessage) {
+    errorMassage.value = setupErrorMessage as string
+  }
+}
+
+// input の変更を受け取る
+function changeValue(event: Event) {
+  const target = event.target as HTMLInputElement | null
+  if (target) {
+    const validationResult = validate(target.value)
+    if (validationResult === true) {
+      // バリデーションに通ったら
+      emit('change', event)
+      errorMassage.value = ""; // エラーメッセージをクリア
+    } else {
+      errorMassage.value = validationResult as string; // エラーメッセージを設定
+    }
+  }
+}
+
+function inputValue(event: Event) {
+  const target = event.target as HTMLInputElement | null
+  if (target) {
+    const validationResult = validate(target.value)
+    if (validationResult === true) {
+      // バリデーションに通ったら
+      errorMassage.value = ""; // エラーメッセージをクリア
+    } else {
+      errorMassage.value = validationResult as string; // エラーメッセージを設定
+    }
+  }
+
+  emit('input', event)
+}
+
+// バリデーション
+function validate(value: string): boolean | string {
+  if (props.rules) {
+    for (const rule of props.rules) {
+      const result = rule(value);
+      if (result !== true) {
+        // ルールが文字列（エラーメッセージ）を返した場合、バリデーション失敗
+        return result;
+      }
+    }
+  }
+  return true; // ルールが設定されてない or すべてのルールが成功
+}
+
+// 外部からも呼び出せるようにする
+defineExpose({
+  validate
+});
+</script>

package/package.json

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

package/template/footer-simple/WFooterSimple.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 FooterSimple from './WFooterSimple.vue';
+
+const meta: Meta<typeof FooterSimple> = {
+  component: FooterSimple,
+};
+
+export default meta;
+type Story = StoryObj<typeof FooterSimple>;
+
+/*
+ *👇 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: { FooterSimple },
+    template: '<FooterSimple></FooterSimple>',
+  }),
+};

package/template/footer-simple/WFooterSimple.vue

@@ -0,0 +1,20 @@
+<template>
+  <footer class="fixed bottom-0">
+    <div class="mb-4 ml-4">
+      <p class="text-center text-xs leading-5 text-gray-500">{{ props.text }}</p>
+    </div>
+  </footer>
+</template>
+
+<script setup lang="ts">
+import { defineProps, type PropType } from 'vue'
+
+const props = defineProps({
+  text: {
+    type: String as PropType<string>,
+    required: false,
+    default: `© 2020 Your Company, Inc. All rights reserved.`
+  }
+})
+
+</script>

package/template/navigation-drawer/NavigationDrawer.stories.ts

@@ -0,0 +1,59 @@
+// Replace vue3 with vue if you are using Storybook for Vue 2
+import type { Meta, StoryObj } from '@storybook/vue3';
+import NavigationDrawer from './NavigationDrawer.vue';
+import {
+  HomeIcon,
+  BellAlertIcon,
+  ChatBubbleBottomCenterTextIcon,
+  Cog6ToothIcon,
+  CurrencyYenIcon,
+  CubeIcon,
+  BookOpenIcon,
+  MinusIcon
+} from '@heroicons/vue/24/outline'
+
+type NavigationDrawerProps = InstanceType<typeof NavigationDrawer>['$props']
+
+const meta: Meta<typeof NavigationDrawer> = {
+  component: NavigationDrawer,
+};
+
+export default meta;
+type Story = StoryObj<typeof NavigationDrawer>;
+
+/*
+ *👇 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: NavigationDrawerProps) => ({
+    setup() {
+      return {
+        ...args
+      }
+    },
+    components: { NavigationDrawer },
+    template: '<NavigationDrawer :title="title" :navigationTop="navigationTop" :navigationBottom="navigationBottom"></NavigationDrawer>',
+  }),
+  args: {
+    title: 'ダッシュボード',
+    navigationTop: [
+      { name: 'メニュー', href: '/menu', onClick: undefined, icon: HomeIcon, current: false },
+      { name: 'リクエスト', href: '/request', icon: CubeIcon, current: false },
+      { name: '履歴', href: '/history', icon: BookOpenIcon, current: false },
+      { name: '支払い', href: '/payment', icon: CurrencyYenIcon, current: false, isOpen: true,
+        subItems: [
+          { name: '現金', href: '/payment', icon: MinusIcon, current: false },
+          { name: 'クレジット', href: '/payment', icon: MinusIcon, current: false }
+        ]
+      },
+      { name: 'メッセージ', href: '/message', icon: BellAlertIcon, current: false },
+      { name: '問い合わせ', href: '/contact', icon: ChatBubbleBottomCenterTextIcon, current: false },
+      { name: '設定', href: '/setting', icon: Cog6ToothIcon, current: false },
+    ],
+    navigationBottom: [
+      { name: 'ログアウト', href: undefined, onClick: () => console.log('click.'), icon: undefined, current: undefined },
+    ]
+  }
+};

package/template/navigation-drawer/NavigationDrawer.vue

@@ -0,0 +1,121 @@
+<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-surface dark:bg-surface-dark 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-outline dark:border-outline-dark bg-surface dark:bg-surface-dark 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 class="" :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/WTreeMenu.vue'
+import AppBar from '../../basic/app-bar/WAppBar.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/template/navigation-drawer/NavigationDrawerContent.ts

@@ -0,0 +1,11 @@
+import type { Component } from 'vue'
+
+export type NavigationDrawerContent = {
+  name: string
+  href?: string
+  onClick?: () => void
+  icon?: Component
+  current?: boolean
+  subItems?: NavigationDrawerContent[]
+  isOpen?: boolean
+}

package/template/primary-button/WPrimaryButton.spec.ts

@@ -0,0 +1,17 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import PrimaryButton from './WPrimaryButton.vue'; // コンポーネントのパスを適切に設定してください
+
+describe('PrimaryButton', () => {
+  it('renders correctly', () => {
+    const wrapper = mount(PrimaryButton, {
+      slots: {
+        default: 'Click Me'
+      }
+    });
+
+    expect(wrapper.html()).toContain('Click Me');
+    expect(wrapper.classes()).toContain('bg-gradient-to-r');
+    expect(wrapper.classes()).toContain('from-primary');
+  });
+});

package/template/primary-button/WPrimaryButton.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 Button from './WPrimaryButton.vue';
+
+const meta: Meta<typeof Button> = {
+  component: Button,
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+/*
+ *👇 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: { Button },
+    template: '<Button>OK</Button>',
+  }),
+};
+
+export const Block: Story = {
+  render: () => ({
+    components: { Button },
+    template: '<Button block>OK</Button>',
+  }),
+};

package/template/primary-button/WPrimaryButton.vue

@@ -0,0 +1,9 @@
+<template>
+  <Button class="bg-gradient-to-r from-primary dark:from-primary-dark via-primaryVia dark:via-primaryVia-dark to-primaryTo dark:to-primaryTo-dark text-white font-bold">
+    <slot></slot>
+  </Button>
+</template>
+
+<script setup lang="ts">
+import Button from '../../basic/button/WButton.vue'
+</script>

package/template/secondary-button/WSecondaryButton.spec.ts

@@ -0,0 +1,17 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import WSecondaryButton from './WSecondaryButton.vue'; // コンポーネントのパスを適切に設定してください
+
+describe('SecondaryButton', () => {
+  it('renders correctly', () => {
+    const wrapper = mount(WSecondaryButton, {
+      slots: {
+        default: 'Click Me'
+      }
+    });
+
+    expect(wrapper.html()).toContain('Click Me');
+    expect(wrapper.classes()).toContain('bg-gradient-to-r');
+    expect(wrapper.classes()).toContain('from-primary');
+  });
+});

package/template/secondary-button/WSecondaryButton.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 Button from './WSecondaryButton.vue';
+
+const meta: Meta<typeof Button> = {
+  component: Button,
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+/*
+ *👇 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: { Button },
+    template: '<Button>OK</Button>',
+  }),
+};
+
+export const Block: Story = {
+  render: () => ({
+    components: { Button },
+    template: '<Button block>OK</Button>',
+  }),
+};

package/template/secondary-button/WSecondaryButton.vue

@@ -0,0 +1,9 @@
+<template>
+  <Button>
+    <slot />
+  </Button>
+</template>
+
+<script setup lang="ts">
+import Button from '../../basic/button/WButton.vue'
+</script>

package/template/tree-menu/TreeMenuContent.ts

@@ -0,0 +1,11 @@
+import type { Component } from 'vue'
+
+export type TreeMenuContent = {
+  name: string
+  href?: string
+  onClick?: () => void
+  icon?: Component
+  current?: boolean
+  subItems?: TreeMenuContent[]
+  isOpen?: boolean
+}

package/template/tree-menu/WTreeMenu.stories.ts

@@ -0,0 +1,55 @@
+// Replace vue3 with vue if you are using Storybook for Vue 2
+import type { Meta, StoryObj } from '@storybook/vue3';
+import WTreeMenu from './WTreeMenu.vue';
+import {
+  HomeIcon,
+  BellAlertIcon,
+  ChatBubbleBottomCenterTextIcon,
+  Cog6ToothIcon,
+  CurrencyYenIcon,
+  CubeIcon,
+  BookOpenIcon,
+  MinusIcon
+} from '@heroicons/vue/24/outline'
+
+type WTreeMenuProps = InstanceType<typeof WTreeMenu>['$props']
+
+const meta: Meta<typeof WTreeMenu> = {
+  component: WTreeMenu,
+};
+
+export default meta;
+type Story = StoryObj<typeof WTreeMenu>;
+
+/*
+ *👇 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: WTreeMenuProps) => ({
+    setup() {
+      return {
+        ...args
+      }
+    },
+    components: { WTreeMenu },
+    template: '<WTreeMenu :navigationItems="navigationItems"></WTreeMenu>',
+  }),
+  args: {
+    navigationItems: [
+      { name: 'メニュー', href: '/menu', onClick: undefined, icon: HomeIcon, current: false },
+      { name: 'リクエスト', href: '/request', icon: CubeIcon, current: false },
+      { name: '履歴', href: '/history', icon: BookOpenIcon, current: false },
+      { name: '支払い', href: '/payment', icon: CurrencyYenIcon, current: false, isOpen: true,
+        subItems: [
+          { name: '現金', href: '/payment', icon: MinusIcon, current: false },
+          { name: 'クレジット', href: '/payment', icon: MinusIcon, current: false }
+        ]
+      },
+      { name: 'メッセージ', href: '/message', icon: BellAlertIcon, current: false },
+      { name: '問い合わせ', href: '/contact', icon: ChatBubbleBottomCenterTextIcon, current: false },
+      { name: '設定', href: '/setting', icon: Cog6ToothIcon, current: false },
+    ]
+  }
+};