import { defineComponent as y, useCssModule as D, inject as S, openBlock as s, createBlock as n, withCtx as o, createElementVNode as l, createElementBlock as k, Fragment as b, renderList as V, unref as t, normalizeClass as h, createVNode as d, createTextVNode as c, toDisplayString as i, createCommentVNode as u } from "vue";
import { t as B } from "./locale.js";
import m from "./Button.js";
import "es-toolkit";
import "./Module.keys-DcqBbvvT.js";
import w from "./Icon.js";
import { D as C } from "./DataView.keys-aSOnA4AD.js";
import E from "./Dropdown.js";
import I from "./IconLabel.js";
import { _ as N } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const v = {
  class: "dropdown__list",
  "data-test": "stash-data-view-sort-button|sort-menu"
}, A = ["onClick"], M = ["onClick"], T = /* @__PURE__ */ y({
  __name: "DataViewSortButton",
  props: {
    sortOptions: { default: () => [] }
  },
  setup(x) {
    const _ = x, p = D(), { currentSortId: r, currentSortOrder: a, updateCurrentSort: f } = S(
      C.key,
      C.defaults
    );
    return (F, J) => _.sortOptions.length ? (s(), n(E, {
      key: 0,
      align: "left",
      class: "stash-data-view-sort-button",
      "data-test": "stash-data-view-sort-button"
    }, {
      toggle: o(({ isActive: e, toggle: g }) => [
        d(m, {
          "icon-label": "",
          "aria-expanded": e.toString(),
          class: "text-blue-500",
          "data-test": "stash-data-view-sort-button|sort-menu-button",
          onClick: g
        }, {
          default: o(() => [
            d(I, {
              icon: "sort",
              stacked: ""
            }, {
              default: o(() => [
                c(i(t(B)("ll.sort")), 1)
              ]),
              _: 1
            })
          ]),
          _: 1
        }, 8, ["aria-expanded", "onClick"])
      ]),
      default: o(() => [
        l("ul", v, [
          (s(!0), k(b, null, V(_.sortOptions, (e) => (s(), k(b, {
            key: e.id
          }, [
            l("li", {
              class: h(["dropdown__item rounded", [
                t(p).dropdown__item,
                { "bg-blue-100 text-ice-700": e.id === t(r) && t(a) === "asc" }
              ]]),
              onClick: () => t(f)(e.id, { sortOrder: "asc", shouldEmit: !0 })
            }, [
              d(m, {
                inline: "",
                class: "h-9"
              }, {
                default: o(() => [
                  c(i(e.labelAsc) + " ", 1),
                  e.id === t(r) && t(a) === "asc" ? (s(), n(w, {
                    key: 0,
                    name: "check",
                    class: "ml-auto text-blue-500"
                  })) : u("", !0)
                ]),
                _: 2
              }, 1024)
            ], 10, A),
            l("li", {
              class: h(["dropdown__item rounded", [
                t(p).dropdown__item,
                { "bg-blue-100 text-ice-700": e.id === t(r) && t(a) === "desc" }
              ]]),
              onClick: () => t(f)(e.id, { sortOrder: "desc", shouldEmit: !0 })
            }, [
              d(m, {
                inline: "",
                class: "h-9"
              }, {
                default: o(() => [
                  c(i(e.labelDesc) + " ", 1),
                  e.id === t(r) && t(a) === "desc" ? (s(), n(w, {
                    key: 0,
                    name: "check",
                    class: "ml-auto text-blue-500"
                  })) : u("", !0)
                ]),
                _: 2
              }, 1024)
            ], 10, M)
          ], 64))), 128))
        ])
      ]),
      _: 1
    })) : u("", !0);
  }
}), L = "_dropdown__item_D5srf", j = {
  dropdown__item: L
}, z = {
  $style: j
}, X = /* @__PURE__ */ N(T, [["__cssModules", z]]);
export {
  X as default
};
//# sourceMappingURL=DataViewSortButton.js.map
