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

An Amazing Vue3 UI Components Library, Using TypeScript.

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