vanilla-vue-ui 0.0.14 → 0.0.16

package/package.json

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

package/template/options-area/OptionsArea.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 WOptionsArea from './WOptionsArea.vue';
+
+const meta: Meta<typeof WOptionsArea> = {
+  component: WOptionsArea,
+};
+
+export default meta;
+type Story = StoryObj<typeof WOptionsArea>;
+
+/*
+ *👇 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: any) => ({
+    setup() {
+      return {
+        ...args
+      }
+    },
+    components: { WOptionsArea },
+    template: `
+    <WOptionsArea>
+      <label class="mr-2">
+        数字
+        <input id="p-generator-numbers-checkbox" type="checkbox">
+      </label>
+
+      <label>
+        記号
+        <input id="p-generator-symbols-checkbox" type="checkbox">
+      </label>
+    </WOptionsArea>`,
+  }),
+  args: {
+  }
+};

package/template/options-area/WOptionsArea.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { defineProps, withDefaults } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    /** fieldset のタイトル */
+    title?: string
+  }>(),
+  {
+    title: 'オプション', // デフォルト値
+  }
+)
+</script>
+
+<template>
+  <div>
+    <fieldset class="border-dashed border-2 border-gray-300 rounded-lg p-4">
+
+      <legend class="px-1 text-onSurface dark:text-onSurface-dark">{{ props.title }}</legend>
+
+      <slot />
+    </fieldset>
+  </div>
+</template>