@gitlab/ui/dist/components/base/toggle/toggle.js

GitLab UI Components

import GlIcon from '../icon/icon';
import GlLoadingIcon from '../loading_icon/loading_icon';
import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';

var script = {
  components: {
    GlIcon: GlIcon,
    GlLoadingIcon: GlLoadingIcon
  },
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    name: {
      type: String,
      required: false,
      default: null
    },
    value: {
      type: Boolean,
      required: false,
      default: null
    },
    disabled: {
      type: Boolean,
      required: false,
      default: false
    },
    isLoading: {
      type: Boolean,
      required: false,
      default: false
    },
    labelOn: {
      type: String,
      required: false,
      default: 'Toggle Status: ON'
    },
    labelOff: {
      type: String,
      required: false,
      default: 'Toggle Status: OFF'
    },
    ariaDescribedby: {
      type: String,
      required: false,
      default: undefined
    },
    labelPosition: {
      type: String,
      required: false,
      default: 'hidden',
      validator: function validator(position) {
        return ['hidden', 'top', 'right'].includes(position);
      }
    }
  },
  computed: {
    labelText: function labelText() {
      return this.value ? this.labelOn : this.labelOff;
    },
    ariaLabel: function ariaLabel() {
      return this.labelPosition === 'hidden' ? this.labelText : undefined;
    },
    icon: function icon() {
      return this.value ? 'mobile-issue-close' : 'close';
    }
  },
  methods: {
    toggleFeature: function toggleFeature() {
      if (!this.disabled) this.$emit('change', !this.value);
    }
  }
};

/* script */
const __vue_script__ = script;

/* template */
var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('label',{staticClass:"gl-toggle-wrapper",class:{ 'gl-toggle-label-inline': _vm.labelPosition === 'right' }},[(_vm.labelPosition !== 'hidden')?_c('span',{staticClass:"gl-toggle-label"},[(_vm.value)?_vm._t("labelOn",[_vm._v(_vm._s(_vm.labelText))]):_vm._t("labelOff",[_vm._v(_vm._s(_vm.labelText))])],2):_vm._e(),_vm._v(" "),(_vm.name)?_c('input',{attrs:{"name":_vm.name,"type":"hidden"},domProps:{"value":_vm.value}}):_vm._e(),_vm._v(" "),_c('button',{class:{
      'gl-toggle': true,
      'is-checked': _vm.value,
      'is-disabled': _vm.disabled,
    },attrs:{"aria-label":_vm.ariaLabel,"aria-describedby":_vm.ariaDescribedby,"type":"button"},on:{"click":_vm.toggleFeature}},[(_vm.isLoading)?_c('gl-loading-icon',{staticClass:"toggle-loading",attrs:{"color":"light"}}):_c('span',{class:{ 'toggle-icon': true, disabled: _vm.disabled }},[_c('gl-icon',{attrs:{"name":_vm.icon,"size":16}})],1)],1)])};
var __vue_staticRenderFns__ = [];

  /* style */
  const __vue_inject_styles__ = undefined;
  /* scoped */
  const __vue_scope_id__ = undefined;
  /* module identifier */
  const __vue_module_identifier__ = undefined;
  /* functional template */
  const __vue_is_functional_template__ = false;
  /* style inject */
  
  /* style inject SSR */
  
  /* style inject shadow dom */
  

  
  const __vue_component__ = __vue_normalize__(
    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
    __vue_inject_styles__,
    __vue_script__,
    __vue_scope_id__,
    __vue_is_functional_template__,
    __vue_module_identifier__,
    false,
    undefined,
    undefined,
    undefined
  );

export default __vue_component__;