ensis-ui 0.0.0-stage → 3.0.0

package/dist/components/dynamic-tags/src/RsDynamicTags.css

@@ -0,0 +1,225 @@
+
+.rs-dynamic-tags-field[data-v-2213feb0] {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  min-width: 0;
+}
+.rs-dynamic-tags-field__error[data-v-2213feb0] {
+  margin: 0.25rem 0 0;
+  font-size: var(--rs-font-size-xs);
+  line-height: var(--rs-line-height-tight);
+  color: var(--rs-danger);
+}
+.rs-dynamic-tags-field__sr-only[data-v-2213feb0] {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+.rs-dynamic-tags[data-v-2213feb0] {
+  --rs-dynamic-tags-box-height: var(--rs-control-height-md);
+  --rs-dynamic-tags-border-width: 1px;
+  --rs-dynamic-tags-chip-height: calc(
+    var(--rs-dynamic-tags-box-height) - 2 * var(--rs-dynamic-tags-padding, var(--rs-space-xs)) - 2 *
+      var(--rs-dynamic-tags-border-width)
+  );
+  position: relative;
+  margin: 0;
+  min-inline-size: 0;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--rs-dynamic-tags-gap, var(--rs-space-xs));
+  min-height: var(--rs-dynamic-tags-box-height);
+  padding: var(--rs-dynamic-tags-padding, var(--rs-space-xs));
+  border: var(--rs-dynamic-tags-border-width) solid
+    var(--rs-dynamic-tags-border, var(--rs-input-border, var(--rs-border)));
+  border-radius: var(
+    --rs-dynamic-tags-radius-local,
+    var(--rs-dynamic-tags-radius, var(--rs-radius))
+  );
+  background: var(--rs-dynamic-tags-bg, var(--rs-input-bg, var(--rs-surface)));
+  box-shadow: var(--rs-dynamic-tags-shadow, var(--rs-input-shadow, none));
+  box-sizing: border-box;
+  cursor: text;
+  transition:
+    border-color var(--rs-transition-fast),
+    box-shadow var(--rs-transition-fast),
+    background-color var(--rs-transition-fast);
+}
+.rs-dynamic-tags[data-v-2213feb0]:hover:not(.rs-dynamic-tags--disabled):not(.rs-dynamic-tags--readonly) {
+  border-color: var(
+    --rs-dynamic-tags-border-hover,
+    var(--rs-input-border-hover, var(--rs-border))
+  );
+}
+.rs-dynamic-tags--ssm[data-v-2213feb0] {
+  --rs-dynamic-tags-box-height: var(--rs-control-height-ssm);
+  --rs-dynamic-tags-padding: 1px;
+}
+.rs-dynamic-tags--sm[data-v-2213feb0] {
+  --rs-dynamic-tags-box-height: var(--rs-control-height-sm);
+}
+.rs-dynamic-tags--md[data-v-2213feb0] {
+  --rs-dynamic-tags-box-height: var(--rs-control-height-md);
+}
+.rs-dynamic-tags--lg[data-v-2213feb0] {
+  --rs-dynamic-tags-box-height: var(--rs-control-height-lg);
+}
+.rs-dynamic-tags--editing[data-v-2213feb0]:not(.rs-dynamic-tags--disabled):not(.rs-dynamic-tags--readonly),
+.rs-dynamic-tags[data-v-2213feb0]:focus-within:not(.rs-dynamic-tags--disabled):not(.rs-dynamic-tags--readonly) {
+  border-color: var(--rs-focus-border, var(--rs-primary));
+  box-shadow:
+    var(--rs-dynamic-tags-shadow, var(--rs-input-shadow, none)),
+    0 0 0 var(--rs-focus-ring-width, 2px) var(--rs-focus-ring);
+}
+.rs-dynamic-tags--feedback[data-v-2213feb0],
+.rs-dynamic-tags--invalid[data-v-2213feb0] {
+  border-color: var(--rs-danger);
+}
+.rs-dynamic-tags--invalid[data-v-2213feb0]:focus-within:not(.rs-dynamic-tags--disabled) {
+  border-color: var(--rs-danger);
+  box-shadow:
+    var(--rs-dynamic-tags-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-dynamic-tags--feedback[data-v-2213feb0] {
+  animation: rs-dynamic-tags-shake-2213feb0 0.45s ease;
+}
+.rs-dynamic-tags--disabled[data-v-2213feb0] {
+  opacity: var(--rs-dynamic-tags-disabled-opacity, 0.38);
+  cursor: not-allowed;
+}
+.rs-dynamic-tags--readonly[data-v-2213feb0] {
+  cursor: default;
+}
+.rs-dynamic-tags__input[data-v-2213feb0] {
+  flex: 1 1 6rem;
+  min-width: 4rem;
+  width: 0;
+  height: var(--rs-dynamic-tags-chip-height);
+  margin: 0;
+  padding: 0 var(--rs-space-xs);
+  border: 0;
+  outline: none;
+  background: transparent;
+  color: var(--rs-text-primary, var(--rs-text));
+  font: inherit;
+  font-size: var(--rs-font-size-sm);
+  line-height: var(--rs-dynamic-tags-chip-height);
+  box-sizing: border-box;
+  box-shadow: none;
+  appearance: none;
+}
+.rs-dynamic-tags--ssm .rs-dynamic-tags__input[data-v-2213feb0],
+.rs-dynamic-tags--sm .rs-dynamic-tags__input[data-v-2213feb0] {
+  font-size: var(--rs-font-size-xs);
+}
+.rs-dynamic-tags__input[data-v-2213feb0]::placeholder {
+  color: var(--rs-text-tertiary, var(--rs-placeholder));
+  line-height: var(--rs-dynamic-tags-chip-height);
+}
+.rs-dynamic-tags__trigger[data-v-2213feb0] {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: var(--rs-dynamic-tags-chip-height);
+  height: var(--rs-dynamic-tags-chip-height);
+  margin: 0;
+  padding: 0;
+  border: 1px dashed var(--rs-dynamic-tags-trigger-border, var(--rs-border));
+  border-radius: var(--rs-radius-sm);
+  background: transparent;
+  color: var(--rs-text-secondary, var(--rs-muted));
+  cursor: pointer;
+  outline: none;
+  box-sizing: border-box;
+  transition:
+    color var(--rs-transition-fast),
+    border-color var(--rs-transition-fast),
+    background-color var(--rs-transition-fast);
+}
+.rs-dynamic-tags__trigger[data-v-2213feb0]:hover {
+  color: var(--rs-primary);
+  border-color: var(--rs-primary);
+  background: color-mix(in srgb, var(--rs-primary) 8%, transparent);
+}
+.rs-dynamic-tags__trigger[data-v-2213feb0]:focus-visible {
+  box-shadow: 0 0 0 var(--rs-focus-ring-width, 2px) var(--rs-focus-ring);
+}
+.rs-dynamic-tags__clear[data-v-2213feb0] {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: var(--rs-dynamic-tags-chip-height);
+  height: var(--rs-dynamic-tags-chip-height);
+  padding: 0;
+  border: 0;
+  border-radius: var(--rs-radius-xs);
+  background: transparent;
+  color: var(--rs-text-secondary, var(--rs-muted));
+  cursor: pointer;
+  outline: none;
+  box-sizing: border-box;
+  transition:
+    color var(--rs-transition-fast),
+    background-color var(--rs-transition-fast);
+}
+.rs-dynamic-tags__clear[data-v-2213feb0]:hover {
+  color: var(--rs-text-primary, var(--rs-text));
+  background: var(--rs-item-hover);
+}
+.rs-dynamic-tags__clear[data-v-2213feb0]:focus-visible {
+  box-shadow: 0 0 0 var(--rs-focus-ring-width, 2px) var(--rs-focus-ring);
+}
+@keyframes rs-dynamic-tags-shake-2213feb0 {
+0%,
+  100% {
+    transform: translateX(0);
+}
+20% {
+    transform: translateX(-3px);
+}
+40% {
+    transform: translateX(3px);
+}
+60% {
+    transform: translateX(-2px);
+}
+80% {
+    transform: translateX(2px);
+}
+}
+@media (prefers-reduced-motion: reduce) {
+.rs-dynamic-tags[data-v-2213feb0] {
+    transition: none;
+}
+.rs-dynamic-tags--feedback[data-v-2213feb0] {
+    animation: none;
+}
+.rs-dynamic-tags__trigger[data-v-2213feb0],
+  .rs-dynamic-tags__clear[data-v-2213feb0] {
+    transition: none;
+}
+}
+@media (forced-colors: active) {
+.rs-dynamic-tags[data-v-2213feb0] {
+    border: 1px solid ButtonText;
+    background: Field;
+    forced-color-adjust: none;
+}
+.rs-dynamic-tags[data-v-2213feb0]:focus-within {
+    border-color: Highlight;
+}
+.rs-dynamic-tags__input[data-v-2213feb0] {
+    color: FieldText;
+}
+}

package/dist/components/dynamic-tags/src/RsDynamicTags.d.ts

@@ -0,0 +1,112 @@
+import type { RsComponentSize, RsRadius } from '../../../theme/types';
+import { type RsFormRuleTrigger } from '../../form/src/form-rules';
+import type { RsTagVariant } from '../../tag';
+import { type RsDynamicTagsParse, type RsDynamicTagsRejectReason } from './dynamic-tags-utils';
+/**
+ * RsDynamicTags 模板 ref 请用此类型。
+ * 不要写 `InstanceType<typeof RsDynamicTags>`：组件实例类型过深，vue-tsc 会报 Excessive stack depth。
+ */
+export interface RsDynamicTagsExpose {
+    validate: (trigger?: RsFormRuleTrigger) => Promise<{
+        valid: boolean;
+        message?: string;
+        name?: string;
+    }>;
+    clearValidation: () => void;
+    setValue: (value: unknown) => void;
+    setError: (message: string) => void;
+    focus: () => void;
+    blur: () => void;
+}
+/** 模板 ref 实例：expose + 根节点 */
+export type RsDynamicTagsInstance = RsDynamicTagsExpose & {
+    $el: HTMLElement;
+};
+export type RsDynamicTagsInputMode = 'trigger' | 'always';
+export type { RsDynamicTagsParse, RsDynamicTagsRejectReason };
+type __VLS_Props = {
+    /** 字段名：匹配 RsForm.rules[name] */
+    name?: string;
+    id?: string;
+    invalid?: boolean;
+    placeholder?: string;
+    disabled?: boolean;
+    readonly?: boolean;
+    required?: boolean;
+    max?: number;
+    /** 输入内容最大长度 */
+    maxlength?: number;
+    /** 允许重复标签 */
+    allowDuplicate?: boolean;
+    /**
+     * trigger：点击「+」后再输入（对齐 Naive DynamicTags）
+     * always：始终显示输入框（对齐 InputTag 常驻输入）
+     */
+    inputMode?: RsDynamicTagsInputMode;
+    /** 失焦时是否提交当前输入 */
+    commitOnBlur?: boolean;
+    /**
+     * 分隔符。输入或粘贴遇到即切开成多个标签。
+     * 例：',' 或 [',', ';']。空格作分隔时每敲一个空格就会提交。
+     */
+    separators?: string | string[];
+    /** 提交前变换或拒绝。false 发 reject('invalid')。 */
+    parse?: RsDynamicTagsParse;
+    /** 有标签且非禁用 / 只读时显示清空 */
+    allowClear?: boolean;
+    size?: RsComponentSize;
+    radius?: RsRadius;
+    /** 标签视觉变体 */
+    tagVariant?: RsTagVariant;
+    round?: boolean;
+    /** 无障碍名称。旁边已有可见 label 时可省略。 */
+    ariaLabel?: string;
+};
+type __VLS_ModelProps = {
+    modelValue?: string[];
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_9: {
+    tag: string;
+    index: number;
+}, __VLS_11: {};
+type __VLS_Slots = {} & {
+    tag?: (props: typeof __VLS_9) => any;
+} & {
+    trigger?: (props: typeof __VLS_11) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, RsDynamicTagsExpose, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    clear: () => any;
+    blur: (event: FocusEvent) => any;
+    focus: (event: FocusEvent) => any;
+    "update:modelValue": (value: string[]) => any;
+    create: (value: string) => any;
+    remove: (value: string, index: number) => any;
+    reject: (reason: RsDynamicTagsRejectReason, value: string) => 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;
+    onCreate?: ((value: string) => any) | undefined;
+    onRemove?: ((value: string, index: number) => any) | undefined;
+    onReject?: ((reason: RsDynamicTagsRejectReason, value: string) => any) | undefined;
+}>, {
+    required: boolean;
+    disabled: boolean;
+    round: boolean;
+    readonly: boolean;
+    allowDuplicate: boolean;
+    inputMode: RsDynamicTagsInputMode;
+    commitOnBlur: boolean;
+    allowClear: boolean;
+    tagVariant: RsTagVariant;
+}, {}, {}, {}, 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;
+    };
+};