@kvass/widgets 1.2.3 → 1.2.5
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/index.html +7 -5
- package/package.json +8 -6
- package/src/font-selector/README.md +60 -0
- package/src/font-selector/components/FontSelector.ce.vue +246 -0
- package/src/font-selector/main.js +4 -0
- package/src/font-selector/providers.js +48 -0
- package/src/font-selector/selector.svg +7 -0
- package/vite.config.js +6 -4
package/index.html
CHANGED
|
@@ -8,7 +8,8 @@
|
|
|
8
8
|
<title>Kvass Web Components</title>
|
|
9
9
|
</head>
|
|
10
10
|
|
|
11
|
-
<body
|
|
11
|
+
<body
|
|
12
|
+
style="font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;">
|
|
12
13
|
<!-- <kvass-contact
|
|
13
14
|
account-url="https://local.kvass.test"
|
|
14
15
|
label-subtitle="Ønsker du å motta vårt nyhetsbrev?"
|
|
@@ -27,10 +28,11 @@
|
|
|
27
28
|
|
|
28
29
|
<script type="module" src="/src/img-comparison-slider/main.js"></script> -->
|
|
29
30
|
<!-- <kvass-map coordinates="10.745,59.9123" address="Klokkergårdveien 5, 1711 Sarpsborg" show-address /> -->
|
|
30
|
-
<kvass-flatfinder project-url="https://alvebergtunet.production.kvass.no" project-id="65a4f48ed1ba5cd61468f235"
|
|
31
|
-
path-prefix="/residential"
|
|
32
|
-
|
|
33
|
-
<
|
|
31
|
+
<!-- <kvass-flatfinder project-url="https://alvebergtunet.production.kvass.no" project-id="65a4f48ed1ba5cd61468f235"
|
|
32
|
+
path-prefix="/residential" />
|
|
33
|
+
<script type="module" src="/dist/flatfinder.js"></script> -->
|
|
34
|
+
<kvass-font-selector></kvass-font-selector>
|
|
35
|
+
<script type="module" src="/src/font-selector/main.js"></script>
|
|
34
36
|
</body>
|
|
35
37
|
|
|
36
38
|
</html>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kvass/widgets",
|
|
3
|
-
"version": "1.2.
|
|
3
|
+
"version": "1.2.5",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"dev": "vite",
|
|
@@ -12,13 +12,15 @@
|
|
|
12
12
|
"@kvass/map": "^1.0.4",
|
|
13
13
|
"@kvass/ui": "^1.6.0",
|
|
14
14
|
"@kvass/vue3-flatfinder": "^1.0.15",
|
|
15
|
-
"
|
|
15
|
+
"@vueuse/core": "^10.7.2",
|
|
16
|
+
"vue": "^3.4.15",
|
|
17
|
+
"webfontloader": "^1.6.28"
|
|
16
18
|
},
|
|
17
19
|
"devDependencies": {
|
|
18
|
-
"@
|
|
19
|
-
"
|
|
20
|
-
"sass": "^1.
|
|
21
|
-
"vite": "^
|
|
20
|
+
"@types/webfontloader": "^1.6.38",
|
|
21
|
+
"@vitejs/plugin-vue": "^5.0.3",
|
|
22
|
+
"sass": "^1.70.0",
|
|
23
|
+
"vite": "^5.0.12"
|
|
22
24
|
},
|
|
23
25
|
"repository": {
|
|
24
26
|
"type": "git",
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
# kvass-font-selector
|
|
2
|
+
|
|
3
|
+
A simple, embeddable Web Component for selecting fonts.
|
|
4
|
+
|
|
5
|
+
`https://unpkg.com/@kvass/widgets@latest/dist/font-selector.js`
|
|
6
|
+
|
|
7
|
+
## Develop
|
|
8
|
+
|
|
9
|
+
To run in development mode, first install the neccessary packages.
|
|
10
|
+
|
|
11
|
+
```
|
|
12
|
+
npm install
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
Then, run in development mode.
|
|
16
|
+
|
|
17
|
+
```
|
|
18
|
+
npm run dev
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
Open `localhost:3000` in the browser of your choice, and you will see the form widget.
|
|
22
|
+
|
|
23
|
+
## Build
|
|
24
|
+
|
|
25
|
+
To build the widget for production, run `build` instead of `dev`.
|
|
26
|
+
|
|
27
|
+
```
|
|
28
|
+
npm run build
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
To use the widget, use the `<kvass-flatfinder />` element as shown here.
|
|
32
|
+
|
|
33
|
+
```html
|
|
34
|
+
<kvass-font-selector provider="google" />
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
## Props
|
|
38
|
+
|
|
39
|
+
The component has several props for easy configuration.
|
|
40
|
+
|
|
41
|
+
| Name | Type | Description | Default |
|
|
42
|
+
| :----------- | :----- | :-------------------------------- | :------- |
|
|
43
|
+
| provider | String | The provider to fetch fonts from. | `google` |
|
|
44
|
+
| default-font | String | The default selected font. | |
|
|
45
|
+
|
|
46
|
+
## Styling
|
|
47
|
+
|
|
48
|
+
The widget's styles are based on CSS custom properties, and can be overwritten.
|
|
49
|
+
These are the available CSS variables.
|
|
50
|
+
|
|
51
|
+
| Name | Description | Default |
|
|
52
|
+
| :------------------------------------- | :------------------------------------ | :-------- |
|
|
53
|
+
| --kvass-font-selector-border-radius | The border radius of the input field | `6px` |
|
|
54
|
+
| --kvass-font-selector-background-color | The background color of the component | `white` |
|
|
55
|
+
| --kvass-font-selector-padding-y | The inline padding | `1rem` |
|
|
56
|
+
| --kvass-font-selector-padding-x | The block padding | `1rem` |
|
|
57
|
+
| --kvass-font-selector-border-width | The width of the borders | `1px` |
|
|
58
|
+
| --kvass-font-selector-border-style | The style of the borders | `solid` |
|
|
59
|
+
| --kvass-font-selector-border-color | The color of the borders | #`eaeaea` |
|
|
60
|
+
| --kvass-font-selector-max-width | The maximum width of the component | `500px` |
|
|
@@ -0,0 +1,246 @@
|
|
|
1
|
+
<script setup>
|
|
2
|
+
import { computed, onMounted, ref, watch } from 'vue'
|
|
3
|
+
import { useCurrentElement } from '@vueuse/core'
|
|
4
|
+
import { providers } from '../providers.js'
|
|
5
|
+
import WebFontLoader from 'webfontloader'
|
|
6
|
+
|
|
7
|
+
const props = defineProps({
|
|
8
|
+
provider: {
|
|
9
|
+
type: String,
|
|
10
|
+
default: 'google',
|
|
11
|
+
},
|
|
12
|
+
type: {
|
|
13
|
+
type: String,
|
|
14
|
+
default: 'text',
|
|
15
|
+
validator: (value) => ['text', 'heading'].includes(value),
|
|
16
|
+
},
|
|
17
|
+
defaultFont: String,
|
|
18
|
+
})
|
|
19
|
+
|
|
20
|
+
const selectedProvider = computed(() =>
|
|
21
|
+
providers.find((p) => p.value === props.provider),
|
|
22
|
+
)
|
|
23
|
+
|
|
24
|
+
const selectedFont = ref(
|
|
25
|
+
selectedProvider.value?.fonts.find((f) => f.value === props.defaultFont) ||
|
|
26
|
+
selectedProvider.value?.fonts[0],
|
|
27
|
+
)
|
|
28
|
+
|
|
29
|
+
const element = useCurrentElement()
|
|
30
|
+
|
|
31
|
+
watch(selectedFont, (newFont) => {
|
|
32
|
+
if (!newFont) return
|
|
33
|
+
|
|
34
|
+
// emit custom event
|
|
35
|
+
element.value.dispatchEvent(
|
|
36
|
+
new CustomEvent('webcomponent:update', {
|
|
37
|
+
detail: {
|
|
38
|
+
font: newFont,
|
|
39
|
+
provider: selectedProvider.value,
|
|
40
|
+
},
|
|
41
|
+
bubbles: true,
|
|
42
|
+
composed: true,
|
|
43
|
+
}),
|
|
44
|
+
)
|
|
45
|
+
})
|
|
46
|
+
|
|
47
|
+
const styles = computed(
|
|
48
|
+
() =>
|
|
49
|
+
selectedFont.value &&
|
|
50
|
+
`--kvass-font-selector-font-family: '${selectedFont.value.value}'`,
|
|
51
|
+
)
|
|
52
|
+
|
|
53
|
+
onMounted(() => {
|
|
54
|
+
if (!selectedProvider.value) throw new Error('Invalid provider')
|
|
55
|
+
|
|
56
|
+
// Initialize WebFontLoader
|
|
57
|
+
const config = Object.fromEntries(
|
|
58
|
+
Object.entries(providers).map(([_, provider]) => [
|
|
59
|
+
provider.value,
|
|
60
|
+
{ families: provider.fonts.map((font) => `${font.value}:400,700`) },
|
|
61
|
+
]),
|
|
62
|
+
)
|
|
63
|
+
|
|
64
|
+
WebFontLoader.load(config)
|
|
65
|
+
})
|
|
66
|
+
</script>
|
|
67
|
+
|
|
68
|
+
<template>
|
|
69
|
+
<div class="kvass-font-selector" :style="styles">
|
|
70
|
+
<select v-model="selectedFont" class="kvass-font-selector__input">
|
|
71
|
+
<optgroup
|
|
72
|
+
v-for="provider in providers"
|
|
73
|
+
:key="provider.value"
|
|
74
|
+
:label="provider.label"
|
|
75
|
+
>
|
|
76
|
+
<option v-for="font in provider.fonts" :key="font.value" :value="font">
|
|
77
|
+
{{ font.label }}
|
|
78
|
+
</option>
|
|
79
|
+
</optgroup>
|
|
80
|
+
</select>
|
|
81
|
+
<div
|
|
82
|
+
:class="[
|
|
83
|
+
`kvass-font-selector__preview kvass-font-selector__preview--${props.type}`,
|
|
84
|
+
]"
|
|
85
|
+
>
|
|
86
|
+
<small class="kvass-font-selector__preview-label">Forhåndsvisning</small>
|
|
87
|
+
<template v-if="props.type === 'heading'">
|
|
88
|
+
<h1>Hovedtittel</h1>
|
|
89
|
+
<h2>Sekundærtittel</h2>
|
|
90
|
+
<h3>Tertiærtittel</h3>
|
|
91
|
+
</template>
|
|
92
|
+
<template v-if="props.type === 'text'">
|
|
93
|
+
<p>
|
|
94
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus
|
|
95
|
+
imperdiet, nulla et dictum interdum.
|
|
96
|
+
</p>
|
|
97
|
+
</template>
|
|
98
|
+
</div>
|
|
99
|
+
</div>
|
|
100
|
+
</template>
|
|
101
|
+
|
|
102
|
+
<style lang="scss">
|
|
103
|
+
@import url('@kvass/ui/style.css');
|
|
104
|
+
|
|
105
|
+
.kvass-font-selector {
|
|
106
|
+
// Default variables
|
|
107
|
+
--__kvass-font-selector-background-color: white;
|
|
108
|
+
--__kvass-font-selector-padding-y: 1rem;
|
|
109
|
+
--__kvass-font-selector-padding-x: 1rem;
|
|
110
|
+
--__kvass-font-selector-border-width: 1px;
|
|
111
|
+
--__kvass-font-selector-border-style: solid;
|
|
112
|
+
--__kvass-font-selector-border-color: #eaeaea;
|
|
113
|
+
--__kvass-font-selector-border-radius: 6px;
|
|
114
|
+
--__kvass-font-selector-max-width: 500px;
|
|
115
|
+
|
|
116
|
+
border-radius: var(
|
|
117
|
+
--kvass-font-selector-border-radius,
|
|
118
|
+
var(--__kvass-font-selector-border-radius)
|
|
119
|
+
);
|
|
120
|
+
background-color: var(
|
|
121
|
+
--kvass-font-selector-background-color,
|
|
122
|
+
var(--__kvass-font-selector-background-color)
|
|
123
|
+
);
|
|
124
|
+
max-width: var(
|
|
125
|
+
--kvass-font-selector-max-width,
|
|
126
|
+
var(--__kvass-font-selector-max-width)
|
|
127
|
+
);
|
|
128
|
+
position: relative;
|
|
129
|
+
|
|
130
|
+
&::after {
|
|
131
|
+
content: url('../selector.svg');
|
|
132
|
+
position: absolute;
|
|
133
|
+
right: var(
|
|
134
|
+
--kvass-font-selector-padding-x,
|
|
135
|
+
var(--__kvass-font-selector-padding-x)
|
|
136
|
+
);
|
|
137
|
+
top: var(
|
|
138
|
+
--kvass-font-selector-padding-y,
|
|
139
|
+
var(--__kvass-font-selector-padding-y)
|
|
140
|
+
);
|
|
141
|
+
pointer-events: none;
|
|
142
|
+
opacity: 0.5;
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
&__input {
|
|
146
|
+
appearance: none;
|
|
147
|
+
font: inherit;
|
|
148
|
+
width: 100%;
|
|
149
|
+
padding: var(
|
|
150
|
+
--kvass-font-selector-padding-y,
|
|
151
|
+
var(--__kvass-font-selector-padding-y)
|
|
152
|
+
)
|
|
153
|
+
var(
|
|
154
|
+
--kvass-font-selector-padding-x,
|
|
155
|
+
var(--__kvass-font-selector-padding-x)
|
|
156
|
+
);
|
|
157
|
+
border: var(
|
|
158
|
+
--kvass-font-selector-border-width,
|
|
159
|
+
var(--__kvass-font-selector-border-width)
|
|
160
|
+
)
|
|
161
|
+
var(
|
|
162
|
+
--kvass-font-selector-border-style,
|
|
163
|
+
var(--__kvass-font-selector-border-style)
|
|
164
|
+
)
|
|
165
|
+
var(
|
|
166
|
+
--kvass-font-selector-border-color,
|
|
167
|
+
var(--__kvass-font-selector-border-color)
|
|
168
|
+
);
|
|
169
|
+
border-top-left-radius: var(
|
|
170
|
+
--kvass-font-selector-border-radius,
|
|
171
|
+
var(--__kvass-font-selector-border-radius)
|
|
172
|
+
);
|
|
173
|
+
border-top-right-radius: var(
|
|
174
|
+
--kvass-font-selector-border-radius,
|
|
175
|
+
var(--__kvass-font-selector-border-radius)
|
|
176
|
+
);
|
|
177
|
+
border-bottom: none;
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
&__preview {
|
|
181
|
+
display: flex;
|
|
182
|
+
flex-direction: column;
|
|
183
|
+
gap: 1rem;
|
|
184
|
+
padding: var(
|
|
185
|
+
--kvass-font-selector-padding-y,
|
|
186
|
+
var(--__kvass-font-selector-padding-y)
|
|
187
|
+
)
|
|
188
|
+
var(
|
|
189
|
+
--kvass-font-selector-padding-x,
|
|
190
|
+
var(--__kvass-font-selector-padding-x)
|
|
191
|
+
);
|
|
192
|
+
border: var(
|
|
193
|
+
--kvass-font-selector-border-width,
|
|
194
|
+
var(--__kvass-font-selector-border-width)
|
|
195
|
+
)
|
|
196
|
+
var(
|
|
197
|
+
--kvass-font-selector-border-style,
|
|
198
|
+
var(--__kvass-font-selector-border-style)
|
|
199
|
+
)
|
|
200
|
+
var(
|
|
201
|
+
--kvass-font-selector-border-color,
|
|
202
|
+
var(--__kvass-font-selector-border-color)
|
|
203
|
+
);
|
|
204
|
+
border-bottom-right-radius: var(
|
|
205
|
+
--kvass-font-selector-border-radius,
|
|
206
|
+
var(--__kvass-font-selector-border-radius)
|
|
207
|
+
);
|
|
208
|
+
border-bottom-left-radius: var(
|
|
209
|
+
--kvass-font-selector-border-radius,
|
|
210
|
+
var(--__kvass-font-selector-border-radius)
|
|
211
|
+
);
|
|
212
|
+
|
|
213
|
+
p,
|
|
214
|
+
h1,
|
|
215
|
+
h2,
|
|
216
|
+
h3 {
|
|
217
|
+
margin: 0;
|
|
218
|
+
font-family: var(--kvass-font-selector-font-family);
|
|
219
|
+
text-wrap: balance;
|
|
220
|
+
}
|
|
221
|
+
|
|
222
|
+
p {
|
|
223
|
+
line-height: 1.5;
|
|
224
|
+
}
|
|
225
|
+
|
|
226
|
+
h1,
|
|
227
|
+
h2,
|
|
228
|
+
h3 {
|
|
229
|
+
line-height: 1;
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
&--heading {
|
|
233
|
+
font-weight: 700;
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
&--text {
|
|
237
|
+
font-weight: 400;
|
|
238
|
+
}
|
|
239
|
+
|
|
240
|
+
&-label {
|
|
241
|
+
opacity: 0.5;
|
|
242
|
+
letter-spacing: 0.25px;
|
|
243
|
+
}
|
|
244
|
+
}
|
|
245
|
+
}
|
|
246
|
+
</style>
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
export const providers = [
|
|
2
|
+
{
|
|
3
|
+
value: 'google',
|
|
4
|
+
label: 'Google Fonts',
|
|
5
|
+
fonts: [
|
|
6
|
+
{
|
|
7
|
+
value: 'Roboto',
|
|
8
|
+
label: 'Roboto',
|
|
9
|
+
},
|
|
10
|
+
{
|
|
11
|
+
value: 'Open Sans',
|
|
12
|
+
label: 'Open Sans',
|
|
13
|
+
},
|
|
14
|
+
{
|
|
15
|
+
value: 'Lato',
|
|
16
|
+
label: 'Lato',
|
|
17
|
+
},
|
|
18
|
+
{
|
|
19
|
+
value: 'Montserrat',
|
|
20
|
+
label: 'Montserrat',
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
value: 'Roboto Condensed',
|
|
24
|
+
label: 'Roboto Condensed',
|
|
25
|
+
},
|
|
26
|
+
{
|
|
27
|
+
value: 'Oswald',
|
|
28
|
+
label: 'Oswald',
|
|
29
|
+
},
|
|
30
|
+
{
|
|
31
|
+
value: 'Poppins',
|
|
32
|
+
label: 'Poppins',
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
value: 'Raleway',
|
|
36
|
+
label: 'Raleway',
|
|
37
|
+
},
|
|
38
|
+
{
|
|
39
|
+
value: 'Slabo 27px',
|
|
40
|
+
label: 'Slabo 27px',
|
|
41
|
+
},
|
|
42
|
+
{
|
|
43
|
+
value: 'Merriweather',
|
|
44
|
+
label: 'Merriweather',
|
|
45
|
+
},
|
|
46
|
+
],
|
|
47
|
+
}
|
|
48
|
+
]
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-selector" width="18"
|
|
2
|
+
height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none"
|
|
3
|
+
stroke-linecap="round" stroke-linejoin="round">
|
|
4
|
+
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
|
5
|
+
<path d="M8 9l4 -4l4 4" />
|
|
6
|
+
<path d="M16 15l-4 4l-4 -4" />
|
|
7
|
+
</svg>
|
package/vite.config.js
CHANGED
|
@@ -10,14 +10,13 @@ export default defineConfig({
|
|
|
10
10
|
esbuildOptions: {
|
|
11
11
|
supported: {
|
|
12
12
|
'top-level-await': true,
|
|
13
|
-
}
|
|
14
|
-
}
|
|
13
|
+
},
|
|
14
|
+
},
|
|
15
15
|
},
|
|
16
16
|
build: {
|
|
17
17
|
target: 'esnext',
|
|
18
18
|
rollupOptions: {
|
|
19
19
|
output: {
|
|
20
|
-
manualChunks: false,
|
|
21
20
|
entryFileNames: `[name].js`,
|
|
22
21
|
chunkFileNames: `[name].js`,
|
|
23
22
|
assetFileNames: `[name].[ext]`,
|
|
@@ -39,7 +38,10 @@ export default defineConfig({
|
|
|
39
38
|
map: fileURLToPath(new URL('./src/map/main.js', import.meta.url)),
|
|
40
39
|
flatfinder: fileURLToPath(
|
|
41
40
|
new URL('./src/flatfinder/main.js', import.meta.url),
|
|
42
|
-
)
|
|
41
|
+
),
|
|
42
|
+
'font-selector': fileURLToPath(
|
|
43
|
+
new URL('./src/font-selector/main.js', import.meta.url),
|
|
44
|
+
),
|
|
43
45
|
},
|
|
44
46
|
},
|
|
45
47
|
},
|