@bagelink/vue 0.0.354 → 0.0.356

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":"AA6DA;AAIA,OAAO,wBAAwB,CAAC;AAKhC,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+Z7C,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":"AAuDA;AAIA,OAAO,wBAAwB,CAAC;AAKhC,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkb7C,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/components/layout/Tabs.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.vue.d.ts","sourceRoot":"","sources":["../../../src/components/layout/Tabs.vue"],"names":[],"mappings":"AAMA;AAEA,OAAO,EAAW,KAAK,GAAG,EAAE,MAAM,eAAe,CAAC;;;;;;;;AAkGlD,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":"Tabs.vue.d.ts","sourceRoot":"","sources":["../../../src/components/layout/Tabs.vue"],"names":[],"mappings":"AAWA;AAEA,OAAO,EAAW,KAAK,GAAG,EAAE,MAAM,eAAe,CAAC;;;;;;;;AAgIlD,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

@@ -4915,7 +4915,7 @@ function txtField(id, label, options) {
     id,
     label,
     placeholder: options == null ? void 0 : options.placeholder,
-    attrs: { type: options == null ? void 0 : options.type }
+    attrs: { type: options == null ? void 0 : options.type, pattern: options == null ? void 0 : options.pattern }
   };
 }
 function slctField(id, label, options, config) {
@@ -5026,7 +5026,7 @@ const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
 });
 const _hoisted_1$E = { class: "full-nav" };
 const _hoisted_2$v = { class: "nav-scroll" };
-const _hoisted_3$l = { class: "nav-links-wrapper" };
+const _hoisted_3$m = { class: "nav-links-wrapper" };
 const _hoisted_4$e = { class: "tooltip" };
 const _hoisted_5$b = { class: "bot-buttons-wrapper" };
 const _hoisted_6$7 = { class: "tooltip" };
@@ -5061,7 +5061,7 @@ const _sfc_main$G = /* @__PURE__ */ vue.defineComponent({
         ], 32),
         vue.createElementVNode("div", _hoisted_1$E, [
           vue.createElementVNode("div", _hoisted_2$v, [
-            vue.createElementVNode("div", _hoisted_3$l, [
+            vue.createElementVNode("div", _hoisted_3$m, [
               (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.links, (link) => {
                 return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(link.to ? "router-link" : "div"), {
                   class: "nav-button",
@@ -5427,7 +5427,7 @@ const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
 const ModalForm = /* @__PURE__ */ _export_sfc(_sfc_main$D, [["__scopeId", "data-v-7e6899c7"]]);
 const _hoisted_1$B = { class: "accordion-item" };
 const _hoisted_2$s = ["aria-expanded", "aria-controls"];
-const _hoisted_3$k = { class: "accordion-label" };
+const _hoisted_3$l = { class: "accordion-label" };
 const _hoisted_4$d = ["id", "aria-hidden"];
 const _sfc_main$C = /* @__PURE__ */ vue.defineComponent({
   __name: "AccordionItem",
@@ -5460,7 +5460,7 @@ const _sfc_main$C = /* @__PURE__ */ vue.defineComponent({
           class: "accordion-head",
           "aria-controls": `accordion-body-${vue.unref(id)}`
         }, [
-          vue.createElementVNode("span", _hoisted_3$k, vue.toDisplayString(_ctx.label), 1),
+          vue.createElementVNode("span", _hoisted_3$l, vue.toDisplayString(_ctx.label), 1),
           vue.createElementVNode("div", {
             class: vue.normalizeClass(["accordion-icon", { open: vue.unref(open) }])
           }, [
@@ -5487,7 +5487,7 @@ const _sfc_main$C = /* @__PURE__ */ vue.defineComponent({
 const AccordionItem = /* @__PURE__ */ _export_sfc(_sfc_main$C, [["__scopeId", "data-v-bf74738b"]]);
 const _hoisted_1$A = { class: "list-wrap bgl_card thin grid overflow-hidden h-100 p-0" };
 const _hoisted_2$r = { class: "p-1" };
-const _hoisted_3$j = { class: "list-content auto-flow-rows align-items-start overflow-y h-100" };
+const _hoisted_3$k = { class: "list-content auto-flow-rows align-items-start overflow-y h-100" };
 const _sfc_main$B = /* @__PURE__ */ vue.defineComponent({
   __name: "ListView",
   setup(__props) {
@@ -5496,7 +5496,7 @@ const _sfc_main$B = /* @__PURE__ */ vue.defineComponent({
         vue.createElementVNode("div", _hoisted_2$r, [
           vue.renderSlot(_ctx.$slots, "header")
         ]),
-        vue.createElementVNode("div", _hoisted_3$j, [
+        vue.createElementVNode("div", _hoisted_3$k, [
           vue.renderSlot(_ctx.$slots, "default")
         ])
       ]);
@@ -5567,7 +5567,7 @@ const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
 });
 const _hoisted_1$x = { class: "table-list-wrap h-100" };
 const _hoisted_2$o = { class: "infinite-wrapper" };
-const _hoisted_3$i = { class: "row first-row" };
+const _hoisted_3$j = { class: "row first-row" };
 const _hoisted_4$c = ["onClick"];
 const _hoisted_5$a = { class: "flex" };
 const _hoisted_6$6 = ["onClick"];
@@ -5608,7 +5608,7 @@ const _sfc_main$y = /* @__PURE__ */ vue.defineComponent({
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$x, [
         vue.createElementVNode("table", _hoisted_2$o, [
-          vue.createElementVNode("thead", _hoisted_3$i, [
+          vue.createElementVNode("thead", _hoisted_3$j, [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(computedSchema.value, (field) => {
               return vue.openBlock(), vue.createElementBlock("th", {
                 class: "col",
@@ -5707,7 +5707,7 @@ const _hoisted_2$n = {
   key: 0,
   class: "data-row"
 };
-const _hoisted_3$h = { class: "key" };
+const _hoisted_3$i = { class: "key" };
 const _hoisted_4$b = { key: 1 };
 const _hoisted_5$9 = { class: "key" };
 const _hoisted_6$5 = { class: "vlue" };
@@ -5735,7 +5735,7 @@ const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
             key: field.id
           }, [
             vue.unref(iffer)(field, itemData.value) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$n, [
-              vue.createElementVNode("div", _hoisted_3$h, vue.toDisplayString((field == null ? void 0 : field.label) || vue.unref(keyToLabel)(field.id)), 1),
+              vue.createElementVNode("div", _hoisted_3$i, vue.toDisplayString((field == null ? void 0 : field.label) || vue.unref(keyToLabel)(field.id)), 1),
               vue.createVNode(vue.unref(_sfc_main$l), {
                 field,
                 modelValue: itemData.value,
@@ -5931,7 +5931,7 @@ const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
 const Badge = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["__scopeId", "data-v-10743b06"]]);
 const _hoisted_1$r = { class: "bgl_vid" };
 const _hoisted_2$m = ["src"];
-const _hoisted_3$g = ["src", "autoplay", "muted", "loop", "controls"];
+const _hoisted_3$h = ["src", "autoplay", "muted", "loop", "controls"];
 const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
   __name: "BglVideo",
   props: {
@@ -5988,7 +5988,7 @@ const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
           style: vue.normalizeStyle({ aspectRatio: aspectRatio.value }),
           controls: _ctx.controls,
           playsinline: ""
-        }, null, 12, _hoisted_3$g))
+        }, null, 12, _hoisted_3$h))
       ]);
     };
   }
@@ -6381,7 +6381,7 @@ const _hoisted_2$k = /* @__PURE__ */ _withScopeId$1(() => /* @__PURE__ */ vue.cr
 }, [
   /* @__PURE__ */ vue.createElementVNode("path", { d: "M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z" })
 ], -1));
-const _hoisted_3$f = [
+const _hoisted_3$g = [
   _hoisted_2$k
 ];
 const _hoisted_4$a = ["required", "id"];
@@ -6408,7 +6408,7 @@ const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
         vue.createElementVNode("div", {
           class: vue.normalizeClass(["check-square", { checked: checked.value }]),
           onClick: _cache[0] || (_cache[0] = ($event) => checked.value = !checked.value)
-        }, _hoisted_3$f, 2),
+        }, _hoisted_3$g, 2),
         vue.createElementVNode("label", null, [
           vue.withDirectives(vue.createElementVNode("input", {
             required: _ctx.required,
@@ -15089,7 +15089,7 @@ const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
 });
 const _hoisted_1$n = ["title"];
 const _hoisted_2$i = { key: 0 };
-const _hoisted_3$e = ["value", "placeholder"];
+const _hoisted_3$f = ["value", "placeholder"];
 const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
   __name: "JSONInput",
   props: {
@@ -15121,14 +15121,15 @@ const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
           onInput: handleInput,
           class: vue.normalizeClass({ "no-edit": !_ctx.editMode }),
           placeholder: _ctx.placeholder
-        }, null, 42, _hoisted_3$e)
+        }, null, 42, _hoisted_3$f)
       ], 10, _hoisted_1$n);
     };
   }
 });
 const JSONInput = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["__scopeId", "data-v-1fc4f739"]]);
 const _hoisted_1$m = ["disabled"];
-const _hoisted_2$h = ["onClick"];
+const _hoisted_2$h = ["value"];
+const _hoisted_3$e = ["onClick"];
 const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
   __name: "SelectInput",
   props: {
@@ -15189,13 +15190,17 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
       return option2.value;
     };
     const isSelected = (option2) => !!selectedItems.value.find((item) => getValue(option2) === getValue(item));
-    const filteredOptions = vue.computed(() => props2.options.filter((option2) => {
-      const searchTerm = new RegExp(search.value, "gi");
-      return Boolean(option2) && (getLabel(option2).match(searchTerm) || getValue(option2).match(searchTerm));
-    }));
+    const filteredOptions = vue.computed(
+      () => props2.options.filter((option2) => {
+        const searchTerm = new RegExp(search.value, "gi");
+        return Boolean(option2) && (getLabel(option2).match(searchTerm) || getValue(option2).match(searchTerm));
+      })
+    );
     const select2 = (option2) => {
       var _a2;
-      const existingIndex = selectedItems.value.findIndex((item) => getValue(item) === getValue(option2));
+      const existingIndex = selectedItems.value.findIndex(
+        (item) => getValue(item) === getValue(option2)
+      );
       if (existingIndex > -1)
         selectedItems.value.splice(existingIndex, 1);
       else if (props2.multiselect) {
@@ -15217,7 +15222,9 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
       }
     }
     function compareArrays(arr1, arr2) {
-      const isSame = arr1.every((item) => arr2.map((a2) => getValue(a2)).includes(getValue(item)));
+      const isSame = arr1.every(
+        (item) => arr2.map((a2) => getValue(a2)).includes(getValue(item))
+      );
       return isSame;
     }
     vue.watch(
@@ -15236,19 +15243,24 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
       },
       { immediate: true }
     );
-    vue.watch(() => props2.options, () => {
-      const original = JSON.stringify(selectedItems.value);
-      [...selectedItems.value].forEach((option2, i2) => {
-        const exists = props2.options.find((o2) => getValue(o2) === getValue(option2));
-        if (!exists)
-          selectedItems.value.splice(i2, 1);
-        else
-          selectedItems.value.splice(i2, 1, exists);
-      });
-      const newSelection = JSON.stringify(selectedItems.value);
-      if (original !== newSelection)
-        emitUpdate();
-    });
+    vue.watch(
+      () => props2.options,
+      () => {
+        const original = JSON.stringify(selectedItems.value);
+        [...selectedItems.value].forEach((option2, i2) => {
+          const exists = props2.options.find(
+            (o2) => getValue(o2) === getValue(option2)
+          );
+          if (!exists)
+            selectedItems.value.splice(i2, 1);
+          else
+            selectedItems.value.splice(i2, 1, exists);
+        });
+        const newSelection = JSON.stringify(selectedItems.value);
+        if (original !== newSelection)
+          emitUpdate();
+      }
+    );
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createBlock(vue.unref(kt$1), {
         onHide: _cache[3] || (_cache[3] = ($event) => updateOpen(false)),
@@ -15289,7 +15301,7 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
                     icon: "fiber_manual_record"
                   })) : vue.createCommentVNode("", true),
                   vue.createElementVNode("span", null, vue.toDisplayString(getLabel(option2)), 1)
-                ], 10, _hoisted_2$h);
+                ], 10, _hoisted_3$e);
               }), 128)),
               vue.renderSlot(_ctx.$slots, "last", {}, void 0, true)
             ]),
@@ -15308,14 +15320,13 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
               vue.createElementVNode("p", null, vue.toDisplayString(selectedLabel.value), 1),
               vue.createVNode(vue.unref(_sfc_main$H), vue.normalizeProps(vue.guardReactiveProps({ icon: vue.unref(open) ? "unfold_less" : "unfold_more" })), null, 16)
             ], 10, _hoisted_1$m),
-            _ctx.required ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("input", {
+            _ctx.required ? (vue.openBlock(), vue.createElementBlock("input", {
               key: 0,
               style: { "width": "0", "height": "0", "position": "absolute", "opacity": "0", "z-index": "-1" },
-              "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => selectedItems.value = $event),
+              onInput: _cache[1] || (_cache[1] = ($event) => updateOpen(true)),
+              value: selectedItems.value,
               required: ""
-            }, null, 512)), [
-              [vue.vModelText, selectedItems.value]
-            ]) : vue.createCommentVNode("", true)
+            }, null, 40, _hoisted_2$h)) : vue.createCommentVNode("", true)
           ])
         ]),
         _: 3
@@ -15323,7 +15334,7 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const SelectInput = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-8235eff6"]]);
+const SelectInput = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-70fd5ae7"]]);
 /*!
   * vue-draggable-next v2.2.0
   * (c) 2023 Anish George
@@ -45758,8 +45769,21 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
     modelValue: {}
   },
   setup(__props) {
+    const props2 = __props;
+    const slots = vue.useSlots();
     const group = Math.random().toString(36).substring(7);
     const { currentTab } = useTabs(group);
+    const tabValue = (tab) => typeof tab === "string" ? tab : tab.id;
+    const tabComponent = vue.defineComponent({
+      render() {
+        var _a2, _b, _c;
+        const currentTabIndex = props2.tabs.findIndex(
+          (tab) => tabValue(tab) === currentTab.value
+        );
+        const slotChildren = (_c = (_b = (_a2 = slots == null ? void 0 : slots.default) == null ? void 0 : _a2.call(slots)) == null ? void 0 : _b[1]) == null ? void 0 : _c.children;
+        return vue.h("div", slotChildren == null ? void 0 : slotChildren[currentTabIndex]);
+      }
+    });
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
         vue.createVNode(vue.unref(TabsNav), {
@@ -45768,7 +45792,7 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
           class: "mb-05"
         }, null, 8, ["tabs", "group"]),
         vue.unref(currentTab) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$3, [
-          vue.renderSlot(_ctx.$slots, vue.unref(currentTab))
+          vue.unref(slots)[vue.unref(currentTab)] ? vue.renderSlot(_ctx.$slots, vue.unref(currentTab), { key: 0 }) : vue.unref(currentTab) ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(tabComponent)), { key: 1 })) : vue.createCommentVNode("", true)
         ])) : vue.createCommentVNode("", true)
       ], 64);
     };

package/dist/index.mjs

@@ -4,7 +4,7 @@ var __publicField2 = (obj, key, value) => {
   __defNormalProp2(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-import { pushScopeId, popScopeId, defineComponent, nextTick, openBlock, createBlock, createElementBlock, normalizeClass, renderSlot, normalizeProps, guardReactiveProps, withScopeId, resolveComponent, normalizeStyle, withKeys, createElementVNode, Fragment as Fragment$1, createCommentVNode, mergeProps, withCtx, createVNode, ref, createApp, h as h$2, toDisplayString, inject, unref, renderList, resolveDynamicComponent, useCssVars, useSlots, computed, withModifiers, createTextVNode, watch, onMounted, onUnmounted, mergeModels, useModel, createSlots, Transition, reactive, provide, withDirectives, vModelCheckbox, toRef, isRef, Teleport, render as render$f, onBeforeUpdate, vShow, getCurrentScope, onScopeDispose, vModelText, TransitionGroup, vModelDynamic, vModelRadio, onBeforeUnmount, markRaw, getCurrentInstance, watchEffect, customRef, resolveDirective } from "vue";
+import { pushScopeId, popScopeId, defineComponent, nextTick, openBlock, createBlock, createElementBlock, normalizeClass, renderSlot, normalizeProps, guardReactiveProps, withScopeId, resolveComponent, normalizeStyle, withKeys, createElementVNode, Fragment as Fragment$1, createCommentVNode, mergeProps, withCtx, createVNode, ref, createApp, h as h$2, toDisplayString, inject, unref, renderList, resolveDynamicComponent, useCssVars, useSlots, computed, withModifiers, createTextVNode, watch, onMounted, onUnmounted, mergeModels, useModel, createSlots, Transition, reactive, provide, withDirectives, vModelCheckbox, toRef, isRef, Teleport, render as render$f, onBeforeUpdate, vShow, getCurrentScope, onScopeDispose, TransitionGroup, vModelDynamic, vModelText, vModelRadio, onBeforeUnmount, markRaw, getCurrentInstance, watchEffect, customRef, resolveDirective } from "vue";
 const sides = ["top", "right", "bottom", "left"];
 const alignments = ["start", "end"];
 const placements$1 = /* @__PURE__ */ sides.reduce((acc, side) => acc.concat(side, side + "-" + alignments[0], side + "-" + alignments[1]), []);
@@ -4913,7 +4913,7 @@ function txtField(id, label, options) {
     id,
     label,
     placeholder: options == null ? void 0 : options.placeholder,
-    attrs: { type: options == null ? void 0 : options.type }
+    attrs: { type: options == null ? void 0 : options.type, pattern: options == null ? void 0 : options.pattern }
   };
 }
 function slctField(id, label, options, config) {
@@ -5024,7 +5024,7 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
 });
 const _hoisted_1$E = { class: "full-nav" };
 const _hoisted_2$v = { class: "nav-scroll" };
-const _hoisted_3$l = { class: "nav-links-wrapper" };
+const _hoisted_3$m = { class: "nav-links-wrapper" };
 const _hoisted_4$e = { class: "tooltip" };
 const _hoisted_5$b = { class: "bot-buttons-wrapper" };
 const _hoisted_6$7 = { class: "tooltip" };
@@ -5059,7 +5059,7 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
         ], 32),
         createElementVNode("div", _hoisted_1$E, [
           createElementVNode("div", _hoisted_2$v, [
-            createElementVNode("div", _hoisted_3$l, [
+            createElementVNode("div", _hoisted_3$m, [
               (openBlock(true), createElementBlock(Fragment$1, null, renderList(_ctx.links, (link) => {
                 return openBlock(), createBlock(resolveDynamicComponent(link.to ? "router-link" : "div"), {
                   class: "nav-button",
@@ -5425,7 +5425,7 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
 const ModalForm = /* @__PURE__ */ _export_sfc(_sfc_main$D, [["__scopeId", "data-v-7e6899c7"]]);
 const _hoisted_1$B = { class: "accordion-item" };
 const _hoisted_2$s = ["aria-expanded", "aria-controls"];
-const _hoisted_3$k = { class: "accordion-label" };
+const _hoisted_3$l = { class: "accordion-label" };
 const _hoisted_4$d = ["id", "aria-hidden"];
 const _sfc_main$C = /* @__PURE__ */ defineComponent({
   __name: "AccordionItem",
@@ -5458,7 +5458,7 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
           class: "accordion-head",
           "aria-controls": `accordion-body-${unref(id)}`
         }, [
-          createElementVNode("span", _hoisted_3$k, toDisplayString(_ctx.label), 1),
+          createElementVNode("span", _hoisted_3$l, toDisplayString(_ctx.label), 1),
           createElementVNode("div", {
             class: normalizeClass(["accordion-icon", { open: unref(open) }])
           }, [
@@ -5485,7 +5485,7 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
 const AccordionItem = /* @__PURE__ */ _export_sfc(_sfc_main$C, [["__scopeId", "data-v-bf74738b"]]);
 const _hoisted_1$A = { class: "list-wrap bgl_card thin grid overflow-hidden h-100 p-0" };
 const _hoisted_2$r = { class: "p-1" };
-const _hoisted_3$j = { class: "list-content auto-flow-rows align-items-start overflow-y h-100" };
+const _hoisted_3$k = { class: "list-content auto-flow-rows align-items-start overflow-y h-100" };
 const _sfc_main$B = /* @__PURE__ */ defineComponent({
   __name: "ListView",
   setup(__props) {
@@ -5494,7 +5494,7 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
         createElementVNode("div", _hoisted_2$r, [
           renderSlot(_ctx.$slots, "header")
         ]),
-        createElementVNode("div", _hoisted_3$j, [
+        createElementVNode("div", _hoisted_3$k, [
           renderSlot(_ctx.$slots, "default")
         ])
       ]);
@@ -5565,7 +5565,7 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
 });
 const _hoisted_1$x = { class: "table-list-wrap h-100" };
 const _hoisted_2$o = { class: "infinite-wrapper" };
-const _hoisted_3$i = { class: "row first-row" };
+const _hoisted_3$j = { class: "row first-row" };
 const _hoisted_4$c = ["onClick"];
 const _hoisted_5$a = { class: "flex" };
 const _hoisted_6$6 = ["onClick"];
@@ -5606,7 +5606,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$x, [
         createElementVNode("table", _hoisted_2$o, [
-          createElementVNode("thead", _hoisted_3$i, [
+          createElementVNode("thead", _hoisted_3$j, [
             (openBlock(true), createElementBlock(Fragment$1, null, renderList(computedSchema.value, (field) => {
               return openBlock(), createElementBlock("th", {
                 class: "col",
@@ -5705,7 +5705,7 @@ const _hoisted_2$n = {
   key: 0,
   class: "data-row"
 };
-const _hoisted_3$h = { class: "key" };
+const _hoisted_3$i = { class: "key" };
 const _hoisted_4$b = { key: 1 };
 const _hoisted_5$9 = { class: "key" };
 const _hoisted_6$5 = { class: "vlue" };
@@ -5733,7 +5733,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
             key: field.id
           }, [
             unref(iffer)(field, itemData.value) ? (openBlock(), createElementBlock("div", _hoisted_2$n, [
-              createElementVNode("div", _hoisted_3$h, toDisplayString((field == null ? void 0 : field.label) || unref(keyToLabel)(field.id)), 1),
+              createElementVNode("div", _hoisted_3$i, toDisplayString((field == null ? void 0 : field.label) || unref(keyToLabel)(field.id)), 1),
               createVNode(unref(_sfc_main$l), {
                 field,
                 modelValue: itemData.value,
@@ -5929,7 +5929,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
 const Badge = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["__scopeId", "data-v-10743b06"]]);
 const _hoisted_1$r = { class: "bgl_vid" };
 const _hoisted_2$m = ["src"];
-const _hoisted_3$g = ["src", "autoplay", "muted", "loop", "controls"];
+const _hoisted_3$h = ["src", "autoplay", "muted", "loop", "controls"];
 const _sfc_main$o = /* @__PURE__ */ defineComponent({
   __name: "BglVideo",
   props: {
@@ -5986,7 +5986,7 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
           style: normalizeStyle({ aspectRatio: aspectRatio.value }),
           controls: _ctx.controls,
           playsinline: ""
-        }, null, 12, _hoisted_3$g))
+        }, null, 12, _hoisted_3$h))
       ]);
     };
   }
@@ -6379,7 +6379,7 @@ const _hoisted_2$k = /* @__PURE__ */ _withScopeId$1(() => /* @__PURE__ */ create
 }, [
   /* @__PURE__ */ createElementVNode("path", { d: "M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z" })
 ], -1));
-const _hoisted_3$f = [
+const _hoisted_3$g = [
   _hoisted_2$k
 ];
 const _hoisted_4$a = ["required", "id"];
@@ -6406,7 +6406,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
         createElementVNode("div", {
           class: normalizeClass(["check-square", { checked: checked.value }]),
           onClick: _cache[0] || (_cache[0] = ($event) => checked.value = !checked.value)
-        }, _hoisted_3$f, 2),
+        }, _hoisted_3$g, 2),
         createElementVNode("label", null, [
           withDirectives(createElementVNode("input", {
             required: _ctx.required,
@@ -15087,7 +15087,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
 });
 const _hoisted_1$n = ["title"];
 const _hoisted_2$i = { key: 0 };
-const _hoisted_3$e = ["value", "placeholder"];
+const _hoisted_3$f = ["value", "placeholder"];
 const _sfc_main$i = /* @__PURE__ */ defineComponent({
   __name: "JSONInput",
   props: {
@@ -15119,14 +15119,15 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
           onInput: handleInput,
           class: normalizeClass({ "no-edit": !_ctx.editMode }),
           placeholder: _ctx.placeholder
-        }, null, 42, _hoisted_3$e)
+        }, null, 42, _hoisted_3$f)
       ], 10, _hoisted_1$n);
     };
   }
 });
 const JSONInput = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["__scopeId", "data-v-1fc4f739"]]);
 const _hoisted_1$m = ["disabled"];
-const _hoisted_2$h = ["onClick"];
+const _hoisted_2$h = ["value"];
+const _hoisted_3$e = ["onClick"];
 const _sfc_main$h = /* @__PURE__ */ defineComponent({
   __name: "SelectInput",
   props: {
@@ -15187,13 +15188,17 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
       return option2.value;
     };
     const isSelected = (option2) => !!selectedItems.value.find((item) => getValue(option2) === getValue(item));
-    const filteredOptions = computed(() => props2.options.filter((option2) => {
-      const searchTerm = new RegExp(search.value, "gi");
-      return Boolean(option2) && (getLabel(option2).match(searchTerm) || getValue(option2).match(searchTerm));
-    }));
+    const filteredOptions = computed(
+      () => props2.options.filter((option2) => {
+        const searchTerm = new RegExp(search.value, "gi");
+        return Boolean(option2) && (getLabel(option2).match(searchTerm) || getValue(option2).match(searchTerm));
+      })
+    );
     const select2 = (option2) => {
       var _a2;
-      const existingIndex = selectedItems.value.findIndex((item) => getValue(item) === getValue(option2));
+      const existingIndex = selectedItems.value.findIndex(
+        (item) => getValue(item) === getValue(option2)
+      );
       if (existingIndex > -1)
         selectedItems.value.splice(existingIndex, 1);
       else if (props2.multiselect) {
@@ -15215,7 +15220,9 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
       }
     }
     function compareArrays(arr1, arr2) {
-      const isSame = arr1.every((item) => arr2.map((a2) => getValue(a2)).includes(getValue(item)));
+      const isSame = arr1.every(
+        (item) => arr2.map((a2) => getValue(a2)).includes(getValue(item))
+      );
       return isSame;
     }
     watch(
@@ -15234,19 +15241,24 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
       },
       { immediate: true }
     );
-    watch(() => props2.options, () => {
-      const original = JSON.stringify(selectedItems.value);
-      [...selectedItems.value].forEach((option2, i2) => {
-        const exists = props2.options.find((o2) => getValue(o2) === getValue(option2));
-        if (!exists)
-          selectedItems.value.splice(i2, 1);
-        else
-          selectedItems.value.splice(i2, 1, exists);
-      });
-      const newSelection = JSON.stringify(selectedItems.value);
-      if (original !== newSelection)
-        emitUpdate();
-    });
+    watch(
+      () => props2.options,
+      () => {
+        const original = JSON.stringify(selectedItems.value);
+        [...selectedItems.value].forEach((option2, i2) => {
+          const exists = props2.options.find(
+            (o2) => getValue(o2) === getValue(option2)
+          );
+          if (!exists)
+            selectedItems.value.splice(i2, 1);
+          else
+            selectedItems.value.splice(i2, 1, exists);
+        });
+        const newSelection = JSON.stringify(selectedItems.value);
+        if (original !== newSelection)
+          emitUpdate();
+      }
+    );
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(kt$1), {
         onHide: _cache[3] || (_cache[3] = ($event) => updateOpen(false)),
@@ -15287,7 +15299,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
                     icon: "fiber_manual_record"
                   })) : createCommentVNode("", true),
                   createElementVNode("span", null, toDisplayString(getLabel(option2)), 1)
-                ], 10, _hoisted_2$h);
+                ], 10, _hoisted_3$e);
               }), 128)),
               renderSlot(_ctx.$slots, "last", {}, void 0, true)
             ]),
@@ -15306,14 +15318,13 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
               createElementVNode("p", null, toDisplayString(selectedLabel.value), 1),
               createVNode(unref(_sfc_main$H), normalizeProps(guardReactiveProps({ icon: unref(open) ? "unfold_less" : "unfold_more" })), null, 16)
             ], 10, _hoisted_1$m),
-            _ctx.required ? withDirectives((openBlock(), createElementBlock("input", {
+            _ctx.required ? (openBlock(), createElementBlock("input", {
               key: 0,
               style: { "width": "0", "height": "0", "position": "absolute", "opacity": "0", "z-index": "-1" },
-              "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => selectedItems.value = $event),
+              onInput: _cache[1] || (_cache[1] = ($event) => updateOpen(true)),
+              value: selectedItems.value,
               required: ""
-            }, null, 512)), [
-              [vModelText, selectedItems.value]
-            ]) : createCommentVNode("", true)
+            }, null, 40, _hoisted_2$h)) : createCommentVNode("", true)
           ])
         ]),
         _: 3
@@ -15321,7 +15332,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const SelectInput = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-8235eff6"]]);
+const SelectInput = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-70fd5ae7"]]);
 /*!
   * vue-draggable-next v2.2.0
   * (c) 2023 Anish George
@@ -45756,8 +45767,21 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     modelValue: {}
   },
   setup(__props) {
+    const props2 = __props;
+    const slots = useSlots();
     const group = Math.random().toString(36).substring(7);
     const { currentTab } = useTabs(group);
+    const tabValue = (tab) => typeof tab === "string" ? tab : tab.id;
+    const tabComponent = defineComponent({
+      render() {
+        var _a2, _b, _c;
+        const currentTabIndex = props2.tabs.findIndex(
+          (tab) => tabValue(tab) === currentTab.value
+        );
+        const slotChildren = (_c = (_b = (_a2 = slots == null ? void 0 : slots.default) == null ? void 0 : _a2.call(slots)) == null ? void 0 : _b[1]) == null ? void 0 : _c.children;
+        return h$2("div", slotChildren == null ? void 0 : slotChildren[currentTabIndex]);
+      }
+    });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment$1, null, [
         createVNode(unref(TabsNav), {
@@ -45766,7 +45790,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
           class: "mb-05"
         }, null, 8, ["tabs", "group"]),
         unref(currentTab) ? (openBlock(), createElementBlock("div", _hoisted_1$3, [
-          renderSlot(_ctx.$slots, unref(currentTab))
+          unref(slots)[unref(currentTab)] ? renderSlot(_ctx.$slots, unref(currentTab), { key: 0 }) : unref(currentTab) ? (openBlock(), createBlock(resolveDynamicComponent(unref(tabComponent)), { key: 1 })) : createCommentVNode("", true)
         ])) : createCommentVNode("", true)
       ], 64);
     };

package/dist/style.css

@@ -1033,10 +1033,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-8235eff6] {
+.selectinput[data-v-70fd5ae7] {
 	width: 100%;
 }
-.selectinput-option[data-v-8235eff6] {
+.selectinput-option[data-v-70fd5ae7] {
 	padding: 6px 12px;
 	cursor: pointer;
 	border-radius: 5px;
@@ -1047,14 +1047,14 @@ display: block;
 	width: 100%;
 	font-size: var(--input-font-size);
 }
-.selectinput-options[data-v-8235eff6] {
+.selectinput-options[data-v-70fd5ae7] {
 	max-height: 300px;
 	overflow-y: auto;
 }
-.selectinput-option[data-v-8235eff6]:hover {
+.selectinput-option[data-v-70fd5ae7]:hover {
 	background: var(--bgl-gray-20);
 }
-.isEmpty p[data-v-8235eff6]{
+.isEmpty p[data-v-70fd5ae7] {
 	opacity: 0.3;
 }
 

package/dist/utils/BagelFormUtils.d.ts

@@ -10,6 +10,7 @@ type TextInputOptions = {
     class?: string;
     defaultValue?: string;
     disabled?: boolean;
+    pattern?: string;
 };
 export declare function txtField(id: string, label?: string, options?: TextInputOptions): Field;
 export declare function slctField(id: string, label?: string, options?: Option[] | (() => Option[]), config?: TextInputOptions): Field;

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,KAAK,gBAAgB,GAAG;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,OAAO,CAAC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAA;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,QAAQ,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,gBAAgB,GAAG,KAAK,CAUtF;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,KAAK,gBAAgB,GAAG;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,OAAO,CAAC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;CACjB,CAAA;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,QAAQ,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,gBAAgB,GAAG,KAAK,CAUtF;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.354",
+  "version": "0.0.356",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",

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

@@ -3,8 +3,7 @@
 		@hide="updateOpen(false)"
 		ref="dropdown"
 		placement="bottom-start"
-		class="bagel-input selectinput"
-	>
+		class="bagel-input selectinput">
 		<label>
 			{{ label }}
 			<button
@@ -12,44 +11,39 @@
 				:disabled="disabled"
 				type="button"
 				class="selectinput-btn"
-				:class="{isEmpty: selectedItems.length ===0}"
-			>
+				:class="{ isEmpty: selectedItems.length === 0 }">
 				<p>{{ selectedLabel }}</p>
 				<Icon 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
-			>
+				@input="updateOpen(true)"
+				:value="selectedItems"
+				required />
 		</label>
 		<template #popper="{ hide }">
 			<Card
 				class="selectinput-options p-05"
-				:style="{ width: fullWidth ? '100%' : 'auto' }"
-			>
+				:style="{ width: fullWidth ? '100%' : 'auto' }">
 				<TextInput
 					v-if="searchable"
 					ref="searchInput"
 					dense
 					:placeholder="'Search'"
 					icon="search"
-					v-model="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) }"
-				>
+					:class="{ selected: isSelected(option) }">
 					<Icon v-if="isSelected(option)" icon="check" />
 					<Icon
 						class="opacity-3"
 						v-if="!isSelected(option)"
-						icon="fiber_manual_record"
-					/>
+						icon="fiber_manual_record" />
 					<span>
 						{{ getLabel(option) }}
 					</span>
@@ -99,7 +93,7 @@ function updateOpen(visible: boolean) {
 	else {
 		setTimeout(
 			() => (searchInput as any)?.$el?.querySelector('input')?.focus(),
-			100,
+			100
 		);
 	}
 }
@@ -130,18 +124,23 @@ const getValue = (option: Option) => {
 	return option.value;
 };
 
-const isSelected = (option: Option) => !!selectedItems.find((item) => getValue(option) === getValue(item));
+const isSelected = (option: Option) =>
+	!!selectedItems.find((item) => getValue(option) === getValue(item));
 
-const filteredOptions = $computed(() => props.options.filter((option) => {
-	const searchTerm = new RegExp(search, 'gi');
-	return (
-		Boolean(option) &&
+const filteredOptions = $computed(() =>
+	props.options.filter((option) => {
+		const searchTerm = new RegExp(search, 'gi');
+		return (
+			Boolean(option) &&
 			(getLabel(option).match(searchTerm) || getValue(option).match(searchTerm))
-	);
-}));
+		);
+	})
+);
 
 const select = (option: Option) => {
-	const existingIndex = selectedItems.findIndex((item) => getValue(item) === getValue(option));
+	const existingIndex = selectedItems.findIndex(
+		(item) => getValue(item) === getValue(option)
+	);
 	if (existingIndex > -1) selectedItems.splice(existingIndex, 1);
 	else if (props.multiselect) {
 		selectedItems.push(option);
@@ -163,7 +162,9 @@ function emitUpdate() {
 }
 
 function compareArrays(arr1: Option[], arr2: Option[]) {
-	const isSame = arr1.every((item: Option) => arr2.map((a) => getValue(a)).includes(getValue(item)));
+	const isSame = arr1.every((item: Option) =>
+		arr2.map((a) => getValue(a)).includes(getValue(item))
+	);
 	return isSame;
 }
 
@@ -172,25 +173,32 @@ watch(
 	(newVal: Option | Option[]) => {
 		if (!newVal) return;
 		if (!props.multiselect) {
-			if (!isSelected(newVal)) selectedItems.splice(0, selectedItems.length, newVal);
+			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());
+			if (!isSame)
+				selectedItems.splice(0, selectedItems.length, [newVal].flat());
 		}
 	},
-	{ immediate: true },
+	{ immediate: true }
 );
 
-watch(() => props.options, () => {
-	const original = JSON.stringify(selectedItems);
-	[...selectedItems].forEach((option, i) => {
-		const exists = props.options.find((o) => getValue(o) === getValue(option));
-		if (!exists) selectedItems.splice(i, 1);
-		else selectedItems.splice(i, 1, exists);
-	});
-	const newSelection = JSON.stringify(selectedItems);
-	if (original !== newSelection) emitUpdate();
-});
+watch(
+	() => props.options,
+	() => {
+		const original = JSON.stringify(selectedItems);
+		[...selectedItems].forEach((option, i) => {
+			const exists = props.options.find(
+				(o) => getValue(o) === getValue(option)
+			);
+			if (!exists) selectedItems.splice(i, 1);
+			else selectedItems.splice(i, 1, exists);
+		});
+		const newSelection = JSON.stringify(selectedItems);
+		if (original !== newSelection) emitUpdate();
+	}
+);
 </script>
 
 <style scoped>
@@ -218,7 +226,7 @@ watch(() => props.options, () => {
 .selectinput-option:hover {
 	background: var(--bgl-gray-20);
 }
-.isEmpty p{
+.isEmpty p {
 	opacity: 0.3;
 }
 </style>

package/src/components/layout/Tabs.vue

@@ -1,19 +1,38 @@
 <template>
 	<TabsNav :tabs="tabs" :group="group" class="mb-05" />
 	<div v-if="currentTab">
-		<slot :name="currentTab" />
+		<template v-if="slots[currentTab]">
+			<slot :name="currentTab" />
+		</template>
+		<template v-else-if="currentTab">
+			<component :is="tabComponent" />
+		</template>
 	</div>
 </template>
 
 <script setup lang="ts">
 import { TabsNav, type Tab } from '@bagelink/vue';
+import { defineProps, useSlots, h, defineComponent } from 'vue';
 import { useTabs } from './tabsManager';
 
-defineProps<{
-  tabs: Tab[];
-  modelValue?: string;
+const props = defineProps<{
+	tabs: Tab[];
+	modelValue?: string;
 }>();
 
+const slots = useSlots();
 const group = Math.random().toString(36).substring(7);
 const { currentTab } = useTabs(group);
+
+const tabValue = (tab: Tab) => (typeof tab === 'string' ? tab : tab.id);
+
+const tabComponent = defineComponent({
+	render() {
+		const currentTabIndex = props.tabs.findIndex(
+			(tab) => tabValue(tab) === currentTab.value
+		);
+		const slotChildren = slots?.default?.()?.[1]?.children;
+		return h('div', slotChildren?.[currentTabIndex]);
+	},
+});
 </script>

package/src/utils/BagelFormUtils.ts

@@ -3,12 +3,13 @@ import type { Field } from '@bagelink/vue';
 export type Option = string | number | Record<string, any> | { label: string, value: string | number };
 
 type TextInputOptions = {
-  required?: boolean;
-  type?: 'text' | 'tel' | 'email';
-  placeholder?: string;
-  class?: string
-  defaultValue?: string;
-  disabled?: boolean;
+	required?: boolean;
+	type?: 'text' | 'tel' | 'email';
+	placeholder?: string;
+	class?: string
+	defaultValue?: string;
+	disabled?: boolean;
+	pattern?: string;
 }
 
 export function txtField(id: string, label?: string, options?: TextInputOptions): Field {
@@ -19,7 +20,7 @@ export function txtField(id: string, label?: string, options?: TextInputOptions)
 		id,
 		label,
 		placeholder: options?.placeholder,
-		attrs: { type: options?.type },
+		attrs: { type: options?.type, pattern: options?.pattern },
 	};
 }