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

Dialpad's Dialtone design system monorepo

import { createElementBlock as l, openBlock as s, mergeProps as i, createCommentVNode as n, createElementVNode as h, renderSlot as c, warn as u } from "vue";
import { addClassStyleAttrs as g, removeClassStyleAttrs as m, hasSlotContent as C, getUniqueString as f } from "../../common/utils/index.js";
import { TOGGLE_CHECKED_VALUES as b, TOGGLE_SIZE_MODIFIERS as o } from "./toggle-constants.js";
import { _ as k } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
const p = {
  compatConfig: { MODE: 3 },
  name: "DtToggle",
  inheritAttrs: !1,
  props: {
    /**
     * The id of the toggle
     */
    id: {
      type: String,
      default() {
        return f();
      }
    },
    /**
     * Disables the toggle interactions
     * @values true, false
     */
    disabled: {
      type: Boolean,
      default: !1
    },
    /**
     * Value of the toggle
     * @model modelValue
     * @values true, false, 'mixed'
     */
    modelValue: {
      type: [Boolean, String],
      default: !1,
      validator: (e) => b.includes(e)
    },
    /**
     * 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: (e) => Object.keys(o).includes(e)
    },
    /**
     * Shows the icon
     * @values true, false
     */
    showIcon: {
      type: Boolean,
      default: !0
    },
    /**
     * Used to customize the label container
     */
    labelClass: {
      type: [String, Array, Object],
      default: ""
    },
    /**
     * Additional styling for the wrapper element
     */
    wrapperClass: {
      type: [String, Array, Object],
      default: void 0
    },
    /**
     * 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",
    /**
     * v-model event event
     *
     * @event change
     * @type {Boolean}
     * @model change
     */
    "update:modelValue"
  ],
  data() {
    return {
      internalChecked: this.modelValue,
      hasSlotContent: C
    };
  },
  computed: {
    inputListeners() {
      return {
        ...m(this.$attrs),
        onClick: () => this.toggleCheckedValue()
      };
    },
    isIndeterminate() {
      return this.internalChecked === "mixed";
    },
    toggleRole() {
      return this.isIndeterminate ? "checkbox" : "switch";
    },
    toggleClasses() {
      return [
        "d-toggle",
        o[this.size],
        {
          "d-toggle--checked": this.internalChecked === !0,
          "d-toggle--disabled": this.disabled,
          "d-toggle--indeterminate": this.isIndeterminate
        }
      ];
    }
  },
  watch: {
    modelValue(e) {
      this.internalChecked = e;
    }
  },
  mounted() {
    this.runValidations();
  },
  methods: {
    addClassStyleAttrs: g,
    toggleCheckedValue() {
      this.$emit("change", !this.internalChecked), this.$emit("update:modelValue", !this.internalChecked), this.toggleOnClick && (this.internalChecked = !this.internalChecked);
    },
    hasSlotLabel() {
      return !!this.$slots.default;
    },
    runValidations() {
      this.validateInputLabels(this.hasSlotLabel(), this.$attrs["aria-label"]);
    },
    validateInputLabels(e, d) {
      !e && !d && u(
        "You must provide an aria-label when there is no label passed",
        this
      );
    }
  }
}, S = ["for"], y = ["id", "role", "aria-checked", "disabled", "aria-disabled"], _ = {
  key: 0,
  class: "d-toggle__inner"
};
function V(e, d, t, E, r, a) {
  return s(), l("div", i({
    class: ["d-toggle-wrapper", t.wrapperClass]
  }, a.addClassStyleAttrs(e.$attrs)), [
    r.hasSlotContent(e.$slots.default) ? (s(), l("label", i({
      key: 0,
      class: t.labelClass,
      for: t.id
    }, t.labelChildProps, { "data-qa": "toggle-label" }), [
      c(e.$slots, "default")
    ], 16, S)) : n("", !0),
    h("button", i({
      id: t.id,
      role: a.toggleRole,
      type: "button",
      "aria-checked": r.internalChecked.toString(),
      disabled: t.disabled,
      "aria-disabled": t.disabled.toString(),
      class: a.toggleClasses
    }, a.inputListeners), [
      t.showIcon ? (s(), l("span", _)) : n("", !0)
    ], 16, y)
  ], 16);
}
const v = /* @__PURE__ */ k(p, [["render", V]]);
export {
  v as default
};
//# sourceMappingURL=toggle.js.map