@bagelink/vue 0.0.1060 → 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,OA0IO,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;WA2KxD,mBAAmB,CAAC;;;eAvKtB,KAAK,CAAC,CAAC,CAAC;kBACL,MAAM;qBACH,GAAG;qBACH,MAAM;KAoKmG,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;AArLzE,wBAqL4E;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;
     });
     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,8 +10055,7 @@ 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.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.field.children, (child, ii) => {
@@ -10076,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);
     };
   }
 });
@@ -20116,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)
@@ -20133,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",

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;
     });
     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,8 +10053,7 @@ 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(() => [
           (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.field.children, (child, ii) => {
@@ -10074,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);
     };
   }
 });
@@ -20114,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)
@@ -20131,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",

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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "0.0.1060",
+  "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,7 +117,6 @@ const computedClass = $computed(
 		:disabled="field.disabled"
 		:options="computedOptions"
 		:helptext="field.helptext"
-		:schema="field.attrs?.schema ?? undefined"
 	>
 		<template v-for="(child, ii) in field.children" :key="ii">
 			<BglField

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>