vanilla-vue-ui 0.0.0 → 0.0.2

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 },
+    ]
+  }
+};

package/template/tree-menu/WTreeMenu.vue

@@ -0,0 +1,152 @@
+<template>
+  <ul role="list" class="flex flex-1 flex-col gap-y-7">
+    <li>
+      <ul role="list" class="-mx-2 space-y-1">
+        <li v-for="item in navigationItems" :key="item.name">
+
+          <SecondaryButton v-if="item.onClick" block @click="clickNavigation(item.onClick)">
+            <component :is="item.icon" :class="[item.current ? 'text-primary dark:text-primary-dark' : 'text-onSurface dark:text-onSurface-dark group-hover:text-primary dark:group-hover:text-primary-dark', 'h-6 w-6 shrink-0 inline mx-2']" aria-hidden="true" />
+            {{ item.name }}
+          </SecondaryButton>
+
+          <!-- メインアイテム -->
+          <div v-else class="flex hover:bg-surfaceHover dark:hover:bg-surfaceHover-dark text-onSurface dark:text-onSurface-dark hover:text-primary dark:hover:text-primary-dark rounded-xl">
+
+            <!-- メインアイテム（リンク） -->
+            <a
+              v-if="item.subItems === undefined"
+              :href="item.href"
+              :class="[
+                item.current ? 'bg-surfaceHover dark:bg-surfaceHover-dark text-primary dark:text-primary-dark' : 'text-onSurface dark:text-onSurface-dark hover:text-primary dark:hover:text-primary-dark hover:bg-surfaceHover dark:hover:bg-surfaceHover-dark',
+                'group flex-auto flex gap-x-3 rounded-xl p-2 text-sm leading-6 font-semibold'
+              ]"
+            >
+              <component
+                :is="item.icon"
+                :class="[
+                  item.current ? 'text-primary dark:text-primary-dark' : 'text-onSurface dark:text-onSurface-dark group-hover:text-primary dark:group-hover:text-primary-dark',
+                  'h-6 w-6 shrink-0'
+                ]"
+                aria-hidden="true"
+              />
+              {{ item.name }}
+            </a>
+
+            <!-- メインアイテム（矢印） -->
+            <span
+              v-else
+              :class="[
+                item.current ? 'bg-surfaceHover dark:bg-surfaceHover-dark text-primary dark:text-primary-dark' : 'text-onSurface dark:text-onSurface-dark hover:text-primary dark:hover:text-primary-dark hover:bg-surfaceHover dark:hover:bg-surfaceHover-dark',
+                'group flex-auto flex gap-x-3 rounded-xl p-2 text-sm leading-6 font-semibold'
+              ]"
+              @click="toggleSubItems(item)">
+
+              <!-- <div class="text-onSurface dark:text-onSurface-dark"> -->
+                <component
+                  :is="ChevronRightIcon"
+                  v-if="item.isOpen === false"
+                  :class="[
+                    'text-onSurface dark:text-onSurface-dark',
+                    'h-6 w-6 shrink-0 inline'
+                  ]"
+                />
+                <component
+                  :is="ChevronDownIcon"
+                  v-if="item.isOpen === true"
+                  :class="[
+                    'text-onSurface dark:text-onSurface-dark',
+                    'h-6 w-6 shrink-0 inline'
+                  ]"
+                />
+              <!-- </div> -->
+
+              <!-- ここまで -->
+              <component
+                :is="item.icon"
+                :class="[
+                  item.current ? 'text-primary dark:text-primary-dark' : 'text-onSurface dark:text-onSurface-dark group-hover:text-primary dark:group-hover:text-primary-dark',
+                  'h-6 w-6 shrink-0'
+                ]"
+                aria-hidden="true"
+              />
+              {{ item.name }}
+            </span>
+          </div>
+
+          <!-- サブアイテム -->
+          <template v-if="item.subItems && item.isOpen === true">
+            <ul role="list" class="ml-4 space-y-1">
+              <li v-for="subItem in item.subItems" :key="subItem.name">
+                <SecondaryButton v-if="subItem.onClick" block @click="clickNavigation(subItem.onClick)">
+                  <component :is="subItem.icon" :class="[subItem.current ? 'text-primary dark:text-primary-dark' : 'text-onSurface dark:text-onSurface-dark group-hover:text-primary dark:group-hover:text-primary-dark', 'h-6 w-6 shrink-0 inline mx-2']" aria-hidden="true" />
+                  {{ subItem.name }}
+                </SecondaryButton>
+
+                <a
+                  v-else
+                  :href="subItem.href"
+                  :class="[
+                    subItem.current ? 'bg-surfaceHover dark:bg-surfaceHover-dark text-primary dark:text-primary-dark' : 'text-onSurface dark:text-onSurface-dark hover:text-primary dark:hover:text-primary-dark hover:bg-surfaceHover dark:hover:bg-surfaceHover-dark',
+                    'group flex gap-x-3 rounded-xl p-2 text-sm leading-6 font-semibold'
+                  ]"
+                >
+                  <component
+                    :is="subItem.icon"
+                    :class="[
+                      subItem.current ? 'text-primary dark:text-primary-dark' : 'text-onSurface dark:text-onSurface-dark group-hover:text-primary dark:group-hover:text-primary-dark',
+                      'h-6 w-6 shrink-0'
+                    ]"
+                    aria-hidden="true"
+                  />
+                  {{ subItem.name }}
+                </a>
+              </li>
+            </ul>
+          </template>
+        </li>
+      </ul>
+    </li>
+  </ul>
+</template>
+
+<script setup lang="ts">
+import type { TreeMenuContent } from './TreeMenuContent'
+import { ref, type PropType } from 'vue'
+import {
+  ChevronRightIcon,
+  ChevronDownIcon
+} from '@heroicons/vue/24/outline'
+import SecondaryButton from '../secondary-button/WSecondaryButton.vue'
+
+const props = defineProps({
+  navigationItems: {
+    type: Array as PropType<TreeMenuContent[]>,
+    required: true
+  }
+})
+
+const navigationItems = ref(props.navigationItems)
+
+function clickNavigation(func: (() => void) | null | undefined) {
+  if (func) {
+    func();
+  } else {
+    console.error("func is null or undefined");
+  }
+}
+
+function toggleSubItems(item: TreeMenuContent) {
+  navigationItems.value = navigationItems.value.map((currentItem: TreeMenuContent) => {
+    if (currentItem.name === item.name) {
+
+      if (currentItem.isOpen === true) {
+        currentItem.isOpen = false
+      } else {
+        currentItem.isOpen = true
+      }
+      
+    }
+    return currentItem
+  })
+}
+</script>