@vnejs/uis.react.text 0.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Text.d.ts +47 -0
- package/dist/Text.d.ts.map +1 -0
- package/dist/Text.js +52 -0
- package/dist/Text.js.map +1 -0
- package/dist/Text.styl +40 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +2 -0
- package/dist/index.js.map +1 -0
- package/package.json +31 -0
package/dist/Text.d.ts
ADDED
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import "./Text.styl";
|
|
2
|
+
export declare const Text: {
|
|
3
|
+
({ isActive, isSelected, isHoverable, isDisabled, isCurrent, isNotRender, isInlineBlock, text, textPrefix, color, colorPrefix, size, className, padding, width, marginTop, marginRight, font, whiteSpace, align, weight, weightPrefix, opacity, transition, onClick, value, }: {
|
|
4
|
+
isActive?: boolean;
|
|
5
|
+
isSelected?: boolean;
|
|
6
|
+
isHoverable?: boolean;
|
|
7
|
+
isDisabled?: boolean;
|
|
8
|
+
isCurrent?: boolean;
|
|
9
|
+
isNotRender?: boolean;
|
|
10
|
+
isInlineBlock?: boolean;
|
|
11
|
+
text?: string;
|
|
12
|
+
textPrefix?: string;
|
|
13
|
+
color?: string;
|
|
14
|
+
colorPrefix?: string;
|
|
15
|
+
size?: number;
|
|
16
|
+
className?: string;
|
|
17
|
+
padding?: number;
|
|
18
|
+
width?: number;
|
|
19
|
+
marginTop?: number;
|
|
20
|
+
marginRight?: number;
|
|
21
|
+
font?: string;
|
|
22
|
+
whiteSpace?: string;
|
|
23
|
+
align?: string;
|
|
24
|
+
weight?: any;
|
|
25
|
+
weightPrefix?: any;
|
|
26
|
+
opacity?: any;
|
|
27
|
+
transition?: number;
|
|
28
|
+
onClick: any;
|
|
29
|
+
value: any;
|
|
30
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
31
|
+
WHITESPACES: {
|
|
32
|
+
WRAP: string;
|
|
33
|
+
NOWRAP: string;
|
|
34
|
+
};
|
|
35
|
+
ALIGNS: {
|
|
36
|
+
LEFT: string;
|
|
37
|
+
CENTER: string;
|
|
38
|
+
RIGHT: string;
|
|
39
|
+
};
|
|
40
|
+
WEIGHT: {
|
|
41
|
+
BOLD: string;
|
|
42
|
+
NORMAL: string;
|
|
43
|
+
BOLDER: string;
|
|
44
|
+
LIGHTER: string;
|
|
45
|
+
};
|
|
46
|
+
};
|
|
47
|
+
//# sourceMappingURL=Text.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../src/Text.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAIrB,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4EhB,CAAC"}
|
package/dist/Text.js
ADDED
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useCallback, useMemo } from "react";
|
|
3
|
+
import { cn, getVneLength } from "@vnejs/uis.utils";
|
|
4
|
+
import "./Text.styl";
|
|
5
|
+
const b = cn("Text");
|
|
6
|
+
export const Text = ({ isActive = false, isSelected = false, isHoverable = false, isDisabled = false, isCurrent = false, isNotRender = false, isInlineBlock = false, text = "", textPrefix = "", color = "", colorPrefix = "", size = 96, className = "", padding = 0, width = 0, marginTop = 0, marginRight = 0, font = "", whiteSpace = "", align = "", weight = null, weightPrefix = null, opacity = null, transition = 300, onClick, value, }) => {
|
|
7
|
+
const style = useMemo(() => {
|
|
8
|
+
const result = {};
|
|
9
|
+
if (font)
|
|
10
|
+
result.fontFamily = font;
|
|
11
|
+
if (color)
|
|
12
|
+
result.color = color;
|
|
13
|
+
if (weight)
|
|
14
|
+
result.fontWeight = weight;
|
|
15
|
+
if (whiteSpace)
|
|
16
|
+
result.whiteSpace = whiteSpace;
|
|
17
|
+
if (transition !== null)
|
|
18
|
+
result.transition = transition ? `${transition}ms` : "none";
|
|
19
|
+
if (opacity !== null)
|
|
20
|
+
result.opacity = opacity;
|
|
21
|
+
if (size) {
|
|
22
|
+
result.fontSize = `round(down, calc(${getVneLength(size)} * var(--vne-text-size-multiplicator, 1)), 1px)`;
|
|
23
|
+
result.lineHeight = `round(down, calc(${getVneLength(1.25 * size)} * var(--vne-text-size-multiplicator, 1)), 1px)`;
|
|
24
|
+
}
|
|
25
|
+
if (padding)
|
|
26
|
+
result.padding = getVneLength(padding);
|
|
27
|
+
if (width)
|
|
28
|
+
result.width = getVneLength(width);
|
|
29
|
+
if (marginTop)
|
|
30
|
+
result.marginTop = getVneLength(marginTop);
|
|
31
|
+
if (marginRight)
|
|
32
|
+
result.marginRight = getVneLength(marginRight);
|
|
33
|
+
return result;
|
|
34
|
+
}, [font, color, whiteSpace, size, weight, padding, marginTop, opacity, width, transition]);
|
|
35
|
+
const stylePrefix = useMemo(() => {
|
|
36
|
+
const result = {};
|
|
37
|
+
if (colorPrefix)
|
|
38
|
+
result.color = colorPrefix;
|
|
39
|
+
if (weightPrefix)
|
|
40
|
+
result.fontWeight = weightPrefix;
|
|
41
|
+
return result;
|
|
42
|
+
}, [colorPrefix, weightPrefix]);
|
|
43
|
+
const onClickHandler = useCallback(() => !isDisabled && onClick && onClick(value), [value, onClick, isDisabled]);
|
|
44
|
+
const isRealHovered = useMemo(() => isHoverable && !isDisabled, [isHoverable, isDisabled]);
|
|
45
|
+
if (isNotRender)
|
|
46
|
+
return null;
|
|
47
|
+
return (_jsxs("div", { className: b({ isActive, isHoverable: isRealHovered, isSelected, isDisabled, isCurrent, isInlineBlock, align }, [className]), style: style, onClick: onClickHandler, "vne-cursor-type": isRealHovered ? "pointer" : "", children: [textPrefix && _jsx("span", { style: stylePrefix, children: textPrefix }), text] }));
|
|
48
|
+
};
|
|
49
|
+
Text.WHITESPACES = { WRAP: "wrap", NOWRAP: "nowrap" };
|
|
50
|
+
Text.ALIGNS = { LEFT: "left", CENTER: "center", RIGHT: "right" };
|
|
51
|
+
Text.WEIGHT = { BOLD: "bold", NORMAL: "normal", BOLDER: "bolder", LIGHTER: "lighter" };
|
|
52
|
+
//# sourceMappingURL=Text.js.map
|
package/dist/Text.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Text.js","sourceRoot":"","sources":["../src/Text.tsx"],"names":[],"mappings":"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"}
|
package/dist/Text.styl
ADDED
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
.Text
|
|
2
|
+
--vne-text-color-disabled: var(--vne-color-disabled, rgba(255, 255, 255, 30%));
|
|
3
|
+
--vne-text-color-primary: var(--vne-color-primary, rgba(255, 255, 255, 60%));
|
|
4
|
+
--vne-text-color-selected: var(--vne-color-selected, rgba(255, 255, 255, 75%));
|
|
5
|
+
--vne-text-color-active: var(--vne-color-active, rgba(255, 255, 255, 90%));
|
|
6
|
+
|
|
7
|
+
display: block
|
|
8
|
+
user-select: none
|
|
9
|
+
font-weight: 400
|
|
10
|
+
|
|
11
|
+
color: var(--vne-text-color-primary)
|
|
12
|
+
|
|
13
|
+
&_isDisabled
|
|
14
|
+
color: var(--vne-text-color-disabled);
|
|
15
|
+
|
|
16
|
+
&_isSelected
|
|
17
|
+
color: var(--vne-text-color-selected);
|
|
18
|
+
|
|
19
|
+
&_isActive
|
|
20
|
+
color: var(--vne-text-color-active);
|
|
21
|
+
|
|
22
|
+
&_isCurrent
|
|
23
|
+
text-decoration: underline
|
|
24
|
+
|
|
25
|
+
&_isSelected
|
|
26
|
+
font-weight: bold
|
|
27
|
+
text-shadow: 0 0 s('round(down, min(calc(12 * 100vw / 3840), calc(12 * 100vh / 2160)), 1px)') rgba(255, 255, 255, 90%)
|
|
28
|
+
|
|
29
|
+
&_isHoverable[vne-cursor-target],
|
|
30
|
+
.TextHoverParent[vne-cursor-target] &,
|
|
31
|
+
.TextHoverSibling[vne-cursor-target] ~ &
|
|
32
|
+
color: var(--vne-text-color-active);
|
|
33
|
+
|
|
34
|
+
&_align_center
|
|
35
|
+
text-align: center
|
|
36
|
+
&_align_right
|
|
37
|
+
text-align: right
|
|
38
|
+
|
|
39
|
+
&_isInlineBlock
|
|
40
|
+
display: inline-block
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC"}
|
package/dist/index.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC"}
|
package/package.json
ADDED
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@vnejs/uis.react.text",
|
|
3
|
+
"version": "0.1.2",
|
|
4
|
+
"main": "dist/index.js",
|
|
5
|
+
"types": "dist/index.d.ts",
|
|
6
|
+
"scripts": {
|
|
7
|
+
"build": "node ../../scripts/build-package.mjs",
|
|
8
|
+
"publish:major:plugin": "npm run publish:major",
|
|
9
|
+
"publish:minor:plugin": "npm run publish:minor",
|
|
10
|
+
"publish:patch:plugin": "npm run publish:patch",
|
|
11
|
+
"publish:major": "npm run build && npm version major && npm publish --access public",
|
|
12
|
+
"publish:minor": "npm run build && npm version minor && npm publish --access public",
|
|
13
|
+
"publish:patch": "npm run build && npm version patch && npm publish --access public"
|
|
14
|
+
},
|
|
15
|
+
"peerDependencies": {
|
|
16
|
+
"@bem-react/classname": "1.5.12",
|
|
17
|
+
"@vnejs/uis.utils": "~0.1.0",
|
|
18
|
+
"react": "19.2.4",
|
|
19
|
+
"react-dom": "19.2.4"
|
|
20
|
+
},
|
|
21
|
+
"devDependencies": {
|
|
22
|
+
"@vnejs/uis.react": "~0.1.0",
|
|
23
|
+
"typescript": "^5.7.3",
|
|
24
|
+
"@types/react": "^19.0.10",
|
|
25
|
+
"@types/react-dom": "^19.0.4"
|
|
26
|
+
},
|
|
27
|
+
"files": [
|
|
28
|
+
"dist",
|
|
29
|
+
"package.json"
|
|
30
|
+
]
|
|
31
|
+
}
|