{"version":3,"file":"switch.vue.mjs","sources":["../../../../../../packages/components/switch/src/switch.vue"],"sourcesContent":["<script lang=\"ts\">\n  import { computed, defineComponent, nextTick, onMounted, ref, watch } from 'vue'\n  import type { CSSProperties, StyleValue } from 'vue'\n  import { addUnit, NOOP } from '../../../shared/utils'\n  import { BnIconLoading } from '../../icon'\n  import { getComponentNamespace, getNamespace } from '../../../utils/global-config'\n  import { isBoolean, isPromise } from '../../../utils/is'\n  import { useFormItem } from '../../form/src/hooks/use-form-item'\n  import { switchProps } from './props'\n\n  export default defineComponent({\n    name: getComponentNamespace('Switch'),\n    components: {\n      BnIconLoading\n    },\n    props: switchProps,\n    emits: ['update:modelValue', 'input', 'change'],\n    setup(props, { emit }) {\n      const ns = getNamespace('switch')\n      const inputRef = ref<HTMLInputElement>()\n      const { formItem } = useFormItem()\n      const isLoading = ref(false)\n\n      const cls = computed(() => [\n        ns,\n        checked.value && 'is-checked',\n        mergeDisabled.value && 'is-disabled'\n      ])\n\n      const coreCls = computed(() => [`${ns}__core`, `${ns}__core-${props.type}`])\n\n      const blockCls = computed(() => [`${ns}__block`, `${ns}__block-${props.type}`])\n\n      // moduleValue value 控制模式\n      const isControlled = ref(props.modelValue !== false)\n      // TODO: 后期和form表单关联\n      const mergeDisabled = computed(() => props.disabled)\n\n      // 用这个值控制checkbox状态\n      const actualValue = computed(() => {\n        return isControlled.value ? props.modelValue : props.value\n      })\n\n      // switch状态控制\n      const checked = computed(() => actualValue.value === props.trueValue)\n\n      const inlineLabel = computed(() => (checked.value ? props.activeText : props.inactiveText))\n\n      const coreStyle = computed<CSSProperties>(() => {\n        const style: StyleValue = {\n          width: addUnit(props.width),\n          '--bn-switch-inactive-color': props.inactiveColor,\n          '--bn-switch-active-color': props.activeColor\n        }\n        return style\n      })\n\n      const switchValue = () => {\n        if (mergeDisabled.value) return\n\n        const { beforeChange } = props\n        if (!beforeChange) {\n          handleChange()\n          return\n        }\n        const beforeChangeRes = beforeChange()\n\n        if (isPromise(beforeChangeRes)) {\n          isLoading.value = true\n          beforeChangeRes\n            .then((value: boolean) => {\n              value && handleChange()\n            })\n            .finally(() => {\n              isLoading.value = false\n            })\n          return\n        }\n        if (isBoolean(beforeChangeRes)) {\n          beforeChangeRes && handleChange()\n        }\n      }\n\n      const handleChange = () => {\n        const val = checked.value ? props.falseValue : props.trueValue\n        emit('update:modelValue', val)\n        emit('input', val)\n        emit('change', val)\n        nextTick(() => {\n          inputRef.value!.checked = checked.value\n        })\n      }\n\n      watch(checked, (val) => {\n        inputRef.value!.checked = val\n        if (props.validateEvent) {\n          formItem?.validate?.('change').catch(NOOP)\n        }\n      })\n\n      watch(\n        () => props.modelValue,\n        () => {\n          isControlled.value = true\n        }\n      )\n\n      watch(\n        () => props.value,\n        () => {\n          isControlled.value = false\n        }\n      )\n\n      onMounted(() => {\n        if (![props.trueValue, props.falseValue].includes(actualValue.value)) {\n          emit('update:modelValue', props.falseValue)\n          emit('input', props.falseValue)\n          emit('change', props.falseValue)\n        }\n      })\n\n      return {\n        ns,\n        cls,\n        coreStyle,\n        coreCls,\n        blockCls,\n        mergeDisabled,\n        switchValue,\n        handleChange,\n        checked,\n        inputRef,\n        isLoading,\n        inlineLabel\n      }\n    }\n  })\n</script>\n\n<template>\n  <div :class=\"cls\" @click.prevent=\"switchValue\">\n    <input\n      ref=\"inputRef\"\n      :class=\"[`${ns}__input`]\"\n      type=\"checkbox\"\n      role=\"switch\"\n      :aria-checked=\"checked\"\n      :aria-disabled=\"mergeDisabled\"\n      :name=\"name\"\n      :true-value=\"trueValue\"\n      :false-value=\"falseValue\"\n      :disabled=\"mergeDisabled\"\n      @change=\"handleChange\"\n      @keydown.enter=\"switchValue\"\n    />\n    <span\n      v-if=\"!inlinePrompt\"\n      :class=\"[{ 'is-active': !checked }, `${ns}__label ${ns}__label--left`]\"\n    >\n      {{ inactiveText }}\n    </span>\n    <span :class=\"coreCls\" :style=\"coreStyle\">\n      <span v-if=\"inlinePrompt && type !== 'line'\" :class=\"[`${ns}__inline`]\">\n        <slot name=\"inline\" :checked=\"checked\"\n          ><span class=\"is-text\">{{ inlineLabel }}</span></slot\n        >\n      </span>\n      <span :class=\"blockCls\">\n        <slot v-if=\"isLoading\" name=\"loading\">\n          <BnIconLoading :size=\"14\" :style=\"{ color: 'var(--bn-switch-active-color)' }\" />\n        </slot>\n      </span>\n    </span>\n    <span\n      v-if=\"!inlinePrompt\"\n      :class=\"[`${ns}__label ${ns}__label--right`, { 'is-active': checked }]\"\n    >\n      {{ activeText }}\n    </span>\n  </div>\n</template>\n"],"names":["_resolveComponent","_openBlock","_createElementBlock","_normalizeClass","_withModifiers","ns","trueValue","mergeDisabled","inlinePrompt","_withKeys","checked","_toDisplayString","_createCommentVNode","coreCls","coreStyle","type","blockCls","isLoading","_renderSlot","_createVNode"],"mappings":"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"}