vanilla-vue-ui 0.0.15 → 0.0.17

package/basic/breadcrumb/WBreadcrumb.vue

@@ -9,11 +9,11 @@
           </a>
         </div>
       </li>
-      <li v-for="(page, index) in pages" :key="page.name">
-        <div v-if="page.name.length > 1" class="flex items-center">
+      <li v-for="(page, index) in filteredPages" :key="page.name">
+        <div class="flex items-center">
           <ChevronRightIcon
            :class="mergedClasses.icon?.base"
-           v-if="index < pages.length - 1"
+           v-if="index < filteredPages.length - 1"
            aria-hidden="true"
           />
           <a
@@ -33,7 +33,7 @@
 import { ChevronRightIcon, HomeIcon } from '@heroicons/vue/20/solid'
 import { useRouter, useRoute } from 'vue-router'
 import type { RouteMeta } from 'vue-router';
-import { ref, onMounted, watch, type PropType } from 'vue';
+import { ref, onMounted, watch, type PropType, computed } from 'vue';
 import type { ClassObject } from '../../types/ClassObject';
 import { deepMergeClassObject } from '../../util';
 import { withTrailingSlash } from 'ufo'
@@ -68,6 +68,8 @@ type Page = {
 };
 
 const pages = ref<Page[]>([]);
+// 表示対象だけに絞る（<li> ごと消えるので余白が生まれない）
+const filteredPages = computed(() => pages.value.filter(p => p.name.length > 1))
 
 const router = useRouter();
 const route = useRoute();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vanilla-vue-ui",
-  "version": "0.0.15",
+  "version": "0.0.17",
   "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>