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

Vue component library for Dialpad's design system Dialtone

import s from "vue";
import i from "../../common/utils/index.js";
import { TOGGLE_CHECKED_VALUES as n, TOGGLE_SIZE_MODIFIERS as l } from "./toggle-constants.js";
import { n as r } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
const d = {
  name: "DtToggle",
  inheritAttrs: !1,
  model: {
    prop: "checked",
    event: "change"
  },
  props: {
    /**
     * The id of the toggle
     */
    id: {
      type: String,
      default() {
        return i.getUniqueString();
      }
    },
    /**
     * Disables the toggle interactions
     * @values true, false
     */
    disabled: {
      type: Boolean,
      default: !1
    },
    /**
     * Value of the toggle
     * @model checked
     * @values true, false, 'mixed'
     */
    checked: {
      type: [Boolean, String],
      default: !1,
      validator: (t) => n.includes(t)
    },
    /**
     * Whether the component toggles on click. If you set this to false it means you will handle the toggling manually
     * via the checked prop or v-model. Change events will still be triggered.
     * @values true, false
     */
    toggleOnClick: {
      type: Boolean,
      default: !0
    },
    /**
     * The size of the toggle.
     * @values sm, md
     */
    size: {
      type: String,
      default: "md",
      validator: (t) => Object.keys(l).includes(t)
    },
    /**
     * Shows the icon
     * @values true, false
     */
    showIcon: {
      type: Boolean,
      default: !0
    },
    /**
     * Used to customize the label container
     */
    labelClass: {
      type: [String, Array, Object],
      default: ""
    },
    /**
     * A set of props that are passed into the label container
     */
    labelChildProps: {
      type: Object,
      default: () => ({})
    }
  },
  emits: [
    /**
     * Toggle change event
     *
     * @event change
     * @type {Boolean}
     * @model change
     */
    "change"
  ],
  data() {
    return {
      internalChecked: this.checked
    };
  },
  computed: {
    inputListeners() {
      return {
        ...this.$listeners,
        click: () => this.toggleCheckedValue()
      };
    },
    isIndeterminate() {
      return this.internalChecked === "mixed";
    },
    toggleRole() {
      return this.isIndeterminate ? "checkbox" : "switch";
    },
    toggleClasses() {
      return [
        "d-toggle",
        l[this.size],
        {
          "d-toggle--checked": this.internalChecked === !0,
          "d-toggle--disabled": this.disabled,
          "d-toggle--indeterminate": this.isIndeterminate
        }
      ];
    }
  },
  watch: {
    checked(t) {
      this.internalChecked = t;
    }
  },
  mounted() {
    this.runValidations();
  },
  methods: {
    toggleCheckedValue() {
      this.$emit("change", !this.internalChecked), this.toggleOnClick && (this.internalChecked = !this.internalChecked);
    },
    hasSlotLabel() {
      return !!this.$slots.default;
    },
    runValidations() {
      this.validateInputLabels(this.hasSlotLabel(), this.$attrs["aria-label"]);
    },
    validateInputLabels(t, e) {
      !t && !e && s.util.warn(
        "You must provide an aria-label when there is no label passed",
        this
      );
    }
  }
};
var o = function() {
  var e = this, a = e._self._c;
  return a("div", { staticClass: "d-toggle-wrapper" }, [e.$slots.default ? a("label", e._b({ class: e.labelClass, attrs: { for: e.id, "data-qa": "toggle-label" } }, "label", e.labelChildProps, !1), [e._t("default")], 2) : e._e(), a("button", e._g(e._b({ class: e.toggleClasses, attrs: { id: e.id, role: e.toggleRole, type: "button", "aria-checked": e.internalChecked.toString(), disabled: e.disabled, "aria-disabled": e.disabled.toString() } }, "button", e.$attrs, !1), e.inputListeners), [e.showIcon ? a("span", { staticClass: "d-toggle__inner" }) : e._e()])]);
}, c = [], h = /* @__PURE__ */ r(
  d,
  o,
  c
);
const f = h.exports;
export {
  f as default
};
//# sourceMappingURL=toggle.js.map