vectis-ui 0.12.0 → 0.14.0

package/dist/components/VInput/VInput.d.ts

@@ -1,8 +1,22 @@
+import { FieldLabelPosition } from '../VField/VField.js';
 import { IconSource } from '../VIcon/types.js';
 /** The height of the field: 32, 40 or 48 pixels. */
 export type InputSize = 'sm' | 'md' | 'lg';
 /** The native type of the input, which also decides the keyboard a phone offers. */
 export type InputType = 'text' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'url';
+/**
+ * What the `#control` slot hands over, to bind on the element replacing the input: its id, which
+ * the label points at, the class the field's states are drawn from, the references to the hint
+ * and the error, and the attributes set on the field other than `class` and `style`. `required`
+ * is left out: the replacing element states it in its own way.
+ */
+export type InputControlProps = {
+    id: string;
+    class: string;
+    disabled: boolean;
+    'aria-invalid'?: 'true';
+    'aria-describedby'?: string;
+} & Record<string, unknown>;
 interface InputProps {
     /** The height of the field: 32, 40 or 48 pixels. */
     size?: InputSize;
@@ -28,13 +42,28 @@ interface InputProps {
      * but the field keeps its ordinary look and its clear cross.
      */
     noTyping?: boolean;
-    /** The label above the field, tied to it so that clicking it focuses the field. */
+    /** The label, tied to the field so that clicking it focuses the field. */
     label?: string;
     /**
      * A line of help under the field. It is tied to the input for assistive
      * technology, so it is read out along with the label.
      */
     hint?: string;
+    /**
+     * A message saying what is wrong with the value, shown in place of the hint so that the field
+     * does not grow. It marks the field invalid, is read along with it, and is announced when it
+     * appears or changes.
+     */
+    error?: string;
+    /** Marks the field as required: an asterisk follows the label, and the input is `required`. */
+    required?: boolean;
+    /** Hides the label visually. It still names the field for assistive technology. */
+    hideLabel?: boolean;
+    /**
+     * Where the label sits: above the field (`top`, the default), or at its start, in a column of
+     * its own, moving back above when there is not room for both.
+     */
+    labelPosition?: FieldLabelPosition;
     /**
      * An icon inside the field, at the start. It is decorative by default and becomes a real
      * button as soon as a `@click:icon-start` listener is attached, in which case it needs
@@ -103,11 +132,27 @@ type __VLS_Slots = {
      * the end icon.
      */
     'value-end'?(): unknown;
+    /**
+     * Replaces the input with another control, for a field composed on top of this one: VSelect
+     * puts its button here. Bind `controlProps` on it; the field then draws its focus, invalid and
+     * disabled states from that control. The model, the limit and the counter apply to the input
+     * alone.
+     */
+    control?(props: {
+        controlProps: InputControlProps;
+    }): unknown;
     /**
      * Content at the end of the field, which replaces `iconEnd`. It is hidden while
      * the field is loading, the spinner taking that place.
      */
     end?(): unknown;
+    /**
+     * Content at the end of the hint's line, under the field. Bind `id` on it: it joins the
+     * field's description, after the error and the hint.
+     */
+    meta?(props: {
+        id: string;
+    }): unknown;
 };
 type __VLS_ModelProps = {
     /** The value, typed as text or a number rather than text alone. */
@@ -134,14 +179,18 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {
 }>, {
     loading: boolean;
     label: string;
+    error: string;
     size: InputSize;
     type: InputType;
     compact: boolean;
-    disabled: boolean;
     iconStart: IconSource;
     iconEnd: IconSource;
+    disabled: boolean;
+    required: boolean;
     invalid: boolean;
     hint: string;
+    hideLabel: boolean;
+    labelPosition: FieldLabelPosition;
     readonly: boolean;
     noTyping: boolean;
     iconStartLabel: string;

package/dist/components/VInput/VInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"VInput.js","names":[],"sources":["../../../src/components/VInput/VInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @core\n/**\n * Native input owns typing and validity. JavaScript bridges the model and restores focus after\n * the clear button disappears.\n */\nimport { computed, inject, ref } from 'vue'\n\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconName, iconProps } from '../VIcon/iconProps'\nimport { close as closeIcon } from '../VIcon/icons/close'\nimport type { IconSource } from '../VIcon/types'\nimport VSpinner from '../VSpinner/VSpinner.vue'\nimport VTypography from '../VTypography/VTypography.vue'\n\nimport { useFieldIds } from '../../composables/useFieldIds'\nimport { useIconClickHandlers } from '../../composables/useIconClickHandlers'\nimport { useClearable } from '../../composables/useClearable'\nimport { useControlShape } from '../../composables/useControlShape'\nimport { useRootAttrs } from '../../composables/useRootAttrs'\nimport { useTextLimit } from '../../composables/useTextLimit'\nimport { useMessages } from '../../i18n/state'\n\nimport { inputGroupKey } from './context'\n\n/** The height of the field: 32, 40 or 48 pixels. */\nexport type InputSize = 'sm' | 'md' | 'lg'\n\n/** The native type of the input, which also decides the keyboard a phone offers. */\nexport type InputType = 'text' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'url'\n\ninterface InputProps {\n  /** The height of the field: 32, 40 or 48 pixels. */\n  size?: InputSize\n  /** Takes 4px off the height, leaving the padding, the text and the icons as they are. */\n  compact?: boolean\n  /**\n   * The native type of the input, which is also what tells a phone which keyboard to\n   * offer: a numeric pad for `number`, an @ key for `email`.\n   */\n  type?: InputType\n  /** Marks the field as invalid whatever the browser thinks. */\n  invalid?: boolean\n  /** Makes the field unusable, greyed out through the colour tokens. */\n  disabled?: boolean\n  /**\n   * Shows the value without allowing it to be changed. The field can still be\n   * focused and copied from, and it hides the clear button, unless `clearVisible`\n   * answers that question explicitly.\n   */\n  readonly?: boolean\n  /**\n   * Refuses the keyboard without drawing the field as read-only: the native attribute is set,\n   * but the field keeps its ordinary look and its clear cross.\n   */\n  noTyping?: boolean\n  /** The label above the field, tied to it so that clicking it focuses the field. */\n  label?: string\n  /**\n   * A line of help under the field. It is tied to the input for assistive\n   * technology, so it is read out along with the label.\n   */\n  hint?: string\n  /**\n   * An icon inside the field, at the start. It is decorative by default and becomes a real\n   * button as soon as a `@click:icon-start` listener is attached, in which case it needs\n   * `iconStartLabel`.\n   */\n  iconStart?: IconSource\n  /**\n   * The same at the end of the field. The `#end` slot replaces it, and the loading\n   * spinner takes its place while it turns.\n   */\n  iconEnd?: IconSource\n  /** What the start icon does, in words, once it is clickable. */\n  iconStartLabel?: string\n  /** What the end icon does, in words, once it is clickable. */\n  iconEndLabel?: string\n  /** Shows a spinner at the end of the field, in place of the end icon or slot. */\n  loading?: boolean\n  /**\n   * What screen readers announce while the spinner turns. It falls back to the\n   * design system dictionary.\n   */\n  loadingText?: string\n  /**\n   * Offers a cross that empties the field. It appears when there is something to\n   * clear and the field can be edited.\n   */\n  clearable?: boolean\n  /**\n   * Decides whether the cross is shown, instead of letting the field work it out\n   * from its own content (a read-only field included).\n   *\n   * It exists for the components built on top of this one, where what there is to\n   * clear is not the text: VCombobox holds its selection as chips beside the field,\n   * and a read-only date or time picker changes its value through a panel rather\n   * than by typing.\n   */\n  clearVisible?: boolean\n  /** What the clear button does, in words. It falls back to the design system dictionary. */\n  clearLabel?: string\n  /**\n   * The maximum number of characters. By default this is the browser's own limit,\n   * which simply refuses anything beyond it.\n   */\n  maxlength?: number\n  /**\n   * Turns that limit into a soft one: the reader may type past it, and the field goes into\n   * error instead of silently refusing the keystrokes.\n   */\n  softLimit?: boolean\n  /**\n   * Shows how much has been typed, at the end of the field: \"12/80\" against a limit,\n   * or just \"12\" without one.\n   */\n  counter?: boolean\n}\n\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<InputProps>(), {\n  size: 'md',\n  compact: false,\n  type: 'text',\n  invalid: false,\n  disabled: false,\n  readonly: false,\n  label: undefined,\n  hint: undefined,\n  iconStart: undefined,\n  iconEnd: undefined,\n  iconStartLabel: undefined,\n  iconEndLabel: undefined,\n  loading: false,\n  loadingText: undefined,\n  clearable: false,\n  clearVisible: undefined,\n  clearLabel: undefined,\n  maxlength: undefined,\n  softLimit: false,\n  noTyping: false,\n  counter: false,\n})\n\nconst emit = defineEmits<{\n  /** The start icon was clicked. Attaching this listener is what makes it a button. */\n  'click:icon-start': [event: MouseEvent]\n  /** The end icon was clicked. Attaching this listener is what makes it a button. */\n  'click:icon-end': [event: MouseEvent]\n  /** The clear button was pressed. The field has already been emptied. */\n  clear: []\n}>()\n\ndefineSlots<{\n  /**\n   * Content at the start of the field, rendered after `iconStart` rather than in its place,\n   * which lets a field composed on top of this one put the chips standing for its values here\n   * beside an icon it still wants drawn.\n   */\n  start?(): unknown\n  /**\n   * Controls of your own inside the field, placed before the field's own: the clear cross and\n   * the end icon.\n   */\n  'value-end'?(): unknown\n  /**\n   * Content at the end of the field, which replaces `iconEnd`. It is hidden while\n   * the field is loading, the spinner taking that place.\n   */\n  end?(): unknown\n}>()\n\n/** The value, typed as text or a number rather than text alone. */\nconst model = defineModel<string | number>({ default: '' })\n\n/**\n * The value seen as text. Every measurement of its length; the counter, the soft limit, whether\n * the clear cross has anything to clear; goes through this, since a number has no length of its\n * own.\n */\nconst modelText = computed(() => String(model.value ?? ''))\n\nconst { attrs, rootClass, rootStyle, forwardedAttrs: restAttrs } = useRootAttrs()\n\n// `disabled` is the one read as an or, the two answers being cumulative (VInput/context.ts).\nconst group = inject(inputGroupKey, null)\nconst {\n  size: resolvedSize,\n  compact: resolvedCompact,\n  disabled: resolvedDisabled,\n} = useControlShape(props, group)\n\n// The prop keeps priority; what it falls back to is the dictionary, so the default\n// wording follows the language the design system is set to.\nconst m = useMessages()\nconst resolvedClearLabel = computed(() => props.clearLabel ?? m.value.common.clear)\n\nconst { fieldId, hintId, counterId, describedBy } = useFieldIds(\n  attrs,\n  () => !!props.hint,\n  () => props.counter,\n)\n\nconst { hasIconStartHandler, hasIconEndHandler } = useIconClickHandlers({\n  name: 'VInput',\n  iconStartLabel: props.iconStartLabel,\n  iconEndLabel: props.iconEndLabel,\n})\n\nconst controlEl = ref<HTMLInputElement | null>(null)\n\nconst { showClear, onClear } = useClearable({\n  clearable: () => props.clearable,\n  clearVisible: () => props.clearVisible,\n  disabled: () => resolvedDisabled.value,\n  readonly: () => props.readonly,\n  text: () => modelText.value,\n  controlEl,\n  onCleared: () => {\n    model.value = ''\n    emit('clear')\n  },\n})\n\n// The counter and the soft limit both measure `modelText` rather than the model\n// itself, a number having no length.\nconst { counterText, over } = useTextLimit({\n  el: controlEl,\n  text: () => modelText.value,\n  maxlength: () => props.maxlength,\n  softLimit: () => props.softLimit,\n})\n\n// The real input sits inside the wrapper, out of reach of whoever renders this component. These\n// three are how the components built on it get there; VCombobox refocuses the field and selects\n// its text this way.\ndefineExpose({\n  /** Moves the focus to the real input. */\n  focus: (options?: FocusOptions) => controlEl.value?.focus(options),\n  /** Selects everything in the field, as VCombobox does when it reopens its panel. */\n  select: () => controlEl.value?.select(),\n  /** The real `<input>`, for what neither of the two above covers. */\n  el: controlEl,\n})\n</script>\n\n<template>\n  <div\n    class=\"v-input v-control\"\n    :class=\"rootClass\"\n    :style=\"rootStyle\"\n    :data-size=\"resolvedSize\"\n    :data-compact=\"resolvedCompact ? '' : undefined\"\n    :data-disabled=\"resolvedDisabled ? '' : undefined\"\n    :data-readonly=\"readonly ? '' : undefined\"\n  >\n    <VTypography v-if=\"label\" as=\"label\" variant=\"label\" class=\"v-input-label\" :for=\"fieldId\">\n      {{ label }}\n    </VTypography>\n\n    <div class=\"v-input-field\">\n      <!--\n        The start icon is rendered before the slot, where the end icon is the slot's own\n        fallback. That asymmetry is what the composed fields need: VCombobox and VFileInput fill\n        `#start` with the chips standing for their values, which is OTHER content in the same\n        zone rather than another way of drawing the icon.\n      -->\n      <button\n        v-if=\"iconStart && hasIconStartHandler\"\n        type=\"button\"\n        class=\"v-input-action v-field-action v-input-icon-start\"\n        :aria-label=\"iconStartLabel ?? iconName(iconStart)\"\n        :disabled=\"resolvedDisabled\"\n        @click=\"emit('click:icon-start', $event)\"\n      >\n        <VIcon v-bind=\"iconProps(iconStart)\" />\n      </button>\n      <VIcon v-else-if=\"iconStart\" v-bind=\"iconProps(iconStart)\" class=\"v-input-icon-start\" />\n      <slot name=\"start\" />\n\n      <input\n        :id=\"fieldId\"\n        ref=\"controlEl\"\n        v-model=\"model\"\n        :aria-invalid=\"invalid || undefined\"\n        v-bind=\"restAttrs\"\n        class=\"v-input-control\"\n        :type=\"type\"\n        :maxlength=\"softLimit ? undefined : maxlength\"\n        :disabled=\"resolvedDisabled\"\n        :readonly=\"readonly || noTyping || undefined\"\n        :aria-describedby=\"describedBy\"\n      />\n\n      <span\n        v-if=\"counter\"\n        :id=\"counterId\"\n        class=\"v-input-counter v-field-counter\"\n        :data-over=\"over ? '' : undefined\"\n      >\n        {{ counterText }}\n      </span>\n\n      <!-- Before the clear cross rather than after it, so that a consumer's control reads\n           and tabs in the same order: what acts on the value sits next to the value, and\n           the field's own controls stay together at the end. -->\n      <slot name=\"value-end\" />\n\n      <button\n        v-if=\"showClear\"\n        type=\"button\"\n        class=\"v-input-action v-field-action v-input-clear\"\n        :aria-label=\"resolvedClearLabel\"\n        @click=\"onClear\"\n      >\n        <VIcon :name=\"closeIcon\" />\n      </button>\n\n      <VSpinner v-if=\"loading\" :label=\"loadingText\" />\n      <slot v-else name=\"end\">\n        <button\n          v-if=\"iconEnd && hasIconEndHandler\"\n          type=\"button\"\n          class=\"v-input-action v-field-action v-input-icon-end\"\n          :aria-label=\"iconEndLabel ?? iconName(iconEnd)\"\n          :disabled=\"resolvedDisabled\"\n          @click=\"emit('click:icon-end', $event)\"\n        >\n          <VIcon v-bind=\"iconProps(iconEnd)\" />\n        </button>\n        <VIcon v-else-if=\"iconEnd\" v-bind=\"iconProps(iconEnd)\" class=\"v-input-icon-end\" />\n      </slot>\n    </div>\n\n    <VTypography v-if=\"hint\" :id=\"hintId\" variant=\"caption\" tone=\"muted\" class=\"v-input-hint\">\n      {{ hint }}\n    </VTypography>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-input {\n    display: flex;\n    flex-direction: column;\n    gap: var(--vectis-space-1);\n    width: 100%;\n    font-family: var(--vectis-text-family);\n  }\n\n  /*\n   * The .v-input-label and .v-input-hint classes remain as hooks: a consumer overrides through\n   * them, and the disabled state below reaches them that way.\n   */\n\n  /*\n   * This is the box that carries the border, the background and the focus ring.\n   * `--field-border-color` is the single source of truth for its colour, and the hover, error\n   * and disabled states do nothing but redefine it.\n   */\n  .v-input-field {\n    --field-border-color: var(--vectis-color-border-strong);\n\n    display: flex;\n    align-items: center;\n    gap: var(--control-gap);\n    height: var(--control-height);\n    padding-inline: var(--control-padding-inline-field);\n    background: var(--vectis-color-surface);\n    color: var(--vectis-color-text);\n    border: 1px solid var(--field-border-color);\n    border-radius: var(--vectis-radius-interactive);\n    font-size: var(--control-font-size);\n    transition:\n      border-color var(--vectis-duration-fast) var(--vectis-ease-default),\n      background-color var(--vectis-duration-fast) var(--vectis-ease-default),\n      box-shadow var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  .v-input-control {\n    flex: 1;\n    min-width: 0;\n    height: 100%;\n    padding: 0;\n    border: none;\n    background: none;\n    color: inherit;\n    font: inherit;\n    outline: none; /* The focus ring is drawn by the field around it, not here */\n  }\n\n  .v-input-control::placeholder {\n    color: var(--vectis-color-text-subtle);\n  }\n\n  /* The browsers' own in-field controls are removed, because the design system draws\n     its own: WebKit's search cross would sit beside the `clearable` one, the number\n     spinners and Edge's password-reveal eye would clash with the icons. */\n  .v-input-control::-webkit-search-cancel-button,\n  .v-input-control::-webkit-search-decoration,\n  .v-input-control::-webkit-search-results-button,\n  .v-input-control::-webkit-search-results-decoration,\n  .v-input-control::-webkit-inner-spin-button,\n  .v-input-control::-webkit-outer-spin-button {\n    -webkit-appearance: none;\n    appearance: none;\n  }\n\n  .v-input-control[type='number'] {\n    appearance: textfield;\n  }\n\n  .v-input-control::-ms-reveal {\n    display: none;\n  }\n\n  /*\n   * Its colour cannot be changed, but matching the field's radius at least stops it from\n   * showing square corners inside a rounded box.\n   */\n  .v-input-control:-webkit-autofill {\n    border-radius: var(--vectis-radius-interactive);\n  }\n\n  /*\n   * This block must stay first in the sequence of states: read-only, then hover, focus, invalid\n   * and disabled. The read-only, focus, invalid and disabled selectors all weigh (0,3,0),\n   * `:has()` taking the specificity of what it contains, so nothing but the source order\n   * arbitrates between them.\n   */\n  .v-input[data-readonly] .v-input-field {\n    --field-border-color: var(--vectis-color-border);\n\n    background: var(--vectis-color-surface-sunken);\n  }\n\n  .v-input-field:hover:not(:has(.v-input-control:focus)):not(\n      :has(\n        .v-input-control:disabled,\n        .v-input-control:user-invalid,\n        .v-input-control[aria-invalid='true']\n      )\n    ) {\n    --field-border-color: color-mix(\n      in oklab,\n      var(--vectis-color-border-strong),\n      var(--vectis-color-text) 15%\n    );\n  }\n\n  /*\n   * The selector watches the control's focus and not `:focus-within`, so that when one of the\n   * field's own buttons; the cross, a clickable icon; takes keyboard focus, only that button's\n   * outline lights up: two indicators at once would be unreadable. And it is `:focus` rather\n   * than `:focus-visible`, because a text field shows its focus even when it was reached with\n   * the mouse.\n   */\n  .v-input-field:has(.v-input-control:focus) {\n    --field-border-color: var(--vectis-color-accent);\n\n    box-shadow: 0 0 0 1px var(--field-border-color);\n    outline: var(--vectis-focus-ring-width) solid transparent;\n  }\n\n  /*\n   * Only the colour variable is changed, which is why the border and the focus ring both turn\n   * red without either being restated.\n   */\n  .v-input-field:has(.v-input-control:user-invalid),\n  .v-input-field:has(.v-input-control[aria-invalid='true']) {\n    --field-border-color: var(--vectis-color-danger);\n  }\n\n  /* Inside the box it must not shrink, or a long value would squeeze its figures. */\n  .v-input-counter {\n    flex: none;\n  }\n\n  /* A decorative icon is drawn in a muted grey, so it stays quieter than the text\n     being typed beside it. */\n  .v-input-field > .v-icon {\n    color: var(--vectis-color-text-muted);\n  }\n\n  .v-input-field > .v-spinner {\n    font-size: var(--vectis-icon-size);\n  }\n\n  /*\n   * A disabled field greys out through the colour tokens, the same ones VCheckbox and VRadio\n   * use, and never through opacity. It comes last in the sequence of states, which at equal\n   * specificity is what makes it win over all of them, the error included: a disabled field is\n   * not submitted, so it has nothing to report.\n   */\n  .v-input[data-disabled] .v-input-field {\n    --field-border-color: var(--vectis-color-border);\n\n    background: var(--vectis-color-surface-muted);\n    color: var(--vectis-color-text-muted);\n    cursor: not-allowed;\n  }\n\n  .v-input[data-disabled] .v-input-label,\n  .v-input[data-disabled] .v-input-hint,\n  .v-input[data-disabled] .v-input-counter {\n    color: var(--vectis-color-text-subtle);\n  }\n\n  .v-input[data-disabled] .v-input-action,\n  .v-input[data-disabled] .v-input-field > .v-icon {\n    color: inherit;\n    cursor: not-allowed;\n  }\n\n  .v-input-control:disabled {\n    cursor: not-allowed;\n  }\n\n  /*\n   * They live in this sheet because it is the one both are guaranteed to load, being built on\n   * VInput; the core sheet would charge every consumer for them. `.v-input-end-pinned` lifts\n   * the clear cross and whatever carries `.v-input-icon-end`; the end icon, or a composed\n   * field's own chevron and spinner; out of the flow, so they stay pinned to the end of the\n   * field and vertically centred whatever the chips do.\n   */\n  .v-input-end-pinned .v-input-field {\n    position: relative;\n  }\n\n  .v-input-end-pinned .v-input-field:has(> :is(.v-input-clear, .v-input-icon-end, .v-spinner)) {\n    padding-inline-end: calc(\n      var(--control-padding-inline-field) + var(--vectis-icon-size) + var(--control-gap)\n    );\n  }\n\n  .v-input-end-pinned\n    .v-input-field:has(> .v-input-clear):has(> :is(.v-input-icon-end, .v-spinner)) {\n    padding-inline-end: calc(\n      var(--control-padding-inline-field) + 2 * var(--vectis-icon-size) + 2 * var(--control-gap)\n    );\n  }\n\n  .v-input-end-pinned :is(.v-input-clear, .v-input-icon-end) {\n    position: absolute;\n    inset-inline-end: var(--control-padding-inline-field);\n    top: 50%;\n    translate: 0 -50%;\n  }\n\n  /*\n   * This inset reads in glyphs and not in buttons. The cross is one of the field's buttons,\n   * whose negative margin; half the difference between icon and button; already cancels its own\n   * overhang, so an inset lands on the glyph's edge.\n   */\n  .v-input-end-pinned .v-input-clear:has(~ :is(.v-input-icon-end, .v-spinner)) {\n    inset-inline-end: calc(\n      var(--control-padding-inline-field) + var(--vectis-icon-size) + var(--control-gap)\n    );\n  }\n\n  /*\n   * The control rule must stay at (0,2,0). VCombobox folds its search input away with a (0,3,0)\n   * rule that zeroes this height, and at equal weight the winner would be whichever of the two\n   * sheets a bundler put last.\n   */\n  .v-input-chips .v-input-field {\n    flex-wrap: wrap;\n    height: auto;\n    min-height: var(--control-height);\n    padding-block: var(--vectis-space-1);\n  }\n\n  .v-input-chips .v-input-control {\n    height: var(--chip-height);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-input-field {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"VInput.js","names":[],"sources":["../../../src/components/VInput/VInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @core\n/**\n * Native input owns typing and validity. JavaScript bridges the model and restores focus after\n * the clear button disappears.\n */\nimport { computed, inject, ref, useId } from 'vue'\n\nimport VField from '../VField/VField.vue'\nimport type { FieldControlProps, FieldLabelPosition } from '../VField/VField.vue'\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconName, iconProps } from '../VIcon/iconProps'\nimport { close as closeIcon } from '../VIcon/icons/close'\nimport type { IconSource } from '../VIcon/types'\nimport VSpinner from '../VSpinner/VSpinner.vue'\n\nimport { useIconClickHandlers } from '../../composables/useIconClickHandlers'\nimport { useClearable } from '../../composables/useClearable'\nimport { useControlShape } from '../../composables/useControlShape'\nimport { useRootAttrs } from '../../composables/useRootAttrs'\nimport { useTextLimit } from '../../composables/useTextLimit'\nimport { useMessages } from '../../i18n/state'\nimport { joinIds } from '../../utils/ids'\n\nimport { inputGroupKey } from './context'\n\n/** The height of the field: 32, 40 or 48 pixels. */\nexport type InputSize = 'sm' | 'md' | 'lg'\n\n/** The native type of the input, which also decides the keyboard a phone offers. */\nexport type InputType = 'text' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'url'\n\n/**\n * What the `#control` slot hands over, to bind on the element replacing the input: its id, which\n * the label points at, the class the field's states are drawn from, the references to the hint\n * and the error, and the attributes set on the field other than `class` and `style`. `required`\n * is left out: the replacing element states it in its own way.\n */\nexport type InputControlProps = {\n  id: string\n  class: string\n  disabled: boolean\n  'aria-invalid'?: 'true'\n  'aria-describedby'?: string\n} & Record<string, unknown>\n\ninterface InputProps {\n  /** The height of the field: 32, 40 or 48 pixels. */\n  size?: InputSize\n  /** Takes 4px off the height, leaving the padding, the text and the icons as they are. */\n  compact?: boolean\n  /**\n   * The native type of the input, which is also what tells a phone which keyboard to\n   * offer: a numeric pad for `number`, an @ key for `email`.\n   */\n  type?: InputType\n  /** Marks the field as invalid whatever the browser thinks. */\n  invalid?: boolean\n  /** Makes the field unusable, greyed out through the colour tokens. */\n  disabled?: boolean\n  /**\n   * Shows the value without allowing it to be changed. The field can still be\n   * focused and copied from, and it hides the clear button, unless `clearVisible`\n   * answers that question explicitly.\n   */\n  readonly?: boolean\n  /**\n   * Refuses the keyboard without drawing the field as read-only: the native attribute is set,\n   * but the field keeps its ordinary look and its clear cross.\n   */\n  noTyping?: boolean\n  /** The label, tied to the field so that clicking it focuses the field. */\n  label?: string\n  /**\n   * A line of help under the field. It is tied to the input for assistive\n   * technology, so it is read out along with the label.\n   */\n  hint?: string\n  /**\n   * A message saying what is wrong with the value, shown in place of the hint so that the field\n   * does not grow. It marks the field invalid, is read along with it, and is announced when it\n   * appears or changes.\n   */\n  error?: string\n  /** Marks the field as required: an asterisk follows the label, and the input is `required`. */\n  required?: boolean\n  /** Hides the label visually. It still names the field for assistive technology. */\n  hideLabel?: boolean\n  /**\n   * Where the label sits: above the field (`top`, the default), or at its start, in a column of\n   * its own, moving back above when there is not room for both.\n   */\n  labelPosition?: FieldLabelPosition\n  /**\n   * An icon inside the field, at the start. It is decorative by default and becomes a real\n   * button as soon as a `@click:icon-start` listener is attached, in which case it needs\n   * `iconStartLabel`.\n   */\n  iconStart?: IconSource\n  /**\n   * The same at the end of the field. The `#end` slot replaces it, and the loading\n   * spinner takes its place while it turns.\n   */\n  iconEnd?: IconSource\n  /** What the start icon does, in words, once it is clickable. */\n  iconStartLabel?: string\n  /** What the end icon does, in words, once it is clickable. */\n  iconEndLabel?: string\n  /** Shows a spinner at the end of the field, in place of the end icon or slot. */\n  loading?: boolean\n  /**\n   * What screen readers announce while the spinner turns. It falls back to the\n   * design system dictionary.\n   */\n  loadingText?: string\n  /**\n   * Offers a cross that empties the field. It appears when there is something to\n   * clear and the field can be edited.\n   */\n  clearable?: boolean\n  /**\n   * Decides whether the cross is shown, instead of letting the field work it out\n   * from its own content (a read-only field included).\n   *\n   * It exists for the components built on top of this one, where what there is to\n   * clear is not the text: VCombobox holds its selection as chips beside the field,\n   * and a read-only date or time picker changes its value through a panel rather\n   * than by typing.\n   */\n  clearVisible?: boolean\n  /** What the clear button does, in words. It falls back to the design system dictionary. */\n  clearLabel?: string\n  /**\n   * The maximum number of characters. By default this is the browser's own limit,\n   * which simply refuses anything beyond it.\n   */\n  maxlength?: number\n  /**\n   * Turns that limit into a soft one: the reader may type past it, and the field goes into\n   * error instead of silently refusing the keystrokes.\n   */\n  softLimit?: boolean\n  /**\n   * Shows how much has been typed, at the end of the field: \"12/80\" against a limit,\n   * or just \"12\" without one.\n   */\n  counter?: boolean\n}\n\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<InputProps>(), {\n  size: 'md',\n  compact: false,\n  type: 'text',\n  invalid: false,\n  disabled: false,\n  readonly: false,\n  label: undefined,\n  hint: undefined,\n  error: undefined,\n  required: false,\n  hideLabel: false,\n  labelPosition: 'top',\n  iconStart: undefined,\n  iconEnd: undefined,\n  iconStartLabel: undefined,\n  iconEndLabel: undefined,\n  loading: false,\n  loadingText: undefined,\n  clearable: false,\n  clearVisible: undefined,\n  clearLabel: undefined,\n  maxlength: undefined,\n  softLimit: false,\n  noTyping: false,\n  counter: false,\n})\n\nconst emit = defineEmits<{\n  /** The start icon was clicked. Attaching this listener is what makes it a button. */\n  'click:icon-start': [event: MouseEvent]\n  /** The end icon was clicked. Attaching this listener is what makes it a button. */\n  'click:icon-end': [event: MouseEvent]\n  /** The clear button was pressed. The field has already been emptied. */\n  clear: []\n}>()\n\ndefineSlots<{\n  /**\n   * Content at the start of the field, rendered after `iconStart` rather than in its place,\n   * which lets a field composed on top of this one put the chips standing for its values here\n   * beside an icon it still wants drawn.\n   */\n  start?(): unknown\n  /**\n   * Controls of your own inside the field, placed before the field's own: the clear cross and\n   * the end icon.\n   */\n  'value-end'?(): unknown\n  /**\n   * Replaces the input with another control, for a field composed on top of this one: VSelect\n   * puts its button here. Bind `controlProps` on it; the field then draws its focus, invalid and\n   * disabled states from that control. The model, the limit and the counter apply to the input\n   * alone.\n   */\n  control?(props: { controlProps: InputControlProps }): unknown\n  /**\n   * Content at the end of the field, which replaces `iconEnd`. It is hidden while\n   * the field is loading, the spinner taking that place.\n   */\n  end?(): unknown\n  /**\n   * Content at the end of the hint's line, under the field. Bind `id` on it: it joins the\n   * field's description, after the error and the hint.\n   */\n  meta?(props: { id: string }): unknown\n}>()\n\n/** The value, typed as text or a number rather than text alone. */\nconst model = defineModel<string | number>({ default: '' })\n\n/**\n * The value seen as text. Every measurement of its length; the counter, the soft limit, whether\n * the clear cross has anything to clear; goes through this, since a number has no length of its\n * own.\n */\nconst modelText = computed(() => String(model.value ?? ''))\n\nconst { rootClass, rootStyle, forwardedAttrs: restAttrs } = useRootAttrs()\n\n// `disabled` is the one read as an or, the two answers being cumulative (VInput/context.ts).\nconst group = inject(inputGroupKey, null)\nconst {\n  size: resolvedSize,\n  compact: resolvedCompact,\n  disabled: resolvedDisabled,\n} = useControlShape(props, group)\n\n// The prop keeps priority; what it falls back to is the dictionary, so the default\n// wording follows the language the design system is set to.\nconst m = useMessages()\nconst resolvedClearLabel = computed(() => props.clearLabel ?? m.value.common.clear)\n\nconst counterId = useId()\n\nconst { hasIconStartHandler, hasIconEndHandler } = useIconClickHandlers({\n  name: 'VInput',\n  iconStartLabel: props.iconStartLabel,\n  iconEndLabel: props.iconEndLabel,\n})\n\nconst controlEl = ref<HTMLInputElement | null>(null)\n\nconst { showClear, onClear } = useClearable({\n  clearable: () => props.clearable,\n  clearVisible: () => props.clearVisible,\n  disabled: () => resolvedDisabled.value,\n  readonly: () => props.readonly,\n  text: () => modelText.value,\n  controlEl,\n  onCleared: () => {\n    model.value = ''\n    emit('clear')\n  },\n})\n\n// The counter and the soft limit both measure `modelText` rather than the model\n// itself, a number having no length.\nconst { counterText, over } = useTextLimit({\n  el: controlEl,\n  text: () => modelText.value,\n  maxlength: () => props.maxlength,\n  softLimit: () => props.softLimit,\n})\n\n/**\n * The attributes of the input, built on VField's: the consumer's attributes win over the\n * `invalid` prop, and the counter inside the field joins the description last.\n */\nfunction inputAttrs(fieldProps: FieldControlProps): FieldControlProps {\n  return {\n    'aria-invalid': props.invalid ? 'true' : undefined,\n    ...fieldProps,\n    'aria-describedby': joinIds(fieldProps['aria-describedby'], props.counter && counterId),\n  }\n}\n\nfunction controlProps(fieldProps: FieldControlProps): InputControlProps {\n  const bound = inputAttrs(fieldProps)\n  delete bound.required\n  return { ...bound, class: 'v-input-control', disabled: resolvedDisabled.value }\n}\n\n// The real input sits inside the wrapper, out of reach of whoever renders this component. These\n// three are how the components built on it get there; VCombobox refocuses the field and selects\n// its text this way.\ndefineExpose({\n  /** Moves the focus to the real input. */\n  focus: (options?: FocusOptions) => controlEl.value?.focus(options),\n  /** Selects everything in the field, as VCombobox does when it reopens its panel. */\n  select: () => controlEl.value?.select(),\n  /** The real `<input>`, for what neither of the two above covers. */\n  el: controlEl,\n})\n</script>\n\n<template>\n  <VField\n    v-bind=\"restAttrs\"\n    class=\"v-input\"\n    :class=\"rootClass\"\n    :style=\"rootStyle\"\n    :label=\"label\"\n    :hint=\"hint\"\n    :error=\"error\"\n    :required=\"required\"\n    :disabled=\"resolvedDisabled\"\n    :hide-label=\"hideLabel\"\n    :label-position=\"labelPosition\"\n  >\n    <template #default=\"{ fieldProps }\">\n      <div\n        class=\"v-input-field v-control\"\n        :data-size=\"resolvedSize\"\n        :data-compact=\"resolvedCompact ? '' : undefined\"\n        :data-disabled=\"resolvedDisabled ? '' : undefined\"\n        :data-readonly=\"readonly ? '' : undefined\"\n      >\n        <!--\n        The start icon is rendered before the slot, where the end icon is the slot's own\n        fallback. That asymmetry is what the composed fields need: VCombobox and VFileInput fill\n        `#start` with the chips standing for their values, which is OTHER content in the same\n        zone rather than another way of drawing the icon.\n      -->\n        <button\n          v-if=\"iconStart && hasIconStartHandler\"\n          type=\"button\"\n          class=\"v-input-action v-field-action v-input-icon-start\"\n          :aria-label=\"iconStartLabel ?? iconName(iconStart)\"\n          :disabled=\"resolvedDisabled\"\n          @click=\"emit('click:icon-start', $event)\"\n        >\n          <VIcon v-bind=\"iconProps(iconStart)\" />\n        </button>\n        <VIcon v-else-if=\"iconStart\" v-bind=\"iconProps(iconStart)\" class=\"v-input-icon-start\" />\n        <slot name=\"start\" />\n\n        <slot name=\"control\" :control-props=\"controlProps(fieldProps)\">\n          <!-- The label's `for` matches the id inside fieldProps, which the rule cannot follow. -->\n          <!-- eslint-disable-next-line vuejs-accessibility/form-control-has-label -->\n          <input\n            ref=\"controlEl\"\n            v-model=\"model\"\n            v-bind=\"inputAttrs(fieldProps)\"\n            class=\"v-input-control\"\n            :type=\"type\"\n            :maxlength=\"softLimit ? undefined : maxlength\"\n            :disabled=\"resolvedDisabled\"\n            :readonly=\"readonly || noTyping || undefined\"\n          />\n        </slot>\n\n        <span\n          v-if=\"counter\"\n          :id=\"counterId\"\n          class=\"v-input-counter v-field-counter\"\n          :data-over=\"over ? '' : undefined\"\n        >\n          {{ counterText }}\n        </span>\n\n        <!-- Before the clear cross rather than after it, so that a consumer's control reads\n           and tabs in the same order: what acts on the value sits next to the value, and\n           the field's own controls stay together at the end. -->\n        <slot name=\"value-end\" />\n\n        <button\n          v-if=\"showClear\"\n          type=\"button\"\n          class=\"v-input-action v-field-action v-input-clear\"\n          :aria-label=\"resolvedClearLabel\"\n          @click=\"onClear\"\n        >\n          <VIcon :name=\"closeIcon\" />\n        </button>\n\n        <VSpinner v-if=\"loading\" :label=\"loadingText\" />\n        <slot v-else name=\"end\">\n          <button\n            v-if=\"iconEnd && hasIconEndHandler\"\n            type=\"button\"\n            class=\"v-input-action v-field-action v-input-icon-end\"\n            :aria-label=\"iconEndLabel ?? iconName(iconEnd)\"\n            :disabled=\"resolvedDisabled\"\n            @click=\"emit('click:icon-end', $event)\"\n          >\n            <VIcon v-bind=\"iconProps(iconEnd)\" />\n          </button>\n          <VIcon v-else-if=\"iconEnd\" v-bind=\"iconProps(iconEnd)\" class=\"v-input-icon-end\" />\n        </slot>\n      </div>\n    </template>\n    <template v-if=\"$slots.meta\" #meta=\"{ id }\"><slot :id=\"id\" name=\"meta\" /></template>\n  </VField>\n</template>\n\n<style>\n@layer vectis.components {\n  /* The root is a VField, which lays out the label, the hint and the error. */\n  .v-input {\n    width: 100%;\n  }\n\n  /*\n   * This is the box that carries the border, the background and the focus ring, and the size and\n   * state attributes. `--field-border-color` is the single source of truth for its colour, and the hover, error\n   * and disabled states do nothing but redefine it.\n   */\n  .v-input-field {\n    --field-border-color: var(--vectis-color-border-strong);\n\n    display: flex;\n    align-items: center;\n    gap: var(--control-gap);\n    height: var(--control-height);\n    padding-inline: var(--control-padding-inline-field);\n    background: var(--vectis-color-surface);\n    color: var(--vectis-color-text);\n    border: 1px solid var(--field-border-color);\n    border-radius: var(--vectis-radius-interactive);\n    font-size: var(--control-font-size);\n    transition:\n      border-color var(--vectis-duration-fast) var(--vectis-ease-default),\n      background-color var(--vectis-duration-fast) var(--vectis-ease-default),\n      box-shadow var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  .v-input-control {\n    flex: 1;\n    min-width: 0;\n    height: 100%;\n    padding: 0;\n    border: none;\n    background: none;\n    color: inherit;\n    font: inherit;\n    outline: none; /* The focus ring is drawn by the field around it, not here */\n  }\n\n  .v-input-control::placeholder {\n    color: var(--vectis-color-text-subtle);\n  }\n\n  /* The browsers' own in-field controls are removed, because the design system draws\n     its own: WebKit's search cross would sit beside the `clearable` one, the number\n     spinners and Edge's password-reveal eye would clash with the icons. */\n  .v-input-control::-webkit-search-cancel-button,\n  .v-input-control::-webkit-search-decoration,\n  .v-input-control::-webkit-search-results-button,\n  .v-input-control::-webkit-search-results-decoration,\n  .v-input-control::-webkit-inner-spin-button,\n  .v-input-control::-webkit-outer-spin-button {\n    -webkit-appearance: none;\n    appearance: none;\n  }\n\n  .v-input-control[type='number'] {\n    appearance: textfield;\n  }\n\n  .v-input-control::-ms-reveal {\n    display: none;\n  }\n\n  /*\n   * Its colour cannot be changed, but matching the field's radius at least stops it from\n   * showing square corners inside a rounded box.\n   */\n  .v-input-control:-webkit-autofill {\n    border-radius: var(--vectis-radius-interactive);\n  }\n\n  /*\n   * This block must stay first in the sequence of states: read-only, then hover, focus, invalid\n   * and disabled. The read-only, focus, invalid and disabled selectors all weigh (0,3,0),\n   * `:has()` taking the specificity of what it contains, so nothing but the source order\n   * arbitrates between them.\n   */\n  .v-input .v-input-field[data-readonly] {\n    --field-border-color: var(--vectis-color-border);\n\n    background: var(--vectis-color-surface-sunken);\n  }\n\n  .v-input-field:hover:not(:has(.v-input-control:focus)):not(\n      :has(\n        .v-input-control:disabled,\n        .v-input-control:user-invalid,\n        .v-input-control[aria-invalid='true']\n      )\n    ) {\n    --field-border-color: color-mix(\n      in oklab,\n      var(--vectis-color-border-strong),\n      var(--vectis-color-text) 15%\n    );\n  }\n\n  /*\n   * The selector watches the control's focus and not `:focus-within`, so that when one of the\n   * field's own buttons; the cross, a clickable icon; takes keyboard focus, only that button's\n   * outline lights up: two indicators at once would be unreadable. And it is `:focus` rather\n   * than `:focus-visible`, because a text field shows its focus even when it was reached with\n   * the mouse.\n   */\n  .v-input-field:has(.v-input-control:focus) {\n    --field-border-color: var(--vectis-color-accent);\n\n    box-shadow: 0 0 0 1px var(--field-border-color);\n    outline: var(--vectis-focus-ring-width) solid transparent;\n  }\n\n  /*\n   * Only the colour variable is changed, which is why the border and the focus ring both turn\n   * red without either being restated.\n   */\n  .v-input-field:has(.v-input-control:user-invalid),\n  .v-input-field:has(.v-input-control[aria-invalid='true']) {\n    --field-border-color: var(--vectis-color-danger);\n  }\n\n  /* Inside the box it must not shrink, or a long value would squeeze its figures. */\n  .v-input-counter {\n    flex: none;\n  }\n\n  /* A decorative icon is drawn in a muted grey, so it stays quieter than the text\n     being typed beside it. */\n  .v-input-field > .v-icon {\n    color: var(--vectis-color-text-muted);\n  }\n\n  .v-input-field > .v-spinner {\n    font-size: var(--vectis-icon-size);\n  }\n\n  /*\n   * A disabled field greys out through the colour tokens, the same ones VCheckbox and VRadio\n   * use, and never through opacity. It comes last in the sequence of states, which at equal\n   * specificity is what makes it win over all of them, the error included: a disabled field is\n   * not submitted, so it has nothing to report.\n   */\n  .v-input .v-input-field[data-disabled] {\n    --field-border-color: var(--vectis-color-border);\n\n    background: var(--vectis-color-surface-muted);\n    color: var(--vectis-color-text-muted);\n    cursor: not-allowed;\n  }\n\n  .v-input-field[data-disabled] .v-input-counter {\n    color: var(--vectis-color-text-subtle);\n  }\n\n  .v-input-field[data-disabled] .v-input-action,\n  .v-input-field[data-disabled] > .v-icon {\n    color: inherit;\n    cursor: not-allowed;\n  }\n\n  .v-input-control:disabled {\n    cursor: not-allowed;\n  }\n\n  /*\n   * They live in this sheet because it is the one both are guaranteed to load, being built on\n   * VInput; the core sheet would charge every consumer for them. `.v-input-end-pinned` lifts\n   * the clear cross and whatever carries `.v-input-icon-end`; the end icon, or a composed\n   * field's own chevron and spinner; out of the flow, so they stay pinned to the end of the\n   * field and vertically centred whatever the chips do.\n   */\n  .v-input-end-pinned .v-input-field {\n    position: relative;\n  }\n\n  .v-input-end-pinned .v-input-field:has(> :is(.v-input-clear, .v-input-icon-end, .v-spinner)) {\n    padding-inline-end: calc(\n      var(--control-padding-inline-field) + var(--vectis-icon-size) + var(--control-gap)\n    );\n  }\n\n  .v-input-end-pinned\n    .v-input-field:has(> .v-input-clear):has(> :is(.v-input-icon-end, .v-spinner)) {\n    padding-inline-end: calc(\n      var(--control-padding-inline-field) + 2 * var(--vectis-icon-size) + 2 * var(--control-gap)\n    );\n  }\n\n  .v-input-end-pinned :is(.v-input-clear, .v-input-icon-end) {\n    position: absolute;\n    inset-inline-end: var(--control-padding-inline-field);\n    top: 50%;\n    translate: 0 -50%;\n  }\n\n  /*\n   * This inset reads in glyphs and not in buttons. The cross is one of the field's buttons,\n   * whose negative margin; half the difference between icon and button; already cancels its own\n   * overhang, so an inset lands on the glyph's edge.\n   */\n  .v-input-end-pinned .v-input-clear:has(~ :is(.v-input-icon-end, .v-spinner)) {\n    inset-inline-end: calc(\n      var(--control-padding-inline-field) + var(--vectis-icon-size) + var(--control-gap)\n    );\n  }\n\n  /*\n   * The control rule must stay at (0,2,0). VCombobox folds its search input away with a (0,3,0)\n   * rule that zeroes this height, and at equal weight the winner would be whichever of the two\n   * sheets a bundler put last.\n   */\n  .v-input-chips .v-input-field {\n    flex-wrap: wrap;\n    height: auto;\n    min-height: var(--control-height);\n    padding-block: var(--vectis-space-1);\n  }\n\n  .v-input-chips .v-input-control {\n    height: var(--chip-height);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-input-field {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/VInput/VInput.vue_vue_type_script_setup_true_lang.js

@@ -1,35 +1,32 @@
 import { useMessages as e } from "../../i18n/state.js";
 import { iconName as t, iconProps as n } from "../VIcon/iconProps.js";
 import r from "../VIcon/VIcon.js";
-import i from "../VTypography/VTypography.js";
-import { useControlShape as a } from "../../composables/useControlShape.js";
-import o from "../VSpinner/VSpinner.js";
-import { useRootAttrs as s } from "../../composables/useRootAttrs.js";
-import { close as c } from "../VIcon/icons/close.js";
-import { useFieldIds as ee } from "../../composables/useFieldIds.js";
+import { useControlShape as i } from "../../composables/useControlShape.js";
+import a from "../VSpinner/VSpinner.js";
+import { useRootAttrs as o } from "../../composables/useRootAttrs.js";
+import { joinIds as s } from "../../utils/ids.js";
+import c from "../VField/VField.js";
+import { close as ee } from "../VIcon/icons/close.js";
 import { useIconClickHandlers as te } from "../../composables/useIconClickHandlers.js";
-import { useClearable as ne } from "../../composables/useClearable.js";
-import { useTextLimit as l } from "../../composables/useTextLimit.js";
-import { inputGroupKey as re } from "./context.js";
-import { computed as u, createBlock as d, createCommentVNode as f, createElementBlock as p, createElementVNode as m, createTextVNode as h, createVNode as g, defineComponent as _, guardReactiveProps as v, inject as y, mergeModels as b, mergeProps as x, normalizeClass as S, normalizeProps as C, normalizeStyle as w, openBlock as T, ref as ie, renderSlot as E, toDisplayString as D, unref as O, useModel as k, vModelDynamic as A, withCtx as j, withDirectives as M } from "vue";
+import { useClearable as l } from "../../composables/useClearable.js";
+import { useTextLimit as u } from "../../composables/useTextLimit.js";
+import { inputGroupKey as d } from "./context.js";
+import { computed as f, createBlock as p, createCommentVNode as m, createElementBlock as h, createElementVNode as g, createSlots as ne, createVNode as _, defineComponent as v, guardReactiveProps as y, inject as b, mergeModels as x, mergeProps as S, normalizeProps as C, openBlock as w, ref as re, renderSlot as T, toDisplayString as ie, unref as E, useId as D, useModel as O, vModelDynamic as k, withCtx as A, withDirectives as j } from "vue";
 //#region src/components/VInput/VInput.vue?vue&type=script&setup=true&lang.ts
-var N = [
+var M = [
 	"data-size",
 	"data-compact",
 	"data-disabled",
 	"data-readonly"
-], P = { class: "v-input-field" }, F = ["aria-label", "disabled"], I = [
-	"id",
-	"aria-invalid",
+], N = ["aria-label", "disabled"], P = [
 	"type",
 	"maxlength",
 	"disabled",
-	"readonly",
-	"aria-describedby"
-], L = ["id", "data-over"], R = ["aria-label"], z = ["aria-label", "disabled"], B = /*@__PURE__*/ _({
+	"readonly"
+], F = ["id", "data-over"], I = ["aria-label"], L = ["aria-label", "disabled"], R = /*@__PURE__*/ v({
 	inheritAttrs: !1,
 	__name: "VInput",
-	props: /*@__PURE__*/ b({
+	props: /*@__PURE__*/ x({
 		size: { default: "md" },
 		compact: {
 			type: Boolean,
@@ -54,6 +51,16 @@ var N = [
 		},
 		label: { default: void 0 },
 		hint: { default: void 0 },
+		error: { default: void 0 },
+		required: {
+			type: Boolean,
+			default: !1
+		},
+		hideLabel: {
+			type: Boolean,
+			default: !1
+		},
+		labelPosition: { default: "top" },
 		iconStart: { default: void 0 },
 		iconEnd: { default: void 0 },
 		iconStartLabel: { default: void 0 },
@@ -85,118 +92,134 @@ var N = [
 		modelValue: { default: "" },
 		modelModifiers: {}
 	}),
-	emits: /*@__PURE__*/ b([
+	emits: /*@__PURE__*/ x([
 		"click:icon-start",
 		"click:icon-end",
 		"clear"
 	], ["update:modelValue"]),
-	setup(_, { expose: b, emit: B }) {
-		let V = _, H = B, U = k(_, "modelValue"), W = u(() => String(U.value ?? "")), { attrs: G, rootClass: K, rootStyle: q, forwardedAttrs: J } = s(), { size: Y, compact: ae, disabled: X } = a(V, y(re, null)), oe = e(), se = u(() => V.clearLabel ?? oe.value.common.clear), { fieldId: Z, hintId: ce, counterId: le, describedBy: ue } = ee(G, () => !!V.hint, () => V.counter), { hasIconStartHandler: de, hasIconEndHandler: fe } = te({
+	setup(v, { expose: x, emit: R }) {
+		let z = v, B = R, V = O(v, "modelValue"), H = f(() => String(V.value ?? "")), { rootClass: ae, rootStyle: U, forwardedAttrs: W } = o(), { size: G, compact: K, disabled: q } = i(z, b(d, null)), J = e(), oe = f(() => z.clearLabel ?? J.value.common.clear), Y = D(), { hasIconStartHandler: se, hasIconEndHandler: ce } = te({
 			name: "VInput",
-			iconStartLabel: V.iconStartLabel,
-			iconEndLabel: V.iconEndLabel
-		}), Q = ie(null), { showClear: pe, onClear: $ } = ne({
-			clearable: () => V.clearable,
-			clearVisible: () => V.clearVisible,
-			disabled: () => X.value,
-			readonly: () => V.readonly,
-			text: () => W.value,
-			controlEl: Q,
+			iconStartLabel: z.iconStartLabel,
+			iconEndLabel: z.iconEndLabel
+		}), X = re(null), { showClear: le, onClear: Z } = l({
+			clearable: () => z.clearable,
+			clearVisible: () => z.clearVisible,
+			disabled: () => q.value,
+			readonly: () => z.readonly,
+			text: () => H.value,
+			controlEl: X,
 			onCleared: () => {
-				U.value = "", H("clear");
+				V.value = "", B("clear");
 			}
-		}), { counterText: me, over: he } = l({
-			el: Q,
-			text: () => W.value,
-			maxlength: () => V.maxlength,
-			softLimit: () => V.softLimit
+		}), { counterText: ue, over: Q } = u({
+			el: X,
+			text: () => H.value,
+			maxlength: () => z.maxlength,
+			softLimit: () => z.softLimit
 		});
-		return b({
-			focus: (e) => Q.value?.focus(e),
-			select: () => Q.value?.select(),
-			el: Q
-		}), (e, a) => (T(), p("div", {
-			class: S(["v-input v-control", O(K)]),
-			style: w(O(q)),
-			"data-size": O(Y),
-			"data-compact": O(ae) ? "" : void 0,
-			"data-disabled": O(X) ? "" : void 0,
-			"data-readonly": _.readonly ? "" : void 0
-		}, [
-			_.label ? (T(), d(i, {
-				key: 0,
-				as: "label",
-				variant: "label",
-				class: "v-input-label",
-				for: O(Z)
-			}, {
-				default: j(() => [h(D(_.label), 1)]),
-				_: 1
-			}, 8, ["for"])) : f("", !0),
-			m("div", P, [
-				_.iconStart && O(de) ? (T(), p("button", {
+		function $(e) {
+			return {
+				"aria-invalid": z.invalid ? "true" : void 0,
+				...e,
+				"aria-describedby": s(e["aria-describedby"], z.counter && Y)
+			};
+		}
+		function de(e) {
+			let t = $(e);
+			return delete t.required, {
+				...t,
+				class: "v-input-control",
+				disabled: q.value
+			};
+		}
+		return x({
+			focus: (e) => X.value?.focus(e),
+			select: () => X.value?.select(),
+			el: X
+		}), (e, i) => (w(), p(c, S(E(W), {
+			class: ["v-input", E(ae)],
+			style: E(U),
+			label: v.label,
+			hint: v.hint,
+			error: v.error,
+			required: v.required,
+			disabled: E(q),
+			"hide-label": v.hideLabel,
+			"label-position": v.labelPosition
+		}), ne({
+			default: A(({ fieldProps: o }) => [g("div", {
+				class: "v-input-field v-control",
+				"data-size": E(G),
+				"data-compact": E(K) ? "" : void 0,
+				"data-disabled": E(q) ? "" : void 0,
+				"data-readonly": v.readonly ? "" : void 0
+			}, [
+				v.iconStart && E(se) ? (w(), h("button", {
 					key: 0,
 					type: "button",
 					class: "v-input-action v-field-action v-input-icon-start",
-					"aria-label": _.iconStartLabel ?? O(t)(_.iconStart),
-					disabled: O(X),
-					onClick: a[0] ||= (e) => H("click:icon-start", e)
-				}, [g(r, C(v(O(n)(_.iconStart))), null, 16)], 8, F)) : _.iconStart ? (T(), d(r, x({ key: 1 }, O(n)(_.iconStart), { class: "v-input-icon-start" }), null, 16)) : f("", !0),
-				E(e.$slots, "start"),
-				M(m("input", x({
-					id: O(Z),
+					"aria-label": v.iconStartLabel ?? E(t)(v.iconStart),
+					disabled: E(q),
+					onClick: i[0] ||= (e) => B("click:icon-start", e)
+				}, [_(r, C(y(E(n)(v.iconStart))), null, 16)], 8, N)) : v.iconStart ? (w(), p(r, S({ key: 1 }, E(n)(v.iconStart), { class: "v-input-icon-start" }), null, 16)) : m("", !0),
+				T(e.$slots, "start"),
+				T(e.$slots, "control", { controlProps: de(o) }, () => [j(g("input", S({
 					ref_key: "controlEl",
-					ref: Q,
-					"onUpdate:modelValue": a[1] ||= (e) => U.value = e,
-					"aria-invalid": _.invalid || void 0
-				}, O(J), {
+					ref: X,
+					"onUpdate:modelValue": i[1] ||= (e) => V.value = e
+				}, $(o), {
 					class: "v-input-control",
-					type: _.type,
-					maxlength: _.softLimit ? void 0 : _.maxlength,
-					disabled: O(X),
-					readonly: _.readonly || _.noTyping || void 0,
-					"aria-describedby": O(ue)
-				}), null, 16, I), [[A, U.value]]),
-				_.counter ? (T(), p("span", {
+					type: v.type,
+					maxlength: v.softLimit ? void 0 : v.maxlength,
+					disabled: E(q),
+					readonly: v.readonly || v.noTyping || void 0
+				}), null, 16, P), [[k, V.value]])]),
+				v.counter ? (w(), h("span", {
 					key: 2,
-					id: O(le),
+					id: E(Y),
 					class: "v-input-counter v-field-counter",
-					"data-over": O(he) ? "" : void 0
-				}, D(O(me)), 9, L)) : f("", !0),
-				E(e.$slots, "value-end"),
-				O(pe) ? (T(), p("button", {
+					"data-over": E(Q) ? "" : void 0
+				}, ie(E(ue)), 9, F)) : m("", !0),
+				T(e.$slots, "value-end"),
+				E(le) ? (w(), h("button", {
 					key: 3,
 					type: "button",
 					class: "v-input-action v-field-action v-input-clear",
-					"aria-label": se.value,
-					onClick: a[2] ||= (...e) => O($) && O($)(...e)
-				}, [g(r, { name: O(c) }, null, 8, ["name"])], 8, R)) : f("", !0),
-				_.loading ? (T(), d(o, {
+					"aria-label": oe.value,
+					onClick: i[2] ||= (...e) => E(Z) && E(Z)(...e)
+				}, [_(r, { name: E(ee) }, null, 8, ["name"])], 8, I)) : m("", !0),
+				v.loading ? (w(), p(a, {
 					key: 4,
-					label: _.loadingText
-				}, null, 8, ["label"])) : E(e.$slots, "end", {}, () => [_.iconEnd && O(fe) ? (T(), p("button", {
+					label: v.loadingText
+				}, null, 8, ["label"])) : T(e.$slots, "end", {}, () => [v.iconEnd && E(ce) ? (w(), h("button", {
 					key: 0,
 					type: "button",
 					class: "v-input-action v-field-action v-input-icon-end",
-					"aria-label": _.iconEndLabel ?? O(t)(_.iconEnd),
-					disabled: O(X),
-					onClick: a[3] ||= (e) => H("click:icon-end", e)
-				}, [g(r, C(v(O(n)(_.iconEnd))), null, 16)], 8, z)) : _.iconEnd ? (T(), d(r, x({ key: 1 }, O(n)(_.iconEnd), { class: "v-input-icon-end" }), null, 16)) : f("", !0)], void 0, 5)
-			]),
-			_.hint ? (T(), d(i, {
-				key: 1,
-				id: O(ce),
-				variant: "caption",
-				tone: "muted",
-				class: "v-input-hint"
-			}, {
-				default: j(() => [h(D(_.hint), 1)]),
-				_: 1
-			}, 8, ["id"])) : f("", !0)
-		], 14, N));
+					"aria-label": v.iconEndLabel ?? E(t)(v.iconEnd),
+					disabled: E(q),
+					onClick: i[3] ||= (e) => B("click:icon-end", e)
+				}, [_(r, C(y(E(n)(v.iconEnd))), null, 16)], 8, L)) : v.iconEnd ? (w(), p(r, S({ key: 1 }, E(n)(v.iconEnd), { class: "v-input-icon-end" }), null, 16)) : m("", !0)], void 0, 5)
+			], 8, M)]),
+			_: 2
+		}, [e.$slots.meta ? {
+			name: "meta",
+			fn: A(({ id: t }) => [T(e.$slots, "meta", { id: t })]),
+			key: "0"
+		} : void 0]), 1040, [
+			"class",
+			"style",
+			"label",
+			"hint",
+			"error",
+			"required",
+			"disabled",
+			"hide-label",
+			"label-position"
+		]));
 	}
 });
 //#endregion
-export { B as default };
+export { R as default };
 
 //# sourceMappingURL=VInput.vue_vue_type_script_setup_true_lang.js.map