qdadm 0.46.0 → 0.46.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "qdadm",
-  "version": "0.46.0",
+  "version": "0.46.1",
   "description": "Vue 3 framework for admin dashboards with PrimeVue",
   "author": "quazardous",
   "license": "MIT",

package/src/components/forms/FormInput.vue

@@ -0,0 +1,120 @@
+<script setup>
+/**
+ * FormInput - Auto-renders the appropriate input based on field config
+ *
+ * Takes a field config object and renders the matching PrimeVue component.
+ * Supports hint override but field.type takes precedence if specified.
+ *
+ * Usage:
+ * <FormInput :field="f" v-model="form.data.value[f.name]" />
+ */
+import { computed } from 'vue'
+import InputText from 'primevue/inputtext'
+import InputNumber from 'primevue/inputnumber'
+import Textarea from 'primevue/textarea'
+import Select from 'primevue/select'
+import Checkbox from 'primevue/checkbox'
+import Password from 'primevue/password'
+import DatePicker from 'primevue/datepicker'
+
+const props = defineProps({
+  field: { type: Object, required: true },
+  modelValue: { default: null },
+  hint: { type: String, default: null }  // Optional type hint override
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const value = computed({
+  get: () => props.modelValue,
+  set: (v) => emit('update:modelValue', v)
+})
+
+// Resolve component type: field.type > hint > 'text'
+const inputType = computed(() => props.field?.type || props.hint || 'text')
+
+// Date value with string ↔ Date conversion for DatePicker
+const dateValue = computed({
+  get: () => {
+    const v = props.modelValue
+    if (!v) return null
+    if (v instanceof Date) return v
+    // Convert ISO string to Date
+    return new Date(v)
+  },
+  set: (v) => {
+    // Convert Date back to ISO string for storage
+    emit('update:modelValue', v ? v.toISOString() : null)
+  }
+})
+</script>
+
+<template>
+  <InputText
+    v-if="inputType === 'text' || inputType === 'email'"
+    v-model="value"
+    :placeholder="field.placeholder"
+    :disabled="field.disabled"
+    :readonly="field.readonly"
+    class="w-full"
+  />
+  <Password
+    v-else-if="inputType === 'password'"
+    v-model="value"
+    :placeholder="field.placeholder"
+    :disabled="field.disabled"
+    :feedback="false"
+    toggleMask
+    class="w-full"
+  />
+  <InputNumber
+    v-else-if="inputType === 'number'"
+    v-model="value"
+    :placeholder="field.placeholder"
+    :disabled="field.disabled"
+    :readonly="field.readonly"
+    :useGrouping="false"
+    class="w-full"
+  />
+  <Textarea
+    v-else-if="inputType === 'textarea'"
+    v-model="value"
+    :placeholder="field.placeholder"
+    :disabled="field.disabled"
+    :readonly="field.readonly"
+    rows="3"
+    class="w-full"
+  />
+  <Select
+    v-else-if="inputType === 'select'"
+    v-model="value"
+    :options="field.options"
+    :optionLabel="field.optionLabel"
+    :optionValue="field.optionValue"
+    :placeholder="field.placeholder"
+    :disabled="field.disabled"
+    class="w-full"
+  />
+  <Checkbox
+    v-else-if="inputType === 'boolean'"
+    v-model="value"
+    :disabled="field.disabled"
+    binary
+  />
+  <DatePicker
+    v-else-if="inputType === 'date' || inputType === 'datetime'"
+    v-model="dateValue"
+    :placeholder="field.placeholder"
+    :disabled="field.disabled"
+    :showTime="inputType === 'datetime'"
+    class="w-full"
+  />
+  <!-- Fallback to text -->
+  <InputText
+    v-else
+    v-model="value"
+    :placeholder="field.placeholder"
+    :disabled="field.disabled"
+    class="w-full"
+  />
+</template>

package/src/components/forms/FormPage.vue

@@ -234,7 +234,7 @@ function onGuardStay() {
     <!-- Unsaved Changes Dialog -->
     <UnsavedChangesDialog
       v-if="guardDialog"
-      v-model:visible="guardDialog.visible"
+      :visible="guardDialog.visible.value"
       :saving="saving"
       :hasOnSave="!!guardDialog.onSave"
       @saveAndLeave="onGuardSaveAndLeave"

package/src/components/index.js

@@ -22,6 +22,7 @@ export { default as DefaultToaster } from './layout/defaults/DefaultToaster.vue'
 // Forms
 export { default as FormPage } from './forms/FormPage.vue'
 export { default as FormField } from './forms/FormField.vue'
+export { default as FormInput } from './forms/FormInput.vue'
 export { default as FormActions } from './forms/FormActions.vue'
 export { default as FormTabs } from './forms/FormTabs.vue'
 export { default as FormTab } from './forms/FormTab.vue'

package/src/composables/useFormPageBuilder.js

@@ -539,6 +539,8 @@ export function useFormPageBuilder(config = {}) {
       required = false,
       default: defaultValue,
       options = null,
+      optionLabel = 'label',
+      optionValue = 'value',
       placeholder = null,
       disabled = false,
       readonly = false,
@@ -559,6 +561,8 @@ export function useFormPageBuilder(config = {}) {
       required,
       default: defaultValue,
       options,
+      optionLabel,
+      optionValue,
       placeholder,
       disabled,
       readonly,