sit-onyx 0.0.0 → 0.1.0-alpha.0

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

@@ -1,30 +1,64 @@
-declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    /** The current input value */
-    modelValue?: string | undefined;
+export type TestInputProps = {
+    /**
+     * The current input value
+     * TODO: remove the "number" once we separated number inputs from the other types.
+     */
+    modelValue?: string | number;
     /** Label to show next to the input */
-    label?: string | undefined;
-    required?: boolean | undefined;
-}>, {
+    label?: string;
+    /**
+     * Error message to show when the input is invalid.
+     * If unset, a default error message is used that is provided by Onyx depending
+     * on your current locale/language and validation.
+     */
+    errorMessage?: string;
+    /** For validation: Whether a non-empty value is required */
+    required?: boolean;
+    /** For validation: The pattern that the value must match */
+    pattern?: string;
+    /** For validation: The expected type of the input's value */
+    type?: InputType;
+    /** For validation: The upper limit of a number value */
+    max?: number;
+    /**
+     * For validation: Expected maximal length of a string value. Warning: when the value is (pre)set by code,
+     * the input invalidity can not be detected by the browser, it will only show as invalid
+     * as soon as a user interacts with the input (types something).
+     */
+    maxLength?: number;
+    /** For validation: The lower limit of a number value */
+    min?: number;
+    /** Step size of a number value */
+    step?: number;
+    /**
+     * For validation: Expected minimal length of a string value. Warning: when the value is (pre)set by code,
+     * the input invalidity can not be detected by the browser, it will only show as invalid
+     * as soon as a user interacts with the input (types something).
+     */
+    minLength?: number;
+};
+export declare const INPUT_TYPES: readonly ["email", "number", "password", "search", "tel", "text", "url"];
+export type InputType = (typeof INPUT_TYPES)[number];
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<TestInputProps>, {
     modelValue: string;
     label: string;
+    type: string;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: string) => void;
+    "update:modelValue": (value: string | number) => void;
     change: (value: string) => void;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    /** The current input value */
-    modelValue?: string | undefined;
-    /** Label to show next to the input */
-    label?: string | undefined;
-    required?: boolean | undefined;
-}>, {
+    validityChange: (state: ValidityState) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<TestInputProps>, {
     modelValue: string;
     label: string;
+    type: string;
 }>>> & {
-    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
     onChange?: ((value: string) => any) | undefined;
+    onValidityChange?: ((state: ValidityState) => any) | undefined;
 }, {
-    modelValue: string;
+    modelValue: string | number;
     label: string;
+    type: "number" | "search" | "email" | "tel" | "url" | "password" | "text";
 }, {}>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;

package/dist/i18n/index.d.ts

@@ -0,0 +1,45 @@
+import type { ObjectToDottedStrings } from '../types/i18n';
+import type { DeepPartial } from '../types/utils';
+import { type MaybeRef } from "vue";
+import enUS from "./locales/en-US.json";
+/** Available translations that are used by Onyx components. */
+export type OnyxTranslations = typeof enUS;
+export type ProvideI18nOptions = {
+    /**
+     * Current locale / language to use.
+     * If a ref is passed (e.g. the locale from the `vue-i18n` package)
+     * all Onyx messages will be updated if it changes (if locale is supported).
+     * If a message is missing for your currently set locale, English will be used as fallback.
+     *
+     * @default "en-US"
+     */
+    locale?: MaybeRef<string>;
+    /**
+     * Available translations / messages. English is always supported. For build-in translations, see:
+     * https://onyx.schwarz/i18n/
+     *
+     * @example
+     * ```ts
+     * import deDE from "sit-onyx/locales/de-DE.json";
+     * {
+     *   messages: {
+     *     // English is always supported so we don't need to add it here
+     *     'de-DE': deDE
+     *   }
+     * }
+     * ```
+     */
+    messages?: Record<string, DeepPartial<OnyxTranslations>>;
+};
+/**
+ * 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;
+/**
+ * Injects the Onyx i18n instance.
+ */
+export declare const injectI18n: () => {
+    locale: import("vue").ComputedRef<string>;
+    t: import("vue").ComputedRef<(key: ObjectToDottedStrings<OnyxTranslations>, placeholders?: Record<string, string | number | undefined>) => string>;
+};

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

@@ -0,0 +1,22 @@
+declare const _default: {
+  "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)",
+    "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."
+    }
+  }
+}
+;
+
+export default _default;

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),c=["required"],i=e.defineComponent({__name:"TestInput",props:{modelValue:{default:""},label:{default:""},required:{type:Boolean}},emits:["update:modelValue","change"],setup(n,{emit:r}){const t=n,a=r,l=e.computed({get:()=>t.modelValue,set:o=>a("update:modelValue",o)}),s=o=>{const u=o.target;a("change",u.value)};return(o,u)=>(e.openBlock(),e.createElementBlock("label",null,[e.createElementVNode("span",{class:e.normalizeClass(["input__label",{"input__label--required":t.required}])},e.toDisplayString(t.label),3),e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":u[0]||(u[0]=d=>l.value=d),required:t.required,onChange:s},null,40,c),[[e.vModelText,l.value]]),e.createElementVNode("p",null,"Model value: "+e.toDisplayString(l.value),1)]))}}),p=(n,r)=>{const t=n.__vccOpts||n;for(const[a,l]of r)t[a]=l;return t},m=p(i,[["__scopeId","data-v-ec7909ed"]]);exports.TestInput=m;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("vue"),M={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.'}},p={validations:M},y=Symbol(),_=a=>{const n=t.computed(()=>t.unref(a==null?void 0:a.locale)??"en-US"),e=t.computed(()=>a!=null&&a.messages&&n.value in a.messages?a.messages[n.value]:p),r=t.computed(()=>(l,u={})=>{let i=f(l,e.value)??f(l,p)??"";const o=typeof u.n=="number"?u.n:void 0;return i=P(i,o),E(i,u)});return{locale:n,t:r}},S=a=>{t.provide(y,_(a))},I=()=>{const a=_();return t.inject(y,a)},f=(a,n)=>{const e=a.split(".").reduce((r,l)=>!r||typeof r=="string"?r:r[l],n);return e&&typeof e=="string"?e:void 0},P=(a,n)=>{const e=a.split(" | ").map(l=>l.trim());if(e.length<=1)return a;let r=1;return n===0&&(r=0),n&&(n<=0||n>1)&&(r=2),e.length===2?r===1?e[0]:e[1]:e[r]},E=(a,n)=>n?Object.entries(n).reduce((r,[l,u])=>u===void 0?r:r.replace(new RegExp(`{${l}}`,"gi"),u.toString()),a).replace(/\s?{.*}\s?/gi,""):a,L=a=>{if(a.valueMissing)return"valueMissing";const n=Object.entries(Object.getOwnPropertyDescriptors(ValidityState.prototype)).filter(([e,r])=>e!=="valid"&&r.enumerable).map(([e])=>e);for(const e of n)if(e in a&&a[e])return e},T={key:0,class:"input__error","aria-live":"polite"},V={class:"input__info"},C=Object.keys(p.validations.typeMismatch),N=t.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 d;const e=a,r=n,{t:l}=I(),u=t.ref(!1),i=t.ref(null),o=t.ref((d=i.value)==null?void 0:d.validity),m=t.computed({get:()=>e.modelValue,set:s=>r("update:modelValue",s)}),b=t.computed(()=>{if(!o.value||o.value.valid)return"";const s=L(o.value);if(e.errorMessage||s==="customError")return e.errorMessage;if(!s)return"";if(s==="typeMismatch"){const c=C.includes(e.type)?e.type:"generic";return l.value(`validations.typeMismatch.${c}`,{value:m.value})}return l.value(`validations.${s}`,{value:m.value,n:m.value.toString().length,minLength:e.minLength,maxLength:e.maxLength,min:e.min,max:e.max,step:e.step})}),x=s=>{const c=s.target;r("change",c.value)};return t.watch([m,i],()=>{i.value&&(o.value=i.value.validity)}),t.watch(o,s=>{s&&r("validityChange",s)},{deep:!0}),(s,c)=>{var v,g;return t.openBlock(),t.createElementBlock("label",{class:t.normalizeClass(["input",{"input--touched":u.value}])},[t.createElementVNode("span",{class:t.normalizeClass(["input__label",{"input__label--required":e.required}])},t.toDisplayString(e.label),3),t.withDirectives(t.createElementVNode("input",t.mergeProps(e,{ref_key:"inputElement",ref:i,"onUpdate:modelValue":c[0]||(c[0]=h=>m.value=h),onChange:x,onBlur:c[1]||(c[1]=h=>u.value=!0)}),null,16),[[t.vModelDynamic,m.value]]),u.value&&!((v=o.value)!=null&&v.valid)?(t.openBlock(),t.createElementBlock("p",T,t.toDisplayString(b.value),1)):t.createCommentVNode("",!0),t.createElementVNode("p",V,'Model value: "'+t.toDisplayString(m.value)+'", is valid: '+t.toDisplayString((g=o.value)==null?void 0:g.valid),1)],2)}}}),O=(a,n)=>{const e=a.__vccOpts||a;for(const[r,l]of n)e[r]=l;return e},k=O(N,[["__scopeId","data-v-5c77ef30"]]);exports.TestInput=k;exports.provideI18n=S;

package/dist/index.d.ts

@@ -1 +1,4 @@
 export { default as TestInput } from './components/TestInput/TestInput.vue';
+export * from './types/i18n';
+export * from './types/utils';
+export { provideI18n, type OnyxTranslations, type ProvideI18nOptions } from './i18n';

package/dist/index.js

@@ -1,40 +1,141 @@
-import { defineComponent as c, computed as i, openBlock as m, createElementBlock as _, createElementVNode as r, normalizeClass as v, toDisplayString as s, withDirectives as g, vModelText as f } from "vue";
-const h = ["required"], q = /* @__PURE__ */ c({
+import { provide as E, inject as C, computed as m, unref as O, defineComponent as N, ref as p, watch as b, openBlock as x, createElementBlock as M, normalizeClass as I, createElementVNode as d, toDisplayString as v, withDirectives as k, mergeProps as q, vModelDynamic as U, createCommentVNode as w } from "vue";
+const 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.'
+  }
+}, g = {
+  validations: D
+}, P = Symbol(), S = (t) => {
+  const r = m(() => O(t == null ? void 0 : t.locale) ?? "en-US"), e = m(() => t != null && t.messages && r.value in t.messages ? t.messages[r.value] : g), a = m(() => (n, l = {}) => {
+    let u = L(n, e.value) ?? L(n, g) ?? "";
+    const i = typeof l.n == "number" ? l.n : void 0;
+    return u = B(u, i), $(u, l);
+  });
+  return { locale: r, t: a };
+}, G = (t) => {
+  E(P, S(t));
+}, z = () => {
+  const t = S();
+  return C(P, t);
+}, L = (t, r) => {
+  const e = t.split(".").reduce((a, n) => !a || typeof a == "string" ? a : a[n], r);
+  return e && typeof e == "string" ? e : void 0;
+}, B = (t, r) => {
+  const e = t.split(" | ").map((n) => n.trim());
+  if (e.length <= 1)
+    return t;
+  let a = 1;
+  return r === 0 && (a = 0), r && (r <= 0 || r > 1) && (a = 2), e.length === 2 ? a === 1 ? e[0] : e[1] : e[a];
+}, $ = (t, r) => r ? Object.entries(r).reduce((a, [n, l]) => l === void 0 ? a : a.replace(new RegExp(`{${n}}`, "gi"), l.toString()), t).replace(/\s?{.*}\s?/gi, "") : t, j = (t) => {
+  if (t.valueMissing)
+    return "valueMissing";
+  const r = Object.entries(
+    Object.getOwnPropertyDescriptors(ValidityState.prototype)
+  ).filter(([e, a]) => e !== "valid" && a.enumerable).map(([e]) => e);
+  for (const e of r)
+    if (e in t && t[e])
+      return e;
+}, R = {
+  key: 0,
+  class: "input__error",
+  "aria-live": "polite"
+}, A = { class: "input__info" }, Y = Object.keys(
+  g.validations.typeMismatch
+), F = /* @__PURE__ */ N({
   __name: "TestInput",
   props: {
     modelValue: { default: "" },
     label: { default: "" },
-    required: { type: Boolean }
+    errorMessage: {},
+    required: { type: Boolean },
+    pattern: {},
+    type: { default: "text" },
+    max: {},
+    maxLength: {},
+    min: {},
+    step: {},
+    minLength: {}
   },
-  emits: ["update:modelValue", "change"],
-  setup(l, { emit: u }) {
-    const e = l, a = u, t = i({
+  emits: ["update:modelValue", "change", "validityChange"],
+  setup(t, { emit: r }) {
+    var h;
+    const e = t, a = r, { t: n } = z(), l = p(!1), u = p(null), i = p((h = u.value) == null ? void 0 : h.validity), c = m({
       get: () => e.modelValue,
-      set: (n) => a("update:modelValue", n)
-    }), d = (n) => {
-      const o = n.target;
+      set: (s) => a("update:modelValue", s)
+    }), T = m(() => {
+      if (!i.value || i.value.valid)
+        return "";
+      const s = j(i.value);
+      if (e.errorMessage || s === "customError")
+        return e.errorMessage;
+      if (!s)
+        return "";
+      if (s === "typeMismatch") {
+        const o = Y.includes(e.type) ? e.type : "generic";
+        return n.value(`validations.typeMismatch.${o}`, { value: c.value });
+      }
+      return n.value(`validations.${s}`, {
+        value: c.value,
+        n: c.value.toString().length,
+        minLength: e.minLength,
+        maxLength: e.maxLength,
+        min: e.min,
+        max: e.max,
+        step: e.step
+      });
+    }), V = (s) => {
+      const o = s.target;
       a("change", o.value);
     };
-    return (n, o) => (m(), _("label", null, [
-      r("span", {
-        class: v(["input__label", { "input__label--required": e.required }])
-      }, s(e.label), 3),
-      g(r("input", {
-        "onUpdate:modelValue": o[0] || (o[0] = (p) => t.value = p),
-        required: e.required,
-        onChange: d
-      }, null, 40, h), [
-        [f, t.value]
-      ]),
-      r("p", null, "Model value: " + s(t.value), 1)
-    ]));
+    return b([c, u], () => {
+      u.value && (i.value = u.value.validity);
+    }), b(
+      i,
+      (s) => {
+        s && a("validityChange", s);
+      },
+      { deep: !0 }
+    ), (s, o) => {
+      var f, y;
+      return x(), M("label", {
+        class: I(["input", { "input--touched": l.value }])
+      }, [
+        d("span", {
+          class: I(["input__label", { "input__label--required": e.required }])
+        }, v(e.label), 3),
+        k(d("input", q(e, {
+          ref_key: "inputElement",
+          ref: u,
+          "onUpdate:modelValue": o[0] || (o[0] = (_) => c.value = _),
+          onChange: V,
+          onBlur: o[1] || (o[1] = (_) => l.value = !0)
+        }), null, 16), [
+          [U, c.value]
+        ]),
+        l.value && !((f = i.value) != null && f.valid) ? (x(), M("p", R, v(T.value), 1)) : w("", !0),
+        d("p", A, 'Model value: "' + v(c.value) + '", is valid: ' + v((y = i.value) == null ? void 0 : y.valid), 1)
+      ], 2);
+    };
   }
-}), V = (l, u) => {
-  const e = l.__vccOpts || l;
-  for (const [a, t] of u)
-    e[a] = t;
+}), J = (t, r) => {
+  const e = t.__vccOpts || t;
+  for (const [a, n] of r)
+    e[a] = n;
   return e;
-}, x = /* @__PURE__ */ V(q, [["__scopeId", "data-v-ec7909ed"]]);
+}, H = /* @__PURE__ */ J(F, [["__scopeId", "data-v-5c77ef30"]]);
 export {
-  x as TestInput
+  H as TestInput,
+  G as provideI18n
 };

package/dist/style.css

@@ -1 +1 @@
-.input__label[data-v-ec7909ed]{margin-right:8px}.input__label--required[data-v-ec7909ed]:after{content:"*";color:red}
+.input[data-v-5c77ef30]{width:max-content;display:inline-block}.input__label[data-v-5c77ef30]{margin-right:8px}.input__label--required[data-v-5c77ef30]:after{content:"*";color:red}.input__error[data-v-5c77ef30]{color:#8b0000;margin:0}.input__info[data-v-5c77ef30]{color:gray}.input--touched input[data-v-5c77ef30]:valid{border-bottom-color:green}.input--touched input[data-v-5c77ef30]:invalid{border-bottom-color:red}

package/dist/types/i18n.d.ts

@@ -0,0 +1,59 @@
+/**
+ * Gets a union type from an object that contains all combinations of nested keys as arrays.
+ *
+ * @see https://stackoverflow.com/a/47058976
+ * @example
+ * ```ts
+ * type Test = ObjectToKeyPaths<{ a: "foo"; b: { c: "bar"; d: "baz" } }>;
+ * // type Test = ["a"] | ["b", "c"] | ["b", "d"]
+ * ```
+ */
+type ObjectToKeyPaths<T> = T extends string ? [] : {
+    [K in Extract<keyof T, string>]: [K, ...ObjectToKeyPaths<T[K]>];
+}[Extract<keyof T, string>];
+/**
+ * Joins the elements in the given type `T` with the separator `D`.
+ *
+ * @see https://stackoverflow.com/a/47058976
+ * @example
+ * ```ts
+ * type Test = Join<["foo", "bar"], ".">
+ * // type Test = "foo.bar"
+ * ```
+ */
+type Join<T extends string[], D extends string> = T extends [] ? never : T extends [infer F] ? F : T extends [infer F, ...infer R] ? F extends string ? `${F}${D}${Join<Extract<R, string[]>, D>}` : never : string;
+type NestedMessage = {
+    [key: string]: string | NestedMessage;
+};
+/**
+ * Translation value. Can either by a string or nested object with more translation values.
+ *
+ * @example
+ * ```ts
+ * // simple value
+ * { someKey: "Hello World" }
+ *
+ * // nested value
+ * {
+ *   someKey: {
+ *     someOtherKey: "Hello World"
+ *   }
+ * }
+ * ```
+ */
+export type TranslationValue = string | NestedMessage;
+/**
+ * Gets a union type of deeply joined keys from an object.
+ *
+ * @example
+ * ```ts
+ * ObjectToDottedStrings<{
+ *   a: "test",
+ *   b: { c: "test" }
+ * }>
+ * // results in: "a" | "b.c"
+ * ```
+ * @see https://stackoverflow.com/a/47058976
+ */
+export type ObjectToDottedStrings<T extends TranslationValue> = Join<ObjectToKeyPaths<T>, ".">;
+export {};

package/dist/types/utils.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Recursive / deep implementation of TypeScript's built-in `Partial<T>` type.
+ */
+export type DeepPartial<T> = T extends object ? {
+    [P in keyof T]?: DeepPartial<T[P]>;
+} : T;

package/dist/utils/forms.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Extracts the first invalid validity type from the given HTML ValidityState.
+ * "valueMissing" is prioritized over other types to align with the default browser behavior.
+ */
+export declare const getFirstInvalidType: (validity: ValidityState) => "tooShort" | "tooLong" | "rangeUnderflow" | "rangeOverflow" | "patternMismatch" | "valueMissing" | "stepMismatch" | "badInput" | "typeMismatch" | "customError" | undefined;

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "sit-onyx",
   "description": "A design system and Vue.js component library created by Schwarz IT",
-  "version": "0.0.0",
+  "version": "0.1.0-alpha.0",
   "type": "module",
   "license": "Apache-2.0",
   "files": [
-    "dist"
+    "dist",
+    "src/i18n/locales"
   ],
   "exports": {
     ".": {
@@ -13,6 +14,7 @@
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"
     },
+    "./locales": "./src/i18n/locales",
     "./style.css": "./dist/style.css"
   },
   "repository": {
@@ -29,23 +31,23 @@
   "devDependencies": {
     "@playwright/experimental-ct-vue": "^1.40.1",
     "@playwright/test": "^1.40.1",
-    "@storybook/addon-essentials": "^7.6.4",
-    "@storybook/blocks": "^7.6.4",
-    "@storybook/vue3": "^7.6.4",
-    "@storybook/vue3-vite": "^7.6.4",
-    "@vue/compiler-dom": "^3.3.11",
-    "eslint-plugin-playwright": "~0.20.0",
+    "@storybook/addon-essentials": "^7.6.7",
+    "@storybook/blocks": "^7.6.7",
+    "@storybook/vue3": "^7.6.7",
+    "@storybook/vue3-vite": "^7.6.7",
+    "@vue/compiler-dom": "^3.4.5",
+    "eslint-plugin-playwright": "~0.21.0",
     "react": "^18.2.0",
-    "storybook": "^7.6.4",
-    "@sit-onyx/storybook-utils": "^0.0.0"
+    "storybook": "^7.6.7",
+    "@sit-onyx/storybook-utils": "^0.1.0-alpha.0"
   },
   "scripts": {
-    "dev": "storybook dev -p 6006 --no-open",
-    "build": "run-p type-check build-only",
+    "dev": "storybook dev -p 6006",
+    "build": "pnpm run '/type-check|build-only/'",
     "build:storybook": "storybook build",
-    "preview": "vite serve storybook-static",
-    "test:unit": "vitest",
-    "test:unit:coverage": "pnpm run test:unit --coverage",
+    "preview": "vite serve storybook-static --open",
+    "test": "vitest",
+    "test:coverage": "vitest run --coverage",
     "test:components": "playwright install && playwright test",
     "build-only": "vite build",
     "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false"

package/src/i18n/locales/de-DE.json

@@ -0,0 +1,19 @@
+{
+  "validations": {
+    "tooShort": "Verlängere diesen Text auf mindestens {minLength} Zeichen. Derzeit verwendest du {n} Zeichen.",
+    "tooLong": "Kürze diesen Text auf max. {maxLength} Zeichen. Zurzeit verwendest du {n} Zeichen.",
+    "rangeUnderflow": "Wert muss größer als oder gleich {min} sein.",
+    "rangeOverflow": "Wert muss kleiner als oder gleich {max} sein.",
+    "patternMismatch": "Deine Eingabe muss mit dem geforderten Format übereinstimmen.",
+    "valueMissing": "Fülle dieses Feld aus.",
+    "stepMismatch": "Wert muss ein Vielfaches von {step} sein.",
+    "badInput": "\"{value}\" entspricht nicht dem erwarten Typ.",
+    "typeMismatch": {
+      "generic": "\"{value}\" entspricht nicht dem erwarten Typ.",
+      "email": "\"{value}\" muss eine valide E-Mail-Adresse sein.",
+      "number": "\"{value}\" muss eine Zahl sein.",
+      "tel": "\"{value}\" muss eine gültige Telefonnummer sein.",
+      "url": "\"{value}\" muss eine gültige URL sein."
+    }
+  }
+}

package/src/i18n/locales/en-US.json

@@ -0,0 +1,19 @@
+{
+  "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)",
+    "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."
+    }
+  }
+}