@featherk/ui 0.11.2 → 0.12.0

package/README.md

@@ -6,11 +6,15 @@ Vue UI component package for FeatherK.
 
 - **Address**: `USAddress` - Presentational US address renderer driven by a parent-owned `useUSAddress` view model.
   - Component guide: [docs/address/USAddress.md](https://github.com/NantHealth/featherk/blob/integration/packages/ui/docs/address/USAddress.md)
+- **Table**: `ActionCell` - Configurable repeatable action-button container driven by a parent-owned shared popup lifecycle.
+  - Component guide: [docs/table/ActionCell.md](https://github.com/NantHealth/featherk/blob/integration/packages/ui/docs/table/ActionCell.md)
+  - Composable guide: [docs/table/useActionCellMenu.md](https://github.com/NantHealth/featherk/blob/integration/packages/ui/docs/table/useActionCellMenu.md)
 
 ## Importing Components
 
 ```ts
 import { USAddress } from "@featherk/ui";
+import { ActionCell } from "@featherk/ui/table";
 import { useUSAddress } from "@featherk/composables/address";
 ```
 

package/dist/__tests__/withSetupHarness.d.ts

@@ -0,0 +1,9 @@
+import { type ComponentPublicInstance } from "vue";
+import { type VueWrapper } from "@vue/test-utils";
+type SetupFactory<T> = () => T;
+export declare function withSetupHarness<T>(factory: SetupFactory<T>): Promise<{
+    api: T;
+    wrapper: VueWrapper<ComponentPublicInstance>;
+    unmount: () => void;
+}>;
+export {};

package/dist/featherk-ui.es.js

@@ -1,15 +1,17 @@
 import "./ui.css";
-import { defineComponent as G, computed as l, openBlock as s, createElementBlock as S, normalizeClass as U, createElementVNode as g, createVNode as I, unref as r, Fragment as j, createBlock as o, withCtx as v, createTextVNode as n, toDisplayString as p, createCommentVNode as f } from "vue";
-import { Error as m, Hint as V } from "@progress/kendo-vue-labels";
-import { TextBox as k } from "@progress/kendo-vue-inputs";
-import { DropDownList as H } from "@progress/kendo-vue-dropdowns";
-const K = { class: "address1" }, W = {
+import { defineComponent as R, computed as l, openBlock as c, createElementBlock as w, normalizeClass as U, createElementVNode as E, createVNode as D, unref as o, Fragment as F, createBlock as y, withCtx as m, createTextVNode as g, toDisplayString as I, createCommentVNode as S, renderList as H, toValue as W } from "vue";
+import { Error as A, Hint as V } from "@progress/kendo-vue-labels";
+import { TextBox as b } from "@progress/kendo-vue-inputs";
+import { DropDownList as J } from "@progress/kendo-vue-dropdowns";
+import { Button as Q } from "@progress/kendo-vue-buttons";
+import { useCompositeId as X, useActiveIdRegistry as Y, usePopupMenu as ee } from "@featherk/composables";
+const ae = { class: "address1" }, te = {
   key: 0,
   class: "address2"
-}, J = { class: "city" }, Q = { class: "state" }, X = { class: "zip" }, Y = {
+}, le = { class: "city" }, re = { class: "state" }, ie = { class: "zip" }, de = {
   key: 1,
   class: "messages"
-}, q = "Enter a 5 or 9 digit zip code.", ee = "Incomplete address.", ae = /* @__PURE__ */ G({
+}, M = "Enter a 5 or 9 digit zip code.", se = "Incomplete address.", ne = /* @__PURE__ */ R({
   __name: "USAddress",
   props: {
     id: {},
@@ -19,8 +21,8 @@ const K = { class: "address1" }, W = {
     messages: {},
     showAddress2: { type: Boolean, default: !0 }
   },
-  setup(D) {
-    const i = D, t = {
+  setup(n) {
+    const t = n, d = {
       placeholder: {
         address1: "Address Line 1",
         address2: "Address Line 2",
@@ -30,7 +32,7 @@ const K = { class: "address1" }, W = {
       fieldset: {
         error: {
           required: "Required fields are missing.",
-          zip: q
+          zip: M
         },
         hint: {
           address: "Enter address information."
@@ -42,130 +44,130 @@ const K = { class: "address1" }, W = {
           address2: "",
           city: "Required",
           state: "Required",
-          zip: q
+          zip: M
         },
         hint: {
           address1: "Enter address line 1.",
           address2: "Optional",
           city: "",
           state: "",
-          zip: q
+          zip: M
         }
       }
-    }, E = (a) => ({
+    }, p = (a) => ({
       placeholder: {
-        address1: a?.placeholder?.address1 ?? t.placeholder.address1,
-        address2: a?.placeholder?.address2 ?? t.placeholder.address2,
-        city: a?.placeholder?.city ?? t.placeholder.city,
-        zip: a?.placeholder?.zip ?? t.placeholder.zip
+        address1: a?.placeholder?.address1 ?? d.placeholder.address1,
+        address2: a?.placeholder?.address2 ?? d.placeholder.address2,
+        city: a?.placeholder?.city ?? d.placeholder.city,
+        zip: a?.placeholder?.zip ?? d.placeholder.zip
       },
       fieldset: {
         error: {
-          required: a?.fieldset?.error?.required ?? t.fieldset.error.required,
-          zip: a?.fieldset?.error?.zip ?? t.fieldset.error.zip
+          required: a?.fieldset?.error?.required ?? d.fieldset.error.required,
+          zip: a?.fieldset?.error?.zip ?? d.fieldset.error.zip
         },
         hint: {
-          address: a?.fieldset?.hint?.address ?? t.fieldset.hint.address
+          address: a?.fieldset?.hint?.address ?? d.fieldset.hint.address
         }
       },
       field: {
         error: {
-          address1: a?.field?.error?.address1 ?? t.field.error.address1,
-          address2: a?.field?.error?.address2 ?? t.field.error.address2,
-          city: a?.field?.error?.city ?? t.field.error.city,
-          state: a?.field?.error?.state ?? t.field.error.state,
-          zip: a?.field?.error?.zip ?? t.field.error.zip
+          address1: a?.field?.error?.address1 ?? d.field.error.address1,
+          address2: a?.field?.error?.address2 ?? d.field.error.address2,
+          city: a?.field?.error?.city ?? d.field.error.city,
+          state: a?.field?.error?.state ?? d.field.error.state,
+          zip: a?.field?.error?.zip ?? d.field.error.zip
         },
         hint: {
-          address1: a?.field?.hint?.address1 ?? t.field.hint.address1,
-          address2: a?.field?.hint?.address2 ?? t.field.hint.address2,
-          city: a?.field?.hint?.city ?? t.field.hint.city,
-          state: a?.field?.hint?.state ?? t.field.hint.state,
-          zip: a?.field?.hint?.zip ?? t.field.hint.zip
+          address1: a?.field?.hint?.address1 ?? d.field.hint.address1,
+          address2: a?.field?.hint?.address2 ?? d.field.hint.address2,
+          city: a?.field?.hint?.city ?? d.field.hint.city,
+          state: a?.field?.hint?.state ?? d.field.hint.state,
+          zip: a?.field?.hint?.zip ?? d.field.hint.zip
         }
       }
-    }), d = l(() => E(i.messages)), y = l(() => i.messageScope === "field"), A = l(() => i.messageScope === "fieldset"), u = l(() => i.required), _ = l(() => u.value), z = l(() => ({
-      address1: `${i.id}-address1`,
-      address2: `${i.id}-address2`,
-      city: `${i.id}-city`,
-      state: `${i.id}-state`,
-      zip: `${i.id}-zip`
-    })), e = l(() => i.address), x = l(() => e.value.address1Valid.value && e.value.cityValid.value && e.value.stateValid.value), w = l(() => e.value.formData.address1.trim() !== "" || e.value.formData.address2.trim() !== "" || e.value.formData.city.trim() !== "" || (e.value.formData.state ?? "").trim() !== "" || e.value.formData.zip.replace(/\D/g, "") !== ""), F = l(() => {
+    }), s = l(() => p(t.messages)), h = l(() => t.messageScope === "field"), C = l(() => t.messageScope === "fieldset"), i = l(() => t.required), f = l(() => i.value), v = l(() => ({
+      address1: `${t.id}-address1`,
+      address2: `${t.id}-address2`,
+      city: `${t.id}-city`,
+      state: `${t.id}-state`,
+      zip: `${t.id}-zip`
+    })), e = l(() => t.address), T = l(() => e.value.address1Valid.value && e.value.cityValid.value && e.value.stateValid.value), r = l(() => e.value.formData.address1.trim() !== "" || e.value.formData.address2.trim() !== "" || e.value.formData.city.trim() !== "" || (e.value.formData.state ?? "").trim() !== "" || e.value.formData.zip.replace(/\D/g, "") !== ""), u = l(() => {
       if (e.value.optionalZipInvalid)
         return e.value.optionalZipInvalid.value;
       const a = e.value.formData.zip.replace(/\D/g, "");
-      return !u.value && w.value && a.length !== 5 && a.length !== 9;
-    }), M = l(() => e.value.optionalPartialInvalid ? e.value.optionalPartialInvalid.value : !u.value && w.value && !e.value.addressValid.value), h = l(() => u.value || !M.value ? !1 : e.value.optionalFeedbackActive ? e.value.optionalFeedbackActive.value : !1), O = l(() => _.value && !e.value.address1Valid.value || h.value && e.value.formData.address1.trim() === ""), P = l(() => _.value && !e.value.cityValid.value || h.value && e.value.formData.city.trim() === ""), b = l(() => _.value && !e.value.stateValid.value || h.value && (e.value.formData.state ?? "").trim() === ""), C = l(() => _.value && !e.value.zipValid.value || h.value && F.value), c = l(() => u.value ? e.value.addressValidate.value : h.value), Z = l(() => u.value ? e.value.address1Valid.value : !O.value), B = l(() => u.value ? e.value.cityValid.value : !P.value), L = l(() => u.value ? e.value.stateValid.value : !b.value), R = l(() => u.value ? e.value.zipValid.value : !C.value), $ = l(() => {
-      const a = d.value.placeholder.address2;
-      return A.value && u.value ? `${a} (Optional)` : a;
+      return !i.value && r.value && a.length !== 5 && a.length !== 9;
+    }), _ = l(() => e.value.optionalPartialInvalid ? e.value.optionalPartialInvalid.value : !i.value && r.value && !e.value.addressValid.value), k = l(() => i.value || !_.value ? !1 : e.value.optionalFeedbackActive ? e.value.optionalFeedbackActive.value : !1), x = l(() => f.value && !e.value.address1Valid.value || k.value && e.value.formData.address1.trim() === ""), O = l(() => f.value && !e.value.cityValid.value || k.value && e.value.formData.city.trim() === ""), P = l(() => f.value && !e.value.stateValid.value || k.value && (e.value.formData.state ?? "").trim() === ""), q = l(() => f.value && !e.value.zipValid.value || k.value && u.value), z = l(() => i.value ? e.value.addressValidate.value : k.value), B = l(() => i.value ? e.value.address1Valid.value : !x.value), K = l(() => i.value ? e.value.cityValid.value : !O.value), L = l(() => i.value ? e.value.stateValid.value : !P.value), Z = l(() => i.value ? e.value.zipValid.value : !q.value), j = l(() => {
+      const a = s.value.placeholder.address2;
+      return C.value && i.value ? `${a} (Optional)` : a;
     }), N = l(() => {
       const a = [];
-      return x.value || a.push(d.value.fieldset.error.required), e.value.zipValid.value || a.push(d.value.fieldset.error.zip), a.join(" ");
-    }), T = l(() => {
-      const a = [ee];
-      return F.value && a.push(d.value.fieldset.error.zip), a.join(" ");
+      return T.value || a.push(s.value.fieldset.error.required), e.value.zipValid.value || a.push(s.value.fieldset.error.zip), a.join(" ");
+    }), G = l(() => {
+      const a = [se];
+      return u.value && a.push(s.value.fieldset.error.zip), a.join(" ");
     });
-    return (a, te) => (s(), S("div", {
-      class: U(["fkui-us-address", { "fkui-us-address--fieldset-scope": A.value }])
+    return (a, ve) => (c(), w("div", {
+      class: U(["fkui-us-address", { "fkui-us-address--fieldset-scope": C.value }])
     }, [
-      g("div", K, [
-        I(r(k), {
-          id: z.value.address1,
-          placeholder: d.value.placeholder.address1,
+      E("div", ae, [
+        D(o(b), {
+          id: v.value.address1,
+          placeholder: s.value.placeholder.address1,
           value: e.value.formData.address1,
-          valid: Z.value,
-          validate: c.value,
-          validityStyles: c.value,
+          valid: B.value,
+          validate: z.value,
+          validityStyles: z.value,
           onInput: e.value.onAddress1Input
         }, null, 8, ["id", "placeholder", "value", "valid", "validate", "validityStyles", "onInput"]),
-        y.value ? (s(), S(j, { key: 0 }, [
-          O.value ? (s(), o(r(m), { key: 0 }, {
-            default: v(() => [
-              n(p(d.value.field.error.address1), 1)
+        h.value ? (c(), w(F, { key: 0 }, [
+          x.value ? (c(), y(o(A), { key: 0 }, {
+            default: m(() => [
+              g(I(s.value.field.error.address1), 1)
             ]),
             _: 1
-          })) : (s(), o(r(V), { key: 1 }, {
-            default: v(() => [
-              n(p(d.value.field.hint.address1), 1)
+          })) : (c(), y(o(V), { key: 1 }, {
+            default: m(() => [
+              g(I(s.value.field.hint.address1), 1)
             ]),
             _: 1
           }))
-        ], 64)) : f("", !0)
+        ], 64)) : S("", !0)
       ]),
-      a.showAddress2 ? (s(), S("div", W, [
-        I(r(k), {
-          id: z.value.address2,
-          placeholder: $.value,
+      a.showAddress2 ? (c(), w("div", te, [
+        D(o(b), {
+          id: v.value.address2,
+          placeholder: j.value,
           value: e.value.formData.address2,
           onInput: e.value.onAddress2Input
         }, null, 8, ["id", "placeholder", "value", "onInput"]),
-        y.value ? (s(), o(r(V), { key: 0 }, {
-          default: v(() => [
-            n(p(d.value.field.hint.address2), 1)
+        h.value ? (c(), y(o(V), { key: 0 }, {
+          default: m(() => [
+            g(I(s.value.field.hint.address2), 1)
           ]),
           _: 1
-        })) : f("", !0)
-      ])) : f("", !0),
-      g("div", J, [
-        I(r(k), {
-          id: z.value.city,
-          placeholder: d.value.placeholder.city,
+        })) : S("", !0)
+      ])) : S("", !0),
+      E("div", le, [
+        D(o(b), {
+          id: v.value.city,
+          placeholder: s.value.placeholder.city,
           value: e.value.formData.city,
-          valid: B.value,
-          validate: c.value,
-          validityStyles: c.value,
+          valid: K.value,
+          validate: z.value,
+          validityStyles: z.value,
           onInput: e.value.onCityInput
         }, null, 8, ["id", "placeholder", "value", "valid", "validate", "validityStyles", "onInput"]),
-        y.value && P.value ? (s(), o(r(m), { key: 0 }, {
-          default: v(() => [
-            n(p(d.value.field.error.city), 1)
+        h.value && O.value ? (c(), y(o(A), { key: 0 }, {
+          default: m(() => [
+            g(I(s.value.field.error.city), 1)
           ]),
           _: 1
-        })) : f("", !0)
+        })) : S("", !0)
       ]),
-      g("div", Q, [
-        I(r(H), {
-          id: z.value.state,
+      E("div", re, [
+        D(o(J), {
+          id: v.value.state,
           value: e.value.formData.state,
           onChange: e.value.onStateChange,
           defaultItem: e.value.stateDefaultItem,
@@ -175,68 +177,191 @@ const K = { class: "address1" }, W = {
           dataItemKey: "value",
           valuePrimitive: !0,
           valid: L.value,
-          validate: c.value,
-          validityStyles: c.value
+          validate: z.value,
+          validityStyles: z.value
         }, null, 8, ["id", "value", "onChange", "defaultItem", "dataItems", "valid", "validate", "validityStyles"]),
-        y.value && b.value ? (s(), o(r(m), { key: 0 }, {
-          default: v(() => [
-            n(p(d.value.field.error.state), 1)
+        h.value && P.value ? (c(), y(o(A), { key: 0 }, {
+          default: m(() => [
+            g(I(s.value.field.error.state), 1)
           ]),
           _: 1
-        })) : f("", !0)
+        })) : S("", !0)
       ]),
-      g("div", X, [
-        I(r(k), {
-          id: z.value.zip,
-          placeholder: d.value.placeholder.zip,
+      E("div", ie, [
+        D(o(b), {
+          id: v.value.zip,
+          placeholder: s.value.placeholder.zip,
           wrapperClass: e.value.zipWrapperClass,
           value: e.value.zipDisplay.value,
           onInput: e.value.onZipInput,
-          valid: R.value,
-          validate: c.value,
-          validityStyles: c.value,
+          valid: Z.value,
+          validate: z.value,
+          validityStyles: z.value,
           style: { width: "100%" }
         }, null, 8, ["id", "placeholder", "wrapperClass", "value", "onInput", "valid", "validate", "validityStyles"]),
-        y.value && C.value ? (s(), o(r(m), { key: 0 }, {
-          default: v(() => [
-            n(p(d.value.field.error.zip), 1)
+        h.value && q.value ? (c(), y(o(A), { key: 0 }, {
+          default: m(() => [
+            g(I(s.value.field.error.zip), 1)
           ]),
           _: 1
-        })) : f("", !0),
-        y.value && !C.value ? (s(), o(r(V), { key: 1 }, {
-          default: v(() => [
-            n(p(d.value.field.hint.zip), 1)
+        })) : S("", !0),
+        h.value && !q.value ? (c(), y(o(V), { key: 1 }, {
+          default: m(() => [
+            g(I(s.value.field.hint.zip), 1)
           ]),
           _: 1
-        })) : f("", !0)
+        })) : S("", !0)
       ]),
-      A.value ? (s(), S("div", Y, [
-        _.value && !e.value.addressValid.value ? (s(), o(r(m), { key: 0 }, {
-          default: v(() => [
-            n(p(N.value), 1)
+      C.value ? (c(), w("div", de, [
+        f.value && !e.value.addressValid.value ? (c(), y(o(A), { key: 0 }, {
+          default: m(() => [
+            g(I(N.value), 1)
           ]),
           _: 1
-        })) : h.value ? (s(), o(r(m), { key: 1 }, {
-          default: v(() => [
-            n(p(T.value), 1)
+        })) : k.value ? (c(), y(o(A), { key: 1 }, {
+          default: m(() => [
+            g(I(G.value), 1)
           ]),
           _: 1
-        })) : (s(), o(r(V), { key: 2 }, {
-          default: v(() => [
-            n(p(d.value.fieldset.hint.address), 1)
+        })) : (c(), y(o(V), { key: 2 }, {
+          default: m(() => [
+            g(I(s.value.fieldset.hint.address), 1)
           ]),
           _: 1
         }))
-      ])) : f("", !0)
+      ])) : S("", !0)
     ], 2));
   }
-}), le = (D, i) => {
-  const t = D.__vccOpts || D;
-  for (const [E, d] of i)
-    t[E] = d;
-  return t;
-}, ue = /* @__PURE__ */ le(ae, [["__scopeId", "data-v-8aeb035b"]]);
+}), $ = (n, t) => {
+  const d = n.__vccOpts || n;
+  for (const [p, s] of t)
+    d[p] = s;
+  return d;
+}, ge = /* @__PURE__ */ $(ne, [["__scopeId", "data-v-8aeb035b"]]), ue = ["id"], oe = /* @__PURE__ */ R({
+  __name: "ActionCell",
+  props: {
+    dataItem: {
+      type: Object,
+      required: !0
+    },
+    config: {
+      type: Object,
+      required: !0
+    },
+    menuController: {
+      type: Object,
+      required: !0
+    },
+    tabIndex: {
+      type: Number,
+      default: -1
+    }
+  },
+  setup(n) {
+    const t = n, d = X("action-cell"), p = (i) => t.menuController.getTriggerId(i, t.dataItem), s = (i) => t.menuController.registry.isIdActive(p(i)), h = (i, f) => {
+      t.menuController.registry.register(
+        p(i),
+        f
+      );
+    }, C = (i, ...f) => {
+      t.menuController.handleTriggerKeydown(p(i), ...f);
+    };
+    return (i, f) => (c(), w("td", {
+      id: o(d).instanceId,
+      class: "fkui-action-cell"
+    }, [
+      (c(!0), w(F, null, H(n.config.triggers, (v) => (c(), y(o(Q), {
+        key: v.key,
+        ref_for: !0,
+        ref: (e) => h(v, e),
+        id: o(d).compose(v.key, "trigger"),
+        "svg-icon": v.icon,
+        type: "button",
+        "fill-mode": "flat",
+        "theme-color": "primary",
+        rounded: "full",
+        "aria-label": v.ariaLabel,
+        "aria-haspopup": "menu",
+        "aria-expanded": s(v),
+        disabled: v.disabled?.(n.dataItem),
+        tabindex: n.tabIndex,
+        onClick: (e) => n.menuController.handleTriggerClick(p(v)),
+        onKeydown: (e) => C(v, e)
+      }, null, 8, ["id", "svg-icon", "aria-label", "aria-expanded", "disabled", "tabindex", "onClick", "onKeydown"]))), 128))
+    ], 8, ue));
+  }
+}), Ie = /* @__PURE__ */ $(oe, [["__scopeId", "data-v-2a6441af"]]), _e = (n) => {
+  const t = Y(), d = n.getTriggerId ?? ((r, u) => `${r.key}:${n.getRowId(u)}`), p = l(() => {
+    const r = t.activeId.value?.split(":")[0];
+    return n.config.triggers.find((u) => u.key === r) ?? null;
+  }), s = l(() => {
+    const r = t.activeId.value?.split(":").slice(1).join(":");
+    return r === void 0 ? null : W(n.rows).find(
+      (u) => String(n.getRowId(u)) === r
+    ) ?? null;
+  }), h = l(() => {
+    const r = s.value, u = p.value;
+    return r && u ? u.items?.(r) ?? [] : [];
+  }), C = l(() => {
+    const r = s.value, u = p.value;
+    return r && u?.title ? u.title(r) : null;
+  }), i = ee({
+    isOpen: t.isActive,
+    triggerRef: t.activeElement,
+    menuRef: n.menuRef,
+    triggerMode: n.triggerMode ?? "button",
+    anchor: n.anchor ?? !0,
+    resolveFocusTarget: n.resolveFocusTarget,
+    requestShow: (r) => {
+      typeof r == "string" && t.activate(r);
+    },
+    requestHide: () => t.deactivate()
+  }), f = (r) => {
+    t.isActive.value && !t.isIdActive(r) && t.deactivate(), n.coexistsWith?.forEach((u) => u.deactivate()), i.handleActionButtonClick(r);
+  }, v = (r, ...u) => {
+    const _ = u[0];
+    if (_.key === "Enter" || _.code === "Space") {
+      _.preventDefault(), f(r);
+      return;
+    }
+    i.handleActionButtonKeydown(_, r);
+  }, e = (r) => {
+    r.key === "Escape" && i.handleActionMenuEscape(r);
+  }, T = (r) => {
+    const u = s.value, _ = p.value;
+    i.handleMenuSelect(r, (k) => {
+      u && _ && n.onActionSelected(k.item?.text, u, _);
+    });
+  };
+  return {
+    actionCellProps: {
+      config: n.config,
+      menuController: {
+        registry: t,
+        getTriggerId: d,
+        handleTriggerClick: f,
+        handleTriggerKeydown: v
+      }
+    },
+    popupProps: l(() => ({
+      show: t.isActive.value,
+      offset: i.offset.value,
+      onClose: i.handlePopupClose
+    })),
+    menuProps: l(() => ({
+      items: h.value,
+      vertical: !0,
+      onKeydown: e,
+      onSelect: T
+    })),
+    activeRow: s,
+    activeTrigger: p,
+    activeTitle: C
+  };
+};
 export {
-  ue as USAddress
+  Ie as ActionCell,
+  ge as USAddress,
+  _e as useActionCellMenu
 };
 //# sourceMappingURL=featherk-ui.es.js.map