sit-onyx 1.0.0-alpha.45 → 1.0.0-alpha.47
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/components/OnyxCheckbox/types.d.ts +2 -5
- package/dist/components/OnyxIconButton/OnyxIconButton.vue.d.ts +0 -3
- package/dist/components/OnyxIconButton/types.d.ts +0 -6
- package/dist/components/OnyxInput/OnyxInput.stories.d.ts +14 -4
- package/dist/components/OnyxInput/types.d.ts +9 -6
- package/dist/components/OnyxRadioButton/OnyxRadioButton.vue.d.ts +3 -0
- package/dist/components/OnyxRadioButton/types.d.ts +2 -1
- package/dist/components/OnyxRadioButtonGroup/OnyxRadioButtonGroup.vue.d.ts +6 -0
- package/dist/components/OnyxRadioButtonGroup/types.d.ts +3 -6
- package/dist/components/OnyxSkeleton/OnyxSkeleton.stories.d.ts +1 -1
- package/dist/components/OnyxSwitch/OnyxSwitch.vue.d.ts +0 -3
- package/dist/components/OnyxSwitch/types.d.ts +2 -5
- package/dist/composables/density.d.ts +15 -0
- package/dist/composables/required.d.ts +27 -0
- package/dist/index.cjs +1 -1
- package/dist/index.d.ts +1 -4
- package/dist/index.js +391 -373
- package/dist/style.css +1 -1
- package/dist/types/index.d.ts +5 -0
- package/dist/utils/playwright.d.ts +6 -9
- package/package.json +5 -3
- package/src/styles/density.scss +61 -0
- package/src/styles/index.scss +1 -0
- package/src/styles/required.scss +34 -23
- package/src/types/colors.ts +10 -0
- package/src/types/dom.ts +10 -0
- package/src/types/fonts.ts +7 -0
- package/src/types/i18n.ts +68 -0
- package/src/types/index.ts +5 -0
- package/src/types/utils.ts +4 -0
|
@@ -1,5 +1,6 @@
|
|
|
1
|
+
import type { RequiredMarkerProp } from "../../composables/required";
|
|
1
2
|
import type { TruncationType } from "../../types/fonts";
|
|
2
|
-
export type OnyxCheckboxProps = {
|
|
3
|
+
export type OnyxCheckboxProps = RequiredMarkerProp & {
|
|
3
4
|
/**
|
|
4
5
|
* Whether the checkbox is checked.
|
|
5
6
|
*/
|
|
@@ -17,10 +18,6 @@ export type OnyxCheckboxProps = {
|
|
|
17
18
|
* Whether to disable the checkbox and prevent user interaction.
|
|
18
19
|
*/
|
|
19
20
|
disabled?: boolean;
|
|
20
|
-
/**
|
|
21
|
-
* Whether the checkbox is required / has to be checked.
|
|
22
|
-
*/
|
|
23
|
-
required?: boolean;
|
|
24
21
|
/**
|
|
25
22
|
* If `true`, the label will be visually hidden.
|
|
26
23
|
* For accessibility / screen readers, the aria-label will still be set.
|
|
@@ -3,19 +3,16 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
|
|
|
3
3
|
disabled: boolean;
|
|
4
4
|
type: string;
|
|
5
5
|
variation: string;
|
|
6
|
-
size: string;
|
|
7
6
|
}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
8
7
|
click: () => void;
|
|
9
8
|
}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<OnyxIconButtonProps>, {
|
|
10
9
|
disabled: boolean;
|
|
11
10
|
type: string;
|
|
12
11
|
variation: string;
|
|
13
|
-
size: string;
|
|
14
12
|
}>>> & {
|
|
15
13
|
onClick?: (() => any) | undefined;
|
|
16
14
|
}, {
|
|
17
15
|
type: "button" | "submit" | "reset";
|
|
18
|
-
size: "12px" | "16px" | "24px" | "32px" | "48px" | "64px" | "96px";
|
|
19
16
|
disabled: boolean;
|
|
20
17
|
variation: "primary" | "secondary" | "danger";
|
|
21
18
|
}, {}>, Readonly<{
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import type { ButtonType, ButtonVariation } from "../OnyxButton/types";
|
|
2
|
-
import type { IconSize } from "../OnyxIcon/types";
|
|
3
2
|
export type OnyxIconButtonProps = {
|
|
4
3
|
/**
|
|
5
4
|
* The aria-label of the button.
|
|
@@ -26,9 +25,4 @@ export type OnyxIconButtonProps = {
|
|
|
26
25
|
* The icon which will be displayed. The custom content in the `default` won't have an effect if the `icon` property is set.
|
|
27
26
|
*/
|
|
28
27
|
icon?: string;
|
|
29
|
-
/**
|
|
30
|
-
* Icon size. Pixel values will be translated to the according `rem` value by the base of `16px`=`1rem`.
|
|
31
|
-
* @default 24px
|
|
32
|
-
*/
|
|
33
|
-
size?: IconSize;
|
|
34
28
|
};
|
|
@@ -15,7 +15,7 @@ export declare const Default: {
|
|
|
15
15
|
};
|
|
16
16
|
};
|
|
17
17
|
/**
|
|
18
|
-
* This example shows
|
|
18
|
+
* This example shows an input with a placeholder.
|
|
19
19
|
*/
|
|
20
20
|
export declare const Placeholder: {
|
|
21
21
|
args: {
|
|
@@ -63,7 +63,7 @@ export declare const Loading: {
|
|
|
63
63
|
};
|
|
64
64
|
};
|
|
65
65
|
/**
|
|
66
|
-
* This example shows
|
|
66
|
+
* This example shows an input with a maxlength and counter.
|
|
67
67
|
*/
|
|
68
68
|
export declare const Maxlength: {
|
|
69
69
|
args: {
|
|
@@ -73,7 +73,7 @@ export declare const Maxlength: {
|
|
|
73
73
|
};
|
|
74
74
|
};
|
|
75
75
|
/**
|
|
76
|
-
* This example shows
|
|
76
|
+
* This example shows an input with a message / help text.
|
|
77
77
|
*/
|
|
78
78
|
export declare const WithMessage: {
|
|
79
79
|
args: {
|
|
@@ -82,7 +82,7 @@ export declare const WithMessage: {
|
|
|
82
82
|
};
|
|
83
83
|
};
|
|
84
84
|
/**
|
|
85
|
-
* This example shows
|
|
85
|
+
* This example shows an input with autocomplete where the browser suggest to fill the input value.
|
|
86
86
|
* Note: For this example you need to have set your name in your browser settings.
|
|
87
87
|
*/
|
|
88
88
|
export declare const Autocomplete: {
|
|
@@ -91,3 +91,13 @@ export declare const Autocomplete: {
|
|
|
91
91
|
autocomplete: "name";
|
|
92
92
|
};
|
|
93
93
|
};
|
|
94
|
+
/**
|
|
95
|
+
* This example shows an input without a visual label.
|
|
96
|
+
* For accessibility / screen readers it must still be passed.
|
|
97
|
+
*/
|
|
98
|
+
export declare const HiddenLabel: {
|
|
99
|
+
args: {
|
|
100
|
+
label: string;
|
|
101
|
+
hideLabel: true;
|
|
102
|
+
};
|
|
103
|
+
};
|
|
@@ -1,6 +1,8 @@
|
|
|
1
|
-
|
|
1
|
+
import type { RequiredMarkerProp } from "../../composables/required";
|
|
2
|
+
export type OnyxInputProps = RequiredMarkerProp & {
|
|
2
3
|
/**
|
|
3
|
-
* Label to show above the input.
|
|
4
|
+
* Label to show above the input. Required due to accessibility / screen readers.
|
|
5
|
+
* If you want to visually hide the label, use the `hideLabel` property.
|
|
4
6
|
*/
|
|
5
7
|
label: string;
|
|
6
8
|
/**
|
|
@@ -15,10 +17,6 @@ export type OnyxInputProps = {
|
|
|
15
17
|
* Placeholder to show when the value is empty.
|
|
16
18
|
*/
|
|
17
19
|
placeholder?: string;
|
|
18
|
-
/**
|
|
19
|
-
* Whether the input is required.
|
|
20
|
-
*/
|
|
21
|
-
required?: boolean;
|
|
22
20
|
/**
|
|
23
21
|
* If and how text should be automatically be capitalized when using non-physical keyboards
|
|
24
22
|
* (such as virtual keyboard on mobile devices or voice input).
|
|
@@ -81,6 +79,11 @@ export type OnyxInputProps = {
|
|
|
81
79
|
* Message / help text to display below the input.
|
|
82
80
|
*/
|
|
83
81
|
message?: string;
|
|
82
|
+
/**
|
|
83
|
+
* If `true`, the label will be visually hidden.
|
|
84
|
+
* For accessibility / screen readers, the aria-label will still be set.
|
|
85
|
+
*/
|
|
86
|
+
hideLabel?: boolean;
|
|
84
87
|
};
|
|
85
88
|
export declare const INPUT_TYPES: readonly ["email", "password", "search", "tel", "text", "url"];
|
|
86
89
|
export type InputType = (typeof INPUT_TYPES)[number];
|
|
@@ -8,6 +8,7 @@ declare const _default: <TValue>(__VLS_props: {
|
|
|
8
8
|
skeleton?: boolean | undefined;
|
|
9
9
|
truncation?: "ellipsis" | "multiline" | undefined;
|
|
10
10
|
name: string;
|
|
11
|
+
density?: "default" | "cozy" | "compact" | undefined;
|
|
11
12
|
errorMessage?: string | undefined;
|
|
12
13
|
} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, __VLS_ctx?: {
|
|
13
14
|
attrs: any;
|
|
@@ -24,6 +25,7 @@ declare const _default: <TValue>(__VLS_props: {
|
|
|
24
25
|
skeleton?: boolean | undefined;
|
|
25
26
|
truncation?: "ellipsis" | "multiline" | undefined;
|
|
26
27
|
name: string;
|
|
28
|
+
density?: "default" | "cozy" | "compact" | undefined;
|
|
27
29
|
errorMessage?: string | undefined;
|
|
28
30
|
} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps;
|
|
29
31
|
expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
|
|
@@ -44,6 +46,7 @@ declare const _default: <TValue>(__VLS_props: {
|
|
|
44
46
|
skeleton?: boolean | undefined;
|
|
45
47
|
truncation?: "ellipsis" | "multiline" | undefined;
|
|
46
48
|
name: string;
|
|
49
|
+
density?: "default" | "cozy" | "compact" | undefined;
|
|
47
50
|
errorMessage?: string | undefined;
|
|
48
51
|
} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps;
|
|
49
52
|
expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import type { DensityProp } from "../../composables/density";
|
|
1
2
|
import type { TruncationType } from "../../types/fonts";
|
|
2
3
|
/**
|
|
3
4
|
* TODO: move to dedicated file
|
|
@@ -26,7 +27,7 @@ export type SelectionOption<T = unknown> = {
|
|
|
26
27
|
export type SelectionProps<T> = SelectionOption<T> & {
|
|
27
28
|
selected?: boolean;
|
|
28
29
|
};
|
|
29
|
-
export type RadioButtonProps<TValue> = SelectionProps<TValue> & {
|
|
30
|
+
export type RadioButtonProps<TValue> = SelectionProps<TValue> & DensityProp & {
|
|
30
31
|
/**
|
|
31
32
|
* Identifier for the radio buttons in the group.
|
|
32
33
|
* All radio buttons that should belong to the same radio group must have the same name.
|
|
@@ -3,9 +3,11 @@ declare const _default: <TValue>(__VLS_props: {
|
|
|
3
3
|
required?: boolean | undefined;
|
|
4
4
|
disabled?: boolean | undefined;
|
|
5
5
|
skeleton?: number | undefined;
|
|
6
|
+
requiredMarker?: "required" | "optional" | undefined;
|
|
6
7
|
modelValue?: SelectionOption<TValue> | undefined;
|
|
7
8
|
"onUpdate:modelValue"?: ((selected: SelectionOption<TValue>) => any) | undefined;
|
|
8
9
|
name?: string | undefined;
|
|
10
|
+
density?: "default" | "cozy" | "compact" | undefined;
|
|
9
11
|
errorMessage?: string | undefined;
|
|
10
12
|
headline?: string | undefined;
|
|
11
13
|
direction?: "horizontal" | "vertical" | undefined;
|
|
@@ -19,9 +21,11 @@ declare const _default: <TValue>(__VLS_props: {
|
|
|
19
21
|
required?: boolean | undefined;
|
|
20
22
|
disabled?: boolean | undefined;
|
|
21
23
|
skeleton?: number | undefined;
|
|
24
|
+
requiredMarker?: "required" | "optional" | undefined;
|
|
22
25
|
modelValue?: SelectionOption<TValue> | undefined;
|
|
23
26
|
"onUpdate:modelValue"?: ((selected: SelectionOption<TValue>) => any) | undefined;
|
|
24
27
|
name?: string | undefined;
|
|
28
|
+
density?: "default" | "cozy" | "compact" | undefined;
|
|
25
29
|
errorMessage?: string | undefined;
|
|
26
30
|
headline?: string | undefined;
|
|
27
31
|
direction?: "horizontal" | "vertical" | undefined;
|
|
@@ -39,9 +43,11 @@ declare const _default: <TValue>(__VLS_props: {
|
|
|
39
43
|
required?: boolean | undefined;
|
|
40
44
|
disabled?: boolean | undefined;
|
|
41
45
|
skeleton?: number | undefined;
|
|
46
|
+
requiredMarker?: "required" | "optional" | undefined;
|
|
42
47
|
modelValue?: SelectionOption<TValue> | undefined;
|
|
43
48
|
"onUpdate:modelValue"?: ((selected: SelectionOption<TValue>) => any) | undefined;
|
|
44
49
|
name?: string | undefined;
|
|
50
|
+
density?: "default" | "cozy" | "compact" | undefined;
|
|
45
51
|
errorMessage?: string | undefined;
|
|
46
52
|
headline?: string | undefined;
|
|
47
53
|
direction?: "horizontal" | "vertical" | undefined;
|
|
@@ -1,5 +1,7 @@
|
|
|
1
|
+
import type { RequiredMarkerProp } from "../../composables/required";
|
|
2
|
+
import type { DensityProp } from "../../composables/density";
|
|
1
3
|
import type { SelectionOption } from "../OnyxRadioButton/types";
|
|
2
|
-
export type OnyxRadioButtonGroupProps<TValue> = {
|
|
4
|
+
export type OnyxRadioButtonGroupProps<TValue> = DensityProp & RequiredMarkerProp & {
|
|
3
5
|
/**
|
|
4
6
|
* Unique name for the radio button group form element.
|
|
5
7
|
* Will automatically filled, when it is not given.
|
|
@@ -15,11 +17,6 @@ export type OnyxRadioButtonGroupProps<TValue> = {
|
|
|
15
17
|
* It will also show the required indicator, if `require` is set to `true`
|
|
16
18
|
*/
|
|
17
19
|
headline?: string;
|
|
18
|
-
/**
|
|
19
|
-
* Set the radio button group to be required.
|
|
20
|
-
* If no `headline` is defined then no required indicator will be visible.
|
|
21
|
-
*/
|
|
22
|
-
required?: boolean;
|
|
23
20
|
/**
|
|
24
21
|
* Disable the radio button group.
|
|
25
22
|
*/
|
|
@@ -3,7 +3,7 @@ import OnyxSkeleton from "./OnyxSkeleton.vue";
|
|
|
3
3
|
/**
|
|
4
4
|
* The skeleton can be used during the process of building up / loading the initial page.
|
|
5
5
|
*
|
|
6
|
-
* **Note**:
|
|
6
|
+
* **Note**: Apply height/width via CSS.
|
|
7
7
|
*/
|
|
8
8
|
declare const meta: Meta<typeof OnyxSkeleton>;
|
|
9
9
|
export default meta;
|
|
@@ -2,7 +2,6 @@ import type { OnyxSwitchProps } from "./types";
|
|
|
2
2
|
declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<OnyxSwitchProps>, {
|
|
3
3
|
modelValue: boolean;
|
|
4
4
|
disabled: boolean;
|
|
5
|
-
required: boolean;
|
|
6
5
|
truncation: string;
|
|
7
6
|
skeleton: boolean;
|
|
8
7
|
}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
@@ -11,14 +10,12 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
|
|
|
11
10
|
}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<OnyxSwitchProps>, {
|
|
12
11
|
modelValue: boolean;
|
|
13
12
|
disabled: boolean;
|
|
14
|
-
required: boolean;
|
|
15
13
|
truncation: string;
|
|
16
14
|
skeleton: boolean;
|
|
17
15
|
}>>> & {
|
|
18
16
|
"onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
|
|
19
17
|
onValidityChange?: ((state: ValidityState) => any) | undefined;
|
|
20
18
|
}, {
|
|
21
|
-
required: boolean;
|
|
22
19
|
disabled: boolean;
|
|
23
20
|
skeleton: boolean;
|
|
24
21
|
modelValue: boolean;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
+
import type { RequiredMarkerProp } from "../../composables/required";
|
|
1
2
|
import type { TruncationType } from "../../types/fonts";
|
|
2
|
-
export type OnyxSwitchProps = {
|
|
3
|
+
export type OnyxSwitchProps = RequiredMarkerProp & {
|
|
3
4
|
/**
|
|
4
5
|
* Whether the switch should be checked or not.
|
|
5
6
|
*/
|
|
@@ -12,10 +13,6 @@ export type OnyxSwitchProps = {
|
|
|
12
13
|
* Whether to disable the switch and prevent user interaction.
|
|
13
14
|
*/
|
|
14
15
|
disabled?: boolean;
|
|
15
|
-
/**
|
|
16
|
-
* Whether the switch is required / has to be checked.
|
|
17
|
-
*/
|
|
18
|
-
required?: boolean;
|
|
19
16
|
/**
|
|
20
17
|
* The error message will set switch to invalid state.
|
|
21
18
|
*/
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
declare const DENSITY: readonly ["cozy", "default", "compact"];
|
|
2
|
+
export type DensityType = (typeof DENSITY)[number];
|
|
3
|
+
export type DensityProp = {
|
|
4
|
+
/**
|
|
5
|
+
* Density defines the amount of vertical white space a component has and the height of the main (interactive) element of a component.
|
|
6
|
+
* @default undefined By default the parents setting is used, if none is defined on any parent `default` is the default.
|
|
7
|
+
*/
|
|
8
|
+
density?: DensityType;
|
|
9
|
+
};
|
|
10
|
+
export declare const useDensity: (props: DensityProp) => {
|
|
11
|
+
densityClass: import("vue").ComputedRef<{
|
|
12
|
+
[x: string]: "default" | "cozy" | "compact" | undefined;
|
|
13
|
+
}>;
|
|
14
|
+
};
|
|
15
|
+
export {};
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
declare const REQUIRED_MARKER: readonly ["optional", "required"];
|
|
2
|
+
export type RequiredMarkerType = (typeof REQUIRED_MARKER)[number];
|
|
3
|
+
export type RequiredMarkerProp = {
|
|
4
|
+
/**
|
|
5
|
+
* Whether the a value for this form element is required.
|
|
6
|
+
*/
|
|
7
|
+
required?: boolean;
|
|
8
|
+
/**
|
|
9
|
+
* Required mode: `optional` will show an `(optional)` text after the label for optional inputs.
|
|
10
|
+
* `required` will show an `*` indicator for required inputs after the label instead.
|
|
11
|
+
* @default undefined By default the parents setting is used, if none is defined on any `required` is the default.
|
|
12
|
+
*/
|
|
13
|
+
requiredMarker?: RequiredMarkerType;
|
|
14
|
+
};
|
|
15
|
+
export declare const useRequired: (props: RequiredMarkerProp) => {
|
|
16
|
+
/**
|
|
17
|
+
* Class that configures which type of required marker is used.
|
|
18
|
+
*/
|
|
19
|
+
requiredTypeClass: import("vue").ComputedRef<{
|
|
20
|
+
[x: string]: "required" | "optional" | undefined;
|
|
21
|
+
}>;
|
|
22
|
+
requiredMarkerClass: import("vue").ComputedRef<{
|
|
23
|
+
"onyx-required-marker": boolean | undefined;
|
|
24
|
+
"onyx-optional-marker": boolean;
|
|
25
|
+
}>;
|
|
26
|
+
};
|
|
27
|
+
export {};
|
package/dist/index.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),I={key:0,class:"onyx-app__nav"},z={class:"onyx-app__page"},q={key:1,class:"onyx-app__page-overlay"},M={key:2,class:"onyx-app__app-overlay"},P=e.defineComponent({__name:"OnyxAppLayout",props:{navBarAlignment:{default:"top"}},setup(n){const o=n,t=e.useSlots();return(l,a)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["onyx-app",{"onyx-app--horizontal":o.navBarAlignment==="left"}])},[e.unref(t).navBar?(e.openBlock(),e.createElementBlock("nav",I,[e.renderSlot(l.$slots,"navBar")])):e.createCommentVNode("",!0),e.createElementVNode("div",z,[e.renderSlot(l.$slots,"default")]),e.unref(t).pageOverlay?(e.openBlock(),e.createElementBlock("div",q,[e.renderSlot(l.$slots,"pageOverlay")])):e.createCommentVNode("",!0),e.unref(t).appOverlay?(e.openBlock(),e.createElementBlock("div",M,[e.renderSlot(l.$slots,"appOverlay")])):e.createCommentVNode("",!0)],2))}}),A=["innerHTML"],h=e.defineComponent({__name:"OnyxIcon",props:{icon:{},size:{default:"24px"},color:{default:"currentColor"}},setup(n){const o=n;return(t,l)=>(e.openBlock(),e.createElementBlock("figure",{class:e.normalizeClass(["onyx-icon",[o.size!=="24px"?`onyx-icon--${o.size}`:"",o.color!=="currentColor"?`onyx-icon--${o.color}`:""]]),"aria-hidden":"true",innerHTML:o.icon},null,10,A))}}),g=(n,o)=>{const t=n.__vccOpts||n;for(const[l,a]of o)t[l]=a;return t},D={},U={class:"onyx-skeleton"};function R(n,o){return e.openBlock(),e.createElementBlock("figure",U)}const f=g(D,[["render",R]]),Y=["disabled"],G={class:"onyx-button__label onyx-truncation-ellipsis"},F=e.defineComponent({__name:"OnyxButton",props:{label:{},disabled:{type:Boolean,default:!1},type:{default:"button"},variation:{default:"primary"},mode:{default:"default"},icon:{},skeleton:{type:Boolean,default:!1}},emits:["click"],setup(n,{emit:o}){const t=n,l=o;return(a,r)=>t.skeleton?(e.openBlock(),e.createBlock(f,{key:0,class:"onyx-button-skeleton"})):(e.openBlock(),e.createElementBlock("button",{key:1,class:e.normalizeClass(["onyx-button",[`onyx-button--${t.variation}`,`onyx-button--${t.mode}`]]),disabled:t.disabled,onClick:r[0]||(r[0]=i=>l("click"))},[t.icon?(e.openBlock(),e.createBlock(h,{key:0,icon:t.icon,size:"24px"},null,8,["icon"])):e.createCommentVNode("",!0),e.createElementVNode("span",G,e.toDisplayString(t.label),1)],10,Y))}}),H=["button","submit","reset"],j=["primary","secondary","danger"],X=["default","outline","plain"],Z="(optional)",K={tooShort:"Please lengthen this text to {minLength} characters or more (you are currently using 1 character) | Please lengthen this text to {minLength} characters or more (you are currently using {n} characters)",tooLong:"Please shorten this text to {maxLength} characters or less (you are currently using 1 character) | Please shorten this text to {maxLength} characters or less (you are currently using {n} characters)",rangeUnderflow:"Value must be greater than or equal to {min}",rangeOverflow:"Value must be less than or equal to {max}",patternMismatch:"Please match the format requested.",valueMissing:"Please fill in this field.",stepMismatch:"Please enter a value that is a multiple of {step}.",badInput:'"{value}" does not match the expected type.',typeMismatch:{generic:'"{value}" does not match the expected type.',email:'"{value}" must be a valid email address.',number:'"{value}" must be a number.',tel:'"{value}" must be a valid phone number.',url:'"{value}" must a valid URL.'}},J="Select all",x={optional:Z,validations:K,selectAll:J},N=Symbol(),O=n=>{const o=e.computed(()=>e.unref(n==null?void 0:n.locale)??"en-US"),t=e.computed(()=>n!=null&&n.messages&&o.value in n.messages?n.messages[o.value]:x),l=e.computed(()=>(a,r={})=>{let i=$(a,t.value)??$(a,x)??"";const c=typeof r.n=="number"?r.n:void 0;return i=Q(i,c),ee(i,r)});return{locale:o,t:l}},W=(n,o)=>n.provide(N,O(o)),v=()=>e.inject(N,()=>O(),!0),$=(n,o)=>{const t=n.split(".").reduce((l,a)=>!l||typeof l=="string"?l:l[a],o);return t&&typeof t=="string"?t:void 0},Q=(n,o)=>{const t=n.split(" | ").map(a=>a.trim());if(t.length<=1)return n;let l=1;return o===0&&(l=0),o&&(o<=0||o>1)&&(l=2),t.length===2?l===1?t[0]:t[1]:t[l]},ee=(n,o)=>o?Object.entries(o).reduce((l,[a,r])=>r===void 0?l:l.replace(new RegExp(`{${a}}`,"gi"),r.toString()),n).replace(/\s?{.*}\s?/gi,""):n,te={key:0,class:"onyx-checkbox-skeleton"},oe={class:"onyx-checkbox__container"},ne=["aria-label","indeterminate","disabled","required"],k=e.defineComponent({__name:"OnyxCheckbox",props:{modelValue:{type:Boolean,default:!1},label:{},indeterminate:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},required:{type:Boolean,default:!1},hideLabel:{type:Boolean},truncation:{default:"ellipsis"},skeleton:{type:Boolean,default:!1}},emits:["update:modelValue"],setup(n,{emit:o}){const t=n,l=o,a=e.computed({get:()=>t.modelValue,set:c=>l("update:modelValue",c)}),r=e.ref(!1),i=e.computed(()=>t.hideLabel?"":`onyx-${t.required?"required":"optional"}-marker`);return(c,u)=>t.skeleton?(e.openBlock(),e.createElementBlock("div",te,[e.createVNode(f,{class:"onyx-checkbox-skeleton__input"}),t.hideLabel?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(f,{key:0,class:"onyx-checkbox-skeleton__label"}))])):(e.openBlock(),e.createElementBlock("label",{key:1,class:e.normalizeClass(["onyx-checkbox",[i.value]])},[e.createElementVNode("div",oe,[e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":u[0]||(u[0]=s=>a.value=s),"aria-label":t.hideLabel?t.label:void 0,class:e.normalizeClass(["onyx-checkbox__input",{"onyx-checkbox__input--touched":r.value}]),type:"checkbox",indeterminate:t.indeterminate,disabled:t.disabled,required:t.required,onBlur:u[1]||(u[1]=s=>r.value=!0)},null,42,ne),[[e.vModelCheckbox,a.value]])]),t.hideLabel?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("p",{key:0,class:e.normalizeClass(["onyx-checkbox__label",[`onyx-truncation-${t.truncation}`]])},e.toDisplayString(t.label),3))],2))}}),le=["disabled"],ae={key:0,class:"onyx-checkbox-group__label"},re=e.defineComponent({__name:"OnyxCheckboxGroup",props:{options:{},modelValue:{default:()=>[]},headline:{},direction:{default:"vertical"},withCheckAll:{type:Boolean,default:!1},checkAllLabel:{},disabled:{type:Boolean,default:!1},skeleton:{}},emits:["update:modelValue"],setup(n,{emit:o}){const t=n,l=o,{t:a}=v(),r=(s,p)=>{const d=p?[...t.modelValue,s]:t.modelValue.filter(y=>y!==s);l("update:modelValue",d)},i=e.computed(()=>t.options.filter(s=>!s.disabled&&!s.skeleton)),c=s=>{const p=s?i.value.map(({id:d})=>d):[];l("update:modelValue",p)},u=e.computed(()=>{const s=i.value.map(({id:d})=>d),p=t.modelValue.filter(d=>s.includes(d));return!s.length||!p.length?{modelValue:!1}:p.length===s.length?{modelValue:!0}:{indeterminate:!0,modelValue:!1}});return(s,p)=>(e.openBlock(),e.createElementBlock("fieldset",{class:"onyx-checkbox-group",disabled:t.disabled},[t.headline?(e.openBlock(),e.createElementBlock("legend",ae,[e.createVNode(e.unref(b),{is:"h3"},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.headline),1)]),_:1})])):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass(["onyx-checkbox-group__content",{"onyx-checkbox-group__content--horizontal":t.direction==="horizontal"}])},[t.skeleton===void 0?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[t.withCheckAll?(e.openBlock(),e.createBlock(k,e.mergeProps({key:0},u.value,{label:t.checkAllLabel||e.unref(a)("selectAll"),"onUpdate:modelValue":c}),null,16,["label"])):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.options,d=>(e.openBlock(),e.createBlock(k,e.mergeProps({key:d.id.toString()},d,{"model-value":t.modelValue.includes(d.id),"onUpdate:modelValue":y=>r(d.id,y)}),null,16,["model-value","onUpdate:modelValue"]))),128))],64)):(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:1},e.renderList(t.skeleton,d=>(e.openBlock(),e.createBlock(k,{key:d,label:`Skeleton ${d}`,skeleton:""},null,8,["label"]))),128))],2)],8,le))}}),se=["horizontal","vertical"],b=e.defineComponent({__name:"OnyxHeadline",props:{is:{},monospace:{type:Boolean,default:!1}},setup(n){const o=n;return(t,l)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(o.is),{class:e.normalizeClass(["onyx-headline",`onyx-headline--${o.is}`,o.monospace?"onyx-headline--monospace":""])},{default:e.withCtx(()=>[e.renderSlot(t.$slots,"default")]),_:3},8,["class"]))}}),ce=["h1","h2","h3","h4","h5","h6"],ie=["12px","16px","24px","32px","48px","64px","96px"],ue={},de={class:"onyx-circle-spinner",viewBox:"0 0 50 50"},pe=e.createElementVNode("circle",{class:"onyx-circle-spinner__circle",cx:"50%",cy:"50%",r:"45%"},null,-1),me=[pe];function ye(n,o){return e.openBlock(),e.createElementBlock("svg",de,me)}const _e=g(ue,[["render",ye]]),fe={},he={class:"onyx-loading-dots"},ke=e.createElementVNode("span",{class:"onyx-loading-dots__center"},null,-1),xe=[ke];function ge(n,o){return e.openBlock(),e.createElementBlock("div",he,xe)}const ve=g(fe,[["render",ge]]),B=e.defineComponent({__name:"OnyxLoadingIndicator",props:{type:{default:"dots"}},setup(n){const o=n;return(t,l)=>o.type==="circle"?(e.openBlock(),e.createBlock(_e,{key:0})):o.type==="dots"?(e.openBlock(),e.createBlock(ve,{key:1})):e.createCommentVNode("",!0)}}),be=["aria-label","disabled"],Be=e.defineComponent({__name:"OnyxIconButton",props:{label:{},disabled:{type:Boolean,default:!1},type:{default:"button"},variation:{default:"primary"},loading:{type:Boolean},icon:{},size:{default:"24px"}},emits:["click"],setup(n,{emit:o}){const t=n,l=o;return(a,r)=>(e.openBlock(),e.createElementBlock("button",{class:e.normalizeClass(["onyx-icon-button",{[`onyx-icon-button--${t.variation}`]:!0,"onyx-icon-button--loading":t.loading}]),"aria-label":t.label,disabled:t.disabled||t.loading,onClick:r[0]||(r[0]=i=>l("click"))},[t.loading?(e.openBlock(),e.createBlock(B,{key:0,type:"circle"})):t.icon?(e.openBlock(),e.createBlock(h,{key:1,icon:t.icon,size:t.size},null,8,["icon","size"])):e.renderSlot(a.$slots,"default",{key:2})],10,be))}}),Ce={class:"onyx-input"},Ee={class:"onyx-truncation-ellipsis"},Ve={class:"onyx-input__wrapper"},$e=["placeholder","type","required","autocapitalize","autocomplete","autofocus","name","pattern","readonly","disabled","minlength","maxlength"],Se={key:0,class:"onyx-input__footer onyx-text--small"},Ne={key:0,class:"onyx-truncation-ellipsis"},Oe={key:1,class:"onyx-input__counter"},Te=e.defineComponent({__name:"OnyxInput",props:{label:{},modelValue:{default:""},type:{default:"text"},placeholder:{},required:{type:Boolean,default:!1},autocapitalize:{default:"sentences"},autocomplete:{},autofocus:{type:Boolean},name:{},pattern:{},readonly:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},loading:{type:Boolean,default:!1},maxlength:{},minlength:{},withCounter:{type:Boolean},message:{}},emits:["update:modelValue","change","focus","blur"],setup(n,{emit:o}){const t=n,l=o,a=e.computed({get:()=>t.modelValue,set:u=>l("update:modelValue",u)}),r=u=>{const s=u.target.value;l("change",s)},i=e.computed(()=>t.pattern instanceof RegExp?t.pattern.source:t.pattern),c=e.computed(()=>t.withCounter&&t.maxlength);return(u,s)=>(e.openBlock(),e.createElementBlock("div",Ce,[e.createElementVNode("label",null,[e.createElementVNode("div",{class:e.normalizeClass(["onyx-input__label onyx-text--small",{"onyx-required-marker":t.required,"onyx-optional-marker":!t.required}])},[e.createElementVNode("div",Ee,e.toDisplayString(t.label),1)],2),e.createElementVNode("div",Ve,[t.loading?(e.openBlock(),e.createBlock(e.unref(B),{key:0,class:"onyx-input__loading",type:"circle"})):e.createCommentVNode("",!0),e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":s[0]||(s[0]=p=>a.value=p),class:"onyx-input__native",placeholder:t.placeholder,type:t.type,required:t.required,autocapitalize:t.autocapitalize,autocomplete:t.autocomplete,autofocus:t.autofocus,name:t.name,pattern:i.value,readonly:t.readonly,disabled:t.disabled||t.loading,minlength:t.minlength,maxlength:t.maxlength,onChange:r,onFocus:s[1]||(s[1]=p=>l("focus")),onBlur:s[2]||(s[2]=p=>l("blur"))},null,40,$e),[[e.vModelDynamic,a.value]])])]),t.message||c.value?(e.openBlock(),e.createElementBlock("div",Se,[t.message?(e.openBlock(),e.createElementBlock("span",Ne,e.toDisplayString(t.message),1)):e.createCommentVNode("",!0),c.value?(e.openBlock(),e.createElementBlock("span",Oe,e.toDisplayString(a.value.length)+"/"+e.toDisplayString(t.maxlength),1)):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0)]))}}),we=["email","password","search","tel","text","url"],Le=["none","sentences","words","characters"],Ie='<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 32 32"><path d="M12.2 10.55v2h5.836l-8.193 8.193 1.414 1.414 8.193-8.193V19.8h2v-9.25z"/></svg>',ze=n=>/^http(s?):\/\//.test(n),qe=["href","target","rel"],Me=e.defineComponent({__name:"OnyxLink",props:{href:{},target:{default:"_self"},withExternalIcon:{type:[Boolean,String],default:"auto"}},emits:["click"],setup(n,{emit:o}){const t=n,l=o,a=e.computed(()=>t.withExternalIcon!=="auto"?t.withExternalIcon:ze(t.href));return(r,i)=>(e.openBlock(),e.createElementBlock("a",{class:"onyx-link",href:t.href,target:t.target,rel:t.target==="_blank"?"noreferrer":void 0,onClick:i[0]||(i[0]=c=>l("click"))},[e.renderSlot(r.$slots,"default"),a.value?(e.openBlock(),e.createBlock(h,{key:0,class:"onyx-link__icon",icon:e.unref(Ie),size:"16px"},null,8,["icon"])):e.createCommentVNode("",!0)],8,qe))}}),Pe=["_self","_blank","_parent","_top"],Ae={key:0,class:"onyx-page__sidebar"},De={class:"onyx-page__main"},Ue={key:1,class:"onyx-page__footer"},Re={key:2,class:"onyx-page__toasts"},Ye=e.defineComponent({__name:"OnyxPageLayout",props:{footerAsideSidebar:{type:Boolean},hideSidebar:{type:Boolean}},setup(n){const o=n,t=e.useSlots(),l=e.computed(()=>{let a="";return!t.footer&&t.sidebar&&(a="onyx-page--side-main"),t.footer&&(!t.sidebar||o.hideSidebar)&&(a="onyx-page--main-footer"),t.footer&&t.sidebar&&(o.footerAsideSidebar?a="onyx-page--side-main-footer-partial":a="onyx-page--side-main-footer-full"),a});return(a,r)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["onyx-page",l.value])},[e.unref(t).sidebar&&!o.hideSidebar?(e.openBlock(),e.createElementBlock("aside",Ae,[e.renderSlot(a.$slots,"sidebar")])):e.createCommentVNode("",!0),e.createElementVNode("main",De,[e.renderSlot(a.$slots,"default")]),e.unref(t).footer?(e.openBlock(),e.createElementBlock("footer",Ue,[e.renderSlot(a.$slots,"footer")])):e.createCommentVNode("",!0),e.unref(t).toasts?(e.openBlock(),e.createElementBlock("div",Re,[e.renderSlot(a.$slots,"toasts")])):e.createCommentVNode("",!0)],2))}}),Ge=(()=>{let n=0;return()=>n++})(),Fe=n=>`${n}-${Ge()}`,He={key:0,class:"onyx-radio-button-skeleton"},je=["title"],Xe=["required","name","value","checked","disabled"],S=e.defineComponent({__name:"OnyxRadioButton",props:{id:{},label:{},value:{},disabled:{type:Boolean,default:!1},truncation:{default:"ellipsis"},skeleton:{type:Boolean},selected:{type:Boolean,default:!1},name:{},required:{type:Boolean,default:!1},errorMessage:{}},setup(n){const o=n,t=e.ref();return e.watchEffect(()=>{var l;return(l=t.value)==null?void 0:l.setCustomValidity(o.errorMessage??"")}),(l,a)=>o.skeleton?(e.openBlock(),e.createElementBlock("div",He,[e.createVNode(f,{class:"onyx-radio-button-skeleton__input"}),e.createVNode(f,{class:"onyx-radio-button-skeleton__label"})])):(e.openBlock(),e.createElementBlock("label",{key:1,class:"onyx-radio-button",title:o.errorMessage},[e.createElementVNode("input",{ref_key:"selectorRef",ref:t,class:"onyx-radio-button__selector",type:"radio",required:o.required,name:o.name,value:o.id,checked:o.selected,disabled:o.disabled},null,8,Xe),e.createElementVNode("span",{class:e.normalizeClass(["onyx-radio-button__label",[`onyx-truncation-${o.truncation}`]])},e.toDisplayString(o.label),3)],8,je))}}),Ze=["disabled"],Ke={key:0,class:"onyx-radio-button-group__headline"},Je=e.defineComponent({__name:"OnyxRadioButtonGroup",props:{name:{default:()=>Fe("radio-button-group-name")},modelValue:{},headline:{default:""},required:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},errorMessage:{default:""},direction:{default:"vertical"},options:{},skeleton:{}},emits:["update:modelValue"],setup(n,{emit:o}){const t=n,l=o,a=r=>l("update:modelValue",t.options.find(({id:i})=>r.target.value===i));return(r,i)=>(e.openBlock(),e.createElementBlock("fieldset",{class:"onyx-radio-button-group",disabled:t.disabled,onChange:i[0]||(i[0]=c=>a(c))},[t.headline?(e.openBlock(),e.createElementBlock("legend",Ke,[e.createVNode(b,{is:"h3",class:e.normalizeClass({"onyx-required-marker":t.required,"onyx-optional-marker":!t.required})},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.headline),1)]),_:1},8,["class"])])):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass(["onyx-radio-button-group__content",{"onyx-radio-button-group__content--horizontal":t.direction==="horizontal"}])},[t.skeleton===void 0?(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:0},e.renderList(t.options,c=>{var u;return e.openBlock(),e.createBlock(S,e.mergeProps({key:c.id},c,{name:t.name,"error-message":t.errorMessage,selected:c.id===((u=t.modelValue)==null?void 0:u.id),required:t.required}),null,16,["name","error-message","selected","required"])}),128)):(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:1},e.renderList(t.skeleton,c=>(e.openBlock(),e.createBlock(S,{id:`skeleton-${c}`,key:c,label:"Skeleton ${i}",name:t.name,skeleton:""},null,8,["id","name"]))),128))],2)],40,Ze))}}),T=(n,o)=>{const t=Object.entries(n).filter(([a,r])=>r!==void 0),l=Object.entries(o).filter(([a,r])=>r!==void 0);return t.length!==l.length?!1:t.every(([a,r])=>r===o[a])},w=()=>Object.entries(Object.getOwnPropertyDescriptors(ValidityState.prototype)).filter(([n,o])=>o.enumerable).map(([n])=>n),L=n=>w().reduce((o,t)=>(o[t]=n[t],o),{}),We=n=>{if(n.valueMissing)return"valueMissing";const o=w().filter(t=>t!=="valid").sort();for(const t of o)if(t in n&&n[t])return t},Qe='<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 32 32"><path d="m21.311 10.793-8.293 8.293-3.291-3.292-1.415 1.415 4.706 4.705 9.707-9.707z"/></svg>',et='<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 32 32"><path d="m22.707 10.707-1.414-1.414L16 14.586l-5.293-5.293-1.414 1.414L14.586 16l-5.293 5.293 1.414 1.414L16 17.414l5.293 5.293 1.414-1.414L17.414 16z"/></svg>',tt={key:0,class:"onyx-switch-skeleton"},ot=["aria-label","disabled","required"],nt={class:"onyx-switch__container"},lt={class:"onyx-switch__icon"},at=e.defineComponent({__name:"OnyxSwitch",props:{modelValue:{type:Boolean,default:!1},label:{},disabled:{type:Boolean,default:!1},required:{type:Boolean,default:!1},errorMessage:{},hideLabel:{type:Boolean},truncation:{default:"ellipsis"},skeleton:{type:Boolean,default:!1}},emits:["update:modelValue","validityChange"],setup(n,{emit:o}){var s;const t=n,l=o,{errorMessage:a}=e.toRefs(t),r=e.ref(),i=e.ref((s=r.value)==null?void 0:s.validity),c=e.computed({get:()=>t.modelValue,set:p=>{l("update:modelValue",p)}});e.watch([r,a],()=>{r.value&&r.value.setCustomValidity(t.errorMessage||"")}),e.watch([r,c,a],()=>{if(!r.value)return;const p=L(r.value.validity);(!i.value||!T(p,i.value))&&(i.value=p,l("validityChange",i.value))},{immediate:!0});const u=e.computed(()=>t.hideLabel?"":`onyx-${t.required?"required":"optional"}-marker`);return(p,d)=>t.skeleton?(e.openBlock(),e.createElementBlock("div",tt,[e.createVNode(f,{class:"onyx-switch-skeleton__input"}),t.hideLabel?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(f,{key:0,class:"onyx-switch-skeleton__label"}))])):(e.openBlock(),e.createElementBlock("label",{key:1,class:e.normalizeClass(["onyx-switch",[u.value]])},[e.withDirectives(e.createElementVNode("input",{ref_key:"inputElement",ref:r,"onUpdate:modelValue":d[0]||(d[0]=y=>c.value=y),class:"onyx-switch__input",type:"checkbox","aria-label":t.hideLabel?t.label:void 0,disabled:t.disabled,required:t.required},null,8,ot),[[e.vModelCheckbox,c.value]]),e.createElementVNode("span",nt,[e.createElementVNode("span",lt,[e.createVNode(e.unref(h),{icon:c.value?e.unref(Qe):e.unref(et),size:"24px"},null,8,["icon"])])]),t.hideLabel?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("span",{key:0,class:e.normalizeClass(["onyx-switch__label",[`onyx-truncation-${t.truncation}`]])},e.toDisplayString(t.label),3))],2))}}),rt=Object.keys(x.validations.typeMismatch),st={key:0,class:"onyx-test-input__error","aria-live":"polite"},ct={class:"onyx-test-input__info"},it=e.defineComponent({__name:"TestInput",props:{modelValue:{default:""},label:{default:""},errorMessage:{},required:{type:Boolean},pattern:{},type:{default:"text"},max:{},maxLength:{},min:{},step:{},minLength:{}},emits:["update:modelValue","change","validityChange"],setup(n,{emit:o}){var y;const t=n,l=o,{t:a}=v(),{errorMessage:r}=e.toRefs(t),i=e.ref(!1),c=e.ref(null),u=e.ref((y=c.value)==null?void 0:y.validity),s=e.computed({get:()=>t.modelValue,set:m=>l("update:modelValue",m)}),p=e.computed(()=>{if(!u.value||u.value.valid)return"";const m=We(u.value);if(t.errorMessage||m==="customError")return t.errorMessage;if(!m)return"";if(m==="typeMismatch"){const _=rt.includes(t.type)?t.type:"generic";return a.value(`validations.typeMismatch.${_}`,{value:s.value})}return a.value(`validations.${m}`,{value:s.value,n:s.value.toString().length,minLength:t.minLength,maxLength:t.maxLength,min:t.min,max:t.max,step:t.step})}),d=m=>{const _=m.target;l("change",_.value)};return e.watch([c,r],()=>{c.value&&c.value.setCustomValidity(t.errorMessage||"")}),e.watch([c,s,r],()=>{if(!c.value)return;const m=L(c.value.validity);(!u.value||!T(m,u.value))&&(u.value=m,l("validityChange",u.value))},{immediate:!0}),(m,_)=>{var C,E;return e.openBlock(),e.createElementBlock("label",{class:e.normalizeClass(["onyx-test-input",{"onyx-test-input--touched":i.value}])},[e.createElementVNode("span",{class:e.normalizeClass(["onyx-test-input__label",{"onyx-test-input__label--required":t.required}])},e.toDisplayString(t.label),3),e.withDirectives(e.createElementVNode("input",e.mergeProps(t,{ref_key:"inputElement",ref:c,"onUpdate:modelValue":_[0]||(_[0]=V=>s.value=V),onChange:d,onBlur:_[1]||(_[1]=V=>i.value=!0)}),null,16),[[e.vModelDynamic,s.value]]),i.value&&!((C=u.value)!=null&&C.valid)?(e.openBlock(),e.createElementBlock("p",st,e.toDisplayString(p.value),1)):e.createCommentVNode("",!0),e.createElementVNode("p",ct,' Model value: "'+e.toDisplayString(s.value)+'", is valid: '+e.toDisplayString((E=u.value)==null?void 0:E.valid),1)],2)}}}),ut=["primary","secondary","neutral","danger","warning","success","info"],dt=["small","default","large"],pt=["ellipsis","multiline"],mt=n=>({install:o=>{W(o,n.i18n);const t=o.runWithContext(()=>v());e.watchEffect(()=>yt(t.t.value("optional")))}}),yt=n=>globalThis.document.body.style.setProperty("--onyx-global-optional-text",n);exports.AUTOCAPITALIZE=Le;exports.BUTTON_MODES=X;exports.BUTTON_TYPES=H;exports.BUTTON_VARIATIONS=j;exports.CHECKBOX_GROUP_DIRECTIONS=se;exports.HEADLINE_TYPES=ce;exports.ICON_SIZES=ie;exports.INPUT_TYPES=we;exports.LINK_TARGETS=Pe;exports.ONYX_COLORS=ut;exports.OnyxAppLayout=P;exports.OnyxButton=F;exports.OnyxCheckboxGroup=re;exports.OnyxHeadline=b;exports.OnyxIcon=h;exports.OnyxIconButton=Be;exports.OnyxInput=Te;exports.OnyxLink=Me;exports.OnyxLoadingIndicator=B;exports.OnyxPageLayout=Ye;exports.OnyxRadioButtonGroup=Je;exports.OnyxSkeleton=f;exports.OnyxSwitch=at;exports.TEXT_SIZES=dt;exports.TRUNCATION_TYPES=pt;exports.TestInput=it;exports.createOnyx=mt;
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),q={key:0,class:"onyx-app__nav"},z={class:"onyx-app__page"},P={key:1,class:"onyx-app__page-overlay"},A={key:2,class:"onyx-app__app-overlay"},D=e.defineComponent({__name:"OnyxAppLayout",props:{navBarAlignment:{default:"top"}},setup(n){const o=n,t=e.useSlots();return(l,a)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["onyx-app",{"onyx-app--horizontal":o.navBarAlignment==="left"}])},[e.unref(t).navBar?(e.openBlock(),e.createElementBlock("nav",q,[e.renderSlot(l.$slots,"navBar")])):e.createCommentVNode("",!0),e.createElementVNode("div",z,[e.renderSlot(l.$slots,"default")]),e.unref(t).pageOverlay?(e.openBlock(),e.createElementBlock("div",P,[e.renderSlot(l.$slots,"pageOverlay")])):e.createCommentVNode("",!0),e.unref(t).appOverlay?(e.openBlock(),e.createElementBlock("div",A,[e.renderSlot(l.$slots,"appOverlay")])):e.createCommentVNode("",!0)],2))}}),U=["innerHTML"],h=e.defineComponent({__name:"OnyxIcon",props:{icon:{},size:{default:"24px"},color:{default:"currentColor"}},setup(n){const o=n;return(t,l)=>(e.openBlock(),e.createElementBlock("figure",{class:e.normalizeClass(["onyx-icon",[o.size!=="24px"?`onyx-icon--${o.size}`:"",o.color!=="currentColor"?`onyx-icon--${o.color}`:""]]),"aria-hidden":"true",innerHTML:o.icon},null,10,U))}}),v=(n,o)=>{const t=n.__vccOpts||n;for(const[l,a]of o)t[l]=a;return t},R={},Y={class:"onyx-skeleton"};function G(n,o){return e.openBlock(),e.createElementBlock("figure",Y)}const f=v(R,[["render",G]]),F=["disabled","type"],H={class:"onyx-button__label onyx-truncation-ellipsis"},j=e.defineComponent({__name:"OnyxButton",props:{label:{},disabled:{type:Boolean,default:!1},type:{default:"button"},variation:{default:"primary"},mode:{default:"default"},icon:{},skeleton:{type:Boolean,default:!1}},emits:["click"],setup(n,{emit:o}){const t=n,l=o;return(a,s)=>t.skeleton?(e.openBlock(),e.createBlock(f,{key:0,class:"onyx-button-skeleton"})):(e.openBlock(),e.createElementBlock("button",{key:1,class:e.normalizeClass(["onyx-button",[`onyx-button--${t.variation}`,`onyx-button--${t.mode}`]]),disabled:t.disabled,type:t.type,onClick:s[0]||(s[0]=d=>l("click"))},[t.icon?(e.openBlock(),e.createBlock(h,{key:0,icon:t.icon,size:"24px"},null,8,["icon"])):e.createCommentVNode("",!0),e.createElementVNode("span",H,e.toDisplayString(t.label),1)],10,F))}}),X=["button","submit","reset"],Z=["primary","secondary","danger"],K=["default","outline","plain"],J="(optional)",W={tooShort:"Please lengthen this text to {minLength} characters or more (you are currently using 1 character) | Please lengthen this text to {minLength} characters or more (you are currently using {n} characters)",tooLong:"Please shorten this text to {maxLength} characters or less (you are currently using 1 character) | Please shorten this text to {maxLength} characters or less (you are currently using {n} characters)",rangeUnderflow:"Value must be greater than or equal to {min}",rangeOverflow:"Value must be less than or equal to {max}",patternMismatch:"Please match the format requested.",valueMissing:"Please fill in this field.",stepMismatch:"Please enter a value that is a multiple of {step}.",badInput:'"{value}" does not match the expected type.',typeMismatch:{generic:'"{value}" does not match the expected type.',email:'"{value}" must be a valid email address.',number:'"{value}" must be a number.',tel:'"{value}" must be a valid phone number.',url:'"{value}" must a valid URL.'}},Q="Select all",g={optional:J,validations:W,selectAll:Q},O=Symbol(),T=n=>{const o=e.computed(()=>e.unref(n==null?void 0:n.locale)??"en-US"),t=e.computed(()=>n!=null&&n.messages&&o.value in n.messages?n.messages[o.value]:g),l=e.computed(()=>(a,s={})=>{let d=$(a,t.value)??$(a,g)??"";const i=typeof s.n=="number"?s.n:void 0;return d=te(d,i),ne(d,s)});return{locale:o,t:l}},ee=(n,o)=>n.provide(O,T(o)),b=()=>e.inject(O,()=>T(),!0),$=(n,o)=>{const t=n.split(".").reduce((l,a)=>!l||typeof l=="string"?l:l[a],o);return t&&typeof t=="string"?t:void 0},te=(n,o)=>{const t=n.split(" | ").map(a=>a.trim());if(t.length<=1)return n;let l=1;return o===0&&(l=0),o&&(o<=0||o>1)&&(l=2),t.length===2?l===1?t[0]:t[1]:t[l]},ne=(n,o)=>o?Object.entries(o).reduce((l,[a,s])=>s===void 0?l:l.replace(new RegExp(`{${a}}`,"gi"),s.toString()),n).replace(/\s?{.*}\s?/gi,""):n,k=n=>({requiredTypeClass:e.computed(()=>({[`onyx-use-${n.requiredMarker}`]:n.requiredMarker})),requiredMarkerClass:e.computed(()=>({"onyx-required-marker":n.required,"onyx-optional-marker":!n.required}))}),oe={key:0,class:"onyx-checkbox-skeleton"},le={class:"onyx-checkbox__container"},ae=["aria-label","indeterminate","disabled","required"],x=e.defineComponent({__name:"OnyxCheckbox",props:{required:{type:Boolean,default:!1},requiredMarker:{},modelValue:{type:Boolean,default:!1},label:{},indeterminate:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},hideLabel:{type:Boolean},truncation:{default:"ellipsis"},skeleton:{type:Boolean,default:!1}},emits:["update:modelValue"],setup(n,{emit:o}){const t=n,{requiredMarkerClass:l,requiredTypeClass:a}=k(t),s=o,d=e.computed({get:()=>t.modelValue,set:p=>s("update:modelValue",p)}),i=e.ref(!1);return(p,r)=>t.skeleton?(e.openBlock(),e.createElementBlock("div",oe,[e.createVNode(f,{class:"onyx-checkbox-skeleton__input"}),t.hideLabel?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(f,{key:0,class:"onyx-checkbox-skeleton__label"}))])):(e.openBlock(),e.createElementBlock("label",{key:1,class:e.normalizeClass(["onyx-checkbox",[e.unref(a)]])},[e.createElementVNode("div",le,[e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":r[0]||(r[0]=u=>d.value=u),"aria-label":t.hideLabel?t.label:void 0,class:e.normalizeClass(["onyx-checkbox__input",{"onyx-checkbox__input--touched":i.value}]),type:"checkbox",indeterminate:t.indeterminate,disabled:t.disabled,required:t.required,onBlur:r[1]||(r[1]=u=>i.value=!0)},null,42,ae),[[e.vModelCheckbox,d.value]])]),t.hideLabel?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("p",{key:0,class:e.normalizeClass(["onyx-checkbox__label",[`onyx-truncation-${t.truncation}`,e.unref(l)]])},e.toDisplayString(t.label),3))],2))}}),re=["disabled"],se={key:0,class:"onyx-checkbox-group__label"},ce=e.defineComponent({__name:"OnyxCheckboxGroup",props:{options:{},modelValue:{default:()=>[]},headline:{},direction:{default:"vertical"},withCheckAll:{type:Boolean,default:!1},checkAllLabel:{},disabled:{type:Boolean,default:!1},skeleton:{}},emits:["update:modelValue"],setup(n,{emit:o}){const t=n,l=o,{t:a}=b(),s=(r,u)=>{const c=u?[...t.modelValue,r]:t.modelValue.filter(y=>y!==r);l("update:modelValue",c)},d=e.computed(()=>t.options.filter(r=>!r.disabled&&!r.skeleton)),i=r=>{const u=r?d.value.map(({id:c})=>c):[];l("update:modelValue",u)},p=e.computed(()=>{const r=d.value.map(({id:c})=>c),u=t.modelValue.filter(c=>r.includes(c));return!r.length||!u.length?{modelValue:!1}:u.length===r.length?{modelValue:!0}:{indeterminate:!0,modelValue:!1}});return(r,u)=>(e.openBlock(),e.createElementBlock("fieldset",{class:"onyx-checkbox-group",disabled:t.disabled},[t.headline?(e.openBlock(),e.createElementBlock("legend",se,[e.createVNode(e.unref(B),{is:"h3"},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.headline),1)]),_:1})])):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass(["onyx-checkbox-group__content",{"onyx-checkbox-group__content--horizontal":t.direction==="horizontal"}])},[t.skeleton===void 0?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[t.withCheckAll?(e.openBlock(),e.createBlock(x,e.mergeProps({key:0},p.value,{label:t.checkAllLabel||e.unref(a)("selectAll"),"onUpdate:modelValue":i}),null,16,["label"])):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.options,c=>(e.openBlock(),e.createBlock(x,e.mergeProps({key:c.id.toString()},c,{"model-value":t.modelValue.includes(c.id),"onUpdate:modelValue":y=>s(c.id,y)}),null,16,["model-value","onUpdate:modelValue"]))),128))],64)):(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:1},e.renderList(t.skeleton,c=>(e.openBlock(),e.createBlock(x,{key:c,label:`Skeleton ${c}`,skeleton:""},null,8,["label"]))),128))],2)],8,re))}}),ie=["horizontal","vertical"],B=e.defineComponent({__name:"OnyxHeadline",props:{is:{},monospace:{type:Boolean,default:!1}},setup(n){const o=n;return(t,l)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(o.is),{class:e.normalizeClass(["onyx-headline",`onyx-headline--${o.is}`,o.monospace?"onyx-headline--monospace":""])},{default:e.withCtx(()=>[e.renderSlot(t.$slots,"default")]),_:3},8,["class"]))}}),ue=["h1","h2","h3","h4","h5","h6"],de=["12px","16px","24px","32px","48px","64px","96px"],pe={},me={class:"onyx-circle-spinner",viewBox:"0 0 50 50"},ye=e.createElementVNode("circle",{class:"onyx-circle-spinner__circle",cx:"50%",cy:"50%",r:"45%"},null,-1),_e=[ye];function fe(n,o){return e.openBlock(),e.createElementBlock("svg",me,_e)}const he=v(pe,[["render",fe]]),ke={},xe={class:"onyx-loading-dots"},ge=e.createElementVNode("span",{class:"onyx-loading-dots__center"},null,-1),ve=[ge];function be(n,o){return e.openBlock(),e.createElementBlock("div",xe,ve)}const Be=v(ke,[["render",be]]),C=e.defineComponent({__name:"OnyxLoadingIndicator",props:{type:{default:"dots"}},setup(n){const o=n;return(t,l)=>o.type==="circle"?(e.openBlock(),e.createBlock(he,{key:0})):o.type==="dots"?(e.openBlock(),e.createBlock(Be,{key:1})):e.createCommentVNode("",!0)}}),Ce=["aria-label","disabled"],Ee=e.defineComponent({__name:"OnyxIconButton",props:{label:{},disabled:{type:Boolean,default:!1},type:{default:"button"},variation:{default:"primary"},loading:{type:Boolean},icon:{}},emits:["click"],setup(n,{emit:o}){const t=n,l=o;return(a,s)=>(e.openBlock(),e.createElementBlock("button",{class:e.normalizeClass(["onyx-icon-button",{[`onyx-icon-button--${t.variation}`]:!0,"onyx-icon-button--loading":t.loading}]),"aria-label":t.label,disabled:t.disabled||t.loading,onClick:s[0]||(s[0]=d=>l("click"))},[t.loading?(e.openBlock(),e.createBlock(C,{key:0,type:"circle"})):t.icon?(e.openBlock(),e.createBlock(h,{key:1,icon:t.icon},null,8,["icon"])):e.renderSlot(a.$slots,"default",{key:2})],10,Ce))}}),Ve={class:"onyx-truncation-ellipsis"},Se={class:"onyx-input__wrapper"},$e=["placeholder","type","required","autocapitalize","autocomplete","autofocus","name","pattern","readonly","disabled","minlength","maxlength","aria-label"],Ne={key:0,class:"onyx-input__footer onyx-text--small"},Oe={key:0,class:"onyx-truncation-ellipsis"},Te={key:1,class:"onyx-input__counter"},we=e.defineComponent({__name:"OnyxInput",props:{required:{type:Boolean,default:!1},requiredMarker:{},label:{},modelValue:{default:""},type:{default:"text"},placeholder:{},autocapitalize:{default:"sentences"},autocomplete:{},autofocus:{type:Boolean},name:{},pattern:{},readonly:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},loading:{type:Boolean,default:!1},maxlength:{},minlength:{},withCounter:{type:Boolean},message:{},hideLabel:{type:Boolean}},emits:["update:modelValue","change","focus","blur"],setup(n,{emit:o}){const t=n,l=o,{requiredMarkerClass:a,requiredTypeClass:s}=k(t),d=e.computed({get:()=>t.modelValue,set:u=>l("update:modelValue",u)}),i=u=>{const c=u.target.value;l("change",c)},p=e.computed(()=>t.pattern instanceof RegExp?t.pattern.source:t.pattern),r=e.computed(()=>t.withCounter&&t.maxlength);return(u,c)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["onyx-input",e.unref(s)])},[e.createElementVNode("label",null,[t.hideLabel?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["onyx-input__label","onyx-text--small",e.unref(a)])},[e.createElementVNode("div",Ve,e.toDisplayString(t.label),1)],2)),e.createElementVNode("div",Se,[t.loading?(e.openBlock(),e.createBlock(C,{key:0,class:"onyx-input__loading",type:"circle"})):e.createCommentVNode("",!0),e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":c[0]||(c[0]=y=>d.value=y),class:"onyx-input__native",placeholder:t.placeholder,type:t.type,required:t.required,autocapitalize:t.autocapitalize,autocomplete:t.autocomplete,autofocus:t.autofocus,name:t.name,pattern:p.value,readonly:t.readonly,disabled:t.disabled||t.loading,minlength:t.minlength,maxlength:t.maxlength,"aria-label":t.hideLabel?t.label:void 0,onChange:i,onFocus:c[1]||(c[1]=y=>l("focus")),onBlur:c[2]||(c[2]=y=>l("blur"))},null,40,$e),[[e.vModelDynamic,d.value]])])]),t.message||r.value?(e.openBlock(),e.createElementBlock("div",Ne,[t.message?(e.openBlock(),e.createElementBlock("span",Oe,e.toDisplayString(t.message),1)):e.createCommentVNode("",!0),r.value?(e.openBlock(),e.createElementBlock("span",Te,e.toDisplayString(d.value.length)+"/"+e.toDisplayString(t.maxlength),1)):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0)],2))}}),Le=["email","password","search","tel","text","url"],Ie=["none","sentences","words","characters"],Me='<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 32 32"><path d="M12.2 10.55v2h5.836l-8.193 8.193 1.414 1.414 8.193-8.193V19.8h2v-9.25z"/></svg>',qe=n=>/^http(s?):\/\//.test(n),ze=["href","target","rel"],Pe=e.defineComponent({__name:"OnyxLink",props:{href:{},target:{default:"_self"},withExternalIcon:{type:[Boolean,String],default:"auto"}},emits:["click"],setup(n,{emit:o}){const t=n,l=o,a=e.computed(()=>t.withExternalIcon!=="auto"?t.withExternalIcon:qe(t.href));return(s,d)=>(e.openBlock(),e.createElementBlock("a",{class:"onyx-link",href:t.href,target:t.target,rel:t.target==="_blank"?"noreferrer":void 0,onClick:d[0]||(d[0]=i=>l("click"))},[e.renderSlot(s.$slots,"default"),a.value?(e.openBlock(),e.createBlock(h,{key:0,class:"onyx-link__icon",icon:e.unref(Me),size:"16px"},null,8,["icon"])):e.createCommentVNode("",!0)],8,ze))}}),Ae=["_self","_blank","_parent","_top"],De={key:0,class:"onyx-page__sidebar"},Ue={class:"onyx-page__main"},Re={key:1,class:"onyx-page__footer"},Ye={key:2,class:"onyx-page__toasts"},Ge=e.defineComponent({__name:"OnyxPageLayout",props:{footerAsideSidebar:{type:Boolean},hideSidebar:{type:Boolean}},setup(n){const o=n,t=e.useSlots(),l=e.computed(()=>{let a="";return!t.footer&&t.sidebar&&(a="onyx-page--side-main"),t.footer&&(!t.sidebar||o.hideSidebar)&&(a="onyx-page--main-footer"),t.footer&&t.sidebar&&(o.footerAsideSidebar?a="onyx-page--side-main-footer-partial":a="onyx-page--side-main-footer-full"),a});return(a,s)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["onyx-page",l.value])},[e.unref(t).sidebar&&!o.hideSidebar?(e.openBlock(),e.createElementBlock("aside",De,[e.renderSlot(a.$slots,"sidebar")])):e.createCommentVNode("",!0),e.createElementVNode("main",Ue,[e.renderSlot(a.$slots,"default")]),e.unref(t).footer?(e.openBlock(),e.createElementBlock("footer",Re,[e.renderSlot(a.$slots,"footer")])):e.createCommentVNode("",!0),e.unref(t).toasts?(e.openBlock(),e.createElementBlock("div",Ye,[e.renderSlot(a.$slots,"toasts")])):e.createCommentVNode("",!0)],2))}}),Fe=(()=>{let n=0;return()=>n++})(),He=n=>`${n}-${Fe()}`,w=n=>({densityClass:e.computed(()=>({[`onyx-density-${n.density}`]:n.density}))}),je=["title"],Xe=["required","name","value","checked","disabled"],N=e.defineComponent({__name:"OnyxRadioButton",props:{id:{},label:{},value:{},disabled:{type:Boolean,default:!1},truncation:{default:"ellipsis"},skeleton:{type:Boolean},selected:{type:Boolean,default:!1},density:{},name:{},required:{type:Boolean,default:!1},errorMessage:{}},setup(n){const o=n,t=e.ref(),{densityClass:l}=w(o);return e.watchEffect(()=>{var a;return(a=t.value)==null?void 0:a.setCustomValidity(o.errorMessage??"")}),(a,s)=>o.skeleton?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["onyx-radio-button-skeleton",e.unref(l)])},[e.createVNode(f,{class:"onyx-radio-button-skeleton__input"}),e.createVNode(f,{class:"onyx-radio-button-skeleton__label"})],2)):(e.openBlock(),e.createElementBlock("label",{key:1,class:e.normalizeClass(["onyx-radio-button",e.unref(l)]),title:o.errorMessage},[e.createElementVNode("input",{ref_key:"selectorRef",ref:t,class:"onyx-radio-button__selector",type:"radio",required:o.required,name:o.name,value:o.id,checked:o.selected,disabled:o.disabled},null,8,Xe),e.createElementVNode("span",{class:e.normalizeClass(["onyx-radio-button__label",[`onyx-truncation-${o.truncation}`]])},e.toDisplayString(o.label),3)],10,je))}}),Ze=["disabled"],Ke={key:0,class:"onyx-radio-button-group__headline"},Je=e.defineComponent({__name:"OnyxRadioButtonGroup",props:{density:{},required:{type:Boolean,default:!1},requiredMarker:{},name:{default:()=>He("radio-button-group-name")},modelValue:{},headline:{default:""},disabled:{type:Boolean,default:!1},errorMessage:{default:""},direction:{default:"vertical"},options:{},skeleton:{}},emits:["update:modelValue"],setup(n,{emit:o}){const t=n,{densityClass:l}=w(t),{requiredMarkerClass:a,requiredTypeClass:s}=k(t),d=o,i=p=>d("update:modelValue",t.options.find(({id:r})=>p.target.value===r));return(p,r)=>(e.openBlock(),e.createElementBlock("fieldset",{class:e.normalizeClass(["onyx-radio-button-group",e.unref(l),e.unref(s)]),disabled:t.disabled,onChange:r[0]||(r[0]=u=>i(u))},[t.headline?(e.openBlock(),e.createElementBlock("legend",Ke,[e.createVNode(B,{is:"h3",class:e.normalizeClass(e.unref(a))},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.headline),1)]),_:1},8,["class"])])):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass(["onyx-radio-button-group__content",{"onyx-radio-button-group__content--horizontal":t.direction==="horizontal"}])},[t.skeleton===void 0?(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:0},e.renderList(t.options,u=>{var c;return e.openBlock(),e.createBlock(N,e.mergeProps({key:u.id},u,{name:t.name,"error-message":t.errorMessage,selected:u.id===((c=t.modelValue)==null?void 0:c.id),required:t.required}),null,16,["name","error-message","selected","required"])}),128)):(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:1},e.renderList(t.skeleton,u=>(e.openBlock(),e.createBlock(N,{id:`skeleton-${u}`,key:u,label:"Skeleton ${i}",name:t.name,skeleton:""},null,8,["id","name"]))),128))],2)],42,Ze))}}),L=(n,o)=>{const t=Object.entries(n).filter(([a,s])=>s!==void 0),l=Object.entries(o).filter(([a,s])=>s!==void 0);return t.length!==l.length?!1:t.every(([a,s])=>s===o[a])},I=()=>Object.entries(Object.getOwnPropertyDescriptors(ValidityState.prototype)).filter(([n,o])=>o.enumerable).map(([n])=>n),M=n=>I().reduce((o,t)=>(o[t]=n[t],o),{}),We=n=>{if(n.valueMissing)return"valueMissing";const o=I().filter(t=>t!=="valid").sort();for(const t of o)if(t in n&&n[t])return t},Qe='<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 32 32"><path d="m21.311 10.793-8.293 8.293-3.291-3.292-1.415 1.415 4.706 4.705 9.707-9.707z"/></svg>',et='<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 32 32"><path d="m22.707 10.707-1.414-1.414L16 14.586l-5.293-5.293-1.414 1.414L14.586 16l-5.293 5.293 1.414 1.414L16 17.414l5.293 5.293 1.414-1.414L17.414 16z"/></svg>',tt={key:0,class:"onyx-switch-skeleton"},nt=["aria-label","disabled","required"],ot={class:"onyx-switch__container"},lt={class:"onyx-switch__icon"},at=e.defineComponent({__name:"OnyxSwitch",props:{required:{type:Boolean},requiredMarker:{},modelValue:{type:Boolean,default:!1},label:{},disabled:{type:Boolean,default:!1},errorMessage:{},hideLabel:{type:Boolean},truncation:{default:"ellipsis"},skeleton:{type:Boolean,default:!1}},emits:["update:modelValue","validityChange"],setup(n,{emit:o}){var u;const t=n,l=o,{requiredMarkerClass:a,requiredTypeClass:s}=k(t),{errorMessage:d}=e.toRefs(t),i=e.ref(),p=e.ref((u=i.value)==null?void 0:u.validity),r=e.computed({get:()=>t.modelValue,set:c=>{l("update:modelValue",c)}});return e.watch([i,d],()=>{i.value&&i.value.setCustomValidity(t.errorMessage||"")}),e.watch([i,r,d],()=>{if(!i.value)return;const c=M(i.value.validity);(!p.value||!L(c,p.value))&&(p.value=c,l("validityChange",p.value))},{immediate:!0}),(c,y)=>t.skeleton?(e.openBlock(),e.createElementBlock("div",tt,[e.createVNode(f,{class:"onyx-switch-skeleton__input"}),t.hideLabel?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(f,{key:0,class:"onyx-switch-skeleton__label"}))])):(e.openBlock(),e.createElementBlock("label",{key:1,class:e.normalizeClass(["onyx-switch",[e.unref(s)]])},[e.withDirectives(e.createElementVNode("input",{ref_key:"inputElement",ref:i,"onUpdate:modelValue":y[0]||(y[0]=m=>r.value=m),class:"onyx-switch__input",type:"checkbox","aria-label":t.hideLabel?t.label:void 0,disabled:t.disabled,required:t.required},null,8,nt),[[e.vModelCheckbox,r.value]]),e.createElementVNode("span",ot,[e.createElementVNode("span",lt,[e.createVNode(e.unref(h),{icon:r.value?e.unref(Qe):e.unref(et),size:"24px"},null,8,["icon"])])]),t.hideLabel?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("span",{key:0,class:e.normalizeClass(["onyx-switch__label",[`onyx-truncation-${t.truncation}`,e.unref(a)]])},e.toDisplayString(t.label),3))],2))}}),rt=Object.keys(g.validations.typeMismatch),st={key:0,class:"onyx-test-input__error","aria-live":"polite"},ct={class:"onyx-test-input__info"},it=e.defineComponent({__name:"TestInput",props:{modelValue:{default:""},label:{default:""},errorMessage:{},required:{type:Boolean},pattern:{},type:{default:"text"},max:{},maxLength:{},min:{},step:{},minLength:{}},emits:["update:modelValue","change","validityChange"],setup(n,{emit:o}){var y;const t=n,l=o,{t:a}=b(),{errorMessage:s}=e.toRefs(t),d=e.ref(!1),i=e.ref(null),p=e.ref((y=i.value)==null?void 0:y.validity),r=e.computed({get:()=>t.modelValue,set:m=>l("update:modelValue",m)}),u=e.computed(()=>{if(!p.value||p.value.valid)return"";const m=We(p.value);if(t.errorMessage||m==="customError")return t.errorMessage;if(!m)return"";if(m==="typeMismatch"){const _=rt.includes(t.type)?t.type:"generic";return a.value(`validations.typeMismatch.${_}`,{value:r.value})}return a.value(`validations.${m}`,{value:r.value,n:r.value.toString().length,minLength:t.minLength,maxLength:t.maxLength,min:t.min,max:t.max,step:t.step})}),c=m=>{const _=m.target;l("change",_.value)};return e.watch([i,s],()=>{i.value&&i.value.setCustomValidity(t.errorMessage||"")}),e.watch([i,r,s],()=>{if(!i.value)return;const m=M(i.value.validity);(!p.value||!L(m,p.value))&&(p.value=m,l("validityChange",p.value))},{immediate:!0}),(m,_)=>{var E,V;return e.openBlock(),e.createElementBlock("label",{class:e.normalizeClass(["onyx-test-input",{"onyx-test-input--touched":d.value}])},[e.createElementVNode("span",{class:e.normalizeClass(["onyx-test-input__label",{"onyx-test-input__label--required":t.required}])},e.toDisplayString(t.label),3),e.withDirectives(e.createElementVNode("input",e.mergeProps(t,{ref_key:"inputElement",ref:i,"onUpdate:modelValue":_[0]||(_[0]=S=>r.value=S),onChange:c,onBlur:_[1]||(_[1]=S=>d.value=!0)}),null,16),[[e.vModelDynamic,r.value]]),d.value&&!((E=p.value)!=null&&E.valid)?(e.openBlock(),e.createElementBlock("p",st,e.toDisplayString(u.value),1)):e.createCommentVNode("",!0),e.createElementVNode("p",ct,' Model value: "'+e.toDisplayString(r.value)+'", is valid: '+e.toDisplayString((V=p.value)==null?void 0:V.valid),1)],2)}}}),ut=["primary","secondary","neutral","danger","warning","success","info"],dt=["small","default","large"],pt=["ellipsis","multiline"],mt=n=>({install:o=>{ee(o,n.i18n);const t=o.runWithContext(()=>b());e.watchEffect(()=>yt(t.t.value("optional")))}}),yt=n=>globalThis.document.body.style.setProperty("--onyx-global-optional-text",n);exports.AUTOCAPITALIZE=Ie;exports.BUTTON_MODES=K;exports.BUTTON_TYPES=X;exports.BUTTON_VARIATIONS=Z;exports.CHECKBOX_GROUP_DIRECTIONS=ie;exports.HEADLINE_TYPES=ue;exports.ICON_SIZES=de;exports.INPUT_TYPES=Le;exports.LINK_TARGETS=Ae;exports.ONYX_COLORS=ut;exports.OnyxAppLayout=D;exports.OnyxButton=j;exports.OnyxCheckboxGroup=ce;exports.OnyxHeadline=B;exports.OnyxIcon=h;exports.OnyxIconButton=Ee;exports.OnyxInput=we;exports.OnyxLink=Pe;exports.OnyxLoadingIndicator=C;exports.OnyxPageLayout=Ge;exports.OnyxRadioButtonGroup=Je;exports.OnyxSkeleton=f;exports.OnyxSwitch=at;exports.TEXT_SIZES=dt;exports.TRUNCATION_TYPES=pt;exports.TestInput=it;exports.createOnyx=mt;
|
package/dist/index.d.ts
CHANGED
|
@@ -26,8 +26,5 @@ export { default as OnyxSwitch } from './components/OnyxSwitch/OnyxSwitch.vue';
|
|
|
26
26
|
export * from './components/OnyxSwitch/types';
|
|
27
27
|
export { default as TestInput } from './components/TestInput/TestInput.vue';
|
|
28
28
|
export type { OnyxTranslations, ProvideI18nOptions } from './i18n';
|
|
29
|
-
export * from './types
|
|
30
|
-
export * from './types/fonts';
|
|
31
|
-
export * from './types/i18n';
|
|
32
|
-
export * from './types/utils';
|
|
29
|
+
export * from './types';
|
|
33
30
|
export { createOnyx } from './utils/plugin';
|