@dialpad/dialtone/dist/vue3/lib/checkbox/checkbox.js

Dialpad's Dialtone design system monorepo

import { InputMixin as m, CheckableMixin as p, GroupableMixin as b, MessagesMixin as k } from "../../common/mixins/input.js";
import { removeClassStyleAttrs as f, addClassStyleAttrs as g } from "../../common/utils/index.js";
import { CHECKBOX_INPUT_VALIDATION_CLASSES as C } from "./checkbox-constants.js";
import { resolveComponent as v, openBlock as i, createElementBlock as l, normalizeProps as V, guardReactiveProps as M, createElementVNode as n, normalizeClass as y, mergeProps as o, toHandlers as S, renderSlot as d, createTextVNode as c, toDisplayString as h, createCommentVNode as r, createVNode as $ } from "vue";
import { _ as A } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
import D from "../validation-messages/validation-messages.js";
const I = {
  compatConfig: { MODE: 3 },
  name: "DtCheckbox",
  components: { DtValidationMessages: D },
  mixins: [m, p, b, k],
  inheritAttrs: !1,
  emits: [
    /**
     * Native input event
     *
     * @event input
     * @type {Boolean}
     */
    "input",
    /**
     * Event fired to sync the modelValue prop with the parent component
     *
     * @event update:modelValue
     * @type {Boolean}
     */
    "update:modelValue",
    /**
     * Native input focusin event
     *
     * @event focusin
     * @type {FocusEvent}
     */
    "focusin",
    /**
     * Native input focusout event
     *
     * @event focusout
     * @type {FocusEvent}
     */
    "focusout"
  ],
  computed: {
    inputValidationClass() {
      return C[this.internalValidationState];
    },
    checkboxGroupValueChecked() {
      var e, a;
      return ((a = (e = this.groupContext) == null ? void 0 : e.selectedValues) == null ? void 0 : a.includes(this.value)) ?? !1;
    },
    hasLabel() {
      return !!(this.$slots.default || this.label);
    },
    hasMessages() {
      return this.formattedMessages.length && this.showMessages;
    },
    inputListeners() {
      return {
        /*
         * Override input listener to as no-op. Prevents parent input listeners from being passed through
         * onto the input element which will result in the handler being called twice
         * (once on the input element and once by the emitted input event by the change listener).
        */
        input: () => {
        },
        focusin: (e) => this.$emit("focusin", e),
        focusout: (e) => this.$emit("focusout", e),
        change: (e) => this.emitValue(e.target)
      };
    }
  },
  watch: {
    checkboxGroupValueChecked: {
      immediate: !0,
      handler(e) {
        this.hasGroup && (this.internalChecked = e);
      }
    }
  },
  mounted() {
    this.runValidations();
  },
  methods: {
    removeClassStyleAttrs: f,
    addClassStyleAttrs: g,
    emitValue(e) {
      let { value: a, checked: t } = e;
      this.internalIndeterminate && (t = !1, this.internalIndeterminate = !1, e.checked = !1), this.setGroupValue(a, t), this.$emit("input", t), this.$emit("update:modelValue", t);
    },
    runValidations() {
      this.validateInputLabels(this.hasLabel, this.$attrs["aria-label"]);
    }
  }
}, L = { class: "d-checkbox__input" }, N = ["checked", "name", "value", "disabled", ".indeterminate"], P = {
  key: 0,
  class: "d-checkbox__messages",
  "data-qa": "checkbox-description-messages"
};
function w(e, a, t, E, G, s) {
  const u = v("dt-validation-messages");
  return i(), l("div", V(M(s.addClassStyleAttrs(e.$attrs))), [
    n("label", {
      class: y(["d-checkbox-group", { "d-checkbox-group--disabled": e.internalDisabled }])
    }, [
      n("div", L, [
        n("input", o({
          type: "checkbox",
          checked: e.internalChecked,
          name: e.internalName,
          value: e.value,
          disabled: e.internalDisabled,
          class: ["d-checkbox", s.inputValidationClass, e.inputClass]
        }, s.removeClassStyleAttrs(e.$attrs), { ".indeterminate": e.internalIndeterminate }, S(s.inputListeners, !0)), null, 48, N)
      ]),
      s.hasLabel ? (i(), l("div", o({
        key: 0,
        class: [e.labelClass, "d-checkbox__copy d-checkbox__label"]
      }, e.labelChildProps, { "data-qa": "checkbox-label" }), [
        d(e.$slots, "default", {}, () => [
          c(h(e.label), 1)
        ])
      ], 16)) : r("", !0)
    ], 2),
    e.$slots.description || e.description || s.hasMessages ? (i(), l("div", P, [
      e.$slots.description || e.description ? (i(), l("div", o({
        key: 0,
        class: ["d-description", e.descriptionClass]
      }, e.descriptionChildProps, { "data-qa": "checkbox-description" }), [
        d(e.$slots, "description", {}, () => [
          c(h(e.description), 1)
        ])
      ], 16)) : r("", !0),
      $(u, o({
        "validation-messages": e.formattedMessages,
        "show-messages": e.showMessages,
        class: e.messagesClass
      }, e.messagesChildProps, { "data-qa": "dt-checkbox-validation-messages" }), null, 16, ["validation-messages", "show-messages", "class"])
    ])) : r("", !0)
  ], 16);
}
const H = /* @__PURE__ */ A(I, [["render", w]]);
export {
  H as default
};
//# sourceMappingURL=checkbox.js.map