@quartzds/core-vue 1.0.0-beta.13 → 1.0.0-beta.130

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/package.json CHANGED
@@ -1,34 +1,32 @@
1
1
  {
2
2
  "name": "@quartzds/core-vue",
3
- "version": "1.0.0-beta.13",
3
+ "version": "1.0.0-beta.130",
4
4
  "description": "Vue wrapper for @quartzds/core",
5
5
  "homepage": "https://github.com/quartzds/core-foundations/tree/main/packages/vue",
6
6
  "bugs": {
7
7
  "url": "https://github.com/quartzds/core-foundations/issues"
8
8
  },
9
9
  "repository": "https://github.com/quartzds/core-foundations",
10
- "license": "LGPL-2.1-only",
10
+ "license": "Apache-2.0",
11
11
  "exports": {
12
12
  ".": {
13
13
  "types": "./lib/index.d.ts",
14
- "import": "./lib/index.js"
14
+ "default": "./lib/index.js"
15
15
  },
16
- "./package.json": "./package.json"
16
+ "./package.json": "./package.json",
17
+ "./styles/*": "./styles/*",
18
+ "./CHANGELOG.md": "./CHANGELOG.md"
17
19
  },
18
20
  "main": "./lib/index.js",
19
21
  "types": "./lib/index.d.ts",
20
22
  "files": [
21
- "lib/**"
23
+ "lib/**",
24
+ "styles/**",
25
+ "CHANGELOG.md"
22
26
  ],
23
- "scripts": {
24
- "clean": "rimraf lib/"
25
- },
26
27
  "dependencies": {
27
- "@quartzds/core": "1.0.0-beta.10"
28
- },
29
- "devDependencies": {
30
- "rimraf": "5.0.1",
31
- "vue": "3.3.4"
28
+ "@quartzds/core": "1.0.0-beta.127",
29
+ "@stencil/vue-output-target": "^0.11.8"
32
30
  },
33
31
  "peerDependencies": {
34
32
  "vue": ">=3.0.0"
@@ -0,0 +1,509 @@
1
+ /**
2
+ * SPDX-FileCopyrightText: © 2024 Schneider Electric
3
+ *
4
+ * SPDX-License-Identifier: Apache-2.0
5
+ */
6
+
7
+ [dir='rtl'] {
8
+ --qds-direction-factor: -1;
9
+ }
10
+
11
+ :is(
12
+ [class^='qds-']:not([class^='qds-platform-'], [class^='qds-theme-']),
13
+ [class*=' qds-']:not([class*=' qds-platform-'], [class*=' qds-theme-'])
14
+ )
15
+ figure {
16
+ display: flex;
17
+ flex-direction: column;
18
+ gap: var(--qds-figure-gap);
19
+ }
20
+
21
+ :is(
22
+ [class^='qds-']:not([class^='qds-platform-'], [class^='qds-theme-']),
23
+ [class*=' qds-']:not([class*=' qds-platform-'], [class*=' qds-theme-'])
24
+ )
25
+ figcaption {
26
+ color: var(--qds-theme-figure-caption);
27
+ font: var(--qds-figure-caption);
28
+ }
29
+
30
+ :is(
31
+ [class^='qds-']:not([class^='qds-platform-'], [class^='qds-theme-']),
32
+ [class*=' qds-']:not([class*=' qds-platform-'], [class*=' qds-theme-'])
33
+ )
34
+ :is(li, p, pre) {
35
+ color: var(--qds-theme-text-standard);
36
+ }
37
+
38
+ :is(
39
+ [class^='qds-']:not([class^='qds-platform-'], [class^='qds-theme-']),
40
+ [class*=' qds-']:not([class*=' qds-platform-'], [class*=' qds-theme-'])
41
+ )
42
+ :is(li, p) {
43
+ font: var(--qds-text-standard);
44
+ }
45
+
46
+ :is(
47
+ [class^='qds-']:not([class^='qds-platform-'], [class^='qds-theme-']),
48
+ [class*=' qds-']:not([class*=' qds-platform-'], [class*=' qds-theme-'])
49
+ )
50
+ :is(li, p)
51
+ strong {
52
+ font: var(--qds-text-emphasized);
53
+ }
54
+
55
+ :is(
56
+ [class^='qds-']:not([class^='qds-platform-'], [class^='qds-theme-']),
57
+ [class*=' qds-']:not([class*=' qds-platform-'], [class*=' qds-theme-'])
58
+ )
59
+ pre {
60
+ font: var(--qds-code-standard);
61
+ }
62
+
63
+ :is(
64
+ [class^='qds-']:not([class^='qds-platform-'], [class^='qds-theme-']),
65
+ [class*=' qds-']:not([class*=' qds-platform-'], [class*=' qds-theme-'])
66
+ )
67
+ pre
68
+ strong {
69
+ font: var(--qds-code-emphasized);
70
+ }
71
+
72
+ :is(
73
+ [class^='qds-']:not([class^='qds-platform-'], [class^='qds-theme-']),
74
+ [class*=' qds-']:not([class*=' qds-platform-'], [class*=' qds-theme-'])
75
+ )
76
+ :is(menu, ol, ul) {
77
+ padding-inline-start: var(--qds-list-item-standard-padding-indent-step);
78
+ }
79
+
80
+ :is(
81
+ [class^='qds-']:not([class^='qds-platform-'], [class^='qds-theme-']),
82
+ [class*=' qds-']:not([class*=' qds-platform-'], [class*=' qds-theme-'])
83
+ )
84
+ :is(li, p, span).qds-subdued {
85
+ color: var(--qds-theme-text-subdued);
86
+ font: var(--qds-text-subdued);
87
+ }
88
+
89
+ :is(
90
+ .qds-accessory-section,
91
+ .qds-accessory,
92
+ .qds-controls-jumbo,
93
+ .qds-controls-large,
94
+ .qds-controls-small,
95
+ .qds-controls,
96
+ .qds-main-section,
97
+ .qds-main-subsection,
98
+ .qds-main,
99
+ .qds-navigation-section,
100
+ .qds-navigation-subsection,
101
+ .qds-navigation,
102
+ .qds-panel-section,
103
+ .qds-panel-subsection,
104
+ .qds-panel,
105
+ .qds-popup-section,
106
+ .qds-popup-subsection,
107
+ .qds-popup
108
+ )
109
+ :is(blockquote, figure, input, menu, ol, p, pre, ul) {
110
+ margin: 0;
111
+ }
112
+
113
+ .qds-accessory-section,
114
+ .qds-accessory,
115
+ .qds-controls-jumbo,
116
+ .qds-controls-large,
117
+ .qds-controls-small,
118
+ .qds-controls,
119
+ .qds-main-section,
120
+ .qds-main-subsection,
121
+ .qds-main,
122
+ .qds-navigation-section,
123
+ .qds-navigation-subsection,
124
+ .qds-navigation,
125
+ .qds-panel-section,
126
+ .qds-panel-subsection,
127
+ .qds-panel,
128
+ .qds-popup-section,
129
+ .qds-popup-subsection,
130
+ .qds-popup {
131
+ align-items: flex-start;
132
+ display: flex;
133
+ flex-direction: column;
134
+ }
135
+
136
+ :is(
137
+ [class^='qds-']:not([class^='qds-platform-'], [class^='qds-theme-']),
138
+ [class*=' qds-']:not([class*=' qds-platform-'], [class*=' qds-theme-'])
139
+ )
140
+ :is(
141
+ .qds-accessory,
142
+ .qds-main-subsection,
143
+ .qds-main,
144
+ .qds-navigation-subsection,
145
+ .qds-navigation,
146
+ .qds-panel-subsection,
147
+ .qds-panel,
148
+ .qds-popup-subsection,
149
+ .qds-popup
150
+ ).qds-subdued {
151
+ background-color: transparent;
152
+ }
153
+
154
+ :is(
155
+ [class^='qds-']:not([class^='qds-platform-'], [class^='qds-theme-']),
156
+ [class*=' qds-']:not([class*=' qds-platform-'], [class*=' qds-theme-'])
157
+ )
158
+ :is(.qds-panel, .qds-navigation, .qds-popup, .qds-accessory).qds-subdued {
159
+ box-shadow: none;
160
+ }
161
+
162
+ .qds-main {
163
+ background-color: var(--qds-theme-main-background);
164
+ padding-block: var(--qds-main-padding-vertical);
165
+ padding-inline: var(--qds-main-padding-horizontal);
166
+ }
167
+
168
+ .qds-main,
169
+ .qds-main .qds-unrelated {
170
+ gap: var(--qds-main-gap-children-unrelated);
171
+ }
172
+
173
+ .qds-main.qds-related,
174
+ .qds-main .qds-related {
175
+ gap: var(--qds-main-gap-children-related);
176
+ }
177
+
178
+ .qds-main-section {
179
+ padding-block-start: var(--qds-main-section-padding-top);
180
+ }
181
+
182
+ .qds-main-section,
183
+ .qds-main-section .qds-unrelated {
184
+ gap: var(--qds-main-section-gap-children-unrelated);
185
+ }
186
+
187
+ .qds-main-section.qds-related,
188
+ .qds-main-section .qds-related {
189
+ gap: var(--qds-main-section-gap-children-related);
190
+ }
191
+
192
+ .qds-main-subsection {
193
+ background-color: var(--qds-theme-main-subsection-standard-background);
194
+ border-radius: var(--qds-main-subsection-border-radius);
195
+ padding: var(--qds-main-subsection-padding-top)
196
+ var(--qds-main-subsection-padding-end)
197
+ var(--qds-main-subsection-padding-bottom)
198
+ var(--qds-main-subsection-padding-start);
199
+ }
200
+
201
+ .qds-main-subsection,
202
+ .qds-main-subsection .qds-unrelated {
203
+ gap: var(--qds-main-subsection-gap-children-unrelated);
204
+ }
205
+
206
+ .qds-main-subsection.qds-emphasized {
207
+ box-shadow: var(--qds-theme-main-subsection-emphasized);
208
+ }
209
+
210
+ .qds-main-subsection.qds-related,
211
+ .qds-main-subsection .qds-related {
212
+ gap: var(--qds-main-subsection-gap-children-related);
213
+ }
214
+
215
+ .qds-navigation {
216
+ background-color: var(--qds-theme-navigation-background);
217
+ border-radius: var(--qds-navigation-border-radius);
218
+ box-shadow: var(--qds-theme-navigation-elevation);
219
+ padding: var(--qds-navigation-padding);
220
+ }
221
+
222
+ .qds-navigation,
223
+ .qds-navigation .qds-unrelated {
224
+ gap: var(--qds-navigation-gap-children-unrelated);
225
+ }
226
+
227
+ .qds-navigation.qds-related,
228
+ .qds-navigation .qds-related {
229
+ gap: var(--qds-navigation-gap-children-related);
230
+ }
231
+
232
+ .qds-navigation-section {
233
+ padding: var(--qds-navigation-section-padding);
234
+ }
235
+
236
+ .qds-navigation-section,
237
+ .qds-navigation-section .qds-unrelated {
238
+ gap: var(--qds-navigation-section-gap-children-unrelated);
239
+ }
240
+
241
+ .qds-navigation-section.qds-related,
242
+ .qds-navigation-section .qds-related {
243
+ gap: var(--qds-navigation-section-gap-children-related);
244
+ }
245
+
246
+ .qds-navigation-subsection {
247
+ background-color: var(--qds-theme-navigation-subsection-standard-background);
248
+ border-radius: var(--qds-navigation-subsection-border-radius);
249
+ padding: var(--qds-navigation-subsection-padding);
250
+ }
251
+
252
+ .qds-navigation-subsection,
253
+ .qds-navigation-subsection .qds-unrelated {
254
+ gap: var(--qds-navigation-subsection-gap-children-unrelated);
255
+ }
256
+
257
+ .qds-navigation-subsection.qds-emphasized {
258
+ box-shadow: var(--qds-theme-navigation-subsection-emphasized);
259
+ }
260
+
261
+ .qds-navigation-subsection.qds-related,
262
+ .qds-navigation-subsection .qds-related {
263
+ gap: var(--qds-navigation-subsection-gap-children-related);
264
+ }
265
+
266
+ .qds-panel {
267
+ background-color: var(--qds-theme-panel-background);
268
+ border-radius: var(--qds-panel-border-radius);
269
+ box-shadow: var(--qds-theme-panel-elevation);
270
+ padding: var(--qds-panel-padding);
271
+ }
272
+
273
+ .qds-panel,
274
+ .qds-panel .qds-unrelated {
275
+ gap: var(--qds-panel-gap-children-unrelated);
276
+ }
277
+
278
+ .qds-panel.qds-related,
279
+ .qds-panel .qds-related {
280
+ gap: var(--qds-panel-gap-children-related);
281
+ }
282
+
283
+ .qds-panel-section {
284
+ padding-block-start: var(--qds-panel-section-padding-top);
285
+ }
286
+
287
+ .qds-panel-section,
288
+ .qds-panel-section .qds-unrelated {
289
+ gap: var(--qds-panel-section-gap-children-unrelated);
290
+ }
291
+
292
+ .qds-panel-section.qds-related,
293
+ .qds-panel-section .qds-related {
294
+ gap: var(--qds-panel-section-gap-children-related);
295
+ }
296
+
297
+ .qds-panel-subsection {
298
+ background-color: var(--qds-theme-panel-subsection-standard-background);
299
+ border-radius: var(--qds-panel-subsection-border-radius);
300
+ padding: var(--qds-panel-subsection-padding);
301
+ }
302
+
303
+ .qds-panel-subsection,
304
+ .qds-panel-subsection .qds-unrelated {
305
+ gap: var(--qds-panel-subsection-gap-children-unrelated);
306
+ }
307
+
308
+ .qds-panel-subsection.qds-emphasized {
309
+ box-shadow: var(--qds-theme-panel-subsection-emphasized);
310
+ }
311
+
312
+ .qds-panel-subsection.qds-related,
313
+ .qds-panel-subsection .qds-related {
314
+ gap: var(--qds-panel-subsection-gap-children-related);
315
+ }
316
+
317
+ .qds-popup {
318
+ background-color: var(--qds-theme-popup-background);
319
+ border-radius: var(--qds-popup-border-radius);
320
+ box-shadow: var(--qds-popup-elevation);
321
+ padding: var(--qds-popup-subsection-padding-top)
322
+ var(--qds-popup-subsection-padding-end)
323
+ var(--qds-popup-subsection-padding-bottom)
324
+ var(--qds-popup-subsection-padding-start);
325
+ }
326
+
327
+ .qds-popup,
328
+ .qds-popup .qds-unrelated {
329
+ gap: var(--qds-popup-gap-children-unrelated);
330
+ }
331
+
332
+ .qds-popup.qds-related,
333
+ .qds-popup .qds-related {
334
+ gap: var(--qds-popup-gap-children-related);
335
+ }
336
+
337
+ .qds-popup-section,
338
+ .qds-popup-section .qds-unrelated {
339
+ gap: var(--qds-popup-section-gap-children-unrelated);
340
+ }
341
+
342
+ .qds-popup-section.qds-related,
343
+ .qds-popup-section .qds-related {
344
+ gap: var(--qds-popup-section-gap-children-related);
345
+ }
346
+
347
+ .qds-popup-subsection {
348
+ background-color: var(--qds-theme-popup-subsection-standard-background);
349
+ border-radius: var(--qds-popup-subsection-border-radius);
350
+ padding: var(--qds-popup-subsection-padding);
351
+ }
352
+
353
+ .qds-popup-subsection,
354
+ .qds-popup-subsection .qds-unrelated {
355
+ gap: var(--qds-popup-subsection-gap-children-unrelated);
356
+ }
357
+
358
+ .qds-popup-subsection.qds-emphasized {
359
+ box-shadow: var(--qds-theme-popup-subsection-emphasized);
360
+ }
361
+
362
+ .qds-popup-subsection.qds-related,
363
+ .qds-popup-subsection .qds-related {
364
+ gap: var(--qds-popup-subsection-gap-children-related);
365
+ }
366
+
367
+ .qds-accessory {
368
+ background-color: var(--qds-theme-accessory-background);
369
+ border-radius: var(--qds-accessory-border-radius);
370
+ box-shadow: var(--qds-accessory-elevation);
371
+ padding: var(--qds-accessory-padding-top) var(--qds-accessory-padding-end)
372
+ var(--qds-accessory-padding-bottom) var(--qds-accessory-padding-start);
373
+ }
374
+
375
+ .qds-accessory,
376
+ .qds-accessory .qds-unrelated {
377
+ gap: var(--qds-accessory-gap-children-unrelated);
378
+ }
379
+
380
+ .qds-accessory.qds-related,
381
+ .qds-accessory .qds-related {
382
+ gap: var(--qds-accessory-gap-children-related);
383
+ }
384
+
385
+ .qds-accessory-section {
386
+ border-radius: var(--qds-accessory-section-border-radius);
387
+ }
388
+
389
+ .qds-accessory-section,
390
+ .qds-accessory-section .qds-unrelated {
391
+ gap: var(--qds-accessory-section-gap-children-unrelated);
392
+ }
393
+
394
+ .qds-accessory-section.qds-related,
395
+ .qds-accessory-section .qds-related {
396
+ gap: var(--qds-accessory-section-gap-children-related);
397
+ }
398
+
399
+ .qds-controls-small,
400
+ .qds-controls-small .qds-unrelated {
401
+ gap: var(--qds-control-small-gap-siblings-unrelated);
402
+ }
403
+
404
+ .qds-controls-small.qds-related,
405
+ .qds-controls-small .qds-related {
406
+ gap: var(--qds-control-small-gap-siblings-related);
407
+ }
408
+
409
+ .qds-controls,
410
+ .qds-controls .qds-unrelated {
411
+ gap: var(--qds-control-standard-gap-siblings-unrelated);
412
+ }
413
+
414
+ .qds-controls.qds-related,
415
+ .qds-controls .qds-related {
416
+ gap: var(--qds-control-standard-gap-siblings-related);
417
+ }
418
+
419
+ .qds-controls-large,
420
+ .qds-controls-large .qds-unrelated {
421
+ gap: var(--qds-control-large-gap-siblings-unrelated);
422
+ }
423
+
424
+ .qds-controls-large.qds-related,
425
+ .qds-controls-large .qds-related {
426
+ gap: var(--qds-control-large-gap-siblings-related);
427
+ }
428
+
429
+ .qds-controls-jumbo,
430
+ .qds-controls-jumbo .qds-unrelated {
431
+ gap: var(--qds-control-jumbo-gap-siblings-unrelated);
432
+ }
433
+
434
+ .qds-controls-jumbo.qds-related,
435
+ .qds-controls-jumbo .qds-related {
436
+ gap: var(--qds-control-jumbo-gap-siblings-related);
437
+ }
438
+
439
+ .qds-interactive {
440
+ cursor: pointer;
441
+ user-select: none;
442
+ }
443
+
444
+ :is(
445
+ .qds-main-subsection,
446
+ .qds-navigation-subsection,
447
+ .qds-panel-subsection,
448
+ .qds-popup-subsection
449
+ ).qds-interactive:hover {
450
+ background-color: var(--qds-theme-interactive-background-hover);
451
+ text-decoration: none;
452
+ }
453
+
454
+ :is(
455
+ .qds-main-subsection,
456
+ .qds-navigation-subsection,
457
+ .qds-panel-subsection,
458
+ .qds-popup-subsection
459
+ ).qds-interactive:active {
460
+ background-color: var(--qds-theme-interactive-background-selected);
461
+ text-decoration: none;
462
+ }
463
+
464
+ .qds-control-group-inline {
465
+ display: flex;
466
+ }
467
+
468
+ .qds-control-group-inline > :first-child:not(:only-child) {
469
+ --qds-form-input-border-radius-top-right: 0px;
470
+ --qds-form-input-border-radius-bottom-right: 0px;
471
+ --qds-form-input-border-width-inline-end: 0px;
472
+ }
473
+
474
+ .qds-control-group-inline > :not(:first-child, :last-child) {
475
+ --qds-form-input-border-radius-top-left: 0px;
476
+ --qds-form-input-border-radius-top-right: 0px;
477
+ --qds-form-input-border-radius-bottom-right: 0px;
478
+ --qds-form-input-border-radius-bottom-left: 0px;
479
+ --qds-form-input-border-width-inline-end: 0px;
480
+ }
481
+
482
+ .qds-control-group-inline > :last-child:not(:only-child) {
483
+ --qds-form-input-border-radius-top-left: 0px;
484
+ --qds-form-input-border-radius-bottom-left: 0px;
485
+ }
486
+
487
+ .qds-control-group-block {
488
+ display: flex;
489
+ flex-direction: column;
490
+ }
491
+
492
+ .qds-control-group-block > :first-child:not(:only-child) {
493
+ --qds-form-input-border-radius-bottom-left: 0px;
494
+ --qds-form-input-border-radius-bottom-right: 0px;
495
+ --qds-form-input-border-width-block-end: 0px;
496
+ }
497
+
498
+ .qds-control-group-block > :not(:first-child, :last-child) {
499
+ --qds-form-input-border-radius-top-left: 0px;
500
+ --qds-form-input-border-radius-top-right: 0px;
501
+ --qds-form-input-border-radius-bottom-right: 0px;
502
+ --qds-form-input-border-radius-bottom-left: 0px;
503
+ --qds-form-input-border-width-block-end: 0px;
504
+ }
505
+
506
+ .qds-control-group-block > :last-child:not(:only-child) {
507
+ --qds-form-input-border-radius-top-left: 0px;
508
+ --qds-form-input-border-radius-top-right: 0px;
509
+ }
@@ -1,19 +0,0 @@
1
- export interface InputProps<T> {
2
- modelValue?: T;
3
- }
4
- /**
5
- * Create a callback to define a Vue component wrapper around a Web Component.
6
- *
7
- * @prop name - The component tag name (i.e. `ion-button`)
8
- * @prop componentProps - An array of properties on the
9
- * component. These usually match up with the @Prop definitions
10
- * in each component's TSX file.
11
- * @prop customElement - An option custom element instance to pass
12
- * to customElements.define. Only set if `includeImportCustomElements: true` in your config.
13
- * @prop modelProp - The prop that v-model binds to (i.e. value)
14
- * @prop modelUpdateEvent - The event that is fired from your Web Component when the value changes (i.e. ionChange)
15
- * @prop externalModelUpdateEvent - The external event to fire from your Vue component when modelUpdateEvent fires. This is used for ensuring that v-model references have been
16
- * correctly updated when a user's event callback fires.
17
- */
18
- export declare const defineContainer: <Props, VModelType = string | number | boolean>(name: string, defineCustomElement: any, componentProps?: string[], modelProp?: string, modelUpdateEvent?: string, externalModelUpdateEvent?: string) => (props: Props & InputProps<VModelType> & {}) => any;
19
- //# sourceMappingURL=utils.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/generated/vue-component-lib/utils.ts"],"names":[],"mappings":"AAIA,MAAM,WAAW,UAAU,CAAC,CAAC;IAC3B,UAAU,CAAC,EAAE,CAAC,CAAC;CAChB;AAsCD;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,eAAe,wDACpB,MAAM,uBACS,GAAG,mBACR,MAAM,EAAE,cACZ,MAAM,qBACC,MAAM,6BACE,MAAM,wDA8IlC,CAAC"}