@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
1 lines • 6.61 kB
Source Map (JSON)
{"version":3,"file":"toggle.vue.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":["utils","TOGGLE_CHECKED_VALUES","TOGGLE_SIZE_MODIFIERS"],"mappings":";;;;;;AAwCA,MAAA,YAAA;AAAA,EAEA,MAAA;AAAA,EAEA,cAAA;AAAA,EAEA,OAAA;AAAA,IACA,MAAA;AAAA,IACA,OAAA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAKA,IAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,eAAAA,qBAAA,gBAAA;AAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,SAAA;AAAA,MACA,MAAA,CAAA,SAAA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,MAAAC,uCAAA,SAAA,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,eAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,MAAA,OAAA,KAAAC,sCAAA,EAAA,SAAA,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,iBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,OAAA,CAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,iBAAA,KAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,iBAAA;AACA,aAAA;AAAA,QACA,GAAA,KAAA;AAAA,QACA,OAAA,OAAA,KAAA,mBAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,kBAAA;AACA,aAAA,KAAA,oBAAA;AAAA,IACA;AAAA,IAEA,aAAA;AACA,aAAA,KAAA,kBAAA,aAAA;AAAA,IACA;AAAA,IAEA,gBAAA;AACA,aAAA;AAAA,QACA;AAAA,QACAA,iBAAA,sBAAA,KAAA,IAAA;AAAA,QACA;AAAA,UACA,qBAAA,KAAA,oBAAA;AAAA,UACA,sBAAA,KAAA;AAAA,UACA,2BAAA,KAAA;AAAA,QACA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA,QAAA,YAAA;AACA,WAAA,kBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AACA,SAAA,eAAA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,qBAAA;AACA,WAAA,MAAA,UAAA,CAAA,KAAA,eAAA;AAEA,UAAA,KAAA,eAAA;AACA,aAAA,kBAAA,CAAA,KAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,eAAA;AACA,aAAA,CAAA,CAAA,KAAA,OAAA;AAAA,IACA;AAAA,IAEA,iBAAA;AACA,WAAA,oBAAA,KAAA,aAAA,GAAA,KAAA,OAAA,YAAA,CAAA;AAAA,IACA;AAAA,IAEA,oBAAA,UAAA,WAAA;AACA,UAAA,CAAA,YAAA,CAAA,WAAA;AACA,YAAA,KAAA;AAAA,UACA;AAAA,UACA;AAAA,QACA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;"}