@onsvisual/svelte-components 1.0.51 → 1.0.53
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.
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<script>
|
|
2
2
|
/**
|
|
3
3
|
* Set the type of icon
|
|
4
|
-
* @type {"arrow"|"carret"|"chevron"|"cog"|"cross"|"download"|"expand"|"external"|"pin"|"print"|"search"|"shrink"|"signout"|"tick"}
|
|
4
|
+
* @type {"arrow"|"carret"|"chevron"|"code"|"cog"|"cross"|"download"|"expand"|"external"|"pin"|"print"|"search"|"shrink"|"signout"|"tick"}
|
|
5
5
|
*/
|
|
6
6
|
export let type = "arrow";
|
|
7
7
|
/**
|
|
@@ -14,6 +14,16 @@
|
|
|
14
14
|
* @type {number}
|
|
15
15
|
*/
|
|
16
16
|
export let rotation = 0;
|
|
17
|
+
/**
|
|
18
|
+
* (Optional) Provide a custom SVG path string for the icon (overrides "type")
|
|
19
|
+
* @type {string|null}
|
|
20
|
+
*/
|
|
21
|
+
export let svgPath = null;
|
|
22
|
+
/**
|
|
23
|
+
* (Optional) If using a custom SVG path, specify the viewBox of the SVG
|
|
24
|
+
* @type {string}
|
|
25
|
+
*/
|
|
26
|
+
export let svgViewBox = "0 0 24 24";
|
|
17
27
|
/**
|
|
18
28
|
* Add a small margin on the left of the icon
|
|
19
29
|
* @type {boolean}
|
|
@@ -42,6 +52,10 @@
|
|
|
42
52
|
d: "M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6Z",
|
|
43
53
|
viewBox: "2 2 20 20"
|
|
44
54
|
},
|
|
55
|
+
code: {
|
|
56
|
+
d: "M9.4 16.6 4.8 12l4.6-4.6L8 6l-6 6 6 6zm5.2 0 4.6-4.6-4.6-4.6L16 6l6 6-6 6z",
|
|
57
|
+
viewBox: "2 2 20 20"
|
|
58
|
+
},
|
|
45
59
|
cross: {
|
|
46
60
|
d: "M12 1.2086L10.7914 0L6 4.79155L1.20857 0L0 1.2086L4.79143 6.00015L0 10.7917L1.20857 12.0003L6 7.20875L10.7914 12.0003L12 10.7917L7.20857 6.00015L12 1.2086Z",
|
|
47
61
|
viewBox: "0 0 12 12"
|
|
@@ -90,12 +104,12 @@
|
|
|
90
104
|
class="ons-icon {size ? `ons-icon--${size}` : ''}"
|
|
91
105
|
class:ons-u-ml-2xs={marginLeft}
|
|
92
106
|
class:ons-u-mr-2xs={marginRight}
|
|
93
|
-
viewBox={paths[type].viewBox}
|
|
107
|
+
viewBox={svgPath && svgViewBox ? svgViewBox : paths[type].viewBox}
|
|
94
108
|
xmlns="http://www.w3.org/2000/svg"
|
|
95
109
|
focusable="false"
|
|
96
110
|
fill="currentColor"
|
|
97
111
|
style:transform={rotation ? `rotate(${rotation}deg)` : null}
|
|
98
112
|
>
|
|
99
|
-
<path d={paths[type].d}></path>
|
|
113
|
+
<path d={svgPath || paths[type].d}></path>
|
|
100
114
|
</svg>
|
|
101
115
|
{/if}
|
|
@@ -2,9 +2,11 @@
|
|
|
2
2
|
/** @typedef {typeof __propDef.events} IconEvents */
|
|
3
3
|
/** @typedef {typeof __propDef.slots} IconSlots */
|
|
4
4
|
export default class Icon extends SvelteComponentTyped<{
|
|
5
|
-
type?: "search" | "expand" | "arrow" | "carret" | "chevron" | "cog" | "cross" | "download" | "external" | "pin" | "print" | "shrink" | "signout" | "tick" | undefined;
|
|
5
|
+
type?: "code" | "search" | "expand" | "arrow" | "carret" | "chevron" | "cog" | "cross" | "download" | "external" | "pin" | "print" | "shrink" | "signout" | "tick" | undefined;
|
|
6
6
|
size?: "s" | "m" | "l" | "xl" | "2xl" | "3xl" | null | undefined;
|
|
7
7
|
rotation?: number | undefined;
|
|
8
|
+
svgPath?: string | null | undefined;
|
|
9
|
+
svgViewBox?: string | undefined;
|
|
8
10
|
marginLeft?: boolean | undefined;
|
|
9
11
|
marginRight?: boolean | undefined;
|
|
10
12
|
}, {
|
|
@@ -17,9 +19,11 @@ export type IconSlots = typeof __propDef.slots;
|
|
|
17
19
|
import { SvelteComponentTyped } from "svelte";
|
|
18
20
|
declare const __propDef: {
|
|
19
21
|
props: {
|
|
20
|
-
type?: "search" | "expand" | "arrow" | "carret" | "chevron" | "cog" | "cross" | "download" | "external" | "pin" | "print" | "shrink" | "signout" | "tick" | undefined;
|
|
22
|
+
type?: "code" | "search" | "expand" | "arrow" | "carret" | "chevron" | "cog" | "cross" | "download" | "external" | "pin" | "print" | "shrink" | "signout" | "tick" | undefined;
|
|
21
23
|
size?: "s" | "m" | "l" | "xl" | "2xl" | "3xl" | null | undefined;
|
|
22
24
|
rotation?: number | undefined;
|
|
25
|
+
svgPath?: string | null | undefined;
|
|
26
|
+
svgViewBox?: string | undefined;
|
|
23
27
|
marginLeft?: boolean | undefined;
|
|
24
28
|
marginRight?: boolean | undefined;
|
|
25
29
|
};
|
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
export let small = false;
|
|
38
38
|
/**
|
|
39
39
|
* Icon on button, eg. "arrow", "search"
|
|
40
|
-
* @type {"arrow"|"carret"|"chevron"|"cog"|"cross"|"download"|"expand"|"external"|"pin"|"print"|"search"|"shrink"|"signout"|"tick"|null}
|
|
40
|
+
* @type {"arrow"|"carret"|"chevron"|"code"|"cog"|"cross"|"download"|"expand"|"external"|"pin"|"print"|"search"|"shrink"|"signout"|"tick"|null}
|
|
41
41
|
*/
|
|
42
42
|
export let icon = null;
|
|
43
43
|
/**
|
|
@@ -10,7 +10,7 @@ export default class Button extends SvelteComponentTyped<{
|
|
|
10
10
|
type?: "button" | "reset" | "submit" | undefined;
|
|
11
11
|
variant?: "secondary" | "primary" | "ghost" | undefined;
|
|
12
12
|
noScroll?: boolean | undefined;
|
|
13
|
-
icon?: "search" | "expand" | "arrow" | "carret" | "chevron" | "cog" | "cross" | "download" | "external" | "pin" | "print" | "shrink" | "signout" | "tick" | null | undefined;
|
|
13
|
+
icon?: "code" | "search" | "expand" | "arrow" | "carret" | "chevron" | "cog" | "cross" | "download" | "external" | "pin" | "print" | "shrink" | "signout" | "tick" | null | undefined;
|
|
14
14
|
iconPosition?: "before" | "after" | undefined;
|
|
15
15
|
iconRotation?: number | undefined;
|
|
16
16
|
disabled?: boolean | undefined;
|
|
@@ -39,7 +39,7 @@ declare const __propDef: {
|
|
|
39
39
|
type?: "button" | "reset" | "submit" | undefined;
|
|
40
40
|
variant?: "secondary" | "primary" | "ghost" | undefined;
|
|
41
41
|
noScroll?: boolean | undefined;
|
|
42
|
-
icon?: "search" | "expand" | "arrow" | "carret" | "chevron" | "cog" | "cross" | "download" | "external" | "pin" | "print" | "shrink" | "signout" | "tick" | null | undefined;
|
|
42
|
+
icon?: "code" | "search" | "expand" | "arrow" | "carret" | "chevron" | "cog" | "cross" | "download" | "external" | "pin" | "print" | "shrink" | "signout" | "tick" | null | undefined;
|
|
43
43
|
iconPosition?: "before" | "after" | undefined;
|
|
44
44
|
iconRotation?: number | undefined;
|
|
45
45
|
disabled?: boolean | undefined;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@onsvisual/svelte-components",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.53",
|
|
4
4
|
"scripts": {
|
|
5
5
|
"dev": "vite dev",
|
|
6
6
|
"build": "npm run build:package && npm run build:docs",
|
|
@@ -37,6 +37,8 @@
|
|
|
37
37
|
"./css/main.css": "./dist/css/main.css"
|
|
38
38
|
},
|
|
39
39
|
"peerDependencies": {
|
|
40
|
+
"d3-scale": "^4.0.2",
|
|
41
|
+
"d3-shape": "^3.2.0",
|
|
40
42
|
"parse-color": "^1.0.0",
|
|
41
43
|
"pym.js": "^1.3.2",
|
|
42
44
|
"svelte": "3 - 5"
|
|
@@ -61,8 +63,6 @@
|
|
|
61
63
|
"@vitest/browser": "3.2.3",
|
|
62
64
|
"@vitest/coverage-v8": "3.2.3",
|
|
63
65
|
"csso": "^5.0.5",
|
|
64
|
-
"d3-scale": "^4.0.2",
|
|
65
|
-
"d3-shape": "^3.2.0",
|
|
66
66
|
"eslint": "^9.18.0",
|
|
67
67
|
"eslint-config-prettier": "^10.0.1",
|
|
68
68
|
"eslint-plugin-storybook": "^9.0.11",
|