@sdata/web-vue 3.4.0 → 3.6.0

package/es/index.js

@@ -66,6 +66,10 @@ 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 preview_action_default from "./image/preview-action.js";
+import preview_default from "./image/preview.js";
+import preview_group_default from "./image/preview-group.js";
+import Image from "./image/index.js";
 import FilePreviewer from "./file-previewer/index.js";
 import grid_col_default from "./grid/grid-col.js";
 import grid_item_default from "./grid/grid-item.js";
@@ -74,10 +78,6 @@ import Grid from "./grid/index.js";
 import form_item_default from "./form/form-item.js";
 import Form from "./form/index.js";
 import Icon from "./icon-component/index.js";
-import preview_action_default from "./image/preview-action.js";
-import preview_default from "./image/preview.js";
-import preview_group_default from "./image/preview-group.js";
-import Image from "./image/index.js";
 import { A2UI_0_8, defineJsonFormComponents, defineJsonFormSchemas } from "./json-form/types.js";
 import Textarea from "./textarea/index.js";
 import Mention from "./mention/index.js";

package/es/sd-vue.js

@@ -66,6 +66,10 @@ 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 preview_action_default from "./image/preview-action.js";
+import preview_default from "./image/preview.js";
+import preview_group_default from "./image/preview-group.js";
+import Image from "./image/index.js";
 import FilePreviewer from "./file-previewer/index.js";
 import grid_col_default from "./grid/grid-col.js";
 import grid_item_default from "./grid/grid-item.js";
@@ -74,10 +78,6 @@ import Grid from "./grid/index.js";
 import form_item_default from "./form/form-item.js";
 import Form from "./form/index.js";
 import Icon from "./icon-component/index.js";
-import preview_action_default from "./image/preview-action.js";
-import preview_default from "./image/preview.js";
-import preview_group_default from "./image/preview-group.js";
-import Image from "./image/index.js";
 import Textarea from "./textarea/index.js";
 import Mention from "./mention/index.js";
 import Rate from "./rate/index.js";

package/es/toolbar/style/index.css

@@ -42,7 +42,6 @@
   grid-template-columns: repeat(auto-fill, minmax(var(--toolbar-span-width), 1fr));
   gap: 8px;
   width: 100%;
-  background-color: var(--sd-color-bg-2);
 }
 .sd-toolbar-body--schema .sd-form > * {
   max-width: var(--toolbar-item-max-width);

package/es/toolbar/style/index.scss

@@ -36,7 +36,6 @@ $toolbar-prefix-cls: string.unquote('#{theme.$prefix}-toolbar');
     grid-template-columns: repeat(auto-fill, minmax(var(--toolbar-span-width), 1fr));
     gap: $toolbar-body-gap;
     width: 100%;
-    background-color: $toolbar-color-bg;
 
     > * {
       max-width: var(--toolbar-item-max-width);

package/es/toolbar/style/token.scss

@@ -16,8 +16,6 @@ $toolbar-expand-gap: global.$spacing-2;
 
 $toolbar-padding-bottom: global.$spacing-4;
 
-$toolbar-color-bg: var(string.unquote('#{global.$sd-cssvars-prefix}-color-bg-2'));
-
 $toolbar-color-border: var(string.unquote('#{global.$sd-cssvars-prefix}-color-neutral-3'));
 
 $toolbar-border-width: global.$border-1;

package/es/trigger/context.d.ts

@@ -2,6 +2,7 @@ import type { ComponentPublicInstance, InjectionKey } from 'vue';
 export interface TriggerContext {
     onMouseenter: (ev: MouseEvent) => void;
     onMouseleave: (ev: MouseEvent) => void;
+    onContextmenu: (ev: MouseEvent) => void;
     addChildRef: (ref: HTMLElement | ComponentPublicInstance) => void;
     removeChildRef: (ref: HTMLElement | ComponentPublicInstance) => void;
 }

package/es/trigger/trigger.js

@@ -10,11 +10,12 @@ import { useFirstElement } from "../_hooks/use-first-element.js";
 import resize_observer_v2_default from "../_components/resize-observer-v2.js";
 import usePickSlots from "../_hooks/use-pick-slots.js";
 import usePopupManager from "../_hooks/use-popup-manager.js";
-import { useResizeObserver } from "../_hooks/use-resize-observer.js";
+import { useResizeObserver as useResizeObserver$1 } 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, vShow, watch, withDirectives } from "vue";
+import { onClickOutside, useEventListener } from "@vueuse/core";
 //#region components/trigger/trigger.tsx
 var TRIGGER_EVENTS = [
 	"onClick",
@@ -375,7 +376,6 @@ var trigger_default = /* @__PURE__ */ defineComponent({
 			mergedPopupContainer
 		], syncThemePopupContainerZIndex, { immediate: true });
 		let delayTimer = 0;
-		let outsideListener = false;
 		let windowListener = false;
 		const cleanDelayTimer = () => {
 			if (delayTimer) {
@@ -494,6 +494,20 @@ var trigger_default = /* @__PURE__ */ defineComponent({
 			changeVisible(!computedVisible.value);
 			e.preventDefault();
 		};
+		const handleChildContextmenu = (e) => {
+			var _popupRef$value;
+			triggerCtx === null || triggerCtx === void 0 || triggerCtx.onContextmenu(e);
+			if (!props.clickOutsideToClose || !computedVisible.value) return;
+			if (!triggerMethods.value.includes("contextMenu")) return;
+			const target = e.target;
+			if ((_popupRef$value = popupRef.value) === null || _popupRef$value === void 0 ? void 0 : _popupRef$value.contains(target)) return;
+			if (getChildElements().some((element) => element.contains(target))) return;
+			changeVisible(false);
+		};
+		const handleContextmenuWithContext = (e) => {
+			triggerCtx === null || triggerCtx === void 0 || triggerCtx.onContextmenu(e);
+			handleContextmenu(e);
+		};
 		const addChildRef = (ref) => {
 			childrenRefs.add(ref);
 			triggerCtx === null || triggerCtx === void 0 || triggerCtx.addChildRef(ref);
@@ -505,29 +519,39 @@ var trigger_default = /* @__PURE__ */ defineComponent({
 		provide(triggerInjectionKey, reactive({
 			onMouseenter: handleMouseEnterWithContext,
 			onMouseleave: handleMouseLeaveWithContext,
+			onContextmenu: handleChildContextmenu,
 			addChildRef,
 			removeChildRef
 		}));
-		const removeOutsideListener = () => {
-			off(document.documentElement, "mousedown", handleOutsideClick);
-			outsideListener = false;
-		};
 		const contentSlot = usePickSlots(slots, "content");
 		const hidePopup = computed(() => {
 			var _contentSlot$value;
 			return props.hideEmpty && isEmptyChildren((_contentSlot$value = contentSlot.value) === null || _contentSlot$value === void 0 ? void 0 : _contentSlot$value.call(contentSlot));
 		});
-		const handleOutsideClick = (e) => {
-			var _firstElement$value, _popupRef$value;
-			if (((_firstElement$value = firstElement.value) === null || _firstElement$value === void 0 ? void 0 : _firstElement$value.contains(e.target)) || ((_popupRef$value = popupRef.value) === null || _popupRef$value === void 0 ? void 0 : _popupRef$value.contains(e.target))) return;
+		const getChildElements = () => {
+			const elements = [];
 			for (const item of childrenRefs) {
 				if (!item) continue;
 				const element = "value" in item ? item.value : item;
-				if (element === null || element === void 0 ? void 0 : element.contains(e.target)) return;
+				if (element) elements.push(element);
 			}
-			removeOutsideListener();
+			return elements;
+		};
+		const getOutsideIgnoreElements = () => [...triggerMethods.value.includes("contextMenu") || !firstElement.value ? [] : [firstElement.value], ...getChildElements()];
+		onClickOutside(popupRef, () => {
+			if (!props.clickOutsideToClose || !computedVisible.value) return;
+			changeVisible(false);
+		}, { ignore: getOutsideIgnoreElements });
+		const handleOutsideContextmenu = (e) => {
+			var _popupRef$value2;
+			if (!props.clickOutsideToClose || !computedVisible.value) return;
+			if (!triggerMethods.value.includes("contextMenu")) return;
+			const target = e.target;
+			if ((_popupRef$value2 = popupRef.value) === null || _popupRef$value2 === void 0 ? void 0 : _popupRef$value2.contains(target)) return;
+			if (getChildElements().some((element) => element.contains(target))) return;
 			changeVisible(false);
 		};
+		useEventListener(computed(() => typeof document === "undefined" ? void 0 : document), "contextmenu", handleOutsideContextmenu, { capture: true });
 		const isExceedThreshold = (oldPosition, element) => {
 			const [scrollTop, scrollLeft] = oldPosition;
 			const { scrollTop: newScrollTop, scrollLeft: newScrollLeft } = element;
@@ -573,13 +597,6 @@ var trigger_default = /* @__PURE__ */ defineComponent({
 		});
 		let scrollElements;
 		watch(computedVisible, (value) => {
-			if (props.clickOutsideToClose) {
-				if (!value && outsideListener) removeOutsideListener();
-				else if (value && !outsideListener) {
-					on(document.documentElement, "mousedown", handleOutsideClick);
-					outsideListener = true;
-				}
-			}
 			if (props.scrollToClose || (configCtx === null || configCtx === void 0 ? void 0 : configCtx.scrollToClose)) {
 				on(window, "scroll", onWindowScroll);
 				windowListener = true;
@@ -598,7 +615,7 @@ var trigger_default = /* @__PURE__ */ defineComponent({
 		watch(() => [props.autoFitPopupWidth, props.autoFitPopupMinWidth], () => {
 			if (computedVisible.value) updatePopupStyle();
 		});
-		const { createResizeObserver, destroyResizeObserver } = useResizeObserver({
+		const { createResizeObserver, destroyResizeObserver } = useResizeObserver$1({
 			elementRef: containerRef,
 			onResize: handleResize
 		});
@@ -606,10 +623,6 @@ var trigger_default = /* @__PURE__ */ defineComponent({
 			createResizeObserver();
 			if (computedVisible.value) {
 				updatePopupStyle();
-				if (props.clickOutsideToClose && !outsideListener) {
-					on(document.documentElement, "mousedown", handleOutsideClick);
-					outsideListener = true;
-				}
 				if (props.updateAtScroll || (configCtx === null || configCtx === void 0 ? void 0 : configCtx.updateAtScroll)) {
 					scrollElements = getScrollElements(firstElement.value);
 					for (const item of scrollElements) item.addEventListener("scroll", handleScroll);
@@ -625,7 +638,6 @@ var trigger_default = /* @__PURE__ */ defineComponent({
 		onBeforeUnmount(() => {
 			triggerCtx === null || triggerCtx === void 0 || triggerCtx.removeChildRef(popupRef.value);
 			destroyResizeObserver();
-			if (outsideListener) removeOutsideListener();
 			if (windowListener) removeWindowScroll();
 			if (scrollElements) {
 				for (const item of scrollElements) item.removeEventListener("scroll", handleScroll);
@@ -658,7 +670,7 @@ var trigger_default = /* @__PURE__ */ defineComponent({
 				onMouseleave: handleMouseLeave,
 				onFocusin: handleFocusin,
 				onFocusout: handleFocusout,
-				onContextmenu: handleContextmenu
+				onContextmenu: handleContextmenuWithContext
 			});
 			return createVNode(Fragment, null, [props.autoFixPosition ? createVNode(resize_observer_v2_default, { "onResize": onTargetResize }, { default: () => [children.value] }) : children.value, createVNode(client_only_default, null, { default: () => [createVNode(Teleport, {
 				"to": teleportContainer.value,

package/json/vetur-attributes.json

@@ -1218,6 +1218,15 @@
     "description": "Whether to render to body",
     "type": "boolean"
   },
+  "sd-file-previewer/image-props": {
+    "description": "Image previewer props"
+  },
+  "sd-file-previewer/media-props": {
+    "description": "Video and audio previewer props"
+  },
+  "sd-file-previewer/pdf-props": {
+    "description": "PDF previewer props"
+  },
   "sd-form-item/field": {
     "description": "The path of the form element in the data object (required for the data item)",
     "type": "string"

package/json/vetur-tags.json

@@ -519,7 +519,10 @@
       "closable",
       "esc-to-close",
       "popup-container",
-      "render-to-body"
+      "render-to-body",
+      "image-props",
+      "media-props",
+      "pdf-props"
     ]
   },
   "sd-form-item": {

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.3.1",
+  "version": "3.5.0",
   "contributions": {
     "html": {
       "types-syntax": "typescript",
@@ -3013,6 +3013,30 @@
                 "type": "boolean",
                 "kind": "expression"
               }
+            },
+            {
+              "name": "image-props",
+              "description": "Image previewer props",
+              "value": {
+                "type": "FilePreviewerImageProps",
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "media-props",
+              "description": "Video and audio previewer props",
+              "value": {
+                "type": "FilePreviewerMediaProps",
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "pdf-props",
+              "description": "PDF previewer props",
+              "value": {
+                "type": "FilePreviewerPdfProps",
+                "kind": "expression"
+              }
             }
           ],
           "events": [

package/package.json

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