@affino/datagrid-vue-app 0.1.2 → 0.1.4

package/dist/DataGrid.d.ts

@@ -382,21 +382,21 @@ declare const _default: import("vue").DefineComponent<{
     "onUpdate:state"?: ((...args: any[]) => any) | undefined;
     onReady?: ((...args: any[]) => any) | undefined;
 }, {
-    columns: readonly DataGridAppColumnInput[];
-    aggregations: DataGridAggregationsProp | undefined;
     rows: readonly unknown[];
     rowHeightMode: "fixed" | "auto";
     showRowIndex: boolean;
     rowHover: boolean;
     stripedRows: boolean;
     isCellEditable: DataGridCellEditablePredicate<Record<string, unknown>> | undefined;
+    columns: readonly DataGridAppColumnInput[];
     rowSelection: boolean;
     gantt: DataGridGanttProp | undefined;
+    virtualization: DataGridVirtualizationProp | undefined;
+    pagination: DataGridPaginationProp | undefined;
     rowModel: DataGridRowModel<unknown> | undefined;
+    aggregations: DataGridAggregationsProp | undefined;
     baseRowHeight: number;
     state: DataGridUnifiedState<Record<string, unknown>> | null | undefined;
-    virtualization: DataGridVirtualizationProp | undefined;
-    pagination: DataGridPaginationProp | undefined;
     sortModel: readonly DataGridSortState[] | undefined;
     filterModel: DataGridFilterSnapshot | null | undefined;
     groupBy: DataGridGroupByProp | undefined;

package/dist/advanced-filter.d.ts

@@ -0,0 +1,2 @@
+export { default as DataGridAdvancedFilterPopover } from "./overlays/DataGridAdvancedFilterPopover.vue";
+export type { DataGridAdvancedFilterOptions, DataGridAdvancedFilterProp, } from "./config/dataGridAdvancedFilter";

package/dist/advanced-filter.js

@@ -0,0 +1,4 @@
+import { _ as e } from "./chunks/DataGridAdvancedFilterPopover.vue_vue_type_script_setup_true_lang-DixN56Qv.js";
+export {
+  e as DataGridAdvancedFilterPopover
+};

package/dist/chunks/DataGridAdvancedFilterPopover-Bak_CkaO.js

@@ -0,0 +1,4 @@
+import { _ as f } from "./DataGridAdvancedFilterPopover.vue_vue_type_script_setup_true_lang-DixN56Qv.js";
+export {
+  f as default
+};

package/dist/chunks/DataGridAdvancedFilterPopover.vue_vue_type_script_setup_true_lang-DixN56Qv.js

@@ -0,0 +1,226 @@
+import { defineComponent as j, inject as q, ref as O, computed as c, watch as m, nextTick as k, openBlock as n, createElementBlock as s, Fragment as b, createElementVNode as e, mergeProps as w, unref as _, toDisplayString as P, createBlock as D, Teleport as z, renderList as S, createVNode as y, createCommentVNode as G } from "vue";
+import { usePopoverController as J, useFloatingPopover as K } from "@affino/popover-vue";
+import { d as L, r as H, _ as h } from "./DataGridFilterableCombobox.vue_vue_type_script_setup_true_lang-_1TDQseN.js";
+const M = { class: "datagrid-advanced-filter__header" }, Q = /* @__PURE__ */ e("div", null, [
+  /* @__PURE__ */ e("div", { class: "datagrid-advanced-filter__eyebrow" }, "Advanced filter"),
+  /* @__PURE__ */ e("h3", { class: "datagrid-advanced-filter__title" }, "Build clause-based filter")
+], -1), U = { class: "datagrid-advanced-filter__applied" }, W = { class: "datagrid-advanced-filter__applied-head" }, X = /* @__PURE__ */ e("div", null, [
+  /* @__PURE__ */ e("div", { class: "datagrid-advanced-filter__eyebrow" }, "Applied on table"),
+  /* @__PURE__ */ e("div", { class: "datagrid-advanced-filter__applied-title" }, "Current filters")
+], -1), Y = ["disabled"], Z = {
+  key: 0,
+  class: "datagrid-advanced-filter__applied-list"
+}, x = {
+  key: 1,
+  class: "datagrid-advanced-filter__applied-empty"
+}, ee = { class: "datagrid-advanced-filter__rows" }, ae = { class: "datagrid-advanced-filter__field datagrid-advanced-filter__field--join" }, te = /* @__PURE__ */ e("span", { class: "datagrid-advanced-filter__label" }, "Join", -1), le = { class: "datagrid-advanced-filter__field" }, oe = /* @__PURE__ */ e("span", { class: "datagrid-advanced-filter__label" }, "Column", -1), de = { class: "datagrid-advanced-filter__field" }, ne = /* @__PURE__ */ e("span", { class: "datagrid-advanced-filter__label" }, "Operator", -1), ie = { class: "datagrid-advanced-filter__field datagrid-advanced-filter__field--value" }, se = /* @__PURE__ */ e("span", { class: "datagrid-advanced-filter__label" }, "Value", -1), re = ["value", "onInput"], ce = { class: "datagrid-advanced-filter__row-actions" }, ue = ["disabled", "onClick"], pe = { class: "datagrid-advanced-filter__footer" }, ve = { class: "datagrid-advanced-filter__footer-actions" }, me = /* @__PURE__ */ j({
+  __name: "DataGridAdvancedFilterPopover",
+  props: {
+    isOpen: { type: Boolean },
+    clauses: {},
+    columns: {},
+    appliedFilterSummaryItems: { default: () => [] },
+    hasAnyFilters: { type: Boolean, default: !1 },
+    buttonLabel: { default: "Advanced filter" },
+    active: { type: Boolean, default: !1 }
+  },
+  emits: ["open", "add", "remove", "apply", "cancel", "reset-all", "update-clause"],
+  setup(T, { emit: A }) {
+    const F = Object.freeze([
+      { value: "and", label: "AND" },
+      { value: "or", label: "OR" }
+    ]), I = Object.freeze([
+      { value: "contains", label: "Contains" },
+      { value: "equals", label: "Equals" },
+      { value: "not-equals", label: "Not equals" },
+      { value: "starts-with", label: "Starts with" },
+      { value: "ends-with", label: "Ends with" },
+      { value: "gt", label: ">" },
+      { value: "gte", label: ">=" },
+      { value: "lt", label: "<" },
+      { value: "lte", label: "<=" }
+    ]), u = T, d = A, C = q(L, O(null)), f = O({}), o = J(
+      {
+        id: "advanced-filter",
+        role: "dialog",
+        closeOnEscape: !0,
+        closeOnInteractOutside: !0
+      },
+      {
+        onOpen: () => {
+          u.isOpen || d("open"), g();
+        },
+        onClose: () => {
+          u.isOpen && d("cancel");
+        }
+      }
+    ), r = K(o, {
+      placement: "bottom",
+      align: "start",
+      gutter: 10,
+      viewportPadding: 12,
+      zIndex: 180,
+      lockScroll: !1,
+      returnFocus: !0
+    }), R = c(() => o.getTriggerProps({ role: "dialog" })), N = c(() => o.getContentProps({ role: "dialog", tabIndex: -1 })), E = c(() => o.state.value.open), V = c(() => r.contentStyle.value), $ = c(() => r.teleportTarget.value), B = c(() => u.columns.map((t) => ({
+      value: t.key,
+      label: t.label
+    })));
+    m(
+      () => u.isOpen,
+      async (t) => {
+        if (t) {
+          g(), o.state.value.open || o.open("programmatic"), await k(), r.contentRef.value?.querySelector('[data-advanced-filter-autofocus="true"]')?.focus({ preventScroll: !0 }), await r.updatePosition();
+          return;
+        }
+        o.state.value.open && o.close("programmatic");
+      },
+      { immediate: !0 }
+    ), m(C, () => {
+      o.state.value.open && g();
+    }), m(
+      () => u.clauses.length,
+      async () => {
+        o.state.value.open && (await k(), await r.updatePosition());
+      }
+    );
+    function g() {
+      f.value = H(C.value);
+    }
+    function p(t, l, a) {
+      d("update-clause", { clauseId: t, field: l, value: a });
+    }
+    return (t, l) => (n(), s(b, null, [
+      e("button", w({
+        ref: _(r).triggerRef,
+        type: "button",
+        class: ["datagrid-app-toolbar__button", { "datagrid-app-toolbar__button--active": t.active }],
+        style: f.value
+      }, R.value), P(t.buttonLabel), 17),
+      (n(), D(z, { to: $.value }, [
+        E.value ? (n(), s("section", w({
+          key: 0,
+          ref: _(r).contentRef,
+          class: "datagrid-advanced-filter",
+          "data-datagrid-overlay-surface": "true",
+          style: [V.value, f.value]
+        }, N.value), [
+          e("header", M, [
+            Q,
+            e("button", {
+              type: "button",
+              class: "datagrid-advanced-filter__ghost",
+              onClick: l[0] || (l[0] = (a) => d("cancel"))
+            }, " Close ")
+          ]),
+          e("section", U, [
+            e("div", W, [
+              X,
+              e("button", {
+                type: "button",
+                class: "datagrid-advanced-filter__ghost",
+                disabled: !t.hasAnyFilters,
+                "data-datagrid-advanced-filter-action": "reset-all",
+                onClick: l[1] || (l[1] = (a) => d("reset-all"))
+              }, " Reset all filters ", 8, Y)
+            ]),
+            t.appliedFilterSummaryItems.length > 0 ? (n(), s("div", Z, [
+              (n(!0), s(b, null, S(t.appliedFilterSummaryItems, (a, v) => (n(), s("span", {
+                key: `applied-filter-${v}`,
+                class: "datagrid-advanced-filter__applied-chip"
+              }, P(a), 1))), 128))
+            ])) : (n(), s("div", x, " No filters applied "))
+          ]),
+          e("div", ee, [
+            (n(!0), s(b, null, S(t.clauses, (a, v) => (n(), s("div", {
+              key: a.id,
+              class: "datagrid-advanced-filter__row"
+            }, [
+              e("label", ae, [
+                te,
+                y(h, {
+                  class: "datagrid-advanced-filter__select",
+                  value: a.join,
+                  options: _(F),
+                  "open-on-mount": !1,
+                  "open-on-focus": !1,
+                  "sticky-popover-id": "advanced-filter",
+                  disabled: v === 0,
+                  "aria-label": "Join operator",
+                  onCommit: (i) => p(a.id, "join", i)
+                }, null, 8, ["value", "options", "disabled", "onCommit"])
+              ]),
+              e("label", le, [
+                oe,
+                y(h, {
+                  class: "datagrid-advanced-filter__select",
+                  value: a.columnKey,
+                  options: B.value,
+                  "open-on-mount": !1,
+                  "open-on-focus": !1,
+                  "sticky-popover-id": "advanced-filter",
+                  "data-advanced-filter-autofocus": v === 0 ? "true" : null,
+                  "aria-label": "Column",
+                  onCommit: (i) => p(a.id, "columnKey", i)
+                }, null, 8, ["value", "options", "data-advanced-filter-autofocus", "onCommit"])
+              ]),
+              e("label", de, [
+                ne,
+                y(h, {
+                  class: "datagrid-advanced-filter__select",
+                  value: a.operator,
+                  options: _(I),
+                  "open-on-mount": !1,
+                  "open-on-focus": !1,
+                  "sticky-popover-id": "advanced-filter",
+                  "aria-label": "Condition operator",
+                  onCommit: (i) => p(a.id, "operator", i)
+                }, null, 8, ["value", "options", "onCommit"])
+              ]),
+              e("label", ie, [
+                se,
+                e("input", {
+                  value: a.value,
+                  type: "text",
+                  placeholder: "Value",
+                  "aria-label": "Condition value",
+                  onInput: (i) => p(a.id, "value", i.target.value)
+                }, null, 40, re)
+              ]),
+              e("div", ce, [
+                e("button", {
+                  type: "button",
+                  class: "datagrid-advanced-filter__ghost datagrid-advanced-filter__ghost--danger",
+                  disabled: t.clauses.length <= 1,
+                  onClick: (i) => d("remove", a.id)
+                }, " Remove ", 8, ue)
+              ])
+            ]))), 128))
+          ]),
+          e("footer", pe, [
+            e("button", {
+              type: "button",
+              class: "datagrid-advanced-filter__secondary",
+              onClick: l[2] || (l[2] = (a) => d("add"))
+            }, " Add clause "),
+            e("div", ve, [
+              e("button", {
+                type: "button",
+                class: "datagrid-advanced-filter__secondary",
+                onClick: l[3] || (l[3] = (a) => d("cancel"))
+              }, " Cancel "),
+              e("button", {
+                type: "button",
+                class: "datagrid-advanced-filter__primary",
+                onClick: l[4] || (l[4] = (a) => d("apply"))
+              }, " Apply ")
+            ])
+          ])
+        ], 16)) : G("", !0)
+      ], 8, ["to"]))
+    ], 64));
+  }
+});
+export {
+  me as _
+};

package/dist/chunks/DataGridAggregationsPopover-DfQ3-UV4.js

@@ -0,0 +1,173 @@
+import { defineComponent as V, inject as E, ref as b, computed as d, watch as _, nextTick as m, openBlock as l, createElementBlock as i, Fragment as y, createElementVNode as e, mergeProps as h, unref as f, toDisplayString as k, createBlock as G, Teleport as D, createVNode as C, renderList as I, createCommentVNode as L } from "vue";
+import { usePopoverController as j, useFloatingPopover as z } from "@affino/popover-vue";
+import { d as q, r as K, _ as O } from "./DataGridFilterableCombobox.vue_vue_type_script_setup_true_lang-_1TDQseN.js";
+const U = ["disabled", "title"], H = { class: "datagrid-aggregations__header" }, J = /* @__PURE__ */ e("div", null, [
+  /* @__PURE__ */ e("div", { class: "datagrid-aggregations__eyebrow" }, "Aggregations"),
+  /* @__PURE__ */ e("h3", { class: "datagrid-aggregations__title" }, "Group aggregate model")
+], -1), M = { class: "datagrid-aggregations__basis" }, Q = /* @__PURE__ */ e("span", { class: "datagrid-aggregations__label" }, "Basis", -1), W = {
+  key: 0,
+  class: "datagrid-aggregations__list"
+}, X = { class: "datagrid-aggregations__toggle" }, Y = ["checked", "onChange"], Z = { class: "datagrid-aggregations__row-label" }, x = {
+  key: 1,
+  class: "datagrid-aggregations__empty"
+}, ee = { class: "datagrid-aggregations__footer" }, te = { class: "datagrid-aggregations__footer-actions" }, ne = /* @__PURE__ */ V({
+  __name: "DataGridAggregationsPopover",
+  props: {
+    isOpen: { type: Boolean },
+    basis: {},
+    items: {},
+    buttonLabel: { default: "Aggregations" },
+    active: { type: Boolean, default: !1 },
+    disabled: { type: Boolean, default: !1 },
+    disabledReason: { default: "" }
+  },
+  emits: ["open", "apply", "clear", "cancel", "update-basis", "toggle-column", "update-op"],
+  setup(w, { emit: P }) {
+    const T = Object.freeze([
+      { value: "filtered", label: "Filtered rows" },
+      { value: "source", label: "Source rows" }
+    ]), g = w, n = P, v = E(q, b(null)), c = b({}), s = j(
+      {
+        id: "aggregations",
+        role: "dialog",
+        closeOnEscape: !0,
+        closeOnInteractOutside: !0
+      },
+      {
+        onOpen: () => {
+          g.isOpen || n("open"), u();
+        },
+        onClose: () => {
+          g.isOpen && n("cancel");
+        }
+      }
+    ), r = z(s, {
+      placement: "bottom",
+      align: "start",
+      gutter: 10,
+      viewportPadding: 12,
+      zIndex: 180,
+      lockScroll: !1,
+      returnFocus: !0
+    }), A = d(() => s.getTriggerProps({ role: "dialog" })), B = d(() => s.getContentProps({ role: "dialog", tabIndex: -1 })), R = d(() => s.state.value.open), S = d(() => r.contentStyle.value), $ = d(() => r.teleportTarget.value);
+    _(
+      () => g.isOpen,
+      async (t) => {
+        if (t) {
+          u(), s.state.value.open || s.open("programmatic"), await m(), r.contentRef.value?.querySelector('[data-aggregations-autofocus="true"]')?.focus({ preventScroll: !0 }), await r.updatePosition();
+          return;
+        }
+        s.state.value.open && s.close("programmatic");
+      },
+      { immediate: !0 }
+    ), _(v, () => {
+      s.state.value.open && u();
+    }), _(
+      () => `${g.basis}:${g.items.length}`,
+      async () => {
+        s.state.value.open && (await m(), await r.updatePosition());
+      }
+    );
+    function u() {
+      c.value = K(v.value);
+    }
+    function F(t) {
+      return t === "countNonNull" ? "Count non-null" : t.charAt(0).toUpperCase() + t.slice(1);
+    }
+    function N(t) {
+      return t.map((a) => ({
+        value: a,
+        label: F(a)
+      }));
+    }
+    return (t, a) => (l(), i(y, null, [
+      e("button", h({
+        ref: f(r).triggerRef,
+        type: "button",
+        class: ["datagrid-app-toolbar__button", { "datagrid-app-toolbar__button--active": t.active }]
+      }, A.value, {
+        style: c.value,
+        disabled: t.disabled,
+        title: t.disabledReason || void 0
+      }), k(t.buttonLabel), 17, U),
+      (l(), G(D, { to: $.value }, [
+        R.value ? (l(), i("section", h({
+          key: 0,
+          ref: f(r).contentRef,
+          class: "datagrid-aggregations",
+          "data-datagrid-overlay-surface": "true",
+          style: [S.value, c.value]
+        }, B.value), [
+          e("header", H, [
+            J,
+            e("button", {
+              type: "button",
+              class: "datagrid-aggregations__ghost",
+              onClick: a[0] || (a[0] = (o) => n("cancel"))
+            }, " Close ")
+          ]),
+          e("label", M, [
+            Q,
+            C(O, {
+              class: "datagrid-aggregations__select",
+              value: t.basis,
+              options: f(T),
+              "open-on-mount": !1,
+              "open-on-focus": !1,
+              "sticky-popover-id": "aggregations",
+              "data-aggregations-autofocus": "true",
+              onCommit: a[1] || (a[1] = (o) => n("update-basis", o))
+            }, null, 8, ["value", "options"])
+          ]),
+          t.items.length > 0 ? (l(), i("div", W, [
+            (l(!0), i(y, null, I(t.items, (o) => (l(), i("div", {
+              key: o.key,
+              class: "datagrid-aggregations__row"
+            }, [
+              e("label", X, [
+                e("input", {
+                  type: "checkbox",
+                  checked: o.enabled,
+                  onChange: (p) => n("toggle-column", o.key, p.target.checked)
+                }, null, 40, Y),
+                e("span", Z, k(o.label), 1)
+              ]),
+              C(O, {
+                class: "datagrid-aggregations__op",
+                value: o.op,
+                options: N(o.allowedOps),
+                "open-on-mount": !1,
+                "open-on-focus": !1,
+                "sticky-popover-id": "aggregations",
+                disabled: !o.enabled,
+                onCommit: (p) => n("update-op", o.key, p)
+              }, null, 8, ["value", "options", "disabled", "onCommit"])
+            ]))), 128))
+          ])) : (l(), i("div", x, " No aggregatable columns in the current grid schema. ")),
+          e("footer", ee, [
+            e("button", {
+              type: "button",
+              class: "datagrid-aggregations__secondary",
+              onClick: a[2] || (a[2] = (o) => n("clear"))
+            }, " Clear "),
+            e("div", te, [
+              e("button", {
+                type: "button",
+                class: "datagrid-aggregations__secondary",
+                onClick: a[3] || (a[3] = (o) => n("cancel"))
+              }, " Cancel "),
+              e("button", {
+                type: "button",
+                class: "datagrid-aggregations__primary",
+                onClick: a[4] || (a[4] = (o) => n("apply"))
+              }, " Apply ")
+            ])
+          ])
+        ], 16)) : L("", !0)
+      ], 8, ["to"]))
+    ], 64));
+  }
+});
+export {
+  ne as default
+};

package/dist/chunks/DataGridColumnLayoutPopover-Qt56b3CA.js

@@ -0,0 +1,136 @@
+import { defineComponent as E, inject as F, ref as g, computed as i, watch as m, nextTick as _, openBlock as r, createElementBlock as u, Fragment as b, createElementVNode as t, mergeProps as f, unref as k, toDisplayString as h, createBlock as R, Teleport as $, renderList as x, createCommentVNode as D } from "vue";
+import { usePopoverController as L, useFloatingPopover as G } from "@affino/popover-vue";
+import { d as I, r as A } from "./DataGridFilterableCombobox.vue_vue_type_script_setup_true_lang-_1TDQseN.js";
+const M = { class: "datagrid-column-layout__header" }, N = /* @__PURE__ */ t("div", null, [
+  /* @__PURE__ */ t("div", { class: "datagrid-column-layout__eyebrow" }, "Column layout"),
+  /* @__PURE__ */ t("h3", { class: "datagrid-column-layout__title" }, "Order and visibility")
+], -1), j = { class: "datagrid-column-layout__list" }, q = { class: "datagrid-column-layout__visibility" }, z = ["checked", "onChange"], K = { class: "datagrid-column-layout__label" }, U = { class: "datagrid-column-layout__move-actions" }, H = ["disabled", "onClick"], J = ["disabled", "onClick"], Q = { class: "datagrid-column-layout__footer" }, Z = /* @__PURE__ */ E({
+  __name: "DataGridColumnLayoutPopover",
+  props: {
+    isOpen: { type: Boolean },
+    items: {},
+    buttonLabel: { default: "Columns" },
+    active: { type: Boolean, default: !1 }
+  },
+  emits: ["open", "toggle-visibility", "move-up", "move-down", "apply", "cancel"],
+  setup(C, { emit: O }) {
+    const c = C, n = O, v = F(I, g(null)), d = g({}), o = L(
+      {
+        id: "column-layout",
+        role: "dialog",
+        closeOnEscape: !0,
+        closeOnInteractOutside: !0
+      },
+      {
+        onOpen: () => {
+          c.isOpen || n("open"), p();
+        },
+        onClose: () => {
+          c.isOpen && n("cancel");
+        }
+      }
+    ), l = G(o, {
+      placement: "bottom",
+      align: "start",
+      gutter: 10,
+      viewportPadding: 12,
+      zIndex: 180,
+      lockScroll: !1,
+      returnFocus: !0
+    }), w = i(() => o.getTriggerProps({ role: "dialog" })), P = i(() => o.getContentProps({ role: "dialog", tabIndex: -1 })), T = i(() => o.state.value.open), S = i(() => l.contentStyle.value), V = i(() => l.teleportTarget.value);
+    m(
+      () => c.isOpen,
+      async (s) => {
+        if (s) {
+          p(), o.state.value.open || o.open("programmatic"), await _(), l.contentRef.value?.querySelector('input[type="checkbox"]')?.focus({ preventScroll: !0 }), await l.updatePosition();
+          return;
+        }
+        o.state.value.open && o.close("programmatic");
+      },
+      { immediate: !0 }
+    ), m(v, () => {
+      o.state.value.open && p();
+    }), m(
+      () => c.items.length,
+      async () => {
+        o.state.value.open && (await _(), await l.updatePosition());
+      }
+    );
+    function p() {
+      d.value = A(v.value);
+    }
+    function B(s, a) {
+      n("toggle-visibility", { key: s, visible: a });
+    }
+    return (s, a) => (r(), u(b, null, [
+      t("button", f({
+        ref: k(l).triggerRef,
+        type: "button",
+        class: ["datagrid-app-toolbar__button", { "datagrid-app-toolbar__button--active": s.active }],
+        style: d.value
+      }, w.value), h(s.buttonLabel), 17),
+      (r(), R($, { to: V.value }, [
+        T.value ? (r(), u("section", f({
+          key: 0,
+          ref: k(l).contentRef,
+          class: "datagrid-column-layout",
+          "data-datagrid-overlay-surface": "true",
+          style: [S.value, d.value]
+        }, P.value), [
+          t("header", M, [
+            N,
+            t("button", {
+              type: "button",
+              class: "datagrid-column-layout__ghost",
+              onClick: a[0] || (a[0] = (e) => n("cancel"))
+            }, " Close ")
+          ]),
+          t("div", j, [
+            (r(!0), u(b, null, x(s.items, (e) => (r(), u("div", {
+              key: e.key,
+              class: "datagrid-column-layout__row"
+            }, [
+              t("label", q, [
+                t("input", {
+                  type: "checkbox",
+                  checked: e.visible,
+                  onChange: (y) => B(e.key, y.target.checked)
+                }, null, 40, z),
+                t("span", K, h(e.label), 1)
+              ]),
+              t("div", U, [
+                t("button", {
+                  type: "button",
+                  class: "datagrid-column-layout__icon-button",
+                  disabled: !e.canMoveUp,
+                  onClick: (y) => n("move-up", e.key)
+                }, " ↑ ", 8, H),
+                t("button", {
+                  type: "button",
+                  class: "datagrid-column-layout__icon-button",
+                  disabled: !e.canMoveDown,
+                  onClick: (y) => n("move-down", e.key)
+                }, " ↓ ", 8, J)
+              ])
+            ]))), 128))
+          ]),
+          t("footer", Q, [
+            t("button", {
+              type: "button",
+              class: "datagrid-column-layout__secondary",
+              onClick: a[1] || (a[1] = (e) => n("cancel"))
+            }, " Cancel "),
+            t("button", {
+              type: "button",
+              class: "datagrid-column-layout__primary",
+              onClick: a[2] || (a[2] = (e) => n("apply"))
+            }, " Apply ")
+          ])
+        ], 16)) : D("", !0)
+      ], 8, ["to"]))
+    ], 64));
+  }
+});
+export {
+  Z as default
+};