@affino/datagrid-vue-app 0.1.18 → 0.1.20

package/dist/chunks/DataGridFindReplacePopover.vue_vue_type_script_setup_true_lang-DfHFHhUf.js

@@ -0,0 +1,171 @@
+import { defineComponent as O, inject as P, ref as _, computed as r, watch as p, nextTick as g, openBlock as u, createElementBlock as v, Fragment as B, createElementVNode as e, mergeProps as m, unref as b, toDisplayString as y, createBlock as S, Teleport as $, withKeys as E, withModifiers as I, createCommentVNode as K } from "vue";
+import { usePopoverController as V, useFloatingPopover as A } from "@affino/popover-vue";
+import { d as D, r as G } from "./dataGridOverlayThemeVars-vzY74EIz.js";
+const L = { class: "datagrid-find-replace__header" }, M = /* @__PURE__ */ e("div", null, [
+  /* @__PURE__ */ e("div", { class: "datagrid-find-replace__eyebrow" }, "Find / replace"),
+  /* @__PURE__ */ e("h3", { class: "datagrid-find-replace__title" }, "Search visible cells and apply batched edits")
+], -1), N = { class: "datagrid-find-replace__grid" }, j = { class: "datagrid-find-replace__field" }, q = /* @__PURE__ */ e("span", { class: "datagrid-find-replace__label" }, "Find", -1), z = ["value", "onKeydown"], U = { class: "datagrid-find-replace__field" }, H = /* @__PURE__ */ e("span", { class: "datagrid-find-replace__label" }, "Replace", -1), J = ["value"], Q = { class: "datagrid-find-replace__toggle" }, W = ["checked"], X = /* @__PURE__ */ e("span", null, "Match case", -1), Y = ["data-has-message"], Z = { class: "datagrid-find-replace__footer" }, ee = { class: "datagrid-find-replace__footer-actions" }, te = ["disabled"], ae = ["disabled"], ne = { class: "datagrid-find-replace__footer-actions" }, oe = ["disabled"], le = ["disabled"], ie = /* @__PURE__ */ O({
+  __name: "DataGridFindReplacePopover",
+  props: {
+    isOpen: { type: Boolean },
+    findText: {},
+    replaceText: {},
+    matchCase: { type: Boolean },
+    statusText: { default: "" },
+    buttonLabel: { default: "Find / replace" },
+    active: { type: Boolean, default: !1 },
+    canFind: { type: Boolean, default: !1 },
+    canReplaceCurrent: { type: Boolean, default: !1 },
+    canReplaceAll: { type: Boolean, default: !1 }
+  },
+  emits: ["open", "cancel", "update-find-text", "update-replace-text", "update-match-case", "find-next", "find-previous", "replace-current", "replace-all"],
+  setup(h, { emit: T }) {
+    const s = h, n = T, f = P(D, _(null)), i = _({}), o = V(
+      {
+        id: "find-replace",
+        role: "dialog",
+        closeOnEscape: !0,
+        // Excel-style find/replace should stay open while the grid selection moves.
+        closeOnInteractOutside: !1
+      },
+      {
+        onOpen: () => {
+          s.isOpen || n("open"), c();
+        },
+        onClose: () => {
+          s.isOpen && n("cancel");
+        }
+      }
+    ), d = A(o, {
+      placement: "bottom",
+      align: "start",
+      gutter: 10,
+      viewportPadding: 12,
+      zIndex: 180,
+      lockScroll: !1,
+      returnFocus: !0
+    }), C = r(() => o.getTriggerProps({ role: "dialog" })), x = r(() => o.getContentProps({ role: "dialog", tabIndex: -1 })), F = r(() => o.state.value.open), k = r(() => d.contentStyle.value), R = r(() => d.teleportTarget.value);
+    p(
+      () => s.isOpen,
+      async (a) => {
+        if (a) {
+          c(), o.state.value.open || o.open("programmatic"), await g(), d.contentRef.value?.querySelector('[data-find-replace-autofocus="true"]')?.focus({ preventScroll: !0 }), await d.updatePosition();
+          return;
+        }
+        o.state.value.open && o.close("programmatic");
+      },
+      { immediate: !0 }
+    ), p(f, () => {
+      o.state.value.open && c();
+    }), p(
+      () => `${s.findText}:${s.replaceText}:${s.statusText}:${s.matchCase ? "1" : "0"}`,
+      async () => {
+        o.state.value.open && (await g(), await d.updatePosition());
+      }
+    );
+    function c() {
+      i.value = G(f.value);
+    }
+    function w(a) {
+      if (a.shiftKey) {
+        n("find-previous");
+        return;
+      }
+      n("find-next");
+    }
+    return (a, t) => (u(), v(B, null, [
+      e("button", m({
+        ref: b(d).triggerRef,
+        type: "button",
+        class: ["datagrid-app-toolbar__button", { "datagrid-app-toolbar__button--active": a.active }],
+        "data-datagrid-toolbar-action": "find-replace",
+        style: i.value
+      }, C.value), y(a.buttonLabel), 17),
+      (u(), S($, { to: R.value }, [
+        F.value ? (u(), v("section", m({
+          key: 0,
+          ref: b(d).contentRef,
+          class: "datagrid-find-replace",
+          "data-datagrid-overlay-surface": "true",
+          style: [k.value, i.value]
+        }, x.value), [
+          e("header", L, [
+            M,
+            e("button", {
+              type: "button",
+              class: "datagrid-find-replace__ghost",
+              onClick: t[0] || (t[0] = (l) => n("cancel"))
+            }, " Close ")
+          ]),
+          e("div", N, [
+            e("label", j, [
+              q,
+              e("input", {
+                "data-find-replace-autofocus": "true",
+                value: a.findText,
+                type: "text",
+                placeholder: "Search text",
+                onInput: t[1] || (t[1] = (l) => n("update-find-text", l.target.value)),
+                onKeydown: E(I(w, ["prevent"]), ["enter"])
+              }, null, 40, z)
+            ]),
+            e("label", U, [
+              H,
+              e("input", {
+                value: a.replaceText,
+                type: "text",
+                placeholder: "Replacement",
+                onInput: t[2] || (t[2] = (l) => n("update-replace-text", l.target.value))
+              }, null, 40, J)
+            ])
+          ]),
+          e("label", Q, [
+            e("input", {
+              checked: a.matchCase,
+              type: "checkbox",
+              onChange: t[3] || (t[3] = (l) => n("update-match-case", l.target.checked))
+            }, null, 40, W),
+            X
+          ]),
+          e("div", {
+            class: "datagrid-find-replace__status",
+            "data-has-message": a.statusText.length > 0 ? "true" : "false"
+          }, y(a.statusText || "Use Enter for Find next and Shift+Enter for Find previous."), 9, Y),
+          e("footer", Z, [
+            e("div", ee, [
+              e("button", {
+                type: "button",
+                class: "datagrid-find-replace__secondary",
+                disabled: !a.canFind,
+                onClick: t[4] || (t[4] = (l) => n("find-previous"))
+              }, " Find previous ", 8, te),
+              e("button", {
+                type: "button",
+                class: "datagrid-find-replace__secondary",
+                disabled: !a.canFind,
+                onClick: t[5] || (t[5] = (l) => n("find-next"))
+              }, " Find next ", 8, ae)
+            ]),
+            e("div", ne, [
+              e("button", {
+                type: "button",
+                class: "datagrid-find-replace__secondary",
+                disabled: !a.canReplaceCurrent,
+                onClick: t[6] || (t[6] = (l) => n("replace-current"))
+              }, " Replace ", 8, oe),
+              e("button", {
+                type: "button",
+                class: "datagrid-find-replace__primary",
+                disabled: !a.canReplaceAll,
+                onClick: t[7] || (t[7] = (l) => n("replace-all"))
+              }, " Replace all ", 8, le)
+            ])
+          ])
+        ], 16)) : K("", !0)
+      ], 8, ["to"]))
+    ], 64));
+  }
+});
+export {
+  ie as _
+};