@bagelink/vue 0.0.1300 → 0.0.1303

package/dist/index.cjs

@@ -868,7 +868,7 @@ const _hoisted_6$j = {
   key: 0,
   class: "align-items-center flex justify-content-center h-100p opacity-6"
 };
-const _hoisted_7$e = {
+const _hoisted_7$f = {
   key: 1,
   class: "w-100p"
 };
@@ -898,7 +898,7 @@ const _sfc_main$1c = /* @__PURE__ */ vue.defineComponent({
           vue.createElementVNode("div", _hoisted_4$r, vue.toDisplayString(__props.day.dateTimeString.substring(8, 10)), 1)
         ]),
         vue.createElementVNode("div", _hoisted_5$n, [
-          __props.day.events.length === 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6$j, vue.toDisplayString(vue.unref(getLanguage)(vue.unref(languageKeys).noEvent, __props.time.CALENDAR_LOCALE)), 1)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_7$e, [
+          __props.day.events.length === 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6$j, vue.toDisplayString(vue.unref(getLanguage)(vue.unref(languageKeys).noEvent, __props.time.CALENDAR_LOCALE)), 1)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_7$f, [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.day.events, (dayEvent) => {
               return vue.openBlock(), vue.createBlock(AgendaEventTile, {
                 key: `agenda_event_${dayEvent.id}`,
@@ -1612,7 +1612,7 @@ const _hoisted_6$i = {
   key: 0,
   class: "event-flyout__row is-title"
 };
-const _hoisted_7$d = {
+const _hoisted_7$e = {
   key: 1,
   class: "event-flyout__row is-time"
 };
@@ -1836,7 +1836,7 @@ const _sfc_main$1b = /* @__PURE__ */ vue.defineComponent({
               }, null, 4),
               vue.createTextVNode(" " + vue.toDisplayString(calendarEvent.value.title), 1)
             ])) : vue.createCommentVNode("", true),
-            calendarEvent.value.time ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7$d, vue.toDisplayString(getEventTime.value), 1)) : vue.createCommentVNode("", true),
+            calendarEvent.value.time ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7$e, vue.toDisplayString(getEventTime.value), 1)) : vue.createCommentVNode("", true),
             calendarEvent.value.location ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_8$9, [
               vue.createVNode(vue.unref(Icon), {
                 icon: icons.location
@@ -2549,7 +2549,7 @@ const _hoisted_6$h = {
   key: 2,
   class: "calendar-week__event-row is-topic"
 };
-const _hoisted_7$c = {
+const _hoisted_7$d = {
   key: 3,
   class: "calendar-week__event-row is-description"
 };
@@ -2925,7 +2925,7 @@ const _sfc_main$16 = /* @__PURE__ */ vue.defineComponent({
             }, null, 8, ["icon"]),
             vue.createElementVNode("span", null, vue.toDisplayString(event.value.topic), 1)
           ])) : vue.createCommentVNode("", true),
-          event.value.description ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7$c, [
+          event.value.description ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7$d, [
             vue.createVNode(vue.unref(Icon), {
               icon: icons.value.description,
               class: "calendar-week__event-icon"
@@ -9337,7 +9337,7 @@ const _hoisted_4$2$1 = {
 };
 const _hoisted_5$2$1 = ["x1", "y1", "x2", "y2"];
 const _hoisted_6$2$1 = ["x1", "y1", "x2", "y2"];
-const _hoisted_7$b = ["x1", "y1", "x2", "y2"];
+const _hoisted_7$c = ["x1", "y1", "x2", "y2"];
 function render$5(_ctx, _cache, $props, $setup, $data, $options) {
   return _ctx.data.length ? (vue.openBlock(), vue.createElementBlock("g", {
     key: 0,
@@ -9393,7 +9393,7 @@ function render$5(_ctx, _cache, $props, $setup, $data, $options) {
         y1: _ctx.canvas.y,
         x2: _ctx.canvas.width - 1,
         y2: _ctx.canvas.height
-      }, null, 8, _hoisted_7$b)
+      }, null, 8, _hoisted_7$c)
     ])
   ], 8, _hoisted_1$4$1)) : vue.createCommentVNode("v-if", true);
 }
@@ -10539,6 +10539,8 @@ function useSchemaField(optns) {
       textarea: TextInput,
       number: NumberInput,
       array: _sfc_main$R,
+      color: _sfc_main$N,
+      tel: TelInput,
       select: SelectInput,
       toggle: ToggleInput,
       check: CheckInput,
@@ -10764,18 +10766,19 @@ const _hoisted_1$N = { class: "data-preview" };
 const _sfc_main$Y = /* @__PURE__ */ vue.defineComponent({
   __name: "DataPreview",
   props: {
+    data: {},
     schema: { type: Function },
     showFields: {},
     useServerSort: { type: Boolean },
     selectable: { type: Boolean },
     onLastItemVisible: { type: Function },
-    data: {},
+    modelValue: {},
     includeUnset: { type: Boolean }
   },
   setup(__props) {
     const props2 = __props;
     const slots = vue.useSlots();
-    const data2 = vue.computed(() => Array.isArray(props2.data) ? props2.data : [props2.data]);
+    const data2 = vue.computed(() => Array.isArray(props2.modelValue) ? props2.modelValue : [props2.modelValue]);
     const {
       computedSchema,
       computedData
@@ -10802,7 +10805,7 @@ const _sfc_main$Y = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const DataPreview = /* @__PURE__ */ _export_sfc(_sfc_main$Y, [["__scopeId", "data-v-550fe546"]]);
+const DataPreview = /* @__PURE__ */ _export_sfc(_sfc_main$Y, [["__scopeId", "data-v-32cd138c"]]);
 function useTableSelection(options) {
   const allSelectorEl = vue.ref();
   const computedSelectedItems = vue.computed(() => options.selectedItems.value);
@@ -11440,7 +11443,7 @@ const _hoisted_3$s = { class: "row first-row" };
 const _hoisted_4$i = { key: 0 };
 const _hoisted_5$h = ["onClick"];
 const _hoisted_6$e = { class: "flex" };
-const _hoisted_7$a = ["onClick"];
+const _hoisted_7$b = ["onClick"];
 const _hoisted_8$7 = { key: 0 };
 const _hoisted_9$6 = ["value"];
 const _hoisted_10$6 = { key: 1 };
@@ -11635,7 +11638,7 @@ const _sfc_main$X = /* @__PURE__ */ vue.defineComponent({
                       ]))
                     ]);
                   }), 128))
-                ], 10, _hoisted_7$a);
+                ], 10, _hoisted_7$b);
               }), 128)),
               props2.onLastItemVisible !== void 0 ? (vue.openBlock(), vue.createElementBlock("tr", {
                 key: 0,
@@ -14758,11 +14761,10 @@ const _sfc_main$V = /* @__PURE__ */ vue.defineComponent({
     border: { type: Boolean },
     outline: { type: Boolean },
     round: { type: Boolean },
-    placement: {},
+    placement: { default: "bottom-start" },
     noAutoFocus: { type: Boolean },
-    positioningDisabled: { type: Boolean },
-    autoHide: { type: Boolean },
-    triggers: {}
+    autoHide: { type: Boolean, default: true },
+    triggers: { default: () => ["click"] }
   }, {
     "shown": {
       type: Boolean,
@@ -14818,8 +14820,10 @@ const _sfc_main$V = /* @__PURE__ */ vue.defineComponent({
               icon: _ctx.icon,
               value: _ctx.value,
               thin: _ctx.thin,
-              flat: _ctx.flat
-            }, null, 8, ["class", "iconEnd", "icon", "value", "thin", "flat"])
+              flat: _ctx.flat,
+              outline: _ctx.outline,
+              round: _ctx.round
+            }, null, 8, ["class", "iconEnd", "icon", "value", "thin", "flat", "outline", "round"])
           ])
         ]),
         _: 3
@@ -15014,11 +15018,22 @@ function bglForm(idOrField, ...schema) {
 }
 function telField(id, label, options) {
   return {
-    $el: vue.markRaw(TelInput),
+    $el: "tel",
     id,
     label,
     vIf: options == null ? void 0 : options.vIf,
-    attrs: options
+    attrs: options,
+    class: options == null ? void 0 : options.class
+  };
+}
+function colorField(id, label, options) {
+  return {
+    $el: "color",
+    id,
+    label,
+    vIf: options == null ? void 0 : options.vIf,
+    attrs: options,
+    class: options == null ? void 0 : options.class
   };
 }
 function findBglFieldById(id, _schema) {
@@ -15046,6 +15061,7 @@ const bagelFormUtils = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defi
   arrField,
   bglForm,
   checkField,
+  colorField,
   dateField,
   findBglFieldById,
   frmRow: frmRow$1,
@@ -15392,7 +15408,7 @@ const _sfc_main$S = /* @__PURE__ */ vue.defineComponent({
 const _hoisted_1$K = { class: "label mb-05" };
 const _hoisted_2$x = {
   key: 0,
-  class: "ps-025 border-start"
+  class: "ps-025 border-start mb-05"
 };
 const _hoisted_3$r = { class: "bg-gray-80 -my-05 px-025 pt-065 txt-center" };
 const _sfc_main$R = /* @__PURE__ */ vue.defineComponent({
@@ -15720,7 +15736,7 @@ const CodeEditor = /* @__PURE__ */ _export_sfc(_sfc_main$O, [["__scopeId", "data
 const _hoisted_1$G = ["title"];
 const _hoisted_2$u = ["id", "placeholder", "required"];
 const _sfc_main$N = /* @__PURE__ */ vue.defineComponent({
-  __name: "ColorPicker",
+  __name: "ColorInput",
   props: {
     label: {},
     id: {},
@@ -15743,8 +15759,7 @@ const _sfc_main$N = /* @__PURE__ */ vue.defineComponent({
       }
     );
     return (_ctx, _cache) => {
-      return _ctx.id ? (vue.openBlock(), vue.createElementBlock("div", {
-        key: 0,
+      return vue.openBlock(), vue.createElementBlock("div", {
         class: vue.normalizeClass(["bagel-input", { small: _ctx.small }]),
         title: _ctx.label
       }, [
@@ -15761,7 +15776,7 @@ const _sfc_main$N = /* @__PURE__ */ vue.defineComponent({
             [vue.vModelText, inputVal.value]
           ])
         ])
-      ], 10, _hoisted_1$G)) : vue.createCommentVNode("", true);
+      ], 10, _hoisted_1$G);
     };
   }
 });
@@ -15774,7 +15789,7 @@ const _hoisted_3$o = {
 const _hoisted_4$g = { class: "calendar-section m_border-none pe-05 m_p-0" };
 const _hoisted_5$f = { class: "flex space-between pb-1" };
 const _hoisted_6$c = { class: "flex gap-05" };
-const _hoisted_7$9 = { class: "month-year" };
+const _hoisted_7$a = { class: "month-year" };
 const _hoisted_8$6 = {
   key: 0,
   class: "calendar-grid grid gap-025"
@@ -15837,7 +15852,7 @@ const _sfc_main$M = /* @__PURE__ */ vue.defineComponent({
         };
         return dateObj.toLocaleString(props2.locale || void 0, options);
       };
-      const formatDate = (date2) => {
+      const formatDate2 = (date2) => {
         if (!date2) return "";
         const dateObj = typeof date2 === "string" ? new Date(date2) : date2;
         return props2.enableTime ? dateObj.toISOString().slice(0, 16) : dateObj.toISOString().split("T")[0];
@@ -15861,7 +15876,7 @@ const _sfc_main$M = /* @__PURE__ */ vue.defineComponent({
       };
       return {
         formatDisplayDate,
-        formatDate,
+        formatDate: formatDate2,
         parseUserInput
       };
     }
@@ -15887,10 +15902,10 @@ const _sfc_main$M = /* @__PURE__ */ vue.defineComponent({
       };
     }
     function useDateState() {
-      const { formatDisplayDate, formatDate } = useFormatting();
+      const { formatDisplayDate, formatDate: formatDate2 } = useFormatting();
       const formattedDisplayValue2 = vue.computed(() => formatDisplayDate(props2.modelValue));
-      const formattedMin2 = vue.computed(() => formatDate(props2.min));
-      const formattedMax2 = vue.computed(() => formatDate(props2.max));
+      const formattedMin2 = vue.computed(() => formatDate2(props2.min));
+      const formattedMax2 = vue.computed(() => formatDate2(props2.max));
       const selectedDate2 = vue.computed(() => {
         if (!props2.modelValue) return null;
         return typeof props2.modelValue === "string" ? new Date(props2.modelValue) : props2.modelValue;
@@ -16224,7 +16239,7 @@ const _sfc_main$M = /* @__PURE__ */ vue.defineComponent({
                       icon: "chevron_left",
                       onClick: vue.unref(previousYear)
                     }, null, 8, ["onClick"]),
-                    vue.createElementVNode("span", _hoisted_7$9, vue.toDisplayString(vue.unref(currentMonthValue).formatted.year), 1),
+                    vue.createElementVNode("span", _hoisted_7$a, vue.toDisplayString(vue.unref(currentMonthValue).formatted.year), 1),
                     vue.createVNode(vue.unref(Btn), {
                       flat: "",
                       icon: "chevron_right",
@@ -16333,7 +16348,7 @@ const _hoisted_3$n = {
 const _hoisted_4$f = { class: "date-picker-container" };
 const _hoisted_5$e = ["value", "min", "max", "required", "disabled"];
 const _hoisted_6$b = { class: "flex gap-075 p-05 m_flex-wrap calendar-container justify-content-center h-100p" };
-const _hoisted_7$8 = { class: "calendar-section m_border-none pe-05 m_p-0" };
+const _hoisted_7$9 = { class: "calendar-section m_border-none pe-05 m_p-0" };
 const _hoisted_8$5 = { class: "flex space-between pb-1" };
 const _hoisted_9$4 = { class: "flex gap-05" };
 const _hoisted_10$4 = { class: "month-year" };
@@ -16403,14 +16418,14 @@ const _sfc_main$L = /* @__PURE__ */ vue.defineComponent({
         timeZone: props2.timezone
       });
     }
-    function formatDate(date2) {
+    function formatDate2(date2) {
       if (!date2) return "";
       const dateObj = typeof date2 === "string" ? new Date(date2) : date2;
       return props2.enableTime ? dateObj.toISOString().slice(0, 16) : dateObj.toISOString().split("T")[0];
     }
     const formattedDisplayValue = vue.computed(() => formatDisplayDate(props2.modelValue));
-    const formattedMin = vue.computed(() => formatDate(props2.min));
-    const formattedMax = vue.computed(() => formatDate(props2.max));
+    const formattedMin = vue.computed(() => formatDate2(props2.min));
+    const formattedMax = vue.computed(() => formatDate2(props2.max));
     const selectedDate = vue.computed(() => {
       if (!props2.modelValue) return null;
       return typeof props2.modelValue === "string" ? new Date(props2.modelValue) : props2.modelValue;
@@ -16580,7 +16595,7 @@ const _sfc_main$L = /* @__PURE__ */ vue.defineComponent({
           ]),
           default: vue.withCtx(() => [
             vue.createElementVNode("div", _hoisted_6$b, [
-              vue.createElementVNode("div", _hoisted_7$8, [
+              vue.createElementVNode("div", _hoisted_7$9, [
                 vue.createElementVNode("div", _hoisted_8$5, [
                   vue.unref(currentView) === "days" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
                     vue.createVNode(vue.unref(Btn), {
@@ -16783,7 +16798,7 @@ const _hoisted_3$l = { class: "m-05 flex opacity-7 z-99" };
 const _hoisted_4$d = { class: "ellipsis-1 word-break-all h-20 m-0 color-black" };
 const _hoisted_5$d = { class: "flex gap-025 rounded pe-1 ps-05 py-025 bg-gray-80 -my-1" };
 const _hoisted_6$a = { class: "ellipsis-1 word-break-all h-20 m-0 color-black txt16" };
-const _hoisted_7$7 = {
+const _hoisted_7$8 = {
   key: 1,
   class: "txt-gray txt-12"
 };
@@ -17066,7 +17081,7 @@ const _sfc_main$J = /* @__PURE__ */ vue.defineComponent({
                 ])
               ]);
             }), 128)),
-            !storageFiles.value.length && !fileQueue.value.length ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_7$7, vue.toDisplayString(_ctx.noFilePlaceholder || "No file selected"), 1)) : vue.createCommentVNode("", true)
+            !storageFiles.value.length && !fileQueue.value.length ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_7$8, vue.toDisplayString(_ctx.noFilePlaceholder || "No file selected"), 1)) : vue.createCommentVNode("", true)
           ]),
           _: 1
         })) : (vue.openBlock(), vue.createElementBlock("div", {
@@ -17665,7 +17680,7 @@ const _hoisted_6$9 = {
   key: 0,
   class: "m-0 m_txt-14"
 };
-const _hoisted_7$6 = {
+const _hoisted_7$7 = {
   key: 1,
   class: "txt-gray txt-12 m-0"
 };
@@ -17740,7 +17755,7 @@ const _sfc_main$E = /* @__PURE__ */ vue.defineComponent({
               }, null, 8, _hoisted_4$b)) : vue.createCommentVNode("", true),
               vue.createElementVNode("div", _hoisted_5$b, [
                 opt.label ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_6$9, vue.toDisplayString(opt.label), 1)) : vue.createCommentVNode("", true),
-                opt.subLabel ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_7$6, vue.toDisplayString(opt.subLabel), 1)) : vue.createCommentVNode("", true)
+                opt.subLabel ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_7$7, vue.toDisplayString(opt.subLabel), 1)) : vue.createCommentVNode("", true)
               ]),
               vue.renderSlot(_ctx.$slots, "radioItem", vue.mergeProps({ ref_for: true }, opt), void 0, true)
             ]),
@@ -17841,7 +17856,7 @@ const _hoisted_3$g = { class: "range-slider relative w-100" };
 const _hoisted_4$9 = ["id", "value", "min", "max", "step", "required", "disabled", "aria-label"];
 const _hoisted_5$9 = ["value", "min", "max", "step", "required", "disabled"];
 const _hoisted_6$8 = { class: "track absolute pointer-events-none overflow-hidden round" };
-const _hoisted_7$5 = { class: "txt-center txt-14 user-select-none range-slider-txt flex space-between opacity-4 mx-05" };
+const _hoisted_7$6 = { class: "txt-center txt-14 user-select-none range-slider-txt flex space-between opacity-4 mx-05" };
 const _sfc_main$C = /* @__PURE__ */ vue.defineComponent({
   __name: "RangeInput",
   props: {
@@ -17982,7 +17997,7 @@ const _sfc_main$C = /* @__PURE__ */ vue.defineComponent({
             ], true)
           ], 4)) : vue.createCommentVNode("", true)
         ]),
-        vue.createElementVNode("p", _hoisted_7$5, [
+        vue.createElementVNode("p", _hoisted_7$6, [
           vue.renderSlot(_ctx.$slots, "min", {
             max: vue.unref(formatValue)(vue.unref(max2)),
             min: vue.unref(formatValue)(vue.unref(min2)),
@@ -19676,7 +19691,7 @@ const _hoisted_4$8 = {
 };
 const _hoisted_5$8 = ["value"];
 const _hoisted_6$7 = ["aria-selected", "onClick", "onKeydown"];
-const _hoisted_7$4 = { class: "block" };
+const _hoisted_7$5 = { class: "block" };
 const _sfc_main$y = /* @__PURE__ */ vue.defineComponent({
   __name: "SelectInput",
   props: {
@@ -19969,7 +19984,7 @@ const _sfc_main$y = /* @__PURE__ */ vue.defineComponent({
                         size: 1.1
                       })) : vue.createCommentVNode("", true)
                     ], 64)) : vue.createCommentVNode("", true),
-                    vue.createElementVNode("span", _hoisted_7$4, vue.toDisplayString(getLabel(option2)), 1)
+                    vue.createElementVNode("span", _hoisted_7$5, vue.toDisplayString(getLabel(option2)), 1)
                   ], 42, _hoisted_6$7);
                 }), 128))
               ], 2),
@@ -27867,11 +27882,12 @@ function parsePhoneNumber() {
   return withMetadataArgument(parsePhoneNumber$1, arguments);
 }
 const _hoisted_1$o = ["aria-expanded"];
-const _hoisted_2$e = { class: "p-075 tel-countryp-dropdown" };
-const _hoisted_3$b = ["aria-selected", "onClick", "onMousemove"];
-const _hoisted_4$6 = { class: "tel-country" };
-const _hoisted_5$6 = { key: 1 };
-const _hoisted_6$5 = ["id", "required", "placeholder", "disabled", "autocomplete", "pattern", "minlength", "maxlength", "name", "readonly", "tabindex", "aria-describedby"];
+const _hoisted_2$e = { class: "flex gap-05" };
+const _hoisted_3$b = { class: "p-075 tel-countryp-dropdown" };
+const _hoisted_4$6 = ["aria-selected", "onClick", "onMousemove"];
+const _hoisted_5$6 = { class: "tel-country" };
+const _hoisted_6$5 = { key: 1 };
+const _hoisted_7$4 = ["id", "required", "placeholder", "disabled", "autocomplete", "pattern", "minlength", "maxlength", "name", "readonly", "tabindex", "aria-describedby"];
 const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
   __name: "TelInput",
   props: /* @__PURE__ */ vue.mergeModels({
@@ -27895,8 +27911,7 @@ const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
     mode: { default: "INTERNATIONAL" },
     onlyCountries: { default: () => [] },
     preferredCountries: { default: () => [] },
-    parseArg: {},
-    debounceDelay: { default: 300 }
+    parseArg: {}
   }, {
     "modelValue": {
       default: ""
@@ -27917,13 +27932,8 @@ const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
   setup(__props, { emit: __emit }) {
     const props2 = __props;
     const emit2 = __emit;
-    async function getIp() {
-      const apiData = sessionStorage.getItem("ipapi");
-      if (apiData) return JSON.parse(apiData);
-      const { data: data2 } = await axios$1.get("https://ipapi.co/json/");
-      sessionStorage.setItem("ipapi", JSON.stringify(data2));
-      return data2;
-    }
+    const open = vue.ref(false);
+    const dropdownOpenDirection = vue.ref("below");
     const defaultDropdownOptions = {
       hide: false,
       disabled: false,
@@ -27954,52 +27964,169 @@ const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
       ...defaultInputOptions,
       ...props2.inputOptions
     }));
-    let activeCountryCode = vue.ref();
-    let open = vue.ref(false);
-    let selectedIndex = vue.ref();
-    const dropdownOpenDirection = vue.ref("below");
-    const searchQuery = vue.ref("");
-    const activeCountry = vue.computed(
-      () => props2.allCountries.find(
-        (country) => {
-          var _a;
-          return country.iso2 === ((_a = activeCountryCode.value) == null ? void 0 : _a.toUpperCase());
-        }
-      )
-    );
-    const isPreferred = (country) => props2.preferredCountries.includes(country == null ? void 0 : country.iso2);
-    const filteredCountries = vue.computed(() => {
-      if (props2.onlyCountries.length > 0) {
-        return props2.allCountries.filter(
-          ({ iso2 }) => props2.onlyCountries.some((c2) => c2.toUpperCase() === iso2)
+    function useCountrySelection(props22, emit22) {
+      const activeCountryCode2 = vue.ref();
+      const selectedIndex2 = vue.ref();
+      const searchQuery2 = vue.ref("");
+      const activeCountry = vue.computed(() => {
+        var _a;
+        return (_a = props22.allCountries) == null ? void 0 : _a.find(
+          (country) => {
+            var _a2;
+            return country.iso2 === ((_a2 = activeCountryCode2.value) == null ? void 0 : _a2.toUpperCase());
+          }
         );
+      });
+      const filteredCountries = vue.computed(() => {
+        const countries = props22.allCountries || [];
+        const onlyCountries = props22.onlyCountries || [];
+        const excludeCountries = props22.excludeCountries || [];
+        if (onlyCountries.length > 0) {
+          return countries.filter(({ iso2 }) => onlyCountries.some((c2) => c2.toUpperCase() === iso2));
+        }
+        if (excludeCountries.length > 0) {
+          return countries.filter(
+            ({ iso2 }) => !excludeCountries.includes(iso2.toUpperCase()) && !excludeCountries.includes(iso2.toLowerCase())
+          );
+        }
+        return countries;
+      });
+      const sortedCountries2 = vue.computed(() => {
+        const preferredCountries = getCountries(props22.preferredCountries || []);
+        const countriesList = [...preferredCountries, ...filteredCountries.value];
+        const cleanInput = searchQuery2.value.replaceAll(
+          /[~`!#$%&*()+={};:'"<>.,\\/@-]/g,
+          ""
+        ).toLowerCase();
+        return countriesList.filter(
+          (c2) => new RegExp(cleanInput, "i").test(c2.name || "") || new RegExp(cleanInput, "i").test(c2.iso2 || "") || new RegExp(cleanInput, "i").test(c2.dialCode || "")
+        ).filter(Boolean);
+      });
+      const findCountry = (iso) => filteredCountries.value.find(
+        (country) => country.iso2 === iso.toUpperCase()
+      );
+      const findCountryByDialCode = (dialCode) => filteredCountries.value.find((country) => Number(country.dialCode) === dialCode);
+      function getCountries(list) {
+        const countryList = [];
+        list.forEach((countryCode) => {
+          const country = findCountry(countryCode);
+          if (country) countryList.push(country);
+        });
+        return countryList;
       }
-      if (props2.excludeCountries.length > 0) {
-        return props2.allCountries.filter(
-          ({ iso2 }) => !props2.excludeCountries.includes(iso2.toUpperCase()) && !props2.excludeCountries.includes(iso2.toLowerCase())
-        );
+      async function initializeCountry2() {
+        if (props22.defaultCountry) {
+          if (typeof props22.defaultCountry === "string") {
+            chooseCountry2(props22.defaultCountry);
+            return;
+          }
+          if (typeof props22.defaultCountry === "number") {
+            const country = findCountryByDialCode(props22.defaultCountry);
+            if (country) {
+              chooseCountry2(country.iso2);
+              return;
+            }
+          }
+        }
+        const fallbackCountry = sortedCountries2.value[0];
+        if (props22.autoDefaultCountry) {
+          try {
+            const res = (await getIp()).country;
+            chooseCountry2(res || activeCountryCode2.value);
+          } catch (error) {
+            console.warn(error);
+            chooseCountry2(fallbackCountry.iso2);
+          }
+        } else {
+          chooseCountry2(fallbackCountry.iso2);
+        }
       }
-      return props2.allCountries;
-    });
-    const sortedCountries = vue.computed(() => {
-      const preferredCountries = getCountries(props2.preferredCountries);
-      const countriesList = [...preferredCountries, ...filteredCountries.value];
-      const cleanInput = searchQuery.value.replaceAll(
-        // eslint-disable-next-line regexp/no-obscure-range
-        /[~`!#$%&*()+={};:'"<>.,/?-_]/g,
-        ""
+      function chooseCountry2(country) {
+        if (!country) return;
+        const parsedCountry = findCountry(country);
+        if (!parsedCountry) return;
+        activeCountryCode2.value = parsedCountry.iso2;
+        emit22("country-changed", parsedCountry);
+        open.value = false;
+      }
+      vue.watch(
+        () => activeCountry.value,
+        (value, oldValue) => {
+          if (!value && (oldValue == null ? void 0 : oldValue.iso2)) {
+            activeCountryCode2.value = oldValue.iso2;
+            return;
+          }
+          if (value == null ? void 0 : value.iso2) emit22("country-changed", value);
+        }
       );
-      return countriesList.filter(
-        (c2) => new RegExp(cleanInput, "i").test(c2.name || "") || new RegExp(cleanInput, "i").test(c2.iso2 || "") || new RegExp(cleanInput, "i").test(c2.dialCode || "")
-      ).filter(Boolean);
-    });
-    const parseArgs = vue.computed(() => ({
-      ...props2.parseArg,
-      defaultCountry: activeCountryCode.value
-    }));
+      return {
+        activeCountryCode: activeCountryCode2,
+        activeCountry,
+        selectedIndex: selectedIndex2,
+        searchQuery: searchQuery2,
+        sortedCountries: sortedCountries2,
+        chooseCountry: chooseCountry2,
+        initializeCountry: initializeCountry2,
+        findCountry,
+        findCountryByDialCode
+      };
+    }
+    function usePhoneNumberFormatting(props22, activeCountryCode2) {
+      const parseArgs = vue.computed(() => ({
+        ...props22.parseArg,
+        defaultCountry: activeCountryCode2.value
+      }));
+      function formatPhone2(val) {
+        var _a, _b, _c;
+        let phoneNumber = parsePhoneNumber(val, parseArgs.value);
+        if (!phoneNumber && val.startsWith("+")) {
+          const currentCountry = (_a = props22.allCountries) == null ? void 0 : _a.find((c2) => c2.iso2 === activeCountryCode2.value);
+          if (currentCountry) {
+            const { dialCode } = currentCountry;
+            const withoutDialCode = val.replace(new RegExp(`^\\+${dialCode}`), "");
+            phoneNumber = parsePhoneNumber(withoutDialCode, parseArgs.value);
+          }
+        }
+        if (!phoneNumber) {
+          const dialCode = ((_c = (_b = props22.allCountries) == null ? void 0 : _b.find(
+            (c2) => c2.iso2 === activeCountryCode2.value
+          )) == null ? void 0 : _c.dialCode) || "";
+          if (props22.mode === "INTERNATIONAL") return `+${dialCode}`;
+          return dialCode;
+        }
+        const formattedNumber = phoneNumber.format(props22.mode || "INTERNATIONAL");
+        if (props22.mode === "INTERNATIONAL") {
+          const countryCode = phoneNumber.countryCallingCode;
+          const { nationalNumber } = phoneNumber;
+          return `+${countryCode}${nationalNumber}`;
+        }
+        return formattedNumber.replaceAll(" ", "") || "";
+      }
+      return {
+        formatPhone: formatPhone2,
+        parseArgs
+      };
+    }
     const debouncedEmit = useDebounceFn((maybeFormatted) => {
       emit2("debounce", maybeFormatted);
-    }, props2.debounceDelay);
+    });
+    const {
+      activeCountryCode,
+      selectedIndex,
+      searchQuery,
+      sortedCountries,
+      chooseCountry,
+      initializeCountry
+    } = useCountrySelection(props2, emit2);
+    const { formatPhone } = usePhoneNumberFormatting(props2, activeCountryCode);
+    const isPreferred = (country) => props2.preferredCountries.includes(country == null ? void 0 : country.iso2) || false;
+    function reset() {
+      if (!sortedCountries.value || !activeCountryCode.value) return;
+      selectedIndex.value = sortedCountries.value.findIndex(
+        (c2) => c2.iso2 === activeCountryCode.value
+      );
+      open.value = false;
+    }
     const phone = vue.useModel(__props, "modelValue", {
       set: (value) => {
         let maybeFormatted = value;
@@ -28016,99 +28143,18 @@ const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
       },
       get: (value) => value
     });
-    function formatPhone(val) {
-      var _a;
-      const phoneNumber = parsePhoneNumber(val, parseArgs.value);
-      if (!phoneNumber) {
-        const dialCode = ((_a = sortedCountries.value.find((c2) => c2.iso2 === activeCountryCode.value)) == null ? void 0 : _a.dialCode) || "";
-        if (props2.mode === "INTERNATIONAL") return `+${dialCode}`;
-        return dialCode;
-      }
-      return phoneNumber.format(props2.mode).replaceAll(" ", "") || "";
-    }
-    vue.watch(
-      () => activeCountry.value,
-      (value, oldValue) => {
-        if (!value && (oldValue == null ? void 0 : oldValue.iso2)) {
-          activeCountryCode.value = oldValue.iso2;
-          return;
-        }
-        if (value == null ? void 0 : value.iso2) emit2("country-changed", value);
-      }
-    );
-    async function initializeCountry() {
-      if (props2.defaultCountry) {
-        if (typeof props2.defaultCountry === "string") {
-          chooseCountry(props2.defaultCountry);
-          return;
-        }
-        if (typeof props2.defaultCountry === "number") {
-          const country = findCountryByDialCode(props2.defaultCountry);
-          if (country) {
-            chooseCountry(country.iso2);
-            return;
-          }
-        }
-      }
-      const fallbackCountry = sortedCountries.value[0];
-      if (props2.autoDefaultCountry) {
-        try {
-          const res = (await getIp()).country;
-          chooseCountry(res || activeCountryCode.value);
-        } catch (error) {
-          console.warn(error);
-          chooseCountry(fallbackCountry.iso2);
-        }
-      } else {
-        chooseCountry(fallbackCountry.iso2);
-      }
-    }
-    vue.onMounted(initializeCountry);
-    const findCountry = (iso) => filteredCountries.value.find((country) => country.iso2 === iso.toUpperCase());
-    function getCountries(list) {
-      const countryList = [];
-      list.forEach((countryCode) => {
-        const country = findCountry(countryCode);
-        if (country) countryList.push(country);
-      });
-      return countryList;
-    }
-    function findCountryByDialCode(dialCode) {
-      return filteredCountries.value.find((country) => Number(country.dialCode) === dialCode);
-    }
-    const phoneDropdown = vue.ref();
-    function chooseCountry(country) {
-      var _a, _b;
-      if (!country) return;
-      const parsedCountry = findCountry(country);
-      if (!parsedCountry) return;
-      activeCountryCode.value = parsedCountry.iso2;
-      if (((_a = props2.inputOptions) == null ? void 0 : _a.showDialCode) && parsedCountry) {
-        phone.value = `+ ${parsedCountry.dialCode}`;
-        activeCountryCode.value = parsedCountry.iso2 || "";
-        return;
-      }
-      activeCountryCode.value = parsedCountry.iso2 || "";
-      (_b = phoneDropdown.value) == null ? void 0 : _b.hide();
-    }
     function onBlur() {
       emit2("blur");
     }
     function onFocus() {
       emit2("focus");
     }
-    function onEnter(e) {
+    function onEnter() {
       emit2("enter");
     }
     function onSpace() {
       emit2("space");
     }
-    function reset() {
-      selectedIndex.value = sortedCountries.value.findIndex(
-        (c2) => c2.iso2 === activeCountryCode.value
-      );
-      open.value = false;
-    }
     function handleInput(e) {
       const keyVal = e.key ?? "";
       if (keyVal.length > 1 || e.metaKey) return;
@@ -28116,6 +28162,14 @@ const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
       if (!hasBadChars) return;
       e.preventDefault();
     }
+    async function getIp() {
+      const apiData = sessionStorage.getItem("ipapi");
+      if (apiData) return JSON.parse(apiData);
+      const { data: data2 } = await axios$1.get("https://ipapi.co/json/");
+      sessionStorage.setItem("ipapi", JSON.stringify(data2));
+      return data2;
+    }
+    vue.onMounted(initializeCountry);
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock("div", {
         class: vue.normalizeClass(["bagel-input", { disabled: _ctx.disabled, [props2.class || ""]: true }])
@@ -28128,89 +28182,83 @@ const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
             tabindex: "-1",
             "aria-label": "Country Code Selector",
             "aria-haspopup": "listbox",
-            "aria-expanded": vue.unref(open),
+            "aria-expanded": open.value,
             onKeydown: [
               vue.withKeys(reset, ["esc"]),
               vue.withKeys(reset, ["tab"])
             ]
           }, [
-            !computedDropDownOptions.value.hide ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$V), {
-              key: 0,
-              ref_key: "phoneDropdown",
-              ref: phoneDropdown,
+            vue.createVNode(vue.unref(_sfc_main$V), {
+              shown: open.value,
+              "onUpdate:shown": _cache[1] || (_cache[1] = ($event) => open.value = $event),
               placement: "bottom-start",
-              disabled: computedDropDownOptions.value.disabled,
-              onHide: _cache[2] || (_cache[2] = ($event) => vue.isRef(open) ? open.value = false : open = false)
+              disabled: vue.unref(computedDropDownOptions).disabled
             }, {
               trigger: vue.withCtx(() => [
-                vue.createElementVNode("span", {
-                  class: "flex gap-05",
-                  onClick: _cache[0] || (_cache[0] = ($event) => vue.isRef(open) ? open.value = true : open = true)
-                }, [
+                vue.createElementVNode("span", _hoisted_2$e, [
                   vue.createVNode(vue.unref(Icon), {
-                    icon: vue.unref(open) ? "collapse_all" : "expand_all"
+                    icon: open.value ? "collapse_all" : "expand_all"
                   }, null, 8, ["icon"]),
-                  computedDropDownOptions.value.showFlags && vue.unref(activeCountryCode) ? (vue.openBlock(), vue.createBlock(vue.unref(Flag), {
+                  vue.unref(computedDropDownOptions).showFlags && vue.unref(activeCountryCode) ? (vue.openBlock(), vue.createBlock(vue.unref(Flag), {
                     key: 0,
                     country: vue.unref(activeCountryCode)
                   }, null, 8, ["country"])) : vue.createCommentVNode("", true)
                 ])
               ]),
               default: vue.withCtx(() => [
-                vue.createElementVNode("div", _hoisted_2$e, [
+                vue.createElementVNode("div", _hoisted_3$b, [
                   _ctx.searchable ? (vue.openBlock(), vue.createBlock(vue.unref(TextInput), {
                     key: 0,
-                    modelValue: searchQuery.value,
-                    "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => searchQuery.value = $event),
+                    modelValue: vue.unref(searchQuery),
+                    "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => vue.isRef(searchQuery) ? searchQuery.value = $event : null),
                     "aria-label": "Search by country name or country code",
                     placeholder: "Search",
                     icon: "search"
                   }, null, 8, ["modelValue"])) : vue.createCommentVNode("", true),
                   vue.createElementVNode("ul", {
-                    class: vue.normalizeClass(["overflow-y p-0", dropdownOpenDirection.value]),
-                    style: { "max-height": "400px" },
+                    class: vue.normalizeClass(["overflow-y p-0 max-h-300px", dropdownOpenDirection.value]),
                     role: "listbox"
                   }, [
-                    (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(sortedCountries.value, (pb, index2) => {
+                    (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(sortedCountries), (pb, index2) => {
                       return vue.openBlock(), vue.createElementBlock("li", {
                         key: pb.iso2 + isPreferred(pb),
                         role: "option",
                         class: "flex gap-075",
                         tabindex: "-1",
                         "aria-selected": vue.unref(activeCountryCode) === pb.iso2 && !isPreferred(pb),
-                        onClick: ($event) => chooseCountry(pb.iso2),
-                        onMousemove: ($event) => vue.isRef(selectedIndex) ? selectedIndex.value = index2 : selectedIndex = index2
+                        onClick: ($event) => vue.unref(chooseCountry)(pb.iso2),
+                        onMousemove: ($event) => selectedIndex.value = index2
                       }, [
-                        computedDropDownOptions.value.showFlags ? (vue.openBlock(), vue.createBlock(vue.unref(Flag), {
+                        vue.unref(computedDropDownOptions).showFlags ? (vue.openBlock(), vue.createBlock(vue.unref(Flag), {
                           key: 0,
                           country: pb.iso2
                         }, null, 8, ["country"])) : vue.createCommentVNode("", true),
-                        vue.createElementVNode("p", _hoisted_4$6, vue.toDisplayString(pb.name), 1),
-                        computedDropDownOptions.value.showDialCodeInList ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_5$6, " +" + vue.toDisplayString(pb.dialCode), 1)) : vue.createCommentVNode("", true)
-                      ], 40, _hoisted_3$b);
+                        vue.createElementVNode("p", _hoisted_5$6, vue.toDisplayString(pb.name), 1),
+                        vue.unref(computedDropDownOptions).showDialCodeInList ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_6$5, " +" + vue.toDisplayString(pb.dialCode), 1)) : vue.createCommentVNode("", true)
+                      ], 40, _hoisted_4$6);
                     }), 128))
                   ], 2)
                 ])
               ]),
               _: 1
-            }, 8, ["disabled"])) : vue.createCommentVNode("", true),
+            }, 8, ["shown", "disabled"]),
             vue.withDirectives(vue.createElementVNode("input", {
               id: _ctx.id,
-              "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => phone.value = $event),
+              "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => phone.value = $event),
               required: _ctx.required,
               placeholder: props2.placeholder || "Enter a phone number",
               disabled: _ctx.disabled,
               type: "tel",
               autocomplete: _ctx.autocomplete,
               class: "vti__input",
-              pattern: computedInputOptions.value.pattern,
-              minlength: computedInputOptions.value.minlength,
-              maxlength: computedInputOptions.value.maxlength,
-              name: computedInputOptions.value.name,
-              readonly: computedInputOptions.value.readonly,
-              tabindex: computedInputOptions.value.tabindex,
-              "aria-describedby": computedInputOptions.value["aria-describedby"],
-              style: vue.normalizeStyle(computedInputOptions.value.style),
+              pattern: vue.unref(computedInputOptions).pattern,
+              minlength: vue.unref(computedInputOptions).minlength,
+              maxlength: vue.unref(computedInputOptions).maxlength,
+              name: vue.unref(computedInputOptions).name,
+              readonly: vue.unref(computedInputOptions).readonly,
+              tabindex: vue.unref(computedInputOptions).tabindex,
+              "aria-describedby": vue.unref(computedInputOptions)["aria-describedby"],
+              style: vue.normalizeStyle(vue.unref(computedInputOptions).style),
               onBlur,
               onFocus,
               onKeyup: [
@@ -28218,7 +28266,7 @@ const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
                 vue.withKeys(onSpace, ["space"])
               ],
               onKeydown: handleInput
-            }, null, 44, _hoisted_6$5), [
+            }, null, 44, _hoisted_7$4), [
               [vue.vModelText, phone.value]
             ])
           ], 40, _hoisted_1$o)
@@ -28227,7 +28275,7 @@ const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const TelInput = /* @__PURE__ */ _export_sfc(_sfc_main$v, [["__scopeId", "data-v-492fcc54"]]);
+const TelInput = /* @__PURE__ */ _export_sfc(_sfc_main$v, [["__scopeId", "data-v-a77caf64"]]);
 const _hoisted_1$n = ["title"];
 const _hoisted_2$d = ["for"];
 const _hoisted_3$a = ["id", "title", "autocomplete", "type", "placeholder", "disabled", "required", "pattern"];
@@ -35431,7 +35479,7 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const Index = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-2976f0c9"]]);
+const Index = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-f204ab99"]]);
 const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
   __name: "Title",
   props: {
@@ -37269,6 +37317,37 @@ function timeAgo(date2, lang = "en") {
   }
   return selectedLang.justNow;
 }
+const formatMap = {
+  dd: { type: "day", format: "2-digit" },
+  ddd: { type: "weekday", format: "short" },
+  dddd: { type: "weekday", format: "long" },
+  mm: { type: "month", format: "2-digit" },
+  mmm: { type: "month", format: "short" },
+  mmmm: { type: "month", format: "long" },
+  yy: { type: "year", format: "2-digit" },
+  yyyy: { type: "year", format: "numeric" },
+  HH: { type: "hour", format: "2-digit" },
+  hh: { type: "hour", format: "2-digit" },
+  MM: { type: "minute", format: "2-digit" },
+  ss: { type: "second", format: "2-digit" },
+  ampm: { type: "dayPeriod", format: "short" }
+};
+function formatDate(date2, format2 = "dd.mm.yy") {
+  if (!date2) return "";
+  try {
+    const formatParts = format2.split(/[.\s:]/);
+    const formatObject = {};
+    for (const part of formatParts) {
+      const formatInfo = formatMap[part];
+      if (!formatInfo) continue;
+      formatObject[formatInfo.type] = formatInfo.format;
+    }
+    const d2 = typeof date2 === "string" ? new Date(date2) : date2;
+    return d2.toLocaleDateString("he-IL", formatObject);
+  } catch (error) {
+    return "";
+  }
+}
 exports.Accordion = _sfc_main$1m;
 exports.AccordionItem = AccordionItem;
 exports.AddressSearch = _sfc_main$1k;
@@ -37287,7 +37366,7 @@ exports.Carousel = Carousel;
 exports.CheckInput = CheckInput;
 exports.Checkbox = Checkbox;
 exports.CodeEditor = CodeEditor;
-exports.ColorPicker = _sfc_main$N;
+exports.ColorInput = _sfc_main$N;
 exports.DataPreview = DataPreview;
 exports.DataTable = DataTable;
 exports.DateInput = DateInput;
@@ -37358,6 +37437,7 @@ exports.classify = classify;
 exports.copyText = copyText;
 exports.debounce = debounce;
 exports.denullify = denullify;
+exports.formatDate = formatDate;
 exports.formatString = formatString;
 exports.getFallbackSchema = getFallbackSchema;
 exports.getNestedValue = getNestedValue;