niuma-ui 2.0.2 → 2.0.4

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

@@ -1,29 +1,45 @@
 
-.rs-dynamic-tags-field[data-v-6ce33b85] {
+.rs-dynamic-tags-field[data-v-2213feb0] {
   display: flex;
   flex-direction: column;
   width: 100%;
   min-width: 0;
 }
-.rs-dynamic-tags-field__error[data-v-6ce33b85] {
+.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[data-v-6ce33b85] {
-  --rs-dynamic-tags-chip-height: 1.5rem;
+.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));
-  /* padding + chip + 1px*2 边框，避免 trigger/input 切换或输入时高度跳动 */
-  min-height: calc(
-    var(--rs-dynamic-tags-chip-height) + 2 * var(--rs-dynamic-tags-padding, var(--rs-space-xs)) +
-      2px
-  );
+  min-height: var(--rs-dynamic-tags-box-height);
   padding: var(--rs-dynamic-tags-padding, var(--rs-space-xs));
-  border: 1px solid var(--rs-dynamic-tags-border, var(--rs-input-border, var(--rs-border)));
+  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))
@@ -37,43 +53,53 @@
     box-shadow var(--rs-transition-fast),
     background-color var(--rs-transition-fast);
 }
-.rs-dynamic-tags[data-v-6ce33b85]:hover:not(.rs-dynamic-tags--disabled) {
+.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-6ce33b85] {
-  --rs-dynamic-tags-chip-height: 1.125rem;
+.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-6ce33b85] {
-  --rs-dynamic-tags-chip-height: 1.25rem;
+.rs-dynamic-tags--sm[data-v-2213feb0] {
+  --rs-dynamic-tags-box-height: var(--rs-control-height-sm);
 }
-.rs-dynamic-tags--md[data-v-6ce33b85] {
-  --rs-dynamic-tags-chip-height: 1.5rem;
+.rs-dynamic-tags--md[data-v-2213feb0] {
+  --rs-dynamic-tags-box-height: var(--rs-control-height-md);
 }
-.rs-dynamic-tags--lg[data-v-6ce33b85] {
-  --rs-dynamic-tags-chip-height: 1.75rem;
+.rs-dynamic-tags--lg[data-v-2213feb0] {
+  --rs-dynamic-tags-box-height: var(--rs-control-height-lg);
 }
-.rs-dynamic-tags--editing[data-v-6ce33b85]:not(.rs-dynamic-tags--disabled),
-.rs-dynamic-tags[data-v-6ce33b85]:focus-within:not(.rs-dynamic-tags--disabled) {
+.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-6ce33b85],
-.rs-dynamic-tags--invalid[data-v-6ce33b85] {
+.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-6ce33b85] {
-  animation: rs-dynamic-tags-shake-6ce33b85 0.45s ease;
+.rs-dynamic-tags--feedback[data-v-2213feb0] {
+  animation: rs-dynamic-tags-shake-2213feb0 0.45s ease;
 }
-.rs-dynamic-tags--disabled[data-v-6ce33b85] {
-  opacity: 0.55;
+.rs-dynamic-tags--disabled[data-v-2213feb0] {
+  opacity: var(--rs-dynamic-tags-disabled-opacity, 0.38);
   cursor: not-allowed;
 }
-.rs-dynamic-tags__input[data-v-6ce33b85] {
+.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;
@@ -83,7 +109,7 @@
   border: 0;
   outline: none;
   background: transparent;
-  color: var(--rs-text);
+  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);
@@ -91,15 +117,15 @@
   box-shadow: none;
   appearance: none;
 }
-.rs-dynamic-tags--ssm .rs-dynamic-tags__input[data-v-6ce33b85],
-.rs-dynamic-tags--sm .rs-dynamic-tags__input[data-v-6ce33b85] {
+.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-6ce33b85]::placeholder {
-  color: var(--rs-placeholder);
+.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-6ce33b85] {
+.rs-dynamic-tags__trigger[data-v-2213feb0] {
   display: inline-flex;
   flex-shrink: 0;
   align-items: center;
@@ -111,7 +137,7 @@
   border: 1px dashed var(--rs-dynamic-tags-trigger-border, var(--rs-border));
   border-radius: var(--rs-radius-sm);
   background: transparent;
-  color: var(--rs-muted);
+  color: var(--rs-text-secondary, var(--rs-muted));
   cursor: pointer;
   outline: none;
   box-sizing: border-box;
@@ -120,15 +146,41 @@
     border-color var(--rs-transition-fast),
     background-color var(--rs-transition-fast);
 }
-.rs-dynamic-tags__trigger[data-v-6ce33b85]:hover {
+.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-6ce33b85]:focus-visible {
+.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-6ce33b85 {
+@keyframes rs-dynamic-tags-shake-2213feb0 {
 0%,
   100% {
     transform: translateX(0);
@@ -146,3 +198,28 @@
     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

@@ -1,8 +1,29 @@
 import type { RsComponentSize, RsRadius } from '../../../theme/types';
 import { type RsFormRuleTrigger } from '../../form/src/form-rules';
-import type { RsTagVariant } from '../../tag/src/RsTag.js';
+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 RsDynamicTagsRejectReason = 'duplicate' | 'max';
+export type { RsDynamicTagsParse, RsDynamicTagsRejectReason };
 type __VLS_Props = {
     /** 字段名：匹配 RsForm.rules[name] */
     name?: string;
@@ -10,6 +31,7 @@ type __VLS_Props = {
     invalid?: boolean;
     placeholder?: string;
     disabled?: boolean;
+    readonly?: boolean;
     required?: boolean;
     max?: number;
     /** 输入内容最大长度 */
@@ -23,37 +45,48 @@ type __VLS_Props = {
     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;
 };
-declare function runValidate(trigger?: RsFormRuleTrigger): Promise<{
-    valid: true;
-    name: string | undefined;
-    message?: undefined;
-} | {
-    valid: boolean;
-    message: string | undefined;
-    name: string | undefined;
-}>;
-declare function setValue(value: unknown): void;
-declare function clearValidation(): void;
 type __VLS_ModelProps = {
     modelValue?: string[];
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
-    validate: typeof runValidate;
-    clearValidation: typeof clearValidation;
-    setValue: typeof setValue;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+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, {
+    blur: (event: FocusEvent) => any;
+    focus: (event: FocusEvent) => any;
+    clear: () => 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<{
+    onBlur?: ((event: FocusEvent) => any) | undefined;
+    onFocus?: ((event: FocusEvent) => any) | undefined;
+    onClear?: (() => any) | undefined;
     "onUpdate:modelValue"?: ((value: string[]) => any) | undefined;
     onCreate?: ((value: string) => any) | undefined;
     onRemove?: ((value: string, index: number) => any) | undefined;
@@ -62,10 +95,18 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     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;
+    };
+};