mealcomes/dist/es/input-BhhwO05l.mjs.map

MealComes 用于学习前端的组件库

{"version":3,"file":"input-BhhwO05l.mjs","sources":["../../../../packages/components/input/src/input.ts","../../../../packages/components/input/src/input.vue","../../../../packages/components/input/index.ts"],"sourcesContent":["import type { ExtractPropTypes, PropType } from 'vue';\nimport type { ComponentSize } from '@mealcomes/constants';\n\n/**\n * input 组件 props\n */\nexport const inputProps = {\n    /**\n     * 输入框类型\n     */\n    type: {\n        type: String,\n        default: 'text'\n    },\n    /**\n     * 输入框值\n     */\n    modelValue: {\n        type: [String, Number] as PropType<string | number>,\n        default: ''\n    },\n    /**\n     * 输入框占位符\n     */\n    placeholder: {\n        type: String,\n        default: ''\n    },\n    /**\n     * 输入框是否可清空\n     */\n    clearable: {\n        type: Boolean,\n        default: false\n    },\n    /**\n     * 输入框是否显示密码图标\n     */\n    showPassword: {\n        type: Boolean,\n        default: false\n    },\n    /**\n     * 输入框是否禁用\n     */\n    disabled: {\n        type: Boolean,\n        default: false\n    },\n    /**\n     * 输入框是否只读\n     */\n    readonly: {\n        type: Boolean,\n        default: false\n    },\n    /**\n     * 等价于原生 input aria-label 属性\n     */\n    ariaLabel: {\n        type: String,\n        default: ''\n    },\n    size: {\n        type: String as PropType<ComponentSize>,\n        default: 'default'\n    },\n    /**\n     * \t原生 autocomplete 属性\n     */\n    autocomplete: {\n        type: String,\n        default: 'off'\n    }\n} as const;\n\n/**\n * input 组件 props 类型\n */\nexport type InputProps = ExtractPropTypes<typeof inputProps>;\n\n/**\n * input 组件 emits\n */\nexport const inputEmits = {\n    /**\n     * 输入框值变化时触发\n     */\n    'update:modelValue': (value: string) => typeof value === 'string',\n    /**\n     * 输入框输入时触发\n     */\n    input: (value: string) => typeof value === 'string',\n    /**\n     * 输入框失焦时触发\n     */\n    change: (value: string) => typeof value === 'string',\n    /**\n     * 输入框聚焦时触发\n     */\n    focus: (event: FocusEvent) => event instanceof FocusEvent,\n    /**\n     * 输入框失焦时触发\n     */\n    blur: (event: FocusEvent) => event instanceof FocusEvent,\n    /**\n     * 输入框清空时触发\n     */\n    clear: () => true,\n    /**\n     * 按键按下触发\n     */\n    keydown: (event: KeyboardEvent) => event instanceof KeyboardEvent\n};\n\n/**\n * input 组件 emits 类型\n */\nexport type InputEmits = typeof inputEmits;\n","<template>\n    <div\n        :class=\"[\n            bem.b(),\n            {\n                [bem.b('group')]: $slots.prepend || $slots.append,\n                [bem.bm('group', 'append')]: $slots.append,\n                [bem.bm('group', 'prepend')]: $slots.prepend\n            },\n            bem.is('disabled', disabled),\n            bem.m(inputSize)\n        ]\"\n    >\n        <div v-if=\"$slots.prepend\" :class=\"[bem.be('group', 'prepend')]\">\n            <slot name=\"prepend\"></slot>\n        </div>\n\n        <div :class=\"[bem.e('wrapper'), bem.is('focus', isFocused)]\">\n            <span v-if=\"$slots.prefix\" :class=\"[bem.e('prefix')]\">\n                <span :class=\"[bem.e('prefix-inner')]\">\n                    <slot name=\"prefix\"></slot>\n                </span>\n            </span>\n            <input\n                ref=\"inputRef\"\n                :type=\"\n                    showPassword\n                        ? passwordVisible\n                            ? 'text'\n                            : 'password'\n                        : type\n                \"\n                :autocomplete=\"autocomplete\"\n                :placeholder=\"placeholder\"\n                :class=\"[bem.e('inner')]\"\n                v-bind=\"attrs\"\n                :disabled=\"disabled\"\n                :readonly=\"readonly\"\n                :aria-label=\"ariaLabel\"\n                @input=\"handleInput\"\n                @change=\"handleChange\"\n                @blur=\"handleBlur\"\n                @focus=\"handleFocus\"\n                @keydown=\"handleKeyDown\"\n            />\n            <span v-if=\"suffixVisible\" :class=\"[bem.e('suffix')]\">\n                <span :class=\"[bem.e('suffix-inner')]\">\n                    <template v-if=\"!showClear || !showPwdVisible\">\n                        <slot name=\"suffix\"></slot>\n                    </template>\n                    <mc-icon\n                        :class=\"[bem.e('clear'), bem.e('icon')]\"\n                        v-if=\"showClear\"\n                        @click=\"handleClear\"\n                    >\n                        <mc-close-circle />\n                    </mc-icon>\n                    <mc-icon\n                        :class=\"[bem.e('password'), bem.e('icon')]\"\n                        v-if=\"showPwdVisible\"\n                        @click=\"handlePasswordVisible\"\n                    >\n                        <mc-eye v-if=\"passwordVisible\" />\n                        <mc-eye-closed v-else />\n                    </mc-icon>\n                </span>\n            </span>\n        </div>\n\n        <div v-if=\"$slots.append\" :class=\"[bem.be('group', 'append')]\">\n            <slot name=\"append\"></slot>\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { createNamespace } from '@mealcomes/utils';\nimport { inputEmits, inputProps } from './input';\nimport {\n    computed,\n    inject,\n    nextTick,\n    onMounted,\n    ref,\n    useAttrs,\n    useSlots,\n    watch\n} from 'vue';\nimport McEye from '@mealcomes/components/internal-icon/eye';\nimport McEyeClosed from '@mealcomes/components/internal-icon/eye-closed';\nimport McCloseCircle from '@mealcomes/components/internal-icon/close-circle';\nimport { formItemContextKey } from '@mealcomes/components/form';\n\ndefineOptions({\n    name: 'mc-input',\n    inheritAttrs: false // 关闭默认继承属性\n});\nconst attrs = useAttrs(); // 获取非 props 的属性，将其绑定在 input 上\nconst bem = createNamespace('input');\nconst props = defineProps(inputProps);\nconst emits = defineEmits(inputEmits);\nconst slots = useSlots()\n\n/* 表单校验 */\nconst formItemContext = inject(formItemContextKey, undefined);\n\nconst suffixVisible = computed(\n    () =>\n        !!slots.suffix ||\n        showClear.value ||\n        props.showPassword\n);\n\nconst inputRef = ref<HTMLInputElement>();\nconst isFocused = ref(false);\nwatch(\n    () => props.modelValue,\n    () => {\n        formItemContext?.validate('change').catch(err => console.warn(err)); // 表单校验\n        setNativeInputValue();\n    }\n);\n\nconst nativeInputValue = computed(() =>\n    props.modelValue === undefined || props.modelValue === null\n        ? ''\n        : String(props.modelValue)\n);\n\nfunction setNativeInputValue() {\n    const inputEle = inputRef.value;\n    if (!inputEle || inputEle.value === nativeInputValue.value) return;\n\n    inputEle.value = nativeInputValue.value;\n}\n\nasync function focus() {\n    await nextTick(); // 重新获取焦点\n    inputRef.value?.focus();\n}\n\nconst inputSize = computed(() => {\n    return formItemContext?.size || props.size;\n});\n\n/* show-password */\n\nconst passwordVisible = ref(false);\nfunction handlePasswordVisible() {\n    passwordVisible.value = !passwordVisible.value;\n    focus();\n}\n\nconst showPwdVisible = computed(() => {\n    return (\n        !!props.modelValue &&\n        props.showPassword &&\n        !props.disabled &&\n        !props.readonly\n    );\n});\n\n/* clearable */\n\nconst showClear = computed(() => {\n    return (\n        !!props.modelValue &&\n        !props.disabled &&\n        !props.readonly &&\n        props.clearable\n    );\n});\n\nfunction handleClear() {\n    emits('input', '');\n    emits('update:modelValue', '');\n    emits('clear');\n    focus();\n}\n\nonMounted(() => {\n    setNativeInputValue();\n});\n\nconst handleInput = async (event: Event) => {\n    const { value } = event.target as HTMLInputElement;\n\n    if (value === nativeInputValue.value) {\n        setNativeInputValue();\n        return;\n    }\n\n    emits('input', value);\n    emits('update:modelValue', value);\n\n    await nextTick();\n    setNativeInputValue();\n};\n\nconst handleChange = (event: Event) => {\n    const target = event.target as HTMLInputElement;\n    emits('change', target.value);\n};\n\nconst handleFocus = (event: FocusEvent) => {\n    isFocused.value = true;\n    emits('focus', event);\n};\n\nconst handleBlur = (event: FocusEvent) => {\n    formItemContext?.validate('blur').catch(err => console.warn(err));\n    isFocused.value = false;\n    emits('blur', event);\n};\n\nconst handleKeyDown = (event: KeyboardEvent) => {\n    emits('keydown', event);\n};\n</script>\n","import { withInstall } from '@mealcomes/utils';\nimport _Input from './src/input.vue';\n\nexport const McInput = withInstall(_Input);\n\nexport default McInput;\n\nexport type { InputProps } from './src/input';\n\ndeclare module 'vue' {\n    export interface GlobalComponents {\n        McInput: typeof McInput;\n    }\n}\n"],"names":["inputProps","inputEmits","value","event","attrs","useAttrs","bem","createNamespace","props","__props","emits","__emit","slots","useSlots","formItemContext","inject","formItemContextKey","suffixVisible","computed","showClear","inputRef","ref","isFocused","watch","err","setNativeInputValue","nativeInputValue","inputEle","focus","nextTick","_a","inputSize","passwordVisible","handlePasswordVisible","showPwdVisible","handleClear","onMounted","handleInput","handleChange","target","handleFocus","handleBlur","handleKeyDown","_createElementBlock","_normalizeClass","_unref","$slots","disabled","_renderSlot","_ctx","_createElementVNode","_mergeProps","showPassword","type","autocomplete","placeholder","readonly","ariaLabel","_createBlock","_component_mc_icon","_createVNode","McCloseCircle","McEye","McEyeClosed","McInput","withInstall","_Input"],"mappings":";;;;AAMO,MAAMA,KAAa;AAAA;AAAA;AAAA;AAAA,EAItB,MAAM;AAAA,IACF,MAAM;AAAA,IACN,SAAS;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA,EAKb,YAAY;AAAA,IACR,MAAM,CAAC,QAAQ,MAAM;AAAA,IACrB,SAAS;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA,EAKb,aAAa;AAAA,IACT,MAAM;AAAA,IACN,SAAS;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA,EAKb,WAAW;AAAA,IACP,MAAM;AAAA,IACN,SAAS;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA,EAKb,cAAc;AAAA,IACV,MAAM;AAAA,IACN,SAAS;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA,EAKb,UAAU;AAAA,IACN,MAAM;AAAA,IACN,SAAS;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA,EAKb,UAAU;AAAA,IACN,MAAM;AAAA,IACN,SAAS;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA,EAKb,WAAW;AAAA,IACP,MAAM;AAAA,IACN,SAAS;AAAA,EAAA;AAAA,EAEb,MAAM;AAAA,IACF,MAAM;AAAA,IACN,SAAS;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA,EAKb,cAAc;AAAA,IACV,MAAM;AAAA,IACN,SAAS;AAAA,EAAA;AAEjB,GAUaC,KAAa;AAAA;AAAA;AAAA;AAAA,EAItB,qBAAqB,CAACC,MAAkB,OAAOA,KAAU;AAAA;AAAA;AAAA;AAAA,EAIzD,OAAO,CAACA,MAAkB,OAAOA,KAAU;AAAA;AAAA;AAAA;AAAA,EAI3C,QAAQ,CAACA,MAAkB,OAAOA,KAAU;AAAA;AAAA;AAAA;AAAA,EAI5C,OAAO,CAACC,MAAsBA,aAAiB;AAAA;AAAA;AAAA;AAAA,EAI/C,MAAM,CAACA,MAAsBA,aAAiB;AAAA;AAAA;AAAA;AAAA,EAI9C,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA,EAIb,SAAS,CAACA,MAAyBA,aAAiB;AACxD;;;;;;;AChBA,UAAMC,IAAQC,EAAA,GACRC,IAAMC,EAAgB,OAAO,GAC7BC,IAAQC,GACRC,IAAQC,GACRC,IAAQC,EAAA,GAGRC,IAAkBC,EAAOC,IAAoB,MAAS,GAEtDC,IAAgBC;AAAA,MAClB,MACI,CAAC,CAACN,EAAM,UACRO,EAAU,SACVX,EAAM;AAAA,IAAA,GAGRY,IAAWC,EAAA,GACXC,IAAYD,EAAI,EAAK;AAC3B,IAAAE;AAAA,MACI,MAAMf,EAAM;AAAA,MACZ,MAAM;AACF,QAAAM,KAAA,QAAAA,EAAiB,SAAS,UAAU,MAAM,OAAO,QAAQ,KAAKU,CAAG,IACjEC,EAAA;AAAA,MACJ;AAAA,IAAA;AAGJ,UAAMC,IAAmBR;AAAA,MAAS,MAC9BV,EAAM,eAAe,UAAaA,EAAM,eAAe,OACjD,KACA,OAAOA,EAAM,UAAU;AAAA,IAAA;AAGjC,aAASiB,IAAsB;AAC3B,YAAME,IAAWP,EAAS;AAC1B,MAAI,CAACO,KAAYA,EAAS,UAAUD,EAAiB,UAErDC,EAAS,QAAQD,EAAiB;AAAA,IACtC;AAEA,mBAAeE,IAAQ;;AACnB,YAAMC,EAAA,IACNC,IAAAV,EAAS,UAAT,QAAAU,EAAgB;AAAA,IACpB;AAEA,UAAMC,IAAYb,EAAS,OAChBJ,KAAA,gBAAAA,EAAiB,SAAQN,EAAM,IACzC,GAIKwB,IAAkBX,EAAI,EAAK;AACjC,aAASY,IAAwB;AAC7B,MAAAD,EAAgB,QAAQ,CAACA,EAAgB,OACzCJ,EAAA;AAAA,IACJ;AAEA,UAAMM,IAAiBhB,EAAS,MAExB,CAAC,CAACV,EAAM,cACRA,EAAM,gBACN,CAACA,EAAM,YACP,CAACA,EAAM,QAEd,GAIKW,IAAYD,EAAS,MAEnB,CAAC,CAACV,EAAM,cACR,CAACA,EAAM,YACP,CAACA,EAAM,YACPA,EAAM,SAEb;AAED,aAAS2B,IAAc;AACnB,MAAAzB,EAAM,SAAS,EAAE,GACjBA,EAAM,qBAAqB,EAAE,GAC7BA,EAAM,OAAO,GACbkB,EAAA;AAAA,IACJ;AAEA,IAAAQ,EAAU,MAAM;AACZ,MAAAX,EAAA;AAAA,IACJ,CAAC;AAED,UAAMY,IAAc,OAAOlC,MAAiB;AACxC,YAAM,EAAE,OAAAD,MAAUC,EAAM;AAExB,UAAID,MAAUwB,EAAiB,OAAO;AAClC,QAAAD,EAAA;AACA;AAAA,MACJ;AAEA,MAAAf,EAAM,SAASR,CAAK,GACpBQ,EAAM,qBAAqBR,CAAK,GAEhC,MAAM2B,EAAA,GACNJ,EAAA;AAAA,IACJ,GAEMa,IAAe,CAACnC,MAAiB;AACnC,YAAMoC,IAASpC,EAAM;AACrB,MAAAO,EAAM,UAAU6B,EAAO,KAAK;AAAA,IAChC,GAEMC,IAAc,CAACrC,MAAsB;AACvC,MAAAmB,EAAU,QAAQ,IAClBZ,EAAM,SAASP,CAAK;AAAA,IACxB,GAEMsC,IAAa,CAACtC,MAAsB;AACtC,MAAAW,KAAA,QAAAA,EAAiB,SAAS,QAAQ,MAAM,OAAO,QAAQ,KAAKU,CAAG,IAC/DF,EAAU,QAAQ,IAClBZ,EAAM,QAAQP,CAAK;AAAA,IACvB,GAEMuC,IAAgB,CAACvC,MAAyB;AAC5C,MAAAO,EAAM,WAAWP,CAAK;AAAA,IAC1B;;;kBAxNIwC,EAuEM,OAAA;AAAA,QAtED,OAAKC,EAAA;AAAA,UAAgBC,EAAAvC,CAAA,EAAI,EAAA;AAAA;aAAoCuC,EAAAvC,CAAA,EAAI,EAAC,OAAA,CAAA,GAAYwC,EAAAA,OAAO,WAAWA,EAAAA,OAAO;AAAA,YAAyB,CAAAD,EAAAvC,CAAA,EAAI,GAAE,SAAA,QAAA,CAAA,GAAsBwC,EAAAA,OAAO;AAAA,YAAyB,CAAAD,EAAAvC,CAAA,EAAI,GAAE,SAAA,SAAA,CAAA,GAAuBwC,EAAAA,OAAO;AAAA,UAAA;AAAA,UAAmCD,EAAAvC,CAAA,EAAI,GAAE,YAAayC,EAAAA,QAAQ;AAAA,UAAeF,EAAAvC,CAAA,EAAI,EAAEyB,EAAA,KAAS;AAAA,QAAA;;QAWlTe,EAAAA,OAAO,gBAAlBH,EAEM,OAAA;AAAA;UAFsB,OAAKC,EAAA,CAAGC,EAAAvC,CAAA,EAAI,GAAE,SAAA,SAAA,CAAA,CAAA;AAAA,QAAA;UACtC0C,EAA4BC,EAAA,QAAA,SAAA;AAAA,QAAA;QAGhCC,EAkDM,OAAA;AAAA,UAlDA,OAAKN,EAAA,CAAGC,KAAI,cAAcA,EAAAvC,CAAA,EAAI,GAAE,SAAUgB,EAAA,KAAS,CAAA,CAAA;AAAA,QAAA;UACzCwB,EAAAA,OAAO,eAAnBH,EAIO,QAAA;AAAA;YAJqB,OAAKC,EAAA,CAAGC,EAAAvC,CAAA,EAAI,EAAC,QAAA,CAAA,CAAA;AAAA,UAAA;YACrC4C,EAEO,QAAA;AAAA,cAFA,OAAKN,EAAA,CAAGC,EAAAvC,CAAA,EAAI,EAAC,cAAA,CAAA,CAAA;AAAA,YAAA;cAChB0C,EAA2BC,EAAA,QAAA,QAAA;AAAA,YAAA;;UAGnCC,EAqBE,SArBFC,EAqBE;AAAA,qBApBM;AAAA,YAAJ,KAAI/B;AAAA,YACH,MAA2BgC,EAAAA,eAAuCpB,EAAA,8BAAwHqB,EAAAA;AAAAA,YAO1L,cAAcC,EAAAA;AAAAA,YACd,aAAaC,EAAAA;AAAAA,YACb,OAAK,CAAGV,EAAAvC,CAAA,EAAI,EAAC,OAAA,CAAA;AAAA,UAAA,GACNuC,EAAAzC,CAAA,GAAK;AAAA,YACZ,UAAU2C,EAAAA;AAAAA,YACV,UAAUS,EAAAA;AAAAA,YACV,cAAYC,EAAAA;AAAAA,YACZ,SAAOpB;AAAA,YACP,UAAQC;AAAA,YACR,QAAMG;AAAA,YACN,SAAOD;AAAA,YACP,WAASE;AAAA,UAAA;UAEFzB,EAAA,cAAZ0B,EAqBO,QAAA;AAAA;YArBqB,OAAKC,EAAA,CAAGC,EAAAvC,CAAA,EAAI,EAAC,QAAA,CAAA,CAAA;AAAA,UAAA;YACrC4C,EAmBO,QAAA;AAAA,cAnBA,OAAKN,EAAA,CAAGC,EAAAvC,CAAA,EAAI,EAAC,cAAA,CAAA,CAAA;AAAA,YAAA;cACC,CAAAa,EAAA,UAAce,EAAA,QAC3Bc,EAA2BC,EAAA,QAAA,UAAA,EAAA,KAAA,EAAA,CAAA;cAIrB9B,EAAA,cAFVuC,EAMUC,GAAA;AAAA;gBALL,UAAQd,EAAAvC,CAAA,EAAI,EAAC,OAAA,GAAWuC,EAAAvC,CAAA,EAAI,EAAC,MAAA,CAAA,CAAA;AAAA,gBAE7B,SAAO6B;AAAA,cAAA;2BAER,MAAmB;AAAA,kBAAnByB,EAAmBf,EAAAgB,CAAA,CAAA;AAAA,gBAAA;;;cAIb3B,EAAA,cAFVwB,EAOUC,GAAA;AAAA;gBANL,UAAQd,EAAAvC,CAAA,EAAI,EAAC,UAAA,GAAcuC,EAAAvC,CAAA,EAAI,EAAC,MAAA,CAAA,CAAA;AAAA,gBAEhC,SAAO2B;AAAA,cAAA;2BAER,MAAiC;AAAA,kBAAnBD,EAAA,cAAd0B,EAAiCb,EAAAiB,CAAA,GAAA,EAAA,KAAA,EAAA,CAAA,WACjCJ,EAAwBb,EAAAkB,CAAA,GAAA,EAAA,KAAA,GAAA;AAAA,gBAAA;;;;;;QAM7BjB,EAAAA,OAAO,eAAlBH,EAEM,OAAA;AAAA;UAFqB,OAAKC,EAAA,CAAGC,EAAAvC,CAAA,EAAI,GAAE,SAAA,QAAA,CAAA,CAAA;AAAA,QAAA;UACrC0C,EAA2BC,EAAA,QAAA,QAAA;AAAA,QAAA;;;;ICnE1Be,KAAUC,EAAYC,EAAM;"}