@vnejs/uis.react.svg 0.1.5 → 0.1.7
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/Svg.d.ts +2 -1
- package/dist/Svg.d.ts.map +1 -1
- package/dist/Svg.js +2 -2
- package/dist/Svg.js.map +1 -1
- package/dist/Svg.styles.d.ts +1 -1
- package/dist/Svg.styles.d.ts.map +1 -1
- package/dist/Svg.types.d.ts +20 -0
- package/dist/Svg.types.d.ts.map +1 -0
- package/dist/Svg.types.js +2 -0
- package/dist/Svg.types.js.map +1 -0
- package/dist/components/Cross.d.ts +2 -7
- package/dist/components/Cross.d.ts.map +1 -1
- package/dist/components/Cross.js.map +1 -1
- package/dist/components/Cross.types.d.ts +9 -0
- package/dist/components/Cross.types.d.ts.map +1 -0
- package/dist/components/Cross.types.js +2 -0
- package/dist/components/Cross.types.js.map +1 -0
- package/dist/index.d.ts +2 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +2 -1
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/Svg.tsx +17 -6
- package/src/Svg.types.tsx +22 -0
- package/src/components/Cross.tsx +3 -1
- package/src/components/Cross.types.tsx +9 -0
- package/src/index.ts +2 -1
- package/tsconfig.json +1 -2
package/dist/Svg.d.ts
CHANGED
package/dist/Svg.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Svg.d.ts","sourceRoot":"","sources":["../src/Svg.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Svg.d.ts","sourceRoot":"","sources":["../src/Svg.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,YAAY,EAAiD,MAAM,gBAAgB,CAAC;AA+BlG,eAAO,MAAM,GAAG,EAAS,YAAY,CAAC"}
|
package/dist/Svg.js
CHANGED
|
@@ -3,7 +3,7 @@ import { useCallback, useMemo } from "react";
|
|
|
3
3
|
import { getVneLength } from "@vnejs/uis.utils";
|
|
4
4
|
import { SvgCross } from "./components/Cross";
|
|
5
5
|
import { b } from "./Svg.styles.js";
|
|
6
|
-
const useHooks = ({ isNotRender = false, color = null, colorHover = null, size = 60, opacity = null, transition = 300, onClick, value }) => {
|
|
6
|
+
const useHooks = ({ isNotRender = false, color = null, colorHover = null, size = 60, opacity = null, transition = 300, onClick, value, }) => {
|
|
7
7
|
const style = useMemo(() => {
|
|
8
8
|
const result = {};
|
|
9
9
|
if (color)
|
|
@@ -17,7 +17,7 @@ const useHooks = ({ isNotRender = false, color = null, colorHover = null, size =
|
|
|
17
17
|
if (size)
|
|
18
18
|
Object.assign(result, { width: getVneLength(size), height: getVneLength(size) });
|
|
19
19
|
return result;
|
|
20
|
-
}, [opacity, color, size, transition]);
|
|
20
|
+
}, [opacity, color, colorHover, size, transition]);
|
|
21
21
|
const onClickHandler = useCallback(() => onClick?.(value), [value, onClick]);
|
|
22
22
|
return [isNotRender, style, onClickHandler];
|
|
23
23
|
};
|
package/dist/Svg.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Svg.js","sourceRoot":"","sources":["../src/Svg.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAE7C,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAEhD,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;
|
|
1
|
+
{"version":3,"file":"Svg.js","sourceRoot":"","sources":["../src/Svg.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAE7C,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAEhD,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAI9C,OAAO,EAAE,CAAC,EAAE,MAAM,iBAAiB,CAAC;AAEpC,MAAM,QAAQ,GAAG,CAAK,EACpB,WAAW,GAAG,KAAK,EACnB,KAAK,GAAG,IAAI,EACZ,UAAU,GAAG,IAAI,EACjB,IAAI,GAAG,EAAE,EACT,OAAO,GAAG,IAAI,EACd,UAAU,GAAG,GAAG,EAChB,OAAO,EACP,KAAK,GACU,EAAE,EAAE;IACnB,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,EAAE;QACzB,MAAM,MAAM,GAAoC,EAAE,CAAC;QAEnD,IAAI,KAAK;YAAE,MAAM,CAAC,iBAAiB,CAAC,GAAG,KAAK,CAAC;QAC7C,IAAI,UAAU;YAAE,MAAM,CAAC,uBAAuB,CAAC,GAAG,UAAU,CAAC;QAC7D,IAAI,UAAU;YAAE,MAAM,CAAC,UAAU,GAAG,GAAG,UAAU,IAAI,CAAC;QACtD,IAAI,OAAO,KAAK,IAAI;YAAE,MAAM,CAAC,OAAO,GAAG,OAAO,CAAC;QAC/C,IAAI,IAAI;YAAE,MAAM,CAAC,MAAM,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,YAAY,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QAE3F,OAAO,MAAM,CAAC;IAChB,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC;IAEnD,MAAM,cAAc,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC;IAE7E,OAAO,CAAC,WAAW,EAAE,KAAK,EAAE,cAAc,CAAU,CAAC;AACvD,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,GAAG,GAAG,EAAkB,CAAC;AAEtC,GAAG,CAAC,KAAK,GAAG,CAAK,IAA+B,EAAE,EAAE;IAClD,MAAM,CAAC,WAAW,EAAE,KAAK,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAE5D,IAAI,WAAW;QAAE,OAAO,IAAI,CAAC;IAE7B,OAAO,CACL,KAAC,QAAQ,OACH,IAAI,EACR,SAAS,EAAE,CAAC,CAAC,EAAE,WAAW,EAAE,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,EACpD,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,cAAc,GACvB,CACH,CAAC;AACJ,CAAC,CAAC"}
|
package/dist/Svg.styles.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export declare const b:
|
|
1
|
+
export declare const b: any;
|
|
2
2
|
//# sourceMappingURL=Svg.styles.d.ts.map
|
package/dist/Svg.styles.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Svg.styles.d.ts","sourceRoot":"","sources":["../src/Svg.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,CAAC,
|
|
1
|
+
{"version":3,"file":"Svg.styles.d.ts","sourceRoot":"","sources":["../src/Svg.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,CAAC,KAAY,CAAC"}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import type { CSSProperties, ReactElement } from "react";
|
|
2
|
+
export type SvgHookArgs<T = unknown> = {
|
|
3
|
+
isNotRender?: boolean;
|
|
4
|
+
color?: string | null;
|
|
5
|
+
colorHover?: string | null;
|
|
6
|
+
size?: number;
|
|
7
|
+
opacity?: number | null;
|
|
8
|
+
transition?: number | null;
|
|
9
|
+
onClick?: (value?: T) => void;
|
|
10
|
+
value?: T;
|
|
11
|
+
};
|
|
12
|
+
export type SvgCrossComponentProps<T = unknown> = SvgHookArgs<T> & {
|
|
13
|
+
strokeWidth?: number;
|
|
14
|
+
className?: string;
|
|
15
|
+
style?: CSSProperties;
|
|
16
|
+
};
|
|
17
|
+
export type SvgComponent = {
|
|
18
|
+
Cross: <T = unknown>(args: SvgCrossComponentProps<T>) => ReactElement | null;
|
|
19
|
+
};
|
|
20
|
+
//# sourceMappingURL=Svg.types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Svg.types.d.ts","sourceRoot":"","sources":["../src/Svg.types.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAEzD,MAAM,MAAM,WAAW,CAAC,CAAC,GAAG,OAAO,IAAI;IACrC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,IAAI,CAAC;IAC9B,KAAK,CAAC,EAAE,CAAC,CAAC;CACX,CAAC;AAEF,MAAM,MAAM,sBAAsB,CAAC,CAAC,GAAG,OAAO,IAAI,WAAW,CAAC,CAAC,CAAC,GAAG;IACjE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,EAAE,CAAC,CAAC,GAAG,OAAO,EAAE,IAAI,EAAE,sBAAsB,CAAC,CAAC,CAAC,KAAK,YAAY,GAAG,IAAI,CAAC;CAC9E,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Svg.types.js","sourceRoot":"","sources":["../src/Svg.types.tsx"],"names":[],"mappings":""}
|
|
@@ -1,8 +1,3 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
strokeWidth?: number;
|
|
4
|
-
style: any;
|
|
5
|
-
onClick: any;
|
|
6
|
-
className: any;
|
|
7
|
-
}) => import("react/jsx-runtime").JSX.Element;
|
|
1
|
+
import { type SvgCrossProps } from "./Cross.types.js";
|
|
2
|
+
export declare const SvgCross: ({ size, strokeWidth, style, onClick, className }: SvgCrossProps) => import("react/jsx-runtime").JSX.Element;
|
|
8
3
|
//# sourceMappingURL=Cross.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Cross.d.ts","sourceRoot":"","sources":["../../src/components/Cross.tsx"],"names":[],"mappings":"AAAA,eAAO,MAAM,QAAQ,GAAI
|
|
1
|
+
{"version":3,"file":"Cross.d.ts","sourceRoot":"","sources":["../../src/components/Cross.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEtD,eAAO,MAAM,QAAQ,GAAI,kDAA2D,aAAa,4CAyBhG,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Cross.js","sourceRoot":"","sources":["../../src/components/Cross.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"Cross.js","sourceRoot":"","sources":["../../src/components/Cross.tsx"],"names":[],"mappings":";AAEA,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EAAE,IAAI,GAAG,EAAE,EAAE,WAAW,GAAG,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAiB,EAAE,EAAE,CAAC,CACpG,eACE,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,IAAI,EACX,MAAM,EAAE,IAAI,EACZ,OAAO,EAAE,OAAO,IAAI,IAAI,IAAI,EAAE,EAC9B,KAAK,EAAC,4BAA4B,EAClC,WAAW,EAAE,WAAW,EACxB,aAAa,EAAC,OAAO,EACrB,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,aAEhB,eACE,EAAE,EAAE,WAAW,EACf,EAAE,EAAE,WAAW,EACf,EAAE,EAAE,IAAI,GAAG,WAAW,EACtB,EAAE,EAAE,IAAI,GAAG,WAAW,GACtB,EACF,eACE,EAAE,EAAE,IAAI,GAAG,WAAW,EACtB,EAAE,EAAE,WAAW,EACf,EAAE,EAAE,WAAW,EACf,EAAE,EAAE,IAAI,GAAG,WAAW,GACtB,IACE,CACP,CAAC"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import type { CSSProperties, MouseEventHandler } from "react";
|
|
2
|
+
export type SvgCrossProps = {
|
|
3
|
+
size?: number;
|
|
4
|
+
strokeWidth?: number;
|
|
5
|
+
style?: CSSProperties;
|
|
6
|
+
onClick?: (() => void) | MouseEventHandler<SVGSVGElement>;
|
|
7
|
+
className?: string;
|
|
8
|
+
};
|
|
9
|
+
//# sourceMappingURL=Cross.types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Cross.types.d.ts","sourceRoot":"","sources":["../../src/components/Cross.types.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE9D,MAAM,MAAM,aAAa,GAAG;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,OAAO,CAAC,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,iBAAiB,CAAC,aAAa,CAAC,CAAC;IAC1D,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Cross.types.js","sourceRoot":"","sources":["../../src/components/Cross.types.tsx"],"names":[],"mappings":""}
|
package/dist/index.d.ts
CHANGED
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC"}
|
package/dist/index.js
CHANGED
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC"}
|
package/package.json
CHANGED
package/src/Svg.tsx
CHANGED
|
@@ -4,11 +4,22 @@ import { getVneLength } from "@vnejs/uis.utils";
|
|
|
4
4
|
|
|
5
5
|
import { SvgCross } from "./components/Cross";
|
|
6
6
|
|
|
7
|
+
import { type SvgComponent, type SvgCrossComponentProps, type SvgHookArgs } from "./Svg.types.js";
|
|
8
|
+
|
|
7
9
|
import { b } from "./Svg.styles.js";
|
|
8
10
|
|
|
9
|
-
const useHooks = ({
|
|
11
|
+
const useHooks = <T,>({
|
|
12
|
+
isNotRender = false,
|
|
13
|
+
color = null,
|
|
14
|
+
colorHover = null,
|
|
15
|
+
size = 60,
|
|
16
|
+
opacity = null,
|
|
17
|
+
transition = 300,
|
|
18
|
+
onClick,
|
|
19
|
+
value,
|
|
20
|
+
}: SvgHookArgs<T>) => {
|
|
10
21
|
const style = useMemo(() => {
|
|
11
|
-
const result: Record<string,
|
|
22
|
+
const result: Record<string, string | number> = {};
|
|
12
23
|
|
|
13
24
|
if (color) result["--vne-svg-color"] = color;
|
|
14
25
|
if (colorHover) result["--vne-svg-color-hover"] = colorHover;
|
|
@@ -17,16 +28,16 @@ const useHooks = ({ isNotRender = false, color = null, colorHover = null, size =
|
|
|
17
28
|
if (size) Object.assign(result, { width: getVneLength(size), height: getVneLength(size) });
|
|
18
29
|
|
|
19
30
|
return result;
|
|
20
|
-
}, [opacity, color, size, transition]);
|
|
31
|
+
}, [opacity, color, colorHover, size, transition]);
|
|
21
32
|
|
|
22
33
|
const onClickHandler = useCallback(() => onClick?.(value), [value, onClick]);
|
|
23
34
|
|
|
24
|
-
return [isNotRender, style, onClickHandler];
|
|
35
|
+
return [isNotRender, style, onClickHandler] as const;
|
|
25
36
|
};
|
|
26
37
|
|
|
27
|
-
export const Svg
|
|
38
|
+
export const Svg = {} as SvgComponent;
|
|
28
39
|
|
|
29
|
-
Svg.Cross = (args) => {
|
|
40
|
+
Svg.Cross = <T,>(args: SvgCrossComponentProps<T>) => {
|
|
30
41
|
const [isNotRender, style, onClickHandler] = useHooks(args);
|
|
31
42
|
|
|
32
43
|
if (isNotRender) return null;
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import type { CSSProperties, ReactElement } from "react";
|
|
2
|
+
|
|
3
|
+
export type SvgHookArgs<T = unknown> = {
|
|
4
|
+
isNotRender?: boolean;
|
|
5
|
+
color?: string | null;
|
|
6
|
+
colorHover?: string | null;
|
|
7
|
+
size?: number;
|
|
8
|
+
opacity?: number | null;
|
|
9
|
+
transition?: number | null;
|
|
10
|
+
onClick?: (value?: T) => void;
|
|
11
|
+
value?: T;
|
|
12
|
+
};
|
|
13
|
+
|
|
14
|
+
export type SvgCrossComponentProps<T = unknown> = SvgHookArgs<T> & {
|
|
15
|
+
strokeWidth?: number;
|
|
16
|
+
className?: string;
|
|
17
|
+
style?: CSSProperties;
|
|
18
|
+
};
|
|
19
|
+
|
|
20
|
+
export type SvgComponent = {
|
|
21
|
+
Cross: <T = unknown>(args: SvgCrossComponentProps<T>) => ReactElement | null;
|
|
22
|
+
};
|
package/src/components/Cross.tsx
CHANGED
|
@@ -1,4 +1,6 @@
|
|
|
1
|
-
|
|
1
|
+
import { type SvgCrossProps } from "./Cross.types.js";
|
|
2
|
+
|
|
3
|
+
export const SvgCross = ({ size = 60, strokeWidth = 6, style, onClick, className }: SvgCrossProps) => (
|
|
2
4
|
<svg
|
|
3
5
|
className={className}
|
|
4
6
|
width={size}
|
package/src/index.ts
CHANGED
|
@@ -1 +1,2 @@
|
|
|
1
|
-
export * from "./Svg";
|
|
1
|
+
export * from "./Svg.types.js";
|
|
2
|
+
export * from "./Svg.js";
|
package/tsconfig.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"extends": "
|
|
2
|
+
"extends": "../../tsconfig.react.base.json",
|
|
3
3
|
"compilerOptions": {
|
|
4
4
|
"outDir": "dist",
|
|
5
5
|
"rootDir": "src"
|
|
@@ -8,7 +8,6 @@
|
|
|
8
8
|
"src/**/*.ts",
|
|
9
9
|
"src/**/*.tsx",
|
|
10
10
|
"../../../globals.d.ts",
|
|
11
|
-
"../../../peer-modules.d.ts"
|
|
12
11
|
],
|
|
13
12
|
"exclude": [
|
|
14
13
|
"dist",
|