vanilla-vue-ui 0.0.11 → 0.0.13

package/basic/feed/WFeed.stories.ts

@@ -1,62 +0,0 @@
-// 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

@@ -1,41 +0,0 @@
-<!-- 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

@@ -1,24 +0,0 @@
-// 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

@@ -1,25 +0,0 @@
-<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

@@ -1,23 +0,0 @@
-// 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

@@ -1,5 +0,0 @@
-<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

@@ -1,29 +0,0 @@
-// 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

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

package/basic/loading/LoadingStore.ts

@@ -1,57 +0,0 @@
-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

@@ -1,27 +0,0 @@
-// 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

@@ -1,54 +0,0 @@
-<!-- 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

@@ -1,55 +0,0 @@
-// 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

@@ -1,96 +0,0 @@
-<!-- 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

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

package/basic/navigation-drawer/NavigationDrawerContent.ts

@@ -1,11 +0,0 @@
-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

@@ -1,59 +0,0 @@
-// 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 },
-    ]
-  }
-};