@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 { addClassStyleAttrs as f, removeClassStyleAttrs as g } from "../../common/utils/index.js";
import { CHECKBOX_INPUT_VALIDATION_CLASSES as C } from "./checkbox-constants.js";
import { resolveComponent as v, createElementBlock as i, openBlock as l, normalizeProps as V, guardReactiveProps as M, createElementVNode as n, createCommentVNode as r, normalizeClass as y, mergeProps as o, toHandlers as S, renderSlot as d, createTextVNode as c, toDisplayString as h, 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: g,
    addClassStyleAttrs: f,
    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 l(), i("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 ? (l(), i("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 ? (l(), i("div", P, [
      e.$slots.description || e.description ? (l(), i("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