@dialpad/dialtone/dist/vue3/lib/toggle/toggle.cjs.map

Dialpad's Dialtone design system monorepo

{"version":3,"file":"toggle.cjs","sources":["../../../components/toggle/toggle.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"['d-toggle-wrapper', wrapperClass]\"\n    v-bind=\"addClassStyleAttrs($attrs)\"\n  >\n    <label\n      v-if=\"hasSlotContent($slots.default)\"\n      :class=\"labelClass\"\n      :for=\"id\"\n      v-bind=\"labelChildProps\"\n      data-qa=\"toggle-label\"\n    >\n      <!-- @slot Slot for the main content -->\n      <slot />\n    </label>\n    <button\n      :id=\"id\"\n      :role=\"toggleRole\"\n      type=\"button\"\n      :aria-checked=\"internalChecked.toString()\"\n      :disabled=\"disabled\"\n      :aria-disabled=\"disabled.toString()\"\n      :class=\"toggleClasses\"\n      v-bind=\"inputListeners\"\n    >\n      <span\n        v-if=\"showIcon\"\n        class=\"d-toggle__inner\"\n      />\n    </button>\n  </div>\n</template>\n\n<script>\nimport { warn } from 'vue';\nimport { getUniqueString, hasSlotContent, removeClassStyleAttrs, addClassStyleAttrs } from '@/common/utils';\nimport { TOGGLE_CHECKED_VALUES, TOGGLE_SIZE_MODIFIERS } from '@/components/toggle/toggle_constants';\n\n/**\n * A toggle (or \"switch\") is a button control element that allows the user to make a binary (on/off) selection.\n * @see https://dialtone.dialpad.com/components/toggle.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n\n  name: 'DtToggle',\n\n  inheritAttrs: false,\n\n  props: {\n\n    /**\n     * The id of the toggle\n     */\n    id: {\n      type: String,\n      default () { return getUniqueString(); },\n    },\n\n    /**\n     * Disables the toggle interactions\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Value of the toggle\n     * @model modelValue\n     * @values true, false, 'mixed'\n     */\n    modelValue: {\n      type: [Boolean, String],\n      default: false,\n      validator: (v) => TOGGLE_CHECKED_VALUES.includes(v),\n    },\n\n    /**\n     * Whether the component toggles on click. If you set this to false it means you will handle the toggling manually\n     * via the checked prop or v-model. Change events will still be triggered.\n     * @values true, false\n     */\n    toggleOnClick: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * The size of the toggle.\n     * @values sm, md\n     */\n    size: {\n      type: String,\n      default: 'md',\n      validator: (s) => Object.keys(TOGGLE_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * Shows the icon\n     * @values true, false\n     */\n    showIcon: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Used to customize the label container\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional styling for the wrapper element\n     */\n    wrapperClass: {\n      type: [String, Array, Object],\n      default: undefined,\n    },\n\n    /**\n     * A set of props that are passed into the label container\n     */\n    labelChildProps: {\n      type: Object,\n      default: () => ({}),\n    },\n  },\n\n  emits: [\n    /**\n     * Toggle change event\n     *\n     * @event change\n     * @type {Boolean}\n     * @model change\n     */\n    'change',\n\n    /**\n     * v-model event event\n     *\n     * @event change\n     * @type {Boolean}\n     * @model change\n     */\n    'update:modelValue',\n  ],\n\n  data () {\n    return {\n      internalChecked: this.modelValue,\n      hasSlotContent,\n    };\n  },\n\n  computed: {\n    inputListeners () {\n      return {\n        ...removeClassStyleAttrs(this.$attrs),\n        onClick: () => this.toggleCheckedValue(),\n      };\n    },\n\n    isIndeterminate () {\n      return this.internalChecked === 'mixed';\n    },\n\n    toggleRole () {\n      return this.isIndeterminate ? 'checkbox' : 'switch';\n    },\n\n    toggleClasses () {\n      return [\n        'd-toggle',\n        TOGGLE_SIZE_MODIFIERS[this.size],\n        {\n          'd-toggle--checked': this.internalChecked === true,\n          'd-toggle--disabled': this.disabled,\n          'd-toggle--indeterminate': this.isIndeterminate,\n        },\n      ];\n    },\n  },\n\n  watch: {\n    modelValue (newChecked) {\n      this.internalChecked = newChecked;\n    },\n  },\n\n  mounted () {\n    this.runValidations();\n  },\n\n  methods: {\n    addClassStyleAttrs,\n    toggleCheckedValue () {\n      this.$emit('change', !this.internalChecked);\n      this.$emit('update:modelValue', !this.internalChecked);\n\n      if (this.toggleOnClick) {\n        this.internalChecked = !this.internalChecked;\n      }\n    },\n\n    hasSlotLabel () {\n      return !!(this.$slots.default);\n    },\n\n    runValidations () {\n      this.validateInputLabels(this.hasSlotLabel(), this.$attrs['aria-label']);\n    },\n\n    validateInputLabels (hasLabel, ariaLabel) {\n      if (!hasLabel && !ariaLabel) {\n        warn(\n          'You must provide an aria-label when there is no label passed',\n          this,\n        );\n      }\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","getUniqueString","v","TOGGLE_CHECKED_VALUES","s","TOGGLE_SIZE_MODIFIERS","hasSlotContent","removeClassStyleAttrs","newChecked","addClassStyleAttrs","hasLabel","ariaLabel","warn","_hoisted_1","_hoisted_2","_openBlock","_createElementBlock","_mergeProps","$props","$options","_ctx","$data","_renderSlot","_createCommentVNode","_createElementVNode","_hoisted_3"],"mappings":"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"}