@sdata/web-vue 1.19.0 → 2.1.1

package/es/scrollbar/interface.d.ts

@@ -57,7 +57,7 @@ export type ScrollbarState = OverlayScrollbarState;
 export type ScrollbarPlugin = InstancePlugin;
 export interface ScrollbarProps {
     type?: ScrollbarType;
-    outerClass?: string | Record<string, any> | unknown[];
+    outerClass?: string | Record<string, unknown> | unknown[];
     outerStyle?: CSSProperties | CSSProperties[];
     paddingAbsolute?: OverlayScrollbarPartialOptions['paddingAbsolute'];
     showNativeOverlaidScrollbars?: OverlayScrollbarPartialOptions['showNativeOverlaidScrollbars'];

package/es/scrollbar/scrollbar.js

@@ -4,6 +4,7 @@ import { createElementBlock, createElementVNode, mergeProps, normalizeClass, nor
 //#region components/scrollbar/scrollbar.vue
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
 	return openBlock(), createElementBlock("div", {
+		ref: "outerRef",
 		class: normalizeClass(_ctx.cls),
 		style: normalizeStyle(_ctx.outerStyle)
 	}, [createElementVNode("div", mergeProps({
@@ -11,6 +12,6 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
 		class: `${_ctx.prefixCls}-container`
 	}, _ctx.$attrs), [renderSlot(_ctx.$slots, "default")], 16)], 6);
 }
-var scrollbar_default = /* @__PURE__ */ _plugin_vue_export_helper_default(scrollbar_vue_vue_type_script_lang_default, [["render", _sfc_render]]);
+var scrollbar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(scrollbar_vue_vue_type_script_lang_default, [["render", _sfc_render]]);
 //#endregion
 export { scrollbar_default as default };

package/es/scrollbar/scrollbar.vue.d.ts

@@ -50,7 +50,8 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
 }>, {
     prefixCls: string;
     cls: import("vue").ComputedRef<(string | Record<string, any> | unknown[] | undefined)[]>;
-    outerStyle: import("vue").ComputedRef<StyleValue>;
+    outerStyle: import("vue").ComputedRef<(StyleValue | Record<string, string>)[]>;
+    outerRef: import("vue").Ref<HTMLElement | undefined, HTMLElement | undefined>;
     containerRef: import("vue").Ref<HTMLElement | undefined, HTMLElement | undefined>;
     mergedOptions: import("vue").ComputedRef<{
         paddingAbsolute: boolean | undefined;

package/es/scrollbar/scrollbar.vue_vue_type_script_lang.js

@@ -1,8 +1,9 @@
-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 { isObject } from "../_utils/is.js";
 import { computed, defineComponent, onBeforeUnmount, onMounted, ref, watch } from "vue";
 import { OverlayScrollbars } from "overlayscrollbars";
+import { useResizeObserver } from "@vueuse/core";
 //#region components/scrollbar/scrollbar.vue?vue&type=script&lang.ts
 var scrollbar_vue_vue_type_script_lang_default = defineComponent({
 	name: "Scrollbar",
@@ -96,9 +97,50 @@ var scrollbar_vue_vue_type_script_lang_default = defineComponent({
 scroll: (_ev) => true },
 	setup(props, { emit }) {
 		const prefixCls = getPrefixCls("scrollbar");
+		const outerRef = ref();
 		const containerRef = ref();
 		const osInstanceRef = ref(null);
 		const removeExternalListenersRef = ref(null);
+		const autoSizeStyleRef = ref({});
+		const normalizeStyleValue = (styleValue) => {
+			if (!styleValue) return {};
+			if (Array.isArray(styleValue)) return styleValue.reduce((accumulator, item) => {
+				Object.assign(accumulator, normalizeStyleValue(item));
+				return accumulator;
+			}, {});
+			if (typeof styleValue === "string") return {};
+			return styleValue;
+		};
+		const normalizedOuterStyle = computed(() => normalizeStyleValue(props.outerStyle));
+		const parseComputedPx = (value) => {
+			if (!value || value === "none") return null;
+			const parsedValue = Number.parseFloat(value);
+			return Number.isFinite(parsedValue) ? parsedValue : null;
+		};
+		const updateAutoSizeStyle = () => {
+			var _resolveOSInstance;
+			const outerElement = outerRef.value;
+			const containerElement = containerRef.value;
+			if (!outerElement || !containerElement) {
+				autoSizeStyleRef.value = {};
+				return;
+			}
+			const nextStyle = {};
+			const styleObject = normalizedOuterStyle.value;
+			const computedStyle = window.getComputedStyle(outerElement);
+			const hasExplicitHeight = "height" in styleObject || "blockSize" in styleObject;
+			const hasExplicitWidth = "width" in styleObject || "inlineSize" in styleObject;
+			if (!hasExplicitHeight && ("maxHeight" in styleObject || "maxBlockSize" in styleObject)) {
+				const maxHeight = parseComputedPx(computedStyle.maxHeight);
+				if (maxHeight !== null) nextStyle.height = `${Math.min(containerElement.scrollHeight, maxHeight)}px`;
+			}
+			if (!hasExplicitWidth && ("maxWidth" in styleObject || "maxInlineSize" in styleObject)) {
+				const maxWidth = parseComputedPx(computedStyle.maxWidth);
+				if (maxWidth !== null) nextStyle.width = `${Math.min(containerElement.scrollWidth, maxWidth)}px`;
+			}
+			autoSizeStyleRef.value = nextStyle;
+			(_resolveOSInstance = resolveOSInstance()) === null || _resolveOSInstance === void 0 || _resolveOSInstance.update(true);
+		};
 		const resolveOSInstance = () => {
 			const osInstance = osInstanceRef.value;
 			if (!osInstance || osInstance.state().destroyed) return null;
@@ -156,7 +198,7 @@ scroll: (_ev) => true },
 			if (!osInstance || !eventListeners) return;
 			removeExternalListenersRef.value = osInstance.on(eventListeners);
 		};
-		const outerStyle = computed(() => props.outerStyle);
+		const outerStyle = computed(() => [props.outerStyle, autoSizeStyleRef.value]);
 		const cls = computed(() => [
 			`${prefixCls}`,
 			`${prefixCls}-type-${props.type}`,
@@ -171,6 +213,13 @@ scroll: (_ev) => true },
 		};
 		onMounted(() => {
 			initScrollbar();
+			updateAutoSizeStyle();
+		});
+		useResizeObserver(containerRef, () => {
+			updateAutoSizeStyle();
+		});
+		useResizeObserver(outerRef, () => {
+			updateAutoSizeStyle();
 		});
 		watch(mergedOptions, (options) => {
 			const osInstance = resolveOSInstance();
@@ -191,6 +240,7 @@ scroll: (_ev) => true },
 			prefixCls,
 			cls,
 			outerStyle,
+			outerRef,
 			containerRef,
 			mergedOptions,
 			resolveOSInstance,

package/es/scrollbar/style/index.css

@@ -26,9 +26,9 @@
 }
 .sd-scrollbar .os-scrollbar {
   --os-size: 6px;
-  --os-handle-bg: var(--color-neutral-4);
-  --os-handle-bg-hover: var(--color-neutral-5);
-  --os-handle-bg-active: var(--color-neutral-6);
+  --os-handle-bg: var(--sd-color-neutral-4);
+  --os-handle-bg-hover: var(--sd-color-neutral-5);
+  --os-handle-bg-active: var(--sd-color-neutral-6);
   --os-track-bg: transparent;
   --os-track-bg-hover: transparent;
   --os-track-bg-active: transparent;
@@ -47,20 +47,20 @@
 }
 .sd-scrollbar .sd-scrollbar-theme-track {
   --os-size: 6px;
-  --os-track-bg: var(--color-neutral-1);
-  --os-track-bg-hover: var(--color-neutral-1);
-  --os-track-bg-active: var(--color-neutral-1);
-  --os-track-border: 1px solid var(--color-neutral-3);
+  --os-track-bg: var(--sd-color-neutral-1);
+  --os-track-bg-hover: var(--sd-color-neutral-1);
+  --os-track-bg-active: var(--sd-color-neutral-1);
+  --os-track-border: 1px solid var(--sd-color-neutral-3);
   --os-handle-perpendicular-size: 6px;
   --os-padding-axis: -1px;
 }
 .sd-scrollbar.sd-scrollbar-type-embed .sd-scrollbar-theme-embed {
-  --os-handle-bg: var(--color-neutral-4);
-  --os-handle-bg-hover: var(--color-neutral-5);
-  --os-handle-bg-active: var(--color-neutral-6);
+  --os-handle-bg: var(--sd-color-neutral-4);
+  --os-handle-bg-hover: var(--sd-color-neutral-5);
+  --os-handle-bg-active: var(--sd-color-neutral-6);
 }
 .sd-scrollbar.sd-scrollbar-type-track .sd-scrollbar-theme-track {
-  --os-handle-bg: var(--color-neutral-4);
-  --os-handle-bg-hover: var(--color-neutral-5);
-  --os-handle-bg-active: var(--color-neutral-6);
+  --os-handle-bg: var(--sd-color-neutral-4);
+  --os-handle-bg-hover: var(--sd-color-neutral-5);
+  --os-handle-bg-active: var(--sd-color-neutral-6);
 }

package/es/sd-vue.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 Affix from "./affix/index.js";
 import Alert from "./alert/index.js";
 import anchor_link_default from "./anchor/anchor-link.js";
@@ -10,9 +10,6 @@ import button_group_default from "./button/button-group.js";
 import Button from "./button/index.js";
 import input_search_default from "./input/input-search.js";
 import Input from "./input/index.js";
-import checkbox_group_default from "./checkbox/checkbox-group.js";
-import Checkbox from "./checkbox/index.js";
-import option_default from "./select/option.js";
 import { addI18nMessages, getLocale, useLocale } from "./locale/index.js";
 import Empty from "./empty/index.js";
 import Scrollbar from "./scrollbar/index.js";
@@ -31,25 +28,26 @@ import dropdown_submenu_default from "./dropdown/dropdown-submenu.js";
 import Dropdown from "./dropdown/index.js";
 import breadcrumb_item_default from "./breadcrumb/breadcrumb-item.js";
 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";
 import Calendar from "./calendar/index.js";
 import card_grid_default from "./card/card-grid.js";
 import card_meta_default from "./card/card-meta.js";
 import Card from "./card/index.js";
 import carousel_item_default from "./carousel/carousel-item.js";
 import Carousel from "./carousel/index.js";
+import checkbox_group_default from "./checkbox/checkbox-group.js";
+import Checkbox from "./checkbox/index.js";
+import radio_group_default from "./radio/radio-group.js";
+import Radio from "./radio/index.js";
 import cascader_panel_default from "./cascader/cascader-panel.js";
+import Tag from "./tag/index.js";
+import InputTag from "./input-tag/index.js";
 import Cascader from "./cascader/index.js";
 import collapse_item_default from "./collapse/collapse-item.js";
 import Collapse from "./collapse/index.js";
 import InputNumber from "./input-number/index.js";
+import Select from "./select/index.js";
 import ColorPicker from "./color-picker/index.js";
 import Comment from "./comment/index.js";
 import ConfigProvider from "./config-provider/index.js";
@@ -109,6 +107,7 @@ import OverflowList from "./overflow-list/index.js";
 import PageHeader from "./page-header/index.js";
 import Popconfirm from "./popconfirm/index.js";
 import Progress from "./progress/index.js";
+import QrCode from "./qr-code/index.js";
 import Result from "./result/index.js";
 import Secret from "./secret/index.js";
 import line_default from "./skeleton/line.js";
@@ -133,6 +132,7 @@ import TagGroup from "./tag-group/index.js";
 import ThemeProvider from "./theme-provider/index.js";
 import item_default$1 from "./timeline/item.js";
 import Timeline from "./timeline/index.js";
+import Tour from "./tour/index.js";
 import paragraph_default from "./typography/paragraph.js";
 import text_default from "./typography/text.js";
 import title_default from "./typography/title.js";
@@ -171,6 +171,7 @@ var components = {
 	TagGroup,
 	Timeline,
 	Tooltip,
+	Tour,
 	AutoComplete,
 	Cascader,
 	Checkbox,
@@ -200,6 +201,7 @@ var components = {
 	Notification,
 	Popconfirm,
 	Progress,
+	QrCode,
 	Result,
 	Spin,
 	Skeleton,
@@ -272,8 +274,6 @@ var SDVue = _objectSpread2(_objectSpread2({}, components), {}, {
 	MenuItemGroup: item_group_default,
 	SubMenu: sub_menu_default,
 	RadioGroup: radio_group_default,
-	Option: option_default,
-	Optgroup: optgroup_default,
 	SkeletonLine: line_default,
 	SkeletonShape: shape_default,
 	Countdown: countdown_default,
@@ -289,6 +289,7 @@ var SDVue = _objectSpread2(_objectSpread2({}, components), {}, {
 	TypographyParagraph: paragraph_default,
 	TypographyTitle: title_default,
 	TypographyText: text_default,
+	Tour,
 	install,
 	addI18nMessages,
 	useLocale,

package/es/secret/secret.vue_vue_type_script_setup_true_lang.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 { getPrefixCls } from "../_utils/global-config.js";
 import IconEye from "../icon/icon-eye/index.js";
 import IconEyeInvisible from "../icon/icon-eye-invisible/index.js";
@@ -8,9 +8,9 @@ import Copy from "../copy/index.js";
 import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeModels, normalizeClass, openBlock, toDisplayString, unref, useModel, withCtx } from "vue";
 //#region components/secret/secret.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["aria-label", "aria-pressed"];
-var secret_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent(_objectSpread2(_objectSpread2({}, { name: "Secret" }), {}, {
+var secret_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent(_objectSpread2(_objectSpread2({}, { name: "Secret" }), {}, {
 	__name: "secret",
-	props: /* @__PURE__ */ mergeModels({
+	props: /*@__PURE__*/ mergeModels({
 		text: {},
 		hiddenText: { default: "********" },
 		showCopy: {

package/es/secret/style/index.css

@@ -30,7 +30,7 @@
 }
 .sd-secret-placeholder {
   overflow: hidden;
-  color: var(--color-text-3);
+  color: var(--sd-color-text-3);
   white-space: nowrap;
   text-overflow: ellipsis;
 }
@@ -40,15 +40,15 @@
   align-items: center;
   justify-content: center;
   padding: 0;
-  color: var(--color-text-3);
+  color: var(--sd-color-text-3);
   background: transparent;
   border: 0;
-  border-radius: var(--border-radius-small);
+  border-radius: var(--sd-border-radius-small);
   cursor: pointer;
 }
 .sd-secret-trigger .sd-icon {
   font-size: 16px;
 }
 .sd-secret-trigger:hover {
-  color: var(--color-text-1);
+  color: var(--sd-color-text-1);
 }

package/es/select/context.d.ts

@@ -1,5 +1,5 @@
 import type { InjectionKey } from 'vue';
-import type { FilterOption, SelectOptionInfo } from './interface';
+import type { FilterOption } from './interface';
 export interface SelectContext {
     multiple?: boolean;
     valueKey?: string;
@@ -10,8 +10,5 @@ export interface SelectContext {
     activeKey: string | undefined;
     onSelect: (key: string, ev: Event) => void;
     setActiveKey: (key?: string) => void;
-    getNextSlotOptionIndex: () => number;
-    addSlotOptionInfo: (id: number, optionInfo: SelectOptionInfo) => void;
-    removeSlotOptionInfo: (id: number) => void;
 }
 export declare const selectInjectionKey: InjectionKey<SelectContext>;

package/es/select/hooks/use-options.d.ts

@@ -22,14 +22,11 @@ export declare const useOptions: ({ options, extraOptions, inputValue, filterOpt
         };
         key: string;
         index?: number | undefined;
-        origin: "slot" | "options" | "extraOptions";
+        origin: "options" | "extraOptions";
         value: import("../interface").SelectOptionValue;
         label: string;
         disabled?: boolean | undefined;
         tagProps?: Record<string, unknown> | undefined;
     }[]>;
     enabledOptionKeys: import("vue").ComputedRef<string[]>;
-    getNextSlotOptionIndex: () => number;
-    addSlotOptionInfo: (id: number, optionInfo: SelectOptionInfo) => void;
-    removeSlotOptionInfo: (id: number) => void;
 };

package/es/select/hooks/use-options.js

@@ -1,5 +1,4 @@
-import { _objectSpread2 } from "../../_virtual/_@oxc-project_runtime@0.130.0/helpers/objectSpread2.js";
-import { isNumber } from "../../_utils/is.js";
+import { _objectSpread2 } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/objectSpread2.js";
 import { getOptionInfos, getValidOptions, isValidOption } from "../utils.js";
 import { computed, reactive, ref, watch } from "vue";
 //#region components/select/hooks/use-options.ts
@@ -12,11 +11,6 @@ var DEFAULT_FIELD_NAMES = {
 };
 var useOptions = ({ options, extraOptions, inputValue, filterOption, showExtraOptions, valueKey, fieldNames }) => {
 	const mergedFieldNames = computed(() => _objectSpread2(_objectSpread2({}, DEFAULT_FIELD_NAMES), fieldNames === null || fieldNames === void 0 ? void 0 : fieldNames.value));
-	const slotOptionInfoMap = reactive(/* @__PURE__ */ new Map());
-	const sortedSlotOptionInfos = computed(() => Array.from(slotOptionInfoMap.values()).sort((a, b) => {
-		if (isNumber(a.index) && isNumber(b.index)) return a.index - b.index;
-		return 0;
-	}));
 	const propOptionData = computed(() => {
 		var _options$value, _valueKey$value;
 		const optionInfoMap = /* @__PURE__ */ new Map();
@@ -45,15 +39,11 @@ var useOptions = ({ options, extraOptions, inputValue, filterOption, showExtraOp
 	});
 	const optionInfoMap = reactive(/* @__PURE__ */ new Map());
 	watch([
-		sortedSlotOptionInfos,
 		options !== null && options !== void 0 ? options : ref([]),
 		extraOptions !== null && extraOptions !== void 0 ? extraOptions : ref([]),
 		valueKey !== null && valueKey !== void 0 ? valueKey : ref("value")
 	], () => {
 		optionInfoMap.clear();
-		sortedSlotOptionInfos.value.forEach((info, index) => {
-			optionInfoMap.set(info.key, _objectSpread2(_objectSpread2({}, info), {}, { index }));
-		});
 		propOptionData.value.optionInfoMap.forEach((info) => {
 			if (!optionInfoMap.has(info.key)) {
 				info.index = optionInfoMap.size;
@@ -89,22 +79,11 @@ var useOptions = ({ options, extraOptions, inputValue, filterOption, showExtraOp
 			filterOption: filterOption === null || filterOption === void 0 ? void 0 : filterOption.value
 		});
 	}));
-	const enabledOptionKeys = computed(() => validOptionInfos.value.filter((optionInfo) => !optionInfo.disabled).map((info) => info.key));
-	const getNextSlotOptionIndex = () => slotOptionInfoMap.size;
-	const addSlotOptionInfo = (id, optionInfo) => {
-		slotOptionInfoMap.set(id, optionInfo);
-	};
-	const removeSlotOptionInfo = (id) => {
-		slotOptionInfoMap.delete(id);
-	};
 	return {
 		validOptions,
 		optionInfoMap,
 		validOptionInfos,
-		enabledOptionKeys,
-		getNextSlotOptionIndex,
-		addSlotOptionInfo,
-		removeSlotOptionInfo
+		enabledOptionKeys: computed(() => validOptionInfos.value.filter((optionInfo) => !optionInfo.disabled).map((info) => info.key))
 	};
 };
 //#endregion

package/es/select/hooks/use-select.d.ts

@@ -35,7 +35,7 @@ export declare const useSelect: ({ multiple, options, extraOptions, inputValue,
         };
         key: string;
         index?: number | undefined;
-        origin: "slot" | "options" | "extraOptions";
+        origin: "options" | "extraOptions";
         value: import("../interface").SelectOptionValue;
         label: string;
         disabled?: boolean | undefined;
@@ -44,8 +44,6 @@ export declare const useSelect: ({ multiple, options, extraOptions, inputValue,
     enabledOptionKeys: import("vue").ComputedRef<string[]>;
     activeKey: Ref<string | undefined, string | undefined>;
     setActiveKey: (key?: string) => void;
-    addSlotOptionInfo: (id: number, optionInfo: import("../interface").SelectOptionInfo) => void;
-    removeSlotOptionInfo: (id: number) => void;
     getNextActiveKey: (direction: "up" | "down") => string | undefined;
     scrollIntoView: (key: string) => void;
     handleKeyDown: (event: KeyboardEvent) => void;

package/es/select/hooks/use-select.js

@@ -5,7 +5,7 @@ import { useOptions } from "./use-options.js";
 import { nextTick, provide, reactive, ref, watch } from "vue";
 //#region components/select/hooks/use-select.ts
 var useSelect = ({ multiple, options, extraOptions, inputValue, filterOption, showExtraOptions, component, valueKey, fieldNames, loading, popupVisible, valueKeys, dropdownRef, optionRefs, virtualListRef, onSelect, onPopupVisibleChange, enterToOpen = true, defaultActiveFirstOption }) => {
-	const { validOptions, optionInfoMap, validOptionInfos, enabledOptionKeys, getNextSlotOptionIndex, addSlotOptionInfo, removeSlotOptionInfo } = useOptions({
+	const { validOptions, optionInfoMap, validOptionInfos, enabledOptionKeys } = useOptions({
 		options,
 		extraOptions,
 		inputValue,
@@ -106,10 +106,7 @@ var useSelect = ({ multiple, options, extraOptions, inputValue, filterOption, sh
 		valueKeys,
 		activeKey,
 		setActiveKey,
-		onSelect,
-		getNextSlotOptionIndex,
-		addSlotOptionInfo,
-		removeSlotOptionInfo
+		onSelect
 	}));
 	return {
 		validOptions,
@@ -118,8 +115,6 @@ var useSelect = ({ multiple, options, extraOptions, inputValue, filterOption, sh
 		enabledOptionKeys,
 		activeKey,
 		setActiveKey,
-		addSlotOptionInfo,
-		removeSlotOptionInfo,
 		getNextActiveKey,
 		scrollIntoView,
 		handleKeyDown