@bagelink/vue 1.12.57 → 1.12.61

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "1.12.57",
+  "version": "1.12.61",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Bagel Studio",

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

@@ -31,6 +31,8 @@ const props = withDefaults(defineProps<{
 	format?: FormatType
 	clearable?: boolean
 	required?: boolean
+	label?: string
+	helptext?: string
 }>(), {
 	clearable: true,
 })
@@ -218,6 +220,8 @@ defineExpose({
 		:class="{ 'bg-transparent': disabled }"
 		@touchmove.prevent
 	>
+		<label v-if="label" class="label">{{ label }}</label>
+		<p v-if="helptext" class="helptext">{{ helptext }}</p>
 		<Btn
 			v-if="clearable && !disabled"
 			flat
@@ -258,6 +262,19 @@ defineExpose({
 	border-radius: var(--input-border-radius);
 }
 
+.bgl_input.signature-pad > .label {
+	display: block;
+	font-size: 0.8rem;
+	padding: 0.25rem 0.5rem 0;
+}
+
+.bgl_input.signature-pad > .helptext {
+	font-size: 0.75rem;
+	padding: 0.15rem 0.5rem 0.25rem;
+	margin: 0;
+	line-height: 1.4;
+}
+
 .bgl_input.signature-pad .canvas[disabled] {
 	background: var(--input-disabled-bg);
 	border: 1px solid var(--bgl-gray);

package/src/dialog/Dialog.vue

@@ -399,12 +399,18 @@ dialog.dialog-right[style*="--dialog-width: 100%"] {
 	width: calc(100vw - 2rem);
 }
 
+dialog.dialog-left .grid-dialog,
+	dialog.dialog-right .grid-dialog {
+		height: 100%
+	}
+
 /* Mobile adjustments */
 @media screen and (max-width: 910px) {
 
 	dialog.dialog-left .grid-dialog,
 	dialog.dialog-right .grid-dialog {
 		max-height: 100vh;
+		height: unset !important;
 	}
 
 	dialog.dialog-left,

package/src/form-flow/FormFlow.vue

@@ -11,6 +11,7 @@ import NumberInput from '../components/form/inputs/NumberInput.vue'
 import PasswordInput from '../components/form/inputs/PasswordInput.vue'
 import RadioGroup from '../components/form/inputs/RadioGroup.vue'
 import RichText from '../components/form/inputs/RichText/index.vue'
+import SelectBtn from '../components/form/inputs/SelectBtn.vue'
 import SelectInput from '../components/form/inputs/SelectInput.vue'
 import TelInput from '../components/form/inputs/TelInput.vue'
 import TextInput from '../components/form/inputs/TextInput.vue'
@@ -194,7 +195,13 @@ function generateLabel(key: string, field: FieldBuilder): string {
 		.join(' ')
 }
 
-function getFieldComponent(type: string) {
+function getFieldComponent(fieldOrType: FieldBuilder | string) {
+	// display: 'btn' on select/multiselect renders as SelectBtn
+	if (typeof fieldOrType !== 'string' && (fieldOrType._type === 'select' || fieldOrType._type === 'multiselect') && fieldOrType._config.display === 'btn') {
+		return SelectBtn
+	}
+
+	const type = typeof fieldOrType === 'string' ? fieldOrType : fieldOrType._type
 	const componentMap: Record<string, any> = {
 		text: TextInput,
 		email: EmailInput,
@@ -435,7 +442,7 @@ defineExpose({
 					</template>
 
 					<!-- Default field rendering -->
-					<component :is="getFieldComponent(field._type)" v-else v-bind="getFieldProps(field, key)" />
+					<component :is="getFieldComponent(field)" v-else v-bind="getFieldProps(field, key)" />
 				</slot>
 			</div>
 

package/src/form-flow/form-flow.ts

@@ -326,8 +326,8 @@ export const $ = {
 
 	select<T extends string = string>(
 		optionsOrLabel: SelectOptions<T> | string,
-		labelOrOptionsOrConfig?: string | SelectOptions<T> | (BaseFieldConfig & { searchable?: boolean }),
-		config?: BaseFieldConfig & { searchable?: boolean }
+		labelOrOptionsOrConfig?: string | SelectOptions<T> | (BaseFieldConfig & { searchable?: boolean, display?: 'btn', thin?: boolean, outline?: boolean }),
+		config?: BaseFieldConfig & { searchable?: boolean, display?: 'btn', thin?: boolean, outline?: boolean }
 	): FieldBuilder<T> {
 		// Label-first: $.select('Country', ['USA', 'Canada'])
 		if (typeof optionsOrLabel === 'string') {
@@ -341,8 +341,8 @@ export const $ = {
 
 	multiselect<T extends string = string>(
 		optionsOrLabel: SelectOptions<T> | string,
-		labelOrOptionsOrConfig?: string | SelectOptions<T> | (BaseFieldConfig & { searchable?: boolean }),
-		config?: BaseFieldConfig & { searchable?: boolean }
+		labelOrOptionsOrConfig?: string | SelectOptions<T> | (BaseFieldConfig & { searchable?: boolean, display?: 'btn', thin?: boolean, outline?: boolean }),
+		config?: BaseFieldConfig & { searchable?: boolean, display?: 'btn', thin?: boolean, outline?: boolean }
 	): FieldBuilder<T[]> {
 		// Label-first: $.multiselect('Tags', ['tech', 'news'])
 		if (typeof optionsOrLabel === 'string') {