@vnejs/uis.react.char 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/Char.d.ts +8 -0
- package/dist/Char.d.ts.map +1 -0
- package/dist/Char.js +36 -0
- package/dist/Char.js.map +1 -0
- package/dist/Char.styl +52 -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/Char.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Char.d.ts","sourceRoot":"","sources":["../src/Char.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAarB,eAAO,MAAM,IAAI,GAAI;;;;;CAAmE,4CAgCvF,CAAC"}
|
package/dist/Char.js
ADDED
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { useMemo } from "react";
|
|
3
|
+
import { cn } from "@bem-react/classname";
|
|
4
|
+
import "./Char.styl";
|
|
5
|
+
const b = cn("Char");
|
|
6
|
+
const MARKS_PREFIXES = { COLOR: "color:", WEIGHT: "weight:", OPACITY: "opacity:", ANIMATION: "animation:", ZOOM: "zoom:" };
|
|
7
|
+
const MARKS_PREFIXES_VALUES = Object.values(MARKS_PREFIXES);
|
|
8
|
+
const reduceMark = (prefix) => (acc, mark) => {
|
|
9
|
+
if (mark.startsWith(prefix))
|
|
10
|
+
acc.push(mark.slice(prefix.length));
|
|
11
|
+
return acc;
|
|
12
|
+
};
|
|
13
|
+
export const Char = ({ token = "", marks = [], isVisible = false, isForce = false } = {}) => {
|
|
14
|
+
const marksZoom = useMemo(() => marks.reduce(reduceMark(MARKS_PREFIXES.ZOOM), []), [marks]);
|
|
15
|
+
const marksColor = useMemo(() => marks.reduce(reduceMark(MARKS_PREFIXES.COLOR), []), [marks]);
|
|
16
|
+
const marksWeight = useMemo(() => marks.reduce(reduceMark(MARKS_PREFIXES.WEIGHT), []), [marks]);
|
|
17
|
+
const marksOpacity = useMemo(() => marks.reduce(reduceMark(MARKS_PREFIXES.OPACITY), []), [marks]);
|
|
18
|
+
const marksAnimation = useMemo(() => marks.reduce(reduceMark(MARKS_PREFIXES.ANIMATION), []), [marks]);
|
|
19
|
+
const style = useMemo(() => {
|
|
20
|
+
const result = {};
|
|
21
|
+
if (marksZoom.length)
|
|
22
|
+
result.zoom = marksZoom[marksZoom.length - 1];
|
|
23
|
+
if (marksColor.length)
|
|
24
|
+
result.color = marksColor[marksColor.length - 1];
|
|
25
|
+
if (marksWeight.length)
|
|
26
|
+
result.fontWeight = marksWeight[marksWeight.length - 1];
|
|
27
|
+
if (marksOpacity.length)
|
|
28
|
+
result["--vne-char-visible-opacity"] = marksOpacity[marksOpacity.length - 1];
|
|
29
|
+
if (marksAnimation.length)
|
|
30
|
+
result.animation = marksAnimation[marksAnimation.length - 1];
|
|
31
|
+
return result;
|
|
32
|
+
}, [marksZoom, marksColor, marksWeight, marksOpacity, marksAnimation]);
|
|
33
|
+
const otherMarks = useMemo(() => marks.reduce((acc, mark) => (MARKS_PREFIXES_VALUES.some((prefix) => mark.startsWith(prefix)) ? acc : { ...acc, [mark]: true }), {}), [marks]);
|
|
34
|
+
return (_jsx("div", { className: b({ isVisible, isForce, ...otherMarks }), style: style, children: token }));
|
|
35
|
+
};
|
|
36
|
+
//# sourceMappingURL=Char.js.map
|
package/dist/Char.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Char.js","sourceRoot":"","sources":["../src/Char.tsx"],"names":[],"mappings":"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"}
|
package/dist/Char.styl
ADDED
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
shakeShift = 0.25
|
|
2
|
+
|
|
3
|
+
@keyframes shake
|
|
4
|
+
0%
|
|
5
|
+
top: shakeShift * -1vh
|
|
6
|
+
left: 0
|
|
7
|
+
25%
|
|
8
|
+
top: 0px
|
|
9
|
+
left: shakeShift * -1vw
|
|
10
|
+
50%
|
|
11
|
+
top: shakeShift * 1vh
|
|
12
|
+
left: 0px
|
|
13
|
+
75%
|
|
14
|
+
top: 0px
|
|
15
|
+
left: shakeShift * 1vw
|
|
16
|
+
100%
|
|
17
|
+
top: shakeShift * -1vh
|
|
18
|
+
left: 0
|
|
19
|
+
|
|
20
|
+
@keyframes gradientExample
|
|
21
|
+
0%
|
|
22
|
+
color: #40E0D0
|
|
23
|
+
50%
|
|
24
|
+
color: #FF8C00
|
|
25
|
+
100%
|
|
26
|
+
color: #40E0D0
|
|
27
|
+
|
|
28
|
+
.Char
|
|
29
|
+
--vne-char-visible-opacity: 1
|
|
30
|
+
|
|
31
|
+
display: inline
|
|
32
|
+
|
|
33
|
+
opacity: 0
|
|
34
|
+
|
|
35
|
+
transition: inherit
|
|
36
|
+
|
|
37
|
+
position: relative
|
|
38
|
+
|
|
39
|
+
&_b
|
|
40
|
+
font-weight: bold
|
|
41
|
+
&_lt
|
|
42
|
+
text-decoration: line-through
|
|
43
|
+
&_ul
|
|
44
|
+
text-decoration: underline
|
|
45
|
+
&_i
|
|
46
|
+
font-style: italic
|
|
47
|
+
|
|
48
|
+
&_isVisible
|
|
49
|
+
opacity: var(--vne-char-visible-opacity)
|
|
50
|
+
|
|
51
|
+
&_isForce
|
|
52
|
+
transition: none
|
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.char",
|
|
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
|
+
}
|