@vnejs/uis.react.position-box 0.1.2

package/dist/PositionBox.d.ts

@@ -0,0 +1,29 @@
+import "./PositionBox.styl";
+export declare const PositionBox: ({ top, right, bottom, left, translateX, translateY, transformOriginX, transformOriginY, scale, transition, zIndex, opacity, boxRef, isCentered, isCenteredVertical, isCenteredHorizontal, isNotRender, background, clip, mask, filter, onClick, value, className, children, }: {
+    top?: any;
+    right?: any;
+    bottom?: any;
+    left?: any;
+    translateX?: any;
+    translateY?: any;
+    transformOriginX?: any;
+    transformOriginY?: any;
+    scale?: any;
+    transition?: any;
+    zIndex?: any;
+    opacity?: any;
+    boxRef?: any;
+    isCentered?: boolean;
+    isCenteredVertical?: boolean;
+    isCenteredHorizontal?: boolean;
+    isNotRender?: boolean;
+    background?: any;
+    clip?: any;
+    mask?: any;
+    filter?: any;
+    onClick: any;
+    value: any;
+    className: any;
+    children: any;
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=PositionBox.d.ts.map

package/dist/PositionBox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PositionBox.d.ts","sourceRoot":"","sources":["../src/PositionBox.tsx"],"names":[],"mappings":"AAIA,OAAO,oBAAoB,CAAC;AAgB5B,eAAO,MAAM,WAAW,GAAI;;;;;;;;;;;;;;;;;;;;;;;;;;CA0B3B,4CA8DA,CAAC"}

package/dist/PositionBox.js

@@ -0,0 +1,75 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useMemo } from "react";
+import { cn, getVneLength } from "@vnejs/uis.utils";
+import "./PositionBox.styl";
+const b = cn("PositionBox");
+const setField = (result, field, value) => {
+    result[field] = value;
+};
+const setPositionField = (result, field, value) => {
+    if (value === null)
+        return;
+    if (value === 0)
+        return setField(result, field, "0");
+    if (typeof value === "string")
+        return setField(result, field, value);
+    setField(result, field, getVneLength(value));
+};
+export const PositionBox = ({ top = null, right = null, bottom = null, left = null, translateX = null, translateY = null, transformOriginX = null, transformOriginY = null, scale = null, transition = null, zIndex = null, opacity = null, boxRef = null, isCentered = false, isCenteredVertical = false, isCenteredHorizontal = false, isNotRender = false, background = null, clip = null, mask = null, filter = null, onClick, value, className, children, }) => {
+    const style = useMemo(() => {
+        const result = {};
+        setPositionField(result, "top", top);
+        setPositionField(result, "right", right);
+        setPositionField(result, "bottom", bottom);
+        setPositionField(result, "left", left);
+        if (translateX !== null || translateY !== null) {
+            result["--vne-position-box-transform-x"] = translateX || "0%";
+            result["--vne-position-box-transform-y"] = translateY || "0%";
+            result["--vne-position-box-translate-x"] = translateX || "0%";
+            result["--vne-position-box-translate-y"] = translateY || "0%";
+        }
+        if (transformOriginX !== null || transformOriginY !== null) {
+            result["--vne-position-box-transform-x"] = transformOriginX || 0;
+            result["--vne-position-box-transform-y"] = transformOriginY || 0;
+        }
+        if (scale)
+            result["--vne-position-box-scale"] = scale;
+        if (transition !== null)
+            result.transition = transition ? `${transition}ms` : "none";
+        if (zIndex !== null)
+            result.zIndex = zIndex;
+        if (opacity !== null)
+            result.opacity = opacity;
+        if (background !== null)
+            result.background = background;
+        if (filter !== null)
+            result.filter = filter;
+        if (clip !== null)
+            result.clipPath = clip;
+        if (mask !== null)
+            result.mask = mask;
+        return result;
+    }, [
+        top,
+        right,
+        bottom,
+        left,
+        translateX,
+        translateY,
+        transformOriginX,
+        transformOriginY,
+        zIndex,
+        scale,
+        transition,
+        opacity,
+        background,
+        filter,
+        clip,
+        mask,
+    ]);
+    const onClickHandler = useCallback(() => onClick && onClick(value), [onClick, value]);
+    if (isNotRender)
+        return null;
+    return (_jsx("div", { className: b({ isCentered, isCenteredHorizontal, isCenteredVertical, isHided: opacity === 0 }, [className]), style: style, onClick: onClickHandler, ref: boxRef, children: _jsx("div", { className: b("children"), children: children }) }));
+};
+//# sourceMappingURL=PositionBox.js.map

package/dist/PositionBox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PositionBox.js","sourceRoot":"","sources":["../src/PositionBox.tsx"],"names":[],"mappings":"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"}

package/dist/PositionBox.styl

@@ -0,0 +1,31 @@
+.PositionBox
+    display: inline-block
+    position: absolute
+
+    transform: scaleY(var(--vne-position-box-scale, 1)) scaleX(var(--vne-position-box-scale, 1))
+    transform-origin: var(--vne-position-box-transform-x, 0) var(--vne-position-box-transform-y, 0)
+    translate: var(--vne-position-box-translate-x, 0%) var(--vne-position-box-translate-y, 0%)
+
+    &-children
+        position: relative
+        width: 100%
+        height: 100%
+
+    &_isCentered
+        top: 50%
+        left: 50%
+        translate: -50% -50%
+        transform-origin: 50% 50%
+    
+    &_isCenteredHorizontal
+        left: 50%
+        translate: -50% 0
+        transform-origin: 50% 0
+    
+    &_isCenteredVertical
+        top: 50%
+        translate: 0 -50%
+        transform-origin: 0 50%
+
+    &_isHided
+        pointer-events: none

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./PositionBox";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC"}

package/dist/index.js

@@ -0,0 +1,2 @@
+export * from "./PositionBox";
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC"}

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@vnejs/uis.react.position-box",
+  "version": "0.1.2",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "node ../../scripts/build-package.mjs",
+    "publish:major:plugin": "npm run publish:major",
+    "publish:minor:plugin": "npm run publish:minor",
+    "publish:patch:plugin": "npm run publish:patch",
+    "publish:major": "npm run build && npm version major && npm publish --access public",
+    "publish:minor": "npm run build && npm version minor && npm publish --access public",
+    "publish:patch": "npm run build && npm version patch && npm publish --access public"
+  },
+  "peerDependencies": {
+    "@bem-react/classname": "1.5.12",
+    "@vnejs/uis.utils": "~0.1.0",
+    "react": "19.2.4",
+    "react-dom": "19.2.4"
+  },
+  "devDependencies": {
+    "@vnejs/uis.react": "~0.1.0",
+    "typescript": "^5.7.3",
+    "@types/react": "^19.0.10",
+    "@types/react-dom": "^19.0.4"
+  },
+  "files": [
+    "dist",
+    "package.json"
+  ]
+}