{"version":3,"file":"SopInput.vue.mjs","sources":["../../../src/components/SopInput/SopInput.vue"],"sourcesContent":["<template>\n  <ElInput\n    ref=\"inputRef\"\n    class=\"sop-input\"\n    :modelValue=\"modelValue\"\n    @update:modelValue=\"(val) => $emit('update:modelValue', val)\"\n    v-bind=\"$attrs\"\n  >\n    <template\n      v-for=\"(slot, slotName) in $slots\"\n      #[slotName]=\"slotProps\"\n    >\n      <slot\n        :name=\"slotName\"\n        v-bind=\"slotProps\"\n      />\n    </template>\n  </ElInput>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, ref, onMounted, watch } from 'vue';\nimport { ElInput, type InputInstance } from 'element-plus';\ntype ExposeInput = Pick<\n  InputInstance,\n  'blur' | 'clear' | 'focus' |\n  'input' | 'resizeTextarea' | '_ref' |\n  'select' | 'textarea' | 'textareaStyle'\n>;\n\nexport default defineComponent({\n  name: 'SopInput',\n  components: { ElInput },\n  props: {\n    modelValue: { default: '' },\n    scrollPlaceholder: {\n      type: Boolean,\n      default: false\n    }\n  },\n  emits: ['update:modelValue'],\n  setup(props, { attrs, expose }) {\n    // const attrs = useAttrs();\n    const placeholderText = ref(attrs.placeholder as string || '');\n    const inputRef = ref<InputInstance | null>(null);\n\n    const inputWrapper = ref<HTMLDivElement | null>();\n    // const inputSuffix = ref<HTMLDivElement | null>();\n    const inputPrefix = ref<HTMLDivElement | null>();\n    const input = ref<HTMLInputElement | null>();\n    const placeholder = ref<HTMLDivElement | null>();\n\n    // 用户更改 placeholder 时，更新 placeholder\n    watch(() => attrs.placeholder, (val) => {\n      placeholderText.value = val as string;\n    }, { immediate: true });\n\n    watch(() => props.modelValue, () => {\n      setPlaceholderVisibility(props.modelValue !== '');\n    }, { immediate: true });\n\n    onMounted(() => {\n      if (inputRef.value === null) return;\n      input.value = inputRef.value.$refs.input as HTMLInputElement;\n      // 如果不需要滚动字幕, 将原生的显示出来\n      if (!props.scrollPlaceholder) {\n        input.value.classList.remove('el-input__inner--scroll');\n        return;\n      }\n      input.value.classList.add('el-input__inner--scroll');\n\n      inputWrapper.value =\n        inputRef.value.$el.querySelector('.el-input__wrapper') as HTMLDivElement;\n      // inputSuffix.value =\n      //   inputWrapper.value?.querySelector('.el-input__suffix') as HTMLDivElement;\n      inputPrefix.value =\n        inputWrapper.value?.querySelector('.el-input__prefix') as HTMLDivElement;\n\n      createPlaceholderElement();\n      setPlaceholderPosition();\n    });\n\n    function createPlaceholderElement() {\n      const div = document.createElement('div');\n      const span = document.createElement('span');\n      div.classList.add('el-input__placeholder');\n      div.appendChild(span);\n      span.textContent = placeholderText.value;\n      inputWrapper.value?.appendChild(div);\n    }\n\n    function setPlaceholderPosition() {\n      // const suffixWidth = inputSuffix.value?.offsetWidth || 0;\n      const prefixWidth = inputPrefix.value?.offsetWidth || 0;\n      const inputWidth = input.value?.offsetWidth || 0;\n      placeholder.value =\n        inputWrapper.value?.querySelector('.el-input__placeholder') as HTMLDivElement;\n      const placeholderWidth = placeholder.value?.offsetWidth || 0;\n\n      if (prefixWidth) {\n        placeholder.value.style.left = `${prefixWidth + 8}px`;\n      }\n\n      // 字幕滚动\n      if (placeholderWidth > inputWidth) {\n        placeholder.value.classList.add('is-scroll');\n        placeholder.value.style.maxWidth = `${inputWidth}px`;\n      } else {\n        placeholder.value.classList.remove('is-scroll');\n      }\n    }\n\n    function setPlaceholderVisibility(val: boolean) {\n      if (placeholder.value) {\n        val\n          ? placeholder.value.style.opacity = '0'\n          : placeholder.value.style.opacity = '1';\n      }\n    }\n\n    const _expose: ExposeInput = new Proxy(\n      {} as ExposeInput,\n      {\n        get(_, key, receiver) {\n          if (inputRef.value === null) return;\n          if (key === 'ref') {\n            return Reflect.get(inputRef.value, '_ref', receiver);\n          }\n          return Reflect.get(inputRef.value, key, receiver);\n        },\n        has(_, key) {\n          if (inputRef.value === null) return false;\n          return Reflect.has(inputRef.value, key);\n        }\n      }\n    );\n    expose(_expose) as unknown as (exposed?: ExposeInput) => void;\n\n    return {\n      inputRef\n    };\n  }\n}) as unknown as typeof ElInput;\n</script>\n"],"names":["_resolveComponent","_openBlock","_createBlock","_mergeProps","_createSlots","_withCtx"],"mappings":";;;;6BACEA,iBAgBU,SAAA;AAdH,SAAAC,UAAY,GAAAC,YAAA,oBAAAC,WAAA;AAAA,IAChB,KAAA;AAAA,IACA,OAAA;AAAA,IACa,YAAA,KAAA;AAAA,IAGqB,uBAAA,OAArB,OAAE,OAAQ,CAAA,IAAA,CAAA,QAAA,KAAA,MAAA,qBAAA,GAAA;AAAA,EAAA,GAAA,KAAA,MAAA,GAAAC,YAAA,EAAA,GAAA,KAAA;AAAA,eACrB,KAAU,QAAA,CAAA,MAAA,aAAA;;QAEX,MAAA;AAAA,QAAA,IAAAC,QAAA,CAAA,cAAA;AAAA;;;;;;;"}