@bagelink/vue 0.0.335 → 0.0.337

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

@@ -11,6 +11,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     required?: boolean | undefined;
     label?: string | undefined;
     fullWidth?: boolean | undefined;
+    multiselect?: boolean | undefined;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (...args: any[]) => void;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
@@ -22,6 +23,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     required?: boolean | undefined;
     label?: string | undefined;
     fullWidth?: boolean | undefined;
+    multiselect?: boolean | undefined;
 }>>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {}, {}>, {

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":"AA6BA;AAIA,OAAO,wBAAwB,CAAC;AAOhC,KAAK,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;;;;;;;;;;;;;;;;;;;;;;;;;;AA2UhG,wBAAwG;AACxG,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,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAAE,QAAO;QAClD,MAAM,EAAE,CAAC,CAAC;KACT,CAAA;CAAE,CAAC"}
+{"version":3,"file":"SelectInput.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/form/inputs/SelectInput.vue"],"names":[],"mappings":"AA2BA;AAIA,OAAO,wBAAwB,CAAC;AAOhC,KAAK,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqXhG,wBAAwG;AACxG,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,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAAE,QAAO;QAClD,MAAM,EAAE,CAAC,CAAC;KACT,CAAA;CAAE,CAAC"}

package/dist/index.cjs

@@ -27436,37 +27436,38 @@ const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
     searchable: { type: Boolean },
     required: { type: Boolean },
     label: {},
-    fullWidth: { type: Boolean }
+    fullWidth: { type: Boolean },
+    multiselect: { type: Boolean }
   },
   emits: ["update:modelValue"],
   setup(__props, { emit: __emit }) {
     let open = vue.ref(false);
     const searchInput = vue.ref(null);
     const props2 = __props;
-    let selectedItem = vue.ref();
+    const selectedItems = vue.ref([]);
     let search = vue.ref("");
+    const dropdown = vue.ref(null);
     const toggle = () => {
+      var _a2;
+      (_a2 = dropdown.value) == null ? void 0 : _a2.hide();
       open.value = !open.value;
       if (!open.value)
         search.value = "";
       if (open.value)
         setTimeout(() => {
-          var _a2, _b, _c;
-          return (_c = (_b = (_a2 = searchInput.value) == null ? void 0 : _a2.$el) == null ? void 0 : _b.querySelector("input")) == null ? void 0 : _c.focus();
+          var _a3, _b, _c;
+          return (_c = (_b = (_a3 = searchInput.value) == null ? void 0 : _a3.$el) == null ? void 0 : _b.querySelector("input")) == null ? void 0 : _c.focus();
         }, 100);
     };
-    const valueToLabel = (value) => {
-      if (!value)
-        return "";
-      const option2 = props2.options.find((option22) => {
-        if (typeof option22 === "string" || typeof option22 === "number")
-          return option22 === value;
-        return option22.value === value;
-      });
-      if (!option2)
-        return value;
-      return getLabel(option2);
-    };
+    const selecteLabel = vue.computed(() => {
+      if (selectedItems.value.length === 0)
+        return props2.placeholder || "Select";
+      if (selectedItems.value.length > 4) {
+        const str = selectedItems.value.slice(0, 4).map((item) => getLabel(item)).join(", ");
+        return `${str}... +${selectedItems.value.length - 4}`;
+      }
+      return selectedItems.value.map((item) => getLabel(item)).join(", ");
+    });
     const emit2 = __emit;
     const getLabel = (option2) => {
       if (typeof option2 === "string")
@@ -27475,11 +27476,14 @@ const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
         return `${option2}`;
       return option2.label;
     };
-    const isSelected = (option2) => {
-      if (typeof option2 === "string" || typeof option2 === "number")
-        return option2 === selectedItem.value;
-      return option2.value === selectedItem.value;
+    const getValue = (option2) => {
+      if (typeof option2 === "string")
+        return option2;
+      if (typeof option2 === "number")
+        return option2;
+      return option2.value;
     };
+    const isSelected = (option2) => selectedItems.value.includes(getValue(option2));
     const filteredOptions = vue.computed(() => props2.options.filter((option2) => {
       const searchTerm = new RegExp(search.value, "gi");
       if (typeof option2 === "string")
@@ -27489,21 +27493,53 @@ const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
       return option2.label.match(searchTerm);
     }));
     const select2 = (option2) => {
-      if (typeof option2 === "string")
-        selectedItem.value = option2;
-      else if (typeof option2 === "number")
-        selectedItem.value = option2;
-      else
-        selectedItem.value = option2.value;
-      emit2("update:modelValue", selectedItem.value);
-      open.value = false;
+      const existingIndex = selectedItems.value.findIndex((item) => {
+        if (typeof item === "string" || typeof item === "number")
+          return item === option2;
+        return item.value === option2;
+      });
+      if (existingIndex > -1)
+        selectedItems.value.splice(existingIndex, 1);
+      else if (props2.multiselect) {
+        selectedItems.value.push(getValue(option2));
+      } else {
+        selectedItems.value.splice(0, selectedItems.value.length, getValue(option2));
+        toggle();
+      }
+      emitUpdate();
     };
-    vue.watch(() => props2.modelValue, (value) => {
-      if (value !== selectedItem.value)
-        selectedItem.value = value;
-    }, { immediate: true });
+    function emitUpdate() {
+      if (props2.multiselect) {
+        emit2("update:modelValue", selectedItems.value);
+      } else {
+        selectedItems.value.splice(1, selectedItems.value.length);
+        emit2("update:modelValue", selectedItems.value[0]);
+      }
+    }
+    function compareArrays(arr1, arr2) {
+      const isSame = arr1.every((item) => arr2.map((a2) => getValue(a2)).includes(getValue(item)));
+      return isSame;
+    }
+    vue.watch(
+      () => props2.modelValue,
+      (newVal) => {
+        if (!newVal)
+          return;
+        if (!props2.multiselect) {
+          if (!isSelected(newVal))
+            selectedItems.value.splice(0, selectedItems.value.length, newVal);
+        } else {
+          const isSame = compareArrays([newVal].flat(), selectedItems.value);
+          if (!isSame)
+            selectedItems.value.splice(0, selectedItems.value.length, [newVal].flat());
+        }
+      },
+      { immediate: true }
+    );
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createBlock(vue.unref(kt$1), {
+        ref_key: "dropdown",
+        ref: dropdown,
         placement: "bottom-start",
         class: "bagel-input selectinput"
       }, {
@@ -27525,12 +27561,9 @@ const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
               }, null, 8, ["modelValue"])) : vue.createCommentVNode("", true),
               (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(filteredOptions.value, (option2, i2) => {
                 return vue.openBlock(), vue.createElementBlock("div", {
-                  class: vue.normalizeClass(["selectinput-option hover gap-1", { selected: option2 === vue.unref(selectedItem) }]),
+                  class: vue.normalizeClass(["selectinput-option hover gap-1", { selected: isSelected(option2) }]),
                   key: `${option2}${i2}`,
-                  onClick: () => {
-                    select2(option2);
-                    hide();
-                  }
+                  onClick: ($event) => select2(option2)
                 }, [
                   isSelected(option2) ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$H), {
                     key: 0,
@@ -27546,8 +27579,8 @@ const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
               }), 128)),
               vue.renderSlot(_ctx.$slots, "last", {}, void 0, true)
             ]),
-            _: 2
-          }, 1032, ["style"])
+            _: 3
+          }, 8, ["style"])
         ]),
         default: vue.withCtx(() => [
           vue.createElementVNode("label", null, [
@@ -27555,28 +27588,27 @@ const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
             vue.createElementVNode("button", {
               disabled: _ctx.disabled,
               type: "button",
-              class: "selectinput-btn",
-              onClick: toggle
+              class: "selectinput-btn"
             }, [
-              vue.createTextVNode(vue.toDisplayString(valueToLabel(vue.unref(selectedItem)) || _ctx.placeholder || "Select") + " ", 1),
+              vue.createTextVNode(vue.toDisplayString(selecteLabel.value) + " ", 1),
               vue.createVNode(vue.unref(_sfc_main$H), vue.normalizeProps(vue.guardReactiveProps({ "icon": vue.unref(open) ? "unfold_less" : "unfold_more" })), null, 16)
             ], 8, _hoisted_1$m),
             _ctx.required ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("input", {
               key: 0,
               style: { "width": "0", "height": "0", "position": "absolute", "opacity": "0", "z-index": "-1" },
-              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => vue.isRef(selectedItem) ? selectedItem.value = $event : selectedItem = $event),
+              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => selectedItems.value = $event),
               required: ""
             }, null, 512)), [
-              [vue.vModelText, vue.unref(selectedItem)]
+              [vue.vModelText, selectedItems.value]
             ]) : vue.createCommentVNode("", true)
           ])
         ]),
         _: 3
-      });
+      }, 512);
     };
   }
 });
-const SelectInput = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["__scopeId", "data-v-8845266b"]]);
+const SelectInput = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["__scopeId", "data-v-fa186094"]]);
 const _hoisted_1$l = ["title"];
 const _hoisted_2$h = { key: 0 };
 const _hoisted_3$e = ["value", "placeholder"];

package/dist/index.mjs

@@ -27434,37 +27434,38 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
     searchable: { type: Boolean },
     required: { type: Boolean },
     label: {},
-    fullWidth: { type: Boolean }
+    fullWidth: { type: Boolean },
+    multiselect: { type: Boolean }
   },
   emits: ["update:modelValue"],
   setup(__props, { emit: __emit }) {
     let open = ref(false);
     const searchInput = ref(null);
     const props2 = __props;
-    let selectedItem = ref();
+    const selectedItems = ref([]);
     let search = ref("");
+    const dropdown = ref(null);
     const toggle = () => {
+      var _a2;
+      (_a2 = dropdown.value) == null ? void 0 : _a2.hide();
       open.value = !open.value;
       if (!open.value)
         search.value = "";
       if (open.value)
         setTimeout(() => {
-          var _a2, _b, _c;
-          return (_c = (_b = (_a2 = searchInput.value) == null ? void 0 : _a2.$el) == null ? void 0 : _b.querySelector("input")) == null ? void 0 : _c.focus();
+          var _a3, _b, _c;
+          return (_c = (_b = (_a3 = searchInput.value) == null ? void 0 : _a3.$el) == null ? void 0 : _b.querySelector("input")) == null ? void 0 : _c.focus();
         }, 100);
     };
-    const valueToLabel = (value) => {
-      if (!value)
-        return "";
-      const option2 = props2.options.find((option22) => {
-        if (typeof option22 === "string" || typeof option22 === "number")
-          return option22 === value;
-        return option22.value === value;
-      });
-      if (!option2)
-        return value;
-      return getLabel(option2);
-    };
+    const selecteLabel = computed(() => {
+      if (selectedItems.value.length === 0)
+        return props2.placeholder || "Select";
+      if (selectedItems.value.length > 4) {
+        const str = selectedItems.value.slice(0, 4).map((item) => getLabel(item)).join(", ");
+        return `${str}... +${selectedItems.value.length - 4}`;
+      }
+      return selectedItems.value.map((item) => getLabel(item)).join(", ");
+    });
     const emit2 = __emit;
     const getLabel = (option2) => {
       if (typeof option2 === "string")
@@ -27473,11 +27474,14 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
         return `${option2}`;
       return option2.label;
     };
-    const isSelected = (option2) => {
-      if (typeof option2 === "string" || typeof option2 === "number")
-        return option2 === selectedItem.value;
-      return option2.value === selectedItem.value;
+    const getValue = (option2) => {
+      if (typeof option2 === "string")
+        return option2;
+      if (typeof option2 === "number")
+        return option2;
+      return option2.value;
     };
+    const isSelected = (option2) => selectedItems.value.includes(getValue(option2));
     const filteredOptions = computed(() => props2.options.filter((option2) => {
       const searchTerm = new RegExp(search.value, "gi");
       if (typeof option2 === "string")
@@ -27487,21 +27491,53 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
       return option2.label.match(searchTerm);
     }));
     const select2 = (option2) => {
-      if (typeof option2 === "string")
-        selectedItem.value = option2;
-      else if (typeof option2 === "number")
-        selectedItem.value = option2;
-      else
-        selectedItem.value = option2.value;
-      emit2("update:modelValue", selectedItem.value);
-      open.value = false;
+      const existingIndex = selectedItems.value.findIndex((item) => {
+        if (typeof item === "string" || typeof item === "number")
+          return item === option2;
+        return item.value === option2;
+      });
+      if (existingIndex > -1)
+        selectedItems.value.splice(existingIndex, 1);
+      else if (props2.multiselect) {
+        selectedItems.value.push(getValue(option2));
+      } else {
+        selectedItems.value.splice(0, selectedItems.value.length, getValue(option2));
+        toggle();
+      }
+      emitUpdate();
     };
-    watch(() => props2.modelValue, (value) => {
-      if (value !== selectedItem.value)
-        selectedItem.value = value;
-    }, { immediate: true });
+    function emitUpdate() {
+      if (props2.multiselect) {
+        emit2("update:modelValue", selectedItems.value);
+      } else {
+        selectedItems.value.splice(1, selectedItems.value.length);
+        emit2("update:modelValue", selectedItems.value[0]);
+      }
+    }
+    function compareArrays(arr1, arr2) {
+      const isSame = arr1.every((item) => arr2.map((a2) => getValue(a2)).includes(getValue(item)));
+      return isSame;
+    }
+    watch(
+      () => props2.modelValue,
+      (newVal) => {
+        if (!newVal)
+          return;
+        if (!props2.multiselect) {
+          if (!isSelected(newVal))
+            selectedItems.value.splice(0, selectedItems.value.length, newVal);
+        } else {
+          const isSame = compareArrays([newVal].flat(), selectedItems.value);
+          if (!isSame)
+            selectedItems.value.splice(0, selectedItems.value.length, [newVal].flat());
+        }
+      },
+      { immediate: true }
+    );
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(kt$1), {
+        ref_key: "dropdown",
+        ref: dropdown,
         placement: "bottom-start",
         class: "bagel-input selectinput"
       }, {
@@ -27523,12 +27559,9 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
               }, null, 8, ["modelValue"])) : createCommentVNode("", true),
               (openBlock(true), createElementBlock(Fragment$1, null, renderList(filteredOptions.value, (option2, i2) => {
                 return openBlock(), createElementBlock("div", {
-                  class: normalizeClass(["selectinput-option hover gap-1", { selected: option2 === unref(selectedItem) }]),
+                  class: normalizeClass(["selectinput-option hover gap-1", { selected: isSelected(option2) }]),
                   key: `${option2}${i2}`,
-                  onClick: () => {
-                    select2(option2);
-                    hide();
-                  }
+                  onClick: ($event) => select2(option2)
                 }, [
                   isSelected(option2) ? (openBlock(), createBlock(unref(_sfc_main$H), {
                     key: 0,
@@ -27544,8 +27577,8 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
               }), 128)),
               renderSlot(_ctx.$slots, "last", {}, void 0, true)
             ]),
-            _: 2
-          }, 1032, ["style"])
+            _: 3
+          }, 8, ["style"])
         ]),
         default: withCtx(() => [
           createElementVNode("label", null, [
@@ -27553,28 +27586,27 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
             createElementVNode("button", {
               disabled: _ctx.disabled,
               type: "button",
-              class: "selectinput-btn",
-              onClick: toggle
+              class: "selectinput-btn"
             }, [
-              createTextVNode(toDisplayString(valueToLabel(unref(selectedItem)) || _ctx.placeholder || "Select") + " ", 1),
+              createTextVNode(toDisplayString(selecteLabel.value) + " ", 1),
               createVNode(unref(_sfc_main$H), normalizeProps(guardReactiveProps({ "icon": unref(open) ? "unfold_less" : "unfold_more" })), null, 16)
             ], 8, _hoisted_1$m),
             _ctx.required ? withDirectives((openBlock(), createElementBlock("input", {
               key: 0,
               style: { "width": "0", "height": "0", "position": "absolute", "opacity": "0", "z-index": "-1" },
-              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(selectedItem) ? selectedItem.value = $event : selectedItem = $event),
+              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => selectedItems.value = $event),
               required: ""
             }, null, 512)), [
-              [vModelText, unref(selectedItem)]
+              [vModelText, selectedItems.value]
             ]) : createCommentVNode("", true)
           ])
         ]),
         _: 3
-      });
+      }, 512);
     };
   }
 });
-const SelectInput = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["__scopeId", "data-v-8845266b"]]);
+const SelectInput = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["__scopeId", "data-v-fa186094"]]);
 const _hoisted_1$l = ["title"];
 const _hoisted_2$h = { key: 0 };
 const _hoisted_3$e = ["value", "placeholder"];

package/dist/style.css

@@ -1196,59 +1196,59 @@ 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-8845266b] {
-  width: 100%;
+.selectinput[data-v-fa186094] {
+	width: 100%;
 }
-.selectinput-option[data-v-8845266b] {
-  padding: 6px 12px;
-  cursor: pointer;
-  border-radius: 5px;
-  transition: all 0.2s;
-  display: grid;
-  grid-template-columns: 10px 1fr;
-  justify-content: space-between;
-  width: 100%;
-  font-size: var(--input-font-size);
+.selectinput-option[data-v-fa186094] {
+	padding: 6px 12px;
+	cursor: pointer;
+	border-radius: 5px;
+	transition: all 0.2s;
+	display: grid;
+	grid-template-columns: 10px 1fr;
+	justify-content: space-between;
+	width: 100%;
+	font-size: var(--input-font-size);
 }
-.selectinput-options[data-v-8845266b] {
-  max-height: 300px;
-  overflow-y: auto;
+.selectinput-options[data-v-fa186094] {
+	max-height: 300px;
+	overflow-y: auto;
 }
-.selectinput-option[data-v-8845266b]:hover {
-  background: var(--bgl-gray-20);
+.selectinput-option[data-v-fa186094]:hover {
+	background: var(--bgl-gray-20);
 }
 
 .bagel-input label {
-  font-size: var(--label-font-size);
+	font-size: var(--label-font-size);
 }
 .selectinput-btn {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  height: var(--input-height);
-  border-radius: var(--input-border-radius);
-  border: none;
-  background: var(--input-bg);
-  padding: 0.7rem;
-  color: var(--input-color);
-  width: 100%;
-  font-family: inherit;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	height: var(--input-height);
+	border-radius: var(--input-border-radius);
+	border: none;
+	background: var(--input-bg);
+	padding: 0.7rem;
+	color: var(--input-color);
+	width: 100%;
+	font-family: inherit;
 }
 .selectinput-btn:disabled {
-  background: var(--input-disabled-bg);
-  color: var(--input-disabled-color);
+	background: var(--input-disabled-bg);
+	color: var(--input-disabled-color);
 }
 .selectinput-btn:focus {
-  outline: none;
-  box-shadow: inset 0 0 10px #00000012;
+	outline: none;
+	box-shadow: inset 0 0 10px #00000012;
 }
 .v-popper__arrow-container {
-  display: none;
+	display: none;
 }
 .v-popper--theme-dropdown .v-popper__inner {
-  border: none;
-  background: transparent;
-  border-radius: var(--card-border-radius);
+	border: none;
+	background: transparent;
+	border-radius: var(--card-border-radius);
 }
 
 .bagel-input[data-v-69a60381] {

package/package.json

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

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

@@ -1,31 +1,29 @@
 <template>
-  <Dropdown placement="bottom-start" class="bagel-input selectinput">
-    <label>
-      {{ label }}
-      <button :disabled="disabled" type="button" class="selectinput-btn" @click="toggle">
-        {{ valueToLabel(selectedItem) || placeholder || 'Select' }}
-        <MaterialIcon v-bind="{ 'icon': open ? 'unfold_less' : 'unfold_more' }" />
-      </button>
-      <input style="width: 0; height: 0; position: absolute; opacity: 0; z-index: -1;" v-if="required"
-        v-model="selectedItem" required>
-    </label>
-    <template #popper="{ hide }">
-      <Card class="selectinput-options p-05" :style="{ width: fullWidth ? '100%' : 'auto' }">
-        <TextInput v-if="searchable" ref="searchInput" dense :placeholder="'Search'" icon="search" v-model="search" />
-        <div class="selectinput-option hover  gap-1" v-for="(option, i) in filteredOptions" :key="`${option}${i}`"
-          @click="() => {
-        select(option); hide();
-      }" :class="{ selected: option === selectedItem }">
-          <Icon v-if="isSelected(option)" icon="check" />
-          <Icon class="opacity-3" v-if="!isSelected(option)" icon="fiber_manual_record" />
-          <span>
-            {{ getLabel(option) }}
-          </span>
-        </div>
-        <slot name="last" />
-      </Card>
-    </template>
-  </Dropdown>
+	<Dropdown ref="dropdown" placement="bottom-start" class="bagel-input selectinput">
+		<label>
+			{{ label }}
+			<button :disabled="disabled" type="button" class="selectinput-btn">
+				{{ selecteLabel }}
+				<MaterialIcon v-bind="{ 'icon': open ? 'unfold_less' : 'unfold_more' }" />
+			</button>
+			<input style="width: 0; height: 0; position: absolute; opacity: 0; z-index: -1;" v-if="required"
+				v-model="selectedItems" required>
+		</label>
+		<template #popper="{ hide }">
+			<Card class="selectinput-options p-05" :style="{ width: fullWidth ? '100%' : 'auto' }">
+				<TextInput v-if="searchable" ref="searchInput" dense :placeholder="'Search'" icon="search" v-model="search" />
+				<div class="selectinput-option hover  gap-1" v-for="(option, i) in filteredOptions" :key="`${option}${i}`"
+					@click="select(option)" :class="{ selected: isSelected(option) }">
+					<Icon v-if="isSelected(option)" icon="check" />
+					<Icon class="opacity-3" v-if="!isSelected(option)" icon="fiber_manual_record" />
+					<span>
+						{{ getLabel(option) }}
+					</span>
+				</div>
+				<slot name="last" />
+			</Card>
+		</template>
+	</Dropdown>
 </template>
 
 <script lang="ts" setup>
@@ -33,7 +31,7 @@ import { watch } from 'vue';
 import { Dropdown } from 'floating-vue';
 import 'floating-vue/style.css';
 import {
-  TextInput, Card, Icon, MaterialIcon,
+	TextInput, Card, Icon, MaterialIcon,
 } from '@bagelink/vue';
 
 type Option = string | number | Record<string, any> | { label: string, value: string | number };
@@ -42,130 +40,167 @@ let open = $ref(false);
 const searchInput = $ref<HTMLInputElement | null>(null);
 
 const props = defineProps<{
-  options: Option[];
-  placeholder?: string;
-  disabled?: boolean;
-  modelValue?: Option;
-  searchable?: boolean;
-  required?: boolean;
-  label?: string;
-  fullWidth?: boolean;
+	options: Option[];
+	placeholder?: string;
+	disabled?: boolean;
+	modelValue?: Option;
+	searchable?: boolean;
+	required?: boolean;
+	label?: string;
+	fullWidth?: boolean;
+	multiselect?: boolean;
 }>();
-let selectedItem = $ref<Option>();
+const selectedItems = $ref<Option[]>([]);
 let search = $ref('');
 
+const dropdown = $ref<InstanceType<typeof Dropdown> | null>(null);
+
 const toggle = () => {
-  open = !open;
-  if (!open) search = '';
-  if (open) setTimeout(() => (searchInput as any)?.$el?.querySelector('input')?.focus(), 100);
+	dropdown?.hide();
+	open = !open;
+	if (!open) search = '';
+	if (open) setTimeout(() => (searchInput as any)?.$el?.querySelector('input')?.focus(), 100);
 };
 
-const valueToLabel = (value?: Option) => {
-  if (!value) return '';
-  const option = props.options.find((option) => {
-    if (typeof option === 'string' || typeof option === 'number') return option === value;
-    return option.value === value;
-  });
-  if (!option) return value;
-  return getLabel(option);
-};
+const selecteLabel = $computed(() => {
+	if (selectedItems.length === 0) return props.placeholder || 'Select';
+	if (selectedItems.length > 4) {
+		const str = selectedItems.slice(0, 4).map((item) => getLabel(item)).join(', ');
+		return `${str}... +${selectedItems.length - 4}`;
+	}
+	return selectedItems.map((item) => getLabel(item)).join(', ');
+});
 
 const emit = defineEmits(['update:modelValue']);
 
 const getLabel = (option: Option) => {
-  if (typeof option === 'string') return option;
-  if (typeof option === 'number') return `${option}`;
-  return option.label;
+	if (typeof option === 'string') return option;
+	if (typeof option === 'number') return `${option}`;
+	return option.label;
 };
 
-const isSelected = (option: Option) => {
-  if (typeof option === 'string' || typeof option === 'number') return option === selectedItem;
-  return option.value === selectedItem;
+const getValue = (option: Option) => {
+	if (typeof option === 'string') return option;
+	if (typeof option === 'number') return option;
+	return option.value;
 };
 
+const isSelected = (option: Option) => selectedItems.includes(getValue(option));
+
 const filteredOptions = $computed(() => props.options.filter((option) => {
-  const searchTerm = new RegExp(search, 'gi');
-  if (typeof option === 'string') return option.match(searchTerm);
-  if (typeof option === 'number') return `${option}`.match(searchTerm);
-  return option.label.match(searchTerm);
+	const searchTerm = new RegExp(search, 'gi');
+	if (typeof option === 'string') return option.match(searchTerm);
+	if (typeof option === 'number') return `${option}`.match(searchTerm);
+	return option.label.match(searchTerm);
 }));
 
 const select = (option: Option) => {
-  if (typeof option === 'string') selectedItem = option;
-  else if (typeof option === 'number') selectedItem = option;
-  else selectedItem = option.value;
-  emit('update:modelValue', selectedItem);
-  open = false;
+	const existingIndex = selectedItems.findIndex((item) => {
+		if (typeof item === 'string' || typeof item === 'number') return item === option;
+		return item.value === option;
+	});
+	if (existingIndex > -1) selectedItems.splice(existingIndex, 1);
+	else if (props.multiselect) {
+		selectedItems.push(getValue(option));
+	} else {
+		selectedItems.splice(0, selectedItems.length, getValue(option));
+		toggle();
+	}
+	emitUpdate();
 };
 
-watch(() => props.modelValue, (value) => {
-  if (value !== selectedItem) selectedItem = value;
-}, { immediate: true });
+function emitUpdate() {
+	if (props.multiselect) {
+		emit('update:modelValue', selectedItems);
+	} else {
+		selectedItems.splice(1, selectedItems.length);
+		emit('update:modelValue', selectedItems[0]);
+	}
+}
+
+function compareArrays(arr1: Option[], arr2: Option[]) {
+	const isSame = arr1.every((item: Option) => arr2.map((a) => getValue(a)).includes(getValue(item)));
+	return isSame;
+}
+
+watch(
+	() => props.modelValue,
+	(newVal: Option | Option[]) => {
+		if (!newVal) return;
+		if (!props.multiselect) {
+			if (!isSelected(newVal)) selectedItems.splice(0, selectedItems.length, newVal);
+		} else {
+			const isSame = compareArrays([newVal].flat(), selectedItems);
+			if (!isSame) selectedItems.splice(0, selectedItems.length, [newVal].flat());
+		}
+	},
+	{ immediate: true },
+);
 </script>
 
 <style scoped>
 .selectinput {
-  width: 100%;
+	width: 100%;
 }
 
 .selectinput-option {
-  padding: 6px 12px;
-  cursor: pointer;
-  border-radius: 5px;
-  transition: all 0.2s;
-  display: grid;
-  grid-template-columns: 10px 1fr;
-  justify-content: space-between;
-  width: 100%;
-  font-size: var(--input-font-size);
+	padding: 6px 12px;
+	cursor: pointer;
+	border-radius: 5px;
+	transition: all 0.2s;
+	display: grid;
+	grid-template-columns: 10px 1fr;
+	justify-content: space-between;
+	width: 100%;
+	font-size: var(--input-font-size);
 }
 
 .selectinput-options {
-  max-height: 300px;
-  overflow-y: auto;
+	max-height: 300px;
+	overflow-y: auto;
 }
 
 .selectinput-option:hover {
-  background: var(--bgl-gray-20);
+	background: var(--bgl-gray-20);
 }
 </style>
 
 <style>
 .bagel-input label {
-  font-size: var(--label-font-size);
+	font-size: var(--label-font-size);
 }
 
 .selectinput-btn {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  height: var(--input-height);
-  border-radius: var(--input-border-radius);
-  border: none;
-  background: var(--input-bg);
-  padding: 0.7rem;
-  color: var(--input-color);
-  width: 100%;
-  font-family: inherit;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	height: var(--input-height);
+	border-radius: var(--input-border-radius);
+	border: none;
+	background: var(--input-bg);
+	padding: 0.7rem;
+	color: var(--input-color);
+	width: 100%;
+	font-family: inherit;
 }
 
 .selectinput-btn:disabled {
-  background: var(--input-disabled-bg);
-  color: var(--input-disabled-color);
+	background: var(--input-disabled-bg);
+	color: var(--input-disabled-color);
 }
 
 .selectinput-btn:focus {
-  outline: none;
-  box-shadow: inset 0 0 10px #00000012;
+	outline: none;
+	box-shadow: inset 0 0 10px #00000012;
 }
 
 .v-popper__arrow-container {
-  display: none;
+	display: none;
 }
 
 .v-popper--theme-dropdown .v-popper__inner {
-  border: none;
-  background: transparent;
-  border-radius: var(--card-border-radius);
+	border: none;
+	background: transparent;
+	border-radius: var(--card-border-radius);
 }
 </style>