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

package/dist/i18n/index.d.ts

@@ -2,8 +2,17 @@ import type { ObjectToDottedStrings } from '../types/i18n';
 import type { DeepPartial } from '../types/utils';
 import { type MaybeRef } 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
+ * is e.g. "{ myKey: 'HelloWorld'}" but it should be "{ myKey: string }".
+ * This utility type converts all values to be of type string (more generic)
+ * so we can actually use other locales as well.
+ */
+type GetTypeOfTranslations<T> = T extends object ? {
+    [P in keyof T]?: GetTypeOfTranslations<T[P]>;
+} : string;
 /** Available translations that are used by onyx components. */
-export type OnyxTranslations = typeof enUS;
+export type OnyxTranslations = GetTypeOfTranslations<typeof enUS>;
 export type ProvideI18nOptions = {
     /**
      * Current locale / language to use.
@@ -44,3 +53,4 @@ export declare const injectI18n: () => {
     locale: import("vue").ComputedRef<string>;
     t: import("vue").ComputedRef<(key: ObjectToDottedStrings<OnyxTranslations>, placeholders?: Record<string, string | number | undefined>) => string>;
 };
+export {};

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

package/dist/index.js

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

package/dist/playwright-axe.d.ts

@@ -0,0 +1,14 @@
+import AxeBuilder from "@axe-core/playwright";
+import { test as base } from "@playwright/experimental-ct-vue";
+export { expect } from "@playwright/experimental-ct-vue";
+type AxeFixture = {
+    makeAxeBuilder: () => AxeBuilder;
+};
+/**
+ * Extends Playwright's base test by providing `makeAxeBuilder`
+ * This new `test` can be used in multiple test files, and each of them will get
+ * a consistently configured AxeBuilder instance.
+ *
+ * @see https://playwright.dev/docs/accessibility-testing#using-a-test-fixture-for-common-axe-configuration
+ */
+export declare const test: ReturnType<typeof base.extend<AxeFixture>>;