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

Farris Vue, a Farris Design based Vue3 component library.

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