hongluan-ui/es/components/switch/src/switch.mjs.map

Hongluan Component Library for Vue 3

{"version":3,"file":"switch.mjs","sources":["../../../../../../packages/components/switch/src/switch.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n      namespace,\n      switchDisabled ? 'is-disabled' : '',\n      checked ? 'is-checked' : '',\n      type ? type : '',\n      switchSize ? switchSize : ''\n    ]\"\n    :style=\"[\n      width ? `--switch-width: ${width}` : '',\n    ]\"\n    @click.prevent=\"switchValue\"\n  >\n    <input\n      :id=\"inputId\"\n      ref=\"input\"\n      type=\"checkbox\"\n      role=\"switch\"\n      :aria-checked=\"checked\"\n      :aria-disabled=\"switchDisabled\"\n      :aria-label=\"label || ariaLabel\"\n      :name=\"name\"\n      :true-value=\"activeValue\"\n      :false-value=\"inactiveValue\"\n      :disabled=\"switchDisabled\"\n      :tabindex=\"tabindex\"\n      @change=\"handleChange\"\n      @keydown.enter=\"switchValue\"\n    >\n    <em ref=\"core\" class=\"core\"></em>\n    <spinner v-if=\"loading && !$slots.icon\" />\n    <slot v-else name=\"icon\" :checked=\"checked\"></slot>\n  </div>\n</template>\n<script lang='ts'>\nimport { defineComponent, computed, onMounted, ref, inject, nextTick, watch, getCurrentInstance } from 'vue'\nimport { isPromise } from '@vue/shared'\nimport { formItemContextKey, FormItemEvents } from '@hongluan-ui/tokens'\nimport { useConsistentProp, useNamespace, useFormItemInputId, useDeprecated } from '@hongluan-ui/hooks'\nimport { isBoolean, throwError, debugWarn } from '@hongluan-ui/utils'\nimport Spinner from '@hongluan-ui/components/spinner'\nimport { UPDATE_MODEL_EVENT, CHANGE_EVENT, INPUT_EVENT } from '@hongluan-ui/constants'\nimport { switchProps } from './switch'\n\nimport type { FormItemContext } from '@hongluan-ui/tokens'\n\nexport default defineComponent({\n  name: 'Switch',\n  components: { Spinner },\n  props: switchProps,\n  emits: ['update:modelValue', 'change', 'input'],\n  setup(props, { emit }) {\n    const vm = getCurrentInstance()!\n    const formItem = inject(formItemContextKey, {} as FormItemContext)\n\n    const isModelValue = ref(props.modelValue !== false)\n    const input = ref<HTMLInputElement>()\n    const core = ref<HTMLElement>()\n    const scope = 'Switch'\n\n    watch(() => props.modelValue, () => {\n      isModelValue.value = true\n    })\n\n    watch(() => props.value, () => {\n      isModelValue.value = false\n    })\n\n    useDeprecated(\n      {\n        from: '\"value\"',\n        replacement: '\"model-value\" or \"v-model\"',\n        scope: 'Switch',\n        version: '2.5.0',\n        ref: 'http://hl.front.etcc.group/2x/#/zh-CN/component/switch#attributes',\n        type: 'Attribute',\n      },\n      computed(() => !!vm.vnode.props?.value),\n    )\n\n\n    const actualValue = computed(() => {\n      return isModelValue.value ? props.modelValue : props.value\n    })\n\n    const checked = computed(() => actualValue.value === props.activeValue)\n\n    const { size: switchSize, disabled: tempDisabled } = useConsistentProp()\n    const { inputId } = useFormItemInputId(props, {\n      formItemContext: formItem,\n    })\n\n    if (![props.activeValue, props.inactiveValue].includes(actualValue.value)) {\n      emit(UPDATE_MODEL_EVENT, props.inactiveValue)\n      emit(CHANGE_EVENT, props.inactiveValue)\n      emit(INPUT_EVENT, props.inactiveValue)\n    }\n\n    watch(checked, () => {\n      input.value.checked = checked.value\n\n      if (props.activeColor || props.inactiveColor) {\n        setBackgroundColor()\n      }\n\n      if (props.validateEvent) {\n        formItem?.validate?.(FormItemEvents.change).catch(err => debugWarn(err))\n      }\n    })\n\n    const switchDisabled = computed((): boolean => {\n      return tempDisabled.value || props.loading\n    })\n\n    const handleChange = (): void => {\n      const val = checked.value ? props.inactiveValue : props.activeValue\n      emit(UPDATE_MODEL_EVENT, val)\n      emit(CHANGE_EVENT, val)\n      emit(INPUT_EVENT, val)\n      nextTick(() => {\n        input.value.checked = checked.value\n      })\n    }\n\n    const switchValue = (): void => {\n      if (switchDisabled.value) return\n\n      const { beforeChange } = props\n      if (!beforeChange) {\n        handleChange()\n        return\n      }\n\n      const shouldChange = beforeChange()\n\n      const isExpectType = [isPromise(shouldChange), isBoolean(shouldChange)].some(i => i)\n      if (!isExpectType) {\n        throwError(scope, 'beforeChange must return type `Promise<boolean>` or `boolean`')\n      }\n\n      if (isPromise(shouldChange)) {\n        shouldChange.then(result => {\n          if (result) {\n            handleChange()\n          }\n        }).catch(e => {\n          debugWarn(scope, `some error occurred: ${e}`)\n        })\n      } else if (shouldChange) {\n        handleChange()\n      }\n    }\n\n    const setBackgroundColor = (): void => {\n      const newColor = checked.value ? props.activeColor : props.inactiveColor\n      const coreEl = core.value\n      if (props.borderColor) coreEl.style.borderColor = props.borderColor\n      else if (!props.borderColor) coreEl.style.borderColor = newColor\n      coreEl.style.backgroundColor = newColor\n    }\n\n    const focus = (): void => {\n      input.value?.focus?.()\n    }\n\n    onMounted(() => {\n      if (props.activeColor || props.inactiveColor || props.borderColor) {\n        setBackgroundColor()\n      }\n      input.value.checked = checked.value\n    })\n\n    const { namespace } = useNamespace('switch')\n\n    return {\n      namespace,\n      input,\n      inputId,\n      switchSize,\n      core,\n      switchDisabled,\n      checked,\n      handleChange,\n      switchValue,\n      focus,\n    }\n  },\n})\n</script>\n"],"names":["Spinner"],"mappings":";;;;;;;;;;;;;;;;;;AA+CA,MAAK,YAAa,gBAAa;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY,WAAEA;AAAQ,EACtB,OAAO;AAAA,EACP,OAAO,CAAC,qBAAqB,UAAU,OAAO;AAAA,EAC9C,MAAM,OAAO,EAAE,QAAQ;AACrB,UAAM,KAAK;AACX,UAAM,WAAW,OAAO,oBAAoB,EAAqB;AAEjE,UAAM,eAAe,IAAI,MAAM,eAAe,KAAK;AACnD,UAAM,QAAQ;AACd,UAAM,OAAO;AACb,UAAM,QAAQ;AAEd,UAAM,MAAM,MAAM,YAAY,MAAM;AAClC,mBAAa,QAAQ;AAAA,KACtB;AAED,UAAM,MAAM,MAAM,OAAO,MAAM;AAC7B,mBAAa,QAAQ;AAAA,KACtB;AAED,kBACE;AAAA,MACE,MAAM;AAAA,MACN,aAAa;AAAA,MACb,OAAO;AAAA,MACP,SAAS;AAAA,MACT,KAAK;AAAA,MACL,MAAM;AAAA,OAER,SAAS,MAAM;AAIjB,UAAM;AACJ,aAAO,wCAAwC,MAAM;AAAA,KACtD;AAED,UAAM;AAEN,wCAAoC;AACpC;AAA8C;AAC3B,IACnB;AAEA,UAAM,sCAAsC,EAAE;AAC5C,+BAAyB;AACzB;AACA;AAAqC;AAGvC,UAAM,eAAe;AACnB;AAEA;AACE;AAAmB,MACrB;AAEA;AACE,kDAA0C,EAAE;AAA2B;AACzE;AAGF,UAAM;AACJ,0BAAoB;AAAe;AAGrC;AACE;AACA,+BAAyB;AACzB;AACA;AACA,eAAS;AACP;AAA8B,MAChC;AAAC;AAGH;AACE;AAA0B;AAE1B;AACA,UAAI;AACF;AACA;AAAA,MACF;AAEA;AAEA;AACA;AACE;AAAiF,MACnF;AAEA;AACE;AACE;AACE;AAAa,UACf;AAAA,QACF;AACE,oBAAU;AAAkC;AAC7C;AAED;AAAa;AACf;AAGF,+BAA2B;AACzB,uBAAiB;AACjB;AACA;AAAuB;AAAiC;AAC3B,qBAAa;AAC1C;AAA+B;AAGjC;AACE;AAAqB;AAGvB;AACE,UAAI;AACF;AAAmB,MACrB;AACA;AAA8B,IAChC;AAEA,UAAM;AAEN;AAAO;AACL,MACA;AAAA,MACA;AAAA;AACA;AACA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AACF;AAEJ;;;;;AA3JQ;AA/BY;AAA+B;AAAoC;AAAuC;AAAoC;WAOxJ;AAAA,MAAU,gCAA2B;AAAK;4BAGhC;AAAW;IAE3B;AAeC,MAdE,IAAI;AAAA,MACL;AAAI;AACC;AACA;AACU,MACd;AAAe,MACf;AAAqB,MACrB,MAAM;AAAA,MACN,cAAY;AAAA,MACZ;AAAa,MACb;AAAU,MACV;AAAU,MACV,UAAQ;AAAA,MACR;AAA0B;;AAEI,MAA7B;AAAI,MAAO;AAAM;uDACrB;AACmD;MAAzB;AAAS;;;;;;;;;;;;"}