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

Farris Vue, a Farris Design based Vue3 component library.

import { CHECKBOX_CONTEXT as C, useCheck as v, getCustomClass as N, withInstall as P } from "../common/index.esm.js";
import { defineComponent as h, inject as y, createVNode as o, ref as d, computed as k, onMounted as j, Fragment as R, mergeProps as w } from "vue";
const g = {
  /** 组件唯一标识 */
  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: "" },
  /** name值 */
  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 }
}, X = /* @__PURE__ */ h({
  name: "FCheckboxButton",
  props: g,
  emits: ["change", "changeValue", "update:modelValue", "update:checked", "click"],
  setup(e, n) {
    const l = y(C, null), {
      buttonClass: t
    } = v(e, n, l == null ? void 0 : l.parentProps, l == null ? void 0 : l.parentContext), c = (u) => {
      u.stopPropagation(), n.emit("click", u);
    };
    return () => {
      var u, s;
      return o("div", {
        class: t.value,
        style: "border-radius:0;border: 1px solid #E8EBF2;",
        onClick: c
      }, [(s = (u = n.slots).default) == null ? void 0 : s.call(u)]);
    };
  }
}), x = /* @__PURE__ */ h({
  name: "FCheckbox",
  props: g,
  emits: ["change", "changeValue", "update:modelValue", "update:checked"],
  setup(e, n) {
    const l = d(), t = y(C, null), {
      checked: c,
      disabled: u,
      indeterminate: s,
      name: B,
      onClickCheckBox: r,
      shouldRenderButton: S,
      shouldRenderNative: V
    } = v(e, n, t == null ? void 0 : t.parentProps, t == null ? void 0 : t.parentContext), F = d(e.id), T = k(() => ({
      display: "inline-block"
    })), i = d(e.label);
    function f() {
      var a;
      e.focusOnCreated && ((a = l.value) == null || a.focus({
        preventScroll: !0
      }));
    }
    const O = k(() => N({
      "custom-control": !0,
      "custom-checkbox": !0
    }, e.customClass));
    function E(a) {
      r(a), f();
    }
    return j(() => {
      f();
    }), () => {
      var a, p;
      return o(R, null, [
        S.value && o(X, w(e, {
          onClick: r
        }), {
          default: () => {
            var m, b;
            return [(b = (m = n.slots).default) == null ? void 0 : b.call(m)];
          }
        }),
        V.value && o("div", {
          class: O.value,
          onClick: E,
          style: T.value
        }, [o("input", {
          ref: l,
          id: F,
          title: "checkbox-input",
          type: "checkbox",
          class: "custom-control-input",
          checked: c.value,
          disabled: u.value,
          indeterminate: s.value,
          name: B.value,
          value: e.value
        }, null), o("div", {
          class: "custom-control-label"
        }, [i.value ? i.value : (p = (a = n.slots).default) == null ? void 0 : p.call(a)])])
      ]);
    };
  }
}), K = P(x);
export {
  x as FCheckbox,
  g as checkboxProps,
  K as default
};