@sdata/web-vue 1.11.1 → 1.12.0

package/es/tag/interface.d.ts

@@ -1,8 +1,10 @@
+import type { EllipsisTooltipProps } from '../ellipsis';
 export declare const TAG_COLORS: readonly ["red", "orangered", "orange", "gold", "lime", "green", "cyan", "blue", "sdblue", "purple", "pinkpurple", "magenta", "gray"];
 export type TagColor = (typeof TAG_COLORS)[number];
 export interface TagProps {
-    color?: TagColor | string;
+    color?: string;
     size?: 'small' | 'medium' | 'large';
+    bordered?: boolean;
     visible?: boolean;
     defaultVisible?: boolean;
     loading?: boolean;
@@ -10,4 +12,10 @@ export interface TagProps {
     checkable?: boolean;
     checked?: boolean;
     defaultChecked?: boolean;
+    nowrap?: boolean;
+    ellipsis?: boolean;
+    ellipsisLineClamp?: number | string;
+    ellipsisExpandTrigger?: 'click';
+    ellipsisTooltip?: boolean | EllipsisTooltipProps;
+    ellipsisPerformant?: boolean;
 }

package/es/tag/style/index.css

@@ -25,12 +25,10 @@
   font-weight: 500;
   font-size: 12px;
   line-height: 22px;
+  white-space: nowrap;
   vertical-align: middle;
   border: 1px solid transparent;
   border-radius: var(--border-radius-small);
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
 }
 .sd-tag .sd-icon-hover.sd-tag-icon-hover::before {
   width: 16px;
@@ -85,9 +83,18 @@
   color: var(--color-text-2);
 }
 .sd-tag-text {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
+  min-width: 0;
+  max-width: 100%;
+}
+.sd-tag-ellipsis-line-clamp {
+  height: auto;
+}
+.sd-tag-no-ellipsis {
+  min-width: fit-content;
+}
+.sd-tag-no-ellipsis .sd-tag-text {
+  min-width: fit-content;
+  max-width: none;
 }
 .sd-tag .sd-tag.sd-tag-checked.sd-tag-red {
   color: rgb(var(--red-6));

package/es/tag/style/index.scss

@@ -37,11 +37,11 @@ $colors:
   font-weight: $tag-text-font-weight;
   font-size: $tag-size-default-font-size;
   line-height: $tag-size-default - $tag-border-width * 2 - $tag-padding-vertical * 2;
+  white-space: nowrap;
   vertical-align: middle;
   border: $tag-border-width $tag-border-type transparent;
   border-radius: $tag-border-radius;
 
-  @include text-ellipsis();
   @include icon-hover.icon-hover($tag-prefix-cls, 12px, 16px);
   @include icon-hover.icon-hover-bg($tag-prefix-cls, $tag-default-color-bg_hover);
 
@@ -103,9 +103,21 @@ $colors:
   }
 
   &-text {
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
+    min-width: 0;
+    max-width: 100%;
+  }
+
+  &-ellipsis-line-clamp {
+    height: auto;
+  }
+
+  &-no-ellipsis {
+    min-width: fit-content;
+
+    .#{$tag-prefix-cls}-text {
+      min-width: fit-content;
+      max-width: none;
+    }
   }
 
   @each $value in $colors {

package/es/tag/tag.js

@@ -1,6 +1,6 @@
 import _plugin_vue_export_helper_default from "../_virtual/_plugin-vue_export-helper.js";
 import tag_vue_vue_type_script_lang_default from "./tag.vue_vue_type_script_lang.js";
-import { createBlock, createCommentVNode, createElementBlock, createVNode, normalizeClass, normalizeStyle, openBlock, renderSlot, resolveComponent, withCtx, withModifiers } from "vue";
+import { createBlock, createCommentVNode, createElementBlock, createSlots, createVNode, normalizeClass, normalizeStyle, openBlock, renderSlot, resolveComponent, resolveDynamicComponent, withCtx, withModifiers } from "vue";
 //#region components/tag/tag.vue
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
 	const _component_icon_close = resolveComponent("icon-close");
@@ -16,24 +16,45 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
 			key: 0,
 			class: normalizeClass(`${_ctx.prefixCls}-icon`)
 		}, [renderSlot(_ctx.$slots, "icon")], 2)) : createCommentVNode("", true),
-		_ctx.nowrap ? (openBlock(), createElementBlock("span", {
+		_ctx.shouldRenderEllipsis ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.ellipsisComponent), {
 			key: 1,
+			class: normalizeClass(`${_ctx.prefixCls}-text`),
+			"line-clamp": _ctx.ellipsisLineClamp,
+			"expand-trigger": _ctx.ellipsisExpandTrigger,
+			tooltip: _ctx.ellipsisTooltip
+		}, createSlots({
+			default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+			_: 2
+		}, [_ctx.$slots.tooltip ? {
+			name: "tooltip",
+			fn: withCtx(() => [renderSlot(_ctx.$slots, "tooltip")]),
+			key: "0"
+		} : void 0]), 1032, [
+			"class",
+			"line-clamp",
+			"expand-trigger",
+			"tooltip"
+		])) : _ctx.$slots.default ? (openBlock(), createElementBlock("span", {
+			key: 2,
 			class: normalizeClass(`${_ctx.prefixCls}-text`)
-		}, [renderSlot(_ctx.$slots, "default")], 2)) : renderSlot(_ctx.$slots, "default", { key: 2 }),
+		}, [renderSlot(_ctx.$slots, "default")], 2)) : createCommentVNode("", true),
 		_ctx.closable ? (openBlock(), createBlock(_component_icon_hover, {
 			key: 3,
+			tabindex: "0",
 			role: "button",
 			"aria-label": "Close",
 			prefix: _ctx.prefixCls,
 			class: normalizeClass(`${_ctx.prefixCls}-close-btn`),
-			onClick: withModifiers(_ctx.handleClose, ["stop"])
+			onClick: withModifiers(_ctx.handleClose, ["stop"]),
+			onKeydown: withModifiers(_ctx.handleCloseKeydown, ["stop", "prevent"])
 		}, {
 			default: withCtx(() => [renderSlot(_ctx.$slots, "close-icon", {}, () => [createVNode(_component_icon_close)])]),
 			_: 3
 		}, 8, [
 			"prefix",
 			"class",
-			"onClick"
+			"onClick",
+			"onKeydown"
 		])) : createCommentVNode("", true),
 		_ctx.loading ? (openBlock(), createElementBlock("span", {
 			key: 4,