@sdata/web-vue 4.5.4 → 4.6.0

package/es/resize-box/resize-box.vue_vue_type_script_setup_true_lang.js

@@ -1,240 +0,0 @@
-import _objectSpread2 from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/objectSpread2.js";
-import { getPrefixCls } from "../_utils/global-config.js";
-import { isNumber } from "../_utils/is.js";
-import { off, on } from "../_utils/dom.js";
-import { KEYBOARD_KEY } from "../_utils/keyboard.js";
-import useMergeState from "../_hooks/use-merge-state.js";
-import resize_trigger_default from "../_components/resize-trigger.js";
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createSlots, defineComponent, mergeProps, normalizeClass, onBeforeUnmount, openBlock, reactive, ref, renderList, renderSlot, resolveDynamicComponent, toRefs, unref, withCtx } from "vue";
-//#region components/resize-box/resize-box.vue?vue&type=script&setup=true&lang.ts
-var DIRECTION_LEFT = "left";
-var DIRECTION_RIGHT = "right";
-var DIRECTION_TOP = "top";
-var DIRECTION_BOTTOM = "bottom";
-var resize_box_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent(_objectSpread2(_objectSpread2({}, { name: "ResizeBox" }), {}, {
-	__name: "resize-box",
-	props: {
-		/**
-		* @zh 宽度
-		* @en Width
-		* @vModel
-		*/
-		width: { type: Number },
-		/**
-		* @zh 高度
-		* @en Height
-		* @vModel
-		*/
-		height: { type: Number },
-		/**
-		* @zh 伸缩框的 html 标签
-		* @en The html tag of the telescopic box
-		*/
-		component: {
-			type: String,
-			default: "div"
-		},
-		/**
-		* @zh 可以进行伸缩的边，有上、下、左、右可以使用
-		* @en Can be stretched side, there are up, down, left and right can be used
-		* */
-		directions: {
-			type: Array,
-			default: () => ["right"]
-		}
-	},
-	emits: [
-		"update:width",
-		"update:height",
-		"movingStart",
-		"moving",
-		"movingEnd"
-	],
-	setup(__props, { emit: __emit }) {
-		const allDirections = [
-			DIRECTION_LEFT,
-			DIRECTION_RIGHT,
-			DIRECTION_TOP,
-			DIRECTION_BOTTOM
-		];
-		function getRealSize(pageSize, padding) {
-			if (pageSize === 0) return 0;
-			const res = pageSize - padding;
-			return res <= 0 ? 0 : res;
-		}
-		function isHorizontal(direction) {
-			return [DIRECTION_TOP, DIRECTION_BOTTOM].indexOf(direction) > -1;
-		}
-		const props = __props;
-		const emit = __emit;
-		/**
-		* @zh 伸缩杆的内容
-		* @en The contents of the resize pole
-		* @slot resize-trigger
-		* @binding {'left' | 'right' | 'top' | 'bottom'} direction
-		*/
-		/**
-		* @zh 伸缩杆的图标
-		* @en Resize pole icon
-		* @slot resize-trigger-icon
-		* @binding {'left' | 'right' | 'top' | 'bottom'} direction
-		*/
-		const { height: propHeight, width: propWidth, directions } = toRefs(props);
-		const [resWidth, setResWidth] = useMergeState(null, reactive({ value: propWidth }));
-		const [resHeight, setResHeight] = useMergeState(null, reactive({ value: propHeight }));
-		const wrapperRef = ref();
-		const paddingStyles = reactive({});
-		const prefixCls = getPrefixCls("resizebox");
-		const classNames = computed(() => [prefixCls]);
-		const styles = computed(() => {
-			return _objectSpread2(_objectSpread2(_objectSpread2({}, isNumber(resWidth.value) ? { width: `${resWidth.value}px` } : {}), isNumber(resHeight.value) ? { height: `${resHeight.value}px` } : {}), paddingStyles);
-		});
-		const allowDirections = computed(() => directions.value.filter((direction) => allDirections.includes(direction)));
-		const record = {
-			direction: "",
-			startPageX: 0,
-			startPageY: 0,
-			startWidth: 0,
-			startHeight: 0,
-			moving: false,
-			padding: {
-				left: 0,
-				right: 0,
-				top: 0,
-				bottom: 0
-			}
-		};
-		function onMoving(e) {
-			if (!record.moving) return;
-			const { startPageX, startPageY, startWidth, startHeight, direction } = record;
-			let newWidth = startWidth;
-			let newHeight = startHeight;
-			const offsetX = e.pageX - startPageX;
-			const offsetY = e.pageY - startPageY;
-			switch (direction) {
-				case DIRECTION_LEFT:
-					newWidth = Math.max(0, startWidth - offsetX);
-					setResWidth(newWidth);
-					emit("update:width", newWidth);
-					break;
-				case DIRECTION_RIGHT:
-					newWidth = Math.max(0, startWidth + offsetX);
-					setResWidth(newWidth);
-					emit("update:width", newWidth);
-					break;
-				case DIRECTION_TOP:
-					newHeight = Math.max(0, startHeight - offsetY);
-					setResHeight(newHeight);
-					emit("update:height", newHeight);
-					break;
-				case DIRECTION_BOTTOM:
-					newHeight = Math.max(0, startHeight + offsetY);
-					setResHeight(newHeight);
-					emit("update:height", newHeight);
-			}
-			emit("moving", {
-				width: newWidth,
-				height: newHeight
-			}, e);
-		}
-		function cleanupDragging() {
-			record.moving = false;
-			off(window, "mousemove", onMoving);
-			off(window, "mouseup", onMoveEnd);
-			off(window, "contextmenu", onMoveEnd);
-			document.body.style.cursor = "default";
-		}
-		function onMoveEnd(e) {
-			cleanupDragging();
-			emit("movingEnd", e);
-		}
-		function onMoveStart(direction, e) {
-			var _wrapperRef$value, _wrapperRef$value2;
-			emit("movingStart", e);
-			record.moving = true;
-			record.startPageX = e.pageX;
-			record.startPageY = e.pageY;
-			record.direction = direction;
-			const { top, left, right, bottom } = record.padding;
-			record.startWidth = getRealSize(((_wrapperRef$value = wrapperRef.value) === null || _wrapperRef$value === void 0 ? void 0 : _wrapperRef$value.clientWidth) || 0, left + right);
-			record.startHeight = getRealSize(((_wrapperRef$value2 = wrapperRef.value) === null || _wrapperRef$value2 === void 0 ? void 0 : _wrapperRef$value2.clientHeight) || 0, top + bottom);
-			on(window, "mousemove", onMoving);
-			on(window, "mouseup", onMoveEnd);
-			on(window, "contextmenu", onMoveEnd);
-			document.body.style.cursor = isHorizontal(direction) ? "row-resize" : "col-resize";
-		}
-		function onTriggerResize(direction, entry) {
-			const { width, height } = entry.contentRect;
-			const size = isHorizontal(direction) ? height : width;
-			record.padding[direction] = size;
-			paddingStyles[`padding-${direction}`] = `${size}px`;
-		}
-		function onTriggerKeydown(direction, e) {
-			const horiz = direction === DIRECTION_LEFT || direction === DIRECTION_RIGHT;
-			const key = e.key;
-			const posKey = horiz ? KEYBOARD_KEY.ARROW_RIGHT : KEYBOARD_KEY.ARROW_DOWN;
-			const negKey = horiz ? KEYBOARD_KEY.ARROW_LEFT : KEYBOARD_KEY.ARROW_UP;
-			if (key !== posKey && key !== negKey) return;
-			e.preventDefault();
-			const step = e.shiftKey ? 20 : 10;
-			const dirSign = direction === DIRECTION_LEFT || direction === DIRECTION_TOP ? -1 : 1;
-			const delta = step * (key === posKey ? 1 : -1) * dirSign;
-			if (horiz) {
-				var _wrapperRef$value3;
-				const base = isNumber(resWidth.value) ? resWidth.value : Math.max(0, getRealSize(((_wrapperRef$value3 = wrapperRef.value) === null || _wrapperRef$value3 === void 0 ? void 0 : _wrapperRef$value3.clientWidth) || 0, record.padding.left + record.padding.right));
-				const newWidth = Math.max(0, base + delta);
-				setResWidth(newWidth);
-				emit("update:width", newWidth);
-			} else {
-				var _wrapperRef$value4;
-				const base = isNumber(resHeight.value) ? resHeight.value : Math.max(0, getRealSize(((_wrapperRef$value4 = wrapperRef.value) === null || _wrapperRef$value4 === void 0 ? void 0 : _wrapperRef$value4.clientHeight) || 0, record.padding.top + record.padding.bottom));
-				const newHeight = Math.max(0, base + delta);
-				setResHeight(newHeight);
-				emit("update:height", newHeight);
-			}
-		}
-		onBeforeUnmount(cleanupDragging);
-		return (_ctx, _cache) => {
-			return openBlock(), createBlock(resolveDynamicComponent(__props.component), mergeProps({
-				ref_key: "wrapperRef",
-				ref: wrapperRef,
-				class: classNames.value
-			}, _ctx.$attrs, { style: styles.value }), {
-				default: withCtx(() => [renderSlot(_ctx.$slots, "default"), (openBlock(true), createElementBlock(Fragment, null, renderList(allowDirections.value, (direction) => {
-					return openBlock(), createBlock(resize_trigger_default, {
-						key: direction,
-						"prefix-cls": `${unref(prefixCls)}-trigger`,
-						class: normalizeClass(`${unref(prefixCls)}-direction-${direction}`),
-						direction: isHorizontal(direction) ? "horizontal" : "vertical",
-						onMousedown: (e) => {
-							onMoveStart(direction, e);
-						},
-						onResize: (entry) => {
-							onTriggerResize(direction, entry);
-						},
-						onKeydown: (e) => {
-							onTriggerKeydown(direction, e);
-						}
-					}, createSlots({
-						default: withCtx(() => [_ctx.$slots["resize-trigger"] ? renderSlot(_ctx.$slots, "resize-trigger", { direction }, void 0, void 0, 0) : createCommentVNode("", true)]),
-						_: 2
-					}, [_ctx.$slots["resize-trigger-icon"] ? {
-						name: "icon",
-						fn: withCtx(() => [renderSlot(_ctx.$slots, "resize-trigger-icon", { direction })]),
-						key: "0"
-					} : void 0]), 1032, [
-						"prefix-cls",
-						"class",
-						"direction",
-						"onMousedown",
-						"onResize",
-						"onKeydown"
-					]);
-				}), 128))]),
-				_: 3
-			}, 16, ["class", "style"]);
-		};
-	}
-}));
-//#endregion
-export { resize_box_vue_vue_type_script_setup_true_lang_default as default };

package/es/resize-box/style/index.css

@@ -1,60 +0,0 @@
-/******** borderSize *******/
-/******** borderStyle *******/
-/******** radius *******/
-/******** shadow distance *******/
-/******** size *******/
-/******** spacing *******/
-/******** shadow *******/
-/******** opacity *******/
-/******** fontSize *******/
-/******** fontWeight ********/
-/******** Primary *******/
-/******** success *******/
-/******** warning *******/
-/******** danger *******/
-/******** link *******/
-/******** radius *******/
-/********* icon hover *********/
-.sd-resizebox {
-  position: relative;
-  width: 100%;
-  overflow: hidden;
-}
-.sd-resizebox-direction-left, .sd-resizebox-direction-right, .sd-resizebox-direction-top, .sd-resizebox-direction-bottom {
-  position: absolute;
-  top: 0;
-  left: 0;
-  box-sizing: border-box;
-  user-select: none;
-}
-.sd-resizebox-direction-right {
-  right: 0;
-  left: unset;
-}
-.sd-resizebox-direction-bottom {
-  top: unset;
-  bottom: 0;
-}
-
-.sd-resizebox-trigger-icon-wrapper {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  color: var(--sd-color-text-1);
-  font-size: 12px;
-  line-height: 1;
-  background-color: var(--sd-color-neutral-3);
-}
-.sd-resizebox-trigger-icon {
-  display: inline-block;
-  margin: -3px;
-}
-.sd-resizebox-trigger-vertical {
-  height: 100%;
-  cursor: col-resize;
-}
-.sd-resizebox-trigger-horizontal {
-  width: 100%;
-  cursor: row-resize;
-}

package/es/resize-box/style/index.scss

@@ -1,62 +0,0 @@
-@use '@style/theme/index.scss' as theme;
-@use 'sass:string';
-@use '@components/resize-box/style/token.scss' as *;
-
-$resizebox-prefix-cls: string.unquote('#{theme.$prefix}-resizebox');
-$resizebox-trigger-prefix-cls: string.unquote('#{$resizebox-prefix-cls}-trigger');
-
-.#{$resizebox-prefix-cls} {
-  position: relative;
-  width: 100%;
-  overflow: hidden;
-
-  &-direction-left,
-  &-direction-right,
-  &-direction-top,
-  &-direction-bottom {
-    position: absolute;
-    top: 0;
-    left: 0;
-    box-sizing: border-box;
-    user-select: none;
-  }
-
-  &-direction-right {
-    right: 0;
-    left: unset;
-  }
-
-  &-direction-bottom {
-    top: unset;
-    bottom: 0;
-  }
-}
-
-// 伸缩触发杆
-.#{$resizebox-trigger-prefix-cls} {
-  &-icon-wrapper {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 100%;
-    color: $resizeBox-trigger-color-icon;
-    font-size: $resizeBox-trigger-font-size-icon;
-    line-height: 1;
-    background-color: $resizeBox-trigger-color-background;
-  }
-
-  &-icon {
-    display: inline-block;
-    margin: -($resizeBox-trigger-font-size-icon * 0.25);
-  }
-
-  &-vertical {
-    height: 100%;
-    cursor: col-resize;
-  }
-
-  &-horizontal {
-    width: 100%;
-    cursor: row-resize;
-  }
-}

package/es/resize-box/style/token.scss

@@ -1,14 +0,0 @@
-@use '@style/theme/index.scss' as global;
-
-@forward '@style/theme/index.scss';
-@forward '@style/color/colors.scss' hide $sd-vars-prefix, $sd-cssvars-prefix;
-
-@use 'sass:string';
-@use '@style/theme/index.scss' as *;
-
-$resizeBox-trigger-color-background: var(
-  string.unquote('#{global.$sd-cssvars-prefix}-color-neutral-3')
-);
-// $resizeBox-trigger-size-icon-wrapper: 6px;
-$resizeBox-trigger-font-size-icon: 12px;
-$resizeBox-trigger-color-icon: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-1'));