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