@dialpad/dialtone-vue/dist/lib/toggle/toggle.cjs.map

Vue component library for Dialpad's design system Dialtone

{"version":3,"file":"toggle.cjs","sources":["../../../components/toggle/toggle.vue"],"sourcesContent":["<template>\n  <div class=\"d-toggle-wrapper\">\n    <label\n      v-if=\"$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=\"$attrs\"\n      v-on=\"inputListeners\"\n    >\n      <span\n        v-if=\"showIcon\"\n        class=\"d-toggle__inner\"\n      />\n    </button>\n  </div>\n</template>\n\n<script>\nimport Vue from 'vue';\nimport utils 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\n  name: 'DtToggle',\n\n  inheritAttrs: false,\n\n  model: {\n    prop: 'checked',\n    event: 'change',\n  },\n\n  props: {\n\n    /**\n     * The id of the toggle\n     */\n    id: {\n      type: String,\n      default () { return utils.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 checked\n     * @values true, false, 'mixed'\n     */\n    checked: {\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     * 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  data () {\n    return {\n      internalChecked: this.checked,\n    };\n  },\n\n  computed: {\n    inputListeners () {\n      return {\n        ...this.$listeners,\n        click: () => 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    checked (newChecked) {\n      this.internalChecked = newChecked;\n    },\n  },\n\n  mounted () {\n    this.runValidations();\n  },\n\n  methods: {\n    toggleCheckedValue () {\n      this.$emit('change', !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        Vue.util.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","utils","v","TOGGLE_CHECKED_VALUES","s","TOGGLE_SIZE_MODIFIERS","newChecked","hasLabel","ariaLabel","Vue"],"mappings":"yQAwCAA,EAAA,CAEA,KAAA,WAEA,aAAA,GAEA,MAAA,CACA,KAAA,UACA,MAAA,QACA,EAEA,MAAA,CAKA,GAAA,CACA,KAAA,OACA,SAAA,CAAA,OAAAC,EAAAA,QAAA,gBAAA,CAAA,CACA,EAMA,SAAA,CACA,KAAA,QACA,QAAA,EACA,EAOA,QAAA,CACA,KAAA,CAAA,QAAA,MAAA,EACA,QAAA,GACA,UAAAC,GAAAC,wBAAA,SAAAD,CAAA,CACA,EAOA,cAAA,CACA,KAAA,QACA,QAAA,EACA,EAMA,KAAA,CACA,KAAA,OACA,QAAA,KACA,UAAAE,GAAA,OAAA,KAAAC,uBAAA,EAAA,SAAAD,CAAA,CACA,EAMA,SAAA,CACA,KAAA,QACA,QAAA,EACA,EAKA,WAAA,CACA,KAAA,CAAA,OAAA,MAAA,MAAA,EACA,QAAA,EACA,EAKA,gBAAA,CACA,KAAA,OACA,QAAA,KAAA,CAAA,EACA,CACA,EAEA,MAAA,CAQA,QACA,EAEA,MAAA,CACA,MAAA,CACA,gBAAA,KAAA,OACA,CACA,EAEA,SAAA,CACA,gBAAA,CACA,MAAA,CACA,GAAA,KAAA,WACA,MAAA,IAAA,KAAA,mBAAA,CACA,CACA,EAEA,iBAAA,CACA,OAAA,KAAA,kBAAA,OACA,EAEA,YAAA,CACA,OAAA,KAAA,gBAAA,WAAA,QACA,EAEA,eAAA,CACA,MAAA,CACA,WACAC,EAAAA,sBAAA,KAAA,IAAA,EACA,CACA,oBAAA,KAAA,kBAAA,GACA,qBAAA,KAAA,SACA,0BAAA,KAAA,eACA,CACA,CACA,CACA,EAEA,MAAA,CACA,QAAAC,EAAA,CACA,KAAA,gBAAAA,CACA,CACA,EAEA,SAAA,CACA,KAAA,eAAA,CACA,EAEA,QAAA,CACA,oBAAA,CACA,KAAA,MAAA,SAAA,CAAA,KAAA,eAAA,EAEA,KAAA,gBACA,KAAA,gBAAA,CAAA,KAAA,gBAEA,EAEA,cAAA,CACA,MAAA,CAAA,CAAA,KAAA,OAAA,OACA,EAEA,gBAAA,CACA,KAAA,oBAAA,KAAA,aAAA,EAAA,KAAA,OAAA,YAAA,CAAA,CACA,EAEA,oBAAAC,EAAAC,EAAA,CACA,CAAAD,GAAA,CAAAC,GACAC,EAAA,KAAA,KACA,+DACA,IACA,CAEA,CACA,CACA"}