@bagelink/vue 0.0.243 → 0.0.247

package/dist/style.css

@@ -867,21 +867,22 @@ th[data-v-56ec9012] {
 	color: var(--input-color);
 }
 
-.avatar[data-v-dbdd4c26] {
+.avatar[data-v-0441b0b8] {
 	border-radius: 100%;
 	background-color: var(--bgl-gray-20);
 	border: 0.5px solid var(--border-color);
 	overflow: hidden;
 	text-align: center;
 	padding: none;
+	flex: 0 0 40px;
 }
-.avatar p[data-v-dbdd4c26] {
+.avatar p[data-v-0441b0b8] {
 	font-size: 1.5rem;
 	line-height: 50px;
 	margin: 0;
 	font-weight: 200;
 }
-.avatar img[data-v-dbdd4c26] {
+.avatar img[data-v-0441b0b8] {
 	width: 100%;
 	height: 100%;
 	object-fit: cover;
@@ -1181,7 +1182,7 @@ fieldset[disabled] .multiselect {
 	width: 100%;
 	min-height: var(--input-height);
 	text-align: left;
-	color: #35495e;
+	color: var(--input-color);
 }
 .multiselect * {
 	box-sizing: border-box;
@@ -1219,20 +1220,20 @@ fieldset[disabled] .multiselect {
 .multiselect__single {
 	position: relative;
 	display: inline-block;
-	min-height: 20px;
-	line-height: 20px;
 	border: none;
-	border-radius: var(--input-border-radius);
 	background: var(--input-bg);
-	padding: 0 0 0 5px;
 	width: calc(100%);
 	transition: border 0.1s ease;
 	box-sizing: border-box;
-	margin-bottom: 8px;
 	vertical-align: top;
+	font-size: var(--input-font-size);
+	padding-inline-start: 0rem;
+}
+.multiselect--active .multiselect__input {
+		margin-top: -0.5rem;
 }
 .multiselect__input::placeholder {
-	color: #35495e;
+	color: var(--input-color);
 }
 .multiselect__tag~.multiselect__input,
 .multiselect__tag~.multiselect__single {
@@ -1248,19 +1249,24 @@ fieldset[disabled] .multiselect {
 	outline: none;
 }
 .multiselect__single {
-	padding-left: 5px;
+	/* padding-left: 5px; */
 	margin-bottom: 8px;
 }
 .multiselect__tags-wrap {
 	display: inline;
 }
 .multiselect__tags {
-	min-height: 40px;
+	/* min-height: 40px; */
 	display: block;
-	padding: 8px 40px 0 8px;
+	/* padding: 0.7rem 40px 0.7rem 8px; */
 	border-radius: var(--input-border-radius);
 	background: var(--input-bg);
 	font-size: var(--input-font-size);
+	height: var(--input-height);
+	line-height: 0;
+	padding: calc(var(--input-height) / 2);
+	padding-inline-end: 40px;
+	padding-inline-start: 0.7rem;
 }
 .multiselect__tag {
 	position: relative;
@@ -1327,8 +1333,8 @@ fieldset[disabled] .multiselect {
 	display: block;
 	position: absolute;
 	box-sizing: border-box;
-	width: 40px;
-	height: 38px;
+	/* width: 40px; */
+	/* height: 38px; */
 	right: 1px;
 	top: 1px;
 	padding: 4px 8px;
@@ -1337,20 +1343,19 @@ fieldset[disabled] .multiselect {
 	text-align: center;
 	cursor: pointer;
 	transition: transform 0.2s ease;
+	padding-top: calc(var(--input-height) / 2 - 0.7rem);
 }
 .multiselect__select::before {
 	position: relative;
 	background-size: contain;
 	transform: scale(0.5);
-	top: 4px;
 	color: var(--bgl-black);
-	content: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='%23b7b7b7' height='24' viewBox='0 -960 960 960' width='24'><path d='M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z'/></svg>")
+	content: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='%23b7b7b7' height='24' viewBox='0 -960 960 960' width='24'><path d='M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z'/></svg>");
 }
 .multiselect__placeholder {
-	color: #adadad;
+	color: var(--placeholder-color);
 	display: inline-block;
 	margin-bottom: 10px;
-	padding-top: 2px;
 }
 .multiselect--active .multiselect__placeholder {
 	display: none;
@@ -1444,14 +1449,14 @@ fieldset[disabled] .multiselect {
 }
 .multiselect__option--group {
 	background: #ededed;
-	color: #35495e;
+	color: var(--input-color);
 }
 .multiselect__option--group.multiselect__option--highlight {
-	background: #35495e;
+	background: var(--input-color);
 	color: #fff;
 }
 .multiselect__option--group.multiselect__option--highlight::after {
-	background: #35495e;
+	background: var(--input-color);
 }
 .multiselect__option--disabled.multiselect__option--highlight {
 	background: #dedede;
@@ -1487,7 +1492,9 @@ fieldset[disabled] .multiselect {
 	left: 1px;
 }
 *[dir="rtl"] .multiselect__tags {
-	padding: 8px 8px 0 40px;
+	padding: calc(var(--input-height) / 2);
+	padding-inline-end: 40px;
+	padding-inline-start: 0.7rem;
 }
 *[dir="rtl"] .multiselect__content {
 	text-align: right;
@@ -1901,7 +1908,7 @@ to {
   color: var(--bgl-white);
 }
 
-.bagel-input .fileUploadWrap[data-v-4144cc3e] {
+.bagel-input .fileUploadWrap[data-v-7deb423e] {
 	outline: 1px solid var(--border-color);
 	border-radius: var(--input-border-radius);
 	text-align: center;
@@ -1911,7 +1918,7 @@ to {
 	height: 132px;
 	font-size: var(--input-font-size);
 }
-.previewName[data-v-4144cc3e] {
+.previewName[data-v-7deb423e] {
 	padding: 0.5rem;
 	text-align: start;
 	color: var(--input-color);
@@ -1919,37 +1926,37 @@ to {
 	grid-template-columns: 1fr 22px;
 	align-items: center;
 }
-.previewName p[data-v-4144cc3e] {
+.previewName p[data-v-7deb423e] {
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 }
-.imagePreviewWrap[data-v-4144cc3e] {
+.imagePreviewWrap[data-v-7deb423e] {
 	background: var(--input-bg);
 	border-radius: var(--input-border-radius);
 	height: 90px;
 	padding: 5px;
 }
-img.preview[data-v-4144cc3e] {
+img.preview[data-v-7deb423e] {
 	height: 80px;
 	border-radius: var(--input-border-radius);
 	object-fit: contain;
 }
-.fileUploadWrap.dragover[data-v-4144cc3e],
-.fileUploadWrap[data-v-4144cc3e]:hover {
+.fileUploadWrap.dragover[data-v-7deb423e],
+.fileUploadWrap[data-v-7deb423e]:hover {
 	box-shadow: inset 0 0 10px #00000012;
 }
-.bagel-input .fileUploadWrap.fileDropZone[data-v-4144cc3e] {
+.bagel-input .fileUploadWrap.fileDropZone[data-v-7deb423e] {
 	background: var(--input-bg);
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	color: var(--bgl-gray);
 }
-.bagel-input .fileUploadWrap.fileDropZone[data-v-4144cc3e]:after {
+.bagel-input .fileUploadWrap.fileDropZone[data-v-7deb423e]:after {
 	content: "Drop files here or click to upload";
 }
-.pie[data-v-4144cc3e] {
+.pie[data-v-7deb423e] {
 	width: 30px;
 	height: 30px;
 	position: relative;
@@ -1957,7 +1964,7 @@ img.preview[data-v-4144cc3e] {
 	align-items: center;
 	justify-content: center;
 }
-.pie[data-v-4144cc3e]:before {
+.pie[data-v-7deb423e]:before {
 	content: "";
 	position: absolute;
 	border-radius: 50%;
@@ -1971,26 +1978,26 @@ img.preview[data-v-4144cc3e] {
 			#0000 calc(99% - var(--b)),
 			#000 calc(100% - var(--b)));
 }
-.pie .success[data-v-4144cc3e] {
+.pie .success[data-v-7deb423e] {
 	transform: scale(0);
 	opacity: 0;
 	transition: all 0.3s ease-in-out;
 }
-.pie .progress[data-v-4144cc3e] {
+.pie .progress[data-v-7deb423e] {
 	position: absolute;
 	font-size: 10px;
 }
-.pie.complete .progress[data-v-4144cc3e] {
+.pie.complete .progress[data-v-7deb423e] {
 	display: none;
 }
-.pie.complete .success[data-v-4144cc3e] {
+.pie.complete .success[data-v-7deb423e] {
 	transform: scale(1.3);
 	opacity: 1;
 }
-.pie.complete[data-v-4144cc3e]:before {
+.pie.complete[data-v-7deb423e]:before {
 	background: conic-gradient(var(--bgl-green) calc(var(--p) * 1%), #0000 0);
 }
-.pie.complete[data-v-4144cc3e] {
+.pie.complete[data-v-7deb423e] {
 	color: var(--bgl-green);
 }
 
@@ -2380,6 +2387,18 @@ img.preview[data-v-4144cc3e] {
 .flex-3-col {
     flex: 1 1 33.33333%;
 }
+.mb-0 {
+    margin-bottom: 0rem !important;
+}
+.mb-025 {
+    margin-bottom: 0.25rem !important;
+}
+.mb-05 {
+    margin-bottom: 0.5rem !important;
+}
+.mb-075 {
+    margin-bottom: 0.75rem !important;
+}
 .mb-1 {
     margin-bottom: 1rem !important;
 }
@@ -2389,6 +2408,21 @@ img.preview[data-v-4144cc3e] {
 .mb-3 {
     margin-bottom: 3rem !important;
 }
+.mb-4 {
+    margin-bottom: 4rem !important;
+}
+.mt-0 {
+    margin-top: 0rem !important;
+}
+.mt-025 {
+    margin-top: 0.25rem !important;
+}
+.mt-05 {
+    margin-top: 0.5rem !important;
+}
+.mt-075 {
+    margin-top: 0.75rem !important;
+}
 .mt-1 {
     margin-top: 1rem !important;
 }
@@ -2398,6 +2432,21 @@ img.preview[data-v-4144cc3e] {
 .mt-3 {
     margin-top: 3rem !important;
 }
+.mt-4 {
+    margin-top: 4rem !important;
+}
+.ms-0 {
+    margin-inline-start: 0rem !important;
+}
+.ms-025 {
+    margin-inline-start: 0.25rem !important;
+}
+.ms-05 {
+    margin-inline-start: 0.5rem !important;
+}
+.ms-075 {
+    margin-inline-start: 0.75rem !important;
+}
 .ms-1 {
     margin-inline-start: 1rem !important;
 }
@@ -2407,6 +2456,21 @@ img.preview[data-v-4144cc3e] {
 .ms-3 {
     margin-inline-start: 3rem !important;
 }
+.ms-4 {
+    margin-inline-start: 4rem !important;
+}
+.me-0 {
+    margin-inline-end: 0rem !important;
+}
+.me-025 {
+    margin-inline-end: 0.25rem !important;
+}
+.me-05 {
+    margin-inline-end: 0.5rem !important;
+}
+.me-075 {
+    margin-inline-end: 0.75rem !important;
+}
 .me-1 {
     margin-inline-end: 1rem !important;
 }
@@ -2416,65 +2480,92 @@ img.preview[data-v-4144cc3e] {
 .me-3 {
     margin-inline-end: 3rem !important;
 }
-.mb-0 {
-    margin-bottom: 0rem !important;
+.me-4 {
+    margin-inline-end: 4rem !important;
 }
-.mb-4 {
-    margin-bottom: 4rem !important;
+.-mb-025 {
+    margin-bottom: -0.25rem !important;
 }
-.mb-075 {
-    margin-bottom: 0.75rem !important;
+.-mb-05 {
+    margin-bottom: -0.5rem !important;
 }
-.mb-05 {
-    margin-bottom: 0.5rem !important;
+.-mb-075 {
+    margin-bottom: -0.75rem !important;
 }
-.mb-025 {
-    margin-bottom: 0.25rem !important;
+.-mb-1 {
+    margin-bottom: -1rem !important;
 }
-.mt-0 {
-    margin-top: 0rem !important;
+.-mb-2 {
+    margin-bottom: -2rem !important;
 }
-.mt-4 {
-    margin-top: 4rem !important;
+.-mb-3 {
+    margin-bottom: -3rem !important;
 }
-.mt-075 {
+.-mb-4 {
+    margin-bottom: -4rem !important;
+}
+.-mt-025 {
+    margin-top: -0.25rem !important;
+}
+.-mt-05 {
+    margin-top: -0.5rem !important;
+}
+.-mt-075 {
     margin-top: 0.75rem !important;
 }
-.mt-05 {
-    margin-top: 0.5rem !important;
+.-mt-1 {
+    margin-top: -1rem !important;
 }
-.mt-025 {
-    margin-top: 0.25rem !important;
+.-mt-2 {
+    margin-top: -2rem !important;
 }
-.ms-0 {
-    margin-inline-start: 0rem !important;
+.-mt-3 {
+    margin-top: -3rem !important;
 }
-.ms-4 {
-    margin-inline-start: 4rem !important;
+.-mt-4 {
+    margin-top: -4rem !important;
 }
-.ms-075 {
-    margin-inline-start: 0.75rem !important;
+.-ms-025 {
+    margin-inline-start: -0.25rem !important;
 }
-.ms-05 {
-    margin-inline-start: 0.5rem !important;
+.-ms-05 {
+    margin-inline-start: -0.5rem !important;
 }
-.ms-025 {
-    margin-inline-start: 0.25rem !important;
+.-ms-075 {
+    margin-inline-start: -0.75rem !important;
 }
-.me-0 {
-    margin-inline-end: 0rem !important;
+.-ms-1 {
+    margin-inline-start: -1rem !important;
 }
-.me-4 {
-    margin-inline-end: 4rem !important;
+.-ms-2 {
+    margin-inline-start: -2rem !important;
 }
-.me-075 {
-    margin-inline-end: 0.75rem !important;
+.-ms-3 {
+    margin-inline-start: -3rem !important;
 }
-.me-05 {
-    margin-inline-end: 0.5rem !important;
+.-ms-4 {
+    margin-inline-start: -4rem !important;
 }
-.me-025 {
-    margin-inline-end: 0.25rem !important;
+.-me-025 {
+    margin-inline-end: -0.25rem !important;
+}
+.-me-05 {
+    margin-inline-end: -0.5rem !important;
+}
+.-me-075 {
+    margin-inline-end: -0.75rem !important;
+}
+.-me-1 {
+    margin-inline-end: -1rem !important;
+}
+.-me-2 {
+    margin-inline-end: -2rem !important;
+}
+.-me-3 {
+    margin-inline-end: -3rem !important;
+}
+.-me-4 {
+    margin-inline-end: -4rem !important;
 }
 .pb-0 {
     padding-bottom: 0rem !important;
@@ -2898,6 +2989,9 @@ h6 {}
 .bold {
     font-weight: 700;
 }
+.line-height-1 {
+    line-height: 1;
+}
 .ellipsis {
     overflow: hidden;
     display: block;

package/dist/types/BagelForm.d.ts

@@ -15,9 +15,9 @@ export type BaseBagelField<T = Record<string, any>> = {
     required?: boolean;
     helptext?: string;
     options?: string | ({
-        label: string;
+        label?: string;
         value: string | number;
-    } | string | number)[];
+    } | string | number | Record<string, any>)[];
     defaultValue?: any;
     transform?: (val?: any, rowData?: Record<string, any>) => any;
     onUpdate?: (val: any, fieldData?: any, rowData?: Record<string, any>) => void;
@@ -31,10 +31,6 @@ export interface InputBagelField<T> extends BaseBagelField<T> {
 export interface SelectBagelField<T> extends BaseBagelField<T> {
     $el: 'select' | typeof SelectInput;
     id: string;
-    options: string | ({
-        label: string;
-        value: string | number;
-    } | string | number)[];
 }
 export type Field<T = Record<string, any>> = BaseBagelField<T> | InputBagelField<T> | SelectBagelField<T>;
 export type BglFormSchemaT<T = Record<string, any>> = Field<T>[];

package/dist/types/BagelForm.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BagelForm.d.ts","sourceRoot":"","sources":["../../src/types/BagelForm.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"BagelForm.d.ts","sourceRoot":"","sources":["../../src/types/BagelForm.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAEvD,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,GAAG,SAAS,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;AAEhG,MAAM,MAAM,WAAW,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,IAAI,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,KAAK,cAAc,CAAC;AAE1F,MAAM,WAAW,UAAU,CAAC,CAAC,GAAG,GAAG;IACjC,CAAC,GAAG,EAAE,MAAM,GAAG,cAAc,GAAG,WAAW,CAAC,CAAC,CAAC,CAAA;CAC/C;AAED,MAAM,MAAM,cAAc,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,IAAI;IACpD,GAAG,CAAC,EAAE,GAAG,CAAC;IACV,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC;IACtB,KAAK,CAAC,EAAE,cAAc,GAAG,WAAW,CAAC,CAAC,CAAC,CAAC;IACxC,KAAK,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,GAAG,CAAC;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,EAAE,CAAC;IAC1G,YAAY,CAAC,EAAE,GAAG,CAAC;IACnB,SAAS,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,GAAG,EAAE,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,GAAG,CAAC;IAC9D,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,SAAS,CAAC,EAAE,GAAG,EAAE,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,IAAI,CAAC;IAC9E,MAAM,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,CAAC,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,KAAK,OAAO,CAAC,CAAC;CAC7D,CAAA;AAED,MAAM,WAAW,eAAe,CAAC,CAAC,CAAE,SAAQ,cAAc,CAAC,CAAC,CAAC;IAC3D,GAAG,EAAE,MAAM,GAAG,OAAO,SAAS,CAAC;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,gBAAgB,CAAC,CAAC,CAAE,SAAQ,cAAc,CAAC,CAAC,CAAC;IAC5D,GAAG,EAAE,QAAQ,GAAG,OAAO,WAAW,CAAC;IACnC,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,MAAM,MAAM,KAAK,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,IAAI,cAAc,CAAC,CAAC,CAAC,GAAG,eAAe,CAAC,CAAC,CAAC,GAAG,gBAAgB,CAAC,CAAC,CAAC,CAAC;AAE1G,MAAM,MAAM,cAAc,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,IAAI,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC"}

package/package.json

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

package/src/components/Avatar.vue

@@ -26,7 +26,7 @@ withDefaults(defineProps<{
 	overflow: hidden;
 	text-align: center;
 	padding: none;
-
+	flex: 0 0 40px;
 }
 
 .avatar p {

package/src/components/form/BglField.vue

@@ -1,17 +1,32 @@
 <template>
-	<component :required="field.required" v-bind="bindAttrs(field?.attrs || {}, fieldData, modelValue)"
-		:class="classify(fieldData, modelValue, field.class, field.attrs?.class)" v-if="iffer(field, fieldData)" :is="is"
-		:label="field.label" :id="field.id" :placeholder="field.placeholder || field.label" v-model="fieldData"
-		:defaultValue="field.defaultValue" :options="field.options" :helptext="field.helptext"
-		@update:modelValue="($event: any) => field?.onUpdate?.($event, denullify(fieldData, field.id), formData)">
+	<component
+		:required="field.required"
+		v-bind="bindAttrs(field?.attrs || {}, fieldData, modelValue)"
+		:class="classify(fieldData, modelValue, field.class, field.attrs?.class)"
+		v-if="vIf"
+		:is="is"
+		:label="field.label"
+		:id="field.id"
+		:placeholder="field.placeholder || field.label"
+		v-model="fieldData"
+		:defaultValue="field.defaultValue"
+		:options="field.options"
+		:helptext="field.helptext"
+		@update:modelValue="($event: any) => field?.onUpdate?.($event, denullify(fieldData, field.id), formData)"
+	>
 		{{ field.transform?.(fieldData, modelValue) || fieldData || '' }}
-		<BglField v-model="formData" v-for="(child, ii) in field.children" :key="child.id || ii" :field="child" />
+		<BglField
+			v-model="formData"
+			v-for="(child, ii) in field.children"
+			:key="child.id || ii"
+			:field="child"
+		/>
 	</component>
 </template>
 
 <script lang="ts" setup>
 import {
-	type Field, bindAttrs, classify, SelectInput, TextInput, ToggleInput, CheckInput, iffer, denullify,
+	type Field, bindAttrs, classify, SelectInput, TextInput, ToggleInput, CheckInput, denullify,
 } from '@bagelink/vue';
 
 const props = withDefaults(defineProps<{
@@ -43,6 +58,16 @@ const fieldData = $computed({
 		data[props.field.id] = val;
 		emit('update:modelValue', data);
 	},
-	get: () => (props.field.id ? props.modelValue[props.field.id] : ''),
+	get: () => (props.field.id ? props.modelValue[props.field.id] : props.field.defaultValue || ''),
+});
+
+const vIf = $computed(() => {
+	if (props.field['v-if'] === undefined) return true;
+	if (typeof props.field['v-if'] === 'boolean') return props.field['v-if'];
+	if (typeof props.field['v-if'] === 'string') return true;
+	if (typeof props.field['v-if'] === 'function') {
+		return props.field['v-if']?.(fieldData, formData);
+	}
+	return true;
 });
 </script>

package/src/components/form/BglForm.vue

@@ -1,9 +1,12 @@
 <template>
-	<component :is="id?'div':'form'" ref="form" @submit.prevent="runSubmit">
+	<template v-if="id">
+		<BglField v-for="(field, i) in schema" :key="field.id || `${i}p`" :field="field" v-model="data" />
+	</template>
+	<form v-else ref="form" @submit.prevent="runSubmit">
 		<Title tag="h4" :label="label" v-if="label" />
 		<BglField v-for="(field, i) in schema" :key="field.id || `${i}p`" :field="field" v-model="data" />
 		<slot name="submit" />
-	</component>
+	</form>
 </template>
 
 <script lang="ts" setup>

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

@@ -1,14 +1,24 @@
 <template>
-	<div class="bagel-input" :title="label" :class="{ small: small }">
+	<div
+		class="bagel-input"
+		:title="label"
+		:class="{ small: small }"
+	>
 		<label v-if="label">
 			{{ label }}
 		</label>
-		<VDatepicker ref="datePicker" :auto-apply="true" v-model="date" :enable-time-picker="enableTime" />
+		<VDatepicker
+			ref="datePicker"
+			:auto-apply="true"
+			v-model="date"
+			:enable-time-picker="enableTime"
+			v-bind="extraProps"
+		/>
 	</div>
 </template>
 
 <script setup lang="ts">
-import VDatepicker, { DatePickerInstance } from '@vuepic/vue-datepicker';
+import VDatepicker, { type DatePickerInstance, type VueDatePickerProps } from '@vuepic/vue-datepicker';
 import '@vuepic/vue-datepicker/dist/main.css';
 import { onMounted } from 'vue';
 
@@ -22,6 +32,7 @@ const props = withDefaults(
 		enableTime?: boolean;
 		modelValue?: string | Date;
 		defaultValue?: string | Date;
+		extraProps?: VueDatePickerProps;
 	}>(),
 	{
 		enableTime: false,