@omnitend/dashboard-for-laravel 0.22.0 → 0.24.0

package/resources/js/components/extended/DXField.vue

@@ -61,8 +61,8 @@
         <DFormCheckbox
             v-else
             v-model="fieldValue"
-            :disabled="isDisabled || isReadonly"
-            v-bind="field.inputProps"
+            :disabled="isDisabled || isReadonly || isPlaintext"
+            v-bind="controlPropsWithGuards"
         >
             <DXFieldLabel :label="resolvedLabel" class="visually-hidden" />
         </DFormCheckbox>
@@ -97,8 +97,8 @@
         <DFormCheckbox
             v-else
             v-model="fieldValue"
-            :disabled="isDisabled || isReadonly"
-            v-bind="field.inputProps"
+            :disabled="isDisabled || isReadonly || isPlaintext"
+            v-bind="controlPropsWithGuards"
         >
             <DXFieldLabel :label="resolvedLabel" :info="resolvedInfo" />
         </DFormCheckbox>
@@ -159,8 +159,8 @@
         <DXSwitch
             v-else
             v-model="switchModel"
-            :disabled="isDisabled || isReadonly"
-            v-bind="field.inputProps"
+            :disabled="isDisabled || isReadonly || isPlaintext"
+            v-bind="controlPropsWithGuards"
         >
             <DXFieldLabel
                 :label="switchText"
@@ -201,8 +201,8 @@
         <DXSwitch
             v-else
             v-model="switchModel"
-            :disabled="isDisabled || isReadonly"
-            v-bind="field.inputProps"
+            :disabled="isDisabled || isReadonly || isPlaintext"
+            v-bind="controlPropsWithGuards"
         >
             <DXFieldLabel :label="switchText" :info="resolvedInfo" />
         </DXSwitch>
@@ -306,8 +306,8 @@
             v-model="fieldValue"
             :field="field"
             :model="model"
-            :disabled="isDisabled || isReadonly"
-            v-bind="field.inputProps"
+            :disabled="isDisabled || isReadonly || isPlaintext"
+            v-bind="controlPropsWithGuards"
         />
 
         <!-- Textarea. Error clearing happens in the v-model setter. -->
@@ -319,10 +319,35 @@
             :rows="field.rows || 3"
             :state="fieldState"
             :disabled="isDisabled"
-            :readonly="isReadonly"
-            v-bind="field.inputProps"
+            :readonly="isReadonly || isPlaintext"
+            :plaintext="isPlaintext"
+            v-bind="inputPropsWithGuards"
         />
 
+        <!-- Searchable select: type to filter a long option list, while the
+             model keeps the option's VALUE (an id), not the typed text. The
+             `autocomplete` type below models the text, so it can't back a
+             foreign key. -->
+        <template v-else-if="field.type === 'select' && field.searchable">
+            <DAutocomplete
+                v-if="searchableOptionsReady"
+                v-model="fieldValue"
+                :options="resolvedOptions"
+                :placeholder="field.placeholder"
+                :required="field.required"
+                :state="fieldState"
+                :disabled="isDisabled || isReadonly || isPlaintext"
+                open-on-focus
+                v-bind="controlPropsWithGuards"
+            />
+            <!-- BAutocomplete resolves the input's display text from the model
+                 AT MOUNT and doesn't re-derive it when `options` arrive later,
+                 so an async list would leave the raw id showing ("51" instead
+                 of "Waitrose") — and a long list is exactly the case that loads
+                 async. Hold the control until the options are in. -->
+            <DFormInput v-else placeholder="Loading…" disabled />
+        </template>
+
         <!-- Select (sync or async options) -->
         <DFormSelect
             v-else-if="field.type === 'select'"
@@ -330,8 +355,8 @@
             :required="field.required"
             :options="resolvedOptions"
             :state="fieldState"
-            :disabled="isDisabled || isReadonly"
-            v-bind="field.inputProps"
+            :disabled="isDisabled || isReadonly || isPlaintext"
+            v-bind="controlPropsWithGuards"
         />
 
         <!-- Radio group -->
@@ -341,8 +366,8 @@
             :options="resolvedOptions"
             :required="field.required"
             :state="fieldState"
-            :disabled="isDisabled || isReadonly"
-            v-bind="field.inputProps"
+            :disabled="isDisabled || isReadonly || isPlaintext"
+            v-bind="controlPropsWithGuards"
         />
 
         <!-- File / image upload -->
@@ -352,8 +377,8 @@
                 :accept="field.accept || (field.type === 'image' ? 'image/*' : undefined)"
                 :required="field.required"
                 :state="fieldState"
-                :disabled="isDisabled || isReadonly"
-                v-bind="field.inputProps"
+                :disabled="isDisabled || isReadonly || isPlaintext"
+                v-bind="controlPropsWithGuards"
                 @change="handleFileChange"
             />
             <img
@@ -384,8 +409,9 @@
                 :max="field.max"
                 :state="fieldState"
                 :disabled="isDisabled"
-                :readonly="isReadonly"
-                v-bind="field.inputProps"
+                :readonly="isReadonly || isPlaintext"
+                :plaintext="isPlaintext"
+                v-bind="inputPropsWithGuards"
                 @input="handleCurrencyInput"
                 @focus="handleCurrencyFocus"
                 @blur="handleCurrencyBlur"
@@ -401,8 +427,9 @@
                 :max="field.max"
                 :state="fieldState"
                 :disabled="isDisabled"
-                :readonly="isReadonly"
-                v-bind="field.inputProps"
+                :readonly="isReadonly || isPlaintext"
+                :plaintext="isPlaintext"
+                v-bind="inputPropsWithGuards"
             />
 
             <template v-if="field.type === 'percentage'" #append>
@@ -422,9 +449,10 @@
                 :placeholder="field.placeholder"
                 :state="fieldState"
                 :disabled="isDisabled"
-                :readonly="isReadonly"
+                :readonly="isReadonly || isPlaintext"
+                :plaintext="isPlaintext"
                 autocomplete="off"
-                v-bind="field.inputProps"
+                v-bind="inputPropsWithGuards"
             />
             <datalist :id="datalistId">
                 <option
@@ -437,6 +465,31 @@
             </datalist>
         </template>
 
+        <!-- Password with a reveal toggle (the default for `type: "password"`).
+             Typing a long password blind is the one place the eye really earns
+             its keep, so it's opt-out (`revealable: false`) rather than opt-in. -->
+        <DInputGroup v-else-if="isRevealablePassword">
+            <DFormInput
+                v-model="textFieldModel"
+                :required="field.required"
+                :placeholder="field.placeholder"
+                :state="fieldState"
+                :disabled="isDisabled"
+                :readonly="isReadonly"
+                v-bind="passwordInputProps"
+            />
+            <template #append>
+                <DButton
+                    variant="outline-secondary"
+                    :icon="passwordRevealed ? 'eye-slash' : 'eye'"
+                    :aria-label="passwordRevealed ? 'Hide password' : 'Show password'"
+                    :aria-pressed="passwordRevealed"
+                    :disabled="isDisabled"
+                    @click="passwordRevealed = !passwordRevealed"
+                />
+            </template>
+        </DInputGroup>
+
         <!-- Text-based inputs (text/email/password/number/url/tel/date/time/datetime) -->
         <DFormInput
             v-else
@@ -449,8 +502,9 @@
             :max="field.max"
             :state="fieldState"
             :disabled="isDisabled"
-            :readonly="isReadonly"
-            v-bind="field.inputProps"
+            :readonly="isReadonly || isPlaintext"
+            :plaintext="isPlaintext"
+            v-bind="inputPropsWithGuards"
         />
 
         <!-- Validation error -->
@@ -505,6 +559,8 @@ import DXSwitch from "./DXSwitch.vue";
 import DFormInvalidFeedback from "../base/DFormInvalidFeedback.vue";
 import DFormText from "../base/DFormText.vue";
 import DInputGroup from "../base/DInputGroup.vue";
+import DAutocomplete from "../base/DAutocomplete.vue";
+import DButton from "../base/DButton.vue";
 import DXFieldLabel from "./DXFieldLabel.vue";
 import type { UseFormReturn } from "../../composables/useForm";
 import type { FieldDefinition, FieldOption, FieldType, LabelCols } from "../../types";
@@ -880,6 +936,77 @@ const isDisabled = computed(() => {
 
 const isReadonly = computed(() => resolveMaybe(props.field.readonly) ?? false);
 
+// Display-only: the value as static text rather than a control. bvn's
+// `plaintext` only swaps the class, so pair it with `readonly` at every call
+// site — otherwise the "static text" is still editable.
+const isPlaintext = computed(() => resolveMaybe(props.field.plaintext) ?? false);
+
+const passwordRevealed = ref(false);
+
+// See the template: the searchable select can't render before its options
+// resolve, or it shows the raw id instead of the option's label.
+const searchableOptionsReady = computed(
+    () => !props.field.optionsLoader || loadedOptions.value !== null,
+);
+
+const isRevealablePassword = computed(
+    () =>
+        props.field.type === "password" &&
+        (props.field.revealable ?? true) &&
+        !isPlaintext.value,
+);
+
+// DXTable reuses ONE DXField instance per field key across modal opens (the
+// v-for is keyed on `field.key`, which is stable across rows) and swaps in a
+// fresh form per record. Without this, revealing row A's password leaves row
+// B's — and the create form's — showing in clear text.
+watch(
+    () => [props.form, props.field.key],
+    () => {
+        passwordRevealed.value = false;
+    },
+);
+
+/*
+ * `inputProps` is an escape hatch that deliberately wins over the field's own
+ * bindings — it is spread last. But it must not win over the guarantees the
+ * field makes, or those guarantees are only documentation: a `plaintext` field
+ * that `inputProps: { readonly: false }` re-opens for editing isn't read-only,
+ * and a password whose `type` `inputProps` sets to "text" is unmasked under a
+ * toggle still reading "Show password". So the guards are re-applied ON TOP of
+ * inputProps. Everything else in inputProps still passes through, and a field
+ * that isn't plaintext/readonly is untouched — `inputProps: { readonly: true }`
+ * still works as before.
+ */
+
+// For controls with a native readonly state (the text family + textarea).
+const inputPropsWithGuards = computed(() => {
+    const merged: Record<string, any> = { ...props.field.inputProps };
+    if (isPlaintext.value) {
+        merged.plaintext = true;
+        merged.readonly = true;
+    } else if (isReadonly.value) {
+        merged.readonly = true;
+    }
+    return merged;
+});
+
+// For controls with NO native readonly state (select/radio/checkbox/switch/
+// file/component), where read-only is expressed as `disabled`.
+const controlPropsWithGuards = computed(() => {
+    const merged: Record<string, any> = { ...props.field.inputProps };
+    if (isDisabled.value || isReadonly.value || isPlaintext.value) {
+        merged.disabled = true;
+    }
+    return merged;
+});
+
+// The reveal toggle owns the password input's `type`.
+const passwordInputProps = computed(() => ({
+    ...inputPropsWithGuards.value,
+    type: passwordRevealed.value ? "text" : "password",
+}));
+
 const inputType = computed<string>(() => {
     const type: FieldType = props.field.type;
     if (type === "datetime") return "datetime-local";