sci-pro/es/src/select/select.vue.mjs

import { defineComponent as h, computed as c, ref as i, watch as V, onMounted as R, withDirectives as f, openBlock as u, createElementBlock as r, normalizeStyle as T, createElementVNode as o, createVNode as B, Transition as U, withCtx as z, Fragment as E, renderList as N, normalizeClass as O, toDisplayString as W, vShow as j, unref as F, nextTick as H } from "vue";
import L from "../directives/click-outside.mjs";
import "./style/index.css";
const M = { class: "sci-select" }, $ = ["placeholder", "value"], q = { class: "options" }, A = ["option"], G = ["title"], I = ["onClick"], J = h({ name: "sci-select" }), Y = /* @__PURE__ */ h({
  ...J,
  props: {
    placeholder: { default: "Select" },
    options: {},
    defaultValues: {},
    selectStyle: {},
    txtUnit: { default: "" }
  },
  emits: ["change"],
  setup(_, { emit: m }) {
    const n = _, k = c(() => n.txtUnit), y = c(() => n.selectStyle), w = c(
      () => t.value && t.value.length && t.value.join(",") || ""
    ), g = c(() => n.options), a = i(!1), t = i([]), d = i(), p = i(), x = m;
    V(
      () => n.defaultValues,
      (e) => {
        t.value = e;
      },
      { immediate: !0 }
    );
    const C = (e) => t.value && t.value.length && t.value.some((s) => s === e), S = () => {
      a.value = !1;
    }, b = (e) => {
      t.value = [], t.value.push(e), v(), x("change", e);
    }, v = () => {
      H(() => {
        a.value = !a.value;
      });
    };
    R(() => {
      D();
    });
    const D = () => {
      const e = d.value.getBoundingClientRect().top, s = p.value;
      e >= 521 && setTimeout(() => {
        s && (s.style.top = "auto", s.style.bottom = "32px");
      }, 0);
    };
    return (e, s) => f((u(), r("div", {
      ref_key: "selectWrapRef",
      ref: d,
      class: "sci-select-wrap",
      style: T(y.value)
    }, [
      o("div", M, [
        o("div", {
          class: "display-box",
          tabindex: "-1",
          onClick: v
        }, [
          o("input", {
            class: "input",
            placeholder: e.placeholder,
            readonly: "",
            value: w.value + k.value
          }, null, 8, $)
        ])
      ]),
      B(U, null, {
        default: z(() => [
          f(o("div", {
            class: "drop-down",
            ref_key: "dropDownRef",
            ref: p
          }, [
            o("div", q, [
              (u(!0), r(E, null, N(g.value, (l) => (u(), r("div", {
                class: "option",
                option: l,
                key: l.value
              }, [
                o("label", {
                  class: "option-val",
                  for: "checkboxStyle",
                  title: l.value + ""
                }, [
                  o("span", {
                    class: O(["title", { selected: C(l.value) }]),
                    onClick: (K) => b(l.value)
                  }, W(l.label || l.value), 11, I)
                ], 8, G)
              ], 8, A))), 128))
            ])
          ], 512), [
            [j, a.value]
          ])
        ]),
        _: 1
      })
    ], 4)), [
      [F(L), S]
    ]);
  }
});
export {
  Y as default
};