@oneflowui/ui 0.5.5 → 0.5.7

package/dist/components/field/FieldRichText.vue2.js

@@ -1,4 +1,4 @@
-import { defineComponent as p, ref as d, onMounted as b, nextTick as x, openBlock as y, createElementBlock as M, createElementVNode as n, withModifiers as r } from "vue";
+import { defineComponent as p, ref as a, onMounted as b, nextTick as x, openBlock as y, createElementBlock as M, createElementVNode as n, withModifiers as u } from "vue";
 const k = { class: "of-field-richtext" }, w = { class: "of-field-richtext-toolbar" }, T = /* @__PURE__ */ p({
   __name: "FieldRichText",
   props: {
@@ -6,8 +6,8 @@ const k = { class: "of-field-richtext" }, w = { class: "of-field-richtext-toolba
     field: {}
   },
   emits: ["commit", "cancel", "tabNext"],
-  setup(a, { emit: c }) {
-    const s = a, l = c, o = d(null), i = d(typeof s.value == "string" ? s.value : "");
+  setup(d, { emit: c }) {
+    const s = d, l = c, o = a(null), i = a(typeof s.value == "string" ? s.value : "");
     b(
       () => x(() => {
         o.value && (o.value.innerHTML = i.value, o.value.focus());
@@ -21,7 +21,7 @@ const k = { class: "of-field-richtext" }, w = { class: "of-field-richtext-toolba
       var t;
       l("commit", ((t = o.value) == null ? void 0 : t.innerHTML) ?? i.value);
     }
-    function u(t) {
+    function r(t) {
       var e;
       document.execCommand(t, !1), (e = o.value) == null || e.focus();
     }
@@ -30,21 +30,21 @@ const k = { class: "of-field-richtext" }, w = { class: "of-field-richtext-toolba
         n("button", {
           type: "button",
           class: "of-field-richtext-btn",
-          onMousedown: e[0] || (e[0] = r((f) => u("bold"), ["prevent"]))
+          onMousedown: e[0] || (e[0] = u((f) => r("bold"), ["prevent"]))
         }, [...e[3] || (e[3] = [
           n("strong", null, "B", -1)
         ])], 32),
         n("button", {
           type: "button",
           class: "of-field-richtext-btn",
-          onMousedown: e[1] || (e[1] = r((f) => u("italic"), ["prevent"]))
+          onMousedown: e[1] || (e[1] = u((f) => r("italic"), ["prevent"]))
         }, [...e[4] || (e[4] = [
           n("em", null, "I", -1)
         ])], 32),
         n("button", {
           type: "button",
           class: "of-field-richtext-btn",
-          onMousedown: e[2] || (e[2] = r((f) => u("underline"), ["prevent"]))
+          onMousedown: e[2] || (e[2] = u((f) => r("underline"), ["prevent"]))
         }, [...e[5] || (e[5] = [
           n("u", null, "U", -1)
         ])], 32)
@@ -54,6 +54,9 @@ const k = { class: "of-field-richtext" }, w = { class: "of-field-richtext-toolba
         ref: o,
         class: "of-field-richtext-editor",
         contenteditable: "true",
+        role: "textbox",
+        "aria-multiline": "true",
+        tabindex: "0",
         onKeydown: m,
         onBlur: v
       }, null, 544)

package/dist/components/field/FieldSelect.vue.js

@@ -1,7 +1,7 @@
 import o from "./FieldSelect.vue2.js";
 /* empty css                 */
 import t from "../../_virtual/_plugin-vue_export-helper.js";
-const m = /* @__PURE__ */ t(o, [["__scopeId", "data-v-602f7b18"]]);
+const c = /* @__PURE__ */ t(o, [["__scopeId", "data-v-31d8cba6"]]);
 export {
-  m as default
+  c as default
 };

package/dist/components/field/FieldSelect.vue2.js

@@ -1,43 +1,43 @@
-import { defineComponent as V, ref as f, computed as b, onMounted as z, nextTick as A, onBeforeUnmount as I, watch as T, openBlock as l, createElementBlock as a, normalizeStyle as x, toDisplayString as _, createBlock as F, Teleport as O, unref as B, normalizeClass as h, createElementVNode as P, withModifiers as L, Fragment as U, renderList as K, createCommentVNode as W } from "vue";
-import { useBreakpoint as j } from "../../composables/useBreakpoint.js";
-const q = {
+import { defineComponent as S, ref as m, computed as E, onMounted as V, nextTick as z, onBeforeUnmount as A, watch as I, openBlock as o, createElementBlock as u, normalizeStyle as h, toDisplayString as b, createBlock as T, Teleport as O, unref as K, normalizeClass as D, createElementVNode as P, withKeys as g, withModifiers as v, Fragment as U, renderList as W, createCommentVNode as j } from "vue";
+import { useBreakpoint as q } from "../../composables/useBreakpoint.js";
+const G = ["aria-label"], H = {
   key: 1,
   class: "of-field-select__display"
-}, G = ["onMouseenter", "onClick"], H = { key: 1 }, X = /* @__PURE__ */ V({
+}, J = ["aria-selected"], Q = ["aria-selected", "onMouseenter", "onClick", "onFocusin", "onKeydown"], X = { key: 1 }, ee = /* @__PURE__ */ S({
   __name: "FieldSelect",
   props: {
     value: { type: [String, Number, Boolean, Array, null] },
     field: {}
   },
   emits: ["commit", "cancel", "tabNext"],
-  setup($, { emit: N }) {
-    const { isMobile: E } = j(), i = $, y = N, s = f(null), D = f(null), C = f({ top: "0px", left: "0px", width: "0px" }), p = f(!0), r = b(() => i.field.options ?? []), c = b(() => {
-      const e = typeof i.value == "string" ? i.value : null;
-      return r.value.findIndex((t) => t.value === e);
-    }), n = f(0);
-    function d() {
-      if (!s.value) return;
-      const e = s.value.getBoundingClientRect();
-      C.value = {
+  setup(C, { emit: N }) {
+    const c = C, x = N, { isMobile: M } = q(), d = m(null), B = m(null), L = m({ top: "0px", left: "0px", width: "0px" }), y = m(!0), i = E(() => c.field.options ?? []), s = E(() => {
+      const e = typeof c.value == "string" ? c.value : null;
+      return i.value.findIndex((t) => t.value === e);
+    }), n = m(0);
+    function f() {
+      if (!d.value) return;
+      const e = d.value.getBoundingClientRect();
+      L.value = {
         top: `${e.bottom}px`,
         left: `${e.left}px`,
         width: `${Math.max(e.width, 160)}px`
       };
     }
-    function m(e) {
-      p.value = !1, y("commit", e);
+    function a(e) {
+      y.value = !1, x("commit", e);
     }
-    function k() {
-      p.value && (p.value = !1, y("cancel"));
+    function $() {
+      y.value && (y.value = !1, x("cancel"));
     }
     function R(e) {
-      var t, o;
-      if (!r.value.length) {
-        e.key === "Escape" && (e.preventDefault(), k());
+      var t, r;
+      if (!i.value.length) {
+        e.key === "Escape" && (e.preventDefault(), $());
         return;
       }
       if (e.key === "ArrowDown") {
-        e.preventDefault(), n.value = Math.min(n.value + 1, r.value.length - 1);
+        e.preventDefault(), n.value = Math.min(n.value + 1, i.value.length - 1);
         return;
       }
       if (e.key === "ArrowUp") {
@@ -45,78 +45,96 @@ const q = {
         return;
       }
       if (e.key === "Enter") {
-        e.preventDefault(), m(((t = r.value[n.value]) == null ? void 0 : t.value) ?? null);
+        e.preventDefault(), a(((t = i.value[n.value]) == null ? void 0 : t.value) ?? null);
         return;
       }
       if (e.key === "Escape") {
-        e.preventDefault(), k();
+        e.preventDefault(), $();
         return;
       }
-      e.key === "Tab" && (e.preventDefault(), m(((o = r.value[n.value]) == null ? void 0 : o.value) ?? null), y("tabNext"));
+      e.key === "Tab" && (e.preventDefault(), a(((r = i.value[n.value]) == null ? void 0 : r.value) ?? null), x("tabNext"));
     }
-    function M(e) {
-      var o, v;
+    function F(e) {
+      var r, p;
       const t = e.target;
-      t && ((o = s.value) != null && o.contains(t) || (v = D.value) != null && v.contains(t) || k());
+      t && ((r = d.value) != null && r.contains(t) || (p = B.value) != null && p.contains(t) || $());
     }
-    z(() => {
-      n.value = c.value >= 0 ? c.value : 0, A(() => {
+    V(() => {
+      n.value = s.value >= 0 ? s.value : 0, z(() => {
         var e;
-        d(), (e = s.value) == null || e.focus();
-      }), window.addEventListener("resize", d), window.addEventListener("scroll", d, !0), window.addEventListener("mousedown", M, !0);
-    }), I(() => {
-      window.removeEventListener("resize", d), window.removeEventListener("scroll", d, !0), window.removeEventListener("mousedown", M, !0);
-    }), T(c, (e) => {
+        f(), (e = d.value) == null || e.focus();
+      }), window.addEventListener("resize", f), window.addEventListener("scroll", f, !0), window.addEventListener("mousedown", F, !0);
+    }), A(() => {
+      window.removeEventListener("resize", f), window.removeEventListener("scroll", f, !0), window.removeEventListener("mousedown", F, !0);
+    }), I(s, (e) => {
       e >= 0 && (n.value = e);
     });
-    const w = b(() => {
-      const e = typeof i.value == "string" ? i.value : null;
-      return r.value.find((t) => t.value === e);
+    const k = E(() => {
+      const e = typeof c.value == "string" ? c.value : null;
+      return i.value.find((t) => t.value === e);
     });
     return (e, t) => {
-      var o, v;
-      return l(), a("div", {
+      var r, p;
+      return o(), u("div", {
         ref_key: "triggerRef",
-        ref: s,
+        ref: d,
         class: "of-field-select",
         tabindex: "0",
+        role: "listbox",
+        "aria-label": C.field.label,
         onKeydown: R
       }, [
-        (o = w.value) != null && o.color ? (l(), a("span", {
+        (r = k.value) != null && r.color ? (o(), u("span", {
           key: 0,
           class: "of-field-select__badge",
-          style: x({ background: w.value.color })
-        }, _(w.value.label), 5)) : (l(), a("span", q, _(((v = w.value) == null ? void 0 : v.label) ?? "—"), 1)),
-        (l(), F(O, { to: "body" }, [
-          p.value ? (l(), a("div", {
+          style: h({ background: k.value.color })
+        }, b(k.value.label), 5)) : (o(), u("span", H, b(((p = k.value) == null ? void 0 : p.label) ?? "—"), 1)),
+        (o(), T(O, { to: "body" }, [
+          y.value ? (o(), u("div", {
             key: 0,
             ref_key: "dropdownRef",
-            ref: D,
-            class: h(["of-field-select__dropdown", { "of-field-select__dropdown--sheet": B(E) }]),
-            style: x(B(E) ? {} : C.value)
+            ref: B,
+            class: D(["of-field-select__dropdown", { "of-field-select__dropdown--sheet": K(M) }]),
+            style: h(K(M) ? {} : L.value)
           }, [
             P("div", {
-              class: h(["of-field-select__option of-field-select__option--clear", { active: n.value === -1, selected: c.value === -1 }]),
-              onClick: t[0] || (t[0] = L((u) => m(null), ["stop"]))
-            }, " — ", 2),
-            (l(!0), a(U, null, K(r.value, (u, g) => (l(), a("div", {
-              key: u.value,
-              class: h(["of-field-select__option", { active: g === n.value, selected: g === c.value }]),
-              onMouseenter: (S) => n.value = g,
-              onClick: L((S) => m(u.value), ["stop"])
+              class: D(["of-field-select__option of-field-select__option--clear", { active: n.value === -1, selected: s.value === -1 }]),
+              role: "option",
+              tabindex: "0",
+              "aria-selected": s.value === -1,
+              onClick: t[0] || (t[0] = v((l) => a(null), ["stop"])),
+              onFocusin: t[1] || (t[1] = (l) => n.value = -1),
+              onKeydown: [
+                t[2] || (t[2] = g(v((l) => a(null), ["prevent"]), ["enter"])),
+                t[3] || (t[3] = g(v((l) => a(null), ["prevent"]), ["space"]))
+              ]
+            }, " — ", 42, J),
+            (o(!0), u(U, null, W(i.value, (l, w) => (o(), u("div", {
+              key: l.value,
+              class: D(["of-field-select__option", { active: w === n.value, selected: w === s.value }]),
+              role: "option",
+              tabindex: "0",
+              "aria-selected": w === s.value,
+              onMouseenter: (_) => n.value = w,
+              onClick: v((_) => a(l.value), ["stop"]),
+              onFocusin: (_) => n.value = w,
+              onKeydown: [
+                g(v((_) => a(l.value), ["prevent"]), ["enter"]),
+                g(v((_) => a(l.value), ["prevent"]), ["space"])
+              ]
             }, [
-              u.color ? (l(), a("span", {
+              l.color ? (o(), u("span", {
                 key: 0,
                 class: "of-field-select__badge",
-                style: x({ background: u.color })
-              }, _(u.label), 5)) : (l(), a("span", H, _(u.label), 1))
-            ], 42, G))), 128))
-          ], 6)) : W("", !0)
+                style: h({ background: l.color })
+              }, b(l.label), 5)) : (o(), u("span", X, b(l.label), 1))
+            ], 42, Q))), 128))
+          ], 6)) : j("", !0)
         ]))
-      ], 544);
+      ], 40, G);
     };
   }
 });
 export {
-  X as default
+  ee as default
 };

package/dist/components/field/FieldText.vue.js

@@ -1,7 +1,7 @@
 import o from "./FieldText.vue2.js";
 /* empty css               */
 import t from "../../_virtual/_plugin-vue_export-helper.js";
-const p = /* @__PURE__ */ t(o, [["__scopeId", "data-v-836136e5"]]);
+const e = /* @__PURE__ */ t(o, [["__scopeId", "data-v-a9d8988d"]]);
 export {
-  p as default
+  e as default
 };

package/dist/components/field/FieldText.vue2.js

@@ -1,33 +1,34 @@
-import { defineComponent as c, ref as i, onMounted as m, nextTick as s, withDirectives as v, openBlock as d, createElementBlock as x, vModelText as y } from "vue";
-const b = /* @__PURE__ */ c({
+import { defineComponent as m, ref as u, onMounted as p, nextTick as s, withDirectives as v, openBlock as d, createElementBlock as x, vModelText as y } from "vue";
+const b = ["aria-label"], B = /* @__PURE__ */ m({
   __name: "FieldText",
   props: {
     value: { type: [String, Number, Boolean, Array, null] },
     field: {}
   },
   emits: ["commit", "cancel", "tabNext"],
-  setup(a, { emit: r }) {
-    const f = a, t = r, o = i(null), n = i(String(f.value ?? ""));
-    m(() => s(() => {
+  setup(o, { emit: r }) {
+    const f = o, t = r, a = u(null), l = u(String(f.value ?? ""));
+    p(() => s(() => {
       var e;
-      return (e = o.value) == null ? void 0 : e.focus();
+      return (e = a.value) == null ? void 0 : e.focus();
     }));
-    function p(e) {
-      e.key === "Enter" && (e.preventDefault(), t("commit", n.value)), e.key === "Escape" && (e.preventDefault(), t("cancel")), e.key === "Tab" && (e.preventDefault(), t("commit", n.value), t("tabNext"));
+    function c(e) {
+      e.key === "Enter" && (e.preventDefault(), t("commit", l.value)), e.key === "Escape" && (e.preventDefault(), t("cancel")), e.key === "Tab" && (e.preventDefault(), t("commit", l.value), t("tabNext"));
     }
-    return (e, l) => v((d(), x("input", {
+    return (e, n) => v((d(), x("input", {
       ref_key: "inputRef",
-      ref: o,
+      ref: a,
+      "onUpdate:modelValue": n[0] || (n[0] = (i) => l.value = i),
       class: "of-field-input",
       type: "text",
-      "onUpdate:modelValue": l[0] || (l[0] = (u) => n.value = u),
-      onKeydown: p,
-      onBlur: l[1] || (l[1] = (u) => t("commit", n.value))
-    }, null, 544)), [
-      [y, n.value]
+      "aria-label": o.field.label,
+      onKeydown: c,
+      onBlur: n[1] || (n[1] = (i) => t("commit", l.value))
+    }, null, 40, b)), [
+      [y, l.value]
     ]);
   }
 });
 export {
-  b as default
+  B as default
 };

package/dist/components/field/FieldUrl.vue.js

@@ -1,7 +1,7 @@
 import o from "./FieldUrl.vue2.js";
 /* empty css              */
 import r from "../../_virtual/_plugin-vue_export-helper.js";
-const p = /* @__PURE__ */ r(o, [["__scopeId", "data-v-8d4527db"]]);
+const m = /* @__PURE__ */ r(o, [["__scopeId", "data-v-e2908cdc"]]);
 export {
-  p as default
+  m as default
 };

package/dist/components/field/FieldUrl.vue2.js

@@ -1,33 +1,34 @@
-import { defineComponent as c, ref as i, onMounted as m, nextTick as s, withDirectives as v, openBlock as d, createElementBlock as y, vModelText as k } from "vue";
-const b = /* @__PURE__ */ c({
+import { defineComponent as m, ref as u, onMounted as p, nextTick as s, withDirectives as v, openBlock as d, createElementBlock as y, vModelText as b } from "vue";
+const k = ["aria-label"], B = /* @__PURE__ */ m({
   __name: "FieldUrl",
   props: {
     value: { type: [String, Number, Boolean, Array, null] },
     field: {}
   },
   emits: ["commit", "cancel", "tabNext"],
-  setup(r, { emit: a }) {
-    const f = r, t = a, o = i(null), n = i(String(f.value ?? ""));
-    m(() => s(() => {
+  setup(o, { emit: r }) {
+    const f = o, t = r, a = u(null), l = u(String(f.value ?? ""));
+    p(() => s(() => {
       var e;
-      return (e = o.value) == null ? void 0 : e.focus();
+      return (e = a.value) == null ? void 0 : e.focus();
     }));
-    function p(e) {
-      e.key === "Enter" && (e.preventDefault(), t("commit", n.value)), e.key === "Escape" && (e.preventDefault(), t("cancel")), e.key === "Tab" && (e.preventDefault(), t("commit", n.value), t("tabNext"));
+    function c(e) {
+      e.key === "Enter" && (e.preventDefault(), t("commit", l.value)), e.key === "Escape" && (e.preventDefault(), t("cancel")), e.key === "Tab" && (e.preventDefault(), t("commit", l.value), t("tabNext"));
     }
-    return (e, l) => v((d(), y("input", {
+    return (e, n) => v((d(), y("input", {
       ref_key: "inputRef",
-      ref: o,
+      ref: a,
+      "onUpdate:modelValue": n[0] || (n[0] = (i) => l.value = i),
       class: "of-field-input",
       type: "url",
-      "onUpdate:modelValue": l[0] || (l[0] = (u) => n.value = u),
-      onKeydown: p,
-      onBlur: l[1] || (l[1] = (u) => t("commit", n.value))
-    }, null, 544)), [
-      [k, n.value]
+      "aria-label": o.field.label,
+      onKeydown: c,
+      onBlur: n[1] || (n[1] = (i) => t("commit", l.value))
+    }, null, 40, k)), [
+      [b, l.value]
     ]);
   }
 });
 export {
-  b as default
+  B as default
 };

package/dist/components/form/FormDesigner.vue.js

@@ -1,7 +1,7 @@
 import o from "./FormDesigner.vue2.js";
 /* empty css                  */
 import r from "../../_virtual/_plugin-vue_export-helper.js";
-const p = /* @__PURE__ */ r(o, [["__scopeId", "data-v-85067929"]]);
+const f = /* @__PURE__ */ r(o, [["__scopeId", "data-v-27f61d04"]]);
 export {
-  p as default
+  f as default
 };