vanilla-vue-ui 0.0.8 → 0.0.9

package/basic/feed/WFeed.stories.ts

@@ -0,0 +1,62 @@
+// Replace vue3 with vue if you are using Storybook for Vue 2
+import type { Meta, StoryObj } from '@storybook/vue3';
+import { CheckIcon, HandThumbUpIcon, UserIcon } from '@heroicons/vue/20/solid'
+import Feed from './Feed.vue';
+
+type FeedProps = InstanceType<typeof Feed>['$props']
+
+const meta: Meta<typeof Feed> = {
+  component: Feed,
+};
+
+export default meta;
+type Story = StoryObj<typeof Feed>;
+
+/*
+ *👇 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: FeedProps) => ({
+    setup() {
+      return {
+        ...args,
+      };
+    },
+    components: { Feed, CheckIcon, HandThumbUpIcon, UserIcon },
+    template: '<Feed :timeline="timeline"></Feed>',
+  }),
+  args: {
+    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',
+      },
+      {
+        id: 4,
+        content: 'Advanced to interview by',
+        date: '2020-09-30',
+        icon: HandThumbUpIcon,
+        iconBackground: 'bg-blue-500',
+      },
+    ]
+  },
+};

package/basic/feed/WFeed.vue

@@ -0,0 +1,41 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <div class="flow-root">
+    <ul role="list" class="-mb-8">
+      <li v-for="(event, eventIdx) in timeline" :key="event.id">
+        <div class="relative pb-8">
+          <span v-if="eventIdx !== timeline.length - 1" class="absolute left-4 top-4 -ml-px h-full w-0.5 bg-gray-200" aria-hidden="true" />
+          <div class="relative flex space-x-3">
+            <div>
+              <span :class="[event.iconBackground, 'h-8 w-8 rounded-full flex items-center justify-center ring-8 ring-white']">
+                <component :is="event.icon" class="h-5 w-5 text-white" aria-hidden="true" />
+              </span>
+            </div>
+            <div class="flex min-w-0 flex-1 justify-between space-x-4 pt-1.5">
+              <div>
+                <p class="text-sm text-gray-500">
+                  {{ event.content }}
+                </p>
+              </div>
+              <div class="whitespace-nowrap text-right text-sm text-gray-500">
+                <time :datetime="event.date">{{ event.date }}</time>
+              </div>
+            </div>
+          </div>
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineProps, type PropType } from 'vue';
+import type { TimeLine } from './TimeLine'
+
+defineProps({
+  timeline: {
+    type: Array as PropType<TimeLine[]>,
+    required: true
+  }
+})
+</script>

package/basic/floating-button/WFloatingButton.stories.ts

@@ -0,0 +1,24 @@
+// Replace vue3 with vue if you are using Storybook for Vue 2
+import type { Meta, StoryObj } from '@storybook/vue3';
+
+import FloatingButton from './FloatingButton.vue';
+import { QuestionMarkCircleIcon } from '@heroicons/vue/24/outline'
+
+const meta: Meta<typeof FloatingButton> = {
+  component: FloatingButton,
+};
+
+export default meta;
+type Story = StoryObj<typeof FloatingButton>;
+
+/*
+ *👇 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: { FloatingButton, QuestionMarkCircleIcon },
+    template: '<FloatingButton><QuestionMarkCircleIcon class="h-12 w-12" aria-hidden="true" /></FloatingButton>',
+  }),
+};

package/basic/floating-button/WFloatingButton.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="static">
+    <div class="fixed bottom-4 right-6">
+      <button type="button" :class="classes.base">
+        <slot />
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { PropType } from 'vue';
+import type { ClassObject } from '../../types/ClassObject';
+
+defineProps({
+  classes: {
+    type: Object as PropType<ClassObject>,
+    default() {
+      return {
+        base: 'rounded-full bg-indigo-600 p-1 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600'
+      }
+    }
+  }
+})
+</script>

package/basic/gradient-text/WGradientText.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 GradientText from './GradientText.vue';
+
+const meta: Meta<typeof GradientText> = {
+  component: GradientText,
+};
+
+export default meta;
+type Story = StoryObj<typeof GradientText>;
+
+/*
+ *👇 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: { GradientText },
+    template: '<GradientText>GradientText</GradientText>',
+  }),
+};

package/basic/gradient-text/WGradientText.vue

@@ -0,0 +1,5 @@
+<template>
+  <p class="bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 inline-block text-transparent bg-clip-text">
+    <slot />
+  </p>
+</template>

package/basic/horizontal-scroll/WHorizontalScroll.stories.ts

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

package/basic/horizontal-scroll/WHorizontalScroll.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="flex overflow-scroll">
+    <slot />
+  </div>
+</template>

package/basic/loading/LoadingStore.ts

@@ -0,0 +1,57 @@
+import { ref, computed } from 'vue'
+import { defineStore } from 'pinia'
+
+export const LoadingStore = defineStore('loading', () => {
+
+  // リアクティブにするために 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/loading/WLoading.stories.ts

@@ -0,0 +1,27 @@
+// Replace vue3 with vue if you are using Storybook for Vue 2
+import type { Meta, StoryObj } from '@storybook/vue3';
+import { LoadingStore } from './LoadingStore';
+import Loading from './Loading.vue';
+
+const meta: Meta<typeof Loading> = {
+  component: Loading,
+};
+
+export default meta;
+type Story = StoryObj<typeof Loading>;
+
+/*
+ *👇 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 = LoadingStore()
+      dialogStore.open({ title: 'Loading', contentText: 'しばらくお待ちください', persistent: true })
+    },
+    components: { Loading },
+    template: '<Loading></Loading>',
+  }),
+};

package/basic/loading/WLoading.vue

@@ -0,0 +1,54 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <TransitionRoot as="template" :show="isOpen">
+    <Dialog as="div" class="relative z-100" @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-100 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">
+                  <div class="animate-spin h-10 w-10 border-4 primary rounded-full border-t-transparent"/>
+                </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>
+            </DialogPanel>
+          </TransitionChild>
+        </div>
+      </div>
+    </Dialog>
+  </TransitionRoot>
+</template>
+
+<script setup lang="ts">
+import { Dialog, DialogPanel, DialogTitle, TransitionChild, TransitionRoot } from '@headlessui/vue'
+import { LoadingStore } from './LoadingStore'
+
+// ダイアログ用 state を購読
+const dialogStore = LoadingStore()
+// ストアの状態とアクションをコンポーネントにマッピング
+const isOpen = dialogStore.isOpen;
+const title = dialogStore.getTitle;
+const contentText = dialogStore.getContentText;
+const persistent = dialogStore.getPersistent
+
+// ダイアログを閉じる
+function close({ isConfirmed }: { isConfirmed: boolean | null }) {
+  
+  // 回答が強制されていて、ボタンを押してない場合はダイアログを閉じさせない
+  if (persistent.value == false || isConfirmed != null) {
+    dialogStore.close({ isConfirmed: isConfirmed })
+  }
+}
+
+</script>

package/basic/menu/Menu.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 Menu from './Menu.vue';
+import { ChevronDownIcon } from '@heroicons/vue/20/solid'
+
+type MenuProps = InstanceType<typeof Menu>['$props']
+
+const meta: Meta<typeof Menu> = {
+  component: Menu,
+};
+
+export default meta;
+type Story = StoryObj<typeof Menu>;
+
+const menuItems = [
+  { name: 'Analytics', onClick: () => console.log('click.') },
+  { name: 'Engagement', href: '#' },
+  { name: 'Security', href: '#' },
+  { name: 'Integrations', href: '#' },
+  { name: 'Automations', href: '#' },
+  { name: 'Reports', href: '#' },
+]
+
+/*
+ *👇 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: MenuProps) => ({
+    setup() {
+      return {
+        ...args
+      }
+    },
+    components: { Menu, ChevronDownIcon },
+    template: `
+      <div class="text-center w-full">
+        <Menu :items="items" menuClass="right-0" :classes="classes">
+          <span>Solutions</span>
+          <ChevronDownIcon class="h-5 w-5" aria-hidden="true" />
+        </Menu>
+      </div>`,
+  }),
+  args: {
+    items: menuItems,
+    classes: {
+      title: {
+        text: {
+          color: 'text-onSurface dark:text-onSurface-dark'
+        }
+      }
+    }
+  }
+};

package/basic/menu/WMenu.vue

@@ -0,0 +1,96 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <Popover class="relative">
+    <PopoverButton
+      :class="[
+        mergedClasses.title?.layout,
+        mergedClasses.title?.text?.color,
+        mergedClasses.title?.text?.size,
+        mergedClasses.title?.text?.layout,
+        mergedClasses.title?.text?.base
+      ]">
+      <slot />
+    </PopoverButton>
+
+    <transition enter-active-class="transition ease-out duration-200" enter-from-class="opacity-0 translate-y-1" enter-to-class="opacity-100 translate-y-0" leave-active-class="transition ease-in duration-150" leave-from-class="opacity-100 translate-y-0" leave-to-class="opacity-0 translate-y-1">
+      <PopoverPanel
+        v-slot="{ close }"
+        :class="[
+          menuClass,
+          mergedClasses.content?.base,
+          mergedClasses.content?.layout,
+          mergedClasses.content?.rounded,
+          mergedClasses.content?.backgroundColor,
+          mergedClasses.content?.text?.color,
+          mergedClasses.content?.text?.size,
+          mergedClasses.content?.text?.layout,
+          mergedClasses.content?.text?.base
+        ]"
+      >
+        <div v-for="item in items" :key="item.name">
+          <p v-if="item.onClick" class="block p-2 hover:text-indigo-600" @click="clickItem(close, item.onClick)">{{ item.name }}</p>
+          <a v-else :href="item.href" class="block p-2 hover:text-indigo-600">{{ item.name }}</a>
+        </div>
+      </PopoverPanel>
+    </transition>
+  </Popover>
+</template>
+
+<script setup lang="ts">
+import { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue'
+import type { PropType } from 'vue';
+import type { MenuOption } from './MenuOption';
+import type { ClassObject } from '../../types/ClassObject';
+import { deepMergeClassObject } from '../../util';
+
+const props = defineProps({
+  items: {
+    type: Array as PropType<MenuOption[]>,
+    required: true
+  },
+  menuClass: {
+    type: String as PropType<string>,
+    default: ''
+  },
+  classes: {
+    type: Object as PropType<ClassObject>,
+  }
+});
+
+const defaultClasses: ClassObject = {
+  title: {
+    text: {
+      base: 'font-semibold',
+      color: 'text-gray-900',
+      size: 'text-sm',
+      layout: 'leading-6'
+    },
+    layout: 'inline-flex items-center gap-x-1'
+  },
+  content: {
+    text: {
+      base: 'font-semibold',
+      color: 'text-gray-900',
+      size: 'text-sm',
+      layout: 'leading-6'
+    },
+    layout: 'absolute',
+    rounded: 'rounded-xl',
+    backgroundColor: 'bg-white',
+    base: 'z-10 mt-1 w-56 shrink p-4 shadow-lg ring-1 ring-gray-900/5 top-full'
+  }
+}
+
+// props.classesが渡されていない場合、defaultClassesを使用する
+const mergedClasses = props.classes ? deepMergeClassObject(defaultClasses, props.classes) : defaultClasses;
+
+function clickItem(close: any, func?: () => void) {
+
+  if (func !== undefined) {
+    func()
+  }
+
+  close()
+}
+
+</script>

package/basic/menu/WMenuOption.ts

@@ -0,0 +1,5 @@
+export type MenuOption = {
+  name: string;
+  href?: string;
+  onClick?: () => void
+}

package/basic/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/basic/navigation-drawer/WNavigationDrawer.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 },
+    ]
+  }
+};