@farris/ui-vue/components/checkbox-group/index.esm.js

Farris Vue, a Farris Design based Vue3 component library.

import { radioCheckboxCommonProps as V, useGuid as S, CHECKBOX_CONTEXT as D, withInstall as F } from "../common/index.esm.js";
import { computed as y, ref as d, watch as k, defineComponent as T, provide as B, createVNode as h } from "vue";
const G = {
  ...V,
  /**
   * 组件标识
   */
  id: String,
  /**
   * 禁用组件，不允许切换单选值
   */
  disabled: { type: Boolean, default: !1 },
  /**
   * 同disabled 
   */
  readonly: { type: Boolean, default: !1 },
  /**
   * 单选组枚举数组---废弃
   */
  enumData: {
    type: Array,
    default: []
  },
  /**
   * 单选组枚举数组
   */
  data: {
    type: Array,
    default: []
  },
  /**
   * 值类型是否为字符串
   */
  isStringValue: { type: Boolean, default: !0 },
  /**
   * 异步获取枚举数组方法
   */
  // loadData: () => Observable < { data: Array<Checkbox> } >
  loadData: { type: Function },
  /**
   * 组件值，字符串或者数组
   */
  modelValue: [String, Array],
  /**
   * 组件名称
   */
  name: { type: String, default: "" },
  /**
   * 分隔符，默认逗号
   */
  separator: { type: String, default: "," },
  /**
   * 输入框Tab键索引
   */
  tabIndex: { type: Number, default: 0 },
  /**
   * 枚举数组中展示文本的key值。
   */
  textField: { type: String, default: "name" },
  /**
   * 枚举数组中枚举值的key值。
   */
  valueField: { type: String, default: "value" }
};
function p(e, l, u) {
  const b = y(() => !(e.readonly && e.disabled)), o = d(e.data || e.enumData || e.options);
  function c(a) {
    return a[e.valueField];
  }
  function s(a) {
    return a[e.textField];
  }
  function f(a) {
    return a ? e.isStringValue ? a.split(e.separator) : a : [];
  }
  function g(a) {
    const n = o.value.map((t) => c(t)).filter((t) => a.some((r) => r === String(t)));
    return e.isStringValue ? n.join(e.separator) : n;
  }
  function v(a) {
    const i = String(c(a));
    return f(u.value).some((t) => t === i);
  }
  function m(a, i) {
    if (b.value) {
      let n = f(u.value) || [];
      const t = String(c(a));
      !n || !n.length ? n.push(t) : n.some((r) => r === t) ? n = n.filter((r) => r !== t) : n.push(t), u.value = g(n), l.emit("changeValue", u.value), l.emit("update:modelValue", u.value);
    }
    i.stopPropagation();
  }
  return k(() => e.data, () => {
    o.value = e.data;
  }), k(() => e.enumData, () => {
    o.value = e.enumData;
  }), {
    enumData: o,
    getValue: c,
    getText: s,
    checked: v,
    onClickCheckbox: m
  };
}
const A = /* @__PURE__ */ T({
  name: "FCheckboxGroup",
  props: G,
  emits: ["changeValue", "update:modelValue"],
  setup(e, l) {
    const {
      guid: u
    } = S(), b = `checkbox_${u().slice(0, 8)}`, o = d(e.modelValue), c = d(e.tabIndex), s = d(e.name || b), {
      enumData: f,
      onClickCheckbox: g,
      getValue: v,
      getText: m,
      checked: a
    } = p(e, l, o), i = y(() => ({
      "farris-checkradio-hor": e.direction === "horizontal"
    }));
    k(() => e.modelValue, (t) => {
      o.value = t;
    });
    const n = d([]);
    return B(D, {
      values: n,
      parentProps: e,
      parentContext: l
    }), () => h("div", {
      class: ["farris-input-wrap", "f-checkbox-group", i.value]
    }, [l.slots.default ? l.slots.default() : f.value.map((t, r) => {
      const x = "checkbox_" + s.value + r;
      return h("div", {
        class: "custom-control custom-checkbox"
      }, [h("input", {
        type: "checkbox",
        class: "custom-control-input",
        name: s.value,
        id: x,
        value: v(t),
        checked: a(t),
        disabled: e.readonly || e.disabled,
        tabindex: c.value,
        onClick: (C) => g(t, C)
      }, null), h("label", {
        class: "custom-control-label",
        for: x,
        title: m(t)
      }, [m(t)])]);
    })]);
  }
}), N = F(A);
export {
  A as FCheckboxGroup,
  G as checkboxGroupProps,
  N as default
};