@bagelink/vue 0.0.1058 → 0.0.1062

package/dist/components/form/BglField.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BglField.vue.d.ts","sourceRoot":"","sources":["../../../src/components/form/BglField.vue"],"names":[],"mappings":"AAAA,OA2IO,EAIN,KAAK,KAAK,EAYV,MAAM,eAAe,CAAA;yBAML,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;WA6KxD,mBAAmB,CAAC;;;eAzKtB,KAAK,CAAC,CAAC,CAAC;kBACL,MAAM;qBACH,GAAG;qBACH,MAAM;KAsKmG,CAAC,4BAA2B;oBAChI,OAAO,KAAK,EAAE,gBAAgB,CAAC,EAAE,CAAC,GAAG,IAAI;WAClD,GAAG;;;OAKD,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,OAAO,CAAC,OAAO,WAAW,CAAC,CAAA;CAAE;AAvLzE,wBAuL4E;AAC5E,KAAK,mBAAmB,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}
+{"version":3,"file":"BglField.vue.d.ts","sourceRoot":"","sources":["../../../src/components/form/BglField.vue"],"names":[],"mappings":"AAAA,OAqIO,EAIN,KAAK,KAAK,EAYV,MAAM,eAAe,CAAA;yBAML,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;WAuKxD,mBAAmB,CAAC;;;eAnKtB,KAAK,CAAC,CAAC,CAAC;kBACL,MAAM;qBACH,GAAG;qBACH,MAAM;KAgKmG,CAAC,4BAA2B;oBAChI,OAAO,KAAK,EAAE,gBAAgB,CAAC,EAAE,CAAC,GAAG,IAAI;WAClD,GAAG;;;OAKD,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,OAAO,CAAC,OAAO,WAAW,CAAC,CAAA;CAAE;AAjLzE,wBAiL4E;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":"AA2KA,OAAO,EAAQ,KAAK,aAAa,EAAO,MAAM,eAAe,CAAA;AAK7D,KAAK,YAAY,GAAG,SAAS,GAAG,UAAU,GAAG,YAAY,CAAA;AAEzD,UAAU,gBAAgB;IACzB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,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,aAAa,CAAA;IACzB,IAAI,CAAC,EAAE,aAAa,CAAA;IACpB,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;CAChB;;;;;;AAsRD,wBAQG"}
+{"version":3,"file":"NumberInput.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/form/inputs/NumberInput.vue"],"names":[],"mappings":"AA2KA,OAAO,EAAQ,KAAK,aAAa,EAAO,MAAM,eAAe,CAAA;AAK7D,KAAK,YAAY,GAAG,SAAS,GAAG,UAAU,GAAG,YAAY,CAAA;AAEzD,UAAU,gBAAgB;IACzB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,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,aAAa,CAAA;IACzB,IAAI,CAAC,EAAE,aAAa,CAAA;IACpB,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;CAChB;;;;;;AA0RD,wBAQG"}

package/dist/index.cjs

@@ -9976,7 +9976,7 @@ const _sfc_main$S = /* @__PURE__ */ vue.defineComponent({
   setup(__props, { emit: __emit }) {
     const props2 = __props;
     const emit2 = __emit;
-    const formState = vue.inject(FORM_STATE_KEY);
+    const formState = vue.inject(FORM_STATE_KEY) ?? provideBagelFormState(props2.modelValue);
     const customAttrs = vue.ref({});
     const is4 = vue.computed(() => {
       if (props2.field.$el === "text") return TextInput;
@@ -10000,54 +10000,49 @@ const _sfc_main$S = /* @__PURE__ */ vue.defineComponent({
     const fieldData = vue.computed({
       get: () => {
         if (!props2.fieldID) return props2.field.defaultValue ?? (props2.field.$el === "form" ? {} : "");
-        const value = formState == null ? void 0 : formState.getFieldData(props2.fieldID);
+        const value = formState.getFieldData(props2.fieldID);
         if (props2.field.$el === "form" && !value) return {};
         return value ?? "";
       },
       set: (val) => {
         if (!props2.fieldID) return;
-        const currentValue = formState == null ? void 0 : formState.getFieldData(props2.fieldID);
+        const currentValue = formState.getFieldData(props2.fieldID);
         if (JSON.stringify(val) === JSON.stringify(currentValue)) return;
         emit2("update:modelValue", val);
         if (props2.field.onUpdate) {
           props2.field.onUpdate(val, currentValue);
         }
-        formState == null ? void 0 : formState.updateField(props2.fieldID, val);
+        formState.updateField(props2.fieldID, val);
       }
     });
     const vIf = vue.computed(() => {
       if (props2.field["v-if"] === void 0 && props2.field.vIf === void 0) return true;
       if (typeof props2.field["v-if"] === "boolean" || typeof props2.field.vIf === "boolean") return props2.field["v-if"];
       if (typeof props2.field["v-if"] === "string" || typeof props2.field.vIf === "string") return true;
-      if (typeof props2.field["v-if"] === "function") return props2.field["v-if"](fieldData.value, formState == null ? void 0 : formState.data.value);
-      if (typeof props2.field.vIf === "function") return props2.field.vIf(fieldData.value, formState == null ? void 0 : formState.data.value);
+      if (typeof props2.field["v-if"] === "function") return props2.field["v-if"](fieldData.value, formState.data.value);
+      if (typeof props2.field.vIf === "function") return props2.field.vIf(fieldData.value, formState.data.value);
       return true;
     });
-    const computedFieldData = vue.computed(
+    vue.computed(
       () => {
         var _a2, _b;
-        return ((_b = (_a2 = props2.field).transform) == null ? void 0 : _b.call(_a2, fieldData.value, formState == null ? void 0 : formState.data.value)) ?? fieldData.value;
+        return ((_b = (_a2 = props2.field).transform) == null ? void 0 : _b.call(_a2, fieldData.value, formState.data.value)) ?? fieldData.value;
       }
     );
     const computedOptions = vue.computed(
-      () => bindAttrs({ options: props2.field.options }, fieldData.value, formState == null ? void 0 : formState.data.value).options
+      () => bindAttrs({ options: props2.field.options }, fieldData.value, formState.data.value).options
     );
     const computedAttrs = vue.computed(() => {
       const attrs = { ...customAttrs.value, ...props2.field.attrs };
-      delete attrs.schema;
-      const boundAttrs = bindAttrs(attrs, fieldData.value, formState == null ? void 0 : formState.data.value);
-      return Object.fromEntries(
-        Object.entries(boundAttrs).filter(([_2, value]) => value !== void 0)
-      );
+      return bindAttrs(attrs, fieldData.value, formState.data.value);
     });
     const computedClass = vue.computed(
       () => {
         var _a2;
-        return classify(fieldData.value, formState == null ? void 0 : formState.data.value, props2.field.class, (_a2 = props2.field.attrs) == null ? void 0 : _a2.class);
+        return classify(fieldData.value, formState.data.value, props2.field.class, (_a2 = props2.field.attrs) == null ? void 0 : _a2.class);
       }
     );
     return (_ctx, _cache) => {
-      var _a2;
       const _component_BglField = vue.resolveComponent("BglField", true);
       return vIf.value ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(is4.value), vue.mergeProps({ key: 0 }, computedAttrs.value, {
         modelValue: fieldData.value,
@@ -10060,11 +10055,9 @@ const _sfc_main$S = /* @__PURE__ */ vue.defineComponent({
         defaultValue: _ctx.field.defaultValue,
         disabled: _ctx.field.disabled,
         options: computedOptions.value,
-        helptext: _ctx.field.helptext,
-        schema: ((_a2 = _ctx.field.attrs) == null ? void 0 : _a2.schema) ?? void 0
+        helptext: _ctx.field.helptext
       }), {
         default: vue.withCtx(() => [
-          vue.createTextVNode(vue.toDisplayString(computedFieldData.value) + " ", 1),
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.field.children, (child, ii) => {
             return vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: ii }, [
               typeof child !== "string" ? (vue.openBlock(), vue.createBlock(_component_BglField, {
@@ -10077,7 +10070,7 @@ const _sfc_main$S = /* @__PURE__ */ vue.defineComponent({
           }), 128))
         ]),
         _: 1
-      }, 16, ["modelValue", "fieldID", "required", "class", "label", "placeholder", "defaultValue", "disabled", "options", "helptext", "schema"])) : vue.createCommentVNode("", true);
+      }, 16, ["modelValue", "fieldID", "required", "class", "label", "placeholder", "defaultValue", "disabled", "options", "helptext"])) : vue.createCommentVNode("", true);
     };
   }
 });
@@ -20117,14 +20110,14 @@ const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
                 icon: "add",
                 flat: "",
                 thin: "",
-                class: "bgl-ctrl-num-btn",
+                class: "bgl-ctrl-num-btn ctrl-add color-gray",
                 onClick: increment
               }),
               vue.createVNode(vue.unref(Btn), {
                 icon: "remove",
                 flat: "",
                 thin: "",
-                class: "bgl-ctrl-num-btn",
+                class: "bgl-ctrl-num-btn ctrl-remove color-gray",
                 onClick: decrement
               })
             ])) : vue.createCommentVNode("", true)
@@ -20134,7 +20127,7 @@ const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const NumberInput = /* @__PURE__ */ _export_sfc(_sfc_main$F, [["__scopeId", "data-v-46a64669"]]);
+const NumberInput = /* @__PURE__ */ _export_sfc(_sfc_main$F, [["__scopeId", "data-v-abb5baff"]]);
 const _hoisted_1$v = ["value", "autofocus", "onKeydown", "onPaste"];
 const _sfc_main$E = /* @__PURE__ */ vue.defineComponent({
   __name: "OTP",
@@ -34498,6 +34491,9 @@ function debounce(fn2, wait = 500) {
   }, wait);
   debouncers.set(fn2, timeout);
 }
+function slugify(str) {
+  return str.toLowerCase().replace(/[^a-z0-9-\s]/g, "").split(/[\s-]+/).join("-");
+}
 function keyToLabel(key) {
   if (key === void 0) return key;
   return key.split("_").map((k2) => k2.charAt(0).toUpperCase() + k2.slice(1)).join(" ") || key;
@@ -35230,6 +35226,7 @@ exports.normalizeDimension = normalizeDimension;
 exports.normalizeURL = normalizeURL;
 exports.provideBagelFormState = provideBagelFormState;
 exports.sleep = sleep;
+exports.slugify = slugify;
 exports.timeAgo = timeAgo;
 exports.useBagel = useBagel;
 exports.useBagelFormState = useBagelFormState;

package/dist/index.mjs

@@ -9974,7 +9974,7 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent({
   setup(__props, { emit: __emit }) {
     const props2 = __props;
     const emit2 = __emit;
-    const formState = inject(FORM_STATE_KEY);
+    const formState = inject(FORM_STATE_KEY) ?? provideBagelFormState(props2.modelValue);
     const customAttrs = ref({});
     const is4 = computed(() => {
       if (props2.field.$el === "text") return TextInput;
@@ -9998,54 +9998,49 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent({
     const fieldData = computed({
       get: () => {
         if (!props2.fieldID) return props2.field.defaultValue ?? (props2.field.$el === "form" ? {} : "");
-        const value = formState == null ? void 0 : formState.getFieldData(props2.fieldID);
+        const value = formState.getFieldData(props2.fieldID);
         if (props2.field.$el === "form" && !value) return {};
         return value ?? "";
       },
       set: (val) => {
         if (!props2.fieldID) return;
-        const currentValue = formState == null ? void 0 : formState.getFieldData(props2.fieldID);
+        const currentValue = formState.getFieldData(props2.fieldID);
         if (JSON.stringify(val) === JSON.stringify(currentValue)) return;
         emit2("update:modelValue", val);
         if (props2.field.onUpdate) {
           props2.field.onUpdate(val, currentValue);
         }
-        formState == null ? void 0 : formState.updateField(props2.fieldID, val);
+        formState.updateField(props2.fieldID, val);
       }
     });
     const vIf = computed(() => {
       if (props2.field["v-if"] === void 0 && props2.field.vIf === void 0) return true;
       if (typeof props2.field["v-if"] === "boolean" || typeof props2.field.vIf === "boolean") return props2.field["v-if"];
       if (typeof props2.field["v-if"] === "string" || typeof props2.field.vIf === "string") return true;
-      if (typeof props2.field["v-if"] === "function") return props2.field["v-if"](fieldData.value, formState == null ? void 0 : formState.data.value);
-      if (typeof props2.field.vIf === "function") return props2.field.vIf(fieldData.value, formState == null ? void 0 : formState.data.value);
+      if (typeof props2.field["v-if"] === "function") return props2.field["v-if"](fieldData.value, formState.data.value);
+      if (typeof props2.field.vIf === "function") return props2.field.vIf(fieldData.value, formState.data.value);
       return true;
     });
-    const computedFieldData = computed(
+    computed(
       () => {
         var _a2, _b;
-        return ((_b = (_a2 = props2.field).transform) == null ? void 0 : _b.call(_a2, fieldData.value, formState == null ? void 0 : formState.data.value)) ?? fieldData.value;
+        return ((_b = (_a2 = props2.field).transform) == null ? void 0 : _b.call(_a2, fieldData.value, formState.data.value)) ?? fieldData.value;
       }
     );
     const computedOptions = computed(
-      () => bindAttrs({ options: props2.field.options }, fieldData.value, formState == null ? void 0 : formState.data.value).options
+      () => bindAttrs({ options: props2.field.options }, fieldData.value, formState.data.value).options
     );
     const computedAttrs = computed(() => {
       const attrs = { ...customAttrs.value, ...props2.field.attrs };
-      delete attrs.schema;
-      const boundAttrs = bindAttrs(attrs, fieldData.value, formState == null ? void 0 : formState.data.value);
-      return Object.fromEntries(
-        Object.entries(boundAttrs).filter(([_2, value]) => value !== void 0)
-      );
+      return bindAttrs(attrs, fieldData.value, formState.data.value);
     });
     const computedClass = computed(
       () => {
         var _a2;
-        return classify(fieldData.value, formState == null ? void 0 : formState.data.value, props2.field.class, (_a2 = props2.field.attrs) == null ? void 0 : _a2.class);
+        return classify(fieldData.value, formState.data.value, props2.field.class, (_a2 = props2.field.attrs) == null ? void 0 : _a2.class);
       }
     );
     return (_ctx, _cache) => {
-      var _a2;
       const _component_BglField = resolveComponent("BglField", true);
       return vIf.value ? (openBlock(), createBlock(resolveDynamicComponent(is4.value), mergeProps({ key: 0 }, computedAttrs.value, {
         modelValue: fieldData.value,
@@ -10058,11 +10053,9 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent({
         defaultValue: _ctx.field.defaultValue,
         disabled: _ctx.field.disabled,
         options: computedOptions.value,
-        helptext: _ctx.field.helptext,
-        schema: ((_a2 = _ctx.field.attrs) == null ? void 0 : _a2.schema) ?? void 0
+        helptext: _ctx.field.helptext
       }), {
         default: withCtx(() => [
-          createTextVNode(toDisplayString(computedFieldData.value) + " ", 1),
           (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.field.children, (child, ii) => {
             return openBlock(), createElementBlock(Fragment, { key: ii }, [
               typeof child !== "string" ? (openBlock(), createBlock(_component_BglField, {
@@ -10075,7 +10068,7 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent({
           }), 128))
         ]),
         _: 1
-      }, 16, ["modelValue", "fieldID", "required", "class", "label", "placeholder", "defaultValue", "disabled", "options", "helptext", "schema"])) : createCommentVNode("", true);
+      }, 16, ["modelValue", "fieldID", "required", "class", "label", "placeholder", "defaultValue", "disabled", "options", "helptext"])) : createCommentVNode("", true);
     };
   }
 });
@@ -20115,14 +20108,14 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
                 icon: "add",
                 flat: "",
                 thin: "",
-                class: "bgl-ctrl-num-btn",
+                class: "bgl-ctrl-num-btn ctrl-add color-gray",
                 onClick: increment
               }),
               createVNode(unref(Btn), {
                 icon: "remove",
                 flat: "",
                 thin: "",
-                class: "bgl-ctrl-num-btn",
+                class: "bgl-ctrl-num-btn ctrl-remove color-gray",
                 onClick: decrement
               })
             ])) : createCommentVNode("", true)
@@ -20132,7 +20125,7 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const NumberInput = /* @__PURE__ */ _export_sfc(_sfc_main$F, [["__scopeId", "data-v-46a64669"]]);
+const NumberInput = /* @__PURE__ */ _export_sfc(_sfc_main$F, [["__scopeId", "data-v-abb5baff"]]);
 const _hoisted_1$v = ["value", "autofocus", "onKeydown", "onPaste"];
 const _sfc_main$E = /* @__PURE__ */ defineComponent({
   __name: "OTP",
@@ -34496,6 +34489,9 @@ function debounce(fn2, wait = 500) {
   }, wait);
   debouncers.set(fn2, timeout);
 }
+function slugify(str) {
+  return str.toLowerCase().replace(/[^a-z0-9-\s]/g, "").split(/[\s-]+/).join("-");
+}
 function keyToLabel(key) {
   if (key === void 0) return key;
   return key.split("_").map((k2) => k2.charAt(0).toUpperCase() + k2.slice(1)).join(" ") || key;
@@ -35229,6 +35225,7 @@ export {
   normalizeURL,
   provideBagelFormState,
   sleep,
+  slugify,
   timeAgo,
   useBagel,
   useBagelFormState,

package/dist/style.css

@@ -1074,27 +1074,27 @@ pre code.hljs{
 	direction: ltr;
 }
 
-.txtInputIconStart .iconStart[data-v-46a64669] {
+.txtInputIconStart .iconStart[data-v-abb5baff] {
 	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-46a64669] {
+.textInputSpinnerWrap .spinner[data-v-abb5baff] {
 	color: var(--input-color);
 	position: absolute;
 	inset-inline-end: 0;
 	margin-top: calc(var(--input-height) / -1);
 	line-height: 0;
 }
-.bgl-ctrl-num-btn[data-v-46a64669]{
+.bgl-ctrl-num-btn[data-v-abb5baff]{
 	height: calc(var(--input-height) / 2) !important;
 }
-.bgl-big-ctrl-num-btn[data-v-46a64669]{
+.bgl-big-ctrl-num-btn[data-v-abb5baff]{
 	width: 100% !important;
 }
-.bgl-number-input[data-v-46a64669]{
+.bgl-number-input[data-v-abb5baff]{
 	padding-inline-end: 1.75rem !important;
 }
 

package/dist/utils/index.d.ts

@@ -1,5 +1,6 @@
 import { Attributes, BglFormSchemaT } from '..';
 export declare function debounce(fn: () => void, wait?: number): void;
+export declare function slugify(str: string): string;
 export declare function keyToLabel(key?: string): string | undefined;
 export declare function copyText(text: string, cb?: (msg: string) => void): Promise<void>;
 export declare function initials(...strArr: string[]): string;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAI/D,wBAAgB,QAAQ,CAAC,EAAE,EAAE,MAAM,IAAI,EAAE,IAAI,GAAE,MAAY,QAO1D;AAED,wBAAgB,UAAU,CAAC,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAQ3D;AAED,wBAAsB,QAAQ,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,iBAGtE;AAED,wBAAgB,QAAQ,CAAC,GAAG,MAAM,EAAE,MAAM,EAAE,UAG3C;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,IAAI,QAIrE;AAED,wBAAgB,QAAQ,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,GAAG,CAAC,EAAE,GAAG,EAAE,GAAG,OAAO,EAAE,GAAG,EAAE,UAOpE;AAED,wBAAgB,SAAS,CAAC,CAAC,GAAG;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,EACnD,KAAK,CAAC,EAAE,UAAU,EAClB,QAAQ,CAAC,EAAE,GAAG,EACd,GAAG,CAAC,EAAE,CAAC,OAcP;AAED,wBAAgB,KAAK,CAAC,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,OAO9C;AAED,wBAAgB,SAAS,CAAC,QAAQ,CAAC,EAAE;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,EAAE,OAAO,CAAC,EAAE,MAAM,OAG5E;AAED,eAAO,MAAM,MAAM,eAAgB,GAAG,YAA0C,CAAA;AAEhF,wBAAgB,iBAAiB,CAAC,CAAC,EAClC,IAAI,CAAC,EAAE,GAAG,EAAE,EACZ,UAAU,CAAC,EAAE,MAAM,EAAE,GACnB,cAAc,CAAC,CAAC,CAAC,CAWnB;AAED,wBAAgB,KAAK,CAAC,EAAE,GAAE,MAAY,oBAErC;AAED,wBAAgB,YAAY,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE;IAAE,EAAE,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,OAAO,CAAC,IAAI,CAAC,CAoBlF;AAED,wBAAgB,WAAW,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAatD;AAED,wBAAgB,YAAY,CAAC,GAAG,EAAE,MAAM,UAIvC;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,EAAE,aAAa,SAAO,GAAG,MAAM,GAAG,SAAS,CAG/G;AAED,OAAO,KAAK,cAAc,MAAM,kBAAkB,CAAA;AAElD,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AAEhC,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AACxC,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAI/D,wBAAgB,QAAQ,CAAC,EAAE,EAAE,MAAM,IAAI,EAAE,IAAI,GAAE,MAAY,QAO1D;AAED,wBAAgB,OAAO,CAAC,GAAG,EAAE,MAAM,UAMlC;AAED,wBAAgB,UAAU,CAAC,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAQ3D;AAED,wBAAsB,QAAQ,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,iBAGtE;AAED,wBAAgB,QAAQ,CAAC,GAAG,MAAM,EAAE,MAAM,EAAE,UAG3C;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,IAAI,QAIrE;AAED,wBAAgB,QAAQ,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,GAAG,CAAC,EAAE,GAAG,EAAE,GAAG,OAAO,EAAE,GAAG,EAAE,UAOpE;AAED,wBAAgB,SAAS,CAAC,CAAC,GAAG;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,EACnD,KAAK,CAAC,EAAE,UAAU,EAClB,QAAQ,CAAC,EAAE,GAAG,EACd,GAAG,CAAC,EAAE,CAAC,OAcP;AAED,wBAAgB,KAAK,CAAC,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,OAO9C;AAED,wBAAgB,SAAS,CAAC,QAAQ,CAAC,EAAE;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,EAAE,OAAO,CAAC,EAAE,MAAM,OAG5E;AAED,eAAO,MAAM,MAAM,eAAgB,GAAG,YAA0C,CAAA;AAEhF,wBAAgB,iBAAiB,CAAC,CAAC,EAClC,IAAI,CAAC,EAAE,GAAG,EAAE,EACZ,UAAU,CAAC,EAAE,MAAM,EAAE,GACnB,cAAc,CAAC,CAAC,CAAC,CAWnB;AAED,wBAAgB,KAAK,CAAC,EAAE,GAAE,MAAY,oBAErC;AAED,wBAAgB,YAAY,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE;IAAE,EAAE,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,OAAO,CAAC,IAAI,CAAC,CAoBlF;AAED,wBAAgB,WAAW,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAatD;AAED,wBAAgB,YAAY,CAAC,GAAG,EAAE,MAAM,UAIvC;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,EAAE,aAAa,SAAO,GAAG,MAAM,GAAG,SAAS,CAG/G;AAED,OAAO,KAAK,cAAc,MAAM,kBAAkB,CAAA;AAElD,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AAEhC,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AACxC,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAA"}

package/package.json

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

package/src/components/form/BglField.vue

@@ -16,9 +16,9 @@ import {
 	type BagelFormState,
 	BglForm
 } from '@bagelink/vue'
-import { inject } from 'vue'
+import { inject, ref } from 'vue'
 import TabsNav from '../layout/TabsNav.vue'
-import { FORM_STATE_KEY } from './useBagelFormState'
+import { FORM_STATE_KEY, provideBagelFormState } from './useBagelFormState'
 
 const props = defineProps<{
 	field: Field<T>
@@ -31,7 +31,7 @@ const emit = defineEmits<{
 	'update:modelValue': [value: any]
 }>()
 
-const formState = inject<BagelFormState<T>>(FORM_STATE_KEY)
+const formState = inject<BagelFormState<T>>(FORM_STATE_KEY) ?? provideBagelFormState(props.modelValue)
 
 const customAttrs = $ref<{ [key: string]: any }>({})
 
@@ -58,20 +58,20 @@ const is = $computed(() => {
 const fieldData = $computed({
 	get: () => {
 		if (!props.fieldID) return props.field.defaultValue ?? (props.field.$el === 'form' ? {} : '')
-		const value = formState?.getFieldData(props.fieldID)
+		const value = formState.getFieldData(props.fieldID)
 		if (props.field.$el === 'form' && !value) return {}
 		return value ?? ''
 	},
 	set: (val: any) => {
 		if (!props.fieldID) return
-		const currentValue = formState?.getFieldData(props.fieldID)
+		const currentValue = formState.getFieldData(props.fieldID)
 		if (JSON.stringify(val) === JSON.stringify(currentValue)) return
 
 		emit('update:modelValue', val)
 		if (props.field.onUpdate) {
 			props.field.onUpdate(val, currentValue)
 		}
-		formState?.updateField(props.fieldID, val)
+		formState.updateField(props.fieldID, val)
 	}
 })
 
@@ -79,30 +79,26 @@ const vIf = $computed(() => {
 	if (props.field['v-if'] === undefined && props.field.vIf === undefined) return true
 	if (typeof props.field['v-if'] === 'boolean' || typeof props.field.vIf === 'boolean') return props.field['v-if']
 	if (typeof props.field['v-if'] === 'string' || typeof props.field.vIf === 'string') return true
-	if (typeof props.field['v-if'] === 'function') return props.field['v-if'](fieldData, formState?.data.value as T)
-	if (typeof props.field.vIf === 'function') return props.field.vIf(fieldData, formState?.data.value as T)
+	if (typeof props.field['v-if'] === 'function') return props.field['v-if'](fieldData, formState.data.value as T)
+	if (typeof props.field.vIf === 'function') return props.field.vIf(fieldData, formState.data.value as T)
 	return true
 })
 
 const computedFieldData = $computed(
-	() => props.field.transform?.(fieldData, formState?.data.value as T) ?? fieldData
+	() => props.field.transform?.(fieldData, formState.data.value as T) ?? fieldData
 )
 
 const computedOptions = $computed(
-	() => bindAttrs({ options: props.field.options }, fieldData, formState?.data.value).options
+	() => bindAttrs({ options: props.field.options }, fieldData, formState.data.value).options
 )
 
 const computedAttrs = $computed(() => {
 	const attrs = { ...customAttrs, ...props.field.attrs }
-	delete attrs.schema
-	const boundAttrs = bindAttrs(attrs, fieldData, formState?.data.value)
-	return Object.fromEntries(
-		Object.entries(boundAttrs).filter(([_, value]) => value !== undefined)
-	)
+	return bindAttrs(attrs, fieldData, formState.data.value)
 })
 
 const computedClass = $computed(
-	() => classify(fieldData, formState?.data.value, props.field.class, props.field.attrs?.class)
+	() => classify(fieldData, formState.data.value, props.field.class, props.field.attrs?.class)
 )
 </script>
 
@@ -121,9 +117,7 @@ const computedClass = $computed(
 		:disabled="field.disabled"
 		:options="computedOptions"
 		:helptext="field.helptext"
-		:schema="field.attrs?.schema ?? undefined"
 	>
-		{{ computedFieldData }}
 		<template v-for="(child, ii) in field.children" :key="ii">
 			<BglField
 				v-if="(typeof child !== 'string')"

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

@@ -133,8 +133,8 @@ watch(() => modelValue, (newVal) => {
 				<Btn v-if="layout && btnLayouts.includes(layout)" flat icon="remove" class="radius" :class="[{ 'bgl-big-ctrl-num-btn': layout === 'vertical' }]" @click="decrement" />
 
 				<div v-if="spinner && (!layout || !btnLayouts.includes(layout))" class="flex column spinner">
-					<Btn icon="add" flat thin class="bgl-ctrl-num-btn" @click="increment" />
-					<Btn icon="remove" flat thin class="bgl-ctrl-num-btn" @click="decrement" />
+					<Btn icon="add" flat thin class="bgl-ctrl-num-btn ctrl-add color-gray" @click="increment" />
+					<Btn icon="remove" flat thin class="bgl-ctrl-num-btn ctrl-remove color-gray" @click="decrement" />
 				</div>
 			</div>
 		</label>

package/src/utils/index.ts

@@ -11,6 +11,14 @@ export function debounce(fn: () => void, wait: number = 500) {
 	debouncers.set(fn, timeout)
 }
 
+export function slugify(str: string) {
+	return str
+		.toLowerCase()
+		.replace(/[^a-z0-9-\s]/g, '')
+		.split(/[\s-]+/)
+		.join('-')
+}
+
 export function keyToLabel(key?: string): string | undefined {
 	if (key === undefined) return key
 	return (