@hopeio/utils/dist/ReSegmented.es.js

javascript utils

import { defineComponent as M, ref as n, getCurrentInstance as S, toRef as $, watch as k, nextTick as i, createVNode as u, withDirectives as C, h as o, resolveDirective as A } from "vue";
import { useRenderIcon as B } from "./ReIcon.es.js";
import { useDark as L, isNumber as R, useResizeObserver as N, isFunction as z, withInstall as X } from "@pureadmin/utils";
const q = {
  options: {
    type: Array,
    default: () => []
  },
  /** 默认选中，按照第一个索引为 `0` 的模式，可选（`modelValue`只有传`number`类型时才为响应式） */
  modelValue: {
    type: void 0,
    require: !1,
    default: "0"
  },
  /** 将宽度调整为父元素宽度	 */
  block: {
    type: Boolean,
    default: !1
  },
  /** 控件尺寸 */
  size: {
    type: String
  },
  /** 是否全局禁用，默认 `false` */
  disabled: {
    type: Boolean,
    default: !1
  },
  /** 当内容发生变化时，设置 `resize` 可使其自适应容器位置 */
  resize: {
    type: Boolean,
    default: !1
  }
}, F = /* @__PURE__ */ M({
  name: "ReSegmented",
  props: q,
  emits: ["change", "update:modelValue"],
  setup(a, {
    emit: m
  }) {
    const f = n(0), v = n(0), {
      isDark: b
    } = L(), g = n(!1), r = n(-1), d = n(""), c = S(), s = R(a.modelValue) ? $(a, "modelValue") : n(0);
    function I({
      option: e,
      index: l
    }, t) {
      a.disabled || e.disabled || (t.preventDefault(), R(a.modelValue) ? m("update:modelValue", l) : s.value = l, d.value = "", m("change", {
        index: l,
        option: e
      }));
    }
    function D({
      option: e,
      index: l
    }, t) {
      a.disabled || (t.preventDefault(), r.value = l, e.disabled || s.value === l ? d.value = "" : d.value = b.value ? "#1f1f1f" : "rgba(0, 0, 0, 0.06)");
    }
    function V(e, l) {
      a.disabled || (l.preventDefault(), r.value = -1);
    }
    function h(e = s.value) {
      i(() => {
        var t;
        const l = (t = c == null ? void 0 : c.proxy) == null ? void 0 : t.$refs[`labelRef${e}`];
        l && (f.value = l.clientWidth, v.value = l.offsetLeft, g.value = !0);
      });
    }
    function y() {
      N(".pure-segmented", () => {
        i(() => {
          h(s.value);
        });
      });
    }
    (a.block || a.resize) && y(), k(() => s.value, (e) => {
      i(() => {
        h(e);
      });
    }, {
      immediate: !0
    }), k(() => a.size, y, {
      immediate: !0
    });
    const w = () => a.options.map((e, l) => u("label", {
      ref: `labelRef${l}`,
      class: ["pure-segmented-item", (a.disabled || (e == null ? void 0 : e.disabled)) && "pure-segmented-item-disabled"],
      style: {
        background: r.value === l ? d.value : "",
        color: a.disabled ? null : !e.disabled && (s.value === l || r.value === l) ? b.value ? "rgba(255, 255, 255, 0.85)" : "rgba(0,0,0,.88)" : ""
      },
      onMouseenter: (t) => D({
        option: e,
        index: l
      }, t),
      onMouseleave: (t) => V({}, t),
      onClick: (t) => I({
        option: e,
        index: l
      }, t)
    }, [u("input", {
      type: "radio",
      name: "segmented"
    }, null), C(u("div", {
      class: "pure-segmented-item-label"
    }, [e.icon && !z(e.label) ? u("span", {
      class: "pure-segmented-item-icon",
      style: {
        marginRight: e.label ? "6px" : 0
      }
    }, [o(B(e.icon, {
      ...e == null ? void 0 : e.iconAttrs
    }))]) : null, e.label ? z(e.label) ? o(e.label) : u("span", null, [e.label]) : null]), [[A("tippy"), {
      content: e == null ? void 0 : e.tip,
      zIndex: 41e3
    }]])]));
    return () => u("div", {
      class: {
        "pure-segmented": !0,
        "pure-segmented-block": a.block,
        "pure-segmented--large": a.size === "large",
        "pure-segmented--small": a.size === "small"
      }
    }, [u("div", {
      class: "pure-segmented-group"
    }, [u("div", {
      class: "pure-segmented-item-selected",
      style: {
        width: `${f.value}px`,
        transform: `translateX(${v.value}px)`,
        display: g.value ? "block" : "none"
      }
    }, null), w()])]);
  }
}), _ = X(F);
export {
  _ as ReSegmented,
  _ as default
};