@dialpad/dialtone/dist/vue3/components/toggle/toggle.vue.cjs

Dialpad's Dialtone design system monorepo

"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const vue = require("vue");
const common_utils = require("../../common/utils.cjs");
const toggle_constants = require("./toggle_constants.cjs");
const _pluginVue_exportHelper = require("../../_virtual/_plugin-vue_export-helper.cjs");
const _sfc_main = {
  compatConfig: { MODE: 3 },
  name: "DtToggle",
  inheritAttrs: false,
  model: {
    prop: "checked",
    event: "change"
  },
  props: {
    /**
     * The id of the toggle
     */
    id: {
      type: String,
      default() {
        return common_utils.getUniqueString();
      }
    },
    /**
     * Disables the toggle interactions
     * @values true, false
     */
    disabled: {
      type: Boolean,
      default: false
    },
    /**
     * Value of the toggle
     * @model checked
     * @values true, false, 'mixed'
     */
    checked: {
      type: [Boolean, String],
      default: false,
      validator: (v) => toggle_constants.TOGGLE_CHECKED_VALUES.includes(v)
    },
    /**
     * 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: true
    },
    /**
     * The size of the toggle.
     * @values sm, md
     */
    size: {
      type: String,
      default: "md",
      validator: (s) => Object.keys(toggle_constants.TOGGLE_SIZE_MODIFIERS).includes(s)
    },
    /**
     * Shows the icon
     * @values true, false
     */
    showIcon: {
      type: Boolean,
      default: true
    },
    /**
     * 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,
      hasSlotContent: common_utils.hasSlotContent
    };
  },
  computed: {
    inputListeners() {
      return {
        ...common_utils.removeClassStyleAttrs(this.$attrs),
        onClick: (_) => this.toggleCheckedValue()
      };
    },
    isIndeterminate() {
      return this.internalChecked === "mixed";
    },
    toggleRole() {
      return this.isIndeterminate ? "checkbox" : "switch";
    },
    toggleClasses() {
      return [
        "d-toggle",
        toggle_constants.TOGGLE_SIZE_MODIFIERS[this.size],
        {
          "d-toggle--checked": this.internalChecked === true,
          "d-toggle--disabled": this.disabled,
          "d-toggle--indeterminate": this.isIndeterminate
        }
      ];
    }
  },
  watch: {
    checked(newChecked) {
      this.internalChecked = newChecked;
    }
  },
  mounted() {
    this.runValidations();
  },
  methods: {
    addClassStyleAttrs: common_utils.addClassStyleAttrs,
    toggleCheckedValue() {
      this.$emit("change", !this.internalChecked);
      if (this.toggleOnClick) {
        this.internalChecked = !this.internalChecked;
      }
    },
    hasSlotLabel() {
      return !!this.$slots.default;
    },
    runValidations() {
      this.validateInputLabels(this.hasSlotLabel(), this.$attrs["aria-label"]);
    },
    validateInputLabels(hasLabel, ariaLabel) {
      if (!hasLabel && !ariaLabel) {
        vue.warn(
          "You must provide an aria-label when there is no label passed",
          this
        );
      }
    }
  }
};
const _hoisted_1 = ["for"];
const _hoisted_2 = ["id", "role", "aria-checked", "disabled", "aria-disabled"];
const _hoisted_3 = {
  key: 0,
  class: "d-toggle__inner"
};
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  return vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({ class: "d-toggle-wrapper" }, $options.addClassStyleAttrs(_ctx.$attrs)), [
    $data.hasSlotContent(_ctx.$slots.default) ? (vue.openBlock(), vue.createElementBlock("label", vue.mergeProps({
      key: 0,
      class: $props.labelClass,
      for: $props.id
    }, $props.labelChildProps, { "data-qa": "toggle-label" }), [
      vue.renderSlot(_ctx.$slots, "default")
    ], 16, _hoisted_1)) : vue.createCommentVNode("", true),
    vue.createElementVNode("button", vue.mergeProps({
      id: $props.id,
      role: $options.toggleRole,
      type: "button",
      "aria-checked": $data.internalChecked.toString(),
      disabled: $props.disabled,
      "aria-disabled": $props.disabled.toString(),
      class: $options.toggleClasses
    }, $options.inputListeners), [
      $props.showIcon ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3)) : vue.createCommentVNode("", true)
    ], 16, _hoisted_2)
  ], 16);
}
const toggle = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["render", _sfc_render]]);
exports.default = toggle;
//# sourceMappingURL=toggle.vue.cjs.map