bootstrap-vue-next
Version:
Seamless integration of Vue 3, Bootstrap 5, and TypeScript for modern, type-safe UI development
197 lines (196 loc) • 6.54 kB
JavaScript
import { L as useToNumber } from "./dist-Dn5blevd.mjs";
import { s as isVisible } from "./dom-AhkaSoh8.mjs";
import { t as useDefaults } from "./useDefaults-CCWS15M8.mjs";
import { n as normalizeInput, t as useFormInput } from "./useFormInput-DeJGz9t9.mjs";
import { computed, createElementBlock, defineComponent, mergeModels, nextTick, normalizeClass, normalizeStyle, onMounted, openBlock, ref, toValue, unref, useModel, useTemplateRef } from "vue";
//#region src/composables/useTextareaResize.ts
var useTextareaResize = (input, { maxRows, noAutoShrink, rows }) => {
const height = ref(0);
const maxRowsNumber = useToNumber(computed(() => toValue(maxRows) || NaN), {
method: "parseInt",
nanToZero: true
});
const rowsNumber = useToNumber(rows, {
method: "parseInt",
nanToZero: true
});
const computedMinRows = computed(() => Math.max(rowsNumber.value || 2, 2));
const computedMaxRows = computed(() => Math.max(computedMinRows.value, maxRowsNumber.value || 0));
const computedRows = computed(() => computedMinRows.value === computedMaxRows.value ? computedMinRows.value : null);
const handleHeightChange = async () => {
if (!input.value || !isVisible(input.value)) {
height.value = null;
return;
}
const computedStyle = getComputedStyle(input.value);
const lineHeight = Number.parseFloat(computedStyle.lineHeight) || 1;
const border = (Number.parseFloat(computedStyle.borderTopWidth) || 0) + (Number.parseFloat(computedStyle.borderBottomWidth) || 0);
const padding = (Number.parseFloat(computedStyle.paddingTop) || 0) + (Number.parseFloat(computedStyle.paddingBottom) || 0);
const offset = border + padding;
const minHeight = lineHeight * computedMinRows.value + offset;
const oldHeight = input.value.style.height || computedStyle.height;
height.value = "auto";
await nextTick();
if (!input.value) return;
const { scrollHeight } = input.value;
height.value = oldHeight;
await nextTick();
if (!input.value) return;
const contentRows = Math.max((scrollHeight - padding) / lineHeight, 2);
const rows = Math.min(Math.max(contentRows, computedMinRows.value), computedMaxRows.value);
const newHeight = Math.max(Math.ceil(rows * lineHeight + offset), minHeight);
if (toValue(noAutoShrink) && (Number.parseFloat(oldHeight.toString()) || 0) > newHeight) {
height.value = oldHeight;
return;
}
height.value = `${newHeight}px`;
};
onMounted(handleHeightChange);
return {
onInput: handleHeightChange,
computedStyles: computed(() => ({
resize: "none",
height: typeof height.value === "string" ? height.value : height.value ? `${height.value}px` : void 0
})),
computedRows
};
};
//#endregion
//#region src/components/BFormTextarea/BFormTextarea.vue?vue&type=script&setup=true&lang.ts
var _hoisted_1 = [
"id",
"name",
"form",
"value",
"disabled",
"placeholder",
"required",
"autocomplete",
"readonly",
"aria-required",
"aria-invalid",
"rows",
"wrap"
];
//#endregion
//#region src/components/BFormTextarea/BFormTextarea.vue
var BFormTextarea_default = /* @__PURE__ */ defineComponent({
__name: "BFormTextarea",
props: /* @__PURE__ */ mergeModels({
noResize: {
type: Boolean,
default: false
},
rows: { default: 2 },
wrap: { default: "soft" },
noAutoShrink: {
type: Boolean,
default: false
},
maxRows: { default: void 0 },
ariaInvalid: {
type: [Boolean, String],
default: void 0
},
autocomplete: { default: void 0 },
autofocus: {
type: Boolean,
default: false
},
disabled: {
type: Boolean,
default: false
},
form: { default: void 0 },
formatter: {
type: Function,
default: void 0
},
id: { default: void 0 },
lazyFormatter: {
type: Boolean,
default: false
},
list: { default: void 0 },
name: { default: void 0 },
placeholder: { default: void 0 },
plaintext: {
type: Boolean,
default: false
},
readonly: {
type: Boolean,
default: false
},
required: {
type: Boolean,
default: false
},
size: { default: void 0 },
state: {
type: [Boolean, null],
default: void 0
},
debounce: { default: 0 },
debounceMaxWait: { default: NaN }
}, {
"modelValue": { default: "" },
"modelModifiers": {}
}),
emits: ["update:modelValue"],
setup(__props, { expose: __expose }) {
const props = useDefaults(__props, "BFormTextarea");
const [modelValue, modelModifiers] = useModel(__props, "modelValue", { set: (v) => normalizeInput(v, modelModifiers) });
const input = useTemplateRef("_input");
const { computedId, computedAriaInvalid, onInput, stateClass, onChange, onBlur, focus, blur, isDisabled } = useFormInput(props, input, modelValue, modelModifiers);
const computedClasses = computed(() => [
stateClass.value,
props.plaintext ? "form-control-plaintext" : "form-control",
{ [`form-control-${props.size}`]: !!props.size }
]);
const { computedStyles: resizeStyles, onInput: handleHeightChange, computedRows } = useTextareaResize(input, {
maxRows: () => props.maxRows,
rows: () => props.rows,
noAutoShrink: () => props.noAutoShrink
});
const computedStyles = computed(() => ({
resize: props.noResize ? "none" : void 0,
...props.maxRows || props.noAutoShrink ? resizeStyles.value : void 0
}));
__expose({
blur,
element: input,
flushDebounce: onBlur,
focus
});
return (_ctx, _cache) => {
return openBlock(), createElementBlock("textarea", {
id: unref(computedId),
ref: "_input",
class: normalizeClass(computedClasses.value),
name: unref(props).name || void 0,
form: unref(props).form || void 0,
value: unref(modelValue) ?? void 0,
disabled: unref(isDisabled),
placeholder: unref(props).placeholder,
required: unref(props).required || void 0,
autocomplete: unref(props).autocomplete || void 0,
readonly: unref(props).readonly || unref(props).plaintext,
"aria-required": unref(props).required || void 0,
"aria-invalid": unref(computedAriaInvalid),
rows: unref(computedRows) || 2,
style: normalizeStyle(computedStyles.value),
wrap: unref(props).wrap || void 0,
onInput: _cache[0] || (_cache[0] = (e) => {
unref(onInput)(e);
unref(handleHeightChange)();
}),
onChange: _cache[1] || (_cache[1] = (...args) => unref(onChange) && unref(onChange)(...args)),
onBlur: _cache[2] || (_cache[2] = (...args) => unref(onBlur) && unref(onBlur)(...args))
}, null, 46, _hoisted_1);
};
}
});
//#endregion
export { BFormTextarea_default as t };
//# sourceMappingURL=BFormTextarea-ClcoJrSM.mjs.map