double-ui-vue/es/select-checkbox/index.js

基于vue框架的ui库

import { defineComponent, getCurrentInstance, createVNode, reactive, onMounted, watch, withDirectives, createStaticVNode, vShow } from "vue";
var style$1 = "";
var V = (e, t) => {
  let r = e.tagName.toLocaleLowerCase();
  return r === "body" || t.some((o) => o.toLocaleLowerCase() === r) ? e : V(e.parentNode, t);
}, M = V;
var _t = (e, t) => {
  let r = e.target;
  t && (r = M(r, [t]));
  let { clientWidth: o, scrollWidth: n } = r;
  n > o ? r.title = r.innerText : r.title = "";
}, Kt = _t;
const GetTextHideWidth = (maxWidth = 0, text) => {
  const div = document.createElement("div");
  div.style.display = "inline-block";
  div.style.position = "absolute";
  div.style.height = "0";
  div.style.fontSize = "14px";
  div.innerText = text;
  document.body.appendChild(div);
  const { width } = div.getBoundingClientRect(), w = Math.ceil(width);
  document.body.removeChild(div);
  if (w <= maxWidth)
    return 0;
  return w - maxWidth;
};
const GetScrollbarWidth = () => {
  const oDiv = document.createElement("div");
  oDiv.style.cssText = "position:absolute;top:-1000px;width:100px;height:100px;overflow:hidden;opacity:0;";
  const noScroll = document.body.appendChild(oDiv).clientWidth;
  oDiv.style.overflowY = "scroll";
  const scroll = oDiv.clientWidth;
  document.body.removeChild(oDiv);
  const bw = noScroll - scroll;
  return bw < 6 ? 6 : bw;
};
const CheckHtml = (htmlStr) => /<[^>]+>/g.test(htmlStr);
var style = "";
const Checkbox = defineComponent({
  name: "DCheckbox",
  props: {
    checked: {
      type: String,
      default: "uncheck"
    },
    disabled: {
      type: Boolean,
      default: false
    },
    stopPropagation: {
      type: Boolean,
      default: false
    },
    attr: {
      type: String
    },
    onChange: {
      type: Function,
      default: () => {
      }
    }
  },
  setup(props, {
    emit
  }) {
    const {
      vnode
    } = getCurrentInstance();
    const handleChange = (e) => {
      const {
        disabled,
        checked,
        stopPropagation,
        attr
      } = props;
      if (stopPropagation)
        e.stopPropagation();
      if (disabled)
        return;
      let status;
      if (checked === "checked")
        status = "uncheck";
      else
        status = "checked";
      if (vnode.props.onChange)
        emit("change", status, attr, e);
      else
        emit("update:checked", status);
    };
    return {
      handleChange
    };
  },
  render() {
    const {
      $slots: slots,
      disabled,
      checked,
      handleChange
    } = this;
    return createVNode("div", {
      "class": ["d-checkbox", disabled && "d-checkbox-disabled"],
      "onClick": handleChange
    }, [createVNode("i", {
      "class": ["d-checkbox-box", `d-checkbox-${checked}`]
    }, null), slots.default && createVNode("span", {
      "class": "d-checkbox-text",
      "onMouseenter": Kt
    }, [slots.default()])]);
  }
});
const SelectCheckbox = defineComponent({
  name: "SelectCheckbox",
  props: {
    data: {
      type: Array,
      default: () => []
    },
    childDisable: {
      type: Boolean,
      default: false
    },
    width: {
      type: [String, Number],
      default: 280
    },
    textIndent: {
      type: Boolean,
      default: true
    },
    stopPropagation: {
      type: Boolean,
      default: false
    },
    onChange: {
      type: Function,
      default: () => {
      }
    }
  },
  emits: ["change"],
  setup(props, {
    emit
  }) {
    const state = reactive({
      scrollBar: 0,
      selectData: []
    });
    onMounted(() => {
      state.scrollBar = GetScrollbarWidth();
    });
    const getTextWidth = (text = "") => {
      const reg = /<\/?.+?\/?>/g;
      const {
        width
      } = props;
      const maxWidth = width - 49;
      return GetTextHideWidth(maxWidth, text.replace(reg, ""));
    };
    watch(() => props.data, (n) => {
      const {
        textIndent
      } = props;
      if (JSON.stringify(n).length < 4)
        return;
      state.selectData = n.map((d) => {
        if (textIndent)
          d.excess = -getTextWidth(d.name);
        return d;
      });
    }, {
      deep: true,
      immediate: true
    });
    const setHtmlTagTitle = (e, {
      excess,
      name
    }) => {
      const {
        textIndent
      } = props;
      const reg = /<\/?.+?\/?>/g;
      if (textIndent) {
        if (excess)
          e.target.title = name.replace(reg, "");
      } else {
        Kt(e);
      }
    };
    const optionClick = (id, checked) => {
      let selectedData = {};
      let unselectData = {};
      state.selectData = state.selectData.map((d) => {
        if (d.id === id && !d.disabled) {
          d.checked = checked;
          if (checked.startsWith("c"))
            selectedData = d;
          else
            unselectData = d;
        }
        return d;
      });
      emit("change", selectedData, unselectData);
    };
    const change = (checked, id) => {
      optionClick(id, checked);
    };
    return () => {
      const {
        data,
        stopPropagation
      } = props;
      const {
        scrollBar,
        selectData
      } = state;
      return withDirectives(createVNode("div", {
        "class": "d-select-checkbox"
      }, [selectData.map((item, ind) => createVNode("div", {
        "key": item.id,
        "class": {
          "d-select-checkbox-item": true,
          "d-select-checkbox-disabled": item.disabled
        }
      }, [createVNode(Checkbox, {
        "key": `${item.id}-${ind}`,
        "checked": item.checked,
        "onUpdate:checked": ($event) => item.checked = $event,
        "disabled": item.disabled,
        "stopPropagation": stopPropagation,
        "attr": item.id,
        "onChange": change
      }, {
        default: () => [createVNode("span", {
          "class": {
            "d-select-checkbox-text": true,
            "d-select-checkbox-text-ellipsis-start": item.excess
          },
          "style": {
            textIndent: `${item.excess - (item.excess && scrollBar)}px`
          },
          "onMouseenter": (e) => setHtmlTagTitle(e, item)
        }, [CheckHtml(item.name) ? createStaticVNode(item.name, 0) : item.name])]
      })]))]), [[vShow, data && data.length]]);
    };
  }
});
export { SelectCheckbox as default };