sit-onyx 0.1.0-alpha.0 → 0.1.0-alpha.2

package/README.md

@@ -6,7 +6,7 @@
   </a>
 </p>
 
-# Onyx
+# onyx
 
 A design system and Vue.js component library created by [Schwarz IT](https://it.schwarz).
 
@@ -40,7 +40,7 @@ After that, import the global CSS file in your `main.ts` file:
 
 ```ts
 import "sit-onyx/style.css";
-// if you override some Onyx styles (e.g. CSS variables),
+// if you override some onyx styles (e.g. CSS variables),
 // make sure to import your custom CSS file after the default "sit-onyx/style.css"
 ```
 

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

@@ -22,3 +22,12 @@ export declare const Required: {
         label: string;
     };
 };
+/**
+ * This example shows an input with a custom error.
+ */
+export declare const CustomError: {
+    args: {
+        label: string;
+        errorMessage: string;
+    };
+};

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

@@ -7,8 +7,8 @@ export type TestInputProps = {
     /** Label to show next to the input */
     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
+     * Error message to show when the input is invalid. Will only show up after the input was touched.
+     * If unset, a default error message is used that is provided by onyx depending
      * on your current locale/language and validation.
      */
     errorMessage?: string;

package/dist/i18n/index.d.ts

@@ -2,13 +2,13 @@ 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. */
+/** 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).
+     * 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"
@@ -32,12 +32,13 @@ export type ProvideI18nOptions = {
     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.
+ * 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.
+ * Injects the onyx i18n instance.
+ * Creates a fallback if provide was never called.
  */
 export declare const injectI18n: () => {
     locale: import("vue").ComputedRef<string>;

package/dist/index.cjs

@@ -1 +1 @@
-"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;
+"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},f=Symbol(),x=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(()=>(s,i={})=>{let l=y(s,e.value)??y(s,p)??"";const o=typeof i.n=="number"?i.n:void 0;return l=P(l,o),V(l,i)});return{locale:n,t:r}},S=a=>{t.provide(f,x(a))},I=()=>t.inject(f,()=>x(),!0),y=(a,n)=>{const e=a.split(".").reduce((r,s)=>!r||typeof r=="string"?r:r[s],n);return e&&typeof e=="string"?e:void 0},P=(a,n)=>{const e=a.split(" | ").map(s=>s.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]},V=(a,n)=>n?Object.entries(n).reduce((r,[s,i])=>i===void 0?r:r.replace(new RegExp(`{${s}}`,"gi"),i.toString()),a).replace(/\s?{.*}\s?/gi,""):a,E=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},L={key:0,class:"onyx-input__error","aria-live":"polite"},T={class:"onyx-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:s}=I(),i=t.ref(!1),l=t.ref(null),o=t.ref((d=l.value)==null?void 0:d.validity),m=t.computed({get:()=>e.modelValue,set:u=>r("update:modelValue",u)}),_=t.computed(()=>{if(!o.value||o.value.valid)return"";const u=E(o.value);if(e.errorMessage||u==="customError")return e.errorMessage;if(!u)return"";if(u==="typeMismatch"){const c=C.includes(e.type)?e.type:"generic";return s.value(`validations.typeMismatch.${c}`,{value:m.value})}return s.value(`validations.${u}`,{value:m.value,n:m.value.toString().length,minLength:e.minLength,maxLength:e.maxLength,min:e.min,max:e.max,step:e.step})}),b=u=>{const c=u.target;r("change",c.value)};return t.watch([m,l],()=>{l.value&&(o.value=l.value.validity)}),t.watch(o,u=>{u&&r("validityChange",u)},{deep:!0}),t.watch([e.errorMessage,l],()=>{l.value&&l.value.setCustomValidity(e.errorMessage||"")},{immediate:!0}),(u,c)=>{var v,g;return t.openBlock(),t.createElementBlock("label",{class:t.normalizeClass(["onyx-input",{"onyx-input--touched":i.value}])},[t.createElementVNode("span",{class:t.normalizeClass(["onyx-input__label",{"onyx-input__label--required":e.required}])},t.toDisplayString(e.label),3),t.withDirectives(t.createElementVNode("input",t.mergeProps(e,{ref_key:"inputElement",ref:l,"onUpdate:modelValue":c[0]||(c[0]=h=>m.value=h),onChange:b,onBlur:c[1]||(c[1]=h=>i.value=!0)}),null,16),[[t.vModelDynamic,m.value]]),i.value&&!((v=o.value)!=null&&v.valid)?(t.openBlock(),t.createElementBlock("p",L,t.toDisplayString(_.value),1)):t.createCommentVNode("",!0),t.createElementVNode("p",T,'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,s]of n)e[r]=s;return e},D=O(N,[["__scopeId","data-v-b84504d3"]]);exports.TestInput=D;exports.provideI18n=S;

package/dist/index.js

@@ -1,4 +1,4 @@
-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";
+import { provide as E, inject as C, computed as m, unref as O, defineComponent as N, ref as p, watch as d, openBlock as b, createElementBlock as M, normalizeClass as L, createElementVNode as g, toDisplayString as v, withDirectives as q, mergeProps as U, vModelDynamic as k, 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)",
@@ -15,21 +15,18 @@ const D = {
     tel: '"{value}" must be a valid phone number.',
     url: '"{value}" must a valid URL.'
   }
-}, g = {
+}, h = {
   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);
+}, I = Symbol(), V = (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] : h), a = m(() => (n, u = {}) => {
+    let s = P(n, e.value) ?? P(n, h) ?? "";
+    const i = typeof u.n == "number" ? u.n : void 0;
+    return s = B(s, i), $(s, u);
   });
   return { locale: r, t: a };
 }, G = (t) => {
-  E(P, S(t));
-}, z = () => {
-  const t = S();
-  return C(P, t);
-}, L = (t, r) => {
+  E(I, V(t));
+}, z = () => C(I, () => V(), !0), P = (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) => {
@@ -38,7 +35,7 @@ const D = {
     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) => {
+}, $ = (t, r) => r ? Object.entries(r).reduce((a, [n, u]) => u === void 0 ? a : a.replace(new RegExp(`{${n}}`, "gi"), u.toString()), t).replace(/\s?{.*}\s?/gi, "") : t, j = (t) => {
   if (t.valueMissing)
     return "valueMissing";
   const r = Object.entries(
@@ -49,10 +46,10 @@ const D = {
       return e;
 }, R = {
   key: 0,
-  class: "input__error",
+  class: "onyx-input__error",
   "aria-live": "polite"
-}, A = { class: "input__info" }, Y = Object.keys(
-  g.validations.typeMismatch
+}, A = { class: "onyx-input__info" }, Y = Object.keys(
+  h.validations.typeMismatch
 ), F = /* @__PURE__ */ N({
   __name: "TestInput",
   props: {
@@ -70,23 +67,23 @@ const D = {
   },
   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({
+    var y;
+    const e = t, a = r, { t: n } = z(), u = p(!1), s = p(null), i = p((y = s.value) == null ? void 0 : y.validity), c = m({
       get: () => e.modelValue,
-      set: (s) => a("update:modelValue", s)
-    }), T = m(() => {
+      set: (l) => a("update:modelValue", l)
+    }), S = m(() => {
       if (!i.value || i.value.valid)
         return "";
-      const s = j(i.value);
-      if (e.errorMessage || s === "customError")
+      const l = j(i.value);
+      if (e.errorMessage || l === "customError")
         return e.errorMessage;
-      if (!s)
+      if (!l)
         return "";
-      if (s === "typeMismatch") {
+      if (l === "typeMismatch") {
         const o = Y.includes(e.type) ? e.type : "generic";
         return n.value(`validations.typeMismatch.${o}`, { value: c.value });
       }
-      return n.value(`validations.${s}`, {
+      return n.value(`validations.${l}`, {
         value: c.value,
         n: c.value.toString().length,
         minLength: e.minLength,
@@ -95,37 +92,43 @@ const D = {
         max: e.max,
         step: e.step
       });
-    }), V = (s) => {
-      const o = s.target;
+    }), T = (l) => {
+      const o = l.target;
       a("change", o.value);
     };
-    return b([c, u], () => {
-      u.value && (i.value = u.value.validity);
-    }), b(
+    return d([c, s], () => {
+      s.value && (i.value = s.value.validity);
+    }), d(
       i,
-      (s) => {
-        s && a("validityChange", s);
+      (l) => {
+        l && a("validityChange", l);
       },
       { deep: !0 }
-    ), (s, o) => {
-      var f, y;
-      return x(), M("label", {
-        class: I(["input", { "input--touched": l.value }])
+    ), d(
+      [e.errorMessage, s],
+      () => {
+        s.value && s.value.setCustomValidity(e.errorMessage || "");
+      },
+      { immediate: !0 }
+    ), (l, o) => {
+      var f, x;
+      return b(), M("label", {
+        class: L(["onyx-input", { "onyx-input--touched": u.value }])
       }, [
-        d("span", {
-          class: I(["input__label", { "input__label--required": e.required }])
+        g("span", {
+          class: L(["onyx-input__label", { "onyx-input__label--required": e.required }])
         }, v(e.label), 3),
-        k(d("input", q(e, {
+        q(g("input", U(e, {
           ref_key: "inputElement",
-          ref: u,
+          ref: s,
           "onUpdate:modelValue": o[0] || (o[0] = (_) => c.value = _),
-          onChange: V,
-          onBlur: o[1] || (o[1] = (_) => l.value = !0)
+          onChange: T,
+          onBlur: o[1] || (o[1] = (_) => u.value = !0)
         }), null, 16), [
-          [U, c.value]
+          [k, 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)
+        u.value && !((f = i.value) != null && f.valid) ? (b(), M("p", R, v(S.value), 1)) : w("", !0),
+        g("p", A, 'Model value: "' + v(c.value) + '", is valid: ' + v((x = i.value) == null ? void 0 : x.valid), 1)
       ], 2);
     };
   }
@@ -134,7 +137,7 @@ const D = {
   for (const [a, n] of r)
     e[a] = n;
   return e;
-}, H = /* @__PURE__ */ J(F, [["__scopeId", "data-v-5c77ef30"]]);
+}, H = /* @__PURE__ */ J(F, [["__scopeId", "data-v-b84504d3"]]);
 export {
   H as TestInput,
   G as provideI18n