@sdata/web-vue 3.7.0 → 3.8.0

package/es/_components/select-view/style/index.css

@@ -785,6 +785,12 @@
 .sd-select-view-multiple:not(.sd-select-view-focus) .sd-select-view-icon-hover:hover::before {
   background-color: var(--sd-color-fill-4);
 }
+.sd-select-view-multiple {
+  position: relative;
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
+}
 .sd-select-view-multiple.sd-select-view-has-tag {
   padding-right: 4px;
   padding-left: 4px;
@@ -884,6 +890,9 @@
 .sd-select-view-multiple .sd-select-view-resize-observer {
   position: absolute;
   inset: 0;
+  display: block;
+  width: 100%;
+  height: 100%;
   visibility: hidden;
   pointer-events: none;
 }
@@ -891,11 +900,18 @@
   position: absolute;
   top: 0;
   left: 0;
-  display: inline-flex;
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  overflow: hidden;
   white-space: nowrap;
   visibility: hidden;
   pointer-events: none;
 }
+.sd-select-view-multiple .sd-select-view-measure .sd-select-view-tag {
+  display: inline-flex;
+  flex-shrink: 0;
+}
 .sd-select-view-multiple .sd-select-view-tag-ellipsis {
   display: block;
   min-width: 0;

package/es/file-previewer/file-previewer.vue_vue_type_script_setup_true_lang.js

@@ -138,6 +138,7 @@ var file_previewer_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 			return (_visible$value = visible === null || visible === void 0 ? void 0 : visible.value) !== null && _visible$value !== void 0 ? _visible$value : localVisible.value;
 		});
 		const shouldRender = computed(() => !fullscreen.value || mergedVisible.value);
+		const useImagePreview = computed(() => type.value === "image" && fullscreen.value && !slots.content);
 		const container = usePopupContainer(document.body, reactive({ popupContainer }));
 		const popupVisible = computed(() => fullscreen.value && mergedVisible.value);
 		const { zIndex } = usePopupManager("dialog", { visible: popupVisible });
@@ -186,14 +187,15 @@ var file_previewer_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 		const mergedImageProps = computed(() => {
 			var _imageProps$value;
 			const userProps = (_imageProps$value = imageProps === null || imageProps === void 0 ? void 0 : imageProps.value) !== null && _imageProps$value !== void 0 ? _imageProps$value : {};
-			return _objectSpread2(_objectSpread2({
-				preview: false,
-				width: "100%",
-				height: "100%",
-				fit: "contain",
-				alt: (title === null || title === void 0 ? void 0 : title.value) || ""
-			}, userProps), {}, {
+			return _objectSpread2(_objectSpread2({ alt: (title === null || title === void 0 ? void 0 : title.value) || "" }, userProps), {}, {
 				src: currentSrc.value,
+				renderToBody: renderToBody.value,
+				previewProps: _objectSpread2({
+					maskClosable: maskClosable.value,
+					closable: closable.value,
+					popupContainer: popupContainer === null || popupContainer === void 0 ? void 0 : popupContainer.value,
+					escToClose: escToClose.value
+				}, userProps.previewProps),
 				onLoad: (event) => {
 					callEventHandler(userProps.onLoad, event);
 					onPreviewLoad();
@@ -281,6 +283,10 @@ var file_previewer_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 		function onMaskClick() {
 			if (maskClosable.value) close();
 		}
+		function onImagePreviewVisibleChange(nextVisible) {
+			if (!nextVisible && mergedVisible.value) emit("close");
+			setVisible(nextVisible);
+		}
 		function onKeyDown(event) {
 			if (fullscreen.value && escToClose.value && event.key === KEYBOARD_KEY.ESC) {
 				event.stopPropagation();
@@ -376,7 +382,12 @@ var file_previewer_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 			onLoadError
 		});
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(Teleport, {
+			return useImagePreview.value ? (openBlock(), createBlock(unref(Image), mergeProps({ key: currentSrc.value + "image" }, mergedImageProps.value, {
+				"preview-visible": mergedVisible.value,
+				class: `${unref(prefixCls)}-image`,
+				onPreviewVisibleChange: onImagePreviewVisibleChange
+			}), null, 16, ["preview-visible", "class"])) : (openBlock(), createBlock(Teleport, {
+				key: 1,
 				to: unref(container),
 				disabled: !unref(fullscreen) || !unref(renderToBody)
 			}, [shouldRender.value ? (openBlock(), createElementBlock("div", {
@@ -431,7 +442,7 @@ var file_previewer_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 					key: 3,
 					class: normalizeClass(`${unref(prefixCls)}-error`)
 				}, "文件预览加载失败", 2)) : createCommentVNode("", true)
-			], 46, _hoisted_1)) : createCommentVNode("", true)], 8, ["to", "disabled"]);
+			], 46, _hoisted_1)) : createCommentVNode("", true)], 8, ["to", "disabled"]));
 		};
 	}
 }));

package/es/image/image.vue_vue_type_script_setup_true_lang.js

@@ -209,11 +209,13 @@ var image_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComp
 			if (groupContext === null || groupContext === void 0 ? void 0 : groupContext.preview) groupContext.preview(imageId);
 			else {
 				emit("preview-visible-change", true);
+				emit("update:previewVisible", true);
 				setPreviewVisible(true);
 			}
 		}
 		function onPreviewClose() {
 			emit("preview-visible-change", false);
+			emit("update:previewVisible", false);
 			setPreviewVisible(false);
 		}
 		const imgStyle = sizeStyle;

package/es/index.css

@@ -2677,6 +2677,12 @@ body {
 .sd-select-view-multiple:not(.sd-select-view-focus) .sd-select-view-icon-hover:hover::before {
   background-color: var(--sd-color-fill-4);
 }
+.sd-select-view-multiple {
+  position: relative;
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
+}
 .sd-select-view-multiple.sd-select-view-has-tag {
   padding-right: 4px;
   padding-left: 4px;
@@ -2776,6 +2782,9 @@ body {
 .sd-select-view-multiple .sd-select-view-resize-observer {
   position: absolute;
   inset: 0;
+  display: block;
+  width: 100%;
+  height: 100%;
   visibility: hidden;
   pointer-events: none;
 }
@@ -2783,11 +2792,18 @@ body {
   position: absolute;
   top: 0;
   left: 0;
-  display: inline-flex;
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  overflow: hidden;
   white-space: nowrap;
   visibility: hidden;
   pointer-events: none;
 }
+.sd-select-view-multiple .sd-select-view-measure .sd-select-view-tag {
+  display: inline-flex;
+  flex-shrink: 0;
+}
 .sd-select-view-multiple .sd-select-view-tag-ellipsis {
   display: block;
   min-width: 0;
@@ -11588,6 +11604,12 @@ body.sd-tour-active .sd-tour-popover * {
 .sd-input-tag:not(.sd-input-tag-focus) .sd-input-tag-icon-hover:hover::before {
   background-color: var(--sd-color-fill-4);
 }
+.sd-input-tag {
+  position: relative;
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
+}
 .sd-input-tag.sd-input-tag-has-tag {
   padding-right: 4px;
   padding-left: 4px;
@@ -11687,6 +11709,9 @@ body.sd-tour-active .sd-tour-popover * {
 .sd-input-tag .sd-input-tag-resize-observer {
   position: absolute;
   inset: 0;
+  display: block;
+  width: 100%;
+  height: 100%;
   visibility: hidden;
   pointer-events: none;
 }
@@ -11694,11 +11719,18 @@ body.sd-tour-active .sd-tour-popover * {
   position: absolute;
   top: 0;
   left: 0;
-  display: inline-flex;
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  overflow: hidden;
   white-space: nowrap;
   visibility: hidden;
   pointer-events: none;
 }
+.sd-input-tag .sd-input-tag-measure .sd-input-tag-tag {
+  display: inline-flex;
+  flex-shrink: 0;
+}
 .sd-input-tag .sd-input-tag-tag-ellipsis {
   display: block;
   min-width: 0;

package/es/input-tag/input-tag.js

@@ -336,6 +336,10 @@ var input_tag_default = /* @__PURE__ */ defineComponent({
 			if (!measureRef.value || hiddenCount <= 0) return 0;
 			return getOuterWidth(measureRef.value.querySelector(`[data-hidden-count="${hiddenCount}"]`));
 		};
+		const isClosableTag = (item) => {
+			var _item$tagProps$closab, _item$tagProps;
+			return Boolean((_item$tagProps$closab = (_item$tagProps = item.tagProps) === null || _item$tagProps === void 0 ? void 0 : _item$tagProps.closable) !== null && _item$tagProps$closab !== void 0 ? _item$tagProps$closab : !mergedDisabled.value && !props.readonly && item.closable);
+		};
 		const syncResponsiveTags = () => {
 			var _inputRef$value$offse, _inputRef$value;
 			if (!isResponsiveMaxTagCount.value) {
@@ -534,7 +538,8 @@ var input_tag_default = /* @__PURE__ */ defineComponent({
 					"key": `measure-tag-${item.value}`,
 					"class": `${prefixCls}-tag`,
 					"visible": true,
-					"nowrap": true
+					"nowrap": true,
+					"closable": isClosableTag(item)
 				}, item.tagProps), { default: () => {
 					var _ref2, _slots$tag3, _slots$tag4, _props$formatTag2;
 					return [(_ref2 = (_slots$tag3 = (_slots$tag4 = slots.tag) === null || _slots$tag4 === void 0 ? void 0 : _slots$tag4.call(slots, { data: item.raw })) !== null && _slots$tag3 !== void 0 ? _slots$tag3 : (_props$formatTag2 = props.formatTag) === null || _props$formatTag2 === void 0 ? void 0 : _props$formatTag2.call(props, item.raw)) !== null && _ref2 !== void 0 ? _ref2 : item.label];
@@ -561,7 +566,7 @@ var input_tag_default = /* @__PURE__ */ defineComponent({
 							[`${prefixCls}-tag-counter`]: isOverflowCounterTag(item.value),
 							[`${prefixCls}-tag-overflow`]: isCompressedResponsiveTag(index, item.value)
 						}],
-						"closable": !mergedDisabled.value && !props.readonly && item.closable,
+						"closable": isClosableTag(item),
 						"visible": true,
 						"nowrap": props.tagNowrap || isResponsiveMaxTagCount.value,
 						"style": getTagStyle(index)

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

@@ -582,6 +582,12 @@
 .sd-input-tag:not(.sd-input-tag-focus) .sd-input-tag-icon-hover:hover::before {
   background-color: var(--sd-color-fill-4);
 }
+.sd-input-tag {
+  position: relative;
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
+}
 .sd-input-tag.sd-input-tag-has-tag {
   padding-right: 4px;
   padding-left: 4px;
@@ -681,6 +687,9 @@
 .sd-input-tag .sd-input-tag-resize-observer {
   position: absolute;
   inset: 0;
+  display: block;
+  width: 100%;
+  height: 100%;
   visibility: hidden;
   pointer-events: none;
 }
@@ -688,11 +697,18 @@
   position: absolute;
   top: 0;
   left: 0;
-  display: inline-flex;
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  overflow: hidden;
   white-space: nowrap;
   visibility: hidden;
   pointer-events: none;
 }
+.sd-input-tag .sd-input-tag-measure .sd-input-tag-tag {
+  display: inline-flex;
+  flex-shrink: 0;
+}
 .sd-input-tag .sd-input-tag-tag-ellipsis {
   display: block;
   min-width: 0;

package/es/input-tag/style/input-tag.scss

@@ -75,6 +75,11 @@
 @mixin input-tag-style($cls) {
   @include input-wrapper-style($cls);
 
+  position: relative;
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
+
   &.#{$cls}-has-tag {
     padding-right: $input-tag-padding-horizontal;
     padding-left: $input-tag-padding-horizontal;
@@ -169,6 +174,9 @@
   .#{$cls}-resize-observer {
     position: absolute;
     inset: 0;
+    display: block;
+    width: 100%;
+    height: 100%;
     visibility: hidden;
     pointer-events: none;
   }
@@ -177,10 +185,18 @@
     position: absolute;
     top: 0;
     left: 0;
-    display: inline-flex;
+    display: block;
+    width: 100%;
+    max-width: 100%;
+    overflow: hidden;
     white-space: nowrap;
     visibility: hidden;
     pointer-events: none;
+
+    .#{$cls}-tag {
+      display: inline-flex;
+      flex-shrink: 0;
+    }
   }
 
   .#{$cls}-tag-ellipsis {

package/json/web-types.json

@@ -2,7 +2,7 @@
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "framework": "vue",
   "name": "@sdata/web-vue",
-  "version": "3.6.0",
+  "version": "3.7.1",
   "contributions": {
     "html": {
       "types-syntax": "typescript",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sdata/web-vue",
-  "version": "3.7.0",
+  "version": "3.8.0",
   "description": "SD Design Vue: A Vue.js 3 UI Library",
   "keywords": [
     "sd",
@@ -85,10 +85,9 @@
     "@vue/test-utils": "^2.4.11",
     "@vueuse/core": "^14.3.0",
     "clean-css": "^5.3.3",
+    "cypress": "15.18.0",
     "fast-glob": "^3.3.3",
     "glob": "^13.0.6",
-    "jest-serializer-vue": "^3.1.0",
-    "jsdom": "^29.1.1",
     "sass": "^1.101.0",
     "semantic-release": "^25.0.5",
     "svgo": "^4.0.1",
@@ -96,7 +95,6 @@
     "typescript": "^6.0.3",
     "vite": "^8.0.16",
     "vite-plus": "^0.1.24",
-    "vitest": "^4.1.9",
     "vue-docgen-api": "4.79.2",
     "vue-tsc": "^3.3.5"
   },
@@ -126,7 +124,11 @@
     "dtsgen": "pnpm run build:dts",
     "pretypecheck": "pnpm run icongen",
     "typecheck": "vue-tsc --noEmit -p tsconfig.json",
-    "test": "vp test run",
-    "test:update": "vp test run -u"
+    "test": "cypress run --component --browser chrome",
+    "test:affected": "node ./scripts/find-affected-cypress-specs.mjs",
+    "test:affected:unit": "node --test ./scripts/find-affected-cypress-specs.test.mjs",
+    "test:headed": "cypress run --component --browser chrome --headed",
+    "cypress:open": "cypress open --component",
+    "cypress:run": "cypress run --component --browser chrome"
   }
 }