@soroka282/migrant.ui-kit 0.0.58 → 0.0.60

package/dist/List-C2lwzHBV.js

@@ -0,0 +1,69 @@
+import { defineComponent as w, ref as i, computed as y, createElementBlock as a, openBlock as r, createCommentVNode as d, createElementVNode as p, createVNode as _, Fragment as V, renderList as L, normalizeStyle as S, normalizeClass as k, createTextVNode as I, toDisplayString as g } from "vue";
+import { u as B, U as N, _ as b } from "./index-s9ZsrOK1.js";
+const x = { class: "select-list" }, U = {
+  key: 0,
+  class: "search-wrapper"
+}, z = ["onClick"], A = {
+  key: 0,
+  width: "20",
+  height: "20",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, E = /* @__PURE__ */ w({
+  __name: "List",
+  props: {
+    showSearchInput: { type: Boolean, default: !0 },
+    placeholderSearchInput: { default: "Поиск..." },
+    options: {},
+    multiple: { type: Boolean, default: !1 },
+    selectedValues: { default: () => [] },
+    selectedColor: { default: "#7c3aed" }
+  },
+  emits: ["select", "close"],
+  setup(m, { emit: f }) {
+    const n = f, s = m, [v] = B(), u = i(""), o = i([...s.selectedValues]), h = y(() => {
+      if (!u.value) return s.options;
+      const e = u.value.toLowerCase();
+      return s.options.filter((l) => l.label.toLowerCase().includes(e));
+    }), c = (e) => o.value.some((l) => l.value === e.value), C = (e) => {
+      if (s.multiple) {
+        const l = o.value.findIndex((t) => t.value === e.value);
+        l === -1 ? o.value.push(e) : o.value.splice(l, 1), n("select", [...o.value]);
+      } else
+        n("select", e), n("close");
+    };
+    return (e, l) => (r(), a("div", x, [
+      e.showSearchInput ? (r(), a("div", U, [
+        _(N, {
+          modelValue: u.value,
+          "onUpdate:modelValue": l[0] || (l[0] = (t) => u.value = t),
+          placeholder: e.placeholderSearchInput
+        }, null, 8, ["modelValue", "placeholder"])
+      ])) : d("", !0),
+      p("ul", {
+        ref_key: "list",
+        ref: v,
+        class: "options-list"
+      }, [
+        (r(!0), a(V, null, L(h.value, (t) => (r(), a("li", {
+          key: t.value,
+          class: k(["option-item", { "--selected": e.multiple && c(t) }]),
+          style: S(e.multiple && c(t) ? { color: s.selectedColor } : {}),
+          onClick: (M) => C(t)
+        }, [
+          I(g(t.label) + " ", 1),
+          e.multiple && c(t) ? (r(), a("svg", A, l[1] || (l[1] = [
+            p("path", {
+              d: "M10 20C4.47656 20 0 15.5234 0 10C0 4.47656 4.47656 0 10 0C15.5234 0 20 4.47656 20 10C20 15.5234 15.5234 20 10 20ZM14.6094 5.69141C14.1914 5.38672 13.6055 5.48047 13.3008 5.89844L8.63672 12.3125L6.60156 10.2773C6.23438 9.91016 5.64063 9.91016 5.27734 10.2773C4.91406 10.6445 4.91016 11.2383 5.27734 11.6016L8.08984 14.4141C8.28516 14.6094 8.55078 14.707 8.82422 14.6875C9.09766 14.668 9.34766 14.5273 9.50781 14.3047L14.8164 7C15.1211 6.58203 15.0273 5.99609 14.6094 5.69141Z",
+              fill: "currentColor"
+            }, null, -1)
+          ]))) : d("", !0)
+        ], 14, z))), 128))
+      ], 512)
+    ]));
+  }
+}), D = /* @__PURE__ */ b(E, [["__scopeId", "data-v-80fb25e3"]]);
+export {
+  D as default
+};