@sdata/web-vue 1.7.0 → 1.7.1

package/es/_hooks/use-component-ref.d.ts

@@ -1,5 +1,5 @@
 import { ComponentPublicInstance } from 'vue';
 export declare const useComponentRef: (name: string) => {
-    componentRef: import("vue").Ref<ComponentPublicInstance | HTMLElement | undefined, ComponentPublicInstance | HTMLElement | undefined>;
+    componentRef: import("vue").Ref<HTMLElement | ComponentPublicInstance | undefined, HTMLElement | ComponentPublicInstance | undefined>;
     elementRef: import("vue").Ref<any, any>;
 };

package/es/_hooks/use-teleport-container.d.ts

@@ -1,10 +1,10 @@
 import { Ref } from 'vue';
 export declare const useTeleportContainer: ({ popupContainer, visible, defaultContainer, documentContainer, }: {
-    popupContainer: Ref<string | HTMLElement | undefined>;
+    popupContainer: Ref<string | HTMLElement | null | undefined>;
     visible: Ref<boolean>;
     defaultContainer?: string;
     documentContainer?: boolean;
 }) => {
-    teleportContainer: Ref<string | HTMLElement | undefined, string | HTMLElement | undefined>;
+    teleportContainer: Ref<string | HTMLElement | null | undefined, string | HTMLElement | null | undefined>;
     containerRef: Ref<HTMLElement | undefined, HTMLElement | undefined>;
 };

package/es/_hooks/use-teleport-container.js

@@ -5,15 +5,18 @@ var useTeleportContainer = ({ popupContainer, visible, defaultContainer = "body"
 	const teleportContainer = ref(popupContainer.value);
 	const containerRef = ref();
 	const getContainer = () => {
-		const element = getElement(popupContainer.value);
-		const _teleportContainer = element ? popupContainer.value : defaultContainer;
+		var _popupContainer$value;
+		const resolvedPopupContainer = (_popupContainer$value = popupContainer.value) !== null && _popupContainer$value !== void 0 ? _popupContainer$value : void 0;
+		const element = getElement(resolvedPopupContainer);
+		const _teleportContainer = element ? resolvedPopupContainer : defaultContainer;
 		const _containerElement = element !== null && element !== void 0 ? element : documentContainer ? document.documentElement : getElement(defaultContainer);
 		if (_teleportContainer !== teleportContainer.value) teleportContainer.value = _teleportContainer;
 		if (_containerElement !== containerRef.value) containerRef.value = _containerElement;
 	};
 	onMounted(() => getContainer());
-	watch(visible, (visible) => {
-		if (teleportContainer.value !== popupContainer.value && visible) getContainer();
+	watch([popupContainer, visible], ([nextPopupContainer, nextVisible]) => {
+		if (!nextVisible) return;
+		if (teleportContainer.value !== nextPopupContainer) getContainer();
 	});
 	return {
 		teleportContainer,

package/es/config-provider/context.d.ts

@@ -1,4 +1,4 @@
-import { InjectionKey, Slots } from 'vue';
+import { InjectionKey, Ref, Slots } from 'vue';
 import { Size } from '../_utils/constant';
 import { SDLang } from '../locale/interface';
 import { SDThemeNormalized } from './theme';
@@ -14,3 +14,4 @@ export interface ConfigProvider {
     theme?: SDThemeNormalized;
 }
 export declare const configProviderInjectionKey: InjectionKey<ConfigProvider>;
+export declare const themePopupContainerInjectionKey: InjectionKey<Ref<HTMLElement | null>>;

package/es/config-provider/context.js

@@ -1,4 +1,5 @@
 //#region components/config-provider/context.ts
 var configProviderInjectionKey = Symbol("SDConfigProvider");
+var themePopupContainerInjectionKey = Symbol("SDThemePopupContainer");
 //#endregion
-export { configProviderInjectionKey };
+export { configProviderInjectionKey, themePopupContainerInjectionKey };

package/es/config-provider/style/css.js

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

package/es/config-provider/style/index.css

@@ -0,0 +1,29 @@
+/******** borderSize *******/
+/******** borderStyle *******/
+/******** radius *******/
+/******** shadow distance *******/
+/******** size *******/
+/******** spacing *******/
+/******** shadow *******/
+/******** opacity *******/
+/******** fontSize *******/
+/******** fontWeight ********/
+/******** Primary *******/
+/******** success *******/
+/******** warning *******/
+/******** danger *******/
+/******** link *******/
+/******** radius *******/
+/********* icon hover *********/
+.sd-theme-provider {
+  min-width: 0;
+}
+
+.sd-theme-popup-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 0;
+  pointer-events: none;
+}

package/es/config-provider/style/index.d.ts

@@ -1 +1 @@
-export {};
+import './index.scss';

package/es/config-provider/style/index.js

@@ -0,0 +1 @@
+import "./index.scss";

package/es/config-provider/style/index.scss

@@ -0,0 +1,17 @@
+@use '@style/theme/index.scss' as theme;
+@use 'sass:string';
+
+$theme-prefix-cls: string.unquote('#{theme.$prefix}-theme');
+
+.#{$theme-prefix-cls}-provider {
+  min-width: 0;
+}
+
+.#{$theme-prefix-cls}-popup-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 0;
+  pointer-events: none;
+}

package/es/config-provider/theme-provider.js

@@ -1,7 +1,5 @@
-import _plugin_vue_export_helper_default from "../_virtual/_plugin-vue_export-helper.js";
 import theme_provider_vue_vue_type_script_setup_true_lang_default from "./theme-provider.vue_vue_type_script_setup_true_lang.js";
-/* empty css                                                               */
 //#region components/config-provider/theme-provider.vue
-var theme_provider_default = /* @__PURE__ */ _plugin_vue_export_helper_default(theme_provider_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-a0a91a8a"]]);
+var theme_provider_default = theme_provider_vue_vue_type_script_setup_true_lang_default;
 //#endregion
 export { theme_provider_default as default };

package/es/config-provider/theme-provider.vue_vue_type_script_setup_true_lang.js

@@ -1,6 +1,9 @@
+import { themePopupContainerInjectionKey } from "./context.js";
 import { _objectSpread2 } from "../_virtual/_@oxc-project_runtime@0.124.0/helpers/objectSpread2.js";
+import { getPrefixCls } from "../_utils/global-config.js";
+import usePopupManager from "../_hooks/use-popup-manager.js";
 import { applyThemeCSSVariables, clearThemeCSSVariables, normalizeTheme } from "./theme.js";
-import { computed, createBlock, defineComponent, onBeforeUnmount, openBlock, renderSlot, resolveDynamicComponent, shallowRef, watch, withCtx } from "vue";
+import { computed, createBlock, defineComponent, normalizeClass, onBeforeUnmount, openBlock, provide, renderSlot, resolveDynamicComponent, shallowRef, unref, watch, withCtx } from "vue";
 //#region components/config-provider/theme-provider.vue?vue&type=script&setup=true&lang.ts
 var theme_provider_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent(_objectSpread2(_objectSpread2({}, { name: "ThemeProvider" }), {}, {
 	__name: "theme-provider",
@@ -16,14 +19,48 @@ var theme_provider_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 	setup(__props) {
 		const props = __props;
 		const rootElement = shallowRef(null);
+		const popupContainer = shallowRef(null);
+		provide(themePopupContainerInjectionKey, popupContainer);
 		const normalizedTheme = computed(() => normalizeTheme(props.theme));
 		const usesLocalThemeContainer = computed(() => {
 			if (props.global) return false;
 			return Boolean(props.themeMode) || Object.keys(normalizedTheme.value.tokens).length > 0 || Object.keys(normalizedTheme.value.components).length > 0;
 		});
+		const themePopupContainerPrefixCls = getPrefixCls("theme-popup-container");
+		const { zIndex } = usePopupManager("popup", { visible: usesLocalThemeContainer });
 		let appliedThemeKeys = /* @__PURE__ */ new Set();
+		let appliedPopupThemeKeys = /* @__PURE__ */ new Set();
 		let activeTarget = null;
 		let previousGlobalThemeMode;
+		function cleanupPopupContainer() {
+			if (!popupContainer.value) return;
+			clearThemeCSSVariables(popupContainer.value, appliedPopupThemeKeys);
+			appliedPopupThemeKeys = /* @__PURE__ */ new Set();
+			popupContainer.value.removeAttribute("sd-theme");
+			if (popupContainer.value.parentNode) popupContainer.value.parentNode.removeChild(popupContainer.value);
+			popupContainer.value = null;
+		}
+		function ensurePopupContainer() {
+			if (popupContainer.value || typeof document === "undefined") return;
+			const containerElement = document.createElement("div");
+			containerElement.className = themePopupContainerPrefixCls;
+			document.body.appendChild(containerElement);
+			popupContainer.value = containerElement;
+		}
+		function syncPopupContainerTheme(target) {
+			var _target$closest;
+			if (props.global || !target || !usesLocalThemeContainer.value) {
+				cleanupPopupContainer();
+				return;
+			}
+			ensurePopupContainer();
+			if (!popupContainer.value) return;
+			popupContainer.value.style.zIndex = String(zIndex.value);
+			appliedPopupThemeKeys = applyThemeCSSVariables(popupContainer.value, normalizedTheme.value, appliedPopupThemeKeys);
+			const inheritedThemeMode = (_target$closest = target.closest("[sd-theme]")) === null || _target$closest === void 0 ? void 0 : _target$closest.getAttribute("sd-theme");
+			if (inheritedThemeMode) popupContainer.value.setAttribute("sd-theme", inheritedThemeMode);
+			else popupContainer.value.removeAttribute("sd-theme");
+		}
 		function resolveThemeTarget() {
 			if (typeof document === "undefined") return null;
 			if (props.global) return document.body || document.documentElement;
@@ -68,6 +105,7 @@ var theme_provider_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 			const nextTarget = resolveThemeTarget();
 			if (!nextTarget) {
 				resetActiveTarget();
+				cleanupPopupContainer();
 				return;
 			}
 			if (activeTarget && activeTarget !== nextTarget) cleanupTarget(activeTarget);
@@ -75,6 +113,7 @@ var theme_provider_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 			appliedThemeKeys = applyThemeCSSVariables(nextTarget, normalizedTheme.value, appliedThemeKeys);
 			restoreThemeMode(nextTarget);
 			activeTarget = nextTarget;
+			syncPopupContainerTheme(nextTarget);
 		}
 		watch([
 			normalizedTheme,
@@ -89,6 +128,7 @@ var theme_provider_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 		});
 		onBeforeUnmount(() => {
 			cleanupTarget(activeTarget);
+			cleanupPopupContainer();
 			activeTarget = null;
 		});
 		return (_ctx, _cache) => {
@@ -96,11 +136,11 @@ var theme_provider_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 				key: 0,
 				ref_key: "rootElement",
 				ref: rootElement,
-				class: "sd-theme-provider"
+				class: normalizeClass(unref(getPrefixCls)("theme-provider"))
 			}, {
-				default: withCtx(() => [renderSlot(_ctx.$slots, "default", {}, void 0, true)]),
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
 				_: 3
-			}, 512)) : renderSlot(_ctx.$slots, "default", { key: 1 }, void 0, true);
+			}, 8, ["class"])) : renderSlot(_ctx.$slots, "default", { key: 1 });
 		};
 	}
 }));

package/es/drawer/drawer.vue.d.ts

@@ -108,7 +108,7 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     handleClose: () => void;
     handleMask: (e: Event) => void;
     isFixed: import("vue").ComputedRef<boolean>;
-    teleportContainer: import("vue").Ref<string | HTMLElement | undefined, string | HTMLElement | undefined>;
+    teleportContainer: import("vue").Ref<string | HTMLElement | null | undefined, string | HTMLElement | null | undefined>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     'update:visible': (_visible: boolean) => true;
     ok: (_e: Event) => true;

package/es/drawer/index.d.ts

@@ -115,7 +115,7 @@ declare const Drawer: {
         handleClose: () => void;
         handleMask: (e: Event) => void;
         isFixed: import("vue").ComputedRef<boolean>;
-        teleportContainer: import("vue").Ref<string | HTMLElement | undefined, string | HTMLElement | undefined>;
+        teleportContainer: import("vue").Ref<string | HTMLElement | null | undefined, string | HTMLElement | null | undefined>;
     }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
         'update:visible': (_visible: boolean) => true;
         ok: (_e: Event) => true;
@@ -850,7 +850,7 @@ declare const Drawer: {
         handleClose: () => void;
         handleMask: (e: Event) => void;
         isFixed: import("vue").ComputedRef<boolean>;
-        teleportContainer: import("vue").Ref<string | HTMLElement | undefined, string | HTMLElement | undefined>;
+        teleportContainer: import("vue").Ref<string | HTMLElement | null | undefined, string | HTMLElement | null | undefined>;
     }, {}, {}, {}, {
         footer: boolean;
         header: boolean;
@@ -984,7 +984,7 @@ declare const Drawer: {
     handleClose: () => void;
     handleMask: (e: Event) => void;
     isFixed: import("vue").ComputedRef<boolean>;
-    teleportContainer: import("vue").Ref<string | HTMLElement | undefined, string | HTMLElement | undefined>;
+    teleportContainer: import("vue").Ref<string | HTMLElement | null | undefined, string | HTMLElement | null | undefined>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     'update:visible': (_visible: boolean) => true;
     ok: (_e: Event) => true;

package/es/index.css

@@ -17868,4 +17868,17 @@ body {
 .sd-affix {
   position: fixed;
   z-index: 999;
+}
+
+.sd-theme-provider {
+  min-width: 0;
+}
+
+.sd-theme-popup-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 0;
+  pointer-events: none;
 }

package/es/index.scss

@@ -75,3 +75,4 @@
 @use '@components/anchor/style/index.scss' as *;
 @use '@components/alert/style/index.scss' as *;
 @use '@components/affix/style/index.scss' as *;
+@use '@components/config-provider/style/index.scss' as *;

package/es/modal/index.d.ts

@@ -153,7 +153,7 @@ declare const Modal: {
         modalCls: import("vue").ComputedRef<(string | any[] | {
             [x: string]: boolean;
         } | undefined)[]>;
-        teleportContainer: import("vue").Ref<string | HTMLElement | undefined, string | HTMLElement | undefined>;
+        teleportContainer: import("vue").Ref<string | HTMLElement | null | undefined, string | HTMLElement | null | undefined>;
         handleMoveDown: (ev: MouseEvent) => void;
     }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
         'update:visible': (_visible: boolean) => true;
@@ -1404,7 +1404,7 @@ declare const Modal: {
         modalCls: import("vue").ComputedRef<(string | any[] | {
             [x: string]: boolean;
         } | undefined)[]>;
-        teleportContainer: import("vue").Ref<string | HTMLElement | undefined, string | HTMLElement | undefined>;
+        teleportContainer: import("vue").Ref<string | HTMLElement | null | undefined, string | HTMLElement | null | undefined>;
         handleMoveDown: (ev: MouseEvent) => void;
     }, {}, {}, {}, {
         footer: boolean;
@@ -1582,7 +1582,7 @@ declare const Modal: {
     modalCls: import("vue").ComputedRef<(string | any[] | {
         [x: string]: boolean;
     } | undefined)[]>;
-    teleportContainer: import("vue").Ref<string | HTMLElement | undefined, string | HTMLElement | undefined>;
+    teleportContainer: import("vue").Ref<string | HTMLElement | null | undefined, string | HTMLElement | null | undefined>;
     handleMoveDown: (ev: MouseEvent) => void;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     'update:visible': (_visible: boolean) => true;

package/es/modal/modal.vue.d.ts

@@ -146,7 +146,7 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     modalCls: import("vue").ComputedRef<(string | any[] | {
         [x: string]: boolean;
     } | undefined)[]>;
-    teleportContainer: import("vue").Ref<string | HTMLElement | undefined, string | HTMLElement | undefined>;
+    teleportContainer: import("vue").Ref<string | HTMLElement | null | undefined, string | HTMLElement | null | undefined>;
     handleMoveDown: (ev: MouseEvent) => void;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     'update:visible': (_visible: boolean) => true;

package/es/select/select-dropdown.vue.d.ts

@@ -38,7 +38,7 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         [x: string]: boolean;
     })[]>;
     wrapperRef: import("vue").Ref<any, any>;
-    wrapperComRef: import("vue").Ref<import("vue").ComponentPublicInstance | HTMLElement | undefined, import("vue").ComponentPublicInstance | HTMLElement | undefined>;
+    wrapperComRef: import("vue").Ref<HTMLElement | import("vue").ComponentPublicInstance | undefined, HTMLElement | import("vue").ComponentPublicInstance | undefined>;
     handleScroll: (e: Event) => void;
     displayScrollbar: import("vue").ComputedRef<boolean>;
     scrollbarProps: import("vue").ComputedRef<ScrollbarProps | undefined>;

package/es/trigger/trigger.js

@@ -1,4 +1,4 @@
-import { configProviderInjectionKey } from "../config-provider/context.js";
+import { configProviderInjectionKey, themePopupContainerInjectionKey } from "../config-provider/context.js";
 import { _objectSpread2 } from "../_virtual/_@oxc-project_runtime@0.124.0/helpers/objectSpread2.js";
 import { getPrefixCls } from "../_utils/global-config.js";
 import { isEmptyChildren, mergeFirstChild } from "../_utils/vue-utils.js";
@@ -14,7 +14,7 @@ import { useResizeObserver } from "../_hooks/use-resize-observer.js";
 import { useTeleportContainer } from "../_hooks/use-teleport-container.js";
 import { triggerInjectionKey } from "./context.js";
 import { getArrowStyle, getElementScrollRect, getPopupStyle, getScrollElements, getTransformOrigin } from "./utils.js";
-import { Fragment, Teleport, Transition, computed, createVNode, defineComponent, inject, mergeProps, nextTick, onBeforeUnmount, onDeactivated, onMounted, onUpdated, provide, reactive, ref, toRefs, vShow, watch, withDirectives } from "vue";
+import { Fragment, Teleport, Transition, computed, createVNode, defineComponent, inject, mergeProps, nextTick, onBeforeUnmount, onDeactivated, onMounted, onUpdated, provide, reactive, ref, vShow, watch, withDirectives } from "vue";
 //#region components/trigger/trigger.tsx
 var TRIGGER_EVENTS = [
 	"onClick",
@@ -170,10 +170,14 @@ var trigger_default = /* @__PURE__ */ defineComponent({
 		"resize": () => true
 	},
 	setup(props, { emit, slots, attrs }) {
-		const { popupContainer } = toRefs(props);
 		const prefixCls = getPrefixCls("trigger");
 		const popupAttrs = computed(() => omit(attrs, TRIGGER_EVENTS));
 		const configCtx = inject(configProviderInjectionKey, void 0);
+		const themePopupContainer = inject(themePopupContainerInjectionKey, void 0);
+		const mergedPopupContainer = computed(() => {
+			var _props$popupContainer;
+			return (_props$popupContainer = props.popupContainer) !== null && _props$popupContainer !== void 0 ? _props$popupContainer : themePopupContainer === null || themePopupContainer === void 0 ? void 0 : themePopupContainer.value;
+		});
 		const triggerMethods = computed(() => [].concat(props.trigger));
 		const childrenRefs = /* @__PURE__ */ new Set();
 		const triggerCtx = inject(triggerInjectionKey, void 0);
@@ -196,7 +200,7 @@ var trigger_default = /* @__PURE__ */ defineComponent({
 			return (_props$popupVisible = props.popupVisible) !== null && _props$popupVisible !== void 0 ? _props$popupVisible : popupVisible.value;
 		});
 		const { teleportContainer, containerRef } = useTeleportContainer({
-			popupContainer,
+			popupContainer: mergedPopupContainer,
 			visible: computedVisible,
 			documentContainer: true
 		});

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": "1.6.0",
+  "version": "1.7.0",
   "contributions": {
     "html": {
       "types-syntax": "typescript",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sdata/web-vue",
-  "version": "1.7.0",
+  "version": "1.7.1",
   "description": "SD Design Vue: A Vue.js 3 UI Library",
   "keywords": [
     "sd",

package/es/web-vue.css

@@ -1,5 +0,0 @@
-
-.sd-theme-provider[data-v-a0a91a8a] {
-    min-width: 0;
-}
-/*$vite$:1*/