@bagelink/vue 0.0.1204 → 0.0.1214

package/dist/components/DataPreview.vue.d.ts

@@ -1,6 +1,7 @@
 import { TableSchemaProps } from '../types/TableSchema';
 declare const _default: <T extends Record<string, any>>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{} & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, never> & (TableSchemaProps<T> & {
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{} & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, never> & (Omit<TableSchemaProps<T>, "data"> & {
+        data: T;
         includeUnset?: boolean;
     }) & Partial<{}>> & import('vue').PublicProps;
     expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;

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

@@ -1 +1 @@
-{"version":3,"file":"DataPreview.vue.d.ts","sourceRoot":"","sources":["../../src/components/DataPreview.vue"],"names":[],"mappings":"AAoEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAA;yBAK3C,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,eAChC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,cAClD,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,iBAC5F,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC;WAqF1D,mBAAmB,CAAC;uBAnF8B,OAAO;oBAmF6B,CAAC,4BAA2B;oBACzG,OAAO,KAAK,EAAE,gBAAgB,CAAC,EAAE,CAAC,GAAG,IAAI;WAClD,GAAG;;UAEJ,EAAE;OAGG,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,OAAO,CAAC,OAAO,WAAW,CAAC,CAAA;CAAE;AA/FzE,wBA+F4E;AAC5E,KAAK,mBAAmB,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}
+{"version":3,"file":"DataPreview.vue.d.ts","sourceRoot":"","sources":["../../src/components/DataPreview.vue"],"names":[],"mappings":"AAoEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAA;yBAK3C,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,eAChC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,cAClD,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,iBAC5F,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC;WAqF1D,mBAAmB,CAAC;cAnFmC,CAAC;uBAAiB,OAAO;oBAmFM,CAAC,4BAA2B;oBACzG,OAAO,KAAK,EAAE,gBAAgB,CAAC,EAAE,CAAC,GAAG,IAAI;WAClD,GAAG;;UAEJ,EAAE;OAGG,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,OAAO,CAAC,OAAO,WAAW,CAAC,CAAA;CAAE;AA/FzE,wBA+F4E;AAC5E,KAAK,mBAAmB,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"NumberInput.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/form/inputs/NumberInput.vue"],"names":[],"mappings":"AAkMA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAI7C,KAAK,YAAY,GAAG,SAAS,GAAG,UAAU,GAAG,YAAY,CAAA;AAEzD,UAAU,gBAAgB;IACzB,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC5B,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,SAAS,CAAC,EAAE,QAAQ,CAAA;IACpB,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,MAAM,CAAC,EAAE,YAAY,CAAA;IACrB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,OAAO,CAAC,EAAE,MAAM,CAAA;CAChB;;;;;;AAuTD,wBAQG"}
+{"version":3,"file":"NumberInput.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/form/inputs/NumberInput.vue"],"names":[],"mappings":"AA6NA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAI7C,KAAK,YAAY,GAAG,SAAS,GAAG,UAAU,GAAG,YAAY,CAAA;AAEzD,UAAU,gBAAgB;IACzB,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC5B,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,SAAS,CAAC,EAAE,QAAQ,CAAA;IACpB,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,MAAM,CAAC,EAAE,YAAY,CAAA;IACrB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,OAAO,CAAC,EAAE,MAAM,CAAA;CAChB;;;;;;AAmVD,wBAQG"}

package/dist/index.cjs

@@ -748,8 +748,8 @@ const _sfc_main$Z = /* @__PURE__ */ vue.defineComponent({
     const emit2 = __emit;
     const ANIMATION_TIMINGS = {
       TOUCH: 150,
-      MOBILE: 300,
-      DESKTOP: 400,
+      MOBILE: 420,
+      DESKTOP: 840,
       MAX_DURATION: 300,
       BASE_DURATION: 150,
       DURATION_PER_PANEL: 50
@@ -1182,7 +1182,7 @@ const _sfc_main$Z = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const Carousel = /* @__PURE__ */ _export_sfc(_sfc_main$Z, [["__scopeId", "data-v-3a1530dc"]]);
+const Carousel = /* @__PURE__ */ _export_sfc(_sfc_main$Z, [["__scopeId", "data-v-d0b0c027"]]);
 function _isPlaceholder(a2) {
   return a2 != null && typeof a2 === "object" && a2["@@functional/placeholder"] === true;
 }
@@ -7506,12 +7506,12 @@ const _hoisted_1$M = { class: "data-preview" };
 const _sfc_main$X = /* @__PURE__ */ vue.defineComponent({
   __name: "DataPreview",
   props: {
-    data: {},
     schema: { type: Function },
     showFields: {},
     useServerSort: { type: Boolean },
     selectable: { type: Boolean },
     onLastItemVisible: { type: Function },
+    data: {},
     includeUnset: { type: Boolean }
   },
   setup(__props) {
@@ -7544,7 +7544,7 @@ const _sfc_main$X = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const DataPreview = /* @__PURE__ */ _export_sfc(_sfc_main$X, [["__scopeId", "data-v-ff265953"]]);
+const DataPreview = /* @__PURE__ */ _export_sfc(_sfc_main$X, [["__scopeId", "data-v-550fe546"]]);
 function useTableSelection(options) {
   const allSelectorEl = vue.ref();
   const computedSelectedItems = vue.computed(() => options.selectedItems.value);
@@ -21677,38 +21677,58 @@ const _sfc_main$G = /* @__PURE__ */ vue.defineComponent({
     helptext: {},
     layout: {},
     center: { type: Boolean },
-    padZero: {}
+    padZero: { default: 1 }
   },
   emits: ["update:modelValue"],
   setup(__props, { emit: __emit }) {
     const emit2 = __emit;
     let numberValue = vue.ref(Number.parseFloat(`${__props.modelValue}`) || void 0);
     const btnLayouts = ["horizontal", "vertical"];
-    const canAdd = vue.computed(() => !(__props.max !== void 0 && (numberValue.value || 0) + __props.step > __props.max));
-    const canDecrement = vue.computed(() => !(__props.min !== void 0 && (numberValue.value || 0 - __props.step) < __props.min));
+    function add2(...numbers) {
+      var _a2;
+      const numArr = numbers.map((n2) => n2 || 0);
+      const precision = ((_a2 = __props.step.toString().split(".")[1]) == null ? void 0 : _a2.length) || 0;
+      return Number.parseFloat(numArr.reduce((acc, curr) => acc + curr, 0).toFixed(precision));
+    }
+    function subtract(...numbers) {
+      var _a2;
+      const numArr = numbers.map((n2) => n2 || 0);
+      const firstNum = numArr.shift() || 0;
+      const precision = ((_a2 = __props.step.toString().split(".")[1]) == null ? void 0 : _a2.length) || 0;
+      return Number.parseFloat(numArr.reduce((acc, curr) => acc - curr, firstNum).toFixed(precision));
+    }
+    const canAdd = vue.computed(() => !(__props.max !== void 0 && add2(numberValue.value, __props.step) <= __props.max));
+    const canDecrement = vue.computed(() => __props.min === void 0 || subtract(numberValue.value, __props.step) >= __props.min);
     function increment() {
       if (!canAdd.value) return;
-      numberValue.value = (numberValue.value || 0) + __props.step;
+      numberValue.value = add2(numberValue.value || 0, __props.step);
       emit2("update:modelValue", numberValue.value);
     }
     function decrement() {
       if (!canDecrement.value) return;
-      numberValue.value = (numberValue.value || 0) - __props.step;
+      numberValue.value = subtract(numberValue.value || 0, __props.step);
       emit2("update:modelValue", numberValue.value);
     }
     function formatNumber2(num) {
-      let formatted = num.toString();
-      if (__props.padZero && __props.padZero > 0) {
-        formatted = formatted.padStart(__props.padZero, "0");
-      }
-      return formatted.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+      if (Number.isNaN(num)) return "";
+      const formatter = new Intl.NumberFormat("en-US", {
+        minimumFractionDigits: 0,
+        maximumFractionDigits: 20,
+        useGrouping: true
+      });
+      const formattedNum = formatter.format(num);
+      const [integerPart, decimalPart] = formattedNum.split(".");
+      const padding = __props.padZero && __props.padZero > integerPart.replace(/,/g, "").length ? "0".repeat(__props.padZero - integerPart.replace(/,/g, "").length) : "";
+      return decimalPart ? `${padding}${integerPart}.${decimalPart}` : `${padding}${integerPart}`;
     }
     let formattedValue = vue.ref("");
     function inputHandler() {
-      const numeric = formattedValue.value.replace(/[^\d.-]/g, "");
-      if (numeric === "" || numeric === "-" || numeric === "." || numeric === "-." || numeric.endsWith(".")) return;
+      let numeric = formattedValue.value.replace(/[^\d.-]/g, "");
+      if (numeric === "-." || numeric.endsWith(".")) return;
+      const emptyValue = ["", "-", "."].includes(numeric);
+      if (emptyValue) numeric = `${__props.min}`;
       numberValue.value = Number.parseFloat(numeric);
-      formattedValue.value = formatNumber2(numberValue.value);
+      formattedValue.value = emptyValue ? "" : formatNumber2(numberValue.value);
       emit2("update:modelValue", numberValue.value);
     }
     vue.watch(() => numberValue.value, () => {
@@ -21820,7 +21840,7 @@ const _sfc_main$G = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const NumberInput = /* @__PURE__ */ _export_sfc(_sfc_main$G, [["__scopeId", "data-v-e3916f73"]]);
+const NumberInput = /* @__PURE__ */ _export_sfc(_sfc_main$G, [["__scopeId", "data-v-d8856711"]]);
 const _hoisted_1$y = ["value", "autofocus", "onKeydown", "onPaste"];
 const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
   __name: "OTP",

package/dist/index.mjs

@@ -746,8 +746,8 @@ const _sfc_main$Z = /* @__PURE__ */ defineComponent({
     const emit2 = __emit;
     const ANIMATION_TIMINGS = {
       TOUCH: 150,
-      MOBILE: 300,
-      DESKTOP: 400,
+      MOBILE: 420,
+      DESKTOP: 840,
       MAX_DURATION: 300,
       BASE_DURATION: 150,
       DURATION_PER_PANEL: 50
@@ -1180,7 +1180,7 @@ const _sfc_main$Z = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const Carousel = /* @__PURE__ */ _export_sfc(_sfc_main$Z, [["__scopeId", "data-v-3a1530dc"]]);
+const Carousel = /* @__PURE__ */ _export_sfc(_sfc_main$Z, [["__scopeId", "data-v-d0b0c027"]]);
 function _isPlaceholder(a2) {
   return a2 != null && typeof a2 === "object" && a2["@@functional/placeholder"] === true;
 }
@@ -7504,12 +7504,12 @@ const _hoisted_1$M = { class: "data-preview" };
 const _sfc_main$X = /* @__PURE__ */ defineComponent({
   __name: "DataPreview",
   props: {
-    data: {},
     schema: { type: Function },
     showFields: {},
     useServerSort: { type: Boolean },
     selectable: { type: Boolean },
     onLastItemVisible: { type: Function },
+    data: {},
     includeUnset: { type: Boolean }
   },
   setup(__props) {
@@ -7542,7 +7542,7 @@ const _sfc_main$X = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const DataPreview = /* @__PURE__ */ _export_sfc(_sfc_main$X, [["__scopeId", "data-v-ff265953"]]);
+const DataPreview = /* @__PURE__ */ _export_sfc(_sfc_main$X, [["__scopeId", "data-v-550fe546"]]);
 function useTableSelection(options) {
   const allSelectorEl = ref();
   const computedSelectedItems = computed(() => options.selectedItems.value);
@@ -21675,38 +21675,58 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
     helptext: {},
     layout: {},
     center: { type: Boolean },
-    padZero: {}
+    padZero: { default: 1 }
   },
   emits: ["update:modelValue"],
   setup(__props, { emit: __emit }) {
     const emit2 = __emit;
     let numberValue = ref(Number.parseFloat(`${__props.modelValue}`) || void 0);
     const btnLayouts = ["horizontal", "vertical"];
-    const canAdd = computed(() => !(__props.max !== void 0 && (numberValue.value || 0) + __props.step > __props.max));
-    const canDecrement = computed(() => !(__props.min !== void 0 && (numberValue.value || 0 - __props.step) < __props.min));
+    function add2(...numbers) {
+      var _a2;
+      const numArr = numbers.map((n2) => n2 || 0);
+      const precision = ((_a2 = __props.step.toString().split(".")[1]) == null ? void 0 : _a2.length) || 0;
+      return Number.parseFloat(numArr.reduce((acc, curr) => acc + curr, 0).toFixed(precision));
+    }
+    function subtract(...numbers) {
+      var _a2;
+      const numArr = numbers.map((n2) => n2 || 0);
+      const firstNum = numArr.shift() || 0;
+      const precision = ((_a2 = __props.step.toString().split(".")[1]) == null ? void 0 : _a2.length) || 0;
+      return Number.parseFloat(numArr.reduce((acc, curr) => acc - curr, firstNum).toFixed(precision));
+    }
+    const canAdd = computed(() => !(__props.max !== void 0 && add2(numberValue.value, __props.step) <= __props.max));
+    const canDecrement = computed(() => __props.min === void 0 || subtract(numberValue.value, __props.step) >= __props.min);
     function increment() {
       if (!canAdd.value) return;
-      numberValue.value = (numberValue.value || 0) + __props.step;
+      numberValue.value = add2(numberValue.value || 0, __props.step);
       emit2("update:modelValue", numberValue.value);
     }
     function decrement() {
       if (!canDecrement.value) return;
-      numberValue.value = (numberValue.value || 0) - __props.step;
+      numberValue.value = subtract(numberValue.value || 0, __props.step);
       emit2("update:modelValue", numberValue.value);
     }
     function formatNumber2(num) {
-      let formatted = num.toString();
-      if (__props.padZero && __props.padZero > 0) {
-        formatted = formatted.padStart(__props.padZero, "0");
-      }
-      return formatted.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+      if (Number.isNaN(num)) return "";
+      const formatter = new Intl.NumberFormat("en-US", {
+        minimumFractionDigits: 0,
+        maximumFractionDigits: 20,
+        useGrouping: true
+      });
+      const formattedNum = formatter.format(num);
+      const [integerPart, decimalPart] = formattedNum.split(".");
+      const padding = __props.padZero && __props.padZero > integerPart.replace(/,/g, "").length ? "0".repeat(__props.padZero - integerPart.replace(/,/g, "").length) : "";
+      return decimalPart ? `${padding}${integerPart}.${decimalPart}` : `${padding}${integerPart}`;
     }
     let formattedValue = ref("");
     function inputHandler() {
-      const numeric = formattedValue.value.replace(/[^\d.-]/g, "");
-      if (numeric === "" || numeric === "-" || numeric === "." || numeric === "-." || numeric.endsWith(".")) return;
+      let numeric = formattedValue.value.replace(/[^\d.-]/g, "");
+      if (numeric === "-." || numeric.endsWith(".")) return;
+      const emptyValue = ["", "-", "."].includes(numeric);
+      if (emptyValue) numeric = `${__props.min}`;
       numberValue.value = Number.parseFloat(numeric);
-      formattedValue.value = formatNumber2(numberValue.value);
+      formattedValue.value = emptyValue ? "" : formatNumber2(numberValue.value);
       emit2("update:modelValue", numberValue.value);
     }
     watch(() => numberValue.value, () => {
@@ -21818,7 +21838,7 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const NumberInput = /* @__PURE__ */ _export_sfc(_sfc_main$G, [["__scopeId", "data-v-e3916f73"]]);
+const NumberInput = /* @__PURE__ */ _export_sfc(_sfc_main$G, [["__scopeId", "data-v-d8856711"]]);
 const _hoisted_1$y = ["value", "autofocus", "onKeydown", "onPaste"];
 const _sfc_main$F = /* @__PURE__ */ defineComponent({
   __name: "OTP",

package/dist/style.css

@@ -356,13 +356,13 @@ display: block;
 	padding: 0;
 }
 
-.BglCarousel[data-v-3a1530dc] {
+.BglCarousel[data-v-d0b0c027] {
 	position: relative;
 	width: 100%;
 	overflow: hidden;
 	touch-action: pan-y pinch-zoom; /* Allow vertical scrolling */
 }
-.bgl-slider[data-v-3a1530dc] {
+.bgl-slider[data-v-d0b0c027] {
 	display: flex;
 	position: relative;
 	width: 100%;
@@ -375,26 +375,26 @@ display: block;
 	-webkit-user-select: none;
 	user-select: none;
 }
-.bgl-slider[data-v-3a1530dc] > * {
+.bgl-slider[data-v-d0b0c027] > * {
 	flex: 0 0 calc((100% - (var(--item-count) - 1) * 1%) / var(--item-count));
 	width: calc((100% - (var(--item-count) - 1) * 1%) / var(--item-count));
 	min-width: calc((100% - (var(--item-count) - 1) * 1%) / var(--item-count));
 	position: relative;
 	overflow: hidden;
 }
-.bgl-slider.slides-1[data-v-3a1530dc] > * {
+.bgl-slider.slides-1[data-v-d0b0c027] > * {
 	flex: 0 0 100%;
 	width: 100%;
 	min-width: 100%;
 }
-.dragging .bgl-slider[data-v-3a1530dc] > * {
+.dragging .bgl-slider[data-v-d0b0c027] > * {
 	pointer-events: none;
 	user-select: none;
 }
-.autoHeight[data-v-3a1530dc] {
+.autoHeight[data-v-d0b0c027] {
 	transition: height ease 0.7s;
 }
-.dots[data-v-3a1530dc] {
+.dots[data-v-d0b0c027] {
 	display: flex;
 	justify-content: center;
 	align-items: center;
@@ -402,7 +402,7 @@ display: block;
 	margin-top: 1rem;
 	gap: 8px;
 }
-.dot[data-v-3a1530dc] {
+.dot[data-v-d0b0c027] {
 	height: 10px;
 	width: 10px;
 	border-radius: 50%;
@@ -411,10 +411,10 @@ display: block;
 	transition: opacity 0.3s ease;
 	cursor: pointer;
 }
-.dot[data-v-3a1530dc]:hover {
+.dot[data-v-d0b0c027]:hover {
 	opacity: 0.6;
 }
-.dot.current[data-v-3a1530dc] {
+.dot.current[data-v-d0b0c027] {
 	opacity: 0.8;
 }
 
@@ -453,23 +453,23 @@ display: block;
 }
 }
 
-.data-preview[data-v-ff265953] {
+.data-preview[data-v-550fe546] {
 	display: flex;
 	flex-direction: column;
 	gap: 0.5rem;
 }
-.preview-field[data-v-ff265953] {
+.preview-field[data-v-550fe546] {
 	display: flex;
 	flex-direction: row;
 	align-items: center;
 	gap: 0.5rem;
 }
-.field-label[data-v-ff265953] {
+.field-label[data-v-550fe546] {
 	font-size: 0.8rem;
 	color: var(--bgl-black-tint);
 	font-weight: 500;
 }
-.field-value[data-v-ff265953] {
+.field-value[data-v-550fe546] {
 	font-size: 0.95rem;
 }
 
@@ -1241,14 +1241,14 @@ pre code.hljs{
 	direction: ltr;
 }
 
-.txtInputIconStart .iconStart[data-v-e3916f73] {
+.txtInputIconStart .iconStart[data-v-d8856711] {
 	color: var(--input-color);
 	position: absolute;
     inset-inline-start:calc(var(--input-height) / 3 - 0.25rem);
 	margin-top: calc(var(--input-height) / 2 );
 	line-height: 0;
 }
-.textInputSpinnerWrap .spinner[data-v-e3916f73] {
+.textInputSpinnerWrap .spinner[data-v-d8856711] {
 	color: var(--input-color);
 	position: absolute;
 	inset-inline-end: 0;
@@ -1258,18 +1258,18 @@ pre code.hljs{
 	flex-direction: column;
 	gap: 0;
 }
-.top-bgl-ctrl-num-btn[data-v-e3916f73]{
+.top-bgl-ctrl-num-btn[data-v-d8856711]{
 	margin-top: calc(var(--input-height) / 10) !important;
 }
-.bgl-ctrl-num-btn[data-v-e3916f73]{
+.bgl-ctrl-num-btn[data-v-d8856711]{
 	height: calc(var(--input-height) / 2.5) !important;
 	isolation: isolate;
 }
-.bgl-big-ctrl-num-btn[data-v-e3916f73]{
+.bgl-big-ctrl-num-btn[data-v-d8856711]{
 	width: 100% !important;
 	isolation: isolate;
 }
-.bgl-number-input[data-v-e3916f73]{
+.bgl-number-input[data-v-d8856711]{
 	padding-inline-end: 1.75rem !important;
 }
 
@@ -5809,6 +5809,10 @@ to {
 }.w-auto,
 .w-a {
     width: auto !important;
+}.max-width-none {
+    max-width: none !important;
+}.max-height-none {
+    max-height: none !important;
 }.h-auto,
 .h-a {
     height: auto !important;
@@ -9523,6 +9527,14 @@ to {
         width: auto !important;
     }
 
+    .m_max-width-none {
+        max-width: none !important;
+    }
+
+    .m_max-height-none {
+        max-height: none !important;
+    }
+
     .m_h-auto,
     .m_h-a {
         height: auto !important;

package/package.json

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

package/src/components/Carousel.vue

@@ -18,8 +18,8 @@ const emit = defineEmits(['update:index'])
 // Constants
 const ANIMATION_TIMINGS = {
 	TOUCH: 150,
-	MOBILE: 300,
-	DESKTOP: 400,
+	MOBILE: 420,
+	DESKTOP: 840,
 	MAX_DURATION: 300,
 	BASE_DURATION: 150,
 	DURATION_PER_PANEL: 50,

package/src/components/DataPreview.vue

@@ -6,7 +6,7 @@ import { computed, useSlots } from 'vue'
 import { useSchemaField } from '../composables/useSchemaField'
 import { useTableData } from './DataTable/useTableData'
 
-const props = defineProps<TableSchemaProps<T> & { includeUnset?: boolean }>()
+const props = defineProps<Omit<TableSchemaProps<T>, 'data'> & { data: T, includeUnset?: boolean }>()
 const slots = useSlots() as Slots & Record<string, (props: { row: T, field: BaseBagelField<T> }) => any>
 
 const data = computed(() => Array.isArray(props.data) ? props.data : [props.data])

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

@@ -39,7 +39,7 @@ const {
 	helptext,
 	layout,
 	id,
-	padZero,
+	padZero = 1,
 } = defineProps<NumberInputProps>()
 
 const emit = defineEmits(['update:modelValue'])
@@ -48,38 +48,66 @@ let numberValue = $ref(Number.parseFloat(`${modelValue}`) || undefined)
 
 const btnLayouts: NumberLayout[] = ['horizontal', 'vertical']
 
-const canAdd = $computed(() => !(max !== undefined && ((numberValue || 0) + step) > max))
-const canDecrement = $computed(() => !(min !== undefined && (numberValue || 0 - step) < min))
+function add(...numbers: (number | undefined)[]) {
+	const numArr: number[] = numbers.map(n => n || 0)
+	const precision = step.toString().split('.')[1]?.length || 0
+	return Number.parseFloat(numArr.reduce((acc, curr) => acc + curr, 0).toFixed(precision))
+}
+
+function subtract(...numbers: (number | undefined)[]) {
+	const numArr: number[] = numbers.map(n => n || 0)
+	const firstNum = numArr.shift() || 0
+	const precision = step.toString().split('.')[1]?.length || 0
+	return Number.parseFloat(numArr.reduce((acc, curr) => acc - curr, firstNum).toFixed(precision))
+}
+
+const canAdd = $computed(() => !(max !== undefined && add(numberValue, step) <= max))
+const canDecrement = $computed(() => min === undefined || subtract(numberValue, step) >= min)
 
 // Methods
 function increment() {
 	if (!canAdd) return
-	numberValue = (numberValue || 0) + step
+	numberValue = add(numberValue || 0, step)
 	emit('update:modelValue', numberValue)
 }
 
 function decrement() {
 	if (!canDecrement) return
-	numberValue = (numberValue || 0) - step
+	numberValue = subtract(numberValue || 0, step)
 	emit('update:modelValue', numberValue)
 }
 
 function formatNumber(num: number) {
-	let formatted = num.toString()
-	if (padZero && padZero > 0) {
-		formatted = formatted.padStart(padZero, '0')
-	}
-	// eslint-disable-next-line regexp/no-unused-capturing-group
-	return formatted.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+	if (Number.isNaN(num)) return ''
+	const formatter = new Intl.NumberFormat('en-US', {
+		minimumFractionDigits: 0,
+		maximumFractionDigits: 20,
+		useGrouping: true
+	})
+
+	const formattedNum = formatter.format(num)
+	const [integerPart, decimalPart] = formattedNum.split('.')
+
+	// Add padding zeros if needed
+	const padding = padZero && padZero > integerPart.replace(/,/g, '').length
+		? '0'.repeat(padZero - integerPart.replace(/,/g, '').length)
+		: ''
+
+	return decimalPart
+		? `${padding}${integerPart}.${decimalPart}`
+		: `${padding}${integerPart}`
 }
 
 let formattedValue = $ref('')
-
 function inputHandler() {
-	const numeric = formattedValue.replace(/[^\d.-]/g, '')
-	if (numeric === '' || numeric === '-' || numeric === '.' || numeric === '-.' || numeric.endsWith('.')) return
+	let numeric = formattedValue.replace(/[^\d.-]/g, '')
+	if (numeric === '-.' || numeric.endsWith('.')) return
+	const emptyValue = ['', '-', '.'].includes(numeric)
+
+	if (emptyValue) numeric = `${min}`
+
 	numberValue = Number.parseFloat(numeric)
-	formattedValue = formatNumber(numberValue)
+	formattedValue = emptyValue ? '' : formatNumber(numberValue)
 	emit('update:modelValue', numberValue)
 }
 
@@ -108,7 +136,6 @@ watch(() => modelValue, (newVal) => {
 			</label>
 			<div class="gap-025" :class="{ 'column flex': layout === 'vertical', 'flex': layout === 'horizontal' }">
 				<Btn v-if="layout && btnLayouts.includes(layout)" flat icon="add" class="radius" :class="[{ 'bgl-big-ctrl-num-btn': layout === 'vertical' }]" tabindex="-1" @click="increment" />
-
 				<input
 					:id
 					v-model.trim="formattedValue"

package/src/styles/layout.css

@@ -2860,6 +2860,14 @@
     width: auto !important;
 }
 
+.max-width-none {
+    max-width: none !important;
+}
+
+.max-height-none {
+    max-height: none !important;
+}
+
 .h-auto,
 .h-a {
     height: auto !important;

package/src/styles/mobilLayout.css

@@ -2151,6 +2151,14 @@
         width: auto !important;
     }
 
+    .m_max-width-none {
+        max-width: none !important;
+    }
+
+    .m_max-height-none {
+        max-height: none !important;
+    }
+
     .m_h-auto,
     .m_h-a {
         height: auto !important;