vue-amazing-ui/es/segmented/Segmented.vue2.js

An Amazing Vue3 UI Components Library, Using TypeScript.

import { defineComponent as C, ref as s, computed as w, watch as B, nextTick as j, createElementBlock as g, openBlock as b, normalizeClass as h, createElementVNode as r, Fragment as O, renderList as W, renderSlot as I, createTextVNode as L, toDisplayString as V, normalizeStyle as $ } from "vue";
import { useResizeObserver as E } from "../utils/index.js";
const T = ["onClick"], D = ["checked", "disabled"], G = ["title"], M = /* @__PURE__ */ C({
  __name: "Segmented",
  props: {
    block: { type: Boolean, default: !1 },
    disabled: { type: Boolean, default: !1 },
    options: { default: () => [] },
    size: { default: "middle" },
    value: { default: void 0 }
  },
  emits: ["update:value", "change"],
  setup(l, { emit: S }) {
    const u = l, d = s(), v = s(), a = s(), y = s(0), p = s(0), x = S, R = w(() => {
      const e = {
        small: "2px",
        middle: "4px",
        large: "8px"
      };
      return {
        position: "absolute",
        top: 0,
        left: `${p.value}px`,
        backgroundColor: "#fff",
        boxShadow: "0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02)",
        width: `${y.value}px`,
        height: "100%",
        borderRadius: e[u.size],
        pointerEvents: "none",
        transition: "all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1)"
      };
    });
    B(
      () => u.value,
      async (e) => {
        e !== a.value && (a.value = e, await j(), o());
      },
      {
        immediate: !0
      }
    ), E(d, () => {
      o();
    });
    function o() {
      const e = u.options.findIndex(
        (t) => n(t) === a.value
      ), c = v.value?.[e];
      if (c && d.value) {
        const { width: t, left: i } = c.getBoundingClientRect(), { left: k } = d.value.getBoundingClientRect();
        y.value = t, p.value = i - k;
      }
    }
    function z(e) {
      e !== a.value && (a.value = e, o(), x("update:value", e), x("change", e));
    }
    function f(e) {
      return typeof e == "object" && e?.disabled || !1;
    }
    function n(e) {
      return typeof e == "object" ? e.value : e;
    }
    function m(e) {
      return typeof e == "object" ? e.label : e;
    }
    return (e, c) => (b(), g("div", {
      class: h(["segmented-wrap", {
        "segmented-small": l.size == "small",
        "segmented-large": l.size == "large",
        "segmented-block": l.block
      }])
    }, [
      r("div", {
        ref_key: "segmentedGroupRef",
        ref: d,
        class: "segmented-group"
      }, [
        (b(!0), g(O, null, W(l.options, (t, i) => (b(), g("div", {
          ref_for: !0,
          ref_key: "segmentedItemRef",
          ref: v,
          class: h(["segmented-item", {
            "segmented-item-selected": a.value === n(t),
            "segmented-item-disabled": l.disabled || f(t),
            "segmented-item-block": l.block
          }]),
          key: i,
          onClick: (k) => l.disabled || f(t) ? () => !1 : z(n(t))
        }, [
          r("input", {
            type: "radio",
            class: "segmented-item-input",
            checked: a.value === n(t),
            disabled: l.disabled || f(t)
          }, null, 8, D),
          r("div", {
            class: "segmented-item-label",
            title: typeof t == "object" && t.payload ? void 0 : String(m(t))
          }, [
            I(e.$slots, "label", {
              option: t,
              label: m(t),
              index: i,
              payload: typeof t == "object" ? t.payload : {}
            }, () => [
              L(V(m(t)), 1)
            ], !0)
          ], 8, G)
        ], 10, T))), 128)),
        r("div", {
          style: $(R.value)
        }, null, 4)
      ], 512)
    ], 2));
  }
});
export {
  M as default
};