@sdata/web-vue 1.11.0 → 1.12.0

package/es/tag/tag.vue_vue_type_script_lang.js

@@ -4,52 +4,149 @@ import icon_hover_default from "../_components/icon-hover.js";
 import IconClose from "../icon/icon-close/index.js";
 import IconLoading from "../icon/icon-loading/index.js";
 import { useSize } from "../_hooks/use-size.js";
+import Ellipsis, { PerformantEllipsis } from "../ellipsis/index.js";
 import { TAG_COLORS } from "./interface.js";
 import { computed, defineComponent, inject, ref, toRefs } from "vue";
 //#region components/tag/tag.vue?vue&type=script&lang.ts
 var tag_vue_vue_type_script_lang_default = defineComponent({
 	name: "Tag",
 	components: {
+		Ellipsis,
 		IconHover: icon_hover_default,
 		IconClose,
-		IconLoading
+		IconLoading,
+		PerformantEllipsis
 	},
 	props: {
+		/**
+		* @zh 标签的颜色
+		* @en Label color
+		* @values 'red','orangered','orange','gold','lime','green','cyan','blue','sdblue','purple','pinkpurple','magenta','gray'
+		*/
 		color: { type: String },
+		/**
+		* @zh 标签的大小
+		* @en Label size
+		* @values 'small','medium','large'
+		* @defaultValue 'medium'
+		*/
 		size: { type: String },
+		/**
+		* @zh 是否显示边框
+		* @en Whether the tag is bordered
+		* @version 2.33.0
+		*/
 		bordered: {
 			type: Boolean,
 			default: false
 		},
+		/**
+		* @zh 标签是否可见
+		* @en Whether the tag is visible
+		* @vModel
+		*/
 		visible: {
 			type: Boolean,
 			default: void 0
 		},
+		/**
+		* @zh 标签默认是否可见
+		* @en Whether the tag is visible by default
+		*/
 		defaultVisible: {
 			type: Boolean,
 			default: true
 		},
+		/**
+		* @zh 标签是否为加载中状态
+		* @en Whether the tag is loading state
+		*/
 		loading: {
 			type: Boolean,
 			default: false
 		},
+		/**
+		* @zh 标签是否可关闭
+		* @en Whether the tag can be closed
+		*/
 		closable: {
 			type: Boolean,
 			default: false
 		},
+		/**
+		* @zh 标签是否可选中
+		* @en Whether the tag can be checked
+		*/
 		checkable: {
 			type: Boolean,
 			default: false
 		},
+		/**
+		* @zh 标签是否选中（标签可选中时可用）
+		* @en Whether the tag is checked (available when the tag is checkable)
+		* @vModel
+		*/
 		checked: {
 			type: Boolean,
 			default: void 0
 		},
+		/**
+		* @zh 标签默认选中状态（标签可选中时可用）
+		* @en Whether the tag is checked by default (available when the tag is checkable)
+		*/
 		defaultChecked: {
 			type: Boolean,
 			default: true
 		},
+		/**
+		* @zh 标签内容不换行
+		* @en Tag content does not wrap
+		* @version 2.56.1
+		*/
 		nowrap: {
+			type: Boolean,
+			default: void 0
+		},
+		/**
+		* @zh 是否开启默认内容省略
+		* @en Whether to enable ellipsis for the default slot content
+		* @defaultValue true
+		*/
+		ellipsis: {
+			type: Boolean,
+			default: void 0
+		},
+		/**
+		* @zh 默认内容省略的最大显示行数
+		* @en Maximum number of displayed lines for ellipsis content
+		*/
+		ellipsisLineClamp: {
+			type: [Number, String],
+			default: void 0
+		},
+		/**
+		* @zh 省略内容的展开触发方式
+		* @en Trigger mode for ellipsis expansion
+		* @values 'click'
+		*/
+		ellipsisExpandTrigger: {
+			type: String,
+			default: void 0
+		},
+		/**
+		* @zh 省略时是否展示提示。可传入 Tooltip 属性。
+		* @en Whether to show a tooltip when ellipsis is active. Tooltip props are supported.
+		* @defaultValue true
+		*/
+		ellipsisTooltip: {
+			type: [Boolean, Object],
+			default: true
+		},
+		/**
+		* @zh 是否使用高性能省略实现
+		* @en Whether to use the performant ellipsis implementation
+		*/
+		ellipsisPerformant: {
 			type: Boolean,
 			default: false
 		}
@@ -57,10 +154,31 @@ var tag_vue_vue_type_script_lang_default = defineComponent({
 	emits: {
 		"update:visible": (_visible) => true,
 		"update:checked": (_checked) => true,
+		/**
+		* @zh 点击关闭按钮时触发
+		* @en Emitted when the close button is clicked
+		* @param {MouseEvent | KeyboardEvent} ev
+		*/
 		"close": (_ev) => true,
+		/**
+		* @zh 用户选中时触发（仅在可选中模式下触发）
+		* @en Emitted when the user check (emit only in the checkable mode)
+		* @param {boolean} checked
+		* @param {MouseEvent} ev
+		*/
 		"check": (_checked, _ev) => true
 	},
-	setup(props, { emit }) {
+	/**
+	* @zh 图标
+	* @en Icon
+	* @slot icon
+	*/
+	/**
+	* @zh 关闭按钮的图标
+	* @en Close button icon
+	* @slot close-icon
+	*/
+	setup(props, { emit, slots }) {
 		const { size } = toRefs(props);
 		const prefixCls = getPrefixCls("tag");
 		const isBuiltInColor = computed(() => props.color && TAG_COLORS.includes(props.color));
@@ -80,11 +198,23 @@ var tag_vue_vue_type_script_lang_default = defineComponent({
 			if (_mergedSize.value === "mini") return "small";
 			return _mergedSize.value;
 		});
+		const hasDefaultSlot = computed(() => Boolean(slots.default));
+		const resolvedEllipsis = computed(() => {
+			var _ref, _props$ellipsis;
+			return (_ref = (_props$ellipsis = props.ellipsis) !== null && _props$ellipsis !== void 0 ? _props$ellipsis : props.nowrap) !== null && _ref !== void 0 ? _ref : true;
+		});
+		const shouldRenderEllipsis = computed(() => resolvedEllipsis.value && hasDefaultSlot.value);
+		const hasLineClampEllipsis = computed(() => shouldRenderEllipsis.value && props.ellipsisLineClamp !== void 0);
+		const ellipsisComponent = computed(() => props.ellipsisPerformant ? PerformantEllipsis : Ellipsis);
 		const handleClose = (ev) => {
 			_visible.value = false;
 			emit("update:visible", false);
 			emit("close", ev);
 		};
+		const handleCloseKeydown = (ev) => {
+			if (ev.key !== "Enter" && ev.key !== " ") return;
+			handleClose(ev);
+		};
 		const handleClick = (ev) => {
 			if (props.checkable) {
 				const newChecked = !computedChecked.value;
@@ -104,8 +234,11 @@ var tag_vue_vue_type_script_lang_default = defineComponent({
 				prefixCls,
 				`${prefixCls}-size-${mergedSize.value}`,
 				{
+					[`${prefixCls}-ellipsis`]: shouldRenderEllipsis.value,
+					[`${prefixCls}-ellipsis-line-clamp`]: hasLineClampEllipsis.value,
 					[`${prefixCls}-loading`]: props.loading,
 					[`${prefixCls}-hide`]: !computedVisible.value,
+					[`${prefixCls}-no-ellipsis`]: !shouldRenderEllipsis.value,
 					[`${prefixCls}-${props.color}`]: isBuiltInColor.value,
 					[`${prefixCls}-bordered`]: props.bordered,
 					[`${prefixCls}-checkable`]: props.checkable,
@@ -119,8 +252,11 @@ var tag_vue_vue_type_script_lang_default = defineComponent({
 			}),
 			computedVisible,
 			computedChecked,
+			ellipsisComponent,
 			handleClick,
-			handleClose
+			handleClose,
+			handleCloseKeydown,
+			shouldRenderEllipsis
 		};
 	}
 });

package/es/tag-group/index.d.ts

@@ -0,0 +1,64 @@
+import type { App } from 'vue';
+import type { SDOptions } from '../_utils/types';
+import _TagGroup from './tag-group.vue';
+declare const TagGroup: {
+    new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("./interface").TagGroupProps> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {
+        options: import("./interface").TagGroupOption[];
+        fieldNames: import("./interface").TagGroupFieldNames;
+        maxCount: number | "responsive";
+    }, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<import("./interface").TagGroupProps> & Readonly<{}>, {}, {}, {}, {}, {
+        options: import("./interface").TagGroupOption[];
+        fieldNames: import("./interface").TagGroupFieldNames;
+        maxCount: number | "responsive";
+    }>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import("vue").ComponentOptionsBase<Readonly<import("./interface").TagGroupProps> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
+    options: import("./interface").TagGroupOption[];
+    fieldNames: import("./interface").TagGroupFieldNames;
+    maxCount: number | "responsive";
+}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+    $slots: {
+        item?: (props: {
+            data: import("./interface").TagGroupObjectOption;
+            option: import("./interface").TagGroupObjectOption;
+            label: string | number;
+            value: string | number;
+            index: number;
+            itemClass: (string | {
+                [x: string]: boolean;
+            })[];
+            itemStyle: import("vue").CSSProperties | undefined;
+            isOverflow: boolean;
+            measure: boolean;
+        }) => any;
+    } & {
+        label?: (props: {
+            data: import("./interface").TagGroupObjectOption;
+            option: import("./interface").TagGroupObjectOption;
+        }) => any;
+    } & {
+        counter?: (props: {
+            label: string | number;
+            value: string | number;
+            hiddenCount: number;
+            measure: boolean;
+            counterClass: string;
+        }) => any;
+    } & {
+        default?: (props: {}) => any;
+    };
+}) & {
+    install: (app: App, options?: SDOptions) => void;
+};
+export type TagGroupInstance = InstanceType<typeof _TagGroup>;
+export type { TagGroupFieldNames, TagGroupObjectOption, TagGroupOption, TagGroupOptionLabel, TagGroupProps, } from './interface';
+export default TagGroup;

package/es/tag-group/index.js

@@ -0,0 +1,10 @@
+import { getComponentPrefix, setGlobalConfig } from "../_utils/global-config.js";
+import tag_group_default from "./tag-group.js";
+//#region components/tag-group/index.ts
+var TagGroup = Object.assign(tag_group_default, { install: (app, options) => {
+	setGlobalConfig(app, options);
+	const componentPrefix = getComponentPrefix(options);
+	app.component(componentPrefix + tag_group_default.name, tag_group_default);
+} });
+//#endregion
+export { TagGroup as default };

package/es/tag-group/interface.d.ts

@@ -0,0 +1,18 @@
+import type { Merge } from 'type-fest';
+import type { TagProps } from '../tag';
+export type TagGroupOptionLabel = string | number | (() => string | number);
+export type TagGroupObjectOption = Merge<Partial<TagProps>, {
+    label: TagGroupOptionLabel;
+    value: string | number;
+    itemProps?: Record<string, unknown>;
+}> & Record<string, unknown>;
+export type TagGroupOption = string | number | TagGroupObjectOption;
+export interface TagGroupFieldNames {
+    label?: string;
+    value?: string;
+}
+export interface TagGroupProps {
+    maxCount?: number | 'responsive';
+    options?: TagGroupOption[];
+    fieldNames?: TagGroupFieldNames;
+}

package/es/tag-group/style/css.js

@@ -0,0 +1,2 @@
+import "../../style/index.css";
+import "./index.css";

package/es/tag-group/style/index.css

@@ -0,0 +1,92 @@
+/******** borderSize *******/
+/******** borderStyle *******/
+/******** radius *******/
+/******** shadow distance *******/
+/******** size *******/
+/******** spacing *******/
+/******** shadow *******/
+/******** opacity *******/
+/******** fontSize *******/
+/******** fontWeight ********/
+/******** Primary *******/
+/******** success *******/
+/******** warning *******/
+/******** danger *******/
+/******** link *******/
+/******** radius *******/
+/********* icon hover *********/
+.sd-tag-group {
+  position: relative;
+  display: inline-flex;
+  min-width: 0;
+  max-width: 100%;
+  vertical-align: middle;
+}
+.sd-tag-group-responsive {
+  display: block;
+  width: 100%;
+}
+.sd-tag-group-inner, .sd-tag-group-popover {
+  display: inline-flex;
+  gap: 4px;
+  align-items: center;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.sd-tag-group-responsive .sd-tag-group-inner {
+  display: flex;
+  width: 100%;
+}
+.sd-tag-group-popover {
+  flex-wrap: wrap;
+  max-width: 320px;
+}
+.sd-tag-group-item {
+  display: inline-flex;
+  flex: 0 1 auto;
+  min-width: 0;
+  max-width: 100%;
+}
+.sd-tag-group-item-counter > .sd-tag {
+  cursor: pointer;
+}
+.sd-tag-group-item-content {
+  max-width: 100%;
+}
+.sd-tag-group-counter-content {
+  max-width: 100%;
+}
+.sd-tag-group-item-content-overflow {
+  min-width: 0;
+}
+.sd-tag-group-item-content > .sd-tag, .sd-tag-group-counter-content > .sd-tag, .sd-tag-group-item-content > .sd-link, .sd-tag-group-counter-content > .sd-link, .sd-tag-group-item-content > a, .sd-tag-group-counter-content > a, .sd-tag-group-item-content > span, .sd-tag-group-counter-content > span {
+  max-width: 100%;
+}
+.sd-tag-group-item-ellipsis {
+  max-width: 100%;
+}
+.sd-tag-group-measure {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+  display: inline-flex;
+  gap: 4px;
+  align-items: center;
+  height: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  visibility: hidden;
+  pointer-events: none;
+}
+.sd-tag-group-measure .sd-tag-group-item {
+  flex: 0 0 auto;
+  max-width: none;
+}
+.sd-tag-group-resize-observer {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}

package/es/tag-group/style/index.d.ts

@@ -0,0 +1,2 @@
+import '../../style/index.scss';
+import './index.scss';

package/es/tag-group/style/index.js

@@ -0,0 +1,2 @@
+import "../../style/index.scss";
+import "./index.scss";

package/es/tag-group/style/index.scss

@@ -0,0 +1,108 @@
+@use '@style/theme/index.scss' as theme;
+@use 'sass:string';
+
+@forward '@components/tag-group/style/token.scss';
+
+@use '@components/tag-group/style/token.scss' as *;
+
+$tag-group-prefix-cls: string.unquote('#{theme.$prefix}-tag-group');
+$tag-prefix-cls: string.unquote('#{theme.$prefix}-tag');
+$link-prefix-cls: string.unquote('#{theme.$prefix}-link');
+
+.#{$tag-group-prefix-cls} {
+  position: relative;
+  display: inline-flex;
+  min-width: 0;
+  max-width: 100%;
+  vertical-align: middle;
+
+  &-responsive {
+    display: block;
+    width: 100%;
+  }
+
+  &-inner,
+  &-popover {
+    display: inline-flex;
+    gap: $tag-group-gap;
+    align-items: center;
+    min-width: 0;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  &-responsive &-inner {
+    display: flex;
+    width: 100%;
+  }
+
+  &-popover {
+    flex-wrap: wrap;
+    max-width: $tag-group-popover-max-width;
+  }
+
+  &-item {
+    display: inline-flex;
+    flex: 0 1 auto;
+    min-width: 0;
+    max-width: 100%;
+  }
+
+  &-item-counter > .#{$tag-prefix-cls} {
+    cursor: pointer;
+  }
+
+  &-item-content {
+    max-width: 100%;
+  }
+
+  &-counter-content {
+    max-width: 100%;
+  }
+
+  &-item-content-overflow {
+    min-width: 0;
+  }
+
+  &-item-content > .#{$tag-prefix-cls},
+  &-counter-content > .#{$tag-prefix-cls},
+  &-item-content > .#{$link-prefix-cls},
+  &-counter-content > .#{$link-prefix-cls},
+  &-item-content > a,
+  &-counter-content > a,
+  &-item-content > span,
+  &-counter-content > span {
+    max-width: 100%;
+  }
+
+  &-item-ellipsis {
+    max-width: 100%;
+  }
+
+  &-measure {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: -1;
+    display: inline-flex;
+    gap: $tag-group-gap;
+    align-items: center;
+    height: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    visibility: hidden;
+    pointer-events: none;
+  }
+
+  &-measure &-item {
+    flex: 0 0 auto;
+    max-width: none;
+  }
+
+  &-resize-observer {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+  }
+}

package/es/tag-group/style/token.scss

@@ -0,0 +1,6 @@
+@use '@style/theme/index.scss' as global;
+
+@forward '@style/theme/index.scss';
+
+$tag-group-gap: global.$spacing-2;
+$tag-group-popover-max-width: 320px;

package/es/tag-group/tag-group.js

@@ -0,0 +1,5 @@
+import tag_group_vue_vue_type_script_setup_true_lang_default from "./tag-group.vue_vue_type_script_setup_true_lang.js";
+//#region components/tag-group/tag-group.vue
+var tag_group_default = tag_group_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { tag_group_default as default };

package/es/tag-group/tag-group.vue.d.ts

@@ -0,0 +1,46 @@
+import type { CSSProperties } from 'vue';
+import type { TagGroupObjectOption, TagGroupOption, TagGroupProps } from './interface';
+declare var __VLS_13: {
+    data: TagGroupObjectOption;
+    option: TagGroupObjectOption;
+    label: string | number;
+    value: string | number;
+    index: number;
+    itemClass: (string | {
+        [x: string]: boolean;
+    })[];
+    itemStyle: CSSProperties | undefined;
+    isOverflow: boolean;
+    measure: boolean;
+}, __VLS_21: {
+    data: TagGroupObjectOption;
+    option: TagGroupObjectOption;
+}, __VLS_41: {
+    label: string | number;
+    value: string | number;
+    hiddenCount: number;
+    measure: boolean;
+    counterClass: string;
+}, __VLS_49: {};
+type __VLS_Slots = {} & {
+    item?: (props: typeof __VLS_13) => any;
+} & {
+    label?: (props: typeof __VLS_21) => any;
+} & {
+    counter?: (props: typeof __VLS_41) => any;
+} & {
+    default?: (props: typeof __VLS_49) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<TagGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TagGroupProps> & Readonly<{}>, {
+    options: TagGroupOption[];
+    fieldNames: import("./interface").TagGroupFieldNames;
+    maxCount: number | "responsive";
+}, {}, {}, {}, 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;
+    };
+};