mirror of
https://github.com/CorentinTh/it-tools.git
synced 2025-05-06 06:17:11 -04:00
289 lines
12 KiB
JavaScript
289 lines
12 KiB
JavaScript
import { openBlock, createElementBlock, createElementVNode, defineComponent, ref, toRefs, watch, nextTick, computed, onMounted, unref, mergeProps, withCtx, createVNode, createBlock, createCommentVNode, useSSRContext } from 'vue';
|
|
import { d as defineThemes, c as useAppTheme, a as __unplugin_components_0, _ as _export_sfc } from './chunk-6003391e.js';
|
|
import { ssrRenderAttrs, ssrRenderAttr, ssrInterpolate, ssrRenderSlot, ssrRenderClass, ssrIncludeBooleanAttr, ssrRenderDynamicModel, ssrRenderComponent } from 'vue/server-renderer';
|
|
import { g as generateRandomId } from './chunk-11f44f81.js';
|
|
import { u as useValidation } from './chunk-35c3d701.js';
|
|
import { useVModel } from '@vueuse/core';
|
|
|
|
const _hoisted_1$2 = {
|
|
viewBox: "0 0 24 24",
|
|
width: "1.2em",
|
|
height: "1.2em"
|
|
};
|
|
const _hoisted_2$2 = /*#__PURE__*/createElementVNode("path", {
|
|
fill: "currentColor",
|
|
d: "M11.83 9L15 12.16V12a3 3 0 0 0-3-3h-.17m-4.3.8l1.55 1.55c-.05.21-.08.42-.08.65a3 3 0 0 0 3 3c.22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53a5 5 0 0 1-5-5c0-.79.2-1.53.53-2.2M2 4.27l2.28 2.28l.45.45C3.08 8.3 1.78 10 1 12c1.73 4.39 6 7.5 11 7.5c1.55 0 3.03-.3 4.38-.84l.43.42L19.73 22L21 20.73L3.27 3M12 7a5 5 0 0 1 5 5c0 .64-.13 1.26-.36 1.82l2.93 2.93c1.5-1.25 2.7-2.89 3.43-4.75c-1.73-4.39-6-7.5-11-7.5c-1.4 0-2.74.25-4 .7l2.17 2.15C10.74 7.13 11.35 7 12 7Z"
|
|
}, null, -1);
|
|
const _hoisted_3$2 = [
|
|
_hoisted_2$2
|
|
];
|
|
|
|
function render$2(_ctx, _cache) {
|
|
return (openBlock(), createElementBlock("svg", _hoisted_1$2, _hoisted_3$2))
|
|
}
|
|
|
|
const __unplugin_components_3$1 = { name: 'mdi-eye-off', render: render$2 };
|
|
/* vite-plugin-components disabled */
|
|
|
|
const _hoisted_1$1 = {
|
|
viewBox: "0 0 24 24",
|
|
width: "1.2em",
|
|
height: "1.2em"
|
|
};
|
|
const _hoisted_2$1 = /*#__PURE__*/createElementVNode("path", {
|
|
fill: "currentColor",
|
|
d: "M12 9a3 3 0 0 0-3 3a3 3 0 0 0 3 3a3 3 0 0 0 3-3a3 3 0 0 0-3-3m0 8a5 5 0 0 1-5-5a5 5 0 0 1 5-5a5 5 0 0 1 5 5a5 5 0 0 1-5 5m0-12.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5Z"
|
|
}, null, -1);
|
|
const _hoisted_3$1 = [
|
|
_hoisted_2$1
|
|
];
|
|
|
|
function render$1(_ctx, _cache) {
|
|
return (openBlock(), createElementBlock("svg", _hoisted_1$1, _hoisted_3$1))
|
|
}
|
|
|
|
const __unplugin_components_2 = { name: 'mdi-eye', render: render$1 };
|
|
/* vite-plugin-components disabled */
|
|
|
|
const _hoisted_1 = {
|
|
viewBox: "0 0 24 24",
|
|
width: "1.2em",
|
|
height: "1.2em"
|
|
};
|
|
const _hoisted_2 = /*#__PURE__*/createElementVNode("path", {
|
|
fill: "currentColor",
|
|
d: "M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41Z"
|
|
}, null, -1);
|
|
const _hoisted_3 = [
|
|
_hoisted_2
|
|
];
|
|
|
|
function render(_ctx, _cache) {
|
|
return (openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_3))
|
|
}
|
|
|
|
const __unplugin_components_1 = { name: 'mdi-close', render };
|
|
/* vite-plugin-components disabled */
|
|
|
|
const { useTheme } = defineThemes({
|
|
dark: {
|
|
backgroundColor: "#333333",
|
|
borderColor: "#333333",
|
|
focus: {
|
|
backgroundColor: "#1ea54c1a"
|
|
}
|
|
},
|
|
light: {
|
|
backgroundColor: "#ffffff",
|
|
borderColor: "#e0e0e69e",
|
|
focus: {
|
|
backgroundColor: "#ffffff"
|
|
}
|
|
}
|
|
});
|
|
|
|
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
__name: "c-input-text",
|
|
__ssrInlineRender: true,
|
|
props: {
|
|
value: { default: "" },
|
|
id: { default: generateRandomId },
|
|
placeholder: { default: "Input text" },
|
|
label: { default: void 0 },
|
|
readonly: { type: Boolean, default: false },
|
|
disabled: { type: Boolean, default: false },
|
|
validationRules: { default: () => [] },
|
|
validationWatch: { default: void 0 },
|
|
validation: { default: void 0 },
|
|
labelPosition: { default: "top" },
|
|
labelWidth: { default: "auto" },
|
|
labelAlign: { default: "left" },
|
|
clearable: { type: Boolean, default: false },
|
|
testId: { default: void 0 },
|
|
autocapitalize: { default: void 0 },
|
|
autocomplete: { default: void 0 },
|
|
autocorrect: { default: void 0 },
|
|
spellcheck: { type: [String, Boolean], default: void 0 },
|
|
rawText: { type: Boolean, default: false },
|
|
type: { default: "text" },
|
|
multiline: { type: Boolean, default: false },
|
|
rows: { default: 3 },
|
|
autosize: { type: Boolean, default: false },
|
|
autofocus: { type: Boolean, default: false },
|
|
monospace: { type: Boolean, default: false }
|
|
},
|
|
emits: ["update:value"],
|
|
setup(__props, { expose: __expose, emit }) {
|
|
const props = __props;
|
|
const value = useVModel(props, "value", emit);
|
|
const showPassword = ref(false);
|
|
const { id, placeholder, label, validationRules, labelPosition, labelWidth, labelAlign, autosize, readonly, disabled, clearable, type, multiline, rows, rawText, autofocus, monospace } = toRefs(props);
|
|
const validation = props.validation ?? useValidation({
|
|
rules: validationRules,
|
|
source: value,
|
|
watch: props.validationWatch
|
|
});
|
|
const theme = useTheme();
|
|
const appTheme = useAppTheme();
|
|
const textareaRef = ref();
|
|
const inputRef = ref();
|
|
const inputWrapperRef = ref();
|
|
watch(
|
|
[value, autosize, multiline, inputWrapperRef, textareaRef],
|
|
() => nextTick(() => {
|
|
if (props.multiline && autosize.value) {
|
|
resizeTextarea();
|
|
}
|
|
}),
|
|
{ immediate: true }
|
|
);
|
|
function resizeTextarea() {
|
|
if (!textareaRef.value || !inputWrapperRef.value) {
|
|
return;
|
|
}
|
|
const scrollHeight = textareaRef.value.scrollHeight + 2;
|
|
inputWrapperRef.value.style.height = `${scrollHeight}px`;
|
|
}
|
|
const htmlInputType = computed(() => {
|
|
if (props.type === "password" && !showPassword.value) {
|
|
return "password";
|
|
}
|
|
return "text";
|
|
});
|
|
function focus() {
|
|
if (textareaRef.value) {
|
|
textareaRef.value.focus();
|
|
}
|
|
if (inputRef.value) {
|
|
inputRef.value.focus();
|
|
}
|
|
}
|
|
function blur() {
|
|
if (textareaRef.value) {
|
|
textareaRef.value.blur?.();
|
|
}
|
|
if (inputRef.value) {
|
|
inputRef.value.blur?.();
|
|
}
|
|
}
|
|
onMounted(() => {
|
|
if (autofocus.value) {
|
|
focus();
|
|
}
|
|
});
|
|
__expose({
|
|
inputWrapperRef,
|
|
focus,
|
|
blur
|
|
});
|
|
return (_ctx, _push, _parent, _attrs) => {
|
|
const _component_c_button = __unplugin_components_0;
|
|
const _component_icon_mdi_close = __unplugin_components_1;
|
|
const _component_icon_mdi_eye = __unplugin_components_2;
|
|
const _component_icon_mdi_eye_off = __unplugin_components_3$1;
|
|
const _cssVars = { style: {
|
|
"--1578999c": unref(appTheme).error.color,
|
|
"--b18512fa": unref(appTheme).error.color + 22,
|
|
"--15951ced": unref(labelWidth),
|
|
"--1460862c": unref(labelAlign),
|
|
"--e1b5bfd6": unref(theme).backgroundColor,
|
|
"--e9ed6052": unref(theme).borderColor,
|
|
"--1728643c": unref(appTheme).text.baseColor,
|
|
"--ffa9e664": unref(appTheme).text.mutedColor,
|
|
"--ac68db28": unref(appTheme).primary.color,
|
|
"--0ab89a02": unref(theme).focus.backgroundColor
|
|
} };
|
|
_push(`<div${ssrRenderAttrs(mergeProps({
|
|
class: ["c-input-text", { disabled: unref(disabled), "error": !unref(validation).isValid, "label-left": unref(labelPosition) === "left", multiline: unref(multiline) }]
|
|
}, _attrs, _cssVars))} data-v-c4df69f5>`);
|
|
if (unref(label)) {
|
|
_push(`<label${ssrRenderAttr("for", unref(id))} class="label" data-v-c4df69f5>${ssrInterpolate(unref(label))}</label>`);
|
|
} else {
|
|
_push(`<!---->`);
|
|
}
|
|
_push(`<div class="feedback-wrapper" data-v-c4df69f5><div class="input-wrapper" data-v-c4df69f5>`);
|
|
ssrRenderSlot(_ctx.$slots, "prefix", {}, null, _push, _parent);
|
|
if (unref(multiline)) {
|
|
_push(`<textarea${ssrRenderAttr("id", unref(id))} class="${ssrRenderClass([{
|
|
"leading-5 !font-mono": unref(monospace)
|
|
}, "input"])}"${ssrRenderAttr("placeholder", unref(placeholder))}${ssrIncludeBooleanAttr(unref(readonly)) ? " readonly" : ""}${ssrIncludeBooleanAttr(unref(disabled)) ? " disabled" : ""}${ssrRenderAttr("data-test-id", _ctx.testId)}${ssrRenderAttr("autocapitalize", _ctx.autocapitalize ?? (unref(rawText) ? "off" : void 0))}${ssrRenderAttr("autocomplete", _ctx.autocomplete ?? (unref(rawText) ? "off" : void 0))}${ssrRenderAttr("autocorrect", _ctx.autocorrect ?? (unref(rawText) ? "off" : void 0))}${ssrRenderAttr("spellcheck", _ctx.spellcheck ?? (unref(rawText) ? false : void 0))}${ssrRenderAttr("rows", unref(rows))} data-v-c4df69f5>${ssrInterpolate(unref(value))}</textarea>`);
|
|
} else {
|
|
_push(`<input${ssrRenderAttr("id", unref(id))}${ssrRenderDynamicModel(unref(htmlInputType), unref(value), null)}${ssrRenderAttr("type", unref(htmlInputType))} class="${ssrRenderClass([{
|
|
"leading-5 !font-mono": unref(monospace)
|
|
}, "input"])}" size="1"${ssrRenderAttr("placeholder", unref(placeholder))}${ssrIncludeBooleanAttr(unref(readonly)) ? " readonly" : ""}${ssrIncludeBooleanAttr(unref(disabled)) ? " disabled" : ""}${ssrRenderAttr("data-test-id", _ctx.testId)}${ssrRenderAttr("autocapitalize", _ctx.autocapitalize ?? (unref(rawText) ? "off" : void 0))}${ssrRenderAttr("autocomplete", _ctx.autocomplete ?? (unref(rawText) ? "off" : void 0))}${ssrRenderAttr("autocorrect", _ctx.autocorrect ?? (unref(rawText) ? "off" : void 0))}${ssrRenderAttr("spellcheck", _ctx.spellcheck ?? (unref(rawText) ? false : void 0))} data-v-c4df69f5>`);
|
|
}
|
|
if (unref(clearable) && unref(value)) {
|
|
_push(ssrRenderComponent(_component_c_button, {
|
|
variant: "text",
|
|
circle: "",
|
|
size: "small",
|
|
onClick: ($event) => value.value = ""
|
|
}, {
|
|
default: withCtx((_, _push2, _parent2, _scopeId) => {
|
|
if (_push2) {
|
|
_push2(ssrRenderComponent(_component_icon_mdi_close, null, null, _parent2, _scopeId));
|
|
} else {
|
|
return [
|
|
createVNode(_component_icon_mdi_close)
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent));
|
|
} else {
|
|
_push(`<!---->`);
|
|
}
|
|
if (unref(type) === "password") {
|
|
_push(ssrRenderComponent(_component_c_button, {
|
|
variant: "text",
|
|
circle: "",
|
|
size: "small",
|
|
onClick: ($event) => showPassword.value = !unref(showPassword)
|
|
}, {
|
|
default: withCtx((_, _push2, _parent2, _scopeId) => {
|
|
if (_push2) {
|
|
if (!unref(showPassword)) {
|
|
_push2(ssrRenderComponent(_component_icon_mdi_eye, null, null, _parent2, _scopeId));
|
|
} else {
|
|
_push2(`<!---->`);
|
|
}
|
|
if (unref(showPassword)) {
|
|
_push2(ssrRenderComponent(_component_icon_mdi_eye_off, null, null, _parent2, _scopeId));
|
|
} else {
|
|
_push2(`<!---->`);
|
|
}
|
|
} else {
|
|
return [
|
|
!unref(showPassword) ? (openBlock(), createBlock(_component_icon_mdi_eye, { key: 0 })) : createCommentVNode("", true),
|
|
unref(showPassword) ? (openBlock(), createBlock(_component_icon_mdi_eye_off, { key: 1 })) : createCommentVNode("", true)
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent));
|
|
} else {
|
|
_push(`<!---->`);
|
|
}
|
|
ssrRenderSlot(_ctx.$slots, "suffix", {}, null, _push, _parent);
|
|
_push(`</div>`);
|
|
if (!unref(validation).isValid) {
|
|
_push(`<span class="feedback" data-v-c4df69f5>${ssrInterpolate(unref(validation).message)}</span>`);
|
|
} else {
|
|
_push(`<!---->`);
|
|
}
|
|
_push(`</div></div>`);
|
|
};
|
|
}
|
|
});
|
|
|
|
/* unplugin-vue-components disabled */const cInputText_vue_vue_type_style_index_0_scoped_c4df69f5_lang = '';
|
|
|
|
const _sfc_setup = _sfc_main.setup;
|
|
_sfc_main.setup = (props, ctx) => {
|
|
const ssrContext = useSSRContext();
|
|
(ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/ui/c-input-text/c-input-text.vue");
|
|
return _sfc_setup ? _sfc_setup(props, ctx) : void 0;
|
|
};
|
|
const __unplugin_components_3 = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-c4df69f5"]]);
|
|
|
|
export { __unplugin_components_3 as _ };
|