vanilla-vue-ui 0.0.23 → 0.0.25

package/basic/breadcrumb/WBreadcrumb.vue

@@ -44,6 +44,10 @@ const props = defineProps({
   trailingSlash: {
     type: Boolean as PropType<boolean>,
     default: false
+  },
+    hideWords: {
+    type: Array as PropType<string[]>,
+    default: () => []
   }
 })
 
@@ -65,10 +69,17 @@ type Page = {
     href: string;
     current: boolean;
 };
-
 const pages = ref<Page[]>([]);
 // 表示対象だけに絞る（<li> ごと消えるので余白が生まれない）
-const filteredPages = computed(() => pages.value.filter(p => p.name.length > 1))
+const filteredPages = computed(() => {
+  const hideSet = props.hideWords.map(w => w.toLowerCase())
+
+  return pages.value.filter(p => {
+    if (p.name.length <= 1) return false
+
+    return !hideSet.includes(p.name.toLowerCase())
+  })
+})
 
 const router = useRouter();
 const route = useRoute();

package/basic/segment-selector/WSegmentSelector.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="inline-flex items-center rounded-full bg-white p-1 border-4"
+    class="inline-flex items-center rounded-full bg-white p-1 border-2 border-black"
   >
     <button
       v-for="option in options"

package/package.json

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

package/template/tag-link/WTagLink.stories.ts

@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+
+import WTagLink from './WTagLink.vue';
+
+const meta: Meta<typeof WTagLink> = {
+  component: WTagLink,
+};
+
+export default meta;
+type Story = StoryObj<typeof WTagLink>;
+
+/*
+ *👇 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: { WTagLink },
+    template: '<WTagLink to="/to">content</WTagLink>',
+  }),
+};

package/template/tag-link/WTagLink.vue

@@ -0,0 +1,52 @@
+<template>
+  <a
+    :href="to"
+    class="
+      inline-flex items-center
+      h-8 pr-2 p-0
+      gap-2
+      rounded-full
+      bg-white
+      box-border border-2 border-black
+      shadow-sm
+      hover:shadow-md
+      hover:-translate-y-0.5
+      transition-all duration-150
+      relative
+    "
+  >
+    <span
+      class="
+        flex items-center justify-center
+        h-8 w-8
+        rounded-full
+        bg-orange-400
+        text-white
+        text-2xl
+        shrink-0
+        absolute -top-0.5 -left-1
+        border-2 border-black
+      "
+    >
+      #
+    </span>
+
+    <span
+      class="
+        text-gray-800
+        text-sm
+        font-medium
+        truncate
+        pl-8
+      "
+    >
+      <slot />
+    </span>
+  </a>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  to: string
+}>()
+</script>