@bagelink/vue 0.0.417 → 0.0.421

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

@@ -1 +1 @@
-{"version":3,"file":"ListView.vue.d.ts","sourceRoot":"","sources":["../../src/components/ListView.vue"],"names":[],"mappings":"AAUA;;;;;AAyFA,wBAAwG;AACxG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAAE,QAAO;QAClD,MAAM,EAAE,CAAC,CAAC;KACT,CAAA;CAAE,CAAC"}
+{"version":3,"file":"ListView.vue.d.ts","sourceRoot":"","sources":["../../src/components/ListView.vue"],"names":[],"mappings":"AAUA;;;;;AAsFA,wBAAwG;AACxG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAAE,QAAO;QAClD,MAAM,EAAE,CAAC,CAAC;KACT,CAAA;CAAE,CAAC"}

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

@@ -2,21 +2,33 @@ type Option = string | number | Record<string, any> | {
     label: string;
     value: string | number;
 };
-declare const _default: import('vue').DefineComponent<__VLS_TypePropsToRuntimeProps<{
+declare const _default: import('vue').DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     options?: Option[] | undefined;
     modelValue?: any;
     id?: string | undefined;
     label?: string | undefined;
+}>, {
+    modelValue: string;
+    id: () => string;
+    label: string;
 }>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "update:modelValue": (...args: any[]) => void;
-}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     options?: Option[] | undefined;
     modelValue?: any;
     id?: string | undefined;
     label?: string | undefined;
+}>, {
+    modelValue: string;
+    id: () => string;
+    label: string;
 }>>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-}, {}, {}>;
+}, {
+    label: string;
+    modelValue: any;
+    id: string;
+}, {}>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 type __VLS_TypePropsToRuntimeProps<T> = {
@@ -27,4 +39,12 @@ type __VLS_TypePropsToRuntimeProps<T> = {
         required: true;
     };
 };
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
 //# sourceMappingURL=RadioPillsInput.vue.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"RadioPillsInput.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/form/inputs/RadioPillsInput.vue"],"names":[],"mappings":"AAmBA;AAMA,KAAK,MAAM,GACR,MAAM,GACN,MAAM,GACN,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GACnB;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,CAAC;;;iBAqK/B,GAAG;;;;;;;iBAAH,GAAG;;;;;;AAPjB,wBAYG;AACH,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC"}
+{"version":3,"file":"RadioPillsInput.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/form/inputs/RadioPillsInput.vue"],"names":[],"mappings":"AAmBA;AAMA,KAAK,MAAM,GACR,MAAM,GACN,MAAM,GACN,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GACnB;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,CAAC;;;iBAiL9B,GAAG;;;;;;;;;;;iBAAH,GAAG;;;;;;;;;;WAER,MAAM;gBAFD,GAAG;QACX,MAAM;;AARb,wBAYG;AACH,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC;AAC9M,KAAK,kBAAkB,CAAC,CAAC,EAAE,CAAC,IAAI;KAE1B,CAAC,IAAI,MAAM,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,SAAS,MAAM,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG;QACxE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;KACb,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CACT,CAAC;AACN,KAAK,cAAc,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}

package/dist/index.cjs

@@ -4953,7 +4953,7 @@ function slctField(id, label, options, config) {
     required: config == null ? void 0 : config.required,
     label,
     defaultValue: config == null ? void 0 : config.defaultValue,
-    attrs: { disabled: config == null ? void 0 : config.disabled, searchable: config == null ? void 0 : config.searchable }
+    attrs: { disabled: config == null ? void 0 : config.disabled, searchable: config == null ? void 0 : config.searchable, multiselect: config == null ? void 0 : config.multiselect }
   };
 }
 function checkField(id, label, options) {
@@ -5541,24 +5541,21 @@ const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
   }
 });
 const AccordionItem = /* @__PURE__ */ _export_sfc(_sfc_main$D, [["__scopeId", "data-v-bf74738b"]]);
+const _sfc_main$C = {};
 const _hoisted_1$A = { class: "list-wrap bgl_card thin grid overflow-hidden h-100 p-0" };
 const _hoisted_2$t = { class: "p-1" };
 const _hoisted_3$j = { class: "list-content auto-flow-rows align-items-start overflow-y h-100" };
-const _sfc_main$C = /* @__PURE__ */ vue.defineComponent({
-  __name: "ListView",
-  setup(__props) {
-    return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$A, [
-        vue.createElementVNode("div", _hoisted_2$t, [
-          vue.renderSlot(_ctx.$slots, "header")
-        ]),
-        vue.createElementVNode("div", _hoisted_3$j, [
-          vue.renderSlot(_ctx.$slots, "default")
-        ])
-      ]);
-    };
-  }
-});
+function _sfc_render$2(_ctx, _cache) {
+  return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$A, [
+    vue.createElementVNode("div", _hoisted_2$t, [
+      vue.renderSlot(_ctx.$slots, "header")
+    ]),
+    vue.createElementVNode("div", _hoisted_3$j, [
+      vue.renderSlot(_ctx.$slots, "default")
+    ])
+  ]);
+}
+const ListView = /* @__PURE__ */ _export_sfc(_sfc_main$C, [["render", _sfc_render$2]]);
 const _hoisted_1$z = { class: "txt16 no-margin ellipsis" };
 const _hoisted_2$s = { class: "txt14 no-margin txt-gray ellipsis" };
 const _sfc_main$B = /* @__PURE__ */ vue.defineComponent({
@@ -15420,7 +15417,7 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
             selectedItems.value.splice(i2, 1, exists);
         });
       },
-      { deep: true }
+      { deep: true, immediate: true }
     );
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createBlock(vue.unref(kt$1), {
@@ -15430,7 +15427,7 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
         placement: "bottom-start",
         class: "bagel-input selectinput"
       }, {
-        popper: vue.withCtx(({ hide: hide2 }) => [
+        popper: vue.withCtx(() => [
           vue.createVNode(vue.unref(_sfc_main$v), {
             class: "selectinput-options p-05",
             style: vue.normalizeStyle({ width: _ctx.fullWidth ? "100%" : "auto" })
@@ -15497,7 +15494,7 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const SelectInput = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-edead329"]]);
+const SelectInput = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-48577821"]]);
 /*!
   * vue-draggable-next v2.2.0
   * (c) 2023 Anish George
@@ -18490,9 +18487,9 @@ const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
   __name: "RadioPillsInput",
   props: {
     options: {},
-    modelValue: {},
-    id: {},
-    label: {}
+    modelValue: { default: "" },
+    id: { default: () => `radio-pill-${Math.random().toString(36).substr(2, 9)}` },
+    label: { default: "" }
   },
   emits: ["update:modelValue"],
   setup(__props, { emit: __emit }) {
@@ -18543,14 +18540,14 @@ const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
             }, [
               vue.createElementVNode("input", {
                 type: "radio",
-                id: getValue(option2),
+                id: `${_ctx.id}-${getValue(option2)}`,
                 name: _ctx.id,
                 value: getValue(option2),
                 checked: vue.unref(selectedValue) === getValue(option2),
                 onChange: handleSelect
               }, null, 40, _hoisted_4$6),
               vue.createElementVNode("label", {
-                for: getValue(option2)
+                for: `${_ctx.id}-${getValue(option2)}`
               }, vue.toDisplayString(getLabel(option2)), 9, _hoisted_5$5)
             ]);
           }), 128))
@@ -18559,7 +18556,7 @@ const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const RadioPillsInput = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__scopeId", "data-v-4ab84e78"]]);
+const RadioPillsInput = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__scopeId", "data-v-41859ed6"]]);
 const _hoisted_1$f = { class: "bagel-input" };
 const _hoisted_2$c = {
   key: 0,
@@ -51190,7 +51187,7 @@ exports.JSONInput = JSONInput;
 exports.Layout = Layout;
 exports.Lineart = _sfc_main$7;
 exports.ListItem = _sfc_main$B;
-exports.ListView = _sfc_main$C;
+exports.ListView = ListView;
 exports.MaterialIcon = _sfc_main$I;
 exports.Modal = _sfc_main$F;
 exports.ModalConfirm = _sfc_main$n;

package/dist/index.mjs

@@ -4951,7 +4951,7 @@ function slctField(id, label, options, config) {
     required: config == null ? void 0 : config.required,
     label,
     defaultValue: config == null ? void 0 : config.defaultValue,
-    attrs: { disabled: config == null ? void 0 : config.disabled, searchable: config == null ? void 0 : config.searchable }
+    attrs: { disabled: config == null ? void 0 : config.disabled, searchable: config == null ? void 0 : config.searchable, multiselect: config == null ? void 0 : config.multiselect }
   };
 }
 function checkField(id, label, options) {
@@ -5539,24 +5539,21 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
   }
 });
 const AccordionItem = /* @__PURE__ */ _export_sfc(_sfc_main$D, [["__scopeId", "data-v-bf74738b"]]);
+const _sfc_main$C = {};
 const _hoisted_1$A = { class: "list-wrap bgl_card thin grid overflow-hidden h-100 p-0" };
 const _hoisted_2$t = { class: "p-1" };
 const _hoisted_3$j = { class: "list-content auto-flow-rows align-items-start overflow-y h-100" };
-const _sfc_main$C = /* @__PURE__ */ defineComponent({
-  __name: "ListView",
-  setup(__props) {
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$A, [
-        createElementVNode("div", _hoisted_2$t, [
-          renderSlot(_ctx.$slots, "header")
-        ]),
-        createElementVNode("div", _hoisted_3$j, [
-          renderSlot(_ctx.$slots, "default")
-        ])
-      ]);
-    };
-  }
-});
+function _sfc_render$2(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", _hoisted_1$A, [
+    createElementVNode("div", _hoisted_2$t, [
+      renderSlot(_ctx.$slots, "header")
+    ]),
+    createElementVNode("div", _hoisted_3$j, [
+      renderSlot(_ctx.$slots, "default")
+    ])
+  ]);
+}
+const ListView = /* @__PURE__ */ _export_sfc(_sfc_main$C, [["render", _sfc_render$2]]);
 const _hoisted_1$z = { class: "txt16 no-margin ellipsis" };
 const _hoisted_2$s = { class: "txt14 no-margin txt-gray ellipsis" };
 const _sfc_main$B = /* @__PURE__ */ defineComponent({
@@ -15418,7 +15415,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
             selectedItems.value.splice(i2, 1, exists);
         });
       },
-      { deep: true }
+      { deep: true, immediate: true }
     );
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(kt$1), {
@@ -15428,7 +15425,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
         placement: "bottom-start",
         class: "bagel-input selectinput"
       }, {
-        popper: withCtx(({ hide: hide2 }) => [
+        popper: withCtx(() => [
           createVNode(unref(_sfc_main$v), {
             class: "selectinput-options p-05",
             style: normalizeStyle({ width: _ctx.fullWidth ? "100%" : "auto" })
@@ -15495,7 +15492,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const SelectInput = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-edead329"]]);
+const SelectInput = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-48577821"]]);
 /*!
   * vue-draggable-next v2.2.0
   * (c) 2023 Anish George
@@ -18488,9 +18485,9 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
   __name: "RadioPillsInput",
   props: {
     options: {},
-    modelValue: {},
-    id: {},
-    label: {}
+    modelValue: { default: "" },
+    id: { default: () => `radio-pill-${Math.random().toString(36).substr(2, 9)}` },
+    label: { default: "" }
   },
   emits: ["update:modelValue"],
   setup(__props, { emit: __emit }) {
@@ -18541,14 +18538,14 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
             }, [
               createElementVNode("input", {
                 type: "radio",
-                id: getValue(option2),
+                id: `${_ctx.id}-${getValue(option2)}`,
                 name: _ctx.id,
                 value: getValue(option2),
                 checked: unref(selectedValue) === getValue(option2),
                 onChange: handleSelect
               }, null, 40, _hoisted_4$6),
               createElementVNode("label", {
-                for: getValue(option2)
+                for: `${_ctx.id}-${getValue(option2)}`
               }, toDisplayString(getLabel(option2)), 9, _hoisted_5$5)
             ]);
           }), 128))
@@ -18557,7 +18554,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const RadioPillsInput = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__scopeId", "data-v-4ab84e78"]]);
+const RadioPillsInput = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__scopeId", "data-v-41859ed6"]]);
 const _hoisted_1$f = { class: "bagel-input" };
 const _hoisted_2$c = {
   key: 0,
@@ -51189,7 +51186,7 @@ export {
   Layout,
   _sfc_main$7 as Lineart,
   _sfc_main$B as ListItem,
-  _sfc_main$C as ListView,
+  ListView,
   _sfc_main$I as MaterialIcon,
   _sfc_main$F as Modal,
   _sfc_main$n as ModalConfirm,

package/dist/style.css

@@ -577,39 +577,39 @@ a[data-v-d09a83c5] {
 }
 
 .list-wrap {
-  grid-template-rows: auto 1fr;
+	grid-template-rows: auto 1fr;
 }
 .list-item {
-  padding: 0.5rem 1rem;
-  min-height: -webkit-fit-content;
-  min-height: -moz-fit-content;
-  min-height: fit-content;
-  margin: 0.25rem 0;
-  cursor: pointer;
-  transition: var(--bgl-transition);
-  color: var(--bgl-black);
-  text-decoration: none;
-  position: relative;
+	padding: 0.5rem 1rem;
+	min-height: -webkit-fit-content;
+	min-height: -moz-fit-content;
+	min-height: fit-content;
+	margin: 0.25rem 0;
+	cursor: pointer;
+	transition: var(--bgl-transition);
+	color: var(--bgl-black);
+	text-decoration: none;
+	position: relative;
 }
 .list-item::after {
-  content: "";
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: -0.15rem;
-  border-bottom: 1px solid var(--border-color);
+	content: '';
+	position: absolute;
+	left: 0;
+	right: 0;
+	bottom: -0.15rem;
+	border-bottom: 1px solid var(--border-color);
 }
 .list-item:hover,
 .list-item.router-link-active {
-  background-color: var(--bgl-blue-light);
+	background-color: var(--bgl-blue-light);
 }
 .list-item:active {
-  -webkit-filter: var(--bgl-hover-filter);
-  filter: var(--bgl-hover-filter);
+	-webkit-filter: var(--bgl-hover-filter);
+	filter: var(--bgl-hover-filter);
 }
 @media screen and (max-width: 910px) {
 .list-item {
-    padding: 0.5rem;
+		padding: 0.5rem;
 }
 }
 
@@ -1070,10 +1070,10 @@ display: block;
 }
 .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-edead329] {
+.selectinput[data-v-48577821] {
 	width: 100%;
 }
-.selectinput-option[data-v-edead329] {
+.selectinput-option[data-v-48577821] {
 	padding: 6px 12px;
 	cursor: pointer;
 	border-radius: 5px;
@@ -1084,14 +1084,14 @@ display: block;
 	width: 100%;
 	font-size: var(--input-font-size);
 }
-.selectinput-options[data-v-edead329] {
+.selectinput-options[data-v-48577821] {
 	max-height: 300px;
 	overflow-y: auto;
 }
-.selectinput-option[data-v-edead329]:hover {
+.selectinput-option[data-v-48577821]:hover {
 	background: var(--bgl-gray-20);
 }
-.isEmpty p[data-v-edead329] {
+.isEmpty p[data-v-48577821] {
 	opacity: 0.3;
 }
 
@@ -1477,7 +1477,7 @@ display: block;
 }
 }
 
-.radio-pill label[data-v-4ab84e78] {
+.radio-pill label[data-v-41859ed6] {
 	color: var(--bgl-primary);
 	white-space: nowrap;
 	border-radius: calc(var(--btn-border-radius) * 2);
@@ -1491,13 +1491,13 @@ display: block;
 	background: var(--bgl-white);
 	user-select: none;
 }
-.radio-pill label[data-v-4ab84e78]:hover {
+.radio-pill label[data-v-41859ed6]:hover {
 	filter: var(--bgl-hover-filter);
 }
-.radio-pill input[data-v-4ab84e78] {
+.radio-pill input[data-v-41859ed6] {
 	display: none;
 }
-.radio-pill input:checked ~ label[data-v-4ab84e78] {
+.radio-pill input:checked ~ label[data-v-41859ed6] {
 	background: var(--bgl-primary);
 	color: var(--bgl-white);
 }

package/dist/utils/BagelFormUtils.d.ts

@@ -18,6 +18,7 @@ interface TextInputOptions extends InputOptions {
 }
 interface SlctInputOptions extends InputOptions {
     searchable?: boolean;
+    multiselect?: boolean;
 }
 interface NumFieldOptions extends InputOptions {
     max?: number;

package/dist/utils/BagelFormUtils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BagelFormUtils.d.ts","sourceRoot":"","sources":["../../src/utils/BagelFormUtils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAE3C,MAAM,MAAM,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,CAAC;AAEvG,UAAU,YAAY;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,UAAU,gBAAiB,SAAQ,YAAY;IAC9C,IAAI,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,OAAO,CAAC;IAChC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,UAAU,gBAAiB,SAAQ,YAAY;IAC9C,UAAU,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,UAAU,eAAgB,SAAQ,YAAY;IAC7C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;CACd;AAED,KAAK,eAAe,GAAG,YAAY,CAAA;AAEnC,wBAAgB,QAAQ,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,eAAe;;;;;;;;EAU7E;AAED,wBAAgB,QAAQ,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,gBAAgB,GAAG,KAAK,CAUtF;AAED,wBAAgB,SAAS,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,MAAM,EAAE,GAAG,CAAC,MAAM,MAAM,EAAE,CAAC,EAAE,MAAM,CAAC,EAAE,gBAAgB,GAAG,KAAK,CAY7H;AAED,wBAAgB,UAAU,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,eAAe,GAAG,KAAK,CAQvF;AAED,wBAAgB,QAAQ,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,eAAe,GAAG,KAAK,CAUrF;AAED,wBAAgB,MAAM,CAAC,GAAG,QAAQ,EAAE,KAAK,EAAE;;;;EAM1C"}
+{"version":3,"file":"BagelFormUtils.d.ts","sourceRoot":"","sources":["../../src/utils/BagelFormUtils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAE3C,MAAM,MAAM,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,CAAC;AAEvG,UAAU,YAAY;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,UAAU,gBAAiB,SAAQ,YAAY;IAC9C,IAAI,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,OAAO,CAAC;IAChC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,UAAU,gBAAiB,SAAQ,YAAY;IAC9C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,UAAU,eAAgB,SAAQ,YAAY;IAC7C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;CACd;AAED,KAAK,eAAe,GAAG,YAAY,CAAA;AAEnC,wBAAgB,QAAQ,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,eAAe;;;;;;;;EAU7E;AAED,wBAAgB,QAAQ,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,gBAAgB,GAAG,KAAK,CAUtF;AAED,wBAAgB,SAAS,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,MAAM,EAAE,GAAG,CAAC,MAAM,MAAM,EAAE,CAAC,EAAE,MAAM,CAAC,EAAE,gBAAgB,GAAG,KAAK,CAY7H;AAED,wBAAgB,UAAU,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,eAAe,GAAG,KAAK,CAQvF;AAED,wBAAgB,QAAQ,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,eAAe,GAAG,KAAK,CAUrF;AAED,wBAAgB,MAAM,CAAC,GAAG,QAAQ,EAAE,KAAK,EAAE;;;;EAM1C"}

package/package.json

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

package/src/components/ListView.vue

@@ -9,52 +9,48 @@
 	</div>
 </template>
 
-<script lang="ts" setup>
-import Card from './Card.vue';
-
-</script>
+<script lang="ts" setup></script>
 
 <style>
 .list-wrap {
-  grid-template-rows: auto 1fr;
+	grid-template-rows: auto 1fr;
 }
 
 .list-item {
-  padding: 0.5rem 1rem;
-  min-height: -webkit-fit-content;
-  min-height: -moz-fit-content;
-  min-height: fit-content;
-  margin: 0.25rem 0;
-  cursor: pointer;
-  transition: var(--bgl-transition);
-  color: var(--bgl-black);
-  text-decoration: none;
-  position: relative;
+	padding: 0.5rem 1rem;
+	min-height: -webkit-fit-content;
+	min-height: -moz-fit-content;
+	min-height: fit-content;
+	margin: 0.25rem 0;
+	cursor: pointer;
+	transition: var(--bgl-transition);
+	color: var(--bgl-black);
+	text-decoration: none;
+	position: relative;
 }
 
 .list-item::after {
-  content: "";
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: -0.15rem;
-  border-bottom: 1px solid var(--border-color);
+	content: '';
+	position: absolute;
+	left: 0;
+	right: 0;
+	bottom: -0.15rem;
+	border-bottom: 1px solid var(--border-color);
 }
 
 .list-item:hover,
 .list-item.router-link-active {
-  background-color: var(--bgl-blue-light);
+	background-color: var(--bgl-blue-light);
 }
 
 .list-item:active {
-  -webkit-filter: var(--bgl-hover-filter);
-  filter: var(--bgl-hover-filter);
+	-webkit-filter: var(--bgl-hover-filter);
+	filter: var(--bgl-hover-filter);
 }
 
 @media screen and (max-width: 910px) {
-
-  .list-item {
-    padding: 0.5rem;
-  }
+	.list-item {
+		padding: 0.5rem;
+	}
 }
 </style>

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

@@ -7,12 +7,12 @@
 			<div class="radio-pill" v-for="(option, index) in options" :key="index">
 				<input
 					type="radio"
-					:id="getValue(option)"
+					:id="`${id}-${getValue(option)}`"
 					:name="id"
 					:value="getValue(option)"
 					:checked="selectedValue === getValue(option)"
 					@change="handleSelect" />
-				<label :for="getValue(option)">{{ getLabel(option) }}</label>
+				<label :for="`${id}-${getValue(option)}`">{{ getLabel(option) }}</label>
 			</div>
 		</div>
 	</div>
@@ -41,12 +41,19 @@ const getValue = (option: Option) => {
 	return option.value;
 };
 
-const props = defineProps<{
-	options?: Option[];
-	modelValue?: any;
-	id?: string;
-	label?: string;
-}>();
+const props = withDefaults(
+	defineProps<{
+		options?: Option[];
+		modelValue?: any;
+		id?: string;
+		label?: string;
+	}>(),
+	{
+		modelValue: '',
+		id: () => `radio-pill-${Math.random().toString(36).substr(2, 9)}`,
+		label: '',
+	}
+);
 
 let selectedValue = $ref('');
 

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

@@ -24,7 +24,7 @@
 				:value="selectedItems"
 				required />
 		</label>
-		<template #popper="{ hide }">
+		<template #popper>
 			<Card
 				class="selectinput-options p-05"
 				:style="{ width: fullWidth ? '100%' : 'auto' }">
@@ -214,7 +214,7 @@ watch(
 		// const newSelection = JSON.stringify(selectedItems.map(getValue));
 		// if (original !== newSelection) emitUpdate();
 	},
-	{ deep: true }
+	{ deep: true, immediate: true }
 );
 </script>
 

package/src/utils/BagelFormUtils.ts

@@ -18,6 +18,7 @@ interface TextInputOptions extends InputOptions {
 
 interface SlctInputOptions extends InputOptions {
 	searchable?: boolean;
+	multiselect?: boolean;
 }
 
 interface NumFieldOptions extends InputOptions {
@@ -62,7 +63,7 @@ export function slctField(id: string, label?: string, options?: Option[] | (() =
 		required: config?.required,
 		label,
 		defaultValue: config?.defaultValue,
-		attrs: { disabled: config?.disabled, searchable: config?.searchable },
+		attrs: { disabled: config?.disabled, searchable: config?.searchable, multiselect: config?.multiselect },
 	};
 }