srcdev-nuxt-components 9.6.8 → 9.6.9

package/app/components/05.forms/input-text/{InputPasswordWithLabel.vue → InputPasswordField.vue}

@@ -1,6 +1,7 @@
 <template>
-  <InputTextWithLabel
+  <InputTextField
     v-model="modelValue"
+    class="input-password-field"
     :type="inputType"
     :maxlength
     :name
@@ -9,14 +10,15 @@
     :error-message
     :field-has-error
     :required
+    :autocomplete
     :style-class-passthrough
     :theme
     :input-variant
   >
-    <template #descriptionHtml>
+    <template v-if="slots.descriptionHtml" #descriptionHtml>
       <slot name="descriptionHtml"></slot>
     </template>
-    <template #descriptionText>
+    <template v-if="slots.descriptionText" #descriptionText>
       <slot name="descriptionText"></slot>
     </template>
 
@@ -30,18 +32,19 @@
         @click.stop.prevent="toggleDisplayPassword"
       >
         <template #iconOnly>
-          <Icon v-if="displayPassword" name="radix-icons:eye-none" class="icon" />
-          <Icon v-else name="radix-icons:eye-open" class="icon" />
+          <Icon v-if="displayPassword" name="radix-icons:eye-none" class="input-password-field-icon" />
+          <Icon v-else name="radix-icons:eye-open" class="input-password-field-icon" />
         </template>
       </InputButton>
     </template>
-  </InputTextWithLabel>
+  </InputTextField>
 </template>
 
 <script setup lang="ts">
 import type { FormUiTheme, InputUiVariant } from "~/types/forms/types.forms";
 
 interface Props {
+  /** Ignored: the toggle sets the type. Declared so a passed `type` can't override it. */
   type?: "text" | "password";
   maxlength?: number;
   name: string;
@@ -50,12 +53,11 @@ interface Props {
   errorMessage: object | string;
   fieldHasError?: boolean;
   required?: boolean;
+  autocomplete?: string;
   styleClassPassthrough?: string | string[];
   theme?: FormUiTheme;
   inputVariant?: InputUiVariant;
-  /** Accessible name for the toggle button while the password is hidden. */
   showPasswordText?: string;
-  /** Accessible name for the toggle button while the password is visible. */
   hidePasswordText?: string;
 }
 
@@ -65,6 +67,7 @@ const props = withDefaults(defineProps<Props>(), {
   placeholder: "",
   fieldHasError: false,
   required: false,
+  autocomplete: "current-password",
   styleClassPassthrough: () => [],
   theme: "default",
   inputVariant: "normal",
@@ -72,21 +75,15 @@ const props = withDefaults(defineProps<Props>(), {
   hidePasswordText: "Hide password",
 });
 
-const modelValue = defineModel<string>({ required: true });
-
-const { updateElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+const slots = useSlots();
 
-const inputType = computed<"text" | "password">(() => {
-  return displayPassword.value ? "text" : "password";
-});
+const modelValue = defineModel<string>({ required: true });
 
 const displayPassword = ref(false);
-const buttonText = computed(() => {
-  return displayPassword.value ? props.hidePasswordText : props.showPasswordText;
-});
+const inputType = computed<"text" | "password">(() => (displayPassword.value ? "text" : "password"));
+const buttonText = computed(() => (displayPassword.value ? props.hidePasswordText : props.showPasswordText));
+
 const toggleDisplayPassword = () => {
   displayPassword.value = !displayPassword.value;
 };
-
-updateElementClasses(["has-right-button"]);
 </script>

package/app/components/05.forms/input-text/{InputTextCore.vue → InputText.vue}

@@ -3,42 +3,42 @@
     class="input-text-wrapper"
     data-testid="input-text-wrapper"
     :data-theme="theme"
+    :data-input-variant="inputVariant"
     :data-invalid="fieldHasError ? '' : null"
+    :data-dirty="isDirty ? '' : null"
+    :data-active="isActive ? '' : null"
+    :data-readonly="readonly ? '' : null"
     :data-inputmode="inputmode"
-    :class="[
-      inputVariant,
-      { dirty: isDirty },
-      { active: isActive },
-      { error: fieldHasError },
-      { 'has-left-slot': slots.left },
-      { 'has-right-slot': slots.right },
-    ]"
+    :data-has-left-slot="slots.left ? '' : null"
+    :data-has-right-slot="slots.right ? '' : null"
   >
-    <div v-if="slots.left" class="slot left-slot">
+    <div v-if="slots.left" class="input-text-slot input-text-slot-left">
       <slot name="left"></slot>
     </div>
 
     <input
       :id
-      ref="inputField"
       v-model="modelValue"
       :type
       :placeholder
       :name
       :required
+      :readonly
+      :autocomplete
       :maxlength
       :min
       :max
-      :class="['input-text-core', elementClasses, { dirty: isDirty }, { active: isActive }]"
+      :class="['input-text', elementClasses]"
       :aria-invalid="fieldHasError ? 'true' : undefined"
-      :aria-describedby
+      :aria-describedby="ariaDescribedby || undefined"
       :pattern="inputPattern"
       :inputmode
-      @focusin="updateFocus(true)"
-      @focusout="updateFocus(false)"
+      @beforeinput="filterInput"
+      @focusin="isActive = true"
+      @focusout="isActive = false"
     />
 
-    <div v-if="slots.right" class="slot right-slot">
+    <div v-if="slots.right" class="input-text-slot input-text-slot-right">
       <slot name="right"></slot>
     </div>
   </div>
@@ -51,13 +51,13 @@ interface Props {
   type?: InputTypesText;
   inputmode?: InputMode;
   maxlength?: number;
-  /** Passed straight through to the native input — meaningful for type="date"/"number" etc. */
   min?: string | number;
-  /** Passed straight through to the native input — meaningful for type="date"/"number" etc. */
   max?: string | number;
   id: string;
   name: string;
   required?: boolean;
+  readonly?: boolean;
+  autocomplete?: string;
   placeholder?: string;
   fieldHasError?: boolean;
   styleClassPassthrough?: string | string[];
@@ -73,6 +73,8 @@ const props = withDefaults(defineProps<Props>(), {
   min: undefined,
   max: undefined,
   required: false,
+  readonly: false,
+  autocomplete: undefined,
   placeholder: "",
   fieldHasError: false,
   styleClassPassthrough: () => [],
@@ -83,64 +85,32 @@ const props = withDefaults(defineProps<Props>(), {
 
 const slots = useSlots();
 
-const FormUiTheme = computed(() => {
-  return props.fieldHasError ? "error" : props.theme;
-});
-
 const modelValue = defineModel<string>({ required: true });
 const isDirty = defineModel<boolean>("isDirty");
 const isActive = defineModel<boolean>("isActive");
 
-const inputPattern = computed(() => {
-  return props.inputmode === "numeric" ? "[0-9]+" : undefined;
-});
-
-const updateFocus = (isFocused: boolean) => {
-  isActive.value = isFocused;
-};
+const inputPattern = computed(() => (props.inputmode === "numeric" ? "[0-9]+" : undefined));
 
-const inputField = ref<HTMLInputElement | null>(null);
-
-const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
-
-// TODO: Move this to a utility function to allow removeEventListener on unmounted
-// Leaving like this could lead to memory leaks
-const validateInput = () => {
-  if (inputField.value !== null) {
-    inputField.value.addEventListener("beforeinput", (event: InputEvent) => {
-      const beforeValue = modelValue.value;
-      if (event.data === null) {
-        // Handle deletion case
-        return;
-      } else if (event.target) {
-        event.target.addEventListener(
-          "input",
-          () => {
-            if (inputField.value !== null && inputField.value.validity.patternMismatch) {
-              inputField.value.value = beforeValue as string;
-            }
-          },
-          { once: true }
-        );
-      }
-    });
+const filterInput = (event: Event) => {
+  const data = (event as InputEvent).data;
+  if (props.inputmode === "numeric" && data !== null && !/^[0-9]*$/.test(data)) {
+    event.preventDefault();
   }
 };
 
-onMounted(() => {
-  if (props.inputmode === "numeric") validateInput();
-});
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+watch(
+  () => props.styleClassPassthrough,
+  () => {
+    resetElementClasses(props.styleClassPassthrough);
+  }
+);
 </script>
 
 <style lang="css">
 @layer components {
   .input-text-wrapper {
-    /* Public --input-text-* tokens, inline-fallback to the shared --theme-* tokens (see
-       theming-component-token-pattern.md) — overriding one here doesn't touch every other themed
-       input/control that also reads --theme-input-surface/--theme-border. --_surface etc. are
-       private locals purely so the rest of this rule can reuse the resolved value without
-       repeating the fallback chain at every property — they are not themselves an override point,
-       see CONSUMER-STYLING.md. */
     --_surface: var(--input-text-surface, var(--theme-input-surface));
     --_border: var(--input-text-border, var(--theme-border));
     --_border-focus: var(--input-text-border-focus, var(--theme-border-focus));
@@ -148,6 +118,8 @@ onMounted(() => {
     display: flex;
     align-items: center;
     gap: var(--input-icon-slot-gap);
+    min-inline-size: 0;
+    max-inline-size: 100%;
     background-color: var(--_surface);
     overflow: hidden;
     transition: all var(--theme-form-transition-duration) ease-in-out;
@@ -155,7 +127,7 @@ onMounted(() => {
     z-index: 2;
     position: relative;
 
-    &.normal {
+    &[data-input-variant="normal"] {
       border: var(--form-element-border-width) solid var(--_border);
       border-radius: var(--form-input-border-radius);
       outline: var(--form-element-outline-width) solid transparent;
@@ -173,30 +145,24 @@ onMounted(() => {
       }
     }
 
-    &.underlined {
+    &[data-input-variant="underlined"] {
       border-bottom: var(--form-element-border-bottom-width-underlined) solid var(--_border);
       padding-inline: var(--input-padding-inline);
     }
 
-    &.has-right-slot:has(.input-button) {
+    &[data-has-right-slot]:has(.input-text-slot-right .input-button) {
       padding-inline-end: 0;
     }
 
-    .slot {
+    .input-text-slot {
       display: flex;
       align-items: center;
       justify-content: center;
+      flex-shrink: 0;
       box-sizing: content-box;
 
+      /* variant="inline" InputButton ships unstyled; the slot supplies its border, colour and outline. */
       .input-button {
-        /* variant="inline" ships with zero border/colour styling by design (see
-           component-inline-action-button.md) — the parent supplies all of it. This rule was
-           always missing the border/colour half of that contract, only ever setting
-           background-color; harmless before InputButton's flat-button redesign, which
-           removed the unscoped base rule that used to accidentally give every variant a real
-           border regardless. Without its own border/color/outline reset, this button now falls
-           through to the browser's UA default <button> chrome (a stark outset border and
-           black/white text) instead of sitting flush with the input. */
         background-color: var(--_surface);
         color: var(--input-text-color, var(--theme-input-text-color-normal));
         border: none;
@@ -222,20 +188,18 @@ onMounted(() => {
       }
     }
 
-    .input-text-core {
+    .input-text {
       all: unset;
       touch-action: manipulation;
       flex-grow: 1;
+      min-inline-size: 0;
 
       color: var(--input-text-color, var(--theme-input-text-color-normal));
       font-family: var(--font-family);
       font-size: var(--input-font-size);
 
-      /* line-height: var(--input-element-line-height); */
-
       padding-block: var(--input-padding-block);
       padding-inline: var(--input-padding-inline);
-      /* height: stretch; */
       min-height: var(--input-min-height);
 
       &::placeholder {

package/app/components/05.forms/input-text/{InputTextAsNumberWithLabel.vue → InputTextAsNumberField.vue}

@@ -1,9 +1,12 @@
 <template>
   <div
-    class="input-text-with-label"
+    class="input-text-as-number-field"
+    :class="elementClasses"
     :data-theme="theme"
+    :data-input-variant="inputVariant"
     :data-invalid="fieldHasError ? '' : null"
-    :class="[inputVariant, elementClasses, { dirty: isDirty }, { active: isActive }]"
+    :data-dirty="isDirty ? '' : null"
+    :data-active="isActive ? '' : null"
   >
     <InputLabel
       :id
@@ -29,7 +32,7 @@
       </template>
     </InputDescription>
 
-    <InputTextCore
+    <InputText
       :id
       v-model="internalStringValue"
       v-model:is-dirty="isDirty"
@@ -38,14 +41,11 @@
       :maxlength
       :name
       :placeholder
-      :label
-      :error-message
       :field-has-error
       :required
-      :style-class-passthrough="elementClasses"
       :theme
-      inputmode="numeric"
-      :aria-describedby="ariaDescribedby()"
+      :inputmode
+      :aria-describedby="ariaDescribedby() ?? undefined"
       :input-variant
     >
       <template v-if="slots.left" #left>
@@ -54,9 +54,9 @@
           :readonly="(modelValue ?? 0) <= min"
           :is-pending="false"
           :button-text="stepDownText"
-          theme="default"
+          :theme
           variant="inline"
-          @click.stop.prevent="updateValue(-step, (modelValue ?? 0) > min)"
+          @click.stop.prevent="stepBy(-1)"
         >
           <template #iconOnly>
             <slot name="left"></slot>
@@ -69,17 +69,17 @@
           :readonly="(modelValue ?? 0) >= max"
           :is-pending="false"
           :button-text="stepUpText"
-          theme="default"
+          :theme
           variant="inline"
-          @click.stop.prevent="updateValue(step, (modelValue ?? 0) < max)"
+          @click.stop.prevent="stepBy(1)"
         >
           <template #iconOnly>
             <slot name="right"></slot>
           </template>
         </InputButton>
       </template>
-    </InputTextCore>
-    <InputError :id="errorId" :error-message :show-error="fieldHasError" :is-detached="true" />
+    </InputText>
+    <InputError :id="errorId" :error-message :show-error="fieldHasError" :is-detached="true" :input-variant />
   </div>
 </template>
 
@@ -100,9 +100,7 @@ interface Props {
   max: number;
   step?: number;
   inputVariant?: InputUiVariant;
-  /** Accessible name for the decrement button. */
   stepDownText?: string;
-  /** Accessible name for the increment button. */
   stepUpText?: string;
 }
 
@@ -131,71 +129,77 @@ const modelValue = defineModel<number | undefined>({ default: undefined });
 const isActive = ref<boolean>(false);
 const isDirty = ref<boolean>(false);
 
-// Convert between string (for input) and number (for modelValue)
 const internalStringValue = computed({
   get: () => modelValue.value?.toString() ?? "",
   set: (value: string) => {
-    const numericValue = value === "" ? undefined : Number(value);
-    // Only update if it's a valid number or empty string
-    if (value === "" || !isNaN(numericValue as number)) {
-      modelValue.value = numericValue;
+    if (value === "") {
+      modelValue.value = undefined;
+      return;
     }
+    const numericValue = Number(value);
+    if (Number.isFinite(numericValue)) modelValue.value = numericValue;
   },
 });
 
-const { elementClasses, updateElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
-const minLength = computed(() => `${props.max.toString().length + 1}em`);
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
 
-const updateValue = (step: number, withinRangeLimit: boolean) => {
-  if (withinRangeLimit) {
-    const currentValue = modelValue.value ?? 0;
-    modelValue.value = currentValue + step;
+watch(
+  () => props.styleClassPassthrough,
+  () => {
+    resetElementClasses(props.styleClassPassthrough);
   }
-};
+);
+
+const decimalPlaces = (value: number) => (String(value).split(".")[1] ?? "").length;
+const clamp = (value: number) => Math.min(Math.max(value, props.min), props.max);
+
+const inputmode = computed(() => {
+  if (props.min < 0) return "text";
+  return Number.isInteger(props.step) ? "numeric" : "decimal";
+});
+
+const minLength = computed(() => {
+  const longest = Math.max(String(props.min).length, String(props.max).length) + decimalPlaces(props.step);
+  return `${Math.min(longest + 1, 12)}em`;
+});
 
-updateElementClasses(["input-text-as-number", "has-left-button", "has-right-button"]);
+const stepBy = (direction: 1 | -1) => {
+  const current = modelValue.value;
+  if (typeof current !== "number" || !Number.isFinite(current)) {
+    modelValue.value = clamp(0);
+    return;
+  }
+  const stepSize = Math.abs(props.step) || 1;
+  const precision = Math.max(decimalPlaces(stepSize), decimalPlaces(current), decimalPlaces(props.min));
+  const next = clamp(Number((current + direction * stepSize).toFixed(precision)));
+  if (next !== current) modelValue.value = next;
+};
 </script>
 
 <style lang="css">
 @layer components {
-  .input-text-as-number {
-    .input-text-wrapper {
+  .input-text-as-number-field {
+    min-inline-size: 0;
+    overflow-wrap: anywhere;
+
+    .input-text-wrapper[data-input-variant] {
       width: fit-content;
+      max-inline-size: 100%;
       padding-inline: 0;
 
-      &:has(.input-text-as-number) {
-        .slot {
-          margin-inline: 0;
-
-          .input-button {
-            background-color: var(--theme-input-surface);
-
-            &:hover {
-              background-color: var(--theme-input-surface-hover);
-            }
-
-            &.icon-only {
-              .btn-icon {
-                margin: 0;
-              }
-            }
-          }
-
-          &.left-slot {
-            .input-button {
-              border-right: var(--form-element-border-width) solid var(--theme-border);
-            }
-          }
-
-          &.right-slot {
-            .input-button {
-              border-left: var(--form-element-border-width) solid var(--theme-border);
-            }
-          }
-        }
+      .input-text-slot {
+        margin-inline: 0;
+      }
+
+      .input-text-slot-left .input-button {
+        border-inline-end: var(--form-element-border-width) solid var(--input-text-border, var(--theme-border));
+      }
+
+      .input-text-slot-right .input-button {
+        border-inline-start: var(--form-element-border-width) solid var(--input-text-border, var(--theme-border));
       }
 
-      .input-text-core.input-text-as-number {
+      .input-text {
         flex-grow: initial;
         text-align: center;
         width: v-bind(minLength);