@soft-stech/bootsman-ui-shadcn 2.0.37 → 2.0.39

package/src/index.ts

@@ -28,6 +28,7 @@ export * from './components/stepper/index'
 export * from './components/switch/index'
 export * from './components/table/index'
 export * from './components/tabs/index'
+export * from './components/tagsInput/index'
 export * from './components/textarea/index'
 export * from './components/toast/index'
 export * from './components/tooltip/index'

package/src/stories/BuiTagsInput.stories.ts

@@ -0,0 +1,62 @@
+import {
+  BuiTagsInput,
+  BuiTagsInputInput,
+  BuiTagsInputItem,
+  BuiTagsInputItemDelete,
+  BuiTagsInputItemText
+} from '@/components/tagsInput'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
+
+const meta = {
+  component: BuiTagsInput,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['default', 'destructive', 'success']
+    }
+  },
+  args: {
+    disabled: false,
+    readonly: false,
+    addOnTab: true,
+    addOnPaste: true,
+    addOnBlur: false,
+    placeholder: 'Agg tag...',
+    variant: 'default'
+  }
+} satisfies Meta<typeof BuiTagsInput>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: (args) => ({
+    components: {
+      BuiTagsInput,
+      BuiTagsInputInput,
+      BuiTagsInputItem,
+      BuiTagsInputItemDelete,
+      BuiTagsInputItemText
+    },
+    setup() {
+      const tags = ref(['Vue', 'React', 'Angular'])
+      return { args, tags }
+    },
+    template: `
+      <div class="mb-2">{{ tags.join('; ') }}</div>
+      <BuiTagsInput
+        v-model="tags"
+        class="w-full max-w-sm"
+        v-bind="args"
+      >
+        <BuiTagsInputItem v-for="tag in tags" :key="tag" :value="tag">
+          <BuiTagsInputItemText />
+          <BuiTagsInputItemDelete />
+        </BuiTagsInputItem>
+        <BuiTagsInputInput :placeholder="args.placeholder" id="tagsInput" name="tags-input"/>
+      </BuiTagsInput>
+    `
+  })
+}

package/dist/BuiAdvancedAccordionTrigger.vue_vue_type_script_setup_true_lang-DrPhNZKG.js

@@ -1,77 +0,0 @@
-import { defineComponent as f, createBlock as m, openBlock as i, unref as s, normalizeClass as t, withCtx as l, createElementVNode as n, createVNode as d, renderSlot as a, mergeProps as p, createElementBlock as g, createCommentVNode as u } from "vue";
-import { g as r } from "./utils-CWz5p1Mv.js";
-import { A as C, a as b } from "./AccordionTrigger-CLOdW74d.js";
-import { C as v } from "./chevron-down-CNPbIKfA.js";
-const x = { class: "flex w-full items-center justify-between gap-2" }, h = { class: "flex flex-col items-start text-start" }, $ = /* @__PURE__ */ f({
-  __name: "BuiAdvancedAccordionTrigger",
-  props: {
-    asChild: { type: Boolean },
-    as: {},
-    class: {},
-    borderColorClass: {},
-    bgColorClass: {},
-    hoverColorClass: {},
-    iconBgClass: {},
-    descriptionColorClass: {},
-    isIconHidden: { type: Boolean },
-    isDisabledAsNormal: { type: Boolean }
-  },
-  setup(c) {
-    const e = c;
-    return (o, y) => (i(), m(s(C), {
-      class: t(
-        s(r)(
-          "border-border/16 bg-foreground/4 flex min-h-12 items-center px-2 py-1 data-[state=closed]:rounded-sm data-[state=open]:rounded-t-sm data-[state=open]:border-b",
-          e.borderColorClass ?? "",
-          e.bgColorClass ?? "",
-          e.hoverColorClass ?? ""
-        )
-      ),
-      as: "div"
-    }, {
-      default: l(() => [
-        n("div", x, [
-          d(s(b), p(e, {
-            class: s(r)(
-              "text-foreground ring-offset-background focus-visible:ring-ring relative flex flex-1 items-center gap-2 rounded-sm align-middle text-base leading-6 font-semibold transition-all focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-30 [&[data-state=open]>svg]:rotate-180",
-              e.class,
-              e.isDisabledAsNormal ? "disabled:opacity-100" : ""
-            )
-          }), {
-            default: l(() => [
-              d(s(v), {
-                class: t(
-                  s(r)(
-                    "bg-primary/[0.56] dark:bg-primary text-primary-foreground h-4 w-4 shrink-0 rounded-sm transition-transform duration-200",
-                    e.iconBgClass ? `${e.iconBgClass} dark:${e.iconBgClass}` : "",
-                    e.isIconHidden ? "invisible" : "visible"
-                  )
-                )
-              }, null, 8, ["class"]),
-              n("div", h, [
-                a(o.$slots, "default"),
-                o.$slots.description ? (i(), g("p", {
-                  key: 0,
-                  class: t(
-                    s(r)(
-                      "text-foreground/56 text-xs leading-4 font-normal",
-                      e.descriptionColorClass ?? ""
-                    )
-                  )
-                }, [
-                  a(o.$slots, "description")
-                ], 2)) : u("", !0)
-              ])
-            ]),
-            _: 3
-          }, 16, ["class"]),
-          a(o.$slots, "actions")
-        ])
-      ]),
-      _: 3
-    }, 8, ["class"]));
-  }
-});
-export {
-  $ as _
-};