agnosticui-core 2.0.0-alpha.29 → 2.0.0-alpha.30
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/dist/{VueSelectionButtonGroup.vue_vue_type_script_setup_true_lang-DwYrIMVO.js → VueSelectionButtonGroup.vue_vue_type_script_setup_true_lang-BIoiim87.js} +6 -6
- package/dist/{VueSelectionCardGroup.vue_vue_type_script_setup_true_lang-D5CycLY5.js → VueSelectionCardGroup.vue_vue_type_script_setup_true_lang-BacJpxND.js} +4 -4
- package/dist/components/SelectionButtonGroup/core/_SelectionButtonGroup.d.ts +4 -4
- package/dist/components/SelectionButtonGroup/core/_SelectionButtonGroup.d.ts.map +1 -1
- package/dist/components/SelectionButtonGroup/core/_SelectionButtonGroup.js +8 -8
- package/dist/components/SelectionButtonGroup/vue/VueSelectionButtonGroup.js +1 -1
- package/dist/components/SelectionButtonGroup/vue/VueSelectionButtonGroup.vue.d.ts +0 -6
- package/dist/components/SelectionButtonGroup/vue/VueSelectionButtonGroup.vue.d.ts.map +1 -1
- package/dist/components/SelectionButtonGroup/vue/index.js +1 -1
- package/dist/components/SelectionCardGroup/core/_SelectionCardGroup.d.ts +2 -2
- package/dist/components/SelectionCardGroup/core/_SelectionCardGroup.d.ts.map +1 -1
- package/dist/components/SelectionCardGroup/core/_SelectionCardGroup.js +2 -2
- package/dist/components/SelectionCardGroup/vue/VueSelectionCardGroup.js +1 -1
- package/dist/components/SelectionCardGroup/vue/VueSelectionCardGroup.vue.d.ts +0 -6
- package/dist/components/SelectionCardGroup/vue/VueSelectionCardGroup.vue.d.ts.map +1 -1
- package/dist/components/SelectionCardGroup/vue/index.js +1 -1
- package/package.json +1 -1
- package/src/components/Drawer/v1/dialog--drawer-bottom.hbs +48 -0
- package/src/components/Drawer/v1/dialog--drawer-end.hbs +48 -0
- package/src/components/Drawer/v1/dialog--drawer-start.hbs +48 -0
- package/src/components/Drawer/v1/dialog--drawer-top.hbs +48 -0
- package/src/components/Drawer/v1/dialog-demo.css +13 -0
- package/src/components/Drawer/v1/dialog.config.yml +5 -0
- package/src/components/Drawer/v1/dialog.css +99 -0
- package/src/components/Drawer/v1/dialog.hbs +48 -0
- package/src/components/Drawer/v1/drawer-animations.css +52 -0
- package/src/components/Drawer/v1/drawer.css +50 -0
- package/src/components/SelectionButtonGroup/core/_SelectionButtonGroup.ts +11 -11
- package/src/components/SelectionButtonGroup/vue/VueSelectionButtonGroup.vue +1 -2
- package/src/components/SelectionCardGroup/core/_SelectionCardGroup.ts +7 -9
- package/src/components/SelectionCardGroup/vue/VueSelectionCardGroup.vue +1 -2
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { defineComponent as s, createElementBlock as
|
|
1
|
+
import { defineComponent as s, createElementBlock as i, openBlock as u, mergeProps as o, renderSlot as c } from "vue";
|
|
2
2
|
import "./components/SelectionButtonGroup/core/SelectionButtonGroup.js";
|
|
3
|
-
const g = ["type", "name", "legend", "legend-hidden", "theme", "size", "shape", "value", "values", ".disabled", ".required", ".validationMessages"],
|
|
3
|
+
const g = ["type", "name", "legend", "legend-hidden", "theme", "size", "shape", "value", "values", ".disabled", ".required", ".validationMessages"], f = /* @__PURE__ */ s({
|
|
4
4
|
__name: "VueSelectionButtonGroup",
|
|
5
5
|
props: {
|
|
6
6
|
type: { default: "radio" },
|
|
@@ -10,8 +10,8 @@ const g = ["type", "name", "legend", "legend-hidden", "theme", "size", "shape",
|
|
|
10
10
|
theme: { default: "" },
|
|
11
11
|
size: { default: "md" },
|
|
12
12
|
shape: { default: "" },
|
|
13
|
-
value: {
|
|
14
|
-
values: {
|
|
13
|
+
value: {},
|
|
14
|
+
values: {},
|
|
15
15
|
disabled: { type: Boolean, default: !1 },
|
|
16
16
|
required: { type: Boolean, default: !1 },
|
|
17
17
|
validationMessages: {}
|
|
@@ -22,7 +22,7 @@ const g = ["type", "name", "legend", "legend-hidden", "theme", "size", "shape",
|
|
|
22
22
|
const a = t.detail;
|
|
23
23
|
l("selection-change", a), a.selectedValues.length <= 1 && l("update:value", a.selectedValues[0] || ""), l("update:values", a.selectedValues);
|
|
24
24
|
};
|
|
25
|
-
return (t, a) => (
|
|
25
|
+
return (t, a) => (u(), i("ag-selection-button-group", o({
|
|
26
26
|
type: e.type,
|
|
27
27
|
name: e.name,
|
|
28
28
|
legend: e.legend,
|
|
@@ -42,5 +42,5 @@ const g = ["type", "name", "legend", "legend-hidden", "theme", "size", "shape",
|
|
|
42
42
|
}
|
|
43
43
|
});
|
|
44
44
|
export {
|
|
45
|
-
|
|
45
|
+
f as _
|
|
46
46
|
};
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
import { defineComponent as s, createElementBlock as i, openBlock as u, mergeProps as o, renderSlot as c } from "vue";
|
|
2
2
|
import "./components/SelectionCardGroup/core/SelectionCardGroup.js";
|
|
3
|
-
const g = ["type", "name", "legend", "legend-hidden", "value", "values", ".disabled", ".required", ".validationMessages"],
|
|
3
|
+
const g = ["type", "name", "legend", "legend-hidden", "value", "values", ".disabled", ".required", ".validationMessages"], m = /* @__PURE__ */ s({
|
|
4
4
|
__name: "VueSelectionCardGroup",
|
|
5
5
|
props: {
|
|
6
6
|
type: { default: "radio" },
|
|
7
7
|
name: { default: "" },
|
|
8
8
|
legend: { default: "" },
|
|
9
9
|
legendHidden: { type: Boolean, default: !1 },
|
|
10
|
-
value: {
|
|
11
|
-
values: {
|
|
10
|
+
value: {},
|
|
11
|
+
values: {},
|
|
12
12
|
disabled: { type: Boolean, default: !1 },
|
|
13
13
|
required: { type: Boolean, default: !1 },
|
|
14
14
|
validationMessages: {}
|
|
@@ -36,5 +36,5 @@ const g = ["type", "name", "legend", "legend-hidden", "value", "values", ".disab
|
|
|
36
36
|
}
|
|
37
37
|
});
|
|
38
38
|
export {
|
|
39
|
-
|
|
39
|
+
m as _
|
|
40
40
|
};
|
|
@@ -30,9 +30,9 @@ export interface SelectionButtonGroupProps {
|
|
|
30
30
|
size?: SelectionButtonGroupSize;
|
|
31
31
|
/** Shape variant for buttons */
|
|
32
32
|
shape?: SelectionButtonGroupShape;
|
|
33
|
-
/** Controlled value for radio mode */
|
|
33
|
+
/** Controlled value for radio mode. Omit entirely for uncontrolled mode. */
|
|
34
34
|
value?: string;
|
|
35
|
-
/** Controlled values for checkbox mode */
|
|
35
|
+
/** Controlled values for checkbox mode. Omit entirely for uncontrolled mode. */
|
|
36
36
|
values?: string[];
|
|
37
37
|
/** Disable all buttons in the group */
|
|
38
38
|
disabled?: boolean;
|
|
@@ -51,8 +51,8 @@ export declare class AgSelectionButtonGroup extends AgSelectionButtonGroup_base
|
|
|
51
51
|
theme: SelectionButtonGroupTheme;
|
|
52
52
|
size: SelectionButtonGroupSize;
|
|
53
53
|
shape: SelectionButtonGroupShape;
|
|
54
|
-
value: string;
|
|
55
|
-
values: string[];
|
|
54
|
+
value: string | undefined;
|
|
55
|
+
values: string[] | undefined;
|
|
56
56
|
disabled: boolean;
|
|
57
57
|
required: boolean;
|
|
58
58
|
validationMessages: ValidationMessages | undefined;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"_SelectionButtonGroup.d.ts","sourceRoot":"","sources":["../../../../src/components/SelectionButtonGroup/core/_SelectionButtonGroup.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAErD,OAAO,EAAa,KAAK,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChF,OAAO,KAAK,EAAqB,oBAAoB,EAAE,mBAAmB,EAAE,oBAAoB,EAAE,MAAM,gDAAgD,CAAC;AAEzJ,MAAM,MAAM,mBAAmB,GAAG,OAAO,GAAG,UAAU,CAAC;AACvD,MAAM,MAAM,yBAAyB,GAAG,oBAAoB,CAAC;AAC7D,MAAM,MAAM,wBAAwB,GAAG,mBAAmB,CAAC;AAC3D,MAAM,MAAM,yBAAyB,GAAG,oBAAoB,CAAC;AAE7D,MAAM,WAAW,gCAAgC;IAC/C,wDAAwD;IACxD,KAAK,EAAE,MAAM,CAAC;IACd,yCAAyC;IACzC,OAAO,EAAE,OAAO,CAAC;IACjB,oCAAoC;IACpC,cAAc,EAAE,MAAM,EAAE,CAAC;CAC1B;AAED,MAAM,MAAM,0BAA0B,GAAG,WAAW,CAAC,gCAAgC,CAAC,CAAC;AAEvF,MAAM,WAAW,yBAAyB;IACxC,gEAAgE;IAChE,IAAI,EAAE,mBAAmB,CAAC;IAC1B,4CAA4C;IAC5C,IAAI,EAAE,MAAM,CAAC;IACb,mDAAmD;IACnD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,2DAA2D;IAC3D,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,gCAAgC;IAChC,KAAK,CAAC,EAAE,yBAAyB,CAAC;IAClC,+BAA+B;IAC/B,IAAI,CAAC,EAAE,wBAAwB,CAAC;IAChC,gCAAgC;IAChC,KAAK,CAAC,EAAE,yBAAyB,CAAC;IAClC,
|
|
1
|
+
{"version":3,"file":"_SelectionButtonGroup.d.ts","sourceRoot":"","sources":["../../../../src/components/SelectionButtonGroup/core/_SelectionButtonGroup.ts"],"names":[],"mappings":"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"}
|
|
@@ -2,12 +2,12 @@ import { LitElement as p, css as _, nothing as g, html as c } from "lit";
|
|
|
2
2
|
import { n as r } from "../../../property-CemaeiRl.js";
|
|
3
3
|
import { r as y } from "../../../state-CovhUvdr.js";
|
|
4
4
|
import { FaceMixin as f } from "../../../shared/face-mixin.js";
|
|
5
|
-
var m = Object.defineProperty, o = (
|
|
6
|
-
for (var i = void 0, a =
|
|
7
|
-
(n =
|
|
5
|
+
var m = Object.defineProperty, o = (h, e, t, s) => {
|
|
6
|
+
for (var i = void 0, a = h.length - 1, n; a >= 0; a--)
|
|
7
|
+
(n = h[a]) && (i = n(e, t, i) || i);
|
|
8
8
|
return i && m(e, t, i), i;
|
|
9
9
|
};
|
|
10
|
-
const
|
|
10
|
+
const d = class d extends f(p) {
|
|
11
11
|
constructor() {
|
|
12
12
|
super(), this._handleButtonChange = (e) => {
|
|
13
13
|
e.stopPropagation();
|
|
@@ -69,11 +69,11 @@ const h = class h extends f(p) {
|
|
|
69
69
|
detail: { value: n.value, checked: !0 }
|
|
70
70
|
}));
|
|
71
71
|
}
|
|
72
|
-
}, this.type = "radio", this.legend = "", this.legendHidden = !1, this.theme = "", this.size = "md", this.shape = "", this.value =
|
|
72
|
+
}, this.type = "radio", this.legend = "", this.legendHidden = !1, this.theme = "", this.size = "md", this.shape = "", this.value = void 0, this.values = void 0, this.disabled = !1, this.required = !1, this._internalSelectedValues = [], this.validationMessages = void 0;
|
|
73
73
|
}
|
|
74
74
|
// Get current selected values (controlled or uncontrolled)
|
|
75
75
|
_getSelectedValues() {
|
|
76
|
-
return this.type === "radio" ? this.value ? [this.value] : this._internalSelectedValues : this.values
|
|
76
|
+
return this.type === "radio" ? this.value !== void 0 ? this.value ? [this.value] : [] : this._internalSelectedValues : this.values !== void 0 ? this.values : this._internalSelectedValues;
|
|
77
77
|
}
|
|
78
78
|
// ─── FACE ─────────────────────────────────────────────────────────────────
|
|
79
79
|
/**
|
|
@@ -175,7 +175,7 @@ const h = class h extends f(p) {
|
|
|
175
175
|
`;
|
|
176
176
|
}
|
|
177
177
|
};
|
|
178
|
-
|
|
178
|
+
d.styles = _`
|
|
179
179
|
:host {
|
|
180
180
|
display: block;
|
|
181
181
|
}
|
|
@@ -213,7 +213,7 @@ h.styles = _`
|
|
|
213
213
|
gap: var(--ag-selection-button-group-gap, var(--ag-space-2));
|
|
214
214
|
}
|
|
215
215
|
`;
|
|
216
|
-
let l =
|
|
216
|
+
let l = d;
|
|
217
217
|
o([
|
|
218
218
|
r({ type: String, reflect: !0 })
|
|
219
219
|
], l.prototype, "type");
|
|
@@ -37,8 +37,6 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
|
|
|
37
37
|
theme: string;
|
|
38
38
|
size: string;
|
|
39
39
|
shape: string;
|
|
40
|
-
value: string;
|
|
41
|
-
values: () => never[];
|
|
42
40
|
disabled: boolean;
|
|
43
41
|
required: boolean;
|
|
44
42
|
}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
|
|
@@ -53,8 +51,6 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
|
|
|
53
51
|
theme: string;
|
|
54
52
|
size: string;
|
|
55
53
|
shape: string;
|
|
56
|
-
value: string;
|
|
57
|
-
values: () => never[];
|
|
58
54
|
disabled: boolean;
|
|
59
55
|
required: boolean;
|
|
60
56
|
}>>> & Readonly<{
|
|
@@ -62,14 +58,12 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
|
|
|
62
58
|
"onSelection-change"?: ((detail: SelectionButtonChangeEventDetail) => any) | undefined;
|
|
63
59
|
"onUpdate:values"?: ((values: string[]) => any) | undefined;
|
|
64
60
|
}>, {
|
|
65
|
-
values: string[];
|
|
66
61
|
disabled: boolean;
|
|
67
62
|
name: string;
|
|
68
63
|
type: SelectionButtonType;
|
|
69
64
|
legend: string;
|
|
70
65
|
size: SelectionButtonGroupSize;
|
|
71
66
|
required: boolean;
|
|
72
|
-
value: string;
|
|
73
67
|
shape: SelectionButtonGroupShape;
|
|
74
68
|
legendHidden: boolean;
|
|
75
69
|
theme: SelectionButtonGroupTheme;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"VueSelectionButtonGroup.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/SelectionButtonGroup/vue/VueSelectionButtonGroup.vue"],"names":[],"mappings":"AAoBA;AAEA,OAAO,8BAA8B,CAAC;AACtC,OAAO,KAAK,EACV,mBAAmB,EACnB,gCAAgC,EAChC,yBAAyB,EACzB,wBAAwB,EACxB,yBAAyB,EAC1B,MAAM,8BAA8B,CAAC;AACtC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAErE,MAAM,WAAW,4BAA4B;IAC3C,gEAAgE;IAChE,IAAI,CAAC,EAAE,mBAAmB,CAAC;IAC3B,4CAA4C;IAC5C,IAAI,EAAE,MAAM,CAAC;IACb,mDAAmD;IACnD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,2DAA2D;IAC3D,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,gCAAgC;IAChC,KAAK,CAAC,EAAE,yBAAyB,CAAC;IAClC,+BAA+B;IAC/B,IAAI,CAAC,EAAE,wBAAwB,CAAC;IAChC,gCAAgC;IAChC,KAAK,CAAC,EAAE,yBAAyB,CAAC;IAClC,sCAAsC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0CAA0C;IAC1C,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sEAAsE;IACtE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kBAAkB,CAAC,EAAE,kBAAkB,CAAC;CACzC;
|
|
1
|
+
{"version":3,"file":"VueSelectionButtonGroup.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/SelectionButtonGroup/vue/VueSelectionButtonGroup.vue"],"names":[],"mappings":"AAoBA;AAEA,OAAO,8BAA8B,CAAC;AACtC,OAAO,KAAK,EACV,mBAAmB,EACnB,gCAAgC,EAChC,yBAAyB,EACzB,wBAAwB,EACxB,yBAAyB,EAC1B,MAAM,8BAA8B,CAAC;AACtC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAErE,MAAM,WAAW,4BAA4B;IAC3C,gEAAgE;IAChE,IAAI,CAAC,EAAE,mBAAmB,CAAC;IAC3B,4CAA4C;IAC5C,IAAI,EAAE,MAAM,CAAC;IACb,mDAAmD;IACnD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,2DAA2D;IAC3D,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,gCAAgC;IAChC,KAAK,CAAC,EAAE,yBAAyB,CAAC;IAClC,+BAA+B;IAC/B,IAAI,CAAC,EAAE,wBAAwB,CAAC;IAChC,gCAAgC;IAChC,KAAK,CAAC,EAAE,yBAAyB,CAAC;IAClC,sCAAsC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0CAA0C;IAC1C,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sEAAsE;IACtE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kBAAkB,CAAC,EAAE,kBAAkB,CAAC;CACzC;AAiDD,iBAAS,cAAc;qBA2CM,GAAG;EAK/B;AAUD,QAAA,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cA/GR,OAAO;UAhBZ,MAAM;UAFL,mBAAmB;YAIjB,MAAM;UAMR,wBAAwB;cAUpB,OAAO;WARV,yBAAyB;kBANlB,OAAO;WAEd,yBAAyB;4EAgIjC,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAAvG,wBAAwG;AACxG,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC;AAC9M,KAAK,kBAAkB,CAAC,CAAC,EAAE,CAAC,IAAI;KAE1B,CAAC,IAAI,MAAM,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,SAAS,MAAM,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG;QACxE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;KACb,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CACT,CAAC;AACN,KAAK,cAAc,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC;AACxD,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAAE,QAAO;QAClD,MAAM,EAAE,CAAC,CAAC;KACT,CAAA;CAAE,CAAC"}
|
|
@@ -42,8 +42,8 @@ export declare class AgSelectionCardGroup extends AgSelectionCardGroup_base impl
|
|
|
42
42
|
legend: string;
|
|
43
43
|
legendHidden: boolean;
|
|
44
44
|
theme: SelectionCardGroupTheme;
|
|
45
|
-
value: string;
|
|
46
|
-
values: string[];
|
|
45
|
+
value: string | undefined;
|
|
46
|
+
values: string[] | undefined;
|
|
47
47
|
disabled: boolean;
|
|
48
48
|
required: boolean;
|
|
49
49
|
validationMessages: ValidationMessages | undefined;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"_SelectionCardGroup.d.ts","sourceRoot":"","sources":["../../../../src/components/SelectionCardGroup/core/_SelectionCardGroup.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAGrD,OAAO,EAAa,KAAK,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAEhF,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,UAAU,CAAC;AACjD,MAAM,MAAM,uBAAuB,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,YAAY,GAAG,EAAE,CAAC;AAEnG,MAAM,WAAW,0BAA0B;IACzC,sDAAsD;IACtD,KAAK,EAAE,MAAM,CAAC;IACd,uCAAuC;IACvC,OAAO,EAAE,OAAO,CAAC;IACjB,oCAAoC;IACpC,cAAc,EAAE,MAAM,EAAE,CAAC;CAC1B;AAED,MAAM,MAAM,oBAAoB,GAAG,WAAW,CAAC,0BAA0B,CAAC,CAAC;AAE3E,MAAM,WAAW,uBAAuB;IACtC,gEAAgE;IAChE,IAAI,EAAE,aAAa,CAAC;IACpB,4CAA4C;IAC5C,IAAI,EAAE,MAAM,CAAC;IACb,mDAAmD;IACnD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,2DAA2D;IAC3D,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,8BAA8B;IAC9B,KAAK,CAAC,EAAE,uBAAuB,CAAC;IAChC,sCAAsC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0CAA0C;IAC1C,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sEAAsE;IACtE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kBAAkB,CAAC,EAAE,kBAAkB,CAAC;IACxC,qCAAqC;IACrC,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,IAAI,CAAC;CAC3D;;AAED,qBAAa,oBAAqB,SAAQ,yBAAsB,YAAW,uBAAuB;IAChG,OAAgB,MAAM,0BAqCpB;IAGM,IAAI,EAAE,aAAa,CAAC;IAGpB,MAAM,EAAE,MAAM,CAAC;IAGf,YAAY,EAAE,OAAO,CAAC;IAGtB,KAAK,EAAE,uBAAuB,CAAC;IAG/B,KAAK,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"_SelectionCardGroup.d.ts","sourceRoot":"","sources":["../../../../src/components/SelectionCardGroup/core/_SelectionCardGroup.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAGrD,OAAO,EAAa,KAAK,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAEhF,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,UAAU,CAAC;AACjD,MAAM,MAAM,uBAAuB,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,YAAY,GAAG,EAAE,CAAC;AAEnG,MAAM,WAAW,0BAA0B;IACzC,sDAAsD;IACtD,KAAK,EAAE,MAAM,CAAC;IACd,uCAAuC;IACvC,OAAO,EAAE,OAAO,CAAC;IACjB,oCAAoC;IACpC,cAAc,EAAE,MAAM,EAAE,CAAC;CAC1B;AAED,MAAM,MAAM,oBAAoB,GAAG,WAAW,CAAC,0BAA0B,CAAC,CAAC;AAE3E,MAAM,WAAW,uBAAuB;IACtC,gEAAgE;IAChE,IAAI,EAAE,aAAa,CAAC;IACpB,4CAA4C;IAC5C,IAAI,EAAE,MAAM,CAAC;IACb,mDAAmD;IACnD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,2DAA2D;IAC3D,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,8BAA8B;IAC9B,KAAK,CAAC,EAAE,uBAAuB,CAAC;IAChC,sCAAsC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0CAA0C;IAC1C,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sEAAsE;IACtE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kBAAkB,CAAC,EAAE,kBAAkB,CAAC;IACxC,qCAAqC;IACrC,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,IAAI,CAAC;CAC3D;;AAED,qBAAa,oBAAqB,SAAQ,yBAAsB,YAAW,uBAAuB;IAChG,OAAgB,MAAM,0BAqCpB;IAGM,IAAI,EAAE,aAAa,CAAC;IAGpB,MAAM,EAAE,MAAM,CAAC;IAGf,YAAY,EAAE,OAAO,CAAC;IAGtB,KAAK,EAAE,uBAAuB,CAAC;IAG/B,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAG1B,MAAM,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC;IAG7B,QAAQ,EAAE,OAAO,CAAC;IAGlB,QAAQ,EAAE,OAAO,CAAC;IAGlB,kBAAkB,EAAE,kBAAkB,GAAG,SAAS,CAAC;IAGnD,iBAAiB,EAAE,CAAC,CAAC,KAAK,EAAE,oBAAoB,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IAIvE,uBAAuB,EAAE,MAAM,EAAE,CAAC;;IAiB1C,OAAO,CAAC,kBAAkB;IAe1B,OAAO,CAAC,cAAc;IAetB,OAAO,CAAC,aAAa;IAYZ,iBAAiB,IAAI,IAAI;IAQlC;;;;OAIG;IACM,wBAAwB,CAC/B,KAAK,EAAE,IAAI,GAAG,MAAM,GAAG,QAAQ,GAAG,IAAI,EACtC,KAAK,EAAE,SAAS,GAAG,cAAc,GAChC,IAAI;IAcP;;;;;;;;;;OAUG;IACH,OAAO,CAAC,WAAW;IAQV,iBAAiB;IAMjB,oBAAoB;IAMpB,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAoC/C,YAAY;IAOrB,OAAO,CAAC,SAAS;IASjB,OAAO,CAAC,eAAe;IAevB,OAAO,CAAC,iBAAiB,CAgDvB;IAEF,OAAO,CAAC,cAAc,CAgDpB;IAEF,OAAO,CAAC,iBAAiB;IAIhB,MAAM;CAsBhB"}
|
|
@@ -69,11 +69,11 @@ const o = class o extends f(p) {
|
|
|
69
69
|
detail: { value: s.value, checked: !0 }
|
|
70
70
|
}));
|
|
71
71
|
}
|
|
72
|
-
}, this.type = "radio", this.legend = "", this.legendHidden = !1, this.theme = "", this.value =
|
|
72
|
+
}, this.type = "radio", this.legend = "", this.legendHidden = !1, this.theme = "", this.value = void 0, this.values = void 0, this.disabled = !1, this.required = !1, this._internalSelectedValues = [], this.validationMessages = void 0;
|
|
73
73
|
}
|
|
74
74
|
// Get current selected values (controlled or uncontrolled)
|
|
75
75
|
_getSelectedValues() {
|
|
76
|
-
return this.type === "radio" ? this.value ? [this.value] : this._internalSelectedValues : this.values
|
|
76
|
+
return this.type === "radio" ? this.value !== void 0 ? this.value ? [this.value] : [] : this._internalSelectedValues : this.values !== void 0 ? this.values : this._internalSelectedValues;
|
|
77
77
|
}
|
|
78
78
|
// ─── FACE ─────────────────────────────────────────────────────────────────
|
|
79
79
|
_syncFormValue() {
|
|
@@ -28,8 +28,6 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
|
|
|
28
28
|
name: string;
|
|
29
29
|
legend: string;
|
|
30
30
|
legendHidden: boolean;
|
|
31
|
-
value: string;
|
|
32
|
-
values: () => never[];
|
|
33
31
|
disabled: boolean;
|
|
34
32
|
required: boolean;
|
|
35
33
|
}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
|
|
@@ -41,8 +39,6 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
|
|
|
41
39
|
name: string;
|
|
42
40
|
legend: string;
|
|
43
41
|
legendHidden: boolean;
|
|
44
|
-
value: string;
|
|
45
|
-
values: () => never[];
|
|
46
42
|
disabled: boolean;
|
|
47
43
|
required: boolean;
|
|
48
44
|
}>>> & Readonly<{
|
|
@@ -50,13 +46,11 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
|
|
|
50
46
|
"onSelection-change"?: ((detail: SelectionChangeEventDetail) => any) | undefined;
|
|
51
47
|
"onUpdate:values"?: ((values: string[]) => any) | undefined;
|
|
52
48
|
}>, {
|
|
53
|
-
values: string[];
|
|
54
49
|
disabled: boolean;
|
|
55
50
|
name: string;
|
|
56
51
|
type: SelectionType;
|
|
57
52
|
legend: string;
|
|
58
53
|
required: boolean;
|
|
59
|
-
value: string;
|
|
60
54
|
legendHidden: boolean;
|
|
61
55
|
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
|
|
62
56
|
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"VueSelectionCardGroup.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/SelectionCardGroup/vue/VueSelectionCardGroup.vue"],"names":[],"mappings":"AAiBA;AAEA,OAAO,4BAA4B,CAAC;AACpC,OAAO,KAAK,EAAE,aAAa,EAAE,0BAA0B,EAAE,MAAM,4BAA4B,CAAC;AAC5F,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAErE,MAAM,WAAW,0BAA0B;IACzC,gEAAgE;IAChE,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,4CAA4C;IAC5C,IAAI,EAAE,MAAM,CAAC;IACb,mDAAmD;IACnD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,2DAA2D;IAC3D,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,sCAAsC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0CAA0C;IAC1C,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sEAAsE;IACtE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kBAAkB,CAAC,EAAE,kBAAkB,CAAC;CACzC;
|
|
1
|
+
{"version":3,"file":"VueSelectionCardGroup.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/SelectionCardGroup/vue/VueSelectionCardGroup.vue"],"names":[],"mappings":"AAiBA;AAEA,OAAO,4BAA4B,CAAC;AACpC,OAAO,KAAK,EAAE,aAAa,EAAE,0BAA0B,EAAE,MAAM,4BAA4B,CAAC;AAC5F,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAErE,MAAM,WAAW,0BAA0B;IACzC,gEAAgE;IAChE,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,4CAA4C;IAC5C,IAAI,EAAE,MAAM,CAAC;IACb,mDAAmD;IACnD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,2DAA2D;IAC3D,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,sCAAsC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0CAA0C;IAC1C,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sEAAsE;IACtE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kBAAkB,CAAC,EAAE,kBAAkB,CAAC;CACzC;AA2CD,iBAAS,cAAc;qBA2CM,GAAG;EAK/B;AAUD,QAAA,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;cAzGR,OAAO;UAVZ,MAAM;UAFL,aAAa;YAIX,MAAM;cAUJ,OAAO;kBARH,OAAO;4EAsHtB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAAvG,wBAAwG;AACxG,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC;AAC9M,KAAK,kBAAkB,CAAC,CAAC,EAAE,CAAC,IAAI;KAE1B,CAAC,IAAI,MAAM,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,SAAS,MAAM,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG;QACxE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;KACb,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CACT,CAAC;AACN,KAAK,cAAc,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC;AACxD,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAAE,QAAO;QAClD,MAAM,EAAE,CAAC,CAAC;KACT,CAAA;CAAE,CAAC"}
|
package/package.json
CHANGED
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
<div class="dialog drawer-bottom"
|
|
2
|
+
id="dialog-example"
|
|
3
|
+
aria-hidden="true"
|
|
4
|
+
aria-labelledby="drawer-end-title"
|
|
5
|
+
aria-describedby="drawer-end-description">
|
|
6
|
+
<div class="dialog-overlay"
|
|
7
|
+
data-a11y-dialog-hide></div>
|
|
8
|
+
<div class="dialog-content drawer-content drawer-slide-bottom"
|
|
9
|
+
role="document">
|
|
10
|
+
<div class="mbs16 mbe24 mis16 mie16">
|
|
11
|
+
<button data-a11y-dialog-hide
|
|
12
|
+
class="close-button close-button-large dialog-close"
|
|
13
|
+
aria-label="Close this dialog window">
|
|
14
|
+
<svg class="close"
|
|
15
|
+
viewBox="0 0 24 24"
|
|
16
|
+
aria-hidden="true">
|
|
17
|
+
<path fill="currentColor"
|
|
18
|
+
d="M.439 21.44a1.5 1.5 0 0 0 2.122 2.121l9.262-9.261a.25.25 0 0 1 .354 0l9.262 9.263a1.5 1.5 0 1 0 2.122-2.121L14.3 12.177a.25.25 0 0 1 0-.354l9.263-9.262A1.5 1.5 0 0 0 21.439.44L12.177 9.7a.25.25 0 0 1-.354 0L2.561.44A1.5 1.5 0 0 0 .439 2.561L9.7 11.823a.25.25 0 0 1 0 .354Z" />
|
|
19
|
+
</svg>
|
|
20
|
+
</button>
|
|
21
|
+
|
|
22
|
+
<h1 id="drawer-end-title">Subscribe to our newsletter</h1>
|
|
23
|
+
<p id="drawer-end-description">
|
|
24
|
+
Fill in the form below to receive our newsletter!
|
|
25
|
+
</p>
|
|
26
|
+
<form class="dialog-form-demo">
|
|
27
|
+
<label class="label"
|
|
28
|
+
for="email">Email (required)</label>
|
|
29
|
+
<input class="input input-rounded"
|
|
30
|
+
type="email"
|
|
31
|
+
name="EMAIL"
|
|
32
|
+
id="email"
|
|
33
|
+
placeholder="john.doe@gmail.com"
|
|
34
|
+
required />
|
|
35
|
+
<button class="btn btn-primary btn-rounded btn-block"
|
|
36
|
+
type="submit"
|
|
37
|
+
name="button">Sign up</button>
|
|
38
|
+
</form>
|
|
39
|
+
</div>
|
|
40
|
+
</div>
|
|
41
|
+
</div>
|
|
42
|
+
|
|
43
|
+
<button type="button"
|
|
44
|
+
class="btn btn-primary btn-bordered"
|
|
45
|
+
data-a11y-dialog-show="dialog-example">
|
|
46
|
+
Open drawer
|
|
47
|
+
</button>
|
|
48
|
+
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
<div class="dialog drawer-end"
|
|
2
|
+
id="dialog-example"
|
|
3
|
+
aria-hidden="true"
|
|
4
|
+
aria-labelledby="drawer-end-title"
|
|
5
|
+
aria-describedby="drawer-end-description">
|
|
6
|
+
<div class="dialog-overlay"
|
|
7
|
+
data-a11y-dialog-hide></div>
|
|
8
|
+
<div class="dialog-content drawer-content drawer-slide-end"
|
|
9
|
+
role="document">
|
|
10
|
+
<div class="mbs16 mbe24 mis16 mie16">
|
|
11
|
+
<button data-a11y-dialog-hide
|
|
12
|
+
class="close-button close-button-large dialog-close"
|
|
13
|
+
aria-label="Close this dialog window">
|
|
14
|
+
<svg class="close"
|
|
15
|
+
viewBox="0 0 24 24"
|
|
16
|
+
aria-hidden="true">
|
|
17
|
+
<path fill="currentColor"
|
|
18
|
+
d="M.439 21.44a1.5 1.5 0 0 0 2.122 2.121l9.262-9.261a.25.25 0 0 1 .354 0l9.262 9.263a1.5 1.5 0 1 0 2.122-2.121L14.3 12.177a.25.25 0 0 1 0-.354l9.263-9.262A1.5 1.5 0 0 0 21.439.44L12.177 9.7a.25.25 0 0 1-.354 0L2.561.44A1.5 1.5 0 0 0 .439 2.561L9.7 11.823a.25.25 0 0 1 0 .354Z" />
|
|
19
|
+
</svg>
|
|
20
|
+
</button>
|
|
21
|
+
|
|
22
|
+
<h1 id="drawer-end-title">Subscribe to our newsletter</h1>
|
|
23
|
+
<p id="drawer-end-description">
|
|
24
|
+
Fill in the form below to receive our newsletter!
|
|
25
|
+
</p>
|
|
26
|
+
<form class="dialog-form-demo">
|
|
27
|
+
<label class="label"
|
|
28
|
+
for="email">Email (required)</label>
|
|
29
|
+
<input class="input input-rounded"
|
|
30
|
+
type="email"
|
|
31
|
+
name="EMAIL"
|
|
32
|
+
id="email"
|
|
33
|
+
placeholder="john.doe@gmail.com"
|
|
34
|
+
required />
|
|
35
|
+
<button class="btn btn-primary btn-rounded btn-block"
|
|
36
|
+
type="submit"
|
|
37
|
+
name="button">Sign up</button>
|
|
38
|
+
</form>
|
|
39
|
+
</div>
|
|
40
|
+
</div>
|
|
41
|
+
</div>
|
|
42
|
+
|
|
43
|
+
<button type="button"
|
|
44
|
+
class="btn btn-primary btn-bordered"
|
|
45
|
+
data-a11y-dialog-show="dialog-example">
|
|
46
|
+
Open drawer
|
|
47
|
+
</button>
|
|
48
|
+
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
<div class="dialog drawer-start"
|
|
2
|
+
id="dialog-example"
|
|
3
|
+
aria-hidden="true"
|
|
4
|
+
aria-labelledby="drawer-end-title"
|
|
5
|
+
aria-describedby="drawer-end-description">
|
|
6
|
+
<div class="dialog-overlay"
|
|
7
|
+
data-a11y-dialog-hide></div>
|
|
8
|
+
<div class="dialog-content drawer-content drawer-slide-start"
|
|
9
|
+
role="document">
|
|
10
|
+
<div class="mbs16 mbe24 mis16 mie16">
|
|
11
|
+
<button data-a11y-dialog-hide
|
|
12
|
+
class="close-button close-button-large dialog-close"
|
|
13
|
+
aria-label="Close this dialog window">
|
|
14
|
+
<svg class="close"
|
|
15
|
+
viewBox="0 0 24 24"
|
|
16
|
+
aria-hidden="true">
|
|
17
|
+
<path fill="currentColor"
|
|
18
|
+
d="M.439 21.44a1.5 1.5 0 0 0 2.122 2.121l9.262-9.261a.25.25 0 0 1 .354 0l9.262 9.263a1.5 1.5 0 1 0 2.122-2.121L14.3 12.177a.25.25 0 0 1 0-.354l9.263-9.262A1.5 1.5 0 0 0 21.439.44L12.177 9.7a.25.25 0 0 1-.354 0L2.561.44A1.5 1.5 0 0 0 .439 2.561L9.7 11.823a.25.25 0 0 1 0 .354Z" />
|
|
19
|
+
</svg>
|
|
20
|
+
</button>
|
|
21
|
+
|
|
22
|
+
<h1 id="drawer-end-title">Subscribe to our newsletter</h1>
|
|
23
|
+
<p id="drawer-end-description">
|
|
24
|
+
Fill in the form below to receive our newsletter!
|
|
25
|
+
</p>
|
|
26
|
+
<form class="dialog-form-demo">
|
|
27
|
+
<label class="label"
|
|
28
|
+
for="email">Email (required)</label>
|
|
29
|
+
<input class="input input-rounded"
|
|
30
|
+
type="email"
|
|
31
|
+
name="EMAIL"
|
|
32
|
+
id="email"
|
|
33
|
+
placeholder="john.doe@gmail.com"
|
|
34
|
+
required />
|
|
35
|
+
<button class="btn btn-primary btn-rounded btn-block"
|
|
36
|
+
type="submit"
|
|
37
|
+
name="button">Sign up</button>
|
|
38
|
+
</form>
|
|
39
|
+
</div>
|
|
40
|
+
</div>
|
|
41
|
+
</div>
|
|
42
|
+
|
|
43
|
+
<button type="button"
|
|
44
|
+
class="btn btn-primary btn-bordered"
|
|
45
|
+
data-a11y-dialog-show="dialog-example">
|
|
46
|
+
Open drawer
|
|
47
|
+
</button>
|
|
48
|
+
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
<div class="dialog drawer-top"
|
|
2
|
+
id="dialog-example"
|
|
3
|
+
aria-hidden="true"
|
|
4
|
+
aria-labelledby="drawer-end-title"
|
|
5
|
+
aria-describedby="drawer-end-description">
|
|
6
|
+
<div class="dialog-overlay"
|
|
7
|
+
data-a11y-dialog-hide></div>
|
|
8
|
+
<div class="dialog-content drawer-content drawer-slide-top"
|
|
9
|
+
role="document">
|
|
10
|
+
<div class="mbs16 mbe24 mis16 mie16">
|
|
11
|
+
<button data-a11y-dialog-hide
|
|
12
|
+
class="close-button close-button-large dialog-close"
|
|
13
|
+
aria-label="Close this dialog window">
|
|
14
|
+
<svg class="close"
|
|
15
|
+
viewBox="0 0 24 24"
|
|
16
|
+
aria-hidden="true">
|
|
17
|
+
<path fill="currentColor"
|
|
18
|
+
d="M.439 21.44a1.5 1.5 0 0 0 2.122 2.121l9.262-9.261a.25.25 0 0 1 .354 0l9.262 9.263a1.5 1.5 0 1 0 2.122-2.121L14.3 12.177a.25.25 0 0 1 0-.354l9.263-9.262A1.5 1.5 0 0 0 21.439.44L12.177 9.7a.25.25 0 0 1-.354 0L2.561.44A1.5 1.5 0 0 0 .439 2.561L9.7 11.823a.25.25 0 0 1 0 .354Z" />
|
|
19
|
+
</svg>
|
|
20
|
+
</button>
|
|
21
|
+
|
|
22
|
+
<h1 id="drawer-end-title">Subscribe to our newsletter</h1>
|
|
23
|
+
<p id="drawer-end-description">
|
|
24
|
+
Fill in the form below to receive our newsletter!
|
|
25
|
+
</p>
|
|
26
|
+
<form class="dialog-form-demo">
|
|
27
|
+
<label class="label"
|
|
28
|
+
for="email">Email (required)</label>
|
|
29
|
+
<input class="input input-rounded"
|
|
30
|
+
type="email"
|
|
31
|
+
name="EMAIL"
|
|
32
|
+
id="email"
|
|
33
|
+
placeholder="john.doe@gmail.com"
|
|
34
|
+
required />
|
|
35
|
+
<button class="btn btn-primary btn-rounded btn-block"
|
|
36
|
+
type="submit"
|
|
37
|
+
name="button">Sign up</button>
|
|
38
|
+
</form>
|
|
39
|
+
</div>
|
|
40
|
+
</div>
|
|
41
|
+
</div>
|
|
42
|
+
|
|
43
|
+
<button type="button"
|
|
44
|
+
class="btn btn-primary btn-bordered"
|
|
45
|
+
data-a11y-dialog-show="dialog-example">
|
|
46
|
+
Open drawer
|
|
47
|
+
</button>
|
|
48
|
+
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
.dialog h1 {
|
|
2
|
+
margin: 0;
|
|
3
|
+
|
|
4
|
+
/* Since this is in a modal we want to force it smaller */
|
|
5
|
+
font-size: var(--agnostic-h3);
|
|
6
|
+
font-weight: 400;
|
|
7
|
+
line-height: 1;
|
|
8
|
+
margin-block-end: var(--fluid-16);
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.dialog-form-demo > input {
|
|
12
|
+
margin-block-end: var(--fluid-24);
|
|
13
|
+
}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
title: Dialog
|
|
2
|
+
notes: |
|
|
3
|
+
Dialog is a base-level implementation of a dialog component that can/will be leveraged for other components like popover, modal, menu, etc. Currently, the demo here is utilizing Kitty Giraudel's [a11y-dialog](https://github.com/KittyGiraudel/a11y-dialog) which is a very clean styling-agnostic JavaScript implementation that supports what you'd expect from an a11y-compliant dialog and has saved me a lot of time while I figure out the styles. Thus, the structure should be consistent with what `a11y-dialog` recommends in terms of markup structure. The `a11y-dialog` script is currently pulled in via CDN.
|
|
4
|
+
|
|
5
|
+
To be absolutely 100% clear, if you utilize AgnosticUI's CSS package, you only get the HTML/CSS for dialog. The functionality in terms of showing / dismissing the dialog, navigating with your keyboard, etc., is being handled by [a11y-dialog](https://github.com/KittyGiraudel/a11y-dialog). The AgnosticUI framework implementations (React, Angular, Svelte, Vue, etc.) likely WILL handle said functionality once they've been implemented (not the case at time of writing).
|
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
.dialog,
|
|
2
|
+
.dialog-overlay {
|
|
3
|
+
position: fixed;
|
|
4
|
+
top: 0;
|
|
5
|
+
right: 0;
|
|
6
|
+
bottom: 0;
|
|
7
|
+
left: 0;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.dialog {
|
|
11
|
+
z-index: 1001;
|
|
12
|
+
display: flex;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.dialog[aria-hidden="true"] {
|
|
16
|
+
display: none;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.dialog-overlay {
|
|
20
|
+
background-color: rgb(50 50 50 / 60%);
|
|
21
|
+
animation: fade-in var(--agnostic-timing-fast) both;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.dialog-content {
|
|
25
|
+
background-color: var(--agnostic-light);
|
|
26
|
+
margin: auto;
|
|
27
|
+
z-index: 1001;
|
|
28
|
+
position: relative;
|
|
29
|
+
padding: var(--fluid-16);
|
|
30
|
+
max-width: 90%;
|
|
31
|
+
width: 600px;
|
|
32
|
+
border-radius: var(--agnostic-radius);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.dialog-fade-in {
|
|
36
|
+
animation: fade-in var(--agnostic-timing-fast) both;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.dialog-slide-up {
|
|
40
|
+
animation: slide-up var(--agnostic-timing-slow) var(--agnostic-timing-fast) both;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
/**
|
|
44
|
+
* Cannot use two separate CSS classes with animation: foo, bar
|
|
45
|
+
* as the later class will overwrite the first (so this combines)
|
|
46
|
+
*/
|
|
47
|
+
.dialog-slide-up-fade-in {
|
|
48
|
+
animation:
|
|
49
|
+
fade-in var(--agnostic-timing-fast) both,
|
|
50
|
+
slide-up var(--agnostic-timing-slow) var(--agnostic-timing-fast) both;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
@media screen and (min-width: 700px) {
|
|
54
|
+
.dialog-content {
|
|
55
|
+
padding: var(--fluid-32);
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
@keyframes fade-in {
|
|
60
|
+
from {
|
|
61
|
+
opacity: 0%;
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
@keyframes slide-up {
|
|
66
|
+
from {
|
|
67
|
+
transform: translateY(10%);
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
/* Shared with AgnosticUI close buton so only need positioning and transition */
|
|
72
|
+
.dialog-close {
|
|
73
|
+
position: absolute;
|
|
74
|
+
top: var(--fluid-8);
|
|
75
|
+
right: var(--fluid-8);
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
@media (prefers-reduced-motion), (update: slow) {
|
|
79
|
+
.dialog-slide-up-fade-in,
|
|
80
|
+
.dialog-fade-in,
|
|
81
|
+
.dialog-slide-up,
|
|
82
|
+
.dialog-content {
|
|
83
|
+
transition-duration: 0.001ms !important;
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
@media only screen and (min-width: 576px) {
|
|
88
|
+
.dialog-close {
|
|
89
|
+
top: var(--fluid-12);
|
|
90
|
+
right: var(--fluid-12);
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
@media screen and (min-width: 768px) {
|
|
95
|
+
.dialog-close {
|
|
96
|
+
top: var(--fluid-16);
|
|
97
|
+
right: var(--fluid-16);
|
|
98
|
+
}
|
|
99
|
+
}
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
<div class="dialog"
|
|
2
|
+
id="dialog-example"
|
|
3
|
+
aria-hidden="true"
|
|
4
|
+
aria-labelledby="dialog-example-title"
|
|
5
|
+
aria-describedby="dialog-example-description">
|
|
6
|
+
<div class="dialog-overlay"
|
|
7
|
+
data-a11y-dialog-hide></div>
|
|
8
|
+
<div class="dialog-content"
|
|
9
|
+
role="document">
|
|
10
|
+
<div class="mbs16 mbe24 mis16 mie16">
|
|
11
|
+
<button data-a11y-dialog-hide
|
|
12
|
+
class="close-button close-button-large dialog-close"
|
|
13
|
+
aria-label="Close this dialog window">
|
|
14
|
+
<svg class="close"
|
|
15
|
+
viewBox="0 0 24 24"
|
|
16
|
+
aria-hidden="true">
|
|
17
|
+
<path fill="currentColor"
|
|
18
|
+
d="M.439 21.44a1.5 1.5 0 0 0 2.122 2.121l9.262-9.261a.25.25 0 0 1 .354 0l9.262 9.263a1.5 1.5 0 1 0 2.122-2.121L14.3 12.177a.25.25 0 0 1 0-.354l9.263-9.262A1.5 1.5 0 0 0 21.439.44L12.177 9.7a.25.25 0 0 1-.354 0L2.561.44A1.5 1.5 0 0 0 .439 2.561L9.7 11.823a.25.25 0 0 1 0 .354Z" />
|
|
19
|
+
</svg>
|
|
20
|
+
</button>
|
|
21
|
+
|
|
22
|
+
<h1 id="dialog-example-title">Subscribe to our newsletter</h1>
|
|
23
|
+
<p id="dialog-example-description">
|
|
24
|
+
Fill in the form below to receive our newsletter!
|
|
25
|
+
</p>
|
|
26
|
+
<form class="dialog-form-demo">
|
|
27
|
+
<label class="label"
|
|
28
|
+
for="email">Email (required)</label>
|
|
29
|
+
<input class="input input-rounded"
|
|
30
|
+
type="email"
|
|
31
|
+
name="EMAIL"
|
|
32
|
+
id="email"
|
|
33
|
+
placeholder="john.doe@gmail.com"
|
|
34
|
+
required />
|
|
35
|
+
<button class="btn btn-primary btn-rounded btn-block"
|
|
36
|
+
type="submit"
|
|
37
|
+
name="button">Sign up</button>
|
|
38
|
+
</form>
|
|
39
|
+
</div>
|
|
40
|
+
</div>
|
|
41
|
+
</div>
|
|
42
|
+
|
|
43
|
+
<button type="button"
|
|
44
|
+
class="btn btn-primary btn-bordered"
|
|
45
|
+
data-a11y-dialog-show="dialog-example">
|
|
46
|
+
Open the dialog
|
|
47
|
+
</button>
|
|
48
|
+
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Place these alongside the content like:
|
|
3
|
+
* <div class="dialog-content drawer-content drawer-slide-start"...
|
|
4
|
+
*/
|
|
5
|
+
.drawer-slide-start {
|
|
6
|
+
animation: slide-start var(--agnostic-timing-fast) ease-in-out;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
.drawer-slide-end {
|
|
10
|
+
animation: slide-end var(--agnostic-timing-fast) ease-in-out;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.drawer-slide-bottom {
|
|
14
|
+
animation: slide-bottom var(--agnostic-timing-fast) ease-in-out;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.drawer-slide-top {
|
|
18
|
+
animation: slide-top var(--agnostic-timing-fast) ease-in-out;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
@keyframes slide-top {
|
|
22
|
+
from {
|
|
23
|
+
transform: translateY(-100%);
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
@keyframes slide-bottom {
|
|
28
|
+
from {
|
|
29
|
+
transform: translateY(100%);
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
@keyframes slide-start {
|
|
34
|
+
from {
|
|
35
|
+
transform: translateX(-100%);
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
@keyframes slide-end {
|
|
40
|
+
from {
|
|
41
|
+
transform: translateX(100%);
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
@media (prefers-reduced-motion), (update: slow) {
|
|
46
|
+
.drawer-slide-top,
|
|
47
|
+
.drawer-slide-bottom,
|
|
48
|
+
.drawer-slide-start,
|
|
49
|
+
.drawer-slide-end {
|
|
50
|
+
transition-duration: 0.001ms !important;
|
|
51
|
+
}
|
|
52
|
+
}
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
.drawer-start {
|
|
2
|
+
right: initial;
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
.drawer-start[aria-hidden] {
|
|
6
|
+
transform: none;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
.drawer-end {
|
|
10
|
+
left: initial;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.drawer-end[aria-hidden] {
|
|
14
|
+
transform: none;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.drawer-top {
|
|
18
|
+
bottom: initial;
|
|
19
|
+
transform: none;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.drawer-top[aria-hidden] {
|
|
23
|
+
transform: none;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.drawer-bottom {
|
|
27
|
+
top: initial;
|
|
28
|
+
transform: none;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.drawer-bottom[aria-hidden] {
|
|
32
|
+
transform: none;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.drawer-content {
|
|
36
|
+
margin: initial;
|
|
37
|
+
max-width: initial;
|
|
38
|
+
border-radius: initial;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.drawer-start .drawer-content,
|
|
42
|
+
.drawer-end .drawer-content {
|
|
43
|
+
width: 25rem;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.drawer-top .drawer-content,
|
|
47
|
+
.drawer-bottom .drawer-content {
|
|
48
|
+
height: 25vh;
|
|
49
|
+
width: 100%;
|
|
50
|
+
}
|
|
@@ -47,9 +47,9 @@ export interface SelectionButtonGroupProps {
|
|
|
47
47
|
size?: SelectionButtonGroupSize;
|
|
48
48
|
/** Shape variant for buttons */
|
|
49
49
|
shape?: SelectionButtonGroupShape;
|
|
50
|
-
/** Controlled value for radio mode */
|
|
50
|
+
/** Controlled value for radio mode. Omit entirely for uncontrolled mode. */
|
|
51
51
|
value?: string;
|
|
52
|
-
/** Controlled values for checkbox mode */
|
|
52
|
+
/** Controlled values for checkbox mode. Omit entirely for uncontrolled mode. */
|
|
53
53
|
values?: string[];
|
|
54
54
|
/** Disable all buttons in the group */
|
|
55
55
|
disabled?: boolean;
|
|
@@ -119,10 +119,10 @@ export class AgSelectionButtonGroup extends FaceMixin(LitElement) implements Sel
|
|
|
119
119
|
declare shape: SelectionButtonGroupShape;
|
|
120
120
|
|
|
121
121
|
@property({ type: String })
|
|
122
|
-
declare value: string;
|
|
122
|
+
declare value: string | undefined;
|
|
123
123
|
|
|
124
124
|
@property({ type: Array })
|
|
125
|
-
declare values: string[];
|
|
125
|
+
declare values: string[] | undefined;
|
|
126
126
|
|
|
127
127
|
@property({ type: Boolean, reflect: true })
|
|
128
128
|
declare disabled: boolean;
|
|
@@ -148,8 +148,8 @@ export class AgSelectionButtonGroup extends FaceMixin(LitElement) implements Sel
|
|
|
148
148
|
this.theme = '';
|
|
149
149
|
this.size = 'md';
|
|
150
150
|
this.shape = '';
|
|
151
|
-
this.value =
|
|
152
|
-
this.values =
|
|
151
|
+
this.value = undefined;
|
|
152
|
+
this.values = undefined;
|
|
153
153
|
this.disabled = false;
|
|
154
154
|
this.required = false;
|
|
155
155
|
this._internalSelectedValues = [];
|
|
@@ -159,14 +159,14 @@ export class AgSelectionButtonGroup extends FaceMixin(LitElement) implements Sel
|
|
|
159
159
|
// Get current selected values (controlled or uncontrolled)
|
|
160
160
|
private _getSelectedValues(): string[] {
|
|
161
161
|
if (this.type === 'radio') {
|
|
162
|
-
//
|
|
163
|
-
if (this.value) {
|
|
164
|
-
return [this.value];
|
|
162
|
+
// Controlled if `value` was ever explicitly set, even to ''
|
|
163
|
+
if (this.value !== undefined) {
|
|
164
|
+
return this.value ? [this.value] : [];
|
|
165
165
|
}
|
|
166
166
|
return this._internalSelectedValues;
|
|
167
167
|
}
|
|
168
|
-
//
|
|
169
|
-
if (this.values
|
|
168
|
+
// Controlled if `values` was ever explicitly set, even to []
|
|
169
|
+
if (this.values !== undefined) {
|
|
170
170
|
return this.values;
|
|
171
171
|
}
|
|
172
172
|
return this._internalSelectedValues;
|
|
@@ -64,8 +64,7 @@ withDefaults(defineProps<VueSelectionButtonGroupProps>(), {
|
|
|
64
64
|
theme: '',
|
|
65
65
|
size: 'md',
|
|
66
66
|
shape: '',
|
|
67
|
-
value:
|
|
68
|
-
values: () => [],
|
|
67
|
+
// value and values: no default — let them stay undefined when unbound
|
|
69
68
|
disabled: false,
|
|
70
69
|
required: false,
|
|
71
70
|
});
|
|
@@ -107,10 +107,10 @@ export class AgSelectionCardGroup extends FaceMixin(LitElement) implements Selec
|
|
|
107
107
|
declare theme: SelectionCardGroupTheme;
|
|
108
108
|
|
|
109
109
|
@property({ type: String })
|
|
110
|
-
declare value: string;
|
|
110
|
+
declare value: string | undefined;
|
|
111
111
|
|
|
112
112
|
@property({ type: Array })
|
|
113
|
-
declare values: string[];
|
|
113
|
+
declare values: string[] | undefined;
|
|
114
114
|
|
|
115
115
|
@property({ type: Boolean, reflect: true })
|
|
116
116
|
declare disabled: boolean;
|
|
@@ -134,8 +134,8 @@ export class AgSelectionCardGroup extends FaceMixin(LitElement) implements Selec
|
|
|
134
134
|
this.legend = '';
|
|
135
135
|
this.legendHidden = false;
|
|
136
136
|
this.theme = '';
|
|
137
|
-
this.value =
|
|
138
|
-
this.values =
|
|
137
|
+
this.value = undefined;
|
|
138
|
+
this.values = undefined;
|
|
139
139
|
this.disabled = false;
|
|
140
140
|
this.required = false;
|
|
141
141
|
this._internalSelectedValues = [];
|
|
@@ -145,14 +145,12 @@ export class AgSelectionCardGroup extends FaceMixin(LitElement) implements Selec
|
|
|
145
145
|
// Get current selected values (controlled or uncontrolled)
|
|
146
146
|
private _getSelectedValues(): string[] {
|
|
147
147
|
if (this.type === 'radio') {
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
return [this.value];
|
|
148
|
+
if (this.value !== undefined) {
|
|
149
|
+
return this.value ? [this.value] : [];
|
|
151
150
|
}
|
|
152
151
|
return this._internalSelectedValues;
|
|
153
152
|
}
|
|
154
|
-
|
|
155
|
-
if (this.values && this.values.length > 0) {
|
|
153
|
+
if (this.values !== undefined) {
|
|
156
154
|
return this.values;
|
|
157
155
|
}
|
|
158
156
|
return this._internalSelectedValues;
|
|
@@ -46,8 +46,7 @@ withDefaults(defineProps<VueSelectionCardGroupProps>(), {
|
|
|
46
46
|
name: '',
|
|
47
47
|
legend: '',
|
|
48
48
|
legendHidden: false,
|
|
49
|
-
value
|
|
50
|
-
values: () => [],
|
|
49
|
+
// value and values intentionally omitted — undefined signals uncontrolled mode
|
|
51
50
|
disabled: false,
|
|
52
51
|
required: false,
|
|
53
52
|
});
|