ensis-ui 0.0.0-stage → 3.0.0

package/dist/components/input/src/RsInput.css

@@ -0,0 +1,355 @@
+
+.rs-input-field[data-v-ecc31779] {
+  width: 100%;
+}
+.rs-input-shell[data-v-ecc31779] {
+  width: 100%;
+}
+
+/* 连体外壳统一外边框，避免 input/addon 各自圆角造成拼缝 */
+.rs-input-shell--combined[data-v-ecc31779] {
+  display: flex;
+  align-items: stretch;
+  box-sizing: border-box;
+  width: 100%;
+  border: 1px solid var(--rs-input-border, var(--rs-border));
+  border-radius: var(--rs-input-radius, var(--rs-radius-sm));
+  background: var(--rs-input-bg);
+  box-shadow: var(--rs-input-shadow, none);
+  overflow: hidden;
+  transition:
+    border-color var(--rs-transition-fast),
+    box-shadow var(--rs-transition-fast),
+    background var(--rs-transition-fast);
+}
+.rs-input-shell--combined[data-v-ecc31779]:hover:not(:focus-within):not(:has(.rs-input-group--disabled)):not(
+    :has(.rs-input-group--readonly)
+  ) {
+  border-color: var(--rs-input-border-hover, var(--rs-border));
+}
+.rs-input-shell--combined[data-v-ecc31779]:focus-within {
+  border-color: var(--rs-focus-border, var(--rs-primary));
+  box-shadow:
+    var(--rs-input-shadow, none),
+    0 0 0 var(--rs-focus-ring-width, 2px) var(--rs-focus-ring);
+}
+.rs-input-shell--combined[data-v-ecc31779]:has(.rs-input-group--invalid) {
+  border-color: var(--rs-danger);
+}
+.rs-input-shell--combined[data-v-ecc31779]:has(.rs-input-group--invalid):focus-within {
+  border-color: var(--rs-danger);
+  box-shadow:
+    var(--rs-input-shadow, none),
+    0 0 0 var(--rs-focus-ring-width, 2px) color-mix(in srgb, var(--rs-danger) 14%, transparent);
+}
+.rs-input-shell--combined .rs-input-group[data-v-ecc31779] {
+  flex: 1;
+  min-width: 0;
+  width: auto;
+  border: none;
+  border-radius: 0;
+  box-shadow: none;
+  background: transparent;
+}
+.rs-input-shell--combined .rs-input-group[data-v-ecc31779]:hover:not(.rs-input-group--disabled):not(
+    .rs-input-group--readonly
+  ):not(:focus-within),
+.rs-input-shell--combined .rs-input-group[data-v-ecc31779]:focus-within,
+.rs-input-shell--combined .rs-input-group--invalid[data-v-ecc31779],
+.rs-input-shell--combined .rs-input-group--invalid[data-v-ecc31779]:focus-within {
+  border-color: transparent;
+  box-shadow: none;
+}
+.rs-input-addon[data-v-ecc31779] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  flex-shrink: 0;
+  min-width: var(--rs-control-height-md);
+  padding: 0 var(--rs-space-sm);
+  border: none;
+  border-inline-start: 1px solid var(--rs-input-border, var(--rs-border));
+  border-radius: 0;
+  background: var(--rs-surface-hover);
+  color: var(--rs-muted);
+  font-size: var(--rs-font-size-sm);
+  white-space: nowrap;
+}
+.rs-input-addon--before[data-v-ecc31779] {
+  border-inline-start: none;
+  border-inline-end: 1px solid var(--rs-input-border, var(--rs-border));
+}
+.rs-input-shell--ssm .rs-input-addon[data-v-ecc31779] {
+  min-width: var(--rs-control-height-ssm);
+  padding: 0 var(--rs-space-xs);
+}
+.rs-input-shell--sm .rs-input-addon[data-v-ecc31779] {
+  min-width: var(--rs-control-height-sm);
+  padding: 0 var(--rs-space-xs);
+}
+.rs-input-shell--lg .rs-input-addon[data-v-ecc31779] {
+  min-width: var(--rs-control-height-lg);
+  padding: 0 var(--rs-space-md);
+}
+.rs-input-addon--icon[data-v-ecc31779] {
+  padding: 0;
+  /* 图标选择器与输入区同底，整块一致，避免灰底 + 按钮再叠一层 hover */
+  background: transparent;
+  color: var(--rs-muted);
+  transition:
+    color var(--rs-transition-fast),
+    background var(--rs-transition-fast);
+}
+.rs-input-addon--icon[data-v-ecc31779]:hover {
+  color: var(--rs-primary);
+  background: color-mix(in srgb, var(--rs-primary) 8%, transparent);
+}
+.rs-input-addon__button[data-v-ecc31779] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  min-width: inherit;
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+}
+.rs-input-addon__button[data-v-ecc31779]:hover:not(:disabled) {
+  /* 悬浮样式交给整块 .rs-input-addon--icon，按钮不再单独变色/铺底 */
+  color: inherit;
+  background: transparent;
+}
+.rs-input-addon__button[data-v-ecc31779]:focus-visible {
+  outline: none;
+  color: var(--rs-primary);
+  box-shadow: inset 0 0 0 var(--rs-focus-ring-width, 2px) var(--rs-focus-ring);
+}
+.rs-input-addon__button[data-v-ecc31779]:disabled {
+  cursor: not-allowed;
+  opacity: 0.38;
+}
+.rs-input-shell--disabled .rs-input-addon[data-v-ecc31779],
+.rs-input-shell--combined:has(.rs-input-group--disabled) .rs-input-addon[data-v-ecc31779] {
+  opacity: 0.38;
+  cursor: not-allowed;
+}
+.rs-input-group__custom-suffix[data-v-ecc31779] {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--rs-space-xs);
+}
+.rs-field--label-left .rs-input-field[data-v-ecc31779] {
+  grid-column: 2;
+  min-width: 0;
+}
+.rs-field--label-left .rs-input-field__error[data-v-ecc31779] {
+  grid-column: 2;
+}
+.rs-field--label-left .rs-field__label[data-v-ecc31779] {
+  display: flex;
+  align-items: center;
+  min-height: var(--rs-control-height-md);
+}
+.rs-input-field--ssm.rs-field--label-left .rs-field__label[data-v-ecc31779] {
+  min-height: var(--rs-control-height-ssm);
+}
+.rs-input-field--sm.rs-field--label-left .rs-field__label[data-v-ecc31779] {
+  min-height: var(--rs-control-height-sm);
+}
+.rs-input-field--lg.rs-field--label-left .rs-field__label[data-v-ecc31779] {
+  min-height: var(--rs-control-height-lg);
+}
+.rs-input-group[data-v-ecc31779] {
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  width: 100%;
+  height: var(--rs-control-height-md);
+  min-height: var(--rs-control-height-md);
+  border-radius: var(--rs-input-radius, var(--rs-radius-sm));
+  border: 1px solid var(--rs-input-border, var(--rs-border));
+  background: var(--rs-input-bg);
+  box-shadow: var(--rs-input-shadow, none);
+  /* 裁切 autofill 矩形 inset，避免盖住圆角边框 */
+  overflow: hidden;
+  transition:
+    border-color var(--rs-transition-fast),
+    box-shadow var(--rs-transition-fast),
+    background var(--rs-transition-fast);
+}
+.rs-input-group--ssm[data-v-ecc31779] {
+  height: var(--rs-control-height-ssm);
+  min-height: var(--rs-control-height-ssm);
+}
+.rs-input-group--sm[data-v-ecc31779] {
+  height: var(--rs-control-height-sm);
+  min-height: var(--rs-control-height-sm);
+}
+.rs-input-group--lg[data-v-ecc31779] {
+  height: var(--rs-control-height-lg);
+  min-height: var(--rs-control-height-lg);
+}
+.rs-input-group[data-v-ecc31779]:hover:not(.rs-input-group--disabled):not(.rs-input-group--readonly):not(:focus-within) {
+  border-color: var(--rs-input-border-hover, var(--rs-border));
+}
+.rs-input-group[data-v-ecc31779]:focus-within {
+  border-color: var(--rs-focus-border, var(--rs-primary));
+  background: var(--rs-input-bg);
+  box-shadow:
+    var(--rs-input-shadow, none),
+    0 0 0 var(--rs-focus-ring-width, 2px) var(--rs-focus-ring);
+}
+.rs-input-group--invalid[data-v-ecc31779] {
+  border-color: var(--rs-danger);
+}
+.rs-input-group--invalid[data-v-ecc31779]:focus-within {
+  border-color: var(--rs-danger);
+  box-shadow:
+    var(--rs-input-shadow, none),
+    0 0 0 var(--rs-focus-ring-width, 2px) color-mix(in srgb, var(--rs-danger) 14%, transparent);
+}
+.rs-input-group--disabled[data-v-ecc31779] {
+  opacity: 0.38;
+  cursor: not-allowed;
+  background: var(--rs-surface-hover);
+}
+.rs-input-group--readonly[data-v-ecc31779] {
+  background: var(--rs-surface-hover);
+  cursor: default;
+}
+.rs-input-group__affix[data-v-ecc31779] {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  color: var(--rs-muted);
+  font-size: var(--rs-font-size-sm);
+  white-space: nowrap;
+  user-select: none;
+}
+.rs-input-group__affix--prefix[data-v-ecc31779] {
+  padding-inline-start: var(--rs-space-md);
+}
+.rs-input-group__affix--suffix[data-v-ecc31779] {
+  gap: var(--rs-space-xs);
+  padding-inline-end: var(--rs-space-sm);
+}
+.rs-input-group--ssm .rs-input-group__affix--prefix[data-v-ecc31779] {
+  padding-inline-start: var(--rs-space-xs);
+}
+.rs-input-group--ssm .rs-input-group__affix--suffix[data-v-ecc31779] {
+  padding-inline-end: var(--rs-space-xs);
+}
+.rs-input-group--sm .rs-input-group__affix--prefix[data-v-ecc31779] {
+  padding-inline-start: var(--rs-space-sm);
+}
+.rs-input-group--sm .rs-input-group__affix--suffix[data-v-ecc31779] {
+  padding-inline-end: var(--rs-space-xs);
+}
+.rs-input-group--lg .rs-input-group__affix--prefix[data-v-ecc31779] {
+  padding-inline-start: var(--rs-space-lg);
+}
+.rs-input-group--lg .rs-input-group__affix--suffix[data-v-ecc31779] {
+  padding-inline-end: var(--rs-space-md);
+}
+.rs-input-group__count[data-v-ecc31779] {
+  font-size: var(--rs-font-size-xs);
+  color: var(--rs-muted);
+  font-variant-numeric: tabular-nums;
+}
+.rs-input-group__action[data-v-ecc31779] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.25rem;
+  height: 1.25rem;
+  padding: 0;
+  border: none;
+  border-radius: var(--rs-radius-xs);
+  background: transparent;
+  color: var(--rs-muted);
+  cursor: pointer;
+  transition:
+    color var(--rs-transition-fast),
+    background var(--rs-transition-fast);
+}
+.rs-input-group__action[data-v-ecc31779]:hover {
+  color: var(--rs-text);
+  background: var(--rs-item-hover);
+}
+.rs-input-group__action[data-v-ecc31779]:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 var(--rs-focus-ring-width, 2px) var(--rs-focus-ring);
+}
+.rs-input-group__control[data-v-ecc31779] {
+  flex: 1;
+  min-width: 0;
+  width: 100%;
+  min-height: inherit;
+  padding: 0 var(--rs-space-md);
+  border: none;
+  outline: none;
+  background: transparent;
+  color: var(--rs-text);
+  font-size: var(--rs-font-size-sm);
+  line-height: var(--rs-line-height-tight);
+}
+
+/* type=search 自带取消钮，与 clearable 的 x 叠成两个 */
+.rs-input-group__control[type='search'][data-v-ecc31779]::-webkit-search-decoration,
+.rs-input-group__control[type='search'][data-v-ecc31779]::-webkit-search-cancel-button,
+.rs-input-group__control[type='search'][data-v-ecc31779]::-webkit-search-results-button,
+.rs-input-group__control[type='search'][data-v-ecc31779]::-webkit-search-results-decoration {
+  -webkit-appearance: none;
+  appearance: none;
+}
+.rs-input-group__control--ssm[data-v-ecc31779] {
+  padding: 0 var(--rs-space-xs);
+  font-size: var(--rs-font-size-xs);
+}
+.rs-input-group__control--sm[data-v-ecc31779] {
+  padding: 0 var(--rs-space-sm);
+  font-size: var(--rs-font-size-xs);
+}
+.rs-input-group__control--lg[data-v-ecc31779] {
+  padding: 0 var(--rs-space-lg);
+  font-size: var(--rs-font-size-base);
+}
+.rs-input-group--has-prefix .rs-input-group__control[data-v-ecc31779] {
+  padding-inline-start: var(--rs-space-sm);
+}
+.rs-input-group--has-suffix .rs-input-group__control[data-v-ecc31779] {
+  padding-inline-end: var(--rs-space-xs);
+}
+.rs-input-group__control[data-v-ecc31779]::placeholder {
+  color: var(--rs-placeholder);
+}
+.rs-input-group__control[data-v-ecc31779]:disabled {
+  cursor: not-allowed;
+}
+.rs-input-group__control[data-v-ecc31779]:read-only {
+  cursor: default;
+}
+
+/* 浏览器 autofill 会给 input 注入独立背景色，与外层圆角容器不一致 */
+.rs-input-group__control[data-v-ecc31779]:-webkit-autofill,
+.rs-input-group__control[data-v-ecc31779]:-webkit-autofill:hover,
+.rs-input-group__control[data-v-ecc31779]:-webkit-autofill:focus,
+.rs-input-group__control[data-v-ecc31779]:-webkit-autofill:active {
+  -webkit-box-shadow: 0 0 0 1000px var(--rs-input-bg) inset;
+  box-shadow: 0 0 0 1000px var(--rs-input-bg) inset;
+  -webkit-text-fill-color: var(--rs-text);
+  caret-color: var(--rs-text);
+  transition: background-color 99999s ease-out 0s;
+}
+.rs-input-field__error[data-v-ecc31779] {
+  margin: 0.25rem 0 0;
+  font-size: var(--rs-font-size-xs);
+  line-height: var(--rs-line-height-tight);
+  color: var(--rs-danger);
+}

package/dist/components/input/src/RsInput.d.ts

@@ -0,0 +1,149 @@
+import type { RsComponentSize, RsRadius } from '../../../theme/types';
+import { type RsInputRule, type RsInputValidateTrigger } from './input-rules';
+import { type RsInputType } from './input-utils';
+import { type RsFormLabelPosition } from '../../form/src/form-utils';
+import { type RsFormRuleTrigger } from '../../form/src/form-rules';
+/**
+ * RsInput 模板 ref 请用此类型。
+ * 不要写 `InstanceType<typeof RsInput>`：组件实例类型过深，vue-tsc 会报 Excessive stack depth。
+ */
+export interface RsInputExpose {
+    validate: (trigger?: RsFormRuleTrigger) => Promise<boolean>;
+    clearValidation: () => void;
+    setValue: (value: unknown) => void;
+    setError: (message: string) => void;
+}
+/** 模板 ref 实例：expose + 根节点 */
+export type RsInputInstance = RsInputExpose & {
+    $el: HTMLElement;
+};
+export type { RsInputType };
+type __VLS_Props = {
+    id?: string;
+    type?: RsInputType;
+    placeholder?: string;
+    disabled?: boolean;
+    readonly?: boolean;
+    /** 手动标记错误（优先级高于自动校验） */
+    invalid?: boolean;
+    errorMessage?: string;
+    size?: RsComponentSize;
+    /** 圆角档位；默认 sm。直角 UI 传 `none`。 */
+    radius?: RsRadius;
+    /** 预设格式规则 */
+    rule?: RsInputRule;
+    /** 自定义校验，返回 true / false / 错误文案 */
+    validator?: (value: string) => boolean | string;
+    required?: boolean;
+    validateTrigger?: RsInputValidateTrigger;
+    /** 字段名：匹配 RsForm.rules[name]，并对齐大厂 Form.Item name */
+    name?: string;
+    /** 文本前缀（也可用 prefix 插槽） */
+    prefix?: string;
+    /** 文本后缀（也可用 suffix 插槽）；框内，排在清除 / 显隐之后 */
+    suffix?: string;
+    /**
+     * 框外前置 addon（对齐 Ant addonBefore）。
+     * 与 prefix 不同：连体在输入框外侧，用于单位、协议等。
+     */
+    addonBefore?: string;
+    /**
+     * 框外后置 addon（对齐 Ant addonAfter）。
+     * 文本单位、协议等；也可配合 addonAfterIcon 做选择器按钮。
+     */
+    addonAfter?: string;
+    /**
+     * 框外后置图标按钮（Lucide 名，如 ellipsis）。
+     * 由组件自绘，走连体 addonAfter；无 #addonAfter / addonAfter 文本时生效。
+     */
+    addonAfterIcon?: string;
+    /** addonAfterIcon 的无障碍文案 / title */
+    addonAfterIconLabel?: string;
+    /** 有值时展示清除按钮（对齐 Ant allowClear / Element clearable） */
+    clearable?: boolean;
+    /** 最大字符数，配合 showCount 展示字数统计 */
+    maxlength?: number;
+    /** 展示字数统计，需配合 maxlength */
+    showCount?: boolean;
+    /** 密码框显隐按钮；password 类型默认展示 */
+    visibilityToggle?: boolean;
+    /** 为 false 时不展示自动校验错误 */
+    showValidateMessage?: boolean;
+    /** 字段标签（与 RsDatePicker / RsTimePicker 一致） */
+    label?: string;
+    /** 辅助说明，展示在控件下方 */
+    hint?: string;
+    labelPosition?: RsFormLabelPosition;
+    /**
+     * 浏览器自动填充。
+     * 默认：普通输入 off；password 用 new-password（off 常被浏览器忽略）。
+     * 需要记住时可显式传 on / username / current-password 等。
+     */
+    autocomplete?: string;
+};
+type __VLS_ModelProps = {
+    /**
+     * modelValue 契约恒为 string（对齐 Ant Input / 原生 input.value）。
+     * get/set 变换兜住外部误传 number；原生控件用 :value + el.value，避免 type=number 的类型漂移。
+     */
+    modelValue?: string;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_15: {}, __VLS_17: {}, __VLS_24: {
+    name: string | undefined;
+    message: string;
+    value: string;
+};
+type __VLS_Slots = {} & {
+    addonBefore?: (props: typeof __VLS_1) => any;
+} & {
+    prefix?: (props: typeof __VLS_3) => any;
+} & {
+    suffix?: (props: typeof __VLS_15) => any;
+} & {
+    addonAfter?: (props: typeof __VLS_17) => any;
+} & {
+    error?: (props: typeof __VLS_24) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, RsInputExpose, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    clear: () => any;
+    blur: (event: FocusEvent) => any;
+    focus: (event: FocusEvent) => any;
+    "update:modelValue": (value: string) => any;
+    validate: (payload: {
+        valid: boolean;
+        message?: string;
+    }) => any;
+    pressEnter: (event: KeyboardEvent) => any;
+    addonAfterClick: (event: MouseEvent) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onClear?: (() => any) | undefined;
+    onBlur?: ((event: FocusEvent) => any) | undefined;
+    onFocus?: ((event: FocusEvent) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    onValidate?: ((payload: {
+        valid: boolean;
+        message?: string;
+    }) => any) | undefined;
+    onPressEnter?: ((event: KeyboardEvent) => any) | undefined;
+    onAddonAfterClick?: ((event: MouseEvent) => any) | undefined;
+}>, {
+    required: boolean;
+    type: RsInputType;
+    invalid: boolean;
+    disabled: boolean;
+    readonly: boolean;
+    validateTrigger: RsInputValidateTrigger;
+    clearable: boolean;
+    showCount: boolean;
+    visibilityToggle: boolean;
+    showValidateMessage: boolean;
+}, {}, {}, {}, 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;
+    };
+};