@seemusic/ui-components
Version:
A Vue 3 UI Library. Uses Composable.
100 lines (99 loc) • 3.38 kB
JavaScript
import { defineComponent, ref, watch, onMounted } from "vue";
import { ElInput } from "element-plus";
const _sfc_main = defineComponent({
name: "SopInput",
components: { ElInput },
props: {
modelValue: { default: "" },
scrollPlaceholder: {
type: Boolean,
default: false
}
},
emits: ["update:modelValue"],
setup(props, { attrs, expose }) {
const placeholderText = ref(attrs.placeholder || "");
const inputRef = ref(null);
const inputWrapper = ref();
const inputPrefix = ref();
const input = ref();
const placeholder = ref();
watch(() => attrs.placeholder, (val) => {
placeholderText.value = val;
}, { immediate: true });
watch(() => props.modelValue, () => {
setPlaceholderVisibility(props.modelValue !== "");
}, { immediate: true });
onMounted(() => {
var _a;
if (inputRef.value === null)
return;
input.value = inputRef.value.$refs.input;
if (!props.scrollPlaceholder) {
input.value.classList.remove("el-input__inner--scroll");
return;
}
input.value.classList.add("el-input__inner--scroll");
inputWrapper.value = inputRef.value.$el.querySelector(".el-input__wrapper");
inputPrefix.value = (_a = inputWrapper.value) == null ? void 0 : _a.querySelector(".el-input__prefix");
createPlaceholderElement();
setPlaceholderPosition();
});
function createPlaceholderElement() {
var _a;
const div = document.createElement("div");
const span = document.createElement("span");
div.classList.add("el-input__placeholder");
div.appendChild(span);
span.textContent = placeholderText.value;
(_a = inputWrapper.value) == null ? void 0 : _a.appendChild(div);
}
function setPlaceholderPosition() {
var _a, _b, _c, _d;
const prefixWidth = ((_a = inputPrefix.value) == null ? void 0 : _a.offsetWidth) || 0;
const inputWidth = ((_b = input.value) == null ? void 0 : _b.offsetWidth) || 0;
placeholder.value = (_c = inputWrapper.value) == null ? void 0 : _c.querySelector(".el-input__placeholder");
const placeholderWidth = ((_d = placeholder.value) == null ? void 0 : _d.offsetWidth) || 0;
if (prefixWidth) {
placeholder.value.style.left = `${prefixWidth + 8}px`;
}
if (placeholderWidth > inputWidth) {
placeholder.value.classList.add("is-scroll");
placeholder.value.style.maxWidth = `${inputWidth}px`;
} else {
placeholder.value.classList.remove("is-scroll");
}
}
function setPlaceholderVisibility(val) {
if (placeholder.value) {
val ? placeholder.value.style.opacity = "0" : placeholder.value.style.opacity = "1";
}
}
const _expose = new Proxy(
{},
{
get(_, key, receiver) {
if (inputRef.value === null)
return;
if (key === "ref") {
return Reflect.get(inputRef.value, "_ref", receiver);
}
return Reflect.get(inputRef.value, key, receiver);
},
has(_, key) {
if (inputRef.value === null)
return false;
return Reflect.has(inputRef.value, key);
}
}
);
expose(_expose);
return {
inputRef
};
}
});
export {
_sfc_main as default
};
//# sourceMappingURL=SopInput.vue2.mjs.map