niuma-ui 2.0.3 → 2.0.9

package/dist/components/cascader/src/RsCascader.css

@@ -1,81 +1,226 @@
 
-.rs-cascader[data-v-4b45dd5a] {
+.rs-cascader-wrap[data-v-8c1435b6] {
+  --rs-cascader-min-width: 12rem;
+  position: relative;
+  display: inline-flex;
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 100%;
+  min-width: var(--rs-cascader-min-width);
+  color: var(--rs-text);
+  color-scheme: inherit;
+  vertical-align: middle;
+}
+.rs-cascader-wrap--clearable .rs-cascader[data-v-8c1435b6] {
+  padding-inline-end: calc(var(--rs-space-md) + 2.25rem);
+}
+.rs-cascader-wrap--clearable .rs-cascader--ssm[data-v-8c1435b6] {
+  padding-inline-end: calc(var(--rs-space-xs) + 2rem);
+}
+.rs-cascader-wrap--clearable .rs-cascader--sm[data-v-8c1435b6] {
+  padding-inline-end: calc(var(--rs-space-sm) + 2rem);
+}
+.rs-cascader-wrap--clearable .rs-cascader--lg[data-v-8c1435b6] {
+  padding-inline-end: calc(var(--rs-space-lg) + 2.25rem);
+}
+.rs-cascader[data-v-8c1435b6] {
+  appearance: none;
   display: inline-flex;
   align-items: center;
   gap: var(--rs-space-sm);
   box-sizing: border-box;
   width: 100%;
-  min-width: 12rem;
+  min-width: var(--rs-cascader-min-width);
   height: var(--rs-control-height-md);
+  min-height: var(--rs-control-height-md);
   padding: 0 var(--rs-space-md);
   border: 1px solid var(--rs-input-border, var(--rs-border));
   border-radius: var(--rs-radius-sm);
   background: var(--rs-input-bg);
   color: var(--rs-text);
+  font-family: inherit;
   font-size: var(--rs-font-size-sm);
+  line-height: var(--rs-line-height-tight);
+  text-align: start;
   cursor: pointer;
+  outline: none;
+  box-shadow: var(--rs-input-shadow, none);
+  transition:
+    border-color var(--rs-transition-fast),
+    box-shadow var(--rs-transition-fast),
+    background var(--rs-transition-fast);
 }
-.rs-cascader--sm[data-v-4b45dd5a] {
+.rs-cascader--ssm[data-v-8c1435b6] {
+  height: var(--rs-control-height-ssm);
+  min-height: var(--rs-control-height-ssm);
+  padding: 0 var(--rs-space-xs);
+  font-size: var(--rs-font-size-xs);
+}
+.rs-cascader--sm[data-v-8c1435b6] {
   height: var(--rs-control-height-sm);
+  min-height: var(--rs-control-height-sm);
+  padding: 0 var(--rs-space-sm);
+  font-size: var(--rs-font-size-xs);
+}
+.rs-cascader--md[data-v-8c1435b6] {
+  height: var(--rs-control-height-md);
+  min-height: var(--rs-control-height-md);
 }
-.rs-cascader--lg[data-v-4b45dd5a] {
+.rs-cascader--lg[data-v-8c1435b6] {
   height: var(--rs-control-height-lg);
+  min-height: var(--rs-control-height-lg);
+  padding: 0 var(--rs-space-lg);
+  font-size: var(--rs-font-size-base);
 }
-.rs-cascader--disabled[data-v-4b45dd5a] {
-  opacity: 0.38;
+.rs-cascader[data-v-8c1435b6]:hover:not(:disabled) {
+  border-color: var(--rs-input-border-hover, var(--rs-border));
+}
+.rs-cascader--open[data-v-8c1435b6]:not(:disabled),
+.rs-cascader[data-v-8c1435b6]:focus-visible {
+  outline: none;
+  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-cascader--disabled[data-v-8c1435b6],
+.rs-cascader[data-v-8c1435b6]:disabled {
+  color: var(--rs-text-disabled);
   cursor: not-allowed;
+  background: var(--rs-surface-hover);
+  opacity: 0.38;
 }
-.rs-cascader__placeholder[data-v-4b45dd5a] {
+.rs-cascader__placeholder[data-v-8c1435b6] {
   flex: 1;
-  color: var(--rs-muted);
+  min-width: 0;
+  overflow: hidden;
+  color: var(--rs-placeholder);
   text-align: start;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
-.rs-cascader__value[data-v-4b45dd5a] {
+.rs-cascader__value[data-v-8c1435b6] {
   flex: 1;
+  min-width: 0;
   overflow: hidden;
   text-align: start;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.rs-cascader__clear[data-v-4b45dd5a],
-.rs-cascader__icon[data-v-4b45dd5a] {
+.rs-cascader__icon[data-v-8c1435b6] {
+  flex-shrink: 0;
   color: var(--rs-muted);
+  transition: transform var(--rs-transition-fast);
 }
-.rs-cascader__clear[data-v-4b45dd5a] {
-  border: 0;
-  background: transparent;
-  cursor: pointer;
+.rs-cascader--open .rs-cascader__icon[data-v-8c1435b6] {
+  transform: rotate(180deg);
+}
+.rs-cascader__clear[data-v-8c1435b6] {
+  position: absolute;
+  inset-inline-end: calc(var(--rs-space-sm) + 1.125rem);
+  inset-block-start: 50%;
+  transform: translateY(-50%);
+  color: var(--rs-muted);
 }
-.rs-cascader__panel[data-v-4b45dd5a] {
+.rs-cascader__panel[data-v-8c1435b6] {
+  --rs-cascader-panel-min-h: 8rem;
+  --rs-cascader-panel-max-h: 16rem;
+  --rs-cascader-col-min-w: 8rem;
+  z-index: calc(var(--rs-z-modal) + 2);
   display: flex;
-  min-height: 8rem;
-  max-height: 16rem;
+  box-sizing: border-box;
+  min-height: var(--rs-cascader-panel-min-h);
+  max-height: var(--rs-cascader-panel-max-h);
+  overflow: hidden;
+  border: 1px solid var(--rs-dialog-border, var(--rs-border));
+  border-radius: var(--rs-radius);
+  background: var(--rs-surface-elevated);
+  box-shadow: var(--rs-shadow-lg);
+  color: var(--rs-text);
+  color-scheme: inherit;
 }
-.rs-cascader__col[data-v-4b45dd5a] {
-  min-width: 8rem;
+.rs-cascader__col[data-v-8c1435b6] {
+  min-width: var(--rs-cascader-col-min-w);
   margin: 0;
   padding: var(--rs-space-xs);
   overflow: auto;
-  border-inline-end: 1px solid var(--rs-border);
+  border-inline-end: 1px solid var(--rs-border-subtle, var(--rs-border));
   list-style: none;
 }
-.rs-cascader__col[data-v-4b45dd5a]:last-child {
+.rs-cascader__col[data-v-8c1435b6]:last-child {
   border-inline-end: 0;
 }
-.rs-cascader__item[data-v-4b45dd5a] {
+.rs-cascader__item[data-v-8c1435b6] {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: var(--rs-space-sm);
-  padding: var(--rs-space-xs) var(--rs-space-sm);
-  border-radius: var(--rs-radius-xs);
+  box-sizing: border-box;
+  min-height: var(--rs-control-height-md);
+  padding: var(--rs-space-sm) var(--rs-space-md);
+  border-radius: var(--rs-radius-sm);
+  color: var(--rs-text);
+  font-size: var(--rs-font-size-sm);
+  line-height: var(--rs-line-height-tight);
   cursor: pointer;
+  user-select: none;
+  transition:
+    background var(--rs-transition-fast),
+    color var(--rs-transition-fast);
 }
-.rs-cascader__item--active[data-v-4b45dd5a],
-.rs-cascader__item[data-v-4b45dd5a]:hover:not(.rs-cascader__item--disabled) {
-  background: var(--rs-surface-hover);
+.rs-cascader__item > span[data-v-8c1435b6] {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.rs-cascader__item--highlight[data-v-8c1435b6]:not(.rs-cascader__item--active) {
+  background: var(--rs-item-hover);
 }
-.rs-cascader__item--disabled[data-v-4b45dd5a] {
-  opacity: 0.4;
+.rs-cascader__item--active[data-v-8c1435b6] {
+  color: var(--rs-primary);
+  background: color-mix(in srgb, var(--rs-primary) 12%, transparent);
+}
+.rs-cascader__item--disabled[data-v-8c1435b6] {
+  opacity: 0.38;
   cursor: not-allowed;
 }
+.rs-cascader__panel--ssm .rs-cascader__item[data-v-8c1435b6],
+.rs-cascader__panel--sm .rs-cascader__item[data-v-8c1435b6] {
+  gap: var(--rs-space-xs);
+  font-size: var(--rs-font-size-xs);
+  line-height: var(--rs-line-height-tight);
+}
+.rs-cascader__panel--sm .rs-cascader__item[data-v-8c1435b6] {
+  min-height: var(--rs-control-height-sm);
+  padding: 0.25rem 0.5rem;
+}
+.rs-cascader__panel--ssm .rs-cascader__item[data-v-8c1435b6] {
+  min-height: var(--rs-control-height-ssm);
+  padding: 0.125rem 0.375rem;
+}
+.rs-cascader__panel--lg .rs-cascader__item[data-v-8c1435b6] {
+  min-height: var(--rs-control-height-lg);
+  padding: var(--rs-space-sm) var(--rs-space-lg);
+  font-size: var(--rs-font-size-base);
+}
+@media (hover: hover) {
+.rs-cascader__item[data-v-8c1435b6]:hover:not(.rs-cascader__item--disabled) {
+    background: var(--rs-item-hover);
+}
+.rs-cascader__item--active[data-v-8c1435b6]:hover:not(.rs-cascader__item--disabled) {
+    background: color-mix(in srgb, var(--rs-primary) 18%, transparent);
+}
+}
+@media (prefers-reduced-motion: reduce) {
+.rs-cascader[data-v-8c1435b6],
+  .rs-cascader__icon[data-v-8c1435b6],
+  .rs-cascader__item[data-v-8c1435b6] {
+    transition: none;
+}
+.rs-cascader--open .rs-cascader__icon[data-v-8c1435b6] {
+    transform: none;
+}
+}

package/dist/components/cascader/src/RsCascader.d.ts

@@ -1,5 +1,15 @@
-import type { RsComponentSize } from '../../../theme/types';
+import { type RsComponentSize } from '../../../theme/types';
 import { type RsCascaderExpandTrigger, type RsCascaderOption, type RsCascaderPath } from './cascader-utils';
+/**
+ * RsCascader 模板 ref 请用此类型。
+ * 不要写 `InstanceType<typeof RsCascader>`：组件实例类型过深，vue-tsc 会报 Excessive stack depth。
+ */
+export interface RsCascaderExpose {
+    focus: () => void;
+}
+export type RsCascaderInstance = RsCascaderExpose & {
+    $el: HTMLElement;
+};
 type __VLS_Props = {
     options: readonly RsCascaderOption[];
     placeholder?: string;
@@ -9,13 +19,15 @@ type __VLS_Props = {
     expandTrigger?: RsCascaderExpandTrigger;
     separator?: string;
     size?: RsComponentSize;
+    ariaLabel?: string;
+    id?: string;
 };
 type __VLS_ModelProps = {
     modelValue?: RsCascaderPath;
     'open'?: boolean;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, RsCascaderExpose, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     change: (path: RsCascaderPath) => any;
     "update:modelValue": (value: RsCascaderPath) => any;
     "update:open": (value: boolean) => any;
@@ -25,10 +37,10 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {
     disabled: boolean;
+    separator: string;
     allowClear: boolean;
     changeOnSelect: boolean;
     expandTrigger: RsCascaderExpandTrigger;
-    separator: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;