sve-ui 0.0.5 → 0.0.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/components/Box/Box.svelte +0 -0
- package/dist/components/Box/Box.svelte.d.ts +23 -0
- package/dist/components/CodeExample/CodeExample.svelte +113 -0
- package/dist/components/CodeExample/CodeExample.svelte.d.ts +36 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -0
- package/package.json +67 -66
|
File without changes
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
/** @typedef {typeof __propDef.props} BoxProps */
|
|
2
|
+
/** @typedef {typeof __propDef.events} BoxEvents */
|
|
3
|
+
/** @typedef {typeof __propDef.slots} BoxSlots */
|
|
4
|
+
export default class Box extends SvelteComponentTyped<{
|
|
5
|
+
[x: string]: never;
|
|
6
|
+
}, {
|
|
7
|
+
[evt: string]: CustomEvent<any>;
|
|
8
|
+
}, {}> {
|
|
9
|
+
}
|
|
10
|
+
export type BoxProps = typeof __propDef.props;
|
|
11
|
+
export type BoxEvents = typeof __propDef.events;
|
|
12
|
+
export type BoxSlots = typeof __propDef.slots;
|
|
13
|
+
import { SvelteComponentTyped } from "svelte";
|
|
14
|
+
declare const __propDef: {
|
|
15
|
+
props: {
|
|
16
|
+
[x: string]: never;
|
|
17
|
+
};
|
|
18
|
+
events: {
|
|
19
|
+
[evt: string]: CustomEvent<any>;
|
|
20
|
+
};
|
|
21
|
+
slots: {};
|
|
22
|
+
};
|
|
23
|
+
export {};
|
|
@@ -0,0 +1,113 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
export let typeCodeLabel = 'Sve-UI';
|
|
3
|
+
|
|
4
|
+
let copied = false;
|
|
5
|
+
let text = globalThis?.document?.getElementById('textCode')?.innerHTML || '';
|
|
6
|
+
|
|
7
|
+
const copyToClipboard = async () => {
|
|
8
|
+
try {
|
|
9
|
+
await navigator.clipboard.writeText(text);
|
|
10
|
+
copied = true;
|
|
11
|
+
setTimeout(() => {
|
|
12
|
+
copied = false;
|
|
13
|
+
}, 1500);
|
|
14
|
+
} catch (err) {
|
|
15
|
+
console.error('Failed to copy: ', err);
|
|
16
|
+
}
|
|
17
|
+
};
|
|
18
|
+
</script>
|
|
19
|
+
|
|
20
|
+
<section class="code-box">
|
|
21
|
+
<article class="button-copy">
|
|
22
|
+
<span>{typeCodeLabel}</span>
|
|
23
|
+
<button on:click={copyToClipboard}>
|
|
24
|
+
{#if copied}
|
|
25
|
+
<span>Copied</span>
|
|
26
|
+
{:else}
|
|
27
|
+
<svg
|
|
28
|
+
stroke="currentColor"
|
|
29
|
+
fill="none"
|
|
30
|
+
stroke-width="2"
|
|
31
|
+
viewBox="0 0 24 24"
|
|
32
|
+
stroke-linecap="round"
|
|
33
|
+
stroke-linejoin="round"
|
|
34
|
+
class="h-4 w-4"
|
|
35
|
+
height="1em"
|
|
36
|
+
width="1em"
|
|
37
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
38
|
+
><path
|
|
39
|
+
d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"
|
|
40
|
+
/><rect x="8" y="2" width="8" height="4" rx="1" ry="1" /></svg
|
|
41
|
+
>
|
|
42
|
+
<span>Copy</span>
|
|
43
|
+
{/if}
|
|
44
|
+
</button>
|
|
45
|
+
</article>
|
|
46
|
+
|
|
47
|
+
<pre>
|
|
48
|
+
<code id="textCode" class={copied ? 'textCode' : ''}>
|
|
49
|
+
<slot />
|
|
50
|
+
</code>
|
|
51
|
+
</pre>
|
|
52
|
+
</section>
|
|
53
|
+
|
|
54
|
+
<style>
|
|
55
|
+
.code-box {
|
|
56
|
+
background-color: #070606;
|
|
57
|
+
border-radius: 4px;
|
|
58
|
+
max-width: 75ch;
|
|
59
|
+
border-top-left-radius: 0.375rem;
|
|
60
|
+
border-top-right-radius: 0.375rem;
|
|
61
|
+
margin: 0 auto;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.code-box pre code {
|
|
65
|
+
font-size: 0.9rem;
|
|
66
|
+
font-family: 'Söhne Mono', 'Monaco', 'Andale Mono', 'Ubuntu Mono', monospace;
|
|
67
|
+
color: #fffdfa;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.textCode {
|
|
71
|
+
background-color: #71c562;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
button {
|
|
75
|
+
display: flex;
|
|
76
|
+
margin-left: auto;
|
|
77
|
+
gap: 0.5rem;
|
|
78
|
+
cursor: pointer;
|
|
79
|
+
background-color: transparent;
|
|
80
|
+
border: none;
|
|
81
|
+
color: #fffdfa;
|
|
82
|
+
transition: background-color 0.2s ease-in-out;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
button:hover {
|
|
86
|
+
background-color: #71c56250;
|
|
87
|
+
border-radius: 4px;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
button:active {
|
|
91
|
+
background-color: #71c562;
|
|
92
|
+
border-radius: 4px;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
.button-copy {
|
|
96
|
+
display: flex;
|
|
97
|
+
align-items: center;
|
|
98
|
+
background-color: rgba(52, 53, 65, 0.6);
|
|
99
|
+
border-top-left-radius: 0.375rem;
|
|
100
|
+
border-top-right-radius: 0.375rem;
|
|
101
|
+
padding: 0.8rem;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
@media only screen and (max-width: 768px) {
|
|
105
|
+
.code-box {
|
|
106
|
+
max-width: 100%;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
.button-copy {
|
|
110
|
+
padding: 0.8rem 1.8rem;
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
</style>
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
/** @typedef {typeof __propDef.props} CodeExampleProps */
|
|
2
|
+
/** @typedef {typeof __propDef.events} CodeExampleEvents */
|
|
3
|
+
/** @typedef {typeof __propDef.slots} CodeExampleSlots */
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* A code example component is used to show a code example with UI experiencie.
|
|
7
|
+
* @see Docs https://sveui.org/components/codeexample
|
|
8
|
+
*/
|
|
9
|
+
export default class CodeExample extends SvelteComponentTyped<{
|
|
10
|
+
typeCodeLabel?: string | undefined;
|
|
11
|
+
}, {
|
|
12
|
+
[evt: string]: CustomEvent<any>;
|
|
13
|
+
}, {
|
|
14
|
+
default: {};
|
|
15
|
+
}> {
|
|
16
|
+
}
|
|
17
|
+
export type CodeExampleProps = typeof __propDef.props;
|
|
18
|
+
export type CodeExampleEvents = typeof __propDef.events;
|
|
19
|
+
export type CodeExampleSlots = typeof __propDef.slots;
|
|
20
|
+
import { SvelteComponentTyped } from "svelte";
|
|
21
|
+
declare const __propDef: {
|
|
22
|
+
props: {
|
|
23
|
+
/**
|
|
24
|
+
* The type code label
|
|
25
|
+
* @default 'Sve-UI'
|
|
26
|
+
*/
|
|
27
|
+
typeCodeLabel?: string | undefined;
|
|
28
|
+
};
|
|
29
|
+
events: {
|
|
30
|
+
[evt: string]: CustomEvent<any>;
|
|
31
|
+
};
|
|
32
|
+
slots: {
|
|
33
|
+
default: {};
|
|
34
|
+
};
|
|
35
|
+
};
|
|
36
|
+
export { CodeExample, CodeExampleProps };
|
package/dist/index.d.ts
CHANGED
package/dist/index.js
CHANGED
package/package.json
CHANGED
|
@@ -1,68 +1,69 @@
|
|
|
1
1
|
{
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
2
|
+
"name": "sve-ui",
|
|
3
|
+
"version": "0.0.7",
|
|
4
|
+
"scripts": {
|
|
5
|
+
"dev": "vite dev",
|
|
6
|
+
"build": "vite build && npm run package",
|
|
7
|
+
"preview": "vite preview",
|
|
8
|
+
"package": "svelte-kit sync && svelte-package && publint",
|
|
9
|
+
"prepublishOnly": "npm run package",
|
|
10
|
+
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
|
|
11
|
+
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
|
|
12
|
+
"test:unit": "vitest",
|
|
13
|
+
"lint": "prettier --plugin-search-dir . --check . && eslint .",
|
|
14
|
+
"format": "prettier --plugin-search-dir . --write ."
|
|
15
|
+
},
|
|
16
|
+
"exports": {
|
|
17
|
+
".": {
|
|
18
|
+
"types": "./dist/index.d.ts",
|
|
19
|
+
"svelte": "./dist/index.js"
|
|
20
|
+
}
|
|
21
|
+
},
|
|
22
|
+
"files": [
|
|
23
|
+
"dist"
|
|
24
|
+
],
|
|
25
|
+
"peerDependencies": {
|
|
26
|
+
"svelte": "^3.54.0"
|
|
27
|
+
},
|
|
28
|
+
"devDependencies": {
|
|
29
|
+
"@sveltejs/adapter-auto": "^2.0.0",
|
|
30
|
+
"@sveltejs/kit": "^1.5.0",
|
|
31
|
+
"@sveltejs/package": "^2.0.0",
|
|
32
|
+
"@typescript-eslint/eslint-plugin": "^5.45.0",
|
|
33
|
+
"@typescript-eslint/parser": "^5.45.0",
|
|
34
|
+
"eslint": "^8.28.0",
|
|
35
|
+
"eslint-config-prettier": "^8.5.0",
|
|
36
|
+
"eslint-plugin-svelte3": "^4.0.0",
|
|
37
|
+
"prettier": "^2.8.0",
|
|
38
|
+
"prettier-plugin-svelte": "^2.8.1",
|
|
39
|
+
"publint": "^0.1.9",
|
|
40
|
+
"svelte": "^3.54.0",
|
|
41
|
+
"svelte-check": "^3.0.1",
|
|
42
|
+
"tslib": "^2.4.1",
|
|
43
|
+
"typescript": "^5.0.0",
|
|
44
|
+
"vite": "^4.2.0",
|
|
45
|
+
"vitest": "^0.25.3"
|
|
46
|
+
},
|
|
47
|
+
"svelte": "./dist/index.js",
|
|
48
|
+
"types": "./dist/index.d.ts",
|
|
49
|
+
"type": "module",
|
|
50
|
+
"license": "MIT",
|
|
51
|
+
"author": "Rodrigo Abregu <me@rodriab.io> (https://rodriab.io/)",
|
|
52
|
+
"repository": {
|
|
53
|
+
"type": "git",
|
|
54
|
+
"url": "https://github.com/rodriabregu/sve-ui.git"
|
|
55
|
+
},
|
|
56
|
+
"bugs": {
|
|
57
|
+
"url": "https://github.com/rodriabregu/sve-ui/issues"
|
|
58
|
+
},
|
|
59
|
+
"homepage": "https://sveui.org/",
|
|
60
|
+
"description": "Sve-UI is a collection of customizable UI components for Svelte applications. These components are designed to be easy to use and highly flexible, allowing developers to quickly build beautiful interfaces. Sve-UI includes buttons, forms, modals, and other commonly used UI elements, all built with Svelte's lightweight and efficient framework.",
|
|
61
|
+
"keywords": [
|
|
62
|
+
"components",
|
|
63
|
+
"svelte",
|
|
64
|
+
"kit",
|
|
65
|
+
"ui",
|
|
66
|
+
"vite",
|
|
67
|
+
"component library"
|
|
68
|
+
]
|
|
68
69
|
}
|