@dialpad/dialtone-vue/dist/lib/checkbox/checkbox.js

Vue component library for Dialpad's design system Dialtone

import { InputMixin as a, CheckableMixin as i, GroupableMixin as n, MessagesMixin as l } from "../../common/mixins/input.js";
import { CHECKBOX_INPUT_VALIDATION_CLASSES as r } from "./checkbox-constants.js";
import { n as o } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
import c from "../validation-messages/validation-messages.js";
const d = {
  name: "DtCheckbox",
  components: { DtValidationMessages: c },
  mixins: [a, i, n, l],
  inheritAttrs: !1,
  emits: [
    /**
     * Native input event
     *
     * @event input
     * @type {Boolean}
     */
    "input",
    /**
     * Native input focusin event
     *
     * @event focusin
     * @type {FocusEvent}
     */
    "focusin",
    /**
     * Native input focusout event
     *
     * @event focusout
     * @type {FocusEvent}
     */
    "focusout"
  ],
  computed: {
    inputValidationClass() {
      return r[this.internalValidationState];
    },
    checkboxGroupValueChecked() {
      var t, e;
      return ((e = (t = this.groupContext) == null ? void 0 : t.selectedValues) == null ? void 0 : e.includes(this.value)) ?? !1;
    },
    hasLabel() {
      return !!(this.$slots.default || this.label);
    },
    hasMessages() {
      return this.formattedMessages.length && this.showMessages;
    },
    inputListeners() {
      return {
        /* TODO
            Check if any usages of this component leverage $listeners and either remove if unused or scope the removal
            and migration prior to upgrading to Vue 3.x
        */
        ...this.$listeners,
        /*
         * 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: () => {
        },
        change: (t) => this.emitValue(t.target)
      };
    }
  },
  watch: {
    checkboxGroupValueChecked: {
      immediate: !0,
      handler(t) {
        this.hasGroup && (this.internalChecked = t);
      }
    }
  },
  mounted() {
    this.runValidations();
  },
  methods: {
    emitValue(t) {
      let { value: e, checked: s } = t;
      this.internalIndeterminate && (s = !1, this.internalIndeterminate = !1, t.checked = !1), this.setGroupValue(e, s), this.$emit("input", s);
    },
    runValidations() {
      this.validateInputLabels(this.hasLabel, this.$attrs["aria-label"]);
    }
  }
};
var h = function() {
  var e = this, s = e._self._c;
  return s("div", [s("label", { class: ["d-checkbox-group", { "d-checkbox-group--disabled": e.internalDisabled }] }, [s("div", { staticClass: "d-checkbox__input" }, [s("input", e._g(e._b({ class: ["d-checkbox", e.inputValidationClass, e.inputClass], attrs: { type: "checkbox", name: e.internalName, disabled: e.internalDisabled }, domProps: { checked: e.internalChecked, value: e.value, indeterminate: e.internalIndeterminate } }, "input", e.$attrs, !1), e.inputListeners))]), e.hasLabel ? s("div", e._b({ class: [e.labelClass, "d-checkbox__copy d-checkbox__label"], attrs: { "data-qa": "checkbox-label" } }, "div", e.labelChildProps, !1), [e._t("default", function() {
    return [e._v(e._s(e.label))];
  })], 2) : e._e()]), e.$slots.description || e.description || e.hasMessages ? s("div", { staticClass: "d-checkbox__messages", attrs: { "data-qa": "checkbox-description-messages" } }, [e.$slots.description || e.description ? s("div", e._b({ class: ["d-description", e.descriptionClass], attrs: { "data-qa": "checkbox-description" } }, "div", e.descriptionChildProps, !1), [e._t("description", function() {
    return [e._v(" " + e._s(e.description) + " ")];
  })], 2) : e._e(), s("dt-validation-messages", e._b({ class: e.messagesClass, attrs: { "validation-messages": e.formattedMessages, "show-messages": e.showMessages, "data-qa": "dt-checkbox-validation-messages" } }, "dt-validation-messages", e.messagesChildProps, !1))], 1) : e._e()]);
}, u = [], p = /* @__PURE__ */ o(
  d,
  h,
  u
);
const k = p.exports;
export {
  k as default
};
//# sourceMappingURL=checkbox.js.map