@sdata/web-vue 1.7.1 → 1.9.0

package/es/index.css

@@ -2012,6 +2012,7 @@ body {
 }
 .sd-select-view-multiple .sd-select-view-inner {
   flex: 1;
+  min-width: 0;
   overflow: hidden;
   line-height: 0;
 }
@@ -2019,9 +2020,16 @@ body {
   display: flex;
   flex-wrap: wrap;
 }
+.sd-select-view-multiple .sd-select-view-inner.sd-select-view-inner-responsive {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+}
 .sd-select-view-multiple .sd-select-view-inner .sd-select-view-tag {
   display: inline-flex;
+  flex-shrink: 0;
   align-items: center;
+  min-width: 0;
   margin-right: 4px;
   color: var(--color-text-1);
   font-size: 12px;
@@ -2039,6 +2047,19 @@ body {
 .sd-select-view-multiple .sd-select-view-inner .sd-select-view-tag.sd-tag-custom-color .sd-icon-hover.sd-tag-icon-hover:hover::before {
   background-color: rgba(255, 255, 255, 0.2);
 }
+.sd-select-view-multiple .sd-select-view-inner .sd-select-view-tag.sd-select-view-tag-overflow {
+  flex-shrink: 1;
+  white-space: nowrap;
+  word-break: normal;
+}
+.sd-select-view-multiple .sd-select-view-inner .sd-select-view-tag.sd-select-view-tag-overflow .sd-tag-text {
+  max-width: 100%;
+}
+.sd-select-view-multiple .sd-select-view-inner .sd-select-view-tag.sd-select-view-tag-counter {
+  flex-shrink: 0;
+  white-space: nowrap;
+  word-break: normal;
+}
 .sd-select-view-multiple .sd-select-view-inner .sd-select-view-input {
   width: 100%;
   padding-right: 0;
@@ -2065,6 +2086,9 @@ body {
 .sd-select-view-multiple .sd-select-view-inner .sd-select-view-input {
   box-sizing: border-box;
 }
+.sd-select-view-inner-responsive .sd-select-view-multiple .sd-select-view-inner .sd-select-view-input {
+  flex: 0 0 auto;
+}
 .sd-select-view-multiple .sd-select-view-mirror {
   position: absolute;
   top: 0;
@@ -2073,6 +2097,27 @@ body {
   visibility: hidden;
   pointer-events: none;
 }
+.sd-select-view-multiple .sd-select-view-resize-observer {
+  position: absolute;
+  inset: 0;
+  visibility: hidden;
+  pointer-events: none;
+}
+.sd-select-view-multiple .sd-select-view-measure {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: inline-flex;
+  white-space: nowrap;
+  visibility: hidden;
+  pointer-events: none;
+}
+.sd-select-view-multiple .sd-select-view-tag-ellipsis {
+  display: block;
+  min-width: 0;
+  max-width: 100%;
+  vertical-align: bottom;
+}
 .sd-select-view-multiple.sd-select-view-focus .sd-select-view-tag {
   background-color: var(--color-fill-2);
   border-color: var(--color-fill-2);
@@ -10160,6 +10205,7 @@ body {
 }
 .sd-input-tag .sd-input-tag-inner {
   flex: 1;
+  min-width: 0;
   overflow: hidden;
   line-height: 0;
 }
@@ -10167,9 +10213,16 @@ body {
   display: flex;
   flex-wrap: wrap;
 }
+.sd-input-tag .sd-input-tag-inner.sd-input-tag-inner-responsive {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+}
 .sd-input-tag .sd-input-tag-inner .sd-input-tag-tag {
   display: inline-flex;
+  flex-shrink: 0;
   align-items: center;
+  min-width: 0;
   margin-right: 4px;
   color: var(--color-text-1);
   font-size: 12px;
@@ -10187,6 +10240,19 @@ body {
 .sd-input-tag .sd-input-tag-inner .sd-input-tag-tag.sd-tag-custom-color .sd-icon-hover.sd-tag-icon-hover:hover::before {
   background-color: rgba(255, 255, 255, 0.2);
 }
+.sd-input-tag .sd-input-tag-inner .sd-input-tag-tag.sd-input-tag-tag-overflow {
+  flex-shrink: 1;
+  white-space: nowrap;
+  word-break: normal;
+}
+.sd-input-tag .sd-input-tag-inner .sd-input-tag-tag.sd-input-tag-tag-overflow .sd-tag-text {
+  max-width: 100%;
+}
+.sd-input-tag .sd-input-tag-inner .sd-input-tag-tag.sd-input-tag-tag-counter {
+  flex-shrink: 0;
+  white-space: nowrap;
+  word-break: normal;
+}
 .sd-input-tag .sd-input-tag-inner .sd-input-tag-input {
   width: 100%;
   padding-right: 0;
@@ -10213,6 +10279,9 @@ body {
 .sd-input-tag .sd-input-tag-inner .sd-input-tag-input {
   box-sizing: border-box;
 }
+.sd-input-tag-inner-responsive .sd-input-tag .sd-input-tag-inner .sd-input-tag-input {
+  flex: 0 0 auto;
+}
 .sd-input-tag .sd-input-tag-mirror {
   position: absolute;
   top: 0;
@@ -10221,6 +10290,27 @@ body {
   visibility: hidden;
   pointer-events: none;
 }
+.sd-input-tag .sd-input-tag-resize-observer {
+  position: absolute;
+  inset: 0;
+  visibility: hidden;
+  pointer-events: none;
+}
+.sd-input-tag .sd-input-tag-measure {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: inline-flex;
+  white-space: nowrap;
+  visibility: hidden;
+  pointer-events: none;
+}
+.sd-input-tag .sd-input-tag-tag-ellipsis {
+  display: block;
+  min-width: 0;
+  max-width: 100%;
+  vertical-align: bottom;
+}
 .sd-input-tag.sd-input-tag-focus .sd-input-tag-tag {
   background-color: var(--color-fill-2);
   border-color: var(--color-fill-2);
@@ -14669,6 +14759,75 @@ body {
   border-radius: 2px;
   box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.1);
 }
+.sd-color-picker-panel .sd-color-picker-panel-head {
+  display: flex;
+  justify-content: center;
+  padding: 8px 8px 0;
+}
+.sd-color-picker-panel .sd-color-picker-gradient-panel {
+  padding: 8px 8px 0;
+}
+.sd-color-picker-panel .sd-color-picker-gradient-bar-shell {
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: 28px;
+  user-select: none;
+  margin-inline: 8px;
+}
+.sd-color-picker-panel .sd-color-picker-gradient-bar {
+  display: block;
+  width: 100%;
+  height: 8px;
+  padding: 0;
+  background-color: transparent;
+  border: 1px solid var(--color-border-2);
+  border-radius: 4px;
+  cursor: pointer;
+}
+.sd-color-picker-panel .sd-color-picker-gradient-thumb {
+  position: absolute;
+  z-index: 1;
+  width: 18px;
+  height: 18px;
+  padding: 2px;
+  background: var(--color-bg-white);
+  border: 1px solid var(--color-border-2);
+  border-radius: 50%;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14);
+  transform: translateX(-50%);
+  cursor: pointer;
+  touch-action: none;
+}
+.sd-color-picker-panel .sd-color-picker-gradient-thumb-active {
+  border-color: var(--color-primary-6);
+  box-shadow: 0 0 0 2px rgba(22, 93, 255, 0.16);
+}
+.sd-color-picker-panel .sd-color-picker-gradient-thumb-inner {
+  display: block;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+}
+.sd-color-picker-panel .sd-color-picker-gradient-meta {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  margin-top: 8px;
+}
+.sd-color-picker-panel .sd-color-picker-gradient-label {
+  color: var(--color-text-2);
+  font-size: 12px;
+}
+.sd-color-picker-panel .sd-color-picker-gradient-degree {
+  width: 72px;
+}
+.sd-color-picker-panel .sd-color-picker-gradient-preview {
+  height: 32px;
+  margin-top: 8px;
+  border: 1px solid var(--color-border-2);
+  border-radius: 4px;
+}
 .sd-color-picker-panel .sd-color-picker-palette {
   position: relative;
   box-sizing: border-box;
@@ -14741,11 +14900,25 @@ body {
 .sd-color-picker-panel .sd-color-picker-panel-colors .sd-color-picker-colors-section:not(:first-child) {
   margin-top: 12px;
 }
+.sd-color-picker-panel .sd-color-picker-panel-colors .sd-color-picker-colors-header {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  justify-content: space-between;
+}
 .sd-color-picker-panel .sd-color-picker-panel-colors .sd-color-picker-colors-text {
   color: var(--color-text-1);
   font-weight: 400;
   font-size: 12px;
 }
+.sd-color-picker-panel .sd-color-picker-panel-colors .sd-color-picker-colors-action {
+  padding: 0;
+  color: var(--color-primary-6);
+  font-size: 12px;
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+}
 .sd-color-picker-panel .sd-color-picker-panel-colors .sd-color-picker-colors-empty {
   margin: 12px 0;
   color: var(--color-text-3);
@@ -14831,13 +15004,21 @@ body {
   flex: 0 0 auto;
   width: 52px;
 }
+.sd-color-picker-panel .sd-color-picker-input-group {
+  width: 100%;
+}
+.sd-color-picker-panel .sd-color-picker-format-input {
+  min-width: 0;
+}
 .sd-color-picker-panel .sd-color-picker-input-hex .sd-input {
   padding-left: 4px;
 }
 .sd-color-picker-panel.sd-color-picker-panel-disabled .sd-color-picker-palette,
 .sd-color-picker-panel.sd-color-picker-panel-disabled .sd-color-picker-control-bar,
 .sd-color-picker-panel.sd-color-picker-panel-disabled .sd-color-picker-color-block,
-.sd-color-picker-panel.sd-color-picker-panel-disabled .sd-color-picker-preview {
+.sd-color-picker-panel.sd-color-picker-panel-disabled .sd-color-picker-preview,
+.sd-color-picker-panel.sd-color-picker-panel-disabled .sd-color-picker-gradient-bar,
+.sd-color-picker-panel.sd-color-picker-panel-disabled .sd-color-picker-gradient-thumb {
   cursor: not-allowed;
   opacity: 0.8;
 }

package/es/index.js

@@ -33,6 +33,8 @@ import Breadcrumb from "./breadcrumb/index.js";
 import radio_group_default from "./radio/radio-group.js";
 import Radio from "./radio/index.js";
 import optgroup_default from "./select/optgroup.js";
+import Tooltip from "./tooltip/index.js";
+import Ellipsis, { PerformantEllipsis } from "./ellipsis/index.js";
 import Tag from "./tag/index.js";
 import InputTag from "./input-tag/index.js";
 import Select from "./select/index.js";
@@ -61,8 +63,6 @@ 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";

package/es/input/input.js

@@ -4,6 +4,7 @@ import { getPrefixCls } from "../_utils/global-config.js";
 import { isFunction, isNull, isObject, isUndefined } from "../_utils/is.js";
 import icon_hover_default from "../_components/icon-hover.js";
 import IconClose from "../icon/icon-close/index.js";
+import { useAllowClear } from "../_hooks/use-allow-clear.js";
 import feedback_icon_default from "../_components/feedback-icon.js";
 import { useCursor } from "../_hooks/use-cursor.js";
 import { useSize } from "../_hooks/use-size.js";
@@ -68,7 +69,7 @@ var input_default = /* @__PURE__ */ defineComponent({
 		"blur": (_ev) => true
 	},
 	setup(props, { emit, slots, attrs }) {
-		const { size, disabled, error, modelValue } = toRefs(props);
+		const { size, disabled, error, modelValue, allowClear } = toRefs(props);
 		const prefixCls = getPrefixCls("input");
 		const inputRef = ref();
 		const { mergedSize: _mergedSize, mergedDisabled, mergedError: _mergedError, feedback, eventHandlers } = useFormItem({
@@ -77,6 +78,7 @@ var input_default = /* @__PURE__ */ defineComponent({
 			error
 		});
 		const { mergedSize } = useSize(_mergedSize);
+		const { mergedAllowClear } = useAllowClear(allowClear);
 		const [recordCursor, setCursor] = useCursor(inputRef);
 		const _value = ref(props.defaultValue);
 		const computedValue = computed(() => {
@@ -91,7 +93,7 @@ var input_default = /* @__PURE__ */ defineComponent({
 			preValue = oldValue;
 		});
 		const focused = ref(false);
-		const showClearBtn = computed(() => props.allowClear && !props.readonly && !mergedDisabled.value && Boolean(computedValue.value));
+		const showClearBtn = computed(() => mergedAllowClear.value && !props.readonly && !mergedDisabled.value && Boolean(computedValue.value));
 		const isComposition = ref(false);
 		const compositionValue = ref("");
 		const getValueLength = (value) => {

package/es/input-number/input-number.js

@@ -2,6 +2,7 @@ import { useFormItem } from "../_hooks/use-form-item.js";
 import { _objectSpread2 } from "../_virtual/_@oxc-project_runtime@0.124.0/helpers/objectSpread2.js";
 import { getPrefixCls } from "../_utils/global-config.js";
 import { isNumber, isUndefined } from "../_utils/is.js";
+import { useAllowClear } from "../_hooks/use-allow-clear.js";
 import { useSize } from "../_hooks/use-size.js";
 import Button from "../button/index.js";
 import Input from "../input/index.js";
@@ -79,7 +80,7 @@ var input_number_default = /* @__PURE__ */ defineComponent({
 	},
 	setup(props, { emit, slots }) {
 		var _props$modelValue;
-		const { size, disabled } = toRefs(props);
+		const { size, disabled, allowClear } = toRefs(props);
 		const prefixCls = getPrefixCls("input-number");
 		const inputRef = ref();
 		const { mergedSize: _mergedSize, mergedDisabled, eventHandlers } = useFormItem({
@@ -87,6 +88,7 @@ var input_number_default = /* @__PURE__ */ defineComponent({
 			disabled
 		});
 		const { mergedSize } = useSize(_mergedSize);
+		const { mergedAllowClear } = useAllowClear(allowClear);
 		const mergedPrecision = computed(() => {
 			if (isNumber(props.precision)) {
 				const decimal = `${props.step}`.split(".")[1];
@@ -277,7 +279,7 @@ var input_number_default = /* @__PURE__ */ defineComponent({
 				"ref": inputRef,
 				"class": cls.value,
 				"type": "text",
-				"allowClear": props.allowClear,
+				"allowClear": mergedAllowClear.value,
 				"size": mergedSize.value,
 				"modelValue": _value.value,
 				"placeholder": props.placeholder,

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

@@ -36,7 +36,7 @@ declare const InputTag: {
             type: import("vue").PropType<import("..").Size>;
         };
         maxTagCount: {
-            type: NumberConstructor;
+            type: import("vue").PropType<number | "responsive">;
             default: number;
         };
         retainInputValue: {
@@ -100,7 +100,7 @@ declare const InputTag: {
         disabledInput: boolean;
         uninjectFormItemContext: boolean;
         defaultInputValue: string;
-        maxTagCount: number;
+        maxTagCount: number | "responsive";
         retainInputValue: boolean | {
             create?: boolean;
             blur?: boolean;
@@ -148,7 +148,7 @@ declare const InputTag: {
             type: import("vue").PropType<import("..").Size>;
         };
         maxTagCount: {
-            type: NumberConstructor;
+            type: import("vue").PropType<number | "responsive">;
             default: number;
         };
         retainInputValue: {
@@ -202,7 +202,7 @@ declare const InputTag: {
         disabledInput: boolean;
         uninjectFormItemContext: boolean;
         defaultInputValue: string;
-        maxTagCount: number;
+        maxTagCount: number | "responsive";
         retainInputValue: boolean | {
             create?: boolean;
             blur?: boolean;
@@ -247,7 +247,7 @@ declare const InputTag: {
         type: import("vue").PropType<import("..").Size>;
     };
     maxTagCount: {
-        type: NumberConstructor;
+        type: import("vue").PropType<number | "responsive">;
         default: number;
     };
     retainInputValue: {
@@ -311,7 +311,7 @@ declare const InputTag: {
     disabledInput: boolean;
     uninjectFormItemContext: boolean;
     defaultInputValue: string;
-    maxTagCount: number;
+    maxTagCount: number | "responsive";
     retainInputValue: boolean | {
         create?: boolean;
         blur?: boolean;

package/es/input-tag/input-tag.d.ts

@@ -35,7 +35,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: PropType<Size>;
     };
     maxTagCount: {
-        type: NumberConstructor;
+        type: PropType<number | "responsive">;
         default: number;
     };
     retainInputValue: {
@@ -113,7 +113,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: PropType<Size>;
     };
     maxTagCount: {
-        type: NumberConstructor;
+        type: PropType<number | "responsive">;
         default: number;
     };
     retainInputValue: {
@@ -161,7 +161,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     disabledInput: boolean;
     uninjectFormItemContext: boolean;
     defaultInputValue: string;
-    maxTagCount: number;
+    maxTagCount: number | "responsive";
     retainInputValue: boolean | {
         create?: boolean;
         blur?: boolean;