@functionalcms/svelte-components 4.10.15 → 4.10.20
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.
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import ChoiceInput from "./ChoiceInput.svelte";
|
|
3
|
+
import type { Field, Validation } from "./form.js";
|
|
4
|
+
import Input from "./Input.svelte";
|
|
5
|
+
import Select from "./Select.svelte";
|
|
6
|
+
import Switch from "./Switch.svelte";
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
interface Props {
|
|
10
|
+
schema: Validation;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
let { schema }: Props = $props();
|
|
14
|
+
|
|
15
|
+
const fields = Object.keys(schema.shape).map((key) => ({
|
|
16
|
+
name: key,
|
|
17
|
+
type:
|
|
18
|
+
schema.shape[key].def.type == 'optional'
|
|
19
|
+
? schema.shape[key].def.innerType._def.type
|
|
20
|
+
: schema.shape[key].def.type,
|
|
21
|
+
subType: schema.shape[key].def.format,
|
|
22
|
+
meta: { ...schema.shape[key].meta() },
|
|
23
|
+
entries: schema.shape[key]._def.innerType
|
|
24
|
+
? schema.shape[key]._def.innerType._def.entries
|
|
25
|
+
: schema.shape[key]._def.entries,
|
|
26
|
+
field: schema.shape[key]
|
|
27
|
+
}));
|
|
28
|
+
|
|
29
|
+
function getFieldType(field: Field) {
|
|
30
|
+
if (field.type === 'number') {
|
|
31
|
+
return 'number';
|
|
32
|
+
}
|
|
33
|
+
if (field.meta.multiline) {
|
|
34
|
+
return 'textarea';
|
|
35
|
+
}
|
|
36
|
+
if (field.meta.secure) {
|
|
37
|
+
return 'password';
|
|
38
|
+
}
|
|
39
|
+
switch (field.subType) {
|
|
40
|
+
case 'email':
|
|
41
|
+
return 'email';
|
|
42
|
+
case 'url':
|
|
43
|
+
return 'url';
|
|
44
|
+
case 'tel':
|
|
45
|
+
return 'tel';
|
|
46
|
+
case 'password':
|
|
47
|
+
return 'password';
|
|
48
|
+
case 'email':
|
|
49
|
+
return 'email';
|
|
50
|
+
}
|
|
51
|
+
return 'string';
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
function mapEntiresToOptions(field: Field) {
|
|
55
|
+
if (field.entries) {
|
|
56
|
+
let result = Object.keys(field.entries).map((key) => ({
|
|
57
|
+
label: key,
|
|
58
|
+
value: field.entries[key]
|
|
59
|
+
}));
|
|
60
|
+
return result;
|
|
61
|
+
} else {
|
|
62
|
+
return [];
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
</script>
|
|
66
|
+
|
|
67
|
+
<form method="POST">
|
|
68
|
+
<fieldset>
|
|
69
|
+
{#each fields as field}
|
|
70
|
+
<div>
|
|
71
|
+
{#if field.type === 'boolean'}
|
|
72
|
+
<Switch name={field.name} id={field.name} label={field.name} />
|
|
73
|
+
{:else if field.type === 'enum' && field.meta.type === 'select'}
|
|
74
|
+
<Select
|
|
75
|
+
name={field.name}
|
|
76
|
+
id={field.name}
|
|
77
|
+
label={field.name}
|
|
78
|
+
options={mapEntiresToOptions(field)}
|
|
79
|
+
/>
|
|
80
|
+
{:else if field.type === 'enum'}
|
|
81
|
+
<ChoiceInput
|
|
82
|
+
name={field.name}
|
|
83
|
+
id={field.name}
|
|
84
|
+
label={field.name}
|
|
85
|
+
type={field.meta.type}
|
|
86
|
+
options={mapEntiresToOptions(field)}
|
|
87
|
+
/>
|
|
88
|
+
{:else if field.type === 'string' || field.type === 'number'}
|
|
89
|
+
<Input
|
|
90
|
+
name={field.name}
|
|
91
|
+
id={field.name}
|
|
92
|
+
label={field.name}
|
|
93
|
+
type={getFieldType(field)}
|
|
94
|
+
required
|
|
95
|
+
/>
|
|
96
|
+
{/if}
|
|
97
|
+
</div>
|
|
98
|
+
{/each}
|
|
99
|
+
</fieldset>
|
|
100
|
+
</form>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/package.json
CHANGED
|
@@ -1,84 +1,84 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "@functionalcms/svelte-components",
|
|
3
|
-
"version": "4.10.
|
|
4
|
-
"watch": {
|
|
5
|
-
"build": {
|
|
6
|
-
"patterns": [
|
|
7
|
-
"src"
|
|
8
|
-
],
|
|
9
|
-
"extensions": "ts,svelte,scss",
|
|
10
|
-
"legacyWatch": false
|
|
11
|
-
}
|
|
12
|
-
},
|
|
13
|
-
"scripts": {
|
|
14
|
-
"dev": "vite dev",
|
|
15
|
-
"build-css": "sass ./src/lib/css/functional.scss ./css/functional.css --style compressed",
|
|
16
|
-
"build": "npm run build-css && vite build && npm run package",
|
|
17
|
-
"preview": "vite preview",
|
|
18
|
-
"package": "svelte-kit sync && svelte-package && publint",
|
|
19
|
-
"prepublishOnly": "npm run build-css && npm run package",
|
|
20
|
-
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
|
|
21
|
-
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
|
|
22
|
-
"lint": "eslint . && prettier --check .",
|
|
23
|
-
"format": "prettier --write .",
|
|
24
|
-
"watch": "npm-watch build"
|
|
25
|
-
},
|
|
26
|
-
"exports": {
|
|
27
|
-
".": {
|
|
28
|
-
"types": "./dist/index.d.ts",
|
|
29
|
-
"svelte": "./dist/index.js"
|
|
30
|
-
},
|
|
31
|
-
"./index-server.js": {
|
|
32
|
-
"types": "./dist/index-server.d.ts",
|
|
33
|
-
"svelte": "./dist/index-server.js"
|
|
34
|
-
},
|
|
35
|
-
"./css": "./css/*.css",
|
|
36
|
-
"./package.json": "./package.json"
|
|
37
|
-
},
|
|
38
|
-
"files": [
|
|
39
|
-
"dist",
|
|
40
|
-
"css",
|
|
41
|
-
"!dist/css/**/*.*",
|
|
42
|
-
"!dist/**/*.test.*",
|
|
43
|
-
"!dist/**/*.spec.*"
|
|
44
|
-
],
|
|
45
|
-
"devDependencies": {
|
|
46
|
-
"@eslint/compat": "^1.2.9",
|
|
47
|
-
"@eslint/js": "^9.26.0",
|
|
48
|
-
"@functionalcms/services": "^0.12.0",
|
|
49
|
-
"@sveltejs/adapter-auto": "^4.0.0",
|
|
50
|
-
"@sveltejs/package": "^2.3.11",
|
|
51
|
-
"@sveltejs/vite-plugin-svelte": "^5.0.3",
|
|
52
|
-
"autoprefixer": "^10.4.21",
|
|
53
|
-
"eslint": "^9.26.0",
|
|
54
|
-
"eslint-config-prettier": "^10.1.2",
|
|
55
|
-
"eslint-plugin-svelte": "^3.5.1",
|
|
56
|
-
"npm-watch": "^0.13.0",
|
|
57
|
-
"prettier": "^3.5.3",
|
|
58
|
-
"prettier-plugin-svelte": "^3.3.3",
|
|
59
|
-
"publint": "^0.3.12",
|
|
60
|
-
"sass": "^1.83.4",
|
|
61
|
-
"svelte": "^5.28.2",
|
|
62
|
-
"svelte-check": "^4.1.7",
|
|
63
|
-
"sveltekit-superforms": "^2.25.0",
|
|
64
|
-
"typescript": "^5.8.3",
|
|
65
|
-
"typescript-eslint": "^8.31.1",
|
|
66
|
-
"vite": "^6.3.4",
|
|
67
|
-
"zod": "^4.0.0-beta.20250430T185432"
|
|
68
|
-
},
|
|
69
|
-
"dependencies": {
|
|
70
|
-
"embla-carousel-svelte": "^8.6.0",
|
|
71
|
-
"ioredis": "^5.6.1",
|
|
72
|
-
"marked": "^15.0.11",
|
|
73
|
-
"oauth4webapi": "^3.5.0",
|
|
74
|
-
"superforms": "^0.0.1"
|
|
75
|
-
},
|
|
76
|
-
"peerDependencies": {
|
|
77
|
-
"@sveltejs/kit": "^2.20.8",
|
|
78
|
-
"svelte": "^5.28.2"
|
|
79
|
-
},
|
|
80
|
-
"type": "module",
|
|
81
|
-
"main": "./dist/index.js",
|
|
82
|
-
"svelte": "./dist/index.js",
|
|
83
|
-
"types": "./dist/index.d.ts"
|
|
84
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "@functionalcms/svelte-components",
|
|
3
|
+
"version": "4.10.20",
|
|
4
|
+
"watch": {
|
|
5
|
+
"build": {
|
|
6
|
+
"patterns": [
|
|
7
|
+
"src"
|
|
8
|
+
],
|
|
9
|
+
"extensions": "ts,svelte,scss",
|
|
10
|
+
"legacyWatch": false
|
|
11
|
+
}
|
|
12
|
+
},
|
|
13
|
+
"scripts": {
|
|
14
|
+
"dev": "vite dev",
|
|
15
|
+
"build-css": "sass ./src/lib/css/functional.scss ./css/functional.css --style compressed",
|
|
16
|
+
"build": "npm run build-css && vite build && npm run package",
|
|
17
|
+
"preview": "vite preview",
|
|
18
|
+
"package": "svelte-kit sync && svelte-package && publint",
|
|
19
|
+
"prepublishOnly": "npm run build-css && npm run package",
|
|
20
|
+
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
|
|
21
|
+
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
|
|
22
|
+
"lint": "eslint . && prettier --check .",
|
|
23
|
+
"format": "prettier --write .",
|
|
24
|
+
"watch": "npm-watch build"
|
|
25
|
+
},
|
|
26
|
+
"exports": {
|
|
27
|
+
".": {
|
|
28
|
+
"types": "./dist/index.d.ts",
|
|
29
|
+
"svelte": "./dist/index.js"
|
|
30
|
+
},
|
|
31
|
+
"./index-server.js": {
|
|
32
|
+
"types": "./dist/index-server.d.ts",
|
|
33
|
+
"svelte": "./dist/index-server.js"
|
|
34
|
+
},
|
|
35
|
+
"./css": "./css/*.css",
|
|
36
|
+
"./package.json": "./package.json"
|
|
37
|
+
},
|
|
38
|
+
"files": [
|
|
39
|
+
"dist",
|
|
40
|
+
"css",
|
|
41
|
+
"!dist/css/**/*.*",
|
|
42
|
+
"!dist/**/*.test.*",
|
|
43
|
+
"!dist/**/*.spec.*"
|
|
44
|
+
],
|
|
45
|
+
"devDependencies": {
|
|
46
|
+
"@eslint/compat": "^1.2.9",
|
|
47
|
+
"@eslint/js": "^9.26.0",
|
|
48
|
+
"@functionalcms/services": "^0.12.0",
|
|
49
|
+
"@sveltejs/adapter-auto": "^4.0.0",
|
|
50
|
+
"@sveltejs/package": "^2.3.11",
|
|
51
|
+
"@sveltejs/vite-plugin-svelte": "^5.0.3",
|
|
52
|
+
"autoprefixer": "^10.4.21",
|
|
53
|
+
"eslint": "^9.26.0",
|
|
54
|
+
"eslint-config-prettier": "^10.1.2",
|
|
55
|
+
"eslint-plugin-svelte": "^3.5.1",
|
|
56
|
+
"npm-watch": "^0.13.0",
|
|
57
|
+
"prettier": "^3.5.3",
|
|
58
|
+
"prettier-plugin-svelte": "^3.3.3",
|
|
59
|
+
"publint": "^0.3.12",
|
|
60
|
+
"sass": "^1.83.4",
|
|
61
|
+
"svelte": "^5.28.2",
|
|
62
|
+
"svelte-check": "^4.1.7",
|
|
63
|
+
"sveltekit-superforms": "^2.25.0",
|
|
64
|
+
"typescript": "^5.8.3",
|
|
65
|
+
"typescript-eslint": "^8.31.1",
|
|
66
|
+
"vite": "^6.3.4",
|
|
67
|
+
"zod": "^4.0.0-beta.20250430T185432"
|
|
68
|
+
},
|
|
69
|
+
"dependencies": {
|
|
70
|
+
"embla-carousel-svelte": "^8.6.0",
|
|
71
|
+
"ioredis": "^5.6.1",
|
|
72
|
+
"marked": "^15.0.11",
|
|
73
|
+
"oauth4webapi": "^3.5.0",
|
|
74
|
+
"superforms": "^0.0.1"
|
|
75
|
+
},
|
|
76
|
+
"peerDependencies": {
|
|
77
|
+
"@sveltejs/kit": "^2.20.8",
|
|
78
|
+
"svelte": "^5.28.2"
|
|
79
|
+
},
|
|
80
|
+
"type": "module",
|
|
81
|
+
"main": "./dist/index.js",
|
|
82
|
+
"svelte": "./dist/index.js",
|
|
83
|
+
"types": "./dist/index.d.ts"
|
|
84
|
+
}
|