@functionalcms/svelte-components 5.0.0-beta1 → 5.0.0-beta3

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,180 +1,180 @@
1
- <script lang="ts">
2
- import { type Snippet } from "svelte";
3
-
4
- interface Props {
5
- imageLeftSrc: string;
6
- imageLeftAlt: string;
7
- imageRightSrc: string;
8
- imageRightAlt: string;
9
- slidertLabel: Snippet;
10
- }
11
-
12
- let {
13
- imageLeftSrc = "",
14
- imageLeftAlt = "",
15
- imageRightSrc = "",
16
- imageRightAlt = "",
17
- slidertLabel,
18
- }: Partial<Props> = $props();
19
-
20
- let sliderPosition: number = $state(50);
21
- let animationFrame: number | null = $state(null);
22
-
23
- function handleInput(e: Event) {
24
- if (animationFrame) cancelAnimationFrame(animationFrame);
25
-
26
- animationFrame = requestAnimationFrame(() => {
27
- sliderPosition = (e.target as HTMLInputElement).valueAsNumber;
28
- });
29
- }
30
-
31
- function handleClick(e: Event) {
32
- (e.target as HTMLInputElement).focus();
33
- }
34
- </script>
35
-
36
- <div
37
- class="svelte-compare-image-container"
38
- style="--slider-position: {sliderPosition}%;"
39
- >
40
- <img src={imageLeftSrc} alt={imageLeftAlt} class="left-img" />
41
- <img src={imageRightSrc} alt={imageRightAlt} class="right-img" />
42
-
43
- <label>
44
- <input
45
- type="range"
46
- min="0"
47
- max="100"
48
- value={sliderPosition}
49
- oninput={handleInput}
50
- onchange={handleInput}
51
- onclick={handleClick}
52
- />
53
- </label>
54
- </div>
55
-
56
- <style>
57
- .svelte-compare-image-container {
58
- box-sizing: border-box;
59
- position: relative;
60
- overflow: hidden;
61
- }
62
-
63
- .svelte-compare-image-container:focus-within {
64
- outline: auto 4px rgba(59, 153, 252, 0.7);
65
- outline: auto 4px Highlight;
66
- outline: auto 4px -moz-mac-focusring;
67
- outline: auto 4px -webkit-focus-ring-color;
68
- }
69
-
70
- img {
71
- display: block;
72
- height: auto;
73
- width: 100%;
74
- margin: 0;
75
- }
76
-
77
- .left-img {
78
- clip-path: polygon(
79
- 0 0,
80
- var(--slider-position) 0,
81
- var(--slider-position) 100%,
82
- 0 100%
83
- );
84
- }
85
-
86
- .right-img {
87
- position: absolute;
88
- top: 0;
89
- clip-path: polygon(
90
- var(--slider-position) 0,
91
- 100% 0,
92
- 100% 100%,
93
- var(--slider-position) 100%
94
- );
95
- }
96
-
97
- label {
98
- position: absolute;
99
- display: flex;
100
- align-items: stretch;
101
- top: 0;
102
- left: 0;
103
- bottom: 0;
104
- right: 0;
105
- background: transparent;
106
- }
107
-
108
- label::before {
109
- content: "";
110
- position: absolute;
111
- top: 0;
112
- bottom: 0;
113
- left: calc(var(--slider-position) - var(--slider-width, 0.125rem) / 2);
114
- width: var(--slider-width, 0.125rem);
115
- background: var(--slider-color, #ffffff);
116
- pointer-events: none;
117
- }
118
-
119
- input[type="range"] {
120
- position: relative;
121
- cursor: col-resize;
122
- margin: 0 calc(var(--handle-size, 2.5rem) / -2);
123
- width: calc(100% + var(--handle-size, 2.5rem));
124
- padding: 0;
125
- border-radius: 0;
126
- appearance: none;
127
- -webkit-appearance: none;
128
- background: none;
129
- border: none;
130
- }
131
-
132
- input[type="range"]::-moz-range-thumb {
133
- display: flex;
134
- justify-content: center;
135
- align-items: center;
136
- background-color: var(--handle-background-color, rgba(0, 0, 0, 0.6));
137
- background-image: var(
138
- --handle-background-image,
139
- url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M3 12H21M3 12L7 8M3 12L7 16M21 12L17 16M21 12L17 8" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>')
140
- );
141
- background-size: 80%;
142
- background-position: center center;
143
- background-repeat: no-repeat;
144
- border: var(--handle-border-width, 0.125rem) solid
145
- var(--slider-color, #ffffff);
146
- border-radius: 100%;
147
- box-shadow:
148
- 0 3px 1px -2px rgba(0, 0, 0, 0.2),
149
- 0 2px 2px 0 rgba(0, 0, 0, 0.14),
150
- 0 1px 5px 0 rgba(0, 0, 0, 0.12);
151
- color: var(--slider-color, #ffffff);
152
- width: var(--handle-size, 2.5rem);
153
- height: var(--handle-size, 2.5rem);
154
- }
155
-
156
- input[type="range"]::-webkit-slider-thumb {
157
- -webkit-appearance: none;
158
- display: flex;
159
- justify-content: center;
160
- align-items: center;
161
- background-color: var(--handle-background-color, rgba(0, 0, 0, 0.6));
162
- background-image: var(
163
- --handle-background-image,
164
- url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M3 12H21M3 12L7 8M3 12L7 16M21 12L17 16M21 12L17 8" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>')
165
- );
166
- background-size: 80%;
167
- background-position: center center;
168
- background-repeat: no-repeat;
169
- border: var(--handle-border-width, 0.125rem) solid
170
- var(--slider-color, #ffffff);
171
- border-radius: 100%;
172
- box-shadow:
173
- 0 3px 1px -2px rgba(0, 0, 0, 0.2),
174
- 0 2px 2px 0 rgba(0, 0, 0, 0.14),
175
- 0 1px 5px 0 rgba(0, 0, 0, 0.12);
176
- color: var(--slider-color, #ffffff);
177
- width: var(--handle-size, 2.5rem);
178
- height: var(--handle-size, 2.5rem);
179
- }
180
- </style>
1
+ <script lang="ts">
2
+ import { type Snippet } from "svelte";
3
+
4
+ interface Props {
5
+ imageLeftSrc: string;
6
+ imageLeftAlt: string;
7
+ imageRightSrc: string;
8
+ imageRightAlt: string;
9
+ slidertLabel: Snippet;
10
+ }
11
+
12
+ let {
13
+ imageLeftSrc = "",
14
+ imageLeftAlt = "",
15
+ imageRightSrc = "",
16
+ imageRightAlt = "",
17
+ slidertLabel,
18
+ }: Partial<Props> = $props();
19
+
20
+ let sliderPosition: number = $state(50);
21
+ let animationFrame: number | null = $state(null);
22
+
23
+ function handleInput(e: Event) {
24
+ if (animationFrame) cancelAnimationFrame(animationFrame);
25
+
26
+ animationFrame = requestAnimationFrame(() => {
27
+ sliderPosition = (e.target as HTMLInputElement).valueAsNumber;
28
+ });
29
+ }
30
+
31
+ function handleClick(e: Event) {
32
+ (e.target as HTMLInputElement).focus();
33
+ }
34
+ </script>
35
+
36
+ <div
37
+ class="svelte-compare-image-container"
38
+ style="--slider-position: {sliderPosition}%;"
39
+ >
40
+ <img src={imageLeftSrc} alt={imageLeftAlt} class="left-img" />
41
+ <img src={imageRightSrc} alt={imageRightAlt} class="right-img" />
42
+
43
+ <label>
44
+ <input
45
+ type="range"
46
+ min="0"
47
+ max="100"
48
+ value={sliderPosition}
49
+ oninput={handleInput}
50
+ onchange={handleInput}
51
+ onclick={handleClick}
52
+ />
53
+ </label>
54
+ </div>
55
+
56
+ <style>
57
+ .svelte-compare-image-container {
58
+ box-sizing: border-box;
59
+ position: relative;
60
+ overflow: hidden;
61
+ }
62
+
63
+ .svelte-compare-image-container:focus-within {
64
+ outline: auto 4px rgba(59, 153, 252, 0.7);
65
+ outline: auto 4px Highlight;
66
+ outline: auto 4px -moz-mac-focusring;
67
+ outline: auto 4px -webkit-focus-ring-color;
68
+ }
69
+
70
+ img {
71
+ display: block;
72
+ height: auto;
73
+ width: 100%;
74
+ margin: 0;
75
+ }
76
+
77
+ .left-img {
78
+ clip-path: polygon(
79
+ 0 0,
80
+ var(--slider-position) 0,
81
+ var(--slider-position) 100%,
82
+ 0 100%
83
+ );
84
+ }
85
+
86
+ .right-img {
87
+ position: absolute;
88
+ top: 0;
89
+ clip-path: polygon(
90
+ var(--slider-position) 0,
91
+ 100% 0,
92
+ 100% 100%,
93
+ var(--slider-position) 100%
94
+ );
95
+ }
96
+
97
+ label {
98
+ position: absolute;
99
+ display: flex;
100
+ align-items: stretch;
101
+ top: 0;
102
+ left: 0;
103
+ bottom: 0;
104
+ right: 0;
105
+ background: transparent;
106
+ }
107
+
108
+ label::before {
109
+ content: "";
110
+ position: absolute;
111
+ top: 0;
112
+ bottom: 0;
113
+ left: calc(var(--slider-position) - var(--slider-width, 0.125rem) / 2);
114
+ width: var(--slider-width, 0.125rem);
115
+ background: var(--slider-color, #ffffff);
116
+ pointer-events: none;
117
+ }
118
+
119
+ input[type="range"] {
120
+ position: relative;
121
+ cursor: col-resize;
122
+ margin: 0 calc(var(--handle-size, 2.5rem) / -2);
123
+ width: calc(100% + var(--handle-size, 2.5rem));
124
+ padding: 0;
125
+ border-radius: 0;
126
+ appearance: none;
127
+ -webkit-appearance: none;
128
+ background: none;
129
+ border: none;
130
+ }
131
+
132
+ input[type="range"]::-moz-range-thumb {
133
+ display: flex;
134
+ justify-content: center;
135
+ align-items: center;
136
+ background-color: var(--handle-background-color, rgba(0, 0, 0, 0.6));
137
+ background-image: var(
138
+ --handle-background-image,
139
+ url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M3 12H21M3 12L7 8M3 12L7 16M21 12L17 16M21 12L17 8" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>')
140
+ );
141
+ background-size: 80%;
142
+ background-position: center center;
143
+ background-repeat: no-repeat;
144
+ border: var(--handle-border-width, 0.125rem) solid
145
+ var(--slider-color, #ffffff);
146
+ border-radius: 100%;
147
+ box-shadow:
148
+ 0 3px 1px -2px rgba(0, 0, 0, 0.2),
149
+ 0 2px 2px 0 rgba(0, 0, 0, 0.14),
150
+ 0 1px 5px 0 rgba(0, 0, 0, 0.12);
151
+ color: var(--slider-color, #ffffff);
152
+ width: var(--handle-size, 2.5rem);
153
+ height: var(--handle-size, 2.5rem);
154
+ }
155
+
156
+ input[type="range"]::-webkit-slider-thumb {
157
+ -webkit-appearance: none;
158
+ display: flex;
159
+ justify-content: center;
160
+ align-items: center;
161
+ background-color: var(--handle-background-color, rgba(0, 0, 0, 0.6));
162
+ background-image: var(
163
+ --handle-background-image,
164
+ url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M3 12H21M3 12L7 8M3 12L7 16M21 12L17 16M21 12L17 8" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>')
165
+ );
166
+ background-size: 80%;
167
+ background-position: center center;
168
+ background-repeat: no-repeat;
169
+ border: var(--handle-border-width, 0.125rem) solid
170
+ var(--slider-color, #ffffff);
171
+ border-radius: 100%;
172
+ box-shadow:
173
+ 0 3px 1px -2px rgba(0, 0, 0, 0.2),
174
+ 0 2px 2px 0 rgba(0, 0, 0, 0.14),
175
+ 0 1px 5px 0 rgba(0, 0, 0, 0.12);
176
+ color: var(--slider-color, #ffffff);
177
+ width: var(--handle-size, 2.5rem);
178
+ height: var(--handle-size, 2.5rem);
179
+ }
180
+ </style>
@@ -1,37 +1,37 @@
1
- <script lang="ts">
2
- interface Props {
3
- companyName: string;
4
- logoUrl: string;
5
- css: string;
6
- }
7
-
8
- let {
9
- companyName,
10
- logoUrl,
11
- css = 'logo'
12
- }: Partial<Props> = $props();
13
-
14
- </script>
15
-
16
- <a href="/" class={css}>
17
- <img src={logoUrl} alt={companyName} loading="lazy" />
18
- </a>
19
-
20
- <style>
21
- a {
22
- display: var(--logo-display, 'inline-block');
23
- margin: var(--mobile-logo-margin);
24
- padding: var(--mobile-logo-padding);
25
- }
26
- a img {
27
- width: 100%;
28
- width: var(--logo-width, 200px);
29
- }
30
-
31
- @media (min-width: 960px) {
32
- a img {
33
- margin: var(--logo-margin);
34
- padding: var(--logo-padding);
35
- }
36
- }
37
- </style>
1
+ <script lang="ts">
2
+ interface Props {
3
+ companyName: string;
4
+ logoUrl: string;
5
+ css: string;
6
+ }
7
+
8
+ let {
9
+ companyName,
10
+ logoUrl,
11
+ css = 'logo'
12
+ }: Partial<Props> = $props();
13
+
14
+ </script>
15
+
16
+ <a href="/" class={css}>
17
+ <img src={logoUrl} alt={companyName} loading="lazy" />
18
+ </a>
19
+
20
+ <style>
21
+ a {
22
+ display: var(--logo-display, 'inline-block');
23
+ margin: var(--mobile-logo-margin);
24
+ padding: var(--mobile-logo-padding);
25
+ }
26
+ a img {
27
+ width: 100%;
28
+ width: var(--logo-width, 200px);
29
+ }
30
+
31
+ @media (min-width: 960px) {
32
+ a img {
33
+ margin: var(--logo-margin);
34
+ padding: var(--logo-padding);
35
+ }
36
+ }
37
+ </style>
package/package.json CHANGED
@@ -1,75 +1,75 @@
1
- {
2
- "name": "@functionalcms/svelte-components",
3
- "version": "5.0.0-beta1",
4
- "license": "MIT",
5
- "watch": {
6
- "build": {
7
- "patterns": [
8
- "src"
9
- ],
10
- "extensions": "ts,svelte,scss",
11
- "legacyWatch": false
12
- }
13
- },
14
- "scripts": {
15
- "dev": "vite dev",
16
- "build-css": "node -e \"const fs = require('node:fs'); fs.mkdirSync('./css', { recursive: true }); fs.copyFileSync('./src/css/functional.css', './css/functional.css');\"",
17
- "build": "vite build && npm run package",
18
- "preview": "vite preview",
19
- "package": "npm run build-css && svelte-kit sync && svelte-package && publint",
20
- "prepublishOnly": "npm run package",
21
- "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
22
- "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
23
- "build:watch": "nodemon --watch src --exec \"npm run build\""
24
- },
25
- "exports": {
26
- ".": {
27
- "types": "./dist/index.d.ts",
28
- "svelte": "./dist/index.js"
29
- },
30
- "./index-server.js": {
31
- "types": "./dist/index-server.d.ts",
32
- "svelte": "./dist/index-server.js"
33
- },
34
- "./css/functional.css": "./css/functional.css",
35
- "./package.json": "./package.json"
36
- },
37
- "files": [
38
- "dist",
39
- "css",
40
- "!dist/**/*.test.*",
41
- "!dist/**/*.spec.*"
42
- ],
43
- "devDependencies": {
44
- "@functionalcms/services": "latest",
45
- "@sveltejs/adapter-auto": "^7.0.1",
46
- "@sveltejs/kit": "^2.55.0",
47
- "@sveltejs/package": "^2.5.7",
48
- "@sveltejs/vite-plugin-svelte": "^7.0.0",
49
- "publint": "^0.3.18",
50
- "svelte": "^5.54.0",
51
- "svelte-check": "^4.4.5",
52
- "tailwind-merge": "^3.5.0",
53
- "tailwind-variants": "^3.2.2",
54
- "tw-animate-css": "^1.4.0",
55
- "typescript": "^5.9.3",
56
- "vite": "^8.0.1"
57
- },
58
- "dependencies": {
59
- "@tailwindcss/vite": "^4.2.2",
60
- "flowbite": "^4.0.1",
61
- "flowbite-svelte": "^1.31.0",
62
- "flowbite-svelte-icons": "^3.1.0",
63
- "ioredis": "^5.10.0",
64
- "oauth4webapi": "^3.8.5",
65
- "tailwindcss": "^4.2.2"
66
- },
67
- "peerDependencies": {
68
- "@sveltejs/kit": "^2.55.0",
69
- "svelte": "^5.53.13"
70
- },
71
- "type": "module",
72
- "main": "./dist/index.js",
73
- "svelte": "./dist/index.js",
74
- "types": "./dist/index.d.ts"
75
- }
1
+ {
2
+ "name": "@functionalcms/svelte-components",
3
+ "version": "5.0.0-beta3",
4
+ "license": "MIT",
5
+ "watch": {
6
+ "build": {
7
+ "patterns": [
8
+ "src"
9
+ ],
10
+ "extensions": "ts,svelte,scss",
11
+ "legacyWatch": false
12
+ }
13
+ },
14
+ "scripts": {
15
+ "dev": "vite dev",
16
+ "build-css": "node -e \"const fs = require('node:fs'); fs.mkdirSync('./css', { recursive: true }); fs.copyFileSync('./src/css/functional.css', './css/functional.css');\"",
17
+ "build": "vite build && npm run package",
18
+ "preview": "vite preview",
19
+ "package": "npm run build-css && svelte-kit sync && svelte-package && publint",
20
+ "prepublishOnly": "npm run package",
21
+ "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
22
+ "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
23
+ "build:watch": "nodemon --watch src --exec \"npm run build\""
24
+ },
25
+ "exports": {
26
+ ".": {
27
+ "types": "./dist/index.d.ts",
28
+ "svelte": "./dist/index.js"
29
+ },
30
+ "./index-server.js": {
31
+ "types": "./dist/index-server.d.ts",
32
+ "svelte": "./dist/index-server.js"
33
+ },
34
+ "./css/functional.css": "./css/functional.css",
35
+ "./package.json": "./package.json"
36
+ },
37
+ "files": [
38
+ "dist",
39
+ "css",
40
+ "!dist/**/*.test.*",
41
+ "!dist/**/*.spec.*"
42
+ ],
43
+ "devDependencies": {
44
+ "@functionalcms/services": "latest",
45
+ "@sveltejs/adapter-auto": "^7.0.1",
46
+ "@sveltejs/kit": "^2.55.0",
47
+ "@sveltejs/package": "^2.5.7",
48
+ "@sveltejs/vite-plugin-svelte": "^7.0.0",
49
+ "publint": "^0.3.18",
50
+ "svelte": "^5.54.0",
51
+ "svelte-check": "^4.4.5",
52
+ "tailwind-merge": "^3.5.0",
53
+ "tailwind-variants": "^3.2.2",
54
+ "tw-animate-css": "^1.4.0",
55
+ "typescript": "^5.9.3",
56
+ "vite": "^8.0.1"
57
+ },
58
+ "dependencies": {
59
+ "@tailwindcss/vite": "^4.2.2",
60
+ "flowbite": "^4.0.1",
61
+ "flowbite-svelte": "^1.31.0",
62
+ "flowbite-svelte-icons": "^3.1.0",
63
+ "ioredis": "^5.10.0",
64
+ "oauth4webapi": "^3.8.5",
65
+ "tailwindcss": "^4.2.2"
66
+ },
67
+ "peerDependencies": {
68
+ "@sveltejs/kit": "^2.55.0",
69
+ "svelte": "^5.53.13"
70
+ },
71
+ "type": "module",
72
+ "main": "./dist/index.js",
73
+ "svelte": "./dist/index.js",
74
+ "types": "./dist/index.d.ts"
75
+ }