@sewadah/selaras 0.9.0 → 0.10.0

package/dist/runtime/components/DatePicker.vue.d.ts

@@ -69,7 +69,7 @@ export interface DatePickerProps {
     isYearDisabled?: (year: number) => boolean;
     invalid?: boolean;
     clearable?: boolean;
-    /** Chrome color - the clear/trigger buttons and prev/next month nav. Only the color changes; each button keeps its own deliberately-different variant (icon-only buttons use `text`, nav arrows use `ghost`). */
+    /** Chrome color for trigger buttons and calendar navigation. Clear controls remain neutral. */
     color?: ColorRole;
     /** The color of whatever's currently "active" - the selected day/month/year cell and the Done button. */
     activeColor?: ColorRole;
@@ -90,7 +90,7 @@ export interface DatePickerEmits {
     'update:modelValue': [value: DateValue | DateRange | Time | undefined];
     'update:view': [view: 'date' | 'month' | 'year'];
 }
-declare var __VLS_43: {}, __VLS_63: {}, __VLS_83: {}, __VLS_99: {}, __VLS_119: {
+declare var __VLS_43: {}, __VLS_58: {}, __VLS_80: {}, __VLS_96: {}, __VLS_111: {
     date: DateValue;
     dayValue: string;
     selected: boolean;
@@ -98,7 +98,7 @@ declare var __VLS_43: {}, __VLS_63: {}, __VLS_83: {}, __VLS_99: {}, __VLS_119: {
     selectionStart: boolean;
     selectionEnd: boolean;
     highlighted: boolean;
-}, __VLS_122: {}, __VLS_145: {
+}, __VLS_114: {}, __VLS_137: {
     date: DateValue;
     dayValue: string;
     selected: boolean;
@@ -106,61 +106,61 @@ declare var __VLS_43: {}, __VLS_63: {}, __VLS_83: {}, __VLS_99: {}, __VLS_119: {
     selectionStart: boolean;
     selectionEnd: boolean;
     highlighted: boolean;
-}, __VLS_148: {}, __VLS_187: {}, __VLS_207: {}, __VLS_227: {}, __VLS_243: {}, __VLS_269: {}, __VLS_292: {}, __VLS_330: {}, __VLS_350: {}, __VLS_370: {}, __VLS_386: {}, __VLS_406: {
+}, __VLS_140: {}, __VLS_179: {}, __VLS_194: {}, __VLS_216: {}, __VLS_232: {}, __VLS_253: {}, __VLS_276: {}, __VLS_314: {}, __VLS_329: {}, __VLS_351: {}, __VLS_367: {}, __VLS_382: {
     date: DateValue;
     dayValue: string;
     selected: boolean;
     disabled: boolean;
-}, __VLS_409: {}, __VLS_432: {
+}, __VLS_385: {}, __VLS_408: {
     date: DateValue;
     dayValue: string;
     selected: boolean;
     disabled: boolean;
-}, __VLS_435: {};
+}, __VLS_411: {};
 type __VLS_Slots = {} & {
     'clear-icon'?: (props: typeof __VLS_43) => any;
 } & {
-    'trigger-icon'?: (props: typeof __VLS_63) => any;
+    'trigger-icon'?: (props: typeof __VLS_58) => any;
 } & {
-    'trigger-icon'?: (props: typeof __VLS_83) => any;
+    'trigger-icon'?: (props: typeof __VLS_80) => any;
 } & {
-    'clear-icon'?: (props: typeof __VLS_99) => any;
+    'clear-icon'?: (props: typeof __VLS_96) => any;
 } & {
-    day?: (props: typeof __VLS_119) => any;
+    day?: (props: typeof __VLS_111) => any;
 } & {
-    footer?: (props: typeof __VLS_122) => any;
+    footer?: (props: typeof __VLS_114) => any;
 } & {
-    day?: (props: typeof __VLS_145) => any;
+    day?: (props: typeof __VLS_137) => any;
 } & {
-    footer?: (props: typeof __VLS_148) => any;
+    footer?: (props: typeof __VLS_140) => any;
 } & {
-    'clear-icon'?: (props: typeof __VLS_187) => any;
+    'clear-icon'?: (props: typeof __VLS_179) => any;
 } & {
-    'trigger-icon'?: (props: typeof __VLS_207) => any;
+    'trigger-icon'?: (props: typeof __VLS_194) => any;
 } & {
-    'trigger-icon'?: (props: typeof __VLS_227) => any;
+    'trigger-icon'?: (props: typeof __VLS_216) => any;
 } & {
-    'clear-icon'?: (props: typeof __VLS_243) => any;
+    'clear-icon'?: (props: typeof __VLS_232) => any;
 } & {
-    footer?: (props: typeof __VLS_269) => any;
+    footer?: (props: typeof __VLS_253) => any;
 } & {
-    footer?: (props: typeof __VLS_292) => any;
+    footer?: (props: typeof __VLS_276) => any;
 } & {
-    'clear-icon'?: (props: typeof __VLS_330) => any;
+    'clear-icon'?: (props: typeof __VLS_314) => any;
 } & {
-    'trigger-icon'?: (props: typeof __VLS_350) => any;
+    'trigger-icon'?: (props: typeof __VLS_329) => any;
 } & {
-    'trigger-icon'?: (props: typeof __VLS_370) => any;
+    'trigger-icon'?: (props: typeof __VLS_351) => any;
 } & {
-    'clear-icon'?: (props: typeof __VLS_386) => any;
+    'clear-icon'?: (props: typeof __VLS_367) => any;
 } & {
-    day?: (props: typeof __VLS_406) => any;
+    day?: (props: typeof __VLS_382) => any;
 } & {
-    footer?: (props: typeof __VLS_409) => any;
+    footer?: (props: typeof __VLS_385) => any;
 } & {
-    day?: (props: typeof __VLS_432) => any;
+    day?: (props: typeof __VLS_408) => any;
 } & {
-    footer?: (props: typeof __VLS_435) => any;
+    footer?: (props: typeof __VLS_411) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<DatePickerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: DateValue | DateRange | Time | undefined) => any;

package/dist/runtime/components/Editable.d.vue.ts

@@ -0,0 +1,91 @@
+import type { VariantProps } from 'tailwind-variants';
+import type { EditableThemeSlots } from '../theme/editable.js';
+import type { ColorRole } from '../utils/color-registry.js';
+import type { UiProp } from '../utils/ui.js';
+import { editableTheme } from '../theme/editable.js';
+type EditableVariants = VariantProps<typeof editableTheme>;
+export type EditableActivationMode = 'focus' | 'dblclick' | 'none';
+export type EditableSubmitMode = 'enter' | 'blur' | 'both' | 'none';
+export interface EditableProps {
+    modelValue?: string;
+    defaultValue?: string;
+    editing?: boolean;
+    defaultEditing?: boolean;
+    activationMode?: EditableActivationMode;
+    submitMode?: EditableSubmitMode;
+    controls?: boolean;
+    multiline?: boolean;
+    rows?: number;
+    placeholder?: string | {
+        preview: string;
+        edit: string;
+    };
+    selectOnFocus?: boolean;
+    disabled?: boolean;
+    readonly?: boolean;
+    loading?: boolean;
+    invalid?: boolean;
+    required?: boolean;
+    maxLength?: number;
+    id?: string;
+    name?: string;
+    size?: EditableVariants['size'];
+    color?: ColorRole;
+    editIcon?: string;
+    submitIcon?: string;
+    cancelIcon?: string;
+    editLabel?: string;
+    submitLabel?: string;
+    cancelLabel?: string;
+    ui?: UiProp<EditableThemeSlots>;
+}
+export interface EditableEmits {
+    'update:modelValue': [value: string];
+    'update:editing': [editing: boolean];
+    'edit': [];
+    'submit': [value: string];
+    'cancel': [value: string];
+}
+export interface EditableSlotProps {
+    value: string;
+    draft: string;
+    editing: boolean;
+    disabled: boolean;
+    edit: () => void;
+    submit: () => boolean;
+    cancel: () => void;
+}
+export interface EditableSlots {
+    default?: (props: EditableSlotProps) => any;
+    preview?: (props: EditableSlotProps) => any;
+    controls?: (props: EditableSlotProps) => any;
+}
+type __VLS_Slots = EditableSlots;
+declare function edit(): void;
+declare function cancel(restore?: boolean): void;
+declare function submit(restore?: boolean): boolean;
+declare const __VLS_base: import("vue").DefineComponent<EditableProps, {
+    edit: typeof edit;
+    submit: typeof submit;
+    cancel: typeof cancel;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    edit: () => any;
+    submit: (value: string) => any;
+    cancel: (value: string) => any;
+    "update:modelValue": (value: string) => any;
+    "update:editing": (editing: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<EditableProps> & Readonly<{
+    onEdit?: (() => any) | undefined;
+    onSubmit?: ((value: string) => any) | undefined;
+    onCancel?: ((value: string) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    "onUpdate:editing"?: ((editing: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/Editable.vue

@@ -0,0 +1,257 @@
+<script setup>
+import { Primitive } from "reka-ui";
+import { computed, mergeProps, nextTick, onMounted, ref, useAttrs, useId, watch } from "vue";
+import { useFormField } from "../composables/use-form-field";
+import { useIcons } from "../composables/use-icons";
+import { useMessages } from "../composables/use-messages";
+import { editableTheme } from "../theme/editable";
+import { isNativeInputA11yAttr, isNativeInputAttr } from "../utils/native-input";
+import { resolveRegisteredColorRole } from "../utils/registered-colors";
+import { applyClassPrefix, resolveSlot, useComponentTheme, useFallthroughAttrs, useRootProps, useThemeProps } from "../utils/ui";
+import Button from "./Button.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  modelValue: { type: String, required: false },
+  defaultValue: { type: String, required: false },
+  editing: { type: Boolean, required: false, default: void 0 },
+  defaultEditing: { type: Boolean, required: false },
+  activationMode: { type: String, required: false, default: "focus" },
+  submitMode: { type: String, required: false, default: "both" },
+  controls: { type: Boolean, required: false, default: true },
+  multiline: { type: Boolean, required: false },
+  rows: { type: Number, required: false },
+  placeholder: { type: [String, Object], required: false },
+  selectOnFocus: { type: Boolean, required: false, default: true },
+  disabled: { type: Boolean, required: false },
+  readonly: { type: Boolean, required: false },
+  loading: { type: Boolean, required: false },
+  invalid: { type: Boolean, required: false },
+  required: { type: Boolean, required: false },
+  maxLength: { type: Number, required: false },
+  id: { type: String, required: false },
+  name: { type: String, required: false },
+  size: { type: null, required: false },
+  color: { type: null, required: false },
+  editIcon: { type: String, required: false },
+  submitIcon: { type: String, required: false },
+  cancelIcon: { type: String, required: false },
+  editLabel: { type: String, required: false },
+  submitLabel: { type: String, required: false },
+  cancelLabel: { type: String, required: false },
+  ui: { type: Object, required: false }
+});
+const emit = defineEmits(["update:modelValue", "update:editing", "edit", "submit", "cancel"]);
+defineSlots();
+const field = useFormField();
+const attrs = useAttrs();
+const icons = useIcons();
+const messages = useMessages();
+const defaults = useThemeProps("editable");
+const innerValue = ref(props.defaultValue ?? "");
+const value = computed(() => props.modelValue ?? innerValue.value);
+const draft = ref(value.value);
+const innerEditing = ref(!!props.defaultEditing);
+const isEditing = computed(() => (props.editing ?? innerEditing.value) && !props.disabled && !props.readonly);
+const blocked = computed(() => !!(props.disabled || props.readonly || props.loading));
+const root = ref();
+const input = ref();
+const preview = ref();
+const inputId = props.id ?? field?.id ?? useId();
+const fieldName = computed(() => props.name ?? field?.name);
+const formId = computed(() => attrs.form);
+const invalid = computed(() => !!props.invalid || !!field?.invalid.value);
+const size = computed(() => props.size ?? field?.size ?? defaults.value.size ?? "md");
+const color = computed(() => resolveRegisteredColorRole(props.color ?? defaults.value.color ?? "primary", "primary"));
+const buttonSize = computed(() => size.value === "lg" ? "md" : "sm");
+const theme = useComponentTheme("editable", editableTheme);
+const ui = computed(() => theme.value({ size: size.value, color: color.value, invalid: invalid.value, multiline: props.multiline, empty: !value.value }));
+const placeholder = computed(() => typeof props.placeholder === "string" ? { preview: props.placeholder, edit: props.placeholder } : props.placeholder ?? { preview: messages.value.editablePlaceholder, edit: "" });
+const isInputAttr = (key) => isNativeInputAttr(key) || isNativeInputA11yAttr(key);
+const rootProps = useRootProps(() => ui.value.root, () => props.ui?.root, { exclude: isInputAttr });
+const nativeAttrs = useFallthroughAttrs(isInputAttr);
+const labelledBy = computed(() => attrs["aria-labelledby"] ?? field?.labelId);
+const describedBy = computed(() => [attrs["aria-describedby"], field?.describedBy.value].filter(Boolean).join(" ") || void 0);
+const label = computed(() => attrs["aria-label"] ?? (labelledBy.value ? void 0 : messages.value.editableInput));
+const inputProps = computed(() => mergeProps(resolveSlot(ui.value.input, props.ui?.input), nativeAttrs.value));
+const scope = computed(() => ({ value: value.value, draft: draft.value, editing: isEditing.value, disabled: blocked.value, edit, submit, cancel }));
+let restoreTarget;
+let restoringFocus = false;
+let restoreOnClose = true;
+let closeReason;
+const composing = ref(false);
+function setEditing(editing) {
+  innerEditing.value = editing;
+  emit("update:editing", editing);
+}
+async function focusInput() {
+  await nextTick();
+  if (!isEditing.value)
+    return;
+  input.value?.focus({ preventScroll: true });
+  if (props.selectOnFocus)
+    input.value?.select();
+}
+function edit() {
+  if (!blocked.value && !isEditing.value)
+    setEditing(true);
+}
+function cancel(restore = true) {
+  if (!isEditing.value)
+    return;
+  restoreOnClose = restore;
+  setEditing(false);
+}
+function submit(restore = true) {
+  if (!isEditing.value || blocked.value || closeReason)
+    return false;
+  if (input.value && !input.value.checkValidity()) {
+    input.value.reportValidity();
+    return false;
+  }
+  closeReason = "submit";
+  restoreOnClose = restore;
+  innerValue.value = draft.value;
+  emit("update:modelValue", draft.value);
+  setEditing(false);
+  emit("submit", draft.value);
+  return true;
+}
+watch(value, (next) => draft.value = next);
+watch(isEditing, async (editing, previous) => {
+  if (editing) {
+    restoreTarget = document.activeElement instanceof HTMLElement ? document.activeElement : void 0;
+    draft.value = value.value;
+    closeReason = void 0;
+    restoreOnClose = true;
+    emit("edit");
+    await focusInput();
+  } else if (previous) {
+    if (closeReason !== "submit")
+      emit("cancel", value.value);
+    draft.value = value.value;
+    closeReason = void 0;
+    await nextTick();
+    if (restoreOnClose) {
+      restoringFocus = true;
+      const target = restoreTarget?.isConnected ? restoreTarget : preview.value?.$el;
+      target?.focus({ preventScroll: true });
+      restoringFocus = false;
+    }
+  }
+});
+watch(() => props.disabled || props.readonly, (blocked2) => {
+  if (blocked2) {
+    innerEditing.value = false;
+    if (props.editing)
+      emit("update:editing", false);
+  }
+});
+onMounted(() => {
+  if (isEditing.value)
+    focusInput();
+});
+async function onFocusOut(event) {
+  if (event.relatedTarget instanceof Node && root.value?.contains(event.relatedTarget))
+    return;
+  await nextTick();
+  if (!isEditing.value || props.loading || root.value?.contains(document.activeElement))
+    return;
+  if (props.submitMode === "blur" || props.submitMode === "both")
+    submit(false);
+  else if (props.submitMode === "enter")
+    cancel(false);
+}
+function onKeydown(event) {
+  if (event.defaultPrevented || event.isComposing || composing.value || event.keyCode === 229)
+    return;
+  if (event.key === "Escape") {
+    event.preventDefault();
+    event.stopPropagation();
+    cancel();
+  } else if (event.key === "Enter" && (!props.multiline || event.ctrlKey || event.metaKey)) {
+    event.preventDefault();
+    event.stopPropagation();
+    if (props.submitMode === "enter" || props.submitMode === "both")
+      submit();
+  }
+}
+function onPreviewFocus() {
+  if (!restoringFocus && props.activationMode === "focus")
+    edit();
+}
+function onPreviewKeydown(event) {
+  if (props.activationMode !== "none" && (event.key === "Enter" || event.key === " ")) {
+    event.preventDefault();
+    edit();
+  }
+}
+async function onInvalid(event) {
+  event.preventDefault();
+  edit();
+  await nextTick();
+  input.value?.reportValidity();
+}
+defineExpose({ edit, submit, cancel });
+</script>
+
+<template>
+  <div ref="root" :data-selaras-color="invalid ? 'danger' : color" :data-editing="isEditing ? '' : void 0" :aria-busy="loading || void 0" :data-selaras-field-filled="value ? '' : void 0" :data-selaras-field-active="isEditing ? '' : void 0" v-bind="rootProps" @focusout="onFocusOut">
+    <div v-bind="resolveSlot(ui.area, props.ui?.area)">
+      <component
+        :is="multiline ? 'textarea' : 'input'"
+        v-if="isEditing"
+        :id="inputId"
+        ref="input"
+        :value="draft"
+        :rows="multiline ? rows ?? 3 : void 0"
+        :placeholder="placeholder.edit"
+        :disabled="disabled || loading"
+        :required="required"
+        :maxlength="maxLength"
+        :aria-invalid="invalid || void 0"
+        v-bind="inputProps"
+        :aria-label="label"
+        :aria-labelledby="labelledBy"
+        :aria-describedby="describedBy"
+        @input="draft = $event.target.value"
+        @keydown="onKeydown"
+        @compositionstart="composing = true"
+        @compositionend="composing = false"
+      />
+      <Primitive
+        v-else
+        :id="inputId"
+        ref="preview"
+        :as="activationMode === 'none' || readonly ? 'span' : 'button'"
+        :type="activationMode !== 'none' && !readonly ? 'button' : void 0"
+        :tabindex="activationMode === 'none' || readonly ? -1 : void 0"
+        :disabled="disabled || loading || void 0"
+        :aria-disabled="disabled || loading || void 0"
+        :aria-label="attrs['aria-label']"
+        :aria-labelledby="labelledBy"
+        :aria-describedby="describedBy"
+        v-bind="resolveSlot(ui.preview, props.ui?.preview)"
+        @focus="onPreviewFocus"
+        @click="activationMode === 'focus' && edit()"
+        @dblclick="activationMode === 'dblclick' && edit()"
+        @keydown="onPreviewKeydown"
+      >
+        <slot name="preview" v-bind="scope">
+          <slot v-bind="scope">
+            {{ value || placeholder.preview }}
+          </slot>
+        </slot>
+      </Primitive>
+    </div>
+    <div v-if="controls || $slots.controls" v-bind="resolveSlot(ui.controls, props.ui?.controls)">
+      <slot name="controls" v-bind="scope">
+        <template v-if="isEditing">
+          <Button type="button" :size="buttonSize" :color="color" variant="soft" square :disabled="blocked" :loading="loading" :icon="submitIcon ?? icons.check" :aria-label="submitLabel ?? messages.save" :title="submitLabel ?? messages.save" v-bind="resolveSlot(ui.submit, props.ui?.submit)" @click="submit()" />
+          <Button type="button" :size="buttonSize" color="neutral" variant="ghost" square :disabled="blocked" :icon="cancelIcon ?? icons.close" :aria-label="cancelLabel ?? messages.cancel" :title="cancelLabel ?? messages.cancel" v-bind="resolveSlot(ui.cancel, props.ui?.cancel)" @click="cancel()" />
+        </template>
+        <Button v-else type="button" :size="buttonSize" color="neutral" variant="ghost" square :disabled="blocked" :loading="loading" :icon="editIcon ?? icons.edit" :aria-label="editLabel ?? messages.edit" :title="editLabel ?? messages.edit" v-bind="resolveSlot(ui.edit, props.ui?.edit)" @click="edit" />
+      </slot>
+    </div>
+    <component :is="multiline ? 'textarea' : 'input'" v-if="fieldName" :class="applyClassPrefix('sr-only')" :type="multiline ? void 0 : 'text'" tabindex="-1" aria-hidden="true" :name="fieldName" :form="formId" :value="value" :required="required" :disabled="disabled" :readonly="readonly" @invalid="onInvalid" />
+  </div>
+</template>

package/dist/runtime/components/Editable.vue.d.ts

@@ -0,0 +1,91 @@
+import type { VariantProps } from 'tailwind-variants';
+import type { EditableThemeSlots } from '../theme/editable.js';
+import type { ColorRole } from '../utils/color-registry.js';
+import type { UiProp } from '../utils/ui.js';
+import { editableTheme } from '../theme/editable.js';
+type EditableVariants = VariantProps<typeof editableTheme>;
+export type EditableActivationMode = 'focus' | 'dblclick' | 'none';
+export type EditableSubmitMode = 'enter' | 'blur' | 'both' | 'none';
+export interface EditableProps {
+    modelValue?: string;
+    defaultValue?: string;
+    editing?: boolean;
+    defaultEditing?: boolean;
+    activationMode?: EditableActivationMode;
+    submitMode?: EditableSubmitMode;
+    controls?: boolean;
+    multiline?: boolean;
+    rows?: number;
+    placeholder?: string | {
+        preview: string;
+        edit: string;
+    };
+    selectOnFocus?: boolean;
+    disabled?: boolean;
+    readonly?: boolean;
+    loading?: boolean;
+    invalid?: boolean;
+    required?: boolean;
+    maxLength?: number;
+    id?: string;
+    name?: string;
+    size?: EditableVariants['size'];
+    color?: ColorRole;
+    editIcon?: string;
+    submitIcon?: string;
+    cancelIcon?: string;
+    editLabel?: string;
+    submitLabel?: string;
+    cancelLabel?: string;
+    ui?: UiProp<EditableThemeSlots>;
+}
+export interface EditableEmits {
+    'update:modelValue': [value: string];
+    'update:editing': [editing: boolean];
+    'edit': [];
+    'submit': [value: string];
+    'cancel': [value: string];
+}
+export interface EditableSlotProps {
+    value: string;
+    draft: string;
+    editing: boolean;
+    disabled: boolean;
+    edit: () => void;
+    submit: () => boolean;
+    cancel: () => void;
+}
+export interface EditableSlots {
+    default?: (props: EditableSlotProps) => any;
+    preview?: (props: EditableSlotProps) => any;
+    controls?: (props: EditableSlotProps) => any;
+}
+type __VLS_Slots = EditableSlots;
+declare function edit(): void;
+declare function cancel(restore?: boolean): void;
+declare function submit(restore?: boolean): boolean;
+declare const __VLS_base: import("vue").DefineComponent<EditableProps, {
+    edit: typeof edit;
+    submit: typeof submit;
+    cancel: typeof cancel;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    edit: () => any;
+    submit: (value: string) => any;
+    cancel: (value: string) => any;
+    "update:modelValue": (value: string) => any;
+    "update:editing": (editing: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<EditableProps> & Readonly<{
+    onEdit?: (() => any) | undefined;
+    onSubmit?: ((value: string) => any) | undefined;
+    onCancel?: ((value: string) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    "onUpdate:editing"?: ((editing: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/Input.vue

@@ -1,14 +1,13 @@
 <script setup>
-import { computed, mergeProps } from "vue";
+import { computed, mergeProps, nextTick, ref, useAttrs } from "vue";
 import { useFormField } from "../composables/use-form-field";
-import { useIcons } from "../composables/use-icons";
-import { useMessages } from "../composables/use-messages";
+import FieldClearButton from "../internal/FieldClearButton.vue";
 import { inputTheme } from "../theme/input";
 import { useFieldAdornments } from "../utils/field-adornments";
+import { canClearField, fieldClearWidths, isFieldReadonly } from "../utils/field-clear";
 import { isNativeInputA11yAttr, isNativeInputAttr } from "../utils/native-input";
 import { resolveRegisteredColorRole } from "../utils/registered-colors";
 import { resolveSlot, useComponentTheme, useFallthroughAttrs, useRootProps, useThemeProps } from "../utils/ui";
-import Button from "./Button.vue";
 import Icon from "./Icon.vue";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
@@ -30,22 +29,26 @@ const emit = defineEmits(["update:modelValue"]);
 const slots = defineSlots();
 const { leading, trailing, padding, clearOffset } = useFieldAdornments();
 const field = useFormField();
+const attrs = useAttrs();
+const inputRef = ref();
 const effectivePlaceholder = computed(() => props.placeholder || (field?.floatingLabel.value ? " " : void 0));
 const inputId = computed(() => props.id ?? field?.id);
 const inputInvalid = computed(() => props.invalid || (field?.invalid.value ?? false));
 const describedBy = computed(() => field?.describedBy.value);
-const hasValue = computed(() => props.modelValue !== void 0 && props.modelValue !== "");
-const showClear = computed(() => !!props.clearable && !props.disabled && hasValue.value);
-function clear() {
+const hasValue = computed(() => props.modelValue != null && props.modelValue !== "");
+const showClear = computed(() => canClearField(props.clearable, hasValue.value, props.disabled, isFieldReadonly(attrs.readonly)));
+async function clear() {
+  if (!showClear.value)
+    return;
   emit("update:modelValue", "");
+  await nextTick();
+  inputRef.value?.focus();
 }
 const themeProps = useThemeProps("input");
 const effectiveSize = computed(() => props.size ?? field?.size ?? themeProps.value.size ?? "md");
-const clearSize = computed(() => ({ sm: "sm", md: "sm", lg: "md" })[effectiveSize.value]);
-const adornmentScope = computed(() => ({ disabled: !!props.disabled, size: effectiveSize.value, buttonSize: clearSize.value }));
-const clearWidth = computed(() => ({ sm: "1.75rem", md: "2.25rem", lg: "2.5rem" })[effectiveSize.value]);
-const icons = useIcons();
-const messages = useMessages();
+const adornmentButtonSize = computed(() => ({ sm: "sm", md: "sm", lg: "md" })[effectiveSize.value]);
+const adornmentScope = computed(() => ({ disabled: !!props.disabled, size: effectiveSize.value, buttonSize: adornmentButtonSize.value }));
+const clearWidth = computed(() => fieldClearWidths[effectiveSize.value]);
 const theme = useComponentTheme("input", inputTheme);
 const effectiveColor = computed(() => resolveRegisteredColorRole(props.color ?? themeProps.value.color ?? "primary", "primary"));
 const ui = computed(() => theme.value({
@@ -76,6 +79,7 @@ function clearProps() {
     <Icon v-else-if="icon" :name="icon" v-bind="resolveSlot(ui.leadingIcon, props.ui?.leadingIcon)" />
     <input
       :id="inputId"
+      ref="inputRef"
       data-ui-group-item
       :value="modelValue"
       :type="type"
@@ -87,21 +91,16 @@ function clearProps() {
       v-bind="adornedInputProps()"
       @input="$emit('update:modelValue', $event.target.value)"
     >
-    <Button
+    <FieldClearButton
       v-if="showClear"
-      :size="clearSize"
-      variant="text"
-      color="neutral"
-      :aria-label="messages.clear"
+      :size="effectiveSize"
       v-bind="clearProps()"
       @click="clear"
     >
-      <template #icon="{ class: iconClass }">
-        <slot name="clear-icon">
-          <Icon :name="icons.close" :class="iconClass" />
-        </slot>
+      <template v-if="slots['clear-icon']" #default>
+        <slot name="clear-icon" />
       </template>
-    </Button>
+    </FieldClearButton>
     <Icon v-else-if="trailingIcon && !slots.trailing" :name="trailingIcon" v-bind="resolveSlot(ui.trailingIcon, props.ui?.trailingIcon)" />
     <fieldset v-if="slots.trailing" ref="trailing" :disabled="disabled" :inert="disabled || void 0" v-bind="resolveSlot(ui.trailing, props.ui?.trailing)">
       <slot name="trailing" v-bind="adornmentScope" />