@bagelink/vue 0.0.757 → 0.0.761

package/dist/components/NavBar.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NavBar.vue.d.ts","sourceRoot":"","sources":["../../src/components/NavBar.vue"],"names":[],"mappings":"AAyXA,OAAO,KAAK,EAAE,aAAa,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AAoC3D,iBAAS,cAAc;;;;YAsME,GAAG;uBACA,GAAG;;;WASjB,OAAO,IAA6B;EAEjD;AAWD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;kBA7PL,OAAO,EAAE;YACf,OAAO,EAAE;eACN,aAAa;gBACZ,MAAM;aACT,MAAM;;kBAJD,OAAO,EAAE;YACf,OAAO,EAAE;eACN,aAAa;gBACZ,MAAM;aACT,MAAM;;WAHP,OAAO,EAAE;iBADH,OAAO,EAAE;cAEZ,aAAa;eACZ,MAAM;YACT,MAAM;6EAgQf,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAgBpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
+{"version":3,"file":"NavBar.vue.d.ts","sourceRoot":"","sources":["../../src/components/NavBar.vue"],"names":[],"mappings":"AAqYA,OAAO,KAAK,EAAE,aAAa,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AA8C3D,iBAAS,cAAc;;;;YAkME,GAAG;uBACA,GAAG;;;WASjB,OAAO,IAA6B;EAEjD;AAYD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;kBApQL,OAAO,EAAE;YACf,OAAO,EAAE;eACN,aAAa;gBACZ,MAAM;aACT,MAAM;;kBAJD,OAAO,EAAE;YACf,OAAO,EAAE;eACN,aAAa;gBACZ,MAAM;aACT,MAAM;;WAHP,OAAO,EAAE;iBADH,OAAO,EAAE;cAEZ,aAAa;eACZ,MAAM;YACT,MAAM;6EAuQf,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAgBpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/components/form/inputs/PasswordInput.vue.d.ts

@@ -1,9 +1,28 @@
-import { TextInput } from '../../..';
-export type TextInputT = InstanceType<typeof TextInput>;
-export type TextInputProps = Omit<TextInputT['$props'], (`${string}modelValue` | `ref${string}` | `onVnode${string}` | 'key' | 'type')>;
-declare let __VLS_typeProps: {
-    txtInputProps: TextInputProps;
-};
+import { MaterialIcons } from '../../..';
+export interface TextInputProps {
+    id?: string;
+    title?: string;
+    helptext?: string;
+    placeholder?: string;
+    label?: string;
+    small?: boolean;
+    dense?: boolean;
+    required?: boolean;
+    pattern?: string;
+    shrink?: boolean;
+    disabled?: boolean;
+    nativeInputAttrs?: Record<string, any>;
+    icon?: MaterialIcons;
+    iconStart?: MaterialIcons;
+    multiline?: boolean;
+    autoheight?: boolean;
+    code?: boolean;
+    lines?: number;
+    autofocus?: boolean;
+    debounceDelay?: number;
+    onFocusout?: (e: FocusEvent) => void;
+}
+declare let __VLS_typeProps: TextInputProps;
 type __VLS_PublicProps = {
     'modelValue'?: string;
     'showPwd'?: boolean;

package/dist/components/form/inputs/PasswordInput.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PasswordInput.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/form/inputs/PasswordInput.vue"],"names":[],"mappings":"AAiCA,OAAO,EAAO,SAAS,EAAE,MAAM,eAAe,CAAA;AAE9C,MAAM,MAAM,UAAU,GAAG,YAAY,CAAC,OAAO,SAAS,CAAC,CAAA;AAEvD,MAAM,MAAM,cAAc,GAAG,IAAI,CAChC,UAAU,CAAC,QAAQ,CAAC,EACpB,CAAC,GAAG,MAAM,YAAY,GAAG,MAAM,MAAM,EAAE,GAAG,UAAU,MAAM,EAAE,GAAG,KAAK,GAAG,MAAM,CAAC,CAC9E,CAAA;AAID,QAAA,IAAI,eAAe,EAAG;IAAE,aAAa,EAAE,cAAc,CAAA;CAAE,CAAC;AAgBxD,KAAK,iBAAiB,GAAG;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;CACnB,GAAG,OAAO,eAAe,CAAC;;;;;;;;AA2F3B,wBAOG"}
+{"version":3,"file":"PasswordInput.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/form/inputs/PasswordInput.vue"],"names":[],"mappings":"AA+DA,OAAO,EAAO,KAAK,aAAa,EAAa,MAAM,eAAe,CAAA;AAElE,MAAM,WAAW,cAAc;IAC9B,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,gBAAgB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IACtC,IAAI,CAAC,EAAE,aAAa,CAAA;IACpB,SAAS,CAAC,EAAE,aAAa,CAAA;IACzB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAA;CACpC;AAGD,QAAA,IAAI,eAAe,EAAG,cAAc,CAAC;AAkBrC,KAAK,iBAAiB,GAAG;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;CACnB,GAAG,OAAO,eAAe,CAAC;;;;;;;;AA2F3B,wBAOG"}

package/dist/components/form/inputs/SelectInput.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectInput.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/form/inputs/SelectInput.vue"],"names":[],"mappings":"AAAA,OA6WO,EAKN,KAAK,aAAa,EAClB,KAAK,MAAM,EAEX,MAAM,eAAe,CAAA;AAEtB,OAAO,wBAAwB,CAAA;AA+K/B,iBAAS,cAAc;;sBAkMI,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wCAmEixB,GAAG,8CAA8C,GAAG,yBAAyB,GAAG,6DAAmC,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;WAxDv5B,OAAO,IAA6B;EAEjD;AA4BD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;aAtZX,MAAM,EAAE;kBACH,MAAM;eACT,OAAO;iBACL,MAAM;iBACN,OAAO;eACT,OAAO;YACV,MAAM;gBACF,OAAO;kBACL,OAAO;WACd,aAAa;gBACR,OAAO;mBACJ,MAAM;gBACT,OAAO;;;;aAZV,MAAM,EAAE;kBACH,MAAM;eACT,OAAO;iBACL,MAAM;iBACN,OAAO;eACT,OAAO;YACV,MAAM;gBACF,OAAO;kBACL,OAAO;WACd,aAAa;gBACR,OAAO;mBACJ,MAAM;gBACT,OAAO;;;kFAiZlB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAWpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
+{"version":3,"file":"SelectInput.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/form/inputs/SelectInput.vue"],"names":[],"mappings":"AAAA,OA8WO,EAKN,KAAK,aAAa,EAClB,KAAK,MAAM,EAEX,MAAM,eAAe,CAAA;AAEtB,OAAO,wBAAwB,CAAA;AA+K/B,iBAAS,cAAc;;sBAkMI,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wCAmEuuB,GAAG,8CAA8C,GAAG,yBAAyB,GAAG,6DAAmC,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;WAxD72B,OAAO,IAA6B;EAEjD;AA4BD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;aAtZX,MAAM,EAAE;kBACH,MAAM;eACT,OAAO;iBACL,MAAM;iBACN,OAAO;eACT,OAAO;YACV,MAAM;gBACF,OAAO;kBACL,OAAO;WACd,aAAa;gBACR,OAAO;mBACJ,MAAM;gBACT,OAAO;;;;aAZV,MAAM,EAAE;kBACH,MAAM;eACT,OAAO;iBACL,MAAM;iBACN,OAAO;eACT,OAAO;YACV,MAAM;gBACF,OAAO;kBACL,OAAO;WACd,aAAa;gBACR,OAAO;mBACJ,MAAM;gBACT,OAAO;;;kFAiZlB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAWpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/index.cjs

@@ -18947,7 +18947,27 @@ const _hoisted_1$r = { class: "relative" };
 const _sfc_main$x = /* @__PURE__ */ vue.defineComponent({
   __name: "PasswordInput",
   props: /* @__PURE__ */ vue.mergeModels({
-    txtInputProps: {}
+    id: {},
+    title: {},
+    helptext: {},
+    placeholder: {},
+    label: {},
+    small: { type: Boolean },
+    dense: { type: Boolean },
+    required: { type: Boolean },
+    pattern: {},
+    shrink: { type: Boolean },
+    disabled: { type: Boolean },
+    nativeInputAttrs: {},
+    icon: {},
+    iconStart: {},
+    multiline: { type: Boolean },
+    autoheight: { type: Boolean },
+    code: { type: Boolean },
+    lines: {},
+    autofocus: { type: Boolean },
+    debounceDelay: {},
+    onFocusout: { type: Function }
   }, {
     "modelValue": {},
     "modelModifiers": {},
@@ -18956,18 +18976,23 @@ const _sfc_main$x = /* @__PURE__ */ vue.defineComponent({
   }),
   emits: ["update:modelValue", "update:showPwd"],
   setup(__props) {
+    const props2 = __props;
     const password = vue.useModel(__props, "modelValue");
     const showPwd = vue.useModel(__props, "showPwd");
-    const toggleShowPwdIcon = vue.computed(() => showPwd.value ? "visibility_off" : "visibility");
+    const toggleShowPwdIcon = vue.computed(
+      () => showPwd.value ? "visibility_off" : "visibility"
+    );
     const inputType = vue.computed(() => showPwd.value ? "text" : "password");
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$r, [
         vue.createVNode(vue.unref(TextInput), vue.mergeProps({
           modelValue: password.value,
-          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => password.value = $event),
-          class: "mb-0",
-          type: inputType.value
-        }, _ctx.txtInputProps), null, 16, ["modelValue", "type"]),
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => password.value = $event)
+        }, props2, {
+          type: inputType.value,
+          autocomplete: "current-password",
+          class: "mb-0"
+        }), null, 16, ["modelValue", "type"]),
         vue.createVNode(vue.unref(Btn), {
           flat: "",
           thin: "",
@@ -43623,7 +43648,7 @@ const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const SelectInput = /* @__PURE__ */ _export_sfc(_sfc_main$t, [["__scopeId", "data-v-3679d458"]]);
+const SelectInput = /* @__PURE__ */ _export_sfc(_sfc_main$t, [["__scopeId", "data-v-841bf0ec"]]);
 const _hoisted_1$m = {
   class: "toolbar flex gap-025 pb-05 flex-wrap",
   role: "toolbar"
@@ -53076,20 +53101,27 @@ const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
     homeTo: { default: "/" }
   },
   setup(__props) {
-    const isSmallScreen = vue.computed(() => window.innerWidth < 1100);
-    const isOpen = vue.ref(!isSmallScreen.value);
+    let isOpen = vue.ref(true);
+    function calcIsOpen() {
+      isOpen.value = window.innerWidth < 1100 || [null, "true"].includes(localStorage.getItem("navOpen"));
+    }
+    function toggleMenu() {
+      isOpen.value = !isOpen.value;
+      localStorage.setItem("navOpen", `${isOpen.value}`);
+    }
+    vue.onMounted(calcIsOpen);
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock("div", {
-        class: vue.normalizeClass({ open: isOpen.value, closed: !isOpen.value })
+        class: vue.normalizeClass({ open: vue.unref(isOpen), closed: !vue.unref(isOpen) })
       }, [
-        vue.renderSlot(_ctx.$slots, "top", { isOpen: isOpen.value }, void 0, true),
+        vue.renderSlot(_ctx.$slots, "top", { isOpen: vue.unref(isOpen) }, void 0, true),
         vue.createElementVNode("div", {
           class: "nav-expend",
           role: "button",
           "aria-label": "Toggle Navigation",
           tabindex: "0",
-          onClick: _cache[0] || (_cache[0] = ($event) => isOpen.value = !isOpen.value),
-          onKeypress: _cache[1] || (_cache[1] = vue.withKeys(($event) => isOpen.value = !isOpen.value, ["enter"]))
+          onClick: toggleMenu,
+          onKeypress: vue.withKeys(toggleMenu, ["enter"])
         }, [
           vue.createVNode(vue.unref(_sfc_main$b), {
             icon: "chevron_right",
@@ -53147,7 +53179,7 @@ const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const NavBar = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__scopeId", "data-v-2f924811"]]);
+const NavBar = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__scopeId", "data-v-5df5b310"]]);
 const _hoisted_1$3 = { class: "page-top" };
 const _hoisted_2$2 = { class: "top-title m-0" };
 const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({

package/dist/index.mjs

@@ -18945,7 +18945,27 @@ const _hoisted_1$r = { class: "relative" };
 const _sfc_main$x = /* @__PURE__ */ defineComponent({
   __name: "PasswordInput",
   props: /* @__PURE__ */ mergeModels({
-    txtInputProps: {}
+    id: {},
+    title: {},
+    helptext: {},
+    placeholder: {},
+    label: {},
+    small: { type: Boolean },
+    dense: { type: Boolean },
+    required: { type: Boolean },
+    pattern: {},
+    shrink: { type: Boolean },
+    disabled: { type: Boolean },
+    nativeInputAttrs: {},
+    icon: {},
+    iconStart: {},
+    multiline: { type: Boolean },
+    autoheight: { type: Boolean },
+    code: { type: Boolean },
+    lines: {},
+    autofocus: { type: Boolean },
+    debounceDelay: {},
+    onFocusout: { type: Function }
   }, {
     "modelValue": {},
     "modelModifiers": {},
@@ -18954,18 +18974,23 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
   }),
   emits: ["update:modelValue", "update:showPwd"],
   setup(__props) {
+    const props2 = __props;
     const password = useModel(__props, "modelValue");
     const showPwd = useModel(__props, "showPwd");
-    const toggleShowPwdIcon = computed(() => showPwd.value ? "visibility_off" : "visibility");
+    const toggleShowPwdIcon = computed(
+      () => showPwd.value ? "visibility_off" : "visibility"
+    );
     const inputType = computed(() => showPwd.value ? "text" : "password");
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$r, [
         createVNode(unref(TextInput), mergeProps({
           modelValue: password.value,
-          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => password.value = $event),
-          class: "mb-0",
-          type: inputType.value
-        }, _ctx.txtInputProps), null, 16, ["modelValue", "type"]),
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => password.value = $event)
+        }, props2, {
+          type: inputType.value,
+          autocomplete: "current-password",
+          class: "mb-0"
+        }), null, 16, ["modelValue", "type"]),
         createVNode(unref(Btn), {
           flat: "",
           thin: "",
@@ -43621,7 +43646,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const SelectInput = /* @__PURE__ */ _export_sfc(_sfc_main$t, [["__scopeId", "data-v-3679d458"]]);
+const SelectInput = /* @__PURE__ */ _export_sfc(_sfc_main$t, [["__scopeId", "data-v-841bf0ec"]]);
 const _hoisted_1$m = {
   class: "toolbar flex gap-025 pb-05 flex-wrap",
   role: "toolbar"
@@ -53074,20 +53099,27 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
     homeTo: { default: "/" }
   },
   setup(__props) {
-    const isSmallScreen = computed(() => window.innerWidth < 1100);
-    const isOpen = ref(!isSmallScreen.value);
+    let isOpen = ref(true);
+    function calcIsOpen() {
+      isOpen.value = window.innerWidth < 1100 || [null, "true"].includes(localStorage.getItem("navOpen"));
+    }
+    function toggleMenu() {
+      isOpen.value = !isOpen.value;
+      localStorage.setItem("navOpen", `${isOpen.value}`);
+    }
+    onMounted(calcIsOpen);
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
-        class: normalizeClass({ open: isOpen.value, closed: !isOpen.value })
+        class: normalizeClass({ open: unref(isOpen), closed: !unref(isOpen) })
       }, [
-        renderSlot(_ctx.$slots, "top", { isOpen: isOpen.value }, void 0, true),
+        renderSlot(_ctx.$slots, "top", { isOpen: unref(isOpen) }, void 0, true),
         createElementVNode("div", {
           class: "nav-expend",
           role: "button",
           "aria-label": "Toggle Navigation",
           tabindex: "0",
-          onClick: _cache[0] || (_cache[0] = ($event) => isOpen.value = !isOpen.value),
-          onKeypress: _cache[1] || (_cache[1] = withKeys(($event) => isOpen.value = !isOpen.value, ["enter"]))
+          onClick: toggleMenu,
+          onKeypress: withKeys(toggleMenu, ["enter"])
         }, [
           createVNode(unref(_sfc_main$b), {
             icon: "chevron_right",
@@ -53145,7 +53177,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const NavBar = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__scopeId", "data-v-2f924811"]]);
+const NavBar = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__scopeId", "data-v-5df5b310"]]);
 const _hoisted_1$3 = { class: "page-top" };
 const _hoisted_2$2 = { class: "top-title m-0" };
 const _sfc_main$6 = /* @__PURE__ */ defineComponent({

package/dist/style.css

@@ -914,7 +914,7 @@ data[data-v-2da95d24] {
 	direction: ltr;
 }
 
-.m-password{
+.m-password {
 	margin-block: calc(var(--input-height) / 2 - 15px);
 }
 
@@ -1108,10 +1108,10 @@ p {
 }
 .resize-observer[data-v-b329ee4c]{position:absolute;top:0;left:0;z-index:-1;width:100%;height:100%;border:none;background-color:transparent;pointer-events:none;display:block;overflow:hidden;opacity:0}.resize-observer[data-v-b329ee4c] object{display:block;position:absolute;top:0;left:0;height:100%;width:100%;overflow:hidden;pointer-events:none;z-index:-1}.v-popper__popper{z-index:10000;top:0;left:0;outline:none}.v-popper__popper.v-popper__popper--hidden{visibility:hidden;opacity:0;transition:opacity .15s,visibility .15s;pointer-events:none}.v-popper__popper.v-popper__popper--shown{visibility:visible;opacity:1;transition:opacity .15s}.v-popper__popper.v-popper__popper--skip-transition,.v-popper__popper.v-popper__popper--skip-transition>.v-popper__wrapper{transition:none!important}.v-popper__backdrop{position:absolute;top:0;left:0;width:100%;height:100%;display:none}.v-popper__inner{position:relative;box-sizing:border-box;overflow-y:auto}.v-popper__inner>div{position:relative;z-index:1;max-width:inherit;max-height:inherit}.v-popper__arrow-container{position:absolute;width:10px;height:10px}.v-popper__popper--arrow-overflow .v-popper__arrow-container,.v-popper__popper--no-positioning .v-popper__arrow-container{display:none}.v-popper__arrow-inner,.v-popper__arrow-outer{border-style:solid;position:absolute;top:0;left:0;width:0;height:0}.v-popper__arrow-inner{visibility:hidden;border-width:7px}.v-popper__arrow-outer{border-width:6px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner{left:-2px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-outer,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{left:-1px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-outer{border-bottom-width:0;border-left-color:transparent!important;border-right-color:transparent!important;border-bottom-color:transparent!important}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner{top:-2px}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-container{top:0}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{border-top-width:0;border-left-color:transparent!important;border-right-color:transparent!important;border-top-color:transparent!important}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner{top:-4px}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{top:-6px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner{top:-2px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-outer,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{top:-1px}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{border-left-width:0;border-left-color:transparent!important;border-top-color:transparent!important;border-bottom-color:transparent!important}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner{left:-4px}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{left:-6px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-container{right:-10px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-outer{border-right-width:0;border-top-color:transparent!important;border-right-color:transparent!important;border-bottom-color:transparent!important}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner{left:-2px}.v-popper--theme-tooltip .v-popper__inner{background:rgba(0,0,0,.8);color:#fff;border-radius:6px;padding:7px 12px 6px}.v-popper--theme-tooltip .v-popper__arrow-outer{border-color:#000c}.v-popper--theme-dropdown .v-popper__inner{background:#fff;color:#000;border-radius:6px;border:1px solid #ddd;box-shadow:0 6px 30px #0000001a}.v-popper--theme-dropdown .v-popper__arrow-inner{visibility:visible;border-color:#fff}.v-popper--theme-dropdown .v-popper__arrow-outer{border-color:#ddd}
 
-.selectinput[data-v-3679d458] {
+.selectinput[data-v-841bf0ec] {
 	width: 100%;
 }
-.selectinput-option[data-v-3679d458] {
+.selectinput-option[data-v-841bf0ec] {
 	padding: 6px 12px;
 	cursor: pointer;
 	border-radius: 5px;
@@ -1123,24 +1123,25 @@ p {
 	font-size: var(--input-font-size);
 	margin-block: 0.15rem;
 }
-.selectinput-option .bgl_icon-font[data-v-3679d458]{
+.selectinput-option .bgl_icon-font[data-v-841bf0ec]{
 	line-height: normal;
 }
-.selectinput-options.multiselect .selectinput-option[data-v-3679d458] {
+.selectinput-options.multiselect .selectinput-option[data-v-841bf0ec] {
 	grid-template-columns: 10px 1fr;
 }
-.selectinput-options[data-v-3679d458] {
+.selectinput-options[data-v-841bf0ec] {
 	max-height: 300px;
 	overflow-y: auto;
 }
-.selectinput-option[data-v-3679d458]:hover {
+.selectinput-option[data-v-841bf0ec]:hover {
 	background: var(--bgl-gray-20);
 }
-.isEmpty p[data-v-3679d458] {
+.isEmpty p[data-v-841bf0ec] {
 	opacity: 0.3;
 }
-.selected[data-v-3679d458]{
-	background: var(--bgl-primary-tint);
+.selected[data-v-841bf0ec]{
+	/* background: var(--bgl-primary-tint); */
+	background: var(--bgl-gray-light);
 }
 
 .bagel-input label {
@@ -2792,10 +2793,10 @@ svg.leaflet-image-layer.leaflet-interactive path {
 }
 }
 
-[dir='rtl'] .top-arrow[data-v-2f924811] {
+[dir='rtl'] .top-arrow[data-v-5df5b310] {
 	transform: rotate(180deg);
 }
-.nav-expend[data-v-2f924811] {
+.nav-expend[data-v-5df5b310] {
 	text-align: center;
 	cursor: pointer;
 	background: var(--bgl-popup-bg);
@@ -2821,17 +2822,17 @@ svg.leaflet-image-layer.leaflet-interactive path {
 	margin-bottom: 30px;
 }
 */
-.nav-expend[data-v-2f924811] {
+.nav-expend[data-v-5df5b310] {
 	background: var(--bgl-popup-bg);
 }
-.nav-expend[data-v-2f924811]:hover {
+.nav-expend[data-v-5df5b310]:hover {
 	filter: brightness(95%);
 	box-shadow: 0 0 20px 0 var(--bgl-primary-tint);
 }
-.nav-expend[data-v-2f924811]:active {
+.nav-expend[data-v-5df5b310]:active {
 	filter: var(--bgl-active-filter);
 }
-.nav[data-v-2f924811] {
+.nav[data-v-5df5b310] {
 	color: var(--bgl-light-text);
 	background: var(--bgl-primary);
 	z-index: 100;
@@ -2840,10 +2841,10 @@ svg.leaflet-image-layer.leaflet-interactive path {
 	display: flex;
 	flex-direction: column;
 }
-.nav[data-v-2f924811] * {
+.nav[data-v-5df5b310] * {
 	user-select: none;
 }
-.nav-button[data-v-2f924811] {
+.nav-button[data-v-5df5b310] {
 	text-decoration: none;
 	cursor: pointer;
 	display: flex;
@@ -2854,11 +2855,11 @@ svg.leaflet-image-layer.leaflet-interactive path {
 	transition: all 0.2s ease;
 	pointer-events: none;
 }
-.nav-button[data-v-2f924811]:hover {
+.nav-button[data-v-5df5b310]:hover {
 	width: fit-content;
 	pointer-events: all;
 }
-.nav-button .bgl_icon-font[data-v-2f924811] {
+.nav-button .bgl_icon-font[data-v-5df5b310] {
 	font-size: 22px;
 	margin: 0.25rem 10px;
 	padding: 10px;
@@ -2871,16 +2872,16 @@ svg.leaflet-image-layer.leaflet-interactive path {
 	transition: all 0.2s ease;
 	pointer-events: all;
 }
-.nav-button:hover .bgl_icon-font[data-v-2f924811],
-.nav-button.router-link-active .bgl_icon-font[data-v-2f924811] {
+.nav-button:hover .bgl_icon-font[data-v-5df5b310],
+.nav-button.router-link-active .bgl_icon-font[data-v-5df5b310] {
 	background: var(--bgl-box-bg);
 	color: var(--bgl-primary);
 }
-.nav-button:hover .tooltip[data-v-2f924811] {
+.nav-button:hover .tooltip[data-v-5df5b310] {
 	opacity: 1;
 	pointer-events: all;
 }
-.tooltip[data-v-2f924811] {
+.tooltip[data-v-5df5b310] {
 	background-color: var(--bgl-popup-bg);
 	color: var(--bgl-primary);
 	line-height: 1;
@@ -2894,23 +2895,23 @@ svg.leaflet-image-layer.leaflet-interactive path {
 	opacity: 0;
 	margin-inline-start: 1rem;
 }
-.tooltip[data-v-2f924811]:hover {
+.tooltip[data-v-5df5b310]:hover {
 	filter: brightness(95%);
 }
-.tooltip[data-v-2f924811]:active {
+.tooltip[data-v-5df5b310]:active {
 	filter: brightness(90%);
 }
-.bot-buttons-wrapper[data-v-2f924811] {
+.bot-buttons-wrapper[data-v-5df5b310] {
 	margin-top: auto;
 	width: 100%;
 }
-.nav-links-wrapper[data-v-2f924811] {
+.nav-links-wrapper[data-v-5df5b310] {
 	direction: ltr;
 }
-[dir='rtl'] .nav-links-wrapper[data-v-2f924811] {
+[dir='rtl'] .nav-links-wrapper[data-v-5df5b310] {
 	direction: rtl;
 }
-.nav-scroll[data-v-2f924811] {
+.nav-scroll[data-v-5df5b310] {
 	overflow-y: scroll;
 	width: 50vw;
 	direction: rtl;
@@ -2920,30 +2921,30 @@ svg.leaflet-image-layer.leaflet-interactive path {
 	display: flex;
 	flex-direction: column;
 }
-.nav[data-v-2f924811]::-webkit-scrollbar-thumb {
+.nav[data-v-5df5b310]::-webkit-scrollbar-thumb {
 	background-color: transparent;
 }
-.nav[data-v-2f924811]:hover::-webkit-scrollbar-thumb {
+.nav[data-v-5df5b310]:hover::-webkit-scrollbar-thumb {
 	background-color: var(--bgl-gray);
 }
-[dir='rtl'] .nav-scroll[data-v-2f924811] {
+[dir='rtl'] .nav-scroll[data-v-5df5b310] {
 	direction: ltr;
 }
-.full-nav[data-v-2f924811] {
+.full-nav[data-v-5df5b310] {
 	height: 100%;
 	display: flex;
 	flex-direction: column;
 }
 @media screen and (min-width: 910px) {
-.nav.open .nav-expend[data-v-2f924811] {
+.nav.open .nav-expend[data-v-5df5b310] {
 		margin-inline-start: 189px;
 		transform: rotate(180deg);
 }
-.nav.open[data-v-2f924811] {
+.nav.open[data-v-5df5b310] {
 		width: 200px;
 		text-align: start;
 }
-.nav.open .tooltip[data-v-2f924811] {
+.nav.open .tooltip[data-v-5df5b310] {
 		background-color: transparent;
 		color: var(--bgl-light-text);
 		padding: 0;
@@ -2952,30 +2953,30 @@ svg.leaflet-image-layer.leaflet-interactive path {
 		opacity: 1;
 		margin-inline-start: 0rem;
 }
-.nav.open .nav-button .bgl_icon-font[data-v-2f924811] {
+.nav.open .nav-button .bgl_icon-font[data-v-5df5b310] {
 		margin: 0;
 		background: transparent;
 }
-.nav.open .nav-button[data-v-2f924811] {
+.nav.open .nav-button[data-v-5df5b310] {
 		width: 180px;
 		border-radius: 10px;
 		margin-inline-start: 10px;
 		margin-top: 10px;
 		margin-bottom: 10px;
 }
-.nav.open .nav-button[data-v-2f924811]:hover,
-	.nav.open .nav-button.router-link-active[data-v-2f924811] {
+.nav.open .nav-button[data-v-5df5b310]:hover,
+	.nav.open .nav-button.router-link-active[data-v-5df5b310] {
 		background: var(--bgl-popup-bg);
 		color: var(--bgl-primary);
 }
-.nav.open .nav-button[data-v-2f924811]:hover,
-	.nav.open .nav-button:hover .tooltip[data-v-2f924811],
-	.nav.open .nav-button.router-link-active .tooltip[data-v-2f924811] {
+.nav.open .nav-button[data-v-5df5b310]:hover,
+	.nav.open .nav-button:hover .tooltip[data-v-5df5b310],
+	.nav.open .nav-button.router-link-active .tooltip[data-v-5df5b310] {
 		color: var(--bgl-primary);
 }
 }
 @media screen and (max-width: 910px) {
-.full-nav[data-v-2f924811] {
+.full-nav[data-v-5df5b310] {
 		height: auto;
 		display: flex;
 		flex-direction: row;
@@ -2984,10 +2985,10 @@ svg.leaflet-image-layer.leaflet-interactive path {
 		inset-inline-end: 0;
 		overflow-x: auto;
 }
-.nav.open[data-v-2f924811] {
+.nav.open[data-v-5df5b310] {
 		width: initial;
 }
-.nav[data-v-2f924811] {
+.nav[data-v-5df5b310] {
 		width: auto;
 		display: flex;
 		flex-direction: row;
@@ -2995,7 +2996,7 @@ svg.leaflet-image-layer.leaflet-interactive path {
 		overflow-x: auto;
 		justify-content: flex-start;
 }
-.tooltip[data-v-2f924811] {
+.tooltip[data-v-5df5b310] {
 		opacity: 1;
 		background: transparent;
 		color: var(--bgl-light-text);
@@ -3004,25 +3005,25 @@ svg.leaflet-image-layer.leaflet-interactive path {
 		padding: 0;
 		margin: 0;
 }
-.nav-button[data-v-2f924811] {
+.nav-button[data-v-5df5b310] {
 		flex-direction: column;
 		margin: 12px 0.25rem;
 }
-.nav-button .bgl_icon-font[data-v-2f924811] {
+.nav-button .bgl_icon-font[data-v-5df5b310] {
 		padding: 2px 0 0 0;
 		margin: 0;
 		height: 30px;
 		width: 30px;
 }
-.nav-links-wrapper[data-v-2f924811] {
+.nav-links-wrapper[data-v-5df5b310] {
 		display: flex;
 }
-.bot-buttons-wrapper[data-v-2f924811] {
+.bot-buttons-wrapper[data-v-5df5b310] {
 		margin-top: 0;
 		width: auto;
 		display: flex;
 }
-.nav-scroll[data-v-2f924811] {
+.nav-scroll[data-v-5df5b310] {
 		overflow-y: visible;
 		width: auto;
 		direction: auto;
@@ -3033,15 +3034,15 @@ svg.leaflet-image-layer.leaflet-interactive path {
 		flex-direction: row;
 		margin-inline-end: auto;
 }
-.nav[data-v-2f924811]::-webkit-scrollbar {
+.nav[data-v-5df5b310]::-webkit-scrollbar {
 		display: none;
 }
-.nav-expend[data-v-2f924811] {
+.nav-expend[data-v-5df5b310] {
 		display: none;
 }
 }
 @media screen and (max-height: 550px) {
-.nav.open .nav-button[data-v-2f924811] {
+.nav.open .nav-button[data-v-5df5b310] {
 		margin-top: 4px;
 		margin-bottom: 4px;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "0.0.757",
+  "version": "0.0.761",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",

package/src/components/NavBar.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import { MaterialIcon } from '@bagelink/vue'
+import { onMounted } from 'vue'
 import type { MaterialIcons, NavLink } from '@bagelink/vue'
 
 withDefaults(
@@ -19,8 +20,18 @@ withDefaults(
 	}
 )
 
-const isSmallScreen = $computed(() => window.innerWidth < 1100)
-const isOpen = $ref(!isSmallScreen)
+let isOpen = $ref(true)
+function calcIsOpen() {
+	isOpen =
+		window.innerWidth < 1100 ||
+		[null, 'true'].includes(localStorage.getItem('navOpen'))
+}
+
+function toggleMenu() {
+	isOpen = !isOpen
+	localStorage.setItem('navOpen', `${isOpen}`)
+}
+onMounted(calcIsOpen)
 </script>
 
 <template>
@@ -31,8 +42,8 @@ const isOpen = $ref(!isSmallScreen)
 			role="button"
 			aria-label="Toggle Navigation"
 			tabindex="0"
-			@click="isOpen = !isOpen"
-			@keypress.enter="isOpen = !isOpen"
+			@click="toggleMenu"
+			@keypress.enter="toggleMenu"
 		>
 			<MaterialIcon icon="chevron_right" class="top-arrow" />
 		</div>
@@ -365,7 +376,7 @@ const isOpen = $ref(!isSmallScreen)
 		display: none;
 	}
 }
-	@media screen and (max-height: 550px) {
+@media screen and (max-height: 550px) {
 	.nav.open .nav-button {
 		margin-top: 4px;
 		margin-bottom: 4px;

package/src/components/form/inputs/PasswordInput.vue

@@ -1,31 +1,61 @@
 <script setup lang="ts">
-import { Btn, TextInput } from '@bagelink/vue'
+import { Btn, type MaterialIcons, TextInput } from '@bagelink/vue'
 
-export type TextInputT = InstanceType<typeof TextInput>
-
-export type TextInputProps = Omit<
-	TextInputT['$props'],
-	(`${string}modelValue` | `ref${string}` | `onVnode${string}` | 'key' | 'type')
->
-// const props =
-defineProps<{ txtInputProps: TextInputProps }>()
+export interface TextInputProps {
+	id?: string
+	title?: string
+	helptext?: string
+	placeholder?: string
+	label?: string
+	small?: boolean
+	dense?: boolean
+	required?: boolean
+	pattern?: string
+	shrink?: boolean
+	disabled?: boolean
+	nativeInputAttrs?: Record<string, any>
+	icon?: MaterialIcons
+	iconStart?: MaterialIcons
+	multiline?: boolean
+	autoheight?: boolean
+	code?: boolean
+	lines?: number
+	autofocus?: boolean
+	debounceDelay?: number
+	onFocusout?: (e: FocusEvent) => void
+}
+const props = defineProps<TextInputProps>()
 
-const password = defineModel< string>('modelValue')
+const password = defineModel<string>('modelValue')
 const showPwd = defineModel<boolean>('showPwd', { default: false })
 
-const toggleShowPwdIcon = $computed(() => showPwd.value ? 'visibility_off' : 'visibility')
-const inputType = $computed(() => showPwd.value ? 'text' : 'password')
+const toggleShowPwdIcon = $computed(() =>
+	showPwd.value ? 'visibility_off' : 'visibility'
+)
+const inputType = $computed(() => (showPwd.value ? 'text' : 'password'))
 </script>
 
 <template>
 	<div class="relative">
-		<TextInput v-model="password" class="mb-0" :type="inputType" v-bind="txtInputProps" />
-		<Btn flat thin class="mx-05 m-password position-bottom-end" :icon="toggleShowPwdIcon" @click="showPwd = !showPwd" />
+		<TextInput
+			v-model="password"
+			v-bind="props"
+			:type="inputType"
+			autocomplete="current-password"
+			class="mb-0"
+		/>
+		<Btn
+			flat
+			thin
+			class="mx-05 m-password position-bottom-end"
+			:icon="toggleShowPwdIcon"
+			@click="showPwd = !showPwd"
+		/>
 	</div>
 </template>
 
 <style>
-.m-password{
+.m-password {
 	margin-block: calc(var(--input-height) / 2 - 15px);
 }
 </style>

package/src/components/form/inputs/SelectInput.vue

@@ -310,7 +310,8 @@ onMounted(() => {
 	opacity: 0.3;
 }
 .selected{
-	background: var(--bgl-primary-tint);
+	/* background: var(--bgl-primary-tint); */
+	background: var(--bgl-gray-light);
 }
 </style>