@soft-stech/bootsman-ui-shadcn 2.0.29 → 2.0.30

package/dist/components/input/BuiInput.vue.d.ts

@@ -9,6 +9,7 @@ type __VLS_Props = {
     disabled?: boolean;
     placeholder?: string;
     type?: string;
+    disableAutocomplete?: boolean;
 };
 declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
     "update:modelValue": (payload: string | number) => any;

package/dist/components/input/BuiPasswordInput.vue.d.ts

@@ -2,6 +2,7 @@ type __VLS_Props = {
     defaultValue?: 'password' | 'text';
     showPasswordTranslation?: string;
     hidePasswordTranslation?: string;
+    disableAutocomplete?: boolean;
 };
 declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/components/input/index.js

@@ -1,6 +1,6 @@
-import { h as B, F as O, g as _, _ as R, j as S } from "../../utils-0oqGu8T-.js";
-import { defineComponent as x, inject as z, toRef as A, ref as v, useTemplateRef as X, createElementBlock as w, withDirectives as E, openBlock as d, createBlock as g, createCommentVNode as T, createElementVNode as h, unref as a, normalizeClass as k, isRef as F, vModelText as G, withCtx as y, createVNode as n, vModelDynamic as H, computed as $, mergeProps as D, createTextVNode as K, toDisplayString as L, mergeModels as Y, useModel as q, watch as I, normalizeStyle as M } from "vue";
-import { useVModel as J, useElementBounding as U } from "@vueuse/core";
+import { h as B, F as j, g as w, _ as N, j as O } from "../../utils-0oqGu8T-.js";
+import { defineComponent as x, inject as S, toRef as z, ref as v, useTemplateRef as X, createElementBlock as _, withDirectives as E, openBlock as d, createBlock as g, createCommentVNode as R, createElementVNode as b, unref as a, normalizeClass as k, isRef as F, vModelText as G, withCtx as y, createVNode as n, vModelDynamic as H, computed as $, mergeProps as T, createTextVNode as K, toDisplayString as L, mergeModels as Y, useModel as q, watch as I, normalizeStyle as M } from "vue";
+import { useVModel as J, useElementBounding as D } from "@vueuse/core";
 import { c as Q, d as P } from "../../colorUtils-BgA4kYw8.js";
 import { BuiBadge as W } from "../badge/index.js";
 import "vee-validate";
@@ -8,14 +8,14 @@ import { _ as Z } from "../../BuiPopover.vue_vue_type_script_setup_true_lang-C21
 import { _ as ee } from "../../BuiPopoverTrigger.vue_vue_type_script_setup_true_lang-DRd7CSVn.js";
 import { _ as ae } from "../../BuiPopoverContent.vue_vue_type_script_setup_true_lang-C_C9SYpz.js";
 import { BuiColorPicker as te } from "../color-picker/index.js";
-import { X as le } from "../../x-Cbjb1tT_.js";
+import { X as oe } from "../../x-Cbjb1tT_.js";
 /**
  * @license lucide-vue-next v0.544.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const oe = B("eye-off", [
+const le = B("eye-off", [
   [
     "path",
     {
@@ -70,7 +70,7 @@ const re = B("palette", [
 ]), ne = {
   key: 0,
   class: "group relative flex flex-row items-center"
-}, de = ["readonly", "disabled", "placeholder"], ie = ["readonly", "disabled", "placeholder", "type"], C = /* @__PURE__ */ x({
+}, de = ["readonly", "disabled", "placeholder"], ie = ["readonly", "disabled", "placeholder", "type", "autocomplete", "data-1p-ignore", "data-lpignore", "data-protonpass-ignore", "data-bwignore"], C = /* @__PURE__ */ x({
   __name: "BuiInput",
   props: {
     defaultValue: {},
@@ -80,30 +80,31 @@ const re = B("palette", [
     readonly: { type: [Boolean, String] },
     disabled: { type: Boolean },
     placeholder: {},
-    type: {}
+    type: {},
+    disableAutocomplete: { type: Boolean }
   },
   emits: ["update:modelValue"],
-  setup(i, { emit: o }) {
-    const e = i, t = J(e, "modelValue", o, {
+  setup(i, { emit: l }) {
+    const e = i, t = J(e, "modelValue", l, {
       passive: !0,
       defaultValue: e.defaultValue
-    }), u = z(O, A(!1)), l = v(!1), s = X("searchInput"), c = () => {
-      l.value = !0;
+    }), u = S(j, z(!1)), o = v(!1), s = X("searchInput"), c = () => {
+      o.value = !0;
     }, r = () => {
-      l.value = !1;
+      o.value = !1;
     }, f = (m) => {
-      (m.key === "Home" || m.key === "End") && l.value && m.stopPropagation();
-    }, j = () => {
+      (m.key === "Home" || m.key === "End") && o.value && m.stopPropagation();
+    }, U = () => {
       s.value && (s.value.focus(), t.value = "");
     };
-    return (m, b) => e.type === "search" ? (d(), w("div", ne, [
-      E(h("input", {
+    return (m, h) => e.type === "search" ? (d(), _("div", ne, [
+      E(b("input", {
         ref_key: "searchInput",
         ref: s,
-        "onUpdate:modelValue": b[0] || (b[0] = (V) => F(t) ? t.value = V : null),
+        "onUpdate:modelValue": h[0] || (h[0] = (V) => F(t) ? t.value = V : null),
         class: k(
-          a(_)(
-            a(N)({ variant: m.variant }),
+          a(w)(
+            a(A)({ variant: m.variant }),
             e.class ?? "",
             "pr-6",
             !e.variant || e.variant === "default" ? "group-hover:border-primary" : ""
@@ -119,28 +120,33 @@ const re = B("palette", [
       }, null, 42, de), [
         [G, a(t)]
       ]),
-      a(t) && a(t).toString().length > 0 ? (d(), g(R, {
+      a(t) && a(t).toString().length > 0 ? (d(), g(N, {
         key: 0,
         variant: "none",
         class: "hover:text-primary text-foreground absolute top-2 right-2 h-fit w-fit p-[1px]",
-        onClick: j
+        onClick: U
       }, {
         default: y(() => [
-          n(a(le), {
+          n(a(oe), {
             size: 14,
             class: "pointer-events-none shrink-0"
           })
         ]),
         _: 1
-      })) : T("", !0)
-    ])) : E((d(), w("input", {
+      })) : R("", !0)
+    ])) : E((d(), _("input", {
       key: 1,
-      "onUpdate:modelValue": b[1] || (b[1] = (V) => F(t) ? t.value = V : null),
-      class: k(a(_)(a(N)({ variant: m.variant }), e.class ?? "")),
+      "onUpdate:modelValue": h[1] || (h[1] = (V) => F(t) ? t.value = V : null),
+      class: k(a(w)(a(A)({ variant: m.variant }), e.class ?? "")),
       readonly: a(u) || e.readonly,
       disabled: e.disabled,
       placeholder: e.placeholder,
       type: e.type || "text",
+      autocomplete: e.disableAutocomplete ? "off" : void 0,
+      "data-1p-ignore": e.disableAutocomplete ? !0 : void 0,
+      "data-lpignore": e.disableAutocomplete ? "true" : void 0,
+      "data-protonpass-ignore": e.disableAutocomplete ? "true" : void 0,
+      "data-bwignore": e.disableAutocomplete ? "1" : void 0,
       onFocus: c,
       onBlur: r,
       onKeydown: f
@@ -154,20 +160,22 @@ const re = B("palette", [
   props: {
     defaultValue: {},
     showPasswordTranslation: {},
-    hidePasswordTranslation: {}
+    hidePasswordTranslation: {},
+    disableAutocomplete: { type: Boolean }
   },
   setup(i) {
-    const o = i, e = v(o.defaultValue ?? "password");
+    const l = i, e = v(l.defaultValue ?? "password");
     function p() {
       e.value === "password" ? e.value = "text" : e.value = "password";
     }
-    const t = $(() => o.showPasswordTranslation ?? "Show password"), u = $(() => o.hidePasswordTranslation ?? "Hide password");
-    return (l, s) => (d(), w("div", ue, [
-      n(a(C), D(l.$attrs, {
+    const t = $(() => l.showPasswordTranslation ?? "Show password"), u = $(() => l.hidePasswordTranslation ?? "Hide password");
+    return (o, s) => (d(), _("div", ue, [
+      n(a(C), T(o.$attrs, {
         type: e.value,
-        class: a(_)(l.$attrs.class ?? "", "pr-8")
-      }), null, 16, ["type", "class"]),
-      n(R, {
+        class: a(w)(o.$attrs.class ?? "", "pr-8"),
+        "disable-autocomplete": l.disableAutocomplete
+      }), null, 16, ["type", "class", "disable-autocomplete"]),
+      n(N, {
         onClick: p,
         variant: "none",
         class: "text-muted-foreground hover:text-foreground absolute top-0 right-3 flex h-full w-fit items-center justify-center p-0",
@@ -178,7 +186,7 @@ const re = B("palette", [
           e.value === "password" ? (d(), g(a(se), {
             key: 0,
             class: "pointer-events-none h-4 w-4 shrink-0 cursor-pointer"
-          })) : (d(), g(a(oe), {
+          })) : (d(), g(a(le), {
             key: 1,
             class: "pointer-events-none h-4 w-4 shrink-0 cursor-pointer"
           }))
@@ -194,22 +202,22 @@ const re = B("palette", [
     badge: {}
   },
   setup(i) {
-    const o = i, e = v(null), { width: p } = U(e);
-    return (t, u) => (d(), w("div", ce, [
-      n(a(C), D(t.$attrs, {
+    const l = i, e = v(null), { width: p } = D(e);
+    return (t, u) => (d(), _("div", ce, [
+      n(a(C), T(t.$attrs, {
         style: { paddingRight: a(p) + pe + "px" }
       }), null, 16, ["style"]),
-      o.badge ? (d(), g(W, {
+      l.badge ? (d(), g(W, {
         key: 0,
         ref_key: "badgeEl",
         ref: e,
         class: "hover:bg-primary/8 dark:hover:bg-primary/30 absolute top-1 right-2 flex items-center justify-center rounded-sm"
       }, {
         default: y(() => [
-          K(L(o.badge), 1)
+          K(L(l.badge), 1)
         ]),
         _: 1
-      }, 512)) : T("", !0)
+      }, 512)) : R("", !0)
     ]));
   }
 }), fe = { class: "nowrap text-foreground relative flex w-32 flex-row font-medium uppercase" }, me = 12, Fe = /* @__PURE__ */ x({
@@ -225,31 +233,31 @@ const re = B("palette", [
   }),
   emits: ["update:modelValue"],
   setup(i) {
-    const o = i, e = q(i, "modelValue", void 0), p = v(null), { width: t } = U(p), u = () => e.value && P.test(e.value) ? e.value : o.defaultValue && P.test(o.defaultValue) ? o.defaultValue : "#FFFFFF", l = v(u().substring(1)), s = v(u());
-    return I(l, () => {
-      Q.test(l.value) && (e.value = `#${l.value}`, s.value = `#${l.value}`);
+    const l = i, e = q(i, "modelValue", void 0), p = v(null), { width: t } = D(p), u = () => e.value && P.test(e.value) ? e.value : l.defaultValue && P.test(l.defaultValue) ? l.defaultValue : "#FFFFFF", o = v(u().substring(1)), s = v(u());
+    return I(o, () => {
+      Q.test(o.value) && (e.value = `#${o.value}`, s.value = `#${o.value}`);
     }), I(s, () => {
-      e.value = s.value, l.value = s.value.substring(1);
+      e.value = s.value, o.value = s.value.substring(1);
     }), (c, r) => (d(), g(a(Z), null, {
       default: y(() => [
         n(a(ee), null, {
           default: y(() => [
-            h("div", fe, [
-              h("div", {
+            b("div", fe, [
+              b("div", {
                 ref_key: "paletteBadge",
                 ref: p,
-                class: k(a(_)("absolute top-1.5 left-2 flex flex-row items-center gap-1", c.ui?.badgeClass))
+                class: k(a(w)("absolute top-1.5 left-2 flex flex-row items-center gap-1", c.ui?.badgeClass))
               }, [
                 n(a(re), { class: "h-4 w-4 shrink-0" }),
-                h("div", {
+                b("div", {
                   class: "h-4 w-4 rounded-sm",
                   style: M({ backgroundColor: s.value })
                 }, null, 4),
-                r[2] || (r[2] = h("div", { class: "text-foreground/[.56] font-bold" }, "#", -1))
+                r[2] || (r[2] = b("div", { class: "text-foreground/[.56] font-bold" }, "#", -1))
               ], 2),
               n(C, {
-                modelValue: l.value,
-                "onUpdate:modelValue": r[0] || (r[0] = (f) => l.value = f),
+                modelValue: o.value,
+                "onUpdate:modelValue": r[0] || (r[0] = (f) => o.value = f),
                 id: c.id,
                 style: M({ paddingLeft: a(t) + me + "px" }),
                 disabled: c.disabled,
@@ -278,7 +286,7 @@ const re = B("palette", [
       _: 1
     }));
   }
-}), N = S(
+}), A = O(
   "flex h-8 w-full rounded-sm bg-background border px-2 py-1 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-30 dark:disabled:opacity-55 read-only:opacity-30 dark:read-only:opacity-55 aria-invalid:border-destructive-foreground",
   {
     variants: {
@@ -298,5 +306,5 @@ export {
   Fe as BuiColorInput,
   C as BuiInput,
   Ce as BuiPasswordInput,
-  N as inputVariants
+  A as inputVariants
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soft-stech/bootsman-ui-shadcn",
-  "version": "2.0.29",
+  "version": "2.0.30",
   "type": "module",
   "files": [
     "dist",

package/src/components/input/BuiInput.vue

@@ -16,6 +16,7 @@ const props = defineProps<{
   disabled?: boolean
   placeholder?: string
   type?: string
+  disableAutocomplete?: boolean
 }>()
 
 const emits = defineEmits<{
@@ -94,6 +95,11 @@ const handleClear = () => {
     :disabled="props.disabled"
     :placeholder="props.placeholder"
     :type="props.type || 'text'"
+    :autocomplete="props.disableAutocomplete ? 'off' : undefined"
+    :data-1p-ignore="props.disableAutocomplete ? true : undefined"
+    :data-lpignore="props.disableAutocomplete ? 'true' : undefined"
+    :data-protonpass-ignore="props.disableAutocomplete ? 'true' : undefined"
+    :data-bwignore="props.disableAutocomplete ? '1' : undefined"
     @focus="handleFocus"
     @blur="handleBlur"
     @keydown="handleKeyDown"

package/src/components/input/BuiPasswordInput.vue

@@ -9,6 +9,7 @@ const props = defineProps<{
   defaultValue?: 'password' | 'text'
   showPasswordTranslation?: string
   hidePasswordTranslation?: string
+  disableAutocomplete?: boolean
 }>()
 
 defineOptions({
@@ -30,7 +31,12 @@ const hidePasswordText = computed(() => props.hidePasswordTranslation ?? 'Hide p
 
 <template>
   <div class="relative flex">
-    <BuiInput v-bind="$attrs" :type="type" :class="cn($attrs.class ?? '', 'pr-8')" />
+    <BuiInput
+      v-bind="$attrs"
+      :type="type"
+      :class="cn($attrs.class ?? '', 'pr-8')"
+      :disable-autocomplete="props.disableAutocomplete"
+    />
     <BuiButton
       @click="togglePasswordShow"
       variant="none"

package/src/stories/BuiInput.stories.ts

@@ -46,7 +46,22 @@ export const Password: Story = {
     template: `
       <div class="grid w-full max-w-sm items-center gap-1.5">
           <BuiLabel for="password">Password</BuiLabel>
-          <BuiPasswordInput v-bind="args" id="password" placeholder="Password"/>
+          <BuiPasswordInput v-bind="args" id="password" placeholder="Password" />
+        </div>
+    `
+  })
+}
+
+export const PasswordDisableAutofill: Story = {
+  render: (args) => ({
+    components: { BuiPasswordInput, BuiLabel },
+    setup() {
+      return { args }
+    },
+    template: `
+      <div class="grid w-full max-w-sm items-center gap-1.5">
+          <BuiLabel for="password">Password</BuiLabel>
+          <BuiPasswordInput v-bind="args" id="password" placeholder="Password" disable-autocomplete />
         </div>
     `
   })