Skip to content

Commit d8dc16a

Browse files
NeunerleiNeunerlei
committed
fix: various build adjustments and fixes
1 parent 5264cb2 commit d8dc16a

File tree

6 files changed

+43
-32
lines changed

6 files changed

+43
-32
lines changed

‎README.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@ All [caveats](https://svelte.dev/docs/svelte/custom-elements#Caveats-and-limitat
7171

7272
### Custom features
7373

74-
We extended the default behaviours of svelte's custom elements to support some additional features
74+
We extended the default behaviors of svelte's custom elements to support some additional features
7575
for more convenient usage.
7676

7777
#### Passing content (children)
@@ -113,6 +113,7 @@ Only the components that are listed below are available as custom elements.
113113
- `hawk-formwrap`
114114
- `hawk-checkbox`
115115
- `hawk-select`
116+
- `hawk-footer`
116117

117118
### DEV-TIP: Adding custom elements:
118119

‎custom-elements.html‎

Lines changed: 35 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -4,37 +4,47 @@
44
<meta charset="UTF-8">
55
<title>Custom Elements Demo</title>
66
<link rel="stylesheet" href="./dist/_themes/theme-hawk-reset.css"/>
7-
<script src="./dist/_custom-elements/svelte-components.js" type="module"></script>
7+
<link rel="stylesheet" href="./dist/_custom-elements/custom-elements-fouc.css"/>
8+
<script src="./dist/_custom-elements/custom-elements.js" type="module"></script>
89
</head>
9-
<body style="padding:30px">
10+
<body style="display: flex; flex-direction: column; min-height: 100vh;">
11+
<div style="padding:20px; flex-grow: 1;">
1012

11-
<hawk-typo>
12-
<h1>Hello world</h1>
13-
<p>This is a paragraph <a href="#foo">with link</a></p>
14-
</hawk-typo>
15-
<br/>
16-
<hawk-formwrap>
17-
<hawk-input name="input" iconLeft="eye">
18-
<hawk-snippet property="label"><strong>Hello Label!</strong></hawk-snippet>
19-
</hawk-input>
13+
<hawk-typo>
14+
<h1>Hello world</h1>
15+
<p>This is a paragraph <a href="#foo">with link</a></p>
16+
</hawk-typo>
17+
<br/>
18+
<hawk-formwrap>
19+
<hawk-input name="input" iconLeft="eye">
20+
<hawk-snippet property="label"><strong>Hello Label!</strong></hawk-snippet>
21+
</hawk-input>
2022

21-
<hawk-input-password name="password" label="Password"></hawk-input-password>
23+
<hawk-input-password name="password" label="Password"></hawk-input-password>
2224

23-
<hawk-checkbox label="Are you sure?" name="checkbox" checked></hawk-checkbox>
25+
<hawk-checkbox label="Are you sure?" name="checkbox" checked></hawk-checkbox>
2426

25-
<hawk-select name="select" label="Select an option" id="select">
26-
<option value="1">Option 1</option>
27-
<option value="2" selected>Option 2</option>
28-
<option value="3">Option 3</option>
29-
</hawk-select>
30-
<script>
31-
document.getElementById('select').onchange = (e) => {
32-
console.log('Selected value:', e.detail.value);
33-
};
34-
</script>
27+
<hawk-select name="select" label="Select an option" id="select">
28+
<option value="1">Option 1</option>
29+
<option value="2" selected>Option 2</option>
30+
<option value="3">Option 3</option>
31+
</hawk-select>
32+
<script>
33+
document.getElementById('select').onchange = (e) => {
34+
console.log('Selected value:', e.detail.value);
35+
};
36+
</script>
3537

36-
<hawk-button onclick="alert('Submitting :D')">Submit</hawk-button>
37-
</hawk-formwrap>
38+
<hawk-button onclick="alert('Submitting :D')">Submit</hawk-button>
39+
</hawk-formwrap>
40+
<br/>
41+
</div>
3842

43+
<hawk-footer>
44+
<ul>
45+
<li><a href="#noop">Imprint</a></li>
46+
<li><a href="#noop">Privacy Policy</a></li>
47+
</ul>
48+
</hawk-footer>
3949
</body>
4050
</html>

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -44,8 +44,8 @@
4444
},
4545
"./custom-elements.js": {
4646
"types": "./dist/_custom-elements/index.d.ts",
47-
"require": "./dist/_custom-elements/svelte-components.umd.cjs",
48-
"default": "./dist/_custom-elements/svelte-components.js"
47+
"require": "./dist/_custom-elements/custom-elements.umd.cjs",
48+
"default": "./dist/_custom-elements/custom-elements.js"
4949
},
5050
"./custom-elements-fouc.css": {
5151
"require": "./dist/_custom-elements/custom-elements-fouc.css",

‎src/custom-elements.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,5 +10,6 @@ autoloadCustomElements({
1010
'hawk-headline': () => import('./lib/headline/Headline.svelte'),
1111
'hawk-formwrap': () => import('./lib/formwrap/Formwrap.svelte'),
1212
'hawk-checkbox': () => import('./lib/checkbox/Checkbox.svelte'),
13-
'hawk-select': () => import('./lib/select/Select.svelte')
13+
'hawk-select': () => import('./lib/select/Select.svelte'),
14+
'hawk-footer': () => import('./lib/footer/Footer.svelte'),
1415
});

‎vite.config.custom-elements.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,8 @@ export default defineConfig({
1414
outDir: 'dist/_custom-elements',
1515
lib: {
1616
entry: 'src/custom-elements.ts',
17-
name: 'SvelteCustomElements'
17+
name: 'CustomElements',
18+
fileName: 'custom-elements'
1819
}
1920
},
2021
plugins: [
@@ -27,7 +28,6 @@ export default defineConfig({
2728
modules: false,
2829
preprocessorOptions: {
2930
sass: {
30-
outputStyle: 'compressed',
3131
verbose: false
3232
}
3333
}

‎vite.config.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,6 @@ export default defineConfig({
1616
modules: false,
1717
preprocessorOptions: {
1818
sass: {
19-
outputStyle: 'compressed',
2019
verbose: false
2120
}
2221
}

0 commit comments

Comments
 (0)