sit-onyx 1.0.0-alpha.13 → 1.0.0-alpha.15

package/dist/components/OnyxButton/OnyxButton.stories.d.ts

@@ -37,3 +37,12 @@ export declare const Danger: {
         variation: "danger";
     };
 };
+/**
+ * This example shows the button with icon
+ */
+export declare const WithIcon: {
+    args: {
+        label: string;
+        icon: string;
+    };
+};

package/dist/components/OnyxButton/types.d.ts

@@ -19,6 +19,10 @@ export type ButtonProps = {
      * The style of the button.
      */
     mode?: ButtonMode;
+    /**
+     * An icon which will be displayed on the left side of the label.
+     */
+    icon?: string;
 };
 export declare const BUTTON_TYPES: readonly ["button", "submit", "reset"];
 export type ButtonType = (typeof BUTTON_TYPES)[number];

package/dist/components/OnyxCheckbox/OnyxCheckbox.vue.d.ts

@@ -0,0 +1,42 @@
+import type { OnyxCheckboxProps } from "./types";
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<OnyxCheckboxProps>, {
+    modelValue: boolean;
+    label: string;
+    indeterminate: boolean;
+    disabled: boolean;
+    required: boolean;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<OnyxCheckboxProps>, {
+    modelValue: boolean;
+    label: string;
+    indeterminate: boolean;
+    disabled: boolean;
+    required: boolean;
+}>>> & {
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}, {
+    required: boolean;
+    label: string;
+    modelValue: boolean;
+    indeterminate: boolean;
+    disabled: boolean;
+}, {}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/components/OnyxCheckboxGroup/OnyxCheckboxGroup.stories.d.ts

@@ -0,0 +1,111 @@
+import type { Meta } from "@storybook/vue3";
+import OnyxCheckboxGroup from "./OnyxCheckboxGroup.vue";
+/**
+ * Checkboxes are a fundamental UI element, that allows users to make a binary selection.
+ * They are commonly used for tasks such as selecting multiple items, opting into services or confirming and agreeing.
+ */
+declare const meta: Meta<typeof OnyxCheckboxGroup>;
+export default meta;
+/**
+ * A checkbox group that contains a list of checkboxes.
+ */
+export declare const Default: {
+    args: {
+        headline: string;
+        modelValue: string[];
+        options: ({
+            label: string;
+            id: string;
+            required?: undefined;
+            disabled?: undefined;
+        } | {
+            label: string;
+            id: string;
+            required: true;
+            disabled?: undefined;
+        } | {
+            label: string;
+            id: string;
+            disabled: true;
+            required?: undefined;
+        })[];
+    };
+};
+/**
+ * A horizontal checkbox group.
+ */
+export declare const Horizontal: {
+    args: {
+        direction: "horizontal";
+        headline: string;
+        modelValue: string[];
+        options: ({
+            label: string;
+            id: string;
+            required?: undefined;
+            disabled?: undefined;
+        } | {
+            label: string;
+            id: string;
+            required: true;
+            disabled?: undefined;
+        } | {
+            label: string;
+            id: string;
+            disabled: true;
+            required?: undefined;
+        })[];
+    };
+};
+/**
+ * A checkbox group with the check all option to check/uncheck all options.
+ */
+export declare const WithCheckAll: {
+    args: {
+        withCheckAll: true;
+        headline: string;
+        modelValue: string[];
+        options: ({
+            label: string;
+            id: string;
+            required?: undefined;
+            disabled?: undefined;
+        } | {
+            label: string;
+            id: string;
+            required: true;
+            disabled?: undefined;
+        } | {
+            label: string;
+            id: string;
+            disabled: true;
+            required?: undefined;
+        })[];
+    };
+};
+/**
+ * A disabled checkbox group where all checkboxes are disabled.
+ */
+export declare const Disabled: {
+    args: {
+        disabled: true;
+        headline: string;
+        modelValue: string[];
+        options: ({
+            label: string;
+            id: string;
+            required?: undefined;
+            disabled?: undefined;
+        } | {
+            label: string;
+            id: string;
+            required: true;
+            disabled?: undefined;
+        } | {
+            label: string;
+            id: string;
+            disabled: true;
+            required?: undefined;
+        })[];
+    };
+};

package/dist/components/OnyxCheckboxGroup/OnyxCheckboxGroup.vue.d.ts

@@ -0,0 +1,52 @@
+declare const _default: <TValue extends string | number | boolean>(__VLS_props: {
+    modelValue?: TValue[] | undefined;
+    disabled?: boolean | undefined;
+    "onUpdate:modelValue"?: ((value: TValue[]) => any) | undefined;
+    options: import('../../index').CheckboxGroupOption<TValue>[];
+    headline?: string | undefined;
+    direction?: "horizontal" | "vertical" | undefined;
+    withCheckAll?: boolean | undefined;
+    checkAllLabel?: string | undefined;
+} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, __VLS_ctx?: {
+    attrs: any;
+    slots: {};
+    emit: (evt: "update:modelValue", value: TValue[]) => void;
+} | undefined, __VLS_expose?: ((exposed: import('vue').ShallowUnwrapRef<{}>) => void) | undefined, __VLS_setup?: Promise<{
+    props: {
+        modelValue?: TValue[] | undefined;
+        disabled?: boolean | undefined;
+        "onUpdate:modelValue"?: ((value: TValue[]) => any) | undefined;
+        options: import('../../index').CheckboxGroupOption<TValue>[];
+        headline?: string | undefined;
+        direction?: "horizontal" | "vertical" | undefined;
+        withCheckAll?: boolean | undefined;
+        checkAllLabel?: string | undefined;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps;
+    expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: {};
+    emit: (evt: "update:modelValue", value: TValue[]) => void;
+}>) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> & {
+    __ctx?: {
+        props: {
+            modelValue?: TValue[] | undefined;
+            disabled?: boolean | undefined;
+            "onUpdate:modelValue"?: ((value: TValue[]) => any) | undefined;
+            options: import('../../index').CheckboxGroupOption<TValue>[];
+            headline?: string | undefined;
+            direction?: "horizontal" | "vertical" | undefined;
+            withCheckAll?: boolean | undefined;
+            checkAllLabel?: string | undefined;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps;
+        expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
+        attrs: any;
+        slots: {};
+        emit: (evt: "update:modelValue", value: TValue[]) => void;
+    } | undefined;
+};
+export default _default;
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/components/OnyxCheckboxGroup/types.d.ts

@@ -0,0 +1,38 @@
+import type { OnyxCheckboxProps } from "../OnyxCheckbox/types";
+export type OnyxCheckboxGroupProps<TValue extends string | number | boolean = string | number | boolean> = {
+    /**
+     * Checkbox options.
+     */
+    options: CheckboxGroupOption<TValue>[];
+    /**
+     * Currently checked checkboxes.
+     */
+    modelValue?: TValue[];
+    /**
+     * Headline to show above all checkboxes which is also the fieldset legend.
+     */
+    headline?: string;
+    /**
+     * Direction of the checkboxes.
+     */
+    direction?: CheckboxGroupDirection;
+    /**
+     * If true, an additional checkbox will be displayed to check/uncheck all options.
+     * Disabled checkboxes will be excluded from the check/uncheck behavior.
+     */
+    withCheckAll?: boolean;
+    /**
+     * Checkbox label if property `withCheckAll` is enabled.
+     * If unset, a default label will be shown depending on the current locale/language.
+     */
+    checkAllLabel?: string;
+    /**
+     * Whether all checkboxes should be disabled.
+     */
+    disabled?: boolean;
+};
+export type CheckboxGroupOption<T extends string | number | boolean> = Omit<OnyxCheckboxProps, "modelValue" | "indeterminate"> & {
+    id: T;
+};
+export declare const CHECKBOX_GROUP_DIRECTIONS: readonly ["horizontal", "vertical"];
+export type CheckboxGroupDirection = (typeof CHECKBOX_GROUP_DIRECTIONS)[number];

package/dist/i18n/index.d.ts

@@ -1,6 +1,6 @@
 import type { ObjectToDottedStrings } from '../types/i18n';
 import type { DeepPartial } from '../types/utils';
-import { type MaybeRef } from "vue";
+import { type MaybeRef, type App } from "vue";
 import enUS from "./locales/en-US.json";
 /**
  * The type of the imported `enUS` above is a concrete type so the value type of each message
@@ -44,7 +44,7 @@ export type ProvideI18nOptions = {
  * Provides a global i18n instance that is used by onyx.
  * Must only be called once in the `App.vue` file of a project that consumes onyx.
  */
-export declare const provideI18n: (options: ProvideI18nOptions) => void;
+export declare const provideI18n: (app: App, options?: ProvideI18nOptions) => App<any>;
 /**
  * Injects the onyx i18n instance.
  * Creates a fallback if provide was never called.

package/dist/i18n/locales/en-US.json.d.ts

@@ -1,4 +1,5 @@
 declare const _default: {
+  "optional": "(optional)",
   "validations": {
     "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)",
@@ -15,7 +16,8 @@ declare const _default: {
       "tel": "\"{value}\" must be a valid phone number.",
       "url": "\"{value}\" must a valid URL."
     }
-  }
+  },
+  "selectAll": "Select all"
 }
 ;
 

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),T=e.defineComponent({__name:"OnyxHeadline",props:{is:{},monospace:{type:Boolean,default:!1}},setup(a){const n=a;return(t,r)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(n.is),{class:e.normalizeClass(["onyx-headline",`onyx-headline--${n.is}`,n.monospace?"onyx-headline--monospace":""])},{default:e.withCtx(()=>[e.renderSlot(t.$slots,"default")]),_:3},8,["class"]))}}),E=["disabled"],I={class:"onyx-button__label"},M=e.defineComponent({__name:"OnyxButton",props:{label:{default:""},disabled:{type:Boolean,default:!1},type:{default:"button"},variation:{default:"primary"},mode:{default:"default"}},setup(a){const n=a;return(t,r)=>(e.openBlock(),e.createElementBlock("button",{class:e.normalizeClass(["onyx-button",[`onyx-button--${n.variation}`,`onyx-button--${n.mode}`]]),disabled:n.disabled},[e.createElementVNode("span",I,e.toDisplayString(n.label),1)],10,E))}}),N=["h1","h2","h3","h4","h5","h6"],C=["button","submit","reset"],B=["primary","secondary","danger"],V=["default","outline","plain"],L=["innerHTML"],P=e.defineComponent({__name:"OnyxIcon",props:{icon:{},size:{default:"24px"},color:{default:"currentColor"}},setup(a){const n=a;return(t,r)=>(e.openBlock(),e.createElementBlock("figure",{class:e.normalizeClass(["onyx-icon",[n.size!=="24px"?`onyx-icon--${n.size}`:"",n.color!=="currentColor"?`onyx-icon--${n.color}`:""]]),"aria-hidden":"true",innerHTML:n.icon},null,10,L))}}),$=["12px","16px","24px","32px","48px","64px","96px"],D={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.'}},m={validations:D},_=Symbol(),x=a=>{const n=e.computed(()=>e.unref(a==null?void 0:a.locale)??"en-US"),t=e.computed(()=>a!=null&&a.messages&&n.value in a.messages?a.messages[n.value]:m),r=e.computed(()=>(s,o={})=>{let d=g(s,t.value)??g(s,m)??"";const i=typeof o.n=="number"?o.n:void 0;return d=z(d,i),w(d,o)});return{locale:n,t:r}},U=a=>{e.provide(_,x(a))},k=()=>e.inject(_,()=>x(),!0),g=(a,n)=>{const t=a.split(".").reduce((r,s)=>!r||typeof r=="string"?r:r[s],n);return t&&typeof t=="string"?t:void 0},z=(a,n)=>{const t=a.split(" | ").map(s=>s.trim());if(t.length<=1)return a;let r=1;return n===0&&(r=0),n&&(n<=0||n>1)&&(r=2),t.length===2?r===1?t[0]:t[1]:t[r]},w=(a,n)=>n?Object.entries(n).reduce((r,[s,o])=>o===void 0?r:r.replace(new RegExp(`{${s}}`,"gi"),o.toString()),a).replace(/\s?{.*}\s?/gi,""):a,b=()=>Object.entries(Object.getOwnPropertyDescriptors(ValidityState.prototype)).filter(([a,n])=>n.enumerable).map(([a])=>a),q=a=>b().reduce((n,t)=>(n[t]=a[t],n),{}),A=a=>{if(a.valueMissing)return"valueMissing";const n=b().filter(t=>t!=="valid").sort();for(const t of n)if(t in a&&a[t])return t},R=(a,n)=>{const t=Object.entries(a).filter(([s,o])=>o!==void 0),r=Object.entries(n).filter(([s,o])=>o!==void 0);return t.length!==r.length?!1:t.every(([s,o])=>o===n[s])},Y={key:0,class:"onyx-input__error","aria-live":"polite"},j={class:"onyx-input__info"},H=Object.keys(m.validations.typeMismatch),F=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(a,{emit:n}){var v;const t=a,r=n,{t:s}=k(),{errorMessage:o}=e.toRefs(t),d=e.ref(!1),i=e.ref(null),u=e.ref((v=i.value)==null?void 0:v.validity),p=e.computed({get:()=>t.modelValue,set:l=>r("update:modelValue",l)}),O=e.computed(()=>{if(!u.value||u.value.valid)return"";const l=A(u.value);if(t.errorMessage||l==="customError")return t.errorMessage;if(!l)return"";if(l==="typeMismatch"){const c=H.includes(t.type)?t.type:"generic";return s.value(`validations.typeMismatch.${c}`,{value:p.value})}return s.value(`validations.${l}`,{value:p.value,n:p.value.toString().length,minLength:t.minLength,maxLength:t.maxLength,min:t.min,max:t.max,step:t.step})}),S=l=>{const c=l.target;r("change",c.value)};return e.watch([i,o],()=>{i.value&&i.value.setCustomValidity(t.errorMessage||"")}),e.watch([i,p,o],()=>{if(!i.value)return;const l=q(i.value.validity);(!u.value||!R(l,u.value))&&(u.value=l,r("validityChange",u.value))},{immediate:!0}),(l,c)=>{var y,f;return e.openBlock(),e.createElementBlock("label",{class:e.normalizeClass(["onyx-input",{"onyx-input--touched":d.value}])},[e.createElementVNode("span",{class:e.normalizeClass(["onyx-input__label",{"onyx-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":c[0]||(c[0]=h=>p.value=h),onChange:S,onBlur:c[1]||(c[1]=h=>d.value=!0)}),null,16),[[e.vModelDynamic,p.value]]),d.value&&!((y=u.value)!=null&&y.valid)?(e.openBlock(),e.createElementBlock("p",Y,e.toDisplayString(O.value),1)):e.createCommentVNode("",!0),e.createElementVNode("p",j,'Model value: "'+e.toDisplayString(p.value)+'", is valid: '+e.toDisplayString((f=u.value)==null?void 0:f.valid),1)],2)}}}),X=["primary","secondary","neutral","danger","warning","success","info"];exports.BUTTON_MODES=V;exports.BUTTON_TYPES=C;exports.BUTTON_VARIATIONS=B;exports.HEADLINE_TYPES=N;exports.ICON_SIZES=$;exports.ONYX_COLORS=X;exports.OnyxButton=M;exports.OnyxHeadline=T;exports.OnyxIcon=P;exports.TestInput=F;exports.provideI18n=U;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),S="(optional)",T={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.'}},N="Select all",f={optional:S,validations:T,selectAll:N},V=Symbol(),C=l=>{const n=e.computed(()=>e.unref(l==null?void 0:l.locale)??"en-US"),t=e.computed(()=>l!=null&&l.messages&&n.value in l.messages?l.messages[n.value]:f),a=e.computed(()=>(o,r={})=>{let d=b(o,t.value)??b(o,f)??"";const i=typeof r.n=="number"?r.n:void 0;return d=M(d,i),P(d,r)});return{locale:n,t:a}},I=(l,n)=>l.provide(V,C(n)),_=()=>e.inject(V,()=>C(),!0),b=(l,n)=>{const t=l.split(".").reduce((a,o)=>!a||typeof a=="string"?a:a[o],n);return t&&typeof t=="string"?t:void 0},M=(l,n)=>{const t=l.split(" | ").map(o=>o.trim());if(t.length<=1)return l;let a=1;return n===0&&(a=0),n&&(n<=0||n>1)&&(a=2),t.length===2?a===1?t[0]:t[1]:t[a]},P=(l,n)=>n?Object.entries(n).reduce((a,[o,r])=>r===void 0?a:a.replace(new RegExp(`{${o}}`,"gi"),r.toString()),l).replace(/\s?{.*}\s?/gi,""):l,$={class:"onyx-checkbox__container"},L=["indeterminate","disabled","required"],U={key:0,class:"onyx-checkbox__label"},k=e.defineComponent({__name:"OnyxCheckbox",props:{modelValue:{type:Boolean,default:!1},label:{default:""},indeterminate:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},required:{type:Boolean,default:!1}},emits:["update:modelValue"],setup(l,{emit:n}){const t=l,a=n,o=e.computed({get:()=>t.modelValue,set:d=>a("update:modelValue",d)}),r=e.ref(!1);return(d,i)=>(e.openBlock(),e.createElementBlock("label",{class:e.normalizeClass(["onyx-checkbox",{"onyx-required-marker":t.required,"onyx-optional-marker":!t.required}])},[e.createElementVNode("div",$,[e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":i[0]||(i[0]=c=>o.value=c),class:e.normalizeClass(["onyx-checkbox__input",{"onyx-checkbox__input--touched":r.value}]),type:"checkbox",indeterminate:t.indeterminate,disabled:t.disabled,required:t.required,onBlur:i[1]||(i[1]=c=>r.value=!0)},null,42,L),[[e.vModelCheckbox,o.value]])]),t.label?(e.openBlock(),e.createElementBlock("p",U,e.toDisplayString(t.label),1)):e.createCommentVNode("",!0)],2))}}),D=["disabled"],z={key:0,class:"onyx-checkbox-group__label"},w=e.defineComponent({__name:"OnyxCheckboxGroup",props:{options:{},modelValue:{default:()=>[]},headline:{},direction:{default:"vertical"},withCheckAll:{type:Boolean,default:!1},checkAllLabel:{},disabled:{type:Boolean,default:!1}},emits:["update:modelValue"],setup(l,{emit:n}){const t=l,a=n,{t:o}=_(),r=(s,p)=>{const u=p?[...t.modelValue,s]:t.modelValue.filter(y=>y!==s);a("update:modelValue",u)},d=e.computed(()=>t.options.filter(s=>!s.disabled)),i=s=>{const p=s?d.value.map(({id:u})=>u):[];a("update:modelValue",p)},c=e.computed(()=>{const s=d.value.map(({id:u})=>u),p=t.modelValue.filter(u=>s.includes(u));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",z,[e.createVNode(e.unref(O),{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.withCheckAll?(e.openBlock(),e.createBlock(k,e.mergeProps({key:0},c.value,{label:t.checkAllLabel||e.unref(o)("selectAll"),"onUpdate:modelValue":i}),null,16,["label"])):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.options,u=>(e.openBlock(),e.createBlock(k,e.mergeProps({key:u.id.toString()},u,{"model-value":t.modelValue.includes(u.id),"onUpdate:modelValue":y=>r(u.id,y)}),null,16,["model-value","onUpdate:modelValue"]))),128))],2)],8,D))}}),q=["horizontal","vertical"],O=e.defineComponent({__name:"OnyxHeadline",props:{is:{},monospace:{type:Boolean,default:!1}},setup(l){const n=l;return(t,a)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(n.is),{class:e.normalizeClass(["onyx-headline",`onyx-headline--${n.is}`,n.monospace?"onyx-headline--monospace":""])},{default:e.withCtx(()=>[e.renderSlot(t.$slots,"default")]),_:3},8,["class"]))}}),A=["disabled"],R={class:"onyx-button__label"},H=e.defineComponent({__name:"OnyxButton",props:{label:{default:""},disabled:{type:Boolean,default:!1},type:{default:"button"},variation:{default:"primary"},mode:{default:"default"},icon:{}},setup(l){const n=l;return(t,a)=>(e.openBlock(),e.createElementBlock("button",{class:e.normalizeClass(["onyx-button",[`onyx-button--${n.variation}`,`onyx-button--${n.mode}`]]),disabled:n.disabled},[n.icon?(e.openBlock(),e.createBlock(e.unref(B),{key:0,icon:n.icon,size:"24px"},null,8,["icon"])):e.createCommentVNode("",!0),e.createElementVNode("span",R,e.toDisplayString(n.label),1)],10,A))}}),Y=["h1","h2","h3","h4","h5","h6"],j=["button","submit","reset"],G=["primary","secondary","danger"],X=["default","outline","plain"],F=["innerHTML"],B=e.defineComponent({__name:"OnyxIcon",props:{icon:{},size:{default:"24px"},color:{default:"currentColor"}},setup(l){const n=l;return(t,a)=>(e.openBlock(),e.createElementBlock("figure",{class:e.normalizeClass(["onyx-icon",[n.size!=="24px"?`onyx-icon--${n.size}`:"",n.color!=="currentColor"?`onyx-icon--${n.color}`:""]]),"aria-hidden":"true",innerHTML:n.icon},null,10,F))}}),K=["12px","16px","24px","32px","48px","64px","96px"],E=()=>Object.entries(Object.getOwnPropertyDescriptors(ValidityState.prototype)).filter(([l,n])=>n.enumerable).map(([l])=>l),Z=l=>E().reduce((n,t)=>(n[t]=l[t],n),{}),J=l=>{if(l.valueMissing)return"valueMissing";const n=E().filter(t=>t!=="valid").sort();for(const t of n)if(t in l&&l[t])return t},W=(l,n)=>{const t=Object.entries(l).filter(([o,r])=>r!==void 0),a=Object.entries(n).filter(([o,r])=>r!==void 0);return t.length!==a.length?!1:t.every(([o,r])=>r===n[o])},Q={key:0,class:"onyx-input__error","aria-live":"polite"},ee={class:"onyx-input__info"},te=Object.keys(f.validations.typeMismatch),ne=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(l,{emit:n}){var y;const t=l,a=n,{t:o}=_(),{errorMessage:r}=e.toRefs(t),d=e.ref(!1),i=e.ref(null),c=e.ref((y=i.value)==null?void 0:y.validity),s=e.computed({get:()=>t.modelValue,set:m=>a("update:modelValue",m)}),p=e.computed(()=>{if(!c.value||c.value.valid)return"";const m=J(c.value);if(t.errorMessage||m==="customError")return t.errorMessage;if(!m)return"";if(m==="typeMismatch"){const h=te.includes(t.type)?t.type:"generic";return o.value(`validations.typeMismatch.${h}`,{value:s.value})}return o.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})}),u=m=>{const h=m.target;a("change",h.value)};return e.watch([i,r],()=>{i.value&&i.value.setCustomValidity(t.errorMessage||"")}),e.watch([i,s,r],()=>{if(!i.value)return;const m=Z(i.value.validity);(!c.value||!W(m,c.value))&&(c.value=m,a("validityChange",c.value))},{immediate:!0}),(m,h)=>{var v,x;return e.openBlock(),e.createElementBlock("label",{class:e.normalizeClass(["onyx-input",{"onyx-input--touched":d.value}])},[e.createElementVNode("span",{class:e.normalizeClass(["onyx-input__label",{"onyx-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":h[0]||(h[0]=g=>s.value=g),onChange:u,onBlur:h[1]||(h[1]=g=>d.value=!0)}),null,16),[[e.vModelDynamic,s.value]]),d.value&&!((v=c.value)!=null&&v.valid)?(e.openBlock(),e.createElementBlock("p",Q,e.toDisplayString(p.value),1)):e.createCommentVNode("",!0),e.createElementVNode("p",ee,'Model value: "'+e.toDisplayString(s.value)+'", is valid: '+e.toDisplayString((x=c.value)==null?void 0:x.valid),1)],2)}}}),le=["primary","secondary","neutral","danger","warning","success","info"],ae=l=>({install:n=>{I(n,l.i18n);const t=n.runWithContext(()=>_());e.watchEffect(()=>oe(t.t.value("optional")))}}),oe=l=>globalThis.document.body.style.setProperty("--onyx-global-optional-text",l);exports.BUTTON_MODES=X;exports.BUTTON_TYPES=j;exports.BUTTON_VARIATIONS=G;exports.CHECKBOX_GROUP_DIRECTIONS=q;exports.HEADLINE_TYPES=Y;exports.ICON_SIZES=K;exports.ONYX_COLORS=le;exports.OnyxButton=H;exports.OnyxCheckboxGroup=w;exports.OnyxHeadline=O;exports.OnyxIcon=B;exports.TestInput=ne;exports.createOnyx=ae;

package/dist/index.d.ts

@@ -1,4 +1,6 @@
 export * from './components/OnyxCheckbox/types';
+export { default as OnyxCheckboxGroup } from './components/OnyxCheckboxGroup/OnyxCheckboxGroup.vue';
+export * from './components/OnyxCheckboxGroup/types';
 export { default as OnyxHeadline } from './components/OnyxHeadline/OnyxHeadline.vue';
 export { default as OnyxButton } from './components/OnyxButton/OnyxButton.vue';
 export * from './components/OnyxHeadline/types';
@@ -9,4 +11,5 @@ export { default as TestInput } from './components/TestInput/TestInput.vue';
 export * from './types/colors';
 export * from './types/i18n';
 export * from './types/utils';
-export { provideI18n, type OnyxTranslations, type ProvideI18nOptions } from './i18n';
+export { type OnyxTranslations } from './i18n';
+export { createOnyx } from './utils/plugin';