sit-onyx 0.0.0 → 0.1.0-alpha.1

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

@@ -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. 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;
+    /** 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,46 @@
+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.
+ * Creates a fallback if provide was never called.
+ */
+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},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.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,144 @@
-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 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)",
+  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.'
+  }
+}, h = {
+  validations: D
+}, 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(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) => {
+  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, 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(
+    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: "onyx-input__error",
+  "aria-live": "polite"
+}, A = { class: "onyx-input__info" }, Y = Object.keys(
+  h.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 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: (n) => a("update:modelValue", n)
-    }), d = (n) => {
-      const o = n.target;
+      set: (l) => a("update:modelValue", l)
+    }), S = m(() => {
+      if (!i.value || i.value.valid)
+        return "";
+      const l = j(i.value);
+      if (e.errorMessage || l === "customError")
+        return e.errorMessage;
+      if (!l)
+        return "";
+      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.${l}`, {
+        value: c.value,
+        n: c.value.toString().length,
+        minLength: e.minLength,
+        maxLength: e.maxLength,
+        min: e.min,
+        max: e.max,
+        step: e.step
+      });
+    }), T = (l) => {
+      const o = l.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 d([c, s], () => {
+      s.value && (i.value = s.value.validity);
+    }), d(
+      i,
+      (l) => {
+        l && a("validityChange", l);
+      },
+      { deep: !0 }
+    ), 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 }])
+      }, [
+        g("span", {
+          class: L(["onyx-input__label", { "onyx-input__label--required": e.required }])
+        }, v(e.label), 3),
+        q(g("input", U(e, {
+          ref_key: "inputElement",
+          ref: s,
+          "onUpdate:modelValue": o[0] || (o[0] = (_) => c.value = _),
+          onChange: T,
+          onBlur: o[1] || (o[1] = (_) => u.value = !0)
+        }), null, 16), [
+          [k, c.value]
+        ]),
+        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);
+    };
   }
-}), 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-b84504d3"]]);
 export {
-  x as TestInput
+  H as TestInput,
+  G as provideI18n
 };