vanilla-vue-ui 0.0.0

package/README.md

@@ -0,0 +1,45 @@
+# vanilla-vue-ui
+
+This template should help get you started developing with Vue 3 in Vite.
+
+## Recommended IDE Setup
+
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
+
+## Type Support for `.vue` Imports in TS
+
+TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
+
+## Customize configuration
+
+See [Vite Configuration Reference](https://vite.dev/config/).
+
+## Project Setup
+
+```sh
+npm install
+```
+
+### Compile and Hot-Reload for Development
+
+```sh
+npm run dev
+```
+
+### Type-Check, Compile and Minify for Production
+
+```sh
+npm run build
+```
+
+### Run Unit Tests with [Vitest](https://vitest.dev/)
+
+```sh
+npm run test:unit
+```
+
+### Lint with [ESLint](https://eslint.org/)
+
+```sh
+npm run lint
+```

package/basic/range/WRange.stories.ts

@@ -0,0 +1,61 @@
+// Replace vue3 with vue if you are using Storybook for Vue 2
+import type { Meta, StoryObj } from '@storybook/vue3';
+import WRange from './WRange.vue';
+import { ref, watchEffect } from 'vue';
+
+type WRangeProps = InstanceType<typeof WRange>['$props']
+
+const meta: Meta<typeof WRange> = {
+  component: WRange,
+};
+
+export default meta;
+type Story = StoryObj<typeof WRange>;
+
+/*
+ *👇 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: { WRange },
+    template: '<w-range @customInput="(value) => console.log(`Received customInput event with value:`, value)"></w-range>',
+  }),
+};
+
+export const PrimaryDataBinding: Story = {
+  render: (args: WRangeProps) => ({
+    setup() {
+      const modelValue = ref(args.modelValue)
+
+      // `update:modelValue`イベントをリッスンして、内部状態を更新
+      watchEffect(() => {
+        modelValue.value = args.modelValue;
+      });
+
+      return {
+        ...args,
+        modelValue,
+        updateModelValue: (newValue: number) => {
+          modelValue.value = newValue;
+        },
+      }
+    },
+    components: { WRange },
+    template: `
+              <w-range
+                :max="max"
+                :min="min"
+                :step="step"
+                v-model="modelValue"
+              ></w-range>
+              `,
+  }),
+  args: {
+    max: 100,
+    min: 0,
+    step: 10,
+    modelValue: 0
+  }
+};

package/basic/range/WRange.vue

@@ -0,0 +1,93 @@
+<template>
+  <input
+    type="range"
+    class="w-full"
+    :class="[
+      mergedClasses.content?.base,
+      mergedClasses.content?.backgroundColor,
+      mergedClasses.content?.rounded,
+      mergedClasses.content?.size,
+    ]"
+    :min="min"
+    :max="max"
+    :step="step"
+    :value="modelValue"
+    @input="inputValue"
+  >
+</template>
+
+<script setup lang="ts">
+import { defineProps, type PropType, ref } from 'vue'
+import type { ClassObject } from '../../types/ClassObject';
+import { deepMergeClassObject } from '../../util';
+
+const props = defineProps({
+  min: {
+    type: Number as PropType<number>,
+    default() {
+      return 0
+    }
+  },
+  max: {
+    type: Number as PropType<number>,
+    default() {
+      return 100
+    }
+  },
+  step: {
+    type: Number as PropType<number>,
+    default() {
+      return 1
+    }
+  },
+  modelValue: {
+    type: Number as PropType<number>,
+    default() {
+      return 0
+    }
+  },
+  classes: {
+    type: Object as PropType<ClassObject>,
+  }
+})
+
+const defaultClasses: ClassObject = {
+  icon: {
+    color: 'text-gray-500'
+  },
+  content: {
+    base: 'appearance-none [-webkit-appearance: none]',
+    backgroundColor: 'bg-gray-400',
+    rounded: 'rounded-full',
+    size: 'h-2'
+  }
+}
+
+// props.classesが渡されていない場合、defaultClassesを使用する
+const mergedClasses = props.classes ? deepMergeClassObject(defaultClasses, props.classes) : defaultClasses;
+
+const modelValue = ref<string>(props.modelValue.toString())
+
+const emit = defineEmits<{
+  customInput: [value: Event],
+  'update:modelValue': [value: number]
+}>()
+
+function inputValue(e: Event) {
+  const target = e.target as HTMLInputElement | null
+  
+  if (target) {
+    emitCustomEvent(target.value)
+    modelValue.value = target.value
+
+    emit('update:modelValue', Number(target.value))
+  }
+}
+
+function emitCustomEvent(value: string) {
+  const event = new CustomEvent('input', {
+    detail: value
+  })
+  emit('customInput', event)
+}
+</script>

package/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "vanilla-vue-ui",
+  "version": "0.0.0",
+  "private": false,
+  "type": "module",
+  "files": [
+    "basic",
+    "template",
+    "custom",
+    "icon",
+    "types",
+    "util"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "npm run copy",
+    "preview": "vite preview",
+    "test:unit": "vitest",
+    "build-only": "vite build",
+    "type-check": "vue-tsc --build",
+    "lint": "eslint . --fix",
+    "format": "prettier --write src/",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "copy-template": "copyfiles -u 1 src/template/**/* .",
+    "copy-basic": "copyfiles -u 1 src/basic/**/* .",
+    "copy-custom": "copyfiles -u 1 src/custom/**/* .",
+    "copy-icon": "copyfiles -u 1 src/icon/**/* .",
+    "copy-types": "copyfiles -u 1 src/types/**/* .",
+    "copy-util": "copyfiles -u 1 src/util/**/* .",
+    "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"
+  },
+  "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",
+    "@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",
+    "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"
+  },
+  "eslintConfig": {
+    "extends": [
+      "plugin:storybook/recommended"
+    ]
+  }
+}

package/types/ClassObject.ts

@@ -0,0 +1,21 @@
+export type ClassObject = {
+  base?: string;
+  backgroundColor?: string;
+  spacing?: string;
+  size?: string;
+  color?: string;
+  shadow?: string;
+  rounded?: string;
+  border?: string;
+  layout?: string;
+  text?: ClassObject;
+  outline?: ClassObject;
+  label?: ClassObject;
+  errorMessage?: ClassObject;
+  title?: ClassObject;
+  content?: ClassObject;
+  icon?: ClassObject;
+  button?: ClassObject;
+  input?: ClassObject;
+  [key: string]: any; // インデックスシグネチャの追加
+}

package/util/deepMergeClassObject.ts

@@ -0,0 +1,13 @@
+import type { ClassObject } from "../types/ClassObject";
+
+// 深くマージする関数
+export function deepMergeClassObject(target: ClassObject, source: ClassObject): ClassObject {
+  for (const key in source) {
+    if (source[key] instanceof Object && key in target) {
+      target[key] = deepMergeClassObject(target[key], source[key]);
+    } else {
+      target[key] = source[key];
+    }
+  }
+  return target;
+}

package/util/index.ts

@@ -0,0 +1,3 @@
+import { deepMergeClassObject } from "./deepMergeClassObject";
+
+export { deepMergeClassObject }