@sdata/web-vue 1.19.0 → 2.1.1

package/es/select/select.js

@@ -1,5 +1,5 @@
 import { useFormItem } from "../_hooks/use-form-item.js";
-import { _objectSpread2 } from "../_virtual/_@oxc-project_runtime@0.130.0/helpers/objectSpread2.js";
+import { _objectSpread2 } from "../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/objectSpread2.js";
 import { getPrefixCls } from "../_utils/global-config.js";
 import { isArray, isBoolean, isEmptyObject, isFunction, isNull, isNumber, isObject, isString, isUndefined } from "../_utils/is.js";
 import virtual_list_default from "../_components/virtual-list/index.js";
@@ -8,11 +8,10 @@ import { useDropdownVirtualListProps } from "../_hooks/use-dropdown-virtual-list
 import { resolveDropdownVirtualListProps } from "../_utils/virtual-dropdown.js";
 import { getKeyFromValue, hasEmptyStringKey, isGroupOptionInfo, isValidOption } from "./utils.js";
 import { useSelect } from "./hooks/use-select.js";
-import option_default from "./option.js";
 import select_dropdown_default from "./select-dropdown.js";
 import Trigger from "../trigger/index.js";
 import { useTrigger } from "../_hooks/use-trigger.js";
-import optgroup_default from "./optgroup.js";
+import Checkbox from "../checkbox/index.js";
 import select_view_default from "../_components/select-view/select-view.js";
 import { useAllowSearch } from "../_hooks/use-allow-search.js";
 import { debounce } from "../_utils/debounce.js";
@@ -33,7 +32,8 @@ var select_default = /* @__PURE__ */ defineComponent({
 	name: "Select",
 	components: {
 		Trigger,
-		SelectView: select_view_default
+		SelectView: select_view_default,
+		Checkbox
 	},
 	inheritAttrs: false,
 	props: {
@@ -400,7 +400,7 @@ var select_default = /* @__PURE__ */ defineComponent({
 		const handleDropdownReachBottom = (event) => {
 			emit("dropdownReachBottom", event);
 		};
-		const { validOptions, optionInfoMap, validOptionInfos, enabledOptionKeys, handleKeyDown } = useSelect({
+		const { validOptions, optionInfoMap, validOptionInfos, enabledOptionKeys, activeKey, setActiveKey, handleKeyDown } = useSelect({
 			multiple,
 			options,
 			extraOptions,
@@ -443,29 +443,53 @@ var select_default = /* @__PURE__ */ defineComponent({
 			};
 			return () => optionInfo.label;
 		};
+		const optionPrefixCls = getPrefixCls("select-option");
+		const groupPrefixCls = getPrefixCls("select-group");
 		const renderOption = (optionInfo) => {
-			if (isGroupOptionInfo(optionInfo)) {
-				let _slot;
-				return createVNode(optgroup_default, {
-					"key": optionInfo.key,
-					"label": optionInfo.label
-				}, _isSlot(_slot = optionInfo.options.map((child) => renderOption(child))) ? _slot : { default: () => [_slot] });
-			}
+			let _slot;
+			if (isGroupOptionInfo(optionInfo)) return createVNode("li", {
+				"key": optionInfo.key,
+				"class": groupPrefixCls
+			}, [createVNode("div", { "class": `${groupPrefixCls}-title` }, [optionInfo.label]), optionInfo.options.map((child) => renderOption(child))]);
 			if (!isValidOption(optionInfo, {
 				inputValue: computedInputValue.value,
 				filterOption: filterOption.value
 			})) return null;
-			return createVNode(option_default, {
-				"ref": (refInstance) => {
-					const element = refInstance === null || refInstance === void 0 ? void 0 : refInstance.$el;
+			const isSelected = computedValueKeys.value.includes(optionInfo.key);
+			const isActive = activeKey.value === optionInfo.key;
+			const cls = [optionPrefixCls, {
+				[`${optionPrefixCls}-disabled`]: optionInfo.disabled,
+				[`${optionPrefixCls}-selected`]: isSelected,
+				[`${optionPrefixCls}-active`]: isActive,
+				[`${optionPrefixCls}-multiple`]: props.multiple
+			}];
+			const handleClick = (ev) => {
+				if (!optionInfo.disabled) handleSelect(optionInfo.key, ev);
+			};
+			const handleMouseEnter = () => {
+				if (!optionInfo.disabled) setActiveKey(optionInfo.key);
+			};
+			const handleMouseLeave = () => {
+				if (!optionInfo.disabled) setActiveKey();
+			};
+			const Tag = component.value;
+			return createVNode(Tag, {
+				"ref": (el) => {
+					var _el$$el;
+					const element = (_el$$el = el === null || el === void 0 ? void 0 : el.$el) !== null && _el$$el !== void 0 ? _el$$el : el;
 					if (element instanceof HTMLElement) optionRefs.value[optionInfo.key] = element;
 				},
 				"key": optionInfo.key,
-				"value": optionInfo.value,
-				"label": optionInfo.label,
+				"class": cls,
+				"onClick": handleClick,
+				"onMouseenter": handleMouseEnter,
+				"onMouseleave": handleMouseLeave
+			}, { default: () => [props.multiple ? createVNode(Checkbox, {
+				"class": `${optionPrefixCls}-checkbox`,
+				"modelValue": isSelected,
 				"disabled": optionInfo.disabled,
-				"internal": true
-			}, { default: getOptionContentFunc(optionInfo) });
+				"uninjectGroupContext": true
+			}, _isSlot(_slot = getOptionContentFunc(optionInfo)()) ? _slot : { default: () => [_slot] }) : createVNode("span", { "class": `${optionPrefixCls}-content` }, [getOptionContentFunc(optionInfo)()])] });
 		};
 		const renderDropDown = () => createVNode(select_dropdown_default, {
 			"ref": dropdownRef,
@@ -478,10 +502,7 @@ var select_default = /* @__PURE__ */ defineComponent({
 			"onScroll": handleDropdownScroll,
 			"onReachBottom": handleDropdownReachBottom
 		}, {
-			"default": () => {
-				var _slots$default, _slots$default2;
-				return [...(_slots$default = (_slots$default2 = slots.default) === null || _slots$default2 === void 0 ? void 0 : _slots$default2.call(slots)) !== null && _slots$default !== void 0 ? _slots$default : [], ...validOptions.value.map(renderOption)];
-			},
+			"default": () => validOptions.value.map(renderOption),
 			"virtual-list": () => createVNode(virtual_list_default, mergeProps(resolvedVirtualListProps.value, {
 				"ref": virtualListRef,
 				"items": validOptions.value
@@ -551,11 +572,13 @@ var select_default = /* @__PURE__ */ defineComponent({
 					"placeholder": props.placeholder,
 					"bordered": props.bordered,
 					"size": mergedSize.value,
-					"tagNowrap": props.tagNowrap,
-					"onInputValueChange": handleInputValueChange,
+					"tagNowrap": props.tagNowrap
+				}, {
+					onInputValueChange: handleInputValueChange,
+					onKeydown: handleKeyDown
+				}, {
 					"onRemove": handleRemove,
-					"onClear": handleClear,
-					"onKeydown": handleKeyDown
+					"onClear": handleClear
 				}, attrs), {
 					"label": renderLabel,
 					"tag": renderTag,

package/es/select/style/index.css

@@ -25,9 +25,9 @@
 .sd-select-dropdown {
   box-sizing: border-box;
   padding: 4px 0;
-  background-color: var(--color-bg-popup);
-  border: 1px solid var(--color-fill-3);
-  border-radius: var(--border-radius-medium);
+  background-color: var(--sd-color-bg-popup);
+  border: 1px solid var(--sd-color-fill-3);
+  border-radius: var(--sd-border-radius-medium);
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
 }
 .sd-select-dropdown .sd-select-dropdown-loading {
@@ -54,11 +54,11 @@
   box-sizing: border-box;
   width: 100%;
   padding: 0 12px;
-  color: var(--color-text-1);
+  color: var(--sd-color-text-1);
   font-size: 14px;
   line-height: 36px;
   text-align: left;
-  background-color: var(--color-bg-popup);
+  background-color: var(--sd-color-bg-popup);
   cursor: pointer;
 }
 .sd-select-dropdown .sd-select-option-content {
@@ -78,18 +78,18 @@
   justify-content: space-between;
 }
 .sd-select-dropdown .sd-select-option-selected {
-  color: var(--color-text-1);
+  color: var(--sd-color-text-1);
   font-weight: 500;
-  background-color: var(--color-bg-popup);
+  background-color: var(--sd-color-bg-popup);
 }
 .sd-select-dropdown .sd-select-option-active, .sd-select-dropdown .sd-select-option:not(.sd-select-dropdown .sd-select-option-disabled):hover {
-  color: var(--color-text-1);
-  background-color: var(--color-fill-2);
+  color: var(--sd-color-text-1);
+  background-color: var(--sd-color-fill-2);
   transition: all 0.1s cubic-bezier(0, 0, 1, 1);
 }
 .sd-select-dropdown .sd-select-option-disabled {
-  color: var(--color-text-4);
-  background-color: var(--color-bg-popup);
+  color: var(--sd-color-text-4);
+  background-color: var(--sd-color-bg-popup);
   cursor: not-allowed;
 }
 .sd-select-dropdown .sd-select-option-icon {
@@ -107,7 +107,7 @@
   width: 100%;
   margin-top: 8px;
   padding: 0 12px;
-  color: var(--color-text-3);
+  color: var(--sd-color-text-3);
   font-size: 12px;
   line-height: 20px;
   cursor: default;
@@ -119,11 +119,11 @@
   padding-top: 0;
 }
 .sd-select-dropdown-header {
-  border-bottom: 1px solid var(--color-fill-3);
+  border-bottom: 1px solid var(--sd-color-fill-3);
 }
 .sd-select-dropdown.sd-select-dropdown-has-footer {
   padding-bottom: 0;
 }
 .sd-select-dropdown-footer {
-  border-top: 1px solid var(--color-fill-3);
+  border-top: 1px solid var(--sd-color-fill-3);
 }

package/es/select/utils.d.ts

@@ -7,7 +7,7 @@ export declare const hasEmptyStringKey: (optionInfoMap: Map<string, SelectOption
 export declare const createOptionInfo: (option: string | number | SelectOptionData, { valueKey, fieldNames, origin, index, }: {
     valueKey: string;
     fieldNames: Required<SelectFieldNames>;
-    origin: "slot" | "options" | "extraOptions";
+    origin: "options" | "extraOptions";
     index?: number;
 }) => SelectOptionInfo;
 export declare const getOptionInfos: (options: SelectOption[], { valueKey, fieldNames, origin, optionInfoMap, }: {

package/es/select/utils.js

@@ -1,4 +1,4 @@
-import { _objectSpread2 } from "../_virtual/_@oxc-project_runtime@0.130.0/helpers/objectSpread2.js";
+import { _objectSpread2 } from "../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/objectSpread2.js";
 import { isBoolean, isFunction, isNumber, isObject, isString } from "../_utils/is.js";
 //#region components/select/utils.ts
 var isGroupOption = (option, fieldNames) => {

package/es/skeleton/line.js

@@ -13,6 +13,6 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
 		}, null, 6)], 2);
 	}), 128);
 }
-var line_default = /* @__PURE__ */ _plugin_vue_export_helper_default(line_vue_vue_type_script_lang_default, [["render", _sfc_render]]);
+var line_default = /*#__PURE__*/ _plugin_vue_export_helper_default(line_vue_vue_type_script_lang_default, [["render", _sfc_render]]);
 //#endregion
 export { line_default as default };

package/es/skeleton/shape.js

@@ -5,6 +5,6 @@ import { createElementBlock, normalizeClass, openBlock } from "vue";
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
 	return openBlock(), createElementBlock("div", { class: normalizeClass(_ctx.cls) }, null, 2);
 }
-var shape_default = /* @__PURE__ */ _plugin_vue_export_helper_default(shape_vue_vue_type_script_lang_default, [["render", _sfc_render]]);
+var shape_default = /*#__PURE__*/ _plugin_vue_export_helper_default(shape_vue_vue_type_script_lang_default, [["render", _sfc_render]]);
 //#endregion
 export { shape_default as default };

package/es/skeleton/skeleton.js

@@ -5,6 +5,6 @@ import { createElementBlock, normalizeClass, openBlock, renderSlot } from "vue";
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
 	return openBlock(), createElementBlock("div", { class: normalizeClass(_ctx.cls) }, [_ctx.loading ? renderSlot(_ctx.$slots, "default", { key: 0 }) : renderSlot(_ctx.$slots, "content", { key: 1 })], 2);
 }
-var skeleton_default = /* @__PURE__ */ _plugin_vue_export_helper_default(skeleton_vue_vue_type_script_lang_default, [["render", _sfc_render]]);
+var skeleton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(skeleton_vue_vue_type_script_lang_default, [["render", _sfc_render]]);
 //#endregion
 export { skeleton_default as default };

package/es/skeleton/style/index.css

@@ -18,8 +18,8 @@
 .sd-skeleton-shape {
   width: 48px;
   height: 48px;
-  background-color: var(--color-fill-2);
-  border-radius: var(--border-radius-small);
+  background-color: var(--sd-color-fill-2);
+  border-radius: var(--sd-border-radius-small);
 }
 .sd-skeleton-shape-circle {
   border-radius: 50%;
@@ -39,14 +39,14 @@
 }
 .sd-skeleton-line-row {
   height: 16px;
-  background-color: var(--color-fill-2);
+  background-color: var(--sd-color-fill-2);
 }
 .sd-skeleton-line-row:not(:last-child) {
   margin-bottom: 16px;
 }
 .sd-skeleton-animation .sd-skeleton-shape,
 .sd-skeleton-animation .sd-skeleton-line-row {
-  background: linear-gradient(90deg, var(--color-fill-2) 25%, var(--color-fill-3) 37%, var(--color-fill-2) 63%);
+  background: linear-gradient(90deg, var(--sd-color-fill-2) 25%, var(--sd-color-fill-3) 37%, var(--sd-color-fill-2) 63%);
   background-size: 400% 100%;
   animation: sd-skeleton-circle 1.5s cubic-bezier(0, 0, 1, 1) infinite;
 }