vanilla-vue-ui 0.0.0 → 0.0.2

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

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/basic/tooltip/WTooltip.stories.ts

@@ -0,0 +1,87 @@
+// Replace vue3 with vue if you are using Storybook for Vue 2
+import type { Meta, StoryObj } from '@storybook/vue3';
+import WTooltip from './WTooltip.vue';
+import Button from '../button/WButton.vue'
+import { ref, watch } from 'vue';
+
+type WTooltipProps = InstanceType<typeof WTooltip>['$props']
+
+const meta: Meta<typeof WTooltip> = {
+  component: WTooltip,
+};
+
+export default meta;
+type Story = StoryObj<typeof WTooltip>;
+
+/*
+ *👇 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: WTooltipProps) => ({
+    setup() {
+      return {
+        ...args,
+      };
+    },
+    components: { WTooltip, Button },
+    template: `
+      <w-tooltip hoverText="ホバー" reactiveText="text" :isReact="isReact">
+        <Button>Text</Button>
+      </w-tooltip>
+    `,
+  }),
+  args: {
+    isReact: false
+  },
+};
+
+export const isReact: Story = {
+  render: (args) => ({
+    setup() {
+      // isReact を ref 化
+      const isReact = ref(args.isReact);
+
+      watch(() => args.isReact, (val) => {
+        isReact.value = val;
+      });
+
+      return {
+        isReact,
+      };
+    },
+    components: { WTooltip, Button },
+    template: `
+      <w-tooltip
+        reactiveText="Clicked."
+        :isReact="isReact"
+      >
+        <Button @click="isReact = true">Text</Button>
+      </w-tooltip>
+    `,
+  }),
+  args: {
+    isReact: false,
+  },
+};
+
+export const init: Story = {
+  render: (args: WTooltipProps) => ({
+    setup() {
+      return {
+        ...args,
+      };
+    },
+    components: { WTooltip, Button },
+    template: `
+      <w-tooltip hoverText="ホバー" :showHoverOnMount="true">
+        <Button>Text</Button>
+      </w-tooltip>
+    `,
+  }),
+  args: {
+    isReact: false
+  },
+};

package/basic/tooltip/WTooltip.vue

@@ -0,0 +1,63 @@
+<template>
+  <span class="relative group">
+    <div @mouseenter="showTooltip" @mouseleave="hideTooltip">
+      <slot />
+    </div>
+    <span v-show="isReact" class="absolute z-50 whitespace-nowrap -bottom-12 left-1/2 -translate-x-1/2 bg-gray-600 py-1 px-2 text-white rounded">{{ reactiveText }}</span>
+    <span v-show="!isReact && isShowTooltip" class="absolute z-50 whitespace-nowrap -bottom-12 left-1/2 -translate-x-1/2 bg-gray-600 py-1 px-2 text-white rounded">{{ hoverText }}</span>
+  </span>
+</template>
+
+<script setup lang="ts">
+import { ref, defineProps, defineEmits, watch, type PropType, onMounted } from 'vue';
+
+const isShowTooltip = ref(false)
+
+const props = defineProps({
+  reactiveText: {
+    type: String,
+    default: ''
+  },
+  hoverText: {
+    type: String,
+    required: false,
+    default: ''
+  },
+  isReact: {
+    type: Boolean,
+    default: false
+  },
+  showHoverOnMount: {
+    type: Boolean as PropType<boolean>,
+    default: false,
+  }
+})
+
+const emit = defineEmits(['update:isReact'])
+
+// currentStep の変更を監視
+watch(
+  () => props.isReact, (newValue) => {
+    if (newValue === true) {
+      setTimeout(() => { emit('update:isReact', false) }, 1000)
+    }
+  }
+)
+
+onMounted(() => {
+  if (props.showHoverOnMount) {
+    showTooltip()
+    setTimeout(() => { hideTooltip() }, 3000)
+  }
+})
+
+function showTooltip() {
+  if (props.hoverText.length) {
+    isShowTooltip.value = true
+  }
+}
+
+function hideTooltip() {
+  isShowTooltip.value = false
+}
+</script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vanilla-vue-ui",
-  "version": "0.0.0",
+  "version": "0.0.2",
   "private": false,
   "type": "module",
   "files": [
@@ -31,39 +31,53 @@
     "copy": "npm run copy-template && npm run copy-basic && npm run copy-custom && npm run copy-icon && npm run copy-types && npm run copy-util"
   },
   "dependencies": {
-    "vue": "^3.5.13"
+    "@headlessui/vue": "^1.7.17",
+    "@heroicons/vue": "^2.1.1",
+    "dayjs": "^1.11.11",
+    "japanjs": "^0.1.6",
+    "konva": "^9.3.15",
+    "pinia": "^2.1.7",
+    "vue": "^3.3.11",
+    "vue-konva": "^3.1.0",
+    "vue-router": "^4.3.2"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^3.2.4",
-    "@storybook/addon-essentials": "^8.5.5",
-    "@storybook/addon-interactions": "^8.5.5",
-    "@storybook/addon-onboarding": "^8.5.5",
-    "@storybook/blocks": "^8.5.5",
-    "@storybook/test": "^8.5.5",
-    "@storybook/vue3": "^8.5.5",
-    "@storybook/vue3-vite": "^8.5.5",
+    "@rushstack/eslint-patch": "^1.3.3",
+    "@storybook/addon-essentials": "^7.6.10",
+    "@storybook/addon-interactions": "^7.6.10",
+    "@storybook/addon-links": "^7.6.10",
+    "@storybook/addon-themes": "^7.6.20",
+    "@storybook/blocks": "^7.6.10",
+    "@storybook/test": "^7.6.10",
+    "@storybook/vue3": "^7.6.10",
+    "@storybook/vue3-vite": "^7.6.10",
+    "@tsconfig/node18": "^18.2.2",
     "@tsconfig/node22": "^22.0.0",
-    "@types/jsdom": "^21.1.7",
-    "@types/node": "^22.9.3",
-    "@vitejs/plugin-vue": "^5.2.1",
-    "@vitest/eslint-plugin": "1.1.10",
-    "@vue/eslint-config-prettier": "^10.1.0",
-    "@vue/eslint-config-typescript": "^14.1.3",
-    "@vue/test-utils": "^2.4.6",
-    "@vue/tsconfig": "^0.7.0",
+    "@types/jsdom": "^21.1.6",
+    "@types/node": "^18.19.3",
+    "@vitejs/plugin-vue": "^4.5.2",
+    "@vue/eslint-config-prettier": "^8.0.0",
+    "@vue/eslint-config-typescript": "^12.0.0",
+    "@vue/test-utils": "^2.4.3",
+    "@vue/tsconfig": "^0.5.0",
+    "autoprefixer": "^10.4.17",
     "copyfiles": "^2.4.1",
-    "eslint": "^9.14.0",
-    "eslint-plugin-storybook": "^0.11.2",
-    "eslint-plugin-vue": "^9.30.0",
-    "jsdom": "^25.0.1",
-    "npm-run-all2": "^7.0.1",
-    "prettier": "^3.3.3",
-    "storybook": "^8.5.5",
-    "typescript": "~5.6.3",
-    "vite": "^6.0.1",
-    "vite-plugin-vue-devtools": "^7.6.5",
-    "vitest": "^2.1.5",
-    "vue-tsc": "^2.1.10"
+    "eslint": "^8.57.0",
+    "eslint-plugin-storybook": "^0.6.15",
+    "eslint-plugin-vue": "^9.27.0",
+    "jsdom": "^23.0.1",
+    "npm-run-all2": "^6.1.1",
+    "postcss": "^8.4.33",
+    "prettier": "^3.0.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "storybook": "^7.6.10",
+    "tailwindcss": "^3.4.1",
+    "typescript": "~5.3.0",
+    "vite": "^5.0.10",
+    "vite-plugin-vue-devtools": "^7.7.2",
+    "vitest": "^1.0.4",
+    "vue-tsc": "^1.8.25"
   },
   "eslintConfig": {
     "extends": [

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