@seemusic/ui-components/lib/components/SopInput/SopInput.vue2.mjs.map

A Vue 3 UI Library. Uses Composable.

{"version":3,"file":"SopInput.vue2.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":[],"mappings":";;AA8BA,MAAA,YAAe,gBAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY,EAAE,QAAQ;AAAA,EACtB,OAAO;AAAA,IACL,YAAY,EAAE,SAAS,GAAG;AAAA,IAC1B,mBAAmB;AAAA,MACjB,MAAM;AAAA,MACN,SAAS;AAAA,IACX;AAAA,EACF;AAAA,EACA,OAAO,CAAC,mBAAmB;AAAA,EAC3B,MAAM,OAAO,EAAE,OAAO,UAAU;AAE9B,UAAM,kBAAkB,IAAI,MAAM,eAAyB,EAAE;AACvD,UAAA,WAAW,IAA0B,IAAI;AAE/C,UAAM,eAAe;AAErB,UAAM,cAAc;AACpB,UAAM,QAAQ;AACd,UAAM,cAAc;AAGpB,UAAM,MAAM,MAAM,aAAa,CAAC,QAAQ;AACtC,sBAAgB,QAAQ;AAAA,IAAA,GACvB,EAAE,WAAW,KAAA,CAAM;AAEhB,UAAA,MAAM,MAAM,YAAY,MAAM;AACT,+BAAA,MAAM,eAAe,EAAE;AAAA,IAAA,GAC/C,EAAE,WAAW,KAAA,CAAM;AAEtB,cAAU,MAAM;;AACd,UAAI,SAAS,UAAU;AAAM;AACvB,YAAA,QAAQ,SAAS,MAAM,MAAM;AAE/B,UAAA,CAAC,MAAM,mBAAmB;AACtB,cAAA,MAAM,UAAU,OAAO,yBAAyB;AACtD;AAAA,MACF;AACM,YAAA,MAAM,UAAU,IAAI,yBAAyB;AAEnD,mBAAa,QACX,SAAS,MAAM,IAAI,cAAc,oBAAoB;AAGvD,kBAAY,SACV,kBAAa,UAAb,mBAAoB,cAAc;AAEX;AACF;IAAA,CACxB;AAED,aAAS,2BAA2B;;AAC5B,YAAA,MAAM,SAAS,cAAc,KAAK;AAClC,YAAA,OAAO,SAAS,cAAc,MAAM;AACtC,UAAA,UAAU,IAAI,uBAAuB;AACzC,UAAI,YAAY,IAAI;AACpB,WAAK,cAAc,gBAAgB;AACtB,yBAAA,UAAA,mBAAO,YAAY;AAAA,IAClC;AAEA,aAAS,yBAAyB;;AAE1B,YAAA,gBAAc,iBAAY,UAAZ,mBAAmB,gBAAe;AAChD,YAAA,eAAa,WAAM,UAAN,mBAAa,gBAAe;AAC/C,kBAAY,SACV,kBAAa,UAAb,mBAAoB,cAAc;AAC9B,YAAA,qBAAmB,iBAAY,UAAZ,mBAAmB,gBAAe;AAE3D,UAAI,aAAa;AACf,oBAAY,MAAM,MAAM,OAAO,GAAG,cAAc,CAAC;AAAA,MACnD;AAGA,UAAI,mBAAmB,YAAY;AACrB,oBAAA,MAAM,UAAU,IAAI,WAAW;AAC3C,oBAAY,MAAM,MAAM,WAAW,GAAG,UAAU;AAAA,MAAA,OAC3C;AACO,oBAAA,MAAM,UAAU,OAAO,WAAW;AAAA,MAChD;AAAA,IACF;AAEA,aAAS,yBAAyB,KAAc;AAC9C,UAAI,YAAY,OAAO;AAEjB,cAAA,YAAY,MAAM,MAAM,UAAU,MAClC,YAAY,MAAM,MAAM,UAAU;AAAA,MACxC;AAAA,IACF;AAEA,UAAM,UAAuB,IAAI;AAAA,MAC/B,CAAC;AAAA,MACD;AAAA,QACE,IAAI,GAAG,KAAK,UAAU;AACpB,cAAI,SAAS,UAAU;AAAM;AAC7B,cAAI,QAAQ,OAAO;AACjB,mBAAO,QAAQ,IAAI,SAAS,OAAO,QAAQ,QAAQ;AAAA,UACrD;AACA,iBAAO,QAAQ,IAAI,SAAS,OAAO,KAAK,QAAQ;AAAA,QAClD;AAAA,QACA,IAAI,GAAG,KAAK;AACV,cAAI,SAAS,UAAU;AAAa,mBAAA;AACpC,iBAAO,QAAQ,IAAI,SAAS,OAAO,GAAG;AAAA,QACxC;AAAA,MACF;AAAA,IAAA;AAEF,WAAO,OAAO;AAEP,WAAA;AAAA,MACL;AAAA,IAAA;AAAA,EAEJ;AACF,CAAC;"}