@sdata/web-vue 4.7.2 → 5.1.0

package/es/dropdown/dropdown-panel.vue_vue_type_script_setup_true_lang.js

@@ -109,9 +109,16 @@ var dropdown_panel_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 			};
 		});
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", { class: normalizeClass([unref(prefixCls), { [`${unref(prefixCls)}-has-footer`]: Boolean(_ctx.$slots.footer) }]) }, [
-				__props.isEmpty ? (openBlock(), createElementBlock("div", {
+			return openBlock(), createElementBlock("div", { class: normalizeClass([unref(prefixCls), {
+				[`${unref(prefixCls)}-has-header`]: Boolean(_ctx.$slots.header),
+				[`${unref(prefixCls)}-has-footer`]: Boolean(_ctx.$slots.footer)
+			}]) }, [
+				_ctx.$slots.header ? (openBlock(), createElementBlock("div", {
 					key: 0,
+					class: normalizeClass(`${unref(prefixCls)}-header`)
+				}, [renderSlot(_ctx.$slots, "header")], 2)) : createCommentVNode("", true),
+				__props.isEmpty ? (openBlock(), createElementBlock("div", {
+					key: 1,
 					class: normalizeClass(`${unref(prefixCls)}-empty`)
 				}, [renderSlot(_ctx.$slots, "empty", {}, () => [createVNode(unref(Empty))])], 2)) : createCommentVNode("", true),
 				createVNode(unref(Scrollbar), {
@@ -133,7 +140,7 @@ var dropdown_panel_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 					_: 3
 				}, 8, ["class", "style"]),
 				_ctx.$slots.footer && !__props.isEmpty ? (openBlock(), createElementBlock("div", {
-					key: 1,
+					key: 2,
 					class: normalizeClass(`${unref(prefixCls)}-footer`)
 				}, [renderSlot(_ctx.$slots, "footer")], 2)) : createCommentVNode("", true)
 			], 2);

package/es/dropdown/dropdown.vue.d.ts

@@ -2,13 +2,15 @@ import { PropType } from 'vue';
 import type { FloatingOptions } from '../_utils/floating';
 import { TriggerEvent } from '../_utils/constant';
 import { DropdownPosition } from './interface';
-declare var __VLS_10: {}, __VLS_22: {}, __VLS_25: {};
+declare var __VLS_10: {}, __VLS_23: {}, __VLS_25: {}, __VLS_28: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_10) => any;
 } & {
-    content?: (props: typeof __VLS_22) => any;
+    header?: (props: typeof __VLS_23) => any;
 } & {
-    footer?: (props: typeof __VLS_25) => any;
+    content?: (props: typeof __VLS_25) => any;
+} & {
+    footer?: (props: typeof __VLS_28) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     popupVisible: {

package/es/dropdown/dropdown.vue_vue_type_script_setup_true_lang.js

@@ -88,6 +88,11 @@ var dropdown_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 		const props = __props;
 		const emit = __emit;
 		/**
+		* @zh 页眉
+		* @en Header
+		* @slot header
+		*/
+		/**
 		* @zh 内容
 		* @en Content
 		* @slot content
@@ -146,10 +151,14 @@ var dropdown_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 				}, createSlots({
 					default: withCtx(() => [renderSlot(_ctx.$slots, "content")]),
 					_: 2
-				}, [_ctx.$slots.footer ? {
+				}, [_ctx.$slots.header ? {
+					name: "header",
+					fn: withCtx(() => [renderSlot(_ctx.$slots, "header")]),
+					key: "0"
+				} : void 0, _ctx.$slots.footer ? {
 					name: "footer",
 					fn: withCtx(() => [renderSlot(_ctx.$slots, "footer")]),
-					key: "0"
+					key: "1"
 				} : void 0]), 1032, ["trigger", "is-empty"])]),
 				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
 				_: 3

package/es/dropdown/index.d.ts

@@ -179,6 +179,8 @@ declare const Dropdown: {
 }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
     $slots: {
         default?: (props: {}) => any;
+    } & {
+        header?: (props: {}) => any;
     } & {
         content?: (props: {}) => any;
     } & {

package/es/dropdown/style/index.css

@@ -25,10 +25,10 @@
 .sd-dropdown {
   box-sizing: border-box;
   padding: 4px 0;
-  background-color: var(--sd-color-bg-popup);
-  border: 1px solid var(--sd-color-fill-3);
-  border-radius: var(--sd-border-radius-medium);
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.08);
+  background-color: var(--component-dropdown-dropdown-color-bg, var(--component-dropdown-color-bg, var(--sd-color-bg-popup)));
+  border: 1px solid var(--component-dropdown-dropdown-color-border, var(--component-dropdown-color-border, var(--sd-color-fill-3)));
+  border-radius: var(--component-dropdown-dropdown-border-radius, var(--component-dropdown-border-radius, var(--sd-border-radius-medium)));
+  box-shadow: var(--component-dropdown-dropdown-box-shadow, var(--component-dropdown-box-shadow, 0 2px 6px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.08)));
 }
 .sd-dropdown-list {
   margin-top: 0;
@@ -37,7 +37,7 @@
   list-style: none;
 }
 .sd-dropdown-list-wrapper {
-  max-height: 200px;
+  max-height: var(--component-dropdown-dropdown-max-height, var(--component-dropdown-max-height, var(--size-50, 200px)));
   overflow-y: auto;
 }
 .sd-dropdown-option {
@@ -47,12 +47,12 @@
   align-items: center;
   box-sizing: border-box;
   width: 100%;
-  padding: 0 12px;
-  color: var(--sd-color-text-1);
-  font-size: 14px;
-  line-height: 36px;
+  padding: 0 var(--component-dropdown-dropdown-option-padding-horizontal, var(--component-dropdown-option-padding-horizontal, var(--spacing-6, 12px)));
+  color: var(--component-dropdown-dropdown-option-color-text-default, var(--component-dropdown-option-color-text-default, var(--sd-color-text-1)));
+  font-size: var(--component-dropdown-dropdown-font-size, var(--component-dropdown-font-size, var(--font-size-body-3, 14px)));
+  line-height: var(--component-dropdown-dropdown-option-height, var(--component-dropdown-option-height, var(--size-9, 36px)));
   text-align: left;
-  background-color: transparent;
+  background-color: var(--component-dropdown-dropdown-option-color-bg-default, var(--component-dropdown-option-color-bg-default, var(--color-transparent, var(--sd-color-transparent, transparent))));
   cursor: pointer;
 }
 .sd-dropdown-option-content {
@@ -63,14 +63,15 @@
 .sd-dropdown-option-has-suffix {
   justify-content: space-between;
 }
-.sd-dropdown-option-active, .sd-dropdown-option:not(.sd-dropdown-option-disabled):hover {
-  color: var(--sd-color-text-1);
-  background-color: var(--sd-color-fill-2);
+.sd-dropdown-option-active, .sd-dropdown-option:not(.sd-dropdown-option-disabled):hover, .sd-dropdown-option:not(.sd-dropdown-option-disabled):focus-visible {
+  color: var(--component-dropdown-dropdown-option-color-text-hover, var(--component-dropdown-option-color-text-hover, var(--sd-color-text-1)));
+  background-color: var(--component-dropdown-dropdown-option-color-bg-hover, var(--component-dropdown-option-color-bg-hover, var(--sd-color-fill-2)));
+  outline: none;
   transition: color 0.1s cubic-bezier(0.34, 0.69, 0.1, 1), background-color 0.1s cubic-bezier(0.34, 0.69, 0.1, 1);
 }
 .sd-dropdown-option-disabled {
-  color: var(--sd-color-text-4);
-  background-color: transparent;
+  color: var(--component-dropdown-dropdown-option-color-text-disabled, var(--component-dropdown-option-color-text-disabled, var(--sd-color-text-4)));
+  background-color: var(--component-dropdown-dropdown-option-color-bg-disabled, var(--component-dropdown-option-color-bg-disabled, var(--color-transparent, var(--sd-color-transparent, transparent))));
   cursor: not-allowed;
 }
 .sd-dropdown-option-icon {
@@ -78,19 +79,19 @@
   margin-right: 8px;
 }
 .sd-dropdown-option-suffix {
-  margin-left: 12px;
+  margin-left: var(--component-dropdown-dropdown-margin-left-suffix-icon, var(--component-dropdown-margin-left-suffix-icon, var(--spacing-6, 12px)));
 }
 .sd-dropdown-group:first-child .sd-dropdown-group-title {
-  margin-top: 8px;
+  margin-top: var(--component-dropdown-dropdown-group-title-margin-top, var(--component-dropdown-group-title-margin-top, var(--spacing-4, 8px)));
 }
 .sd-dropdown-group-title {
   box-sizing: border-box;
   width: 100%;
-  margin-top: 8px;
-  padding: 0 12px;
-  color: var(--sd-color-text-3);
-  font-size: 12px;
-  line-height: 20px;
+  margin-top: var(--component-dropdown-dropdown-group-title-margin-top, var(--component-dropdown-group-title-margin-top, var(--spacing-4, 8px)));
+  padding: 0 var(--component-dropdown-dropdown-group-title-padding-horizontal, var(--component-dropdown-group-title-padding-horizontal, var(--spacing-6, 12px)));
+  color: var(--component-dropdown-dropdown-group-title-color-text, var(--component-dropdown-group-title-color-text, var(--sd-color-text-3)));
+  font-size: var(--component-dropdown-dropdown-group-title-font-size, var(--component-dropdown-group-title-font-size, var(--font-size-body-1, 12px)));
+  line-height: var(--component-dropdown-dropdown-group-title-height, var(--component-dropdown-group-title-height, var(--size-5, 20px)));
   cursor: default;
   overflow: hidden;
   white-space: nowrap;
@@ -99,9 +100,15 @@
 .sd-dropdown-submenu {
   margin-top: -4px;
 }
+.sd-dropdown.sd-dropdown-has-header {
+  padding-top: 0;
+}
+.sd-dropdown-header {
+  border-bottom: 1px solid var(--component-dropdown-dropdown-color-border, var(--component-dropdown-color-border, var(--sd-color-fill-3)));
+}
 .sd-dropdown.sd-dropdown-has-footer {
   padding-bottom: 0;
 }
 .sd-dropdown-footer {
-  border-top: 1px solid var(--sd-color-fill-3);
+  border-top: 1px solid var(--component-dropdown-dropdown-color-border, var(--component-dropdown-color-border, var(--sd-color-fill-3)));
 }

package/es/dropdown/style/index.scss

@@ -51,11 +51,13 @@ $dropdown-prefix-cls: string.unquote('#{theme.$prefix}-dropdown');
       justify-content: space-between;
     }
 
-    // hover
+    // 键盘焦点（程序化聚焦后属于 focus-visible）与 hover 保持同一视觉
     &-active,
-    &:not(#{&}-disabled):hover {
+    &:not(#{&}-disabled):hover,
+    &:not(#{&}-disabled):focus-visible {
       color: $dropdown-option-color-text_hover;
       background-color: $dropdown-option-color-bg_hover;
+      outline: none;
       transition:
         color theme.$transition-duration-1 theme.$transition-timing-function-standard,
         background-color theme.$transition-duration-1 theme.$transition-timing-function-standard;
@@ -101,6 +103,14 @@ $dropdown-prefix-cls: string.unquote('#{theme.$prefix}-dropdown');
     margin-top: -$dropdown-padding-vertical;
   }
 
+  &#{&}-has-header {
+    padding-top: 0;
+  }
+
+  &-header {
+    border-bottom: 1px solid $dropdown-color-border;
+  }
+
   &#{&}-has-footer {
     padding-bottom: 0;
   }

package/es/dropdown/style/token.scss

@@ -1,3 +1,4 @@
+@use '@style/theme/runtime.scss' as theme-runtime;
 @use '@style/theme/index.scss' as global;
 
 @forward '@style/theme/index.scss';
@@ -50,3 +51,125 @@ $dropdown-group-title-font-size: global.$font-size-body-1;
 $dropdown-group-title-color-text: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-3'));
 
 $dropdown-margin-left-suffix-icon: global.$spacing-6;
+
+// @generated runtime tokens — pnpm theme:generate
+$dropdown-max-height: theme-runtime.token(
+  'dropdown',
+  'dropdown-max-height',
+  $dropdown-max-height,
+  'size-50'
+);
+$dropdown-border-radius: theme-runtime.token(
+  'dropdown',
+  'dropdown-border-radius',
+  $dropdown-border-radius
+);
+$dropdown-font-size: theme-runtime.token(
+  'dropdown',
+  'dropdown-font-size',
+  $dropdown-font-size,
+  'font-size-body-3'
+);
+$dropdown-color-bg: theme-runtime.token('dropdown', 'dropdown-color-bg', $dropdown-color-bg);
+$dropdown-color-border: theme-runtime.token(
+  'dropdown',
+  'dropdown-color-border',
+  $dropdown-color-border
+);
+$dropdown-box-shadow: theme-runtime.token('dropdown', 'dropdown-box-shadow', $dropdown-box-shadow);
+$dropdown-option-height: theme-runtime.token(
+  'dropdown',
+  'dropdown-option-height',
+  $dropdown-option-height,
+  'size-9'
+);
+$dropdown-option-padding-horizontal: theme-runtime.token(
+  'dropdown',
+  'dropdown-option-padding-horizontal',
+  $dropdown-option-padding-horizontal,
+  'spacing-6'
+);
+$dropdown-option-font-weight_selected: theme-runtime.token(
+  'dropdown',
+  'dropdown-option-font-weight-selected',
+  $dropdown-option-font-weight_selected,
+  'font-weight-500'
+);
+$dropdown-option-color-bg_default: theme-runtime.token(
+  'dropdown',
+  'dropdown-option-color-bg-default',
+  $dropdown-option-color-bg_default,
+  'color-transparent'
+);
+$dropdown-option-color-bg_hover: theme-runtime.token(
+  'dropdown',
+  'dropdown-option-color-bg-hover',
+  $dropdown-option-color-bg_hover
+);
+$dropdown-option-color-bg_selected: theme-runtime.token(
+  'dropdown',
+  'dropdown-option-color-bg-selected',
+  $dropdown-option-color-bg_selected,
+  'color-transparent'
+);
+$dropdown-option-color-bg_disabled: theme-runtime.token(
+  'dropdown',
+  'dropdown-option-color-bg-disabled',
+  $dropdown-option-color-bg_disabled,
+  'color-transparent'
+);
+$dropdown-option-color-text_default: theme-runtime.token(
+  'dropdown',
+  'dropdown-option-color-text-default',
+  $dropdown-option-color-text_default
+);
+$dropdown-option-color-text_hover: theme-runtime.token(
+  'dropdown',
+  'dropdown-option-color-text-hover',
+  $dropdown-option-color-text_hover
+);
+$dropdown-option-color-text_selected: theme-runtime.token(
+  'dropdown',
+  'dropdown-option-color-text-selected',
+  $dropdown-option-color-text_selected
+);
+$dropdown-option-color-text_disabled: theme-runtime.token(
+  'dropdown',
+  'dropdown-option-color-text-disabled',
+  $dropdown-option-color-text_disabled
+);
+$dropdown-group-title-height: theme-runtime.token(
+  'dropdown',
+  'dropdown-group-title-height',
+  $dropdown-group-title-height,
+  'size-5'
+);
+$dropdown-group-title-padding-horizontal: theme-runtime.token(
+  'dropdown',
+  'dropdown-group-title-padding-horizontal',
+  $dropdown-group-title-padding-horizontal,
+  'spacing-6'
+);
+$dropdown-group-title-margin-top: theme-runtime.token(
+  'dropdown',
+  'dropdown-group-title-margin-top',
+  $dropdown-group-title-margin-top,
+  'spacing-4'
+);
+$dropdown-group-title-font-size: theme-runtime.token(
+  'dropdown',
+  'dropdown-group-title-font-size',
+  $dropdown-group-title-font-size,
+  'font-size-body-1'
+);
+$dropdown-group-title-color-text: theme-runtime.token(
+  'dropdown',
+  'dropdown-group-title-color-text',
+  $dropdown-group-title-color-text
+);
+$dropdown-margin-left-suffix-icon: theme-runtime.token(
+  'dropdown',
+  'dropdown-margin-left-suffix-icon',
+  $dropdown-margin-left-suffix-icon,
+  'spacing-6'
+);

package/es/ellipsis/ellipsis.vue_vue_type_script_setup_true_lang.js

@@ -7,7 +7,7 @@ import { RichLineClamp } from "../clamp/index.js";
 import Tooltip from "../tooltip/index.js";
 import { computed, createBlock, createElementBlock, defineComponent, mergeProps, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, onUpdated, openBlock, renderSlot, resolveDynamicComponent, shallowRef, unref, watch, withCtx } from "vue";
 //#region components/ellipsis/ellipsis.vue?vue&type=script&setup=true&lang.ts
-var _excluded = ["disabled"];
+var _excluded = ["always", "disabled"];
 var INTERACTIVE_SELECTOR = "a,button,input,textarea,select,[role=\"button\"]";
 var ellipsis_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent(_objectSpread2(_objectSpread2({}, {
 	name: "Ellipsis",
@@ -50,11 +50,11 @@ var ellipsis_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 		});
 		const tooltipConfig = computed(() => isObject(props.tooltip) ? props.tooltip : {});
 		const tooltipBindings = computed(() => {
-			const _tooltipConfig$value = tooltipConfig.value, { disabled: _disabled } = _tooltipConfig$value;
+			const _tooltipConfig$value = tooltipConfig.value, { always: _always, disabled: _disabled } = _tooltipConfig$value;
 			return _objectWithoutProperties(_tooltipConfig$value, _excluded);
 		});
 		const enableTooltip = computed(() => props.tooltip !== false);
-		const tooltipDisabled = computed(() => !isEllipsis.value || expanded.value || Boolean(tooltipConfig.value.disabled));
+		const tooltipDisabled = computed(() => expanded.value || Boolean(tooltipConfig.value.disabled) || !isEllipsis.value && !tooltipConfig.value.always);
 		const isExpandable = computed(() => props.expandTrigger === "click" && (isEllipsis.value || expanded.value));
 		const rootCls = computed(() => [prefixCls, {
 			[`${prefixCls}--single-line`]: !isLineClamp.value && !expanded.value,

package/es/ellipsis/interface.d.ts

@@ -12,4 +12,5 @@ export interface EllipsisTooltipProps extends Omit<Partial<TriggerProps>, 'popup
     arrowStyle?: CSSProperties;
     renderToBody?: boolean;
     disabled?: boolean;
+    always?: boolean;
 }

package/es/ellipsis/style/index.css

@@ -17,8 +17,8 @@
 /********* icon hover *********/
 .sd-ellipsis {
   display: inline-block;
-  max-width: 100%;
-  color: inherit;
+  max-width: var(--component-ellipsis-ellipsis-max-width, var(--component-ellipsis-max-width, 100%));
+  color: var(--component-ellipsis-ellipsis-color-text, var(--component-ellipsis-color-text, inherit));
   vertical-align: bottom;
 }
 .sd-ellipsis--single-line {

package/es/ellipsis/style/token.scss

@@ -1,5 +1,10 @@
+@use '@style/theme/runtime.scss' as theme-runtime;
 @use '@style/theme/index.scss' as *;
 
 $ellipsis-max-width: 100%;
 
 $ellipsis-color-text: inherit;
+
+// @generated runtime tokens — pnpm theme:generate
+$ellipsis-max-width: theme-runtime.token('ellipsis', 'ellipsis-max-width', $ellipsis-max-width);
+$ellipsis-color-text: theme-runtime.token('ellipsis', 'ellipsis-color-text', $ellipsis-color-text);

package/es/empty/style/index.css

@@ -18,19 +18,19 @@
 .sd-empty {
   box-sizing: border-box;
   width: 100%;
-  padding: 10px 0;
+  padding: var(--component-empty-empty-spacing-padding, var(--component-empty-spacing-padding, var(--spacing-5, 10px))) 0;
   text-align: center;
 }
 .sd-empty-image {
-  margin-bottom: 4px;
-  color: rgb(var(--sd-gray-5));
-  font-size: 48px;
+  margin-bottom: var(--component-empty-empty-spacing-image-margin-bottom, var(--component-empty-spacing-image-margin-bottom, var(--spacing-2, 4px)));
+  color: var(--component-empty-empty-color-icon, var(--component-empty-color-icon, rgb(var(--sd-gray-5))));
+  font-size: var(--component-empty-empty-font-size-image, var(--component-empty-font-size-image, var(--size-12, 48px)));
   line-height: 1;
 }
 .sd-empty-image img {
-  height: 80px;
+  height: var(--component-empty-empty-size-img-height, var(--component-empty-size-img-height, var(--size-20, 80px)));
 }
 .sd-empty .sd-empty-description {
-  color: rgb(var(--sd-gray-5));
-  font-size: 14px;
+  color: var(--component-empty-empty-color-text, var(--component-empty-color-text, rgb(var(--sd-gray-5))));
+  font-size: var(--component-empty-empty-font-size-text, var(--component-empty-font-size-text, var(--font-size-body-3, 14px)));
 }

package/es/empty/style/token.scss

@@ -1,3 +1,4 @@
+@use '@style/theme/runtime.scss' as theme-runtime;
 @use '@style/theme/index.scss' as global;
 
 @forward '@style/theme/index.scss';
@@ -19,3 +20,37 @@ $empty-size-img-height: global.$size-20;
 $empty-color-icon: rgb(var(string.unquote('#{global.$sd-cssvars-prefix}-gray-5')));
 
 $empty-font-size-text: global.$font-size-body-3;
+
+// @generated runtime tokens — pnpm theme:generate
+$empty-spacing-padding: theme-runtime.token(
+  'empty',
+  'empty-spacing-padding',
+  $empty-spacing-padding,
+  'spacing-5'
+);
+$empty-color-text: theme-runtime.token('empty', 'empty-color-text', $empty-color-text);
+$empty-font-size-image: theme-runtime.token(
+  'empty',
+  'empty-font-size-image',
+  $empty-font-size-image,
+  'size-12'
+);
+$empty-spacing-image-margin-bottom: theme-runtime.token(
+  'empty',
+  'empty-spacing-image-margin-bottom',
+  $empty-spacing-image-margin-bottom,
+  'spacing-2'
+);
+$empty-size-img-height: theme-runtime.token(
+  'empty',
+  'empty-size-img-height',
+  $empty-size-img-height,
+  'size-20'
+);
+$empty-color-icon: theme-runtime.token('empty', 'empty-color-icon', $empty-color-icon);
+$empty-font-size-text: theme-runtime.token(
+  'empty',
+  'empty-font-size-text',
+  $empty-font-size-text,
+  'font-size-body-3'
+);