@sdata/web-vue 1.4.0 → 1.5.0

package/es/ellipsis/performant-ellipsis.vue_vue_type_script_lang.js

@@ -0,0 +1,104 @@
+import { getPrefixCls } from "../_utils/global-config.js";
+import { _asyncToGenerator } from "../_virtual/_@oxc-project_runtime@0.124.0/helpers/asyncToGenerator.js";
+import ellipsis_default from "./ellipsis.js";
+import { computed, defineComponent, nextTick, ref } from "vue";
+//#region components/ellipsis/performant-ellipsis.vue?vue&type=script&lang.ts
+var performant_ellipsis_vue_vue_type_script_lang_default = defineComponent({
+	name: "PerformantEllipsis",
+	components: { Ellipsis: ellipsis_default },
+	inheritAttrs: false,
+	props: {
+		lineClamp: {
+			type: [Number, String],
+			default: void 0
+		},
+		expandTrigger: {
+			type: String,
+			default: void 0
+		},
+		tooltip: {
+			type: [Boolean, Object],
+			default: true
+		}
+	},
+	setup(props) {
+		const prefixCls = getPrefixCls("ellipsis");
+		const activated = ref(false);
+		const ellipsisRef = ref(null);
+		const isLineClamp = computed(() => props.lineClamp !== void 0);
+		const componentTag = computed(() => isLineClamp.value ? "div" : "span");
+		const rootCls = computed(() => [prefixCls, {
+			[`${prefixCls}--single-line`]: !isLineClamp.value,
+			[`${prefixCls}--line-clamp`]: isLineClamp.value,
+			[`${prefixCls}--expandable`]: props.expandTrigger === "click"
+		}]);
+		const rootStyle = computed(() => {
+			if (isLineClamp.value) return {
+				overflow: "hidden",
+				textOverflow: "ellipsis",
+				display: "-webkit-box",
+				whiteSpace: "normal",
+				WebkitLineClamp: String(props.lineClamp),
+				WebkitBoxOrient: "vertical"
+			};
+			return {
+				overflow: "hidden",
+				textOverflow: "ellipsis",
+				whiteSpace: "nowrap"
+			};
+		});
+		const getActivatedTriggerElement = () => {
+			var _ellipsisInstance$tri;
+			const ellipsisInstance = ellipsisRef.value;
+			return (_ellipsisInstance$tri = ellipsisInstance === null || ellipsisInstance === void 0 ? void 0 : ellipsisInstance.triggerRef) !== null && _ellipsisInstance$tri !== void 0 ? _ellipsisInstance$tri : ellipsisInstance === null || ellipsisInstance === void 0 ? void 0 : ellipsisInstance.$el;
+		};
+		const replayInteraction = (type) => {
+			const triggerElement = getActivatedTriggerElement();
+			if (!triggerElement || !type) return;
+			if (type === "hover") {
+				triggerElement.dispatchEvent(new MouseEvent("mouseenter", { bubbles: false }));
+				triggerElement.dispatchEvent(new MouseEvent("mousemove", { bubbles: true }));
+				return;
+			}
+			if (type === "focus") {
+				triggerElement.dispatchEvent(new FocusEvent("focusin", { bubbles: true }));
+				return;
+			}
+			triggerElement.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+		};
+		const activate = function() {
+			var _ref = _asyncToGenerator(function* (interactionType) {
+				if (activated.value) return;
+				activated.value = true;
+				yield nextTick();
+				replayInteraction(interactionType);
+			});
+			return function activate(_x) {
+				return _ref.apply(this, arguments);
+			};
+		}();
+		const handleMouseenter = () => {
+			activate("hover");
+		};
+		const handleFocus = () => {
+			activate("focus");
+		};
+		const handleClick = () => {
+			activate(props.expandTrigger === "click" ? "click" : void 0);
+		};
+		return {
+			prefixCls,
+			activated,
+			ellipsisRef,
+			isLineClamp,
+			componentTag,
+			rootCls,
+			rootStyle,
+			handleMouseenter,
+			handleFocus,
+			handleClick
+		};
+	}
+});
+//#endregion
+export { performant_ellipsis_vue_vue_type_script_lang_default as default };

package/es/ellipsis/style/css.js

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

package/es/ellipsis/style/index.css

@@ -0,0 +1,43 @@
+/******** borderSize *******/
+/******** borderStyle *******/
+/******** radius *******/
+/******** shadow distance *******/
+/******** size *******/
+/******** spacing *******/
+/******** shadow *******/
+/******** opacity *******/
+/******** fontSize *******/
+/******** fontWeight ********/
+/******** Primary *******/
+/******** success *******/
+/******** warning *******/
+/******** danger *******/
+/******** link *******/
+/******** radius *******/
+/********* icon hover *********/
+.sd-ellipsis {
+  display: inline-block;
+  max-width: 100%;
+  color: inherit;
+  vertical-align: bottom;
+}
+.sd-ellipsis--single-line {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.sd-ellipsis-content {
+  display: inline;
+  max-width: none;
+}
+.sd-ellipsis--line-clamp {
+  display: -webkit-box;
+  width: 100%;
+  word-break: break-word;
+}
+.sd-ellipsis--expandable {
+  cursor: pointer;
+}
+.sd-ellipsis--expanded {
+  white-space: normal;
+}

package/es/ellipsis/style/index.d.ts

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

package/es/ellipsis/style/index.js

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

package/es/ellipsis/style/index.less

@@ -0,0 +1,33 @@
+@import url('./token.less');
+
+.@{prefix}-ellipsis {
+  display: inline-block;
+  max-width: @ellipsis-max-width;
+  color: @ellipsis-color-text;
+  vertical-align: bottom;
+
+  &--single-line {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &-content {
+    display: inline;
+    max-width: none;
+  }
+
+  &--line-clamp {
+    display: -webkit-box;
+    width: 100%;
+    word-break: break-word;
+  }
+
+  &--expandable {
+    cursor: pointer;
+  }
+
+  &--expanded {
+    white-space: normal;
+  }
+}

package/es/ellipsis/style/token.less

@@ -0,0 +1,5 @@
+@import url('../../style/theme/index.less');
+
+@ellipsis-max-width: 100%;
+
+@ellipsis-color-text: inherit;

package/es/form/form-item-label.vue_vue_type_script_lang.js

@@ -2,8 +2,8 @@ import { formInjectionKey } from "./context.js";
 import { getPrefixCls } from "../_utils/global-config.js";
 import { isNumber } from "../_utils/is.js";
 import resize_observer_v2_default from "../_components/resize-observer-v2.js";
-import IconQuestionCircle from "../icon/icon-question-circle/index.js";
 import Tooltip from "../tooltip/index.js";
+import IconQuestionCircle from "../icon/icon-question-circle/index.js";
 import { defineComponent, getCurrentInstance, inject, onBeforeUnmount, onMounted, ref } from "vue";
 //#region components/form/form-item-label.vue?vue&type=script&lang.ts
 var form_item_label_vue_vue_type_script_lang_default = defineComponent({

package/es/index.css

@@ -12592,6 +12592,32 @@ body[sd-theme='dark'] .sd-radio-button::after {
   color: rgb(var(--gray-5));
   font-size: 14px;
 }
+.sd-ellipsis {
+  display: inline-block;
+  max-width: 100%;
+  color: inherit;
+  vertical-align: bottom;
+}
+.sd-ellipsis--single-line {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.sd-ellipsis-content {
+  display: inline;
+  max-width: none;
+}
+.sd-ellipsis--line-clamp {
+  display: -webkit-box;
+  width: 100%;
+  word-break: break-word;
+}
+.sd-ellipsis--expandable {
+  cursor: pointer;
+}
+.sd-ellipsis--expanded {
+  white-space: normal;
+}
 .sd-dropdown {
   box-sizing: border-box;
   padding: 4px 0;

package/es/index.d.ts

@@ -45,6 +45,8 @@ export { default as Drawer } from './drawer';
 export type { DrawerConfig, DrawerInstance, DrawerMethod, DrawerReturn } from './drawer';
 export { default as Dropdown, Dgroup, Doption, DropdownButton, Dsubmenu } from './dropdown';
 export type { DGroup, DOption, DropdownButtonInstance, DropdownGroupInstance, DropdownInstance, DropdownOption, DropdownOptionInstance, DropDownProps, DropdownSubmenuInstance, DSubmenu, } from './dropdown';
+export { default as Ellipsis, PerformantEllipsis } from './ellipsis';
+export type { EllipsisInstance, EllipsisTooltipProps, PerformantEllipsisInstance, } from './ellipsis';
 export { default as Empty } from './empty';
 export type { EmptyInstance } from './empty';
 export { default as Form, FormItem } from './form';

package/es/index.js

@@ -61,11 +61,12 @@ import descriptions_item_default from "./descriptions/descriptions-item.js";
 import Descriptions from "./descriptions/index.js";
 import Divider from "./divider/index.js";
 import Drawer from "./drawer/index.js";
+import Tooltip from "./tooltip/index.js";
+import Ellipsis, { PerformantEllipsis } from "./ellipsis/index.js";
 import grid_col_default from "./grid/grid-col.js";
 import grid_item_default from "./grid/grid-item.js";
 import grid_row_default from "./grid/grid-row.js";
 import Grid from "./grid/index.js";
-import Tooltip from "./tooltip/index.js";
 import form_item_default from "./form/form-item.js";
 import Form from "./form/index.js";
 import Icon from "./icon-component/index.js";
@@ -132,4 +133,4 @@ import Upload from "./upload/index.js";
 import VerificationCode from "./verification-code/index.js";
 import Watermark from "./watermark/index.js";
 import SDVue from "./sd-vue.js";
-export { Affix, Alert, Anchor, anchor_link_default as AnchorLink, AutoComplete, Avatar, AvatarGroup, BackTop, Badge, Breadcrumb, breadcrumb_item_default as BreadcrumbItem, Button, button_group_default as ButtonGroup, Calendar, Card, card_grid_default as CardGrid, card_meta_default as CardMeta, Carousel, carousel_item_default as CarouselItem, Cascader, cascader_panel_default as CascaderPanel, Checkbox, checkbox_group_default as CheckboxGroup, grid_col_default as Col, Collapse, collapse_item_default as CollapseItem, ColorPicker, Comment, ConfigProvider, countdown_default as Countdown, DatePicker, Descriptions, descriptions_item_default as DescriptionsItem, dropdown_group_default as Dgroup, Divider, dropdown_option_default as Doption, Drawer, Dropdown, dropdown_button_default as DropdownButton, dropdown_submenu_default as Dsubmenu, Empty, Form, form_item_default as FormItem, Grid, grid_item_default as GridItem, Icon, Image, preview_default as ImagePreview, preview_action_default as ImagePreviewAction, preview_group_default as ImagePreviewGroup, Input, input_group_default as InputGroup, InputNumber, input_password_default as InputPassword, input_search_default as InputSearch, InputTag, Layout, content_default as LayoutContent, footer_default as LayoutFooter, header_default as LayoutHeader, sider_default as LayoutSider, Link, List, list_item_default as ListItem, list_item_meta_default as ListItemMeta, Mention, Menu, item_default as MenuItem, item_group_default as MenuItemGroup, Message, Modal, month_picker_default as MonthPicker, Notification, optgroup_default as Optgroup, option_default as Option, OverflowList, PageHeader, Pagination, Popconfirm, Popover, Progress, quarter_picker_default as QuarterPicker, Radio, radio_group_default as RadioGroup, range_picker_default as RangePicker, Rate, ResizeBox, Result, grid_row_default as Row, Scrollbar, Select, Skeleton, line_default as SkeletonLine, shape_default as SkeletonShape, Slider, Space, Spin, Split, Statistic, step_default as Step, Steps, SubMenu, Switch, tab_pane_default as TabPane, Table, table_column_default as TableColumn, Tabs, Tag, table_tbody_default as Tbody, table_td_default as Td, Textarea, table_th_default as Th, table_thead_default as Thead, TimePicker, Timeline, item_default$1 as TimelineItem, Tooltip, table_tr_default as Tr, Transfer, Tree, TreeSelect, Trigger, Typography, paragraph_default as TypographyParagraph, text_default as TypographyText, title_default as TypographyTitle, Upload, VerificationCode, Watermark, week_picker_default as WeekPicker, year_picker_default as YearPicker, addI18nMessages, SDVue as default, getLocale, useFormItem, useLocale };
+export { Affix, Alert, Anchor, anchor_link_default as AnchorLink, AutoComplete, Avatar, AvatarGroup, BackTop, Badge, Breadcrumb, breadcrumb_item_default as BreadcrumbItem, Button, button_group_default as ButtonGroup, Calendar, Card, card_grid_default as CardGrid, card_meta_default as CardMeta, Carousel, carousel_item_default as CarouselItem, Cascader, cascader_panel_default as CascaderPanel, Checkbox, checkbox_group_default as CheckboxGroup, grid_col_default as Col, Collapse, collapse_item_default as CollapseItem, ColorPicker, Comment, ConfigProvider, countdown_default as Countdown, DatePicker, Descriptions, descriptions_item_default as DescriptionsItem, dropdown_group_default as Dgroup, Divider, dropdown_option_default as Doption, Drawer, Dropdown, dropdown_button_default as DropdownButton, dropdown_submenu_default as Dsubmenu, Ellipsis, Empty, Form, form_item_default as FormItem, Grid, grid_item_default as GridItem, Icon, Image, preview_default as ImagePreview, preview_action_default as ImagePreviewAction, preview_group_default as ImagePreviewGroup, Input, input_group_default as InputGroup, InputNumber, input_password_default as InputPassword, input_search_default as InputSearch, InputTag, Layout, content_default as LayoutContent, footer_default as LayoutFooter, header_default as LayoutHeader, sider_default as LayoutSider, Link, List, list_item_default as ListItem, list_item_meta_default as ListItemMeta, Mention, Menu, item_default as MenuItem, item_group_default as MenuItemGroup, Message, Modal, month_picker_default as MonthPicker, Notification, optgroup_default as Optgroup, option_default as Option, OverflowList, PageHeader, Pagination, PerformantEllipsis, Popconfirm, Popover, Progress, quarter_picker_default as QuarterPicker, Radio, radio_group_default as RadioGroup, range_picker_default as RangePicker, Rate, ResizeBox, Result, grid_row_default as Row, Scrollbar, Select, Skeleton, line_default as SkeletonLine, shape_default as SkeletonShape, Slider, Space, Spin, Split, Statistic, step_default as Step, Steps, SubMenu, Switch, tab_pane_default as TabPane, Table, table_column_default as TableColumn, Tabs, Tag, table_tbody_default as Tbody, table_td_default as Td, Textarea, table_th_default as Th, table_thead_default as Thead, TimePicker, Timeline, item_default$1 as TimelineItem, Tooltip, table_tr_default as Tr, Transfer, Tree, TreeSelect, Trigger, Typography, paragraph_default as TypographyParagraph, text_default as TypographyText, title_default as TypographyTitle, Upload, VerificationCode, Watermark, week_picker_default as WeekPicker, year_picker_default as YearPicker, addI18nMessages, SDVue as default, getLocale, useFormItem, useLocale };

package/es/index.less

@@ -48,6 +48,7 @@
 @import './grid/style/index.less';
 @import './form/style/index.less';
 @import './empty/style/index.less';
+@import './ellipsis/style/index.less';
 @import './dropdown/style/index.less';
 @import './drawer/style/index.less';
 @import './divider/style/index.less';

package/es/sd-vue.js

@@ -62,11 +62,12 @@ import descriptions_item_default from "./descriptions/descriptions-item.js";
 import Descriptions from "./descriptions/index.js";
 import Divider from "./divider/index.js";
 import Drawer from "./drawer/index.js";
+import Tooltip from "./tooltip/index.js";
+import Ellipsis, { PerformantEllipsis } from "./ellipsis/index.js";
 import grid_col_default from "./grid/grid-col.js";
 import grid_item_default from "./grid/grid-item.js";
 import grid_row_default from "./grid/grid-row.js";
 import Grid from "./grid/index.js";
-import Tooltip from "./tooltip/index.js";
 import form_item_default from "./form/form-item.js";
 import Form from "./form/index.js";
 import Icon from "./icon-component/index.js";
@@ -193,6 +194,8 @@ var components = {
 	Skeleton,
 	Breadcrumb,
 	Dropdown,
+	Ellipsis,
+	PerformantEllipsis,
 	Menu,
 	PageHeader,
 	Pagination,
@@ -235,6 +238,7 @@ var SDVue = _objectSpread2(_objectSpread2({}, components), {}, {
 	Dgroup: dropdown_group_default,
 	Dsubmenu: dropdown_submenu_default,
 	DropdownButton: dropdown_button_default,
+	PerformantEllipsis,
 	FormItem: form_item_default,
 	Row: grid_row_default,
 	Col: grid_col_default,