vanilla-vue-ui 0.0.7 → 0.0.9

package/basic/slide-over/WSlideOver.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 SlideOver from './WSlideOver.vue';
+
+const meta: Meta<typeof SlideOver> = {
+  component: SlideOver,
+};
+
+export default meta;
+type Story = StoryObj<typeof SlideOver>;
+
+/*
+ *👇 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: { SlideOver },
+    template: '<SlideOver isOpen="true"></SlideOver>',
+  }),
+};

package/basic/slide-over/WSlideOver.vue

@@ -0,0 +1,53 @@
+<template>
+  <TransitionRoot as="template" :show="isOpen">
+    <Dialog as="div" class="relative z-50" @close="close">
+      <div class="fixed inset-0" />
+
+      <div class="fixed inset-0 overflow-hidden">
+        <div class="absolute inset-0 overflow-hidden">
+          <div class="pointer-events-none fixed inset-y-0 right-0 flex max-w-full pl-10">
+            <TransitionChild as="template" enter="transform transition ease-in-out duration-500 sm:duration-700" enter-from="translate-x-full" enter-to="translate-x-0" leave="transform transition ease-in-out duration-500 sm:duration-700" leave-from="translate-x-0" leave-to="translate-x-full">
+              <DialogPanel class="pointer-events-auto w-screen max-w-md">
+                <div class="flex h-full flex-col overflow-y-scroll bg-white py-6 shadow-xl">
+                  <div class="px-4 sm:px-6">
+                    <div class="flex items-start justify-end">
+                      <div class="ml-3 flex h-7 items-center">
+                        <button type="button" class="relative rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2" @click="close">
+                          <span class="absolute -inset-2.5" />
+                          <span class="sr-only">Close panel</span>
+                          <XMarkIcon class="h-6 w-6" aria-hidden="true" />
+                        </button>
+                      </div>
+                    </div>
+                    <slot />
+                  </div>
+                  <div class="relative mt-6 flex-1 px-4 sm:px-6"/>
+                </div>
+              </DialogPanel>
+            </TransitionChild>
+          </div>
+        </div>
+      </div>
+    </Dialog>
+  </TransitionRoot>
+</template>
+
+<script setup lang="ts">
+import { Dialog, DialogPanel, TransitionChild, TransitionRoot } from '@headlessui/vue'
+import { XMarkIcon } from '@heroicons/vue/24/outline'
+import { defineProps, defineEmits } from 'vue'
+
+defineProps({
+  isOpen: Boolean
+})
+
+// const open = ref(true)
+
+// イベントの定義
+const emit = defineEmits(['update:isOpen'])
+
+const close = () => {
+  // Emit an event to notify parent component to change the state
+  emit('update:isOpen', false)
+}
+</script>

package/basic/step/StepContent.ts

@@ -0,0 +1,8 @@
+import type { StepStatus } from "./StepStatus"
+
+type StepContent = {
+  number: number
+  status: StepStatus
+}
+
+export type { StepContent }

package/basic/step/StepStatus.ts

@@ -0,0 +1,3 @@
+type StepStatus = "Complete" | "Current" | "Upcoming"
+
+export type { StepStatus }

package/basic/step/WStep.stories.ts

@@ -0,0 +1,42 @@
+// Replace vue3 with vue if you are using Storybook for Vue 2
+import type { Meta, StoryObj } from '@storybook/vue3';
+import Step from './Step.vue';
+import type { StepContent } from './StepContent'
+
+type StepProps = InstanceType<typeof Step>['$props']
+
+const meta: Meta<typeof Step> = {
+  component: Step,
+};
+
+export default meta;
+type Story = StoryObj<typeof Step>;
+
+/*
+ *👇 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.
+ */
+
+const steps: StepContent[] = [
+  { number: 1, status: 'Complete' },
+  { number: 2, status: 'Complete' },
+  { number: 3, status: 'Complete' },
+  { number: 4, status: 'Current' },
+  { number: 5, status: 'Upcoming' },
+]
+
+export const Primary: Story = {
+  render: (args: StepProps) => ({
+    setup() {
+      return {
+        ...args,
+      };
+    },
+    components: { Step },
+    template: '<Step :steps="steps"></Step>',
+  }),
+  args: {
+    steps: steps
+  },
+};

package/basic/step/WStep.vue

@@ -0,0 +1,48 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <div v-if="steps" class="flex justify-center">
+    <nav aria-label="Progress">
+      <ol role="list" class="flex items-center">
+        <li v-for="(step, stepIdx) in steps" :key="step.number" :class="[stepIdx !== steps.length - 1 ? 'pr-8 sm:pr-20' : '', 'relative']">
+          <template v-if="step.status === 'Complete'">
+            <div class="absolute inset-0 flex items-center" aria-hidden="true">
+              <div class="h-0.5 w-full bg-indigo-600" />
+            </div>
+            <div class="relative flex h-8 w-8 items-center justify-center rounded-full bg-indigo-600 hover:bg-indigo-900">
+              <CheckIcon class="h-5 w-5 text-white" aria-hidden="true" />
+            </div>
+          </template>
+          <template v-else-if="step.status === 'Current'">
+            <div class="absolute inset-0 flex items-center" aria-hidden="true">
+              <div class="h-0.5 w-full bg-gray-200" />
+            </div>
+            <div class="relative flex h-8 w-8 items-center justify-center rounded-full border-2 border-indigo-600 bg-white" aria-current="step">
+              <span class="h-2.5 w-2.5 rounded-full bg-indigo-600" aria-hidden="true" />
+            </div>
+          </template>
+          <template v-else>
+            <div class="absolute inset-0 flex items-center" aria-hidden="true">
+              <div class="h-0.5 w-full bg-gray-200" />
+            </div>
+            <div class="group relative flex h-8 w-8 items-center justify-center rounded-full border-2 border-gray-300 bg-white hover:border-gray-400">
+              <span class="h-2.5 w-2.5 rounded-full bg-transparent group-hover:bg-gray-300" aria-hidden="true" />
+            </div>
+          </template>
+        </li>
+      </ol>
+    </nav>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineProps, type PropType } from 'vue'
+import { CheckIcon } from '@heroicons/vue/20/solid'
+import type { StepContent } from './StepContent';
+
+defineProps({
+  steps: {
+    type: Array as PropType<StepContent[]>,
+    require: true
+  }
+})
+</script>

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

package/basic/table/WTable.vue

@@ -0,0 +1,30 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <div>
+    <div class="mt-6 border-t border-gray-100">
+      <dl class="divide-y divide-gray-100">
+        <div v-for="(record, i) in data" :key="i" class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+          <dt class="text-sm font-medium leading-6 text-gray-900">{{ record.title }}</dt>
+          <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">{{ record.content }}</dd>
+        </div>
+      </dl>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+
+interface Record {
+  title: string;
+  content: string;
+}
+
+const data: Record[] = [{
+  title: 'data1',
+  content: 'content1'
+},
+{
+  title: 'data2',
+  content: 'content2'
+}]
+</script>

package/basic/text-area/TextAreaSize.ts

@@ -0,0 +1,2 @@
+export const textAreaSizes = ['xs', 'sm', 'base', 'lg', '2xl', '3xl', '6xl'] as const;
+export type TextAreaSize = typeof textAreaSizes[number];

package/basic/text-area/WTextArea.spec.ts

@@ -0,0 +1,18 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import TextArea from './WTextArea.vue'; // コンポーネントのパスを適切に設定してください
+
+describe('TextArea', () => {
+  it('renders correctly', () => {
+    const wrapper = mount(TextArea);
+
+    // コンポーネントが正しくレンダリングされるか確認
+    expect(wrapper.find('div.overflow-hidden').exists()).toBe(true);
+
+    // テキストエリアが存在し、正しい属性を持つことを確認
+    const textarea = wrapper.find('textarea[name="comment"]');
+    expect(textarea.exists()).toBe(true);
+    expect(textarea.attributes('rows')).toBe('3');
+    expect(textarea.attributes('placeholder')).toBe('Add your comment...');
+  });
+});

package/basic/text-area/WTextArea.stories.ts

@@ -0,0 +1,41 @@
+// Replace vue3 with vue if you are using Storybook for Vue 2
+import type { Meta, StoryObj } from '@storybook/vue3';
+import TextArea from './WTextArea.vue';
+
+type TextAreaProps = InstanceType<typeof TextArea>['$props']
+
+const meta: Meta<typeof TextArea> = {
+  component: TextArea,
+};
+
+export default meta;
+type Story = StoryObj<typeof TextArea>;
+
+/*
+ *👇 Render functions are a fSamework 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: TextAreaProps) => ({
+    setup() {
+      return {
+        ...args
+      }
+    },
+    components: { TextArea },
+    template: `
+      <div class="p-4">
+        <div class="mb-2"><TextArea size="xs"></TextArea></div>
+        <div class="mb-2"><TextArea size="sm"></TextArea></div>
+        <div class="mb-2"><TextArea size="base"></TextArea></div>
+        <div class="mb-2"><TextArea size="lg"></TextArea></div>
+        <div class="mb-2"><TextArea size="2xl"></TextArea></div>
+        <div class="mb-2"><TextArea size="3xl"></TextArea></div>
+        <div class="mb-2"><TextArea size="6xl"></TextArea></div>
+      </div>
+    `,
+  }),
+  args: {
+  }
+};

package/basic/text-area/WTextArea.vue

@@ -0,0 +1,158 @@
+<template>
+  <div class="overflow-hidden px-4 py-4 rounded-lg ring-1 ring-inset ring-gray-300 focus-within:ring-2 focus-within:ring-primary dark:focus-within:ring-primary-dark bg-surface dark:bg-surface-dark">
+    <label :for="name" class="sr-only">{{ label }}</label>
+    <textarea
+      :id="id"
+      :name="name"
+      :rows=String(rows)
+      :value="value"
+      :class="[
+        textSize,
+        mergedClasses.content?.input?.base,
+        mergedClasses.content?.input?.backgroundColor,
+        mergedClasses.content?.input?.color,
+      ]"
+      :placeholder="placeholder"
+      :required="required"
+     @change="changeValue($event)"
+     @input="inputValue($event)"
+    />
+  </div>
+  <p v-if="errorMassage.length > 0" class="mt-1 ml-1 text-sm text-red-600">{{ errorMassage }}</p>
+</template>
+
+<script setup lang="ts">
+import { ref, defineProps, type PropType } from 'vue'
+import type { TextAreaSize } from './TextAreaSize'
+import type { ClassObject } from '../../types/ClassObject';
+import { deepMergeClassObject } from '../../util';
+
+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[]>
+  },
+  rows: {
+    type: Number as PropType<number>,
+    default: 3
+  },
+  size: {
+    type: String as PropType<TextAreaSize>,
+    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 resize-none border-0 placeholder:text-gray-400 focus:outline-none focus:ring-0',
+      backgroundColor: 'bg-surface dark:bg-surface-dark',
+      color: 'text-onSurface dark:text-onSurface-dark'
+    }
+  }
+}
+
+// props.classesが渡されていない場合、defaultClassesを使用する
+const mergedClasses = props.classes ? deepMergeClassObject(defaultClasses, props.classes) : defaultClasses;
+
+const textSize = ref('text-' + props.size)
+
+// emit を定義
+const emit = defineEmits<{
+  change: [value: Event],
+  input: [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
+// ]
+
+// 初回バリデーション
+if (props.value) {
+  const setupErrorMessage = validate(props.value)
+  if (setupErrorMessage as boolean !== true) {
+    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) {
+      // バリデーションに通ったら
+      emit('input', event)
+      errorMassage.value = ""; // エラーメッセージをクリア
+    } else {
+      errorMassage.value = validationResult as string; // エラーメッセージを設定
+    }
+  }
+}
+
+// バリデーション
+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; // すべてのルールが成功
+}
+</script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vanilla-vue-ui",
-  "version": "0.0.7",
+  "version": "0.0.9",
   "private": false,
   "type": "module",
   "files": [

package/page-template/app-template/WAppTemplate.vue

@@ -2,9 +2,9 @@
   <slot name="header"></slot>
 
   <w-container>
-    <w-spacer-ladder>
+    <w-spacer-island>
       <slot name="ad" />
-    </w-spacer-ladder>
+    </w-spacer-island>
 
     <main>
       <w-spacer-island>