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

Farris Vue, a Farris Design based Vue3 component library.

import { CHECKBOX_CONTEXT as C, useCheck as k, getCustomClass as E, withInstall as P } from "../common/index.esm.js";
import { defineComponent as v, inject as h, createVNode as o, ref as p, computed as b, toRef as z, onMounted as R, Fragment as j, mergeProps as w } from "vue";
const y = {
  /**
   * 组件标识
   * @default ''
   */
  id: { Type: String, default: "" },
  /**
   * 自定义样式
   */
  customClass: { Type: String, default: "" },
  /**
   * 禁用状态
   */
  disabled: { Type: Boolean, default: !1 },
  /**
   * 功能同disabled
   */
  readonly: { type: Boolean, default: !1 },
  /**
   * 中间状态
   */
  indeterminate: { Type: Boolean, default: !1 },
  /**
   * 组件值，字符串或者数组
   */
  modelValue: { Type: Boolean, default: !1 },
  /**
   * 作为内嵌编辑器被创建后默认获得焦点
   */
  focusOnCreated: { type: Boolean, default: !1 },
  /**
   * 选中的值 value与modelValue重合 TODO
   */
  value: { type: String, default: "" },
  /**
   * 组件名称,用以区分同时引用多个组件的情况
   * @default ''
   */
  name: { type: String, default: "" },
  /**
   * 标识是否被选中
   */
  checked: { type: Boolean, default: !1 },
  /**
   * 显示文本标签
   */
  label: { type: String, default: "" },
  trueValue: { type: [String, Number, Boolean], default: !0 },
  falseValue: { type: [String, Number, Boolean], default: !1 },
  /**
   * 指定checkbox尺寸（px），留空时跟随父级字体大小
   */
  size: { type: Number, default: void 0 }
}, x = /* @__PURE__ */ v({
  name: "FCheckboxButton",
  props: y,
  emits: ["change", "changeValue", "update:modelValue", "update:checked", "click"],
  setup(e, n) {
    const t = h(C, null), {
      buttonClass: l
    } = k(e, n, t == null ? void 0 : t.parentProps, t == null ? void 0 : t.parentContext), c = (u) => {
      u.stopPropagation(), n.emit("click", u);
    };
    return () => {
      var u, s;
      return o("div", {
        class: l.value,
        style: "border-radius:0;border: 1px solid #E8EBF2;",
        onClick: c
      }, [(s = (u = n.slots).default) == null ? void 0 : s.call(u)]);
    };
  }
}), X = /* @__PURE__ */ v({
  name: "FCheckbox",
  props: y,
  emits: ["change", "changeValue", "update:modelValue", "update:checked"],
  setup(e, n) {
    const t = p(), l = h(C, null), {
      checked: c,
      disabled: u,
      indeterminate: s,
      name: g,
      onClickCheckBox: d,
      shouldRenderButton: S,
      shouldRenderNative: B
    } = k(e, n, l == null ? void 0 : l.parentProps, l == null ? void 0 : l.parentContext), V = p(e.id), F = b(() => ({
      fontSize: e.size ? `${e.size}px` : void 0
    })), T = z(e, "label");
    function i() {
      var a;
      e.focusOnCreated && ((a = t.value) == null || a.focus({
        preventScroll: !0
      }));
    }
    const N = b(() => E({
      "custom-control": !0,
      "custom-checkbox": !0
    }, e.customClass));
    function O(a) {
      d(a), i();
    }
    return R(() => {
      i();
    }), () => {
      var a, r;
      return o(j, null, [
        S.value && o(x, w(e, {
          onClick: d
        }), {
          default: () => {
            var f, m;
            return [(m = (f = n.slots).default) == null ? void 0 : m.call(f)];
          }
        }),
        B.value && o("div", {
          class: N.value,
          onClick: O,
          style: F.value
        }, [o("input", {
          ref: t,
          id: V,
          title: "checkbox-input",
          type: "checkbox",
          class: "custom-control-input",
          checked: c.value,
          disabled: u.value,
          indeterminate: s.value,
          name: g.value,
          value: e.value
        }, null), o("div", {
          class: "custom-control-label"
        }, [T.value || ((r = (a = n.slots).default) == null ? void 0 : r.call(a))])])
      ]);
    };
  }
}), K = P(X);
export {
  X as FCheckbox,
  y as checkboxProps,
  K as default
};