import { defineComponent as y, useSlots as h, computed as v, toValue as C, openBlock as n, createBlock as s, createSlots as V, withCtx as o, createVNode as d, createElementBlock as _, Fragment as k, renderList as S, createElementVNode as u, withModifiers as w, toDisplayString as x, unref as L, renderSlot as D, createCommentVNode as F } from "vue";
import B from "./Dropdown.js";
import I from "./Menu.js";
import M from "./MenuItem.js";
import { _ as N } from "./Switch.vue_vue_type_script_setup_true_lang-BxrNfyoU.js";
const $ = ["for"], H = /* @__PURE__ */ y({
  __name: "DataTableColumnVisibility",
  props: {
    table: { default: void 0 },
    columnVisibility: { default: void 0 },
    label: { default: "Columns" },
    align: { default: "right" },
    getColumnLabel: { type: Function, default: void 0 }
  },
  setup(c) {
    const i = c, f = h();
    function m(e) {
      const t = e.columnDef.header;
      return typeof t == "string" ? t : e.id;
    }
    function b(e) {
      var t;
      return ((t = i.getColumnLabel) == null ? void 0 : t.call(i, e)) ?? m(e);
    }
    function r(e) {
      return `stash-dt-col-visibility-${String(e.id).replace(/[^a-zA-Z0-9_-]/g, "-")}`;
    }
    const g = v(() => {
      i.columnVisibility !== void 0 && C(i.columnVisibility);
      const e = i.table;
      return e ? (e.getState().columnVisibility, e.getState().columnOrder, e.getState().columnPinning, e.getAllLeafColumns().filter((t) => t.getCanHide())) : [];
    });
    function p(e, t) {
      e.toggleVisibility(t === !0);
    }
    return (e, t) => i.table ? (n(), s(B, {
      key: 0,
      "data-test": "stash-data-table-column-visibility",
      class: "stash-data-table-column-visibility",
      label: i.label,
      "close-manually": "",
      align: i.align
    }, V({
      default: o(() => [
        d(I, { class: "min-w-60" }, {
          default: o(() => [
            (n(!0), _(k, null, S(g.value, (l) => (n(), s(M, {
              key: l.id
            }, {
              default: o(() => [
                u("div", {
                  class: "flex w-full items-center justify-between gap-3 pr-1.5",
                  onClick: t[0] || (t[0] = w(() => {
                  }, ["stop"]))
                }, [
                  u("label", {
                    class: "flex-1 cursor-pointer text-sm text-ice-900",
                    for: r(l)
                  }, x(b(l)), 9, $),
                  d(N, {
                    id: r(l),
                    checked: l.getIsVisible(),
                    label: "",
                    "onUpdate:checked": (a) => p(l, a)
                  }, null, 8, ["id", "checked", "onUpdate:checked"])
                ])
              ]),
              _: 2
            }, 1024))), 128))
          ]),
          _: 1
        })
      ]),
      _: 2
    }, [
      L(f).toggle ? {
        name: "toggle",
        fn: o(({ isActive: l, toggle: a }) => [
          D(e.$slots, "toggle", {
            isActive: l,
            toggle: a
          })
        ]),
        key: "0"
      } : void 0
    ]), 1032, ["label", "align"])) : F("", !0);
  }
});
export {
  H as default
};
//# sourceMappingURL=DataTableColumnVisibility.js.map
