vuestic-ui
Version:
Vue 3 UI Framework
134 lines (133 loc) • 14.7 kB
JavaScript
import { _ as __default__ } from "./VaInputWrapper.vue_vue_type_script_lang.js";
import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, createVNode, withCtx, createBlock, mergeProps, renderSlot, normalizeProps, guardReactiveProps, createCommentVNode, withDirectives, vModelDynamic, toDisplayString } from "vue";
import { _ as _export_sfc } from "../../../plugin-vue_export-helper.js";
const _style_0 = ':root,\n:host {\n --va-input-wrapper-width: var(--va-form-element-default-width);\n --va-input-wrapper-color: var(--va-primary);\n --va-input-wrapper-background: var(--va-background-element, #f5f9fb);\n --va-input-wrapper-background-opacity: 1;\n --va-input-wrapper-border-width: var(--va-form-element-border-width);\n --va-input-wrapper-border-color: var(--va-background-border);\n --va-input-wrapper-border-radius: var(--va-form-element-border-radius);\n --va-input-wrapper-min-width: var(--va-form-element-min-width);\n --va-input-wrapper-display: inline-block;\n --va-input-wrapper-cursor: text;\n --va-input-wrapper-min-height: 36px;\n --va-input-wrapper-validation-background-opacity: 0.1;\n /* Counter container */\n --va-input-wrapper-counter-line-height: 1.5;\n --va-input-wrapper-counter-font-size: 0.8rem;\n --va-input-wrapper-counter-color: var(--va-secondary);\n /* Content Wrapper */\n --va-input-wrapper-horizontal-padding: 0.5rem;\n --va-input-wrapper-items-gap: 0.5rem;\n /* Validation */\n --va-input-wrapper-success-background: var(--va-input-success-color);\n --va-input-wrapper-error-background: var(--va-input-error-color);\n}\n.va-input-wrapper {\n --va-input-wrapper-background: var(--02c55fce);\n --va-input-wrapper-color: var(--3bfbbb12);\n --va-input-wrapper-text-color: var(--5668b436);\n cursor: var(--va-input-wrapper-cursor);\n font-family: var(--va-font-family);\n display: inline-block;\n flex-direction: column;\n vertical-align: middle;\n min-width: auto;\n max-width: 100%;\n flex-grow: 0;\n flex-shrink: 1;\n}\n.va-input-wrapper__fieldset {\n border: none;\n}\n.va-input-wrapper__size-keeper {\n width: var(--va-input-wrapper-width);\n min-width: 100%;\n max-width: 100%;\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n.va-input-wrapper__container {\n display: flex;\n align-items: center;\n gap: var(--va-input-content-items-gap);\n flex: 1;\n}\n.va-input-wrapper__field {\n position: relative;\n display: flex;\n align-items: center;\n flex: 1;\n min-height: var(--va-input-wrapper-min-height);\n border-color: var(--va-input-wrapper-border-color);\n border-style: solid;\n border-width: var(--va-input-wrapper-border-width);\n border-radius: var(--va-input-wrapper-border-radius);\n padding: 0 var(--va-input-wrapper-horizontal-padding);\n gap: var(--va-input-wrapper-items-gap);\n z-index: 0;\n overflow: hidden;\n color: var(--5668b436);\n align-self: stretch;\n z-index: 0;\n}\n.va-input-wrapper__field::after {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n content: "";\n background: var(--va-input-wrapper-background);\n opacity: var(--va-input-wrapper-background-opacity);\n z-index: -1;\n transition: all 0.3s ease-in-out;\n}\n.va-input-wrapper__field input,\n.va-input-wrapper__field textarea {\n color: inherit;\n}\n.va-input-wrapper > .va-message-list {\n margin-top: 2px;\n}\n.va-input-wrapper__prepend-inner, .va-input-wrapper__append-inner {\n display: flex;\n justify-content: center;\n align-content: center;\n align-items: center;\n}\n.va-input-wrapper__text {\n width: 100%;\n position: relative;\n min-height: var(--va-input-line-height);\n display: flex;\n align-items: center;\n align-self: stretch;\n overflow: hidden;\n caret-color: var(--va-input-wrapper-text-color);\n color: var(--va-input-wrapper-text-color);\n}\n.va-input-wrapper__text input::-moz-placeholder, .va-input-wrapper__text textarea::-moz-placeholder {\n color: inherit;\n opacity: 0.5;\n}\n.va-input-wrapper__text input::placeholder,\n.va-input-wrapper__text textarea::placeholder {\n color: inherit;\n opacity: 0.5;\n}\n.va-input-wrapper__text input {\n scrollbar-color: var(--va-input-scroll-color) transparent;\n scrollbar-width: thin;\n transition: scrollbar-color 0.3s ease-in-out;\n width: 100%;\n min-height: var(--va-input-line-height);\n background-color: transparent;\n border-style: none;\n outline: none;\n line-height: var(--va-input-line-height);\n font-size: var(--va-input-font-size);\n font-family: inherit;\n font-weight: var(--va-input-font-weight);\n font-style: var(--va-input-font-style);\n font-stretch: var(--va-input-font-stretch);\n letter-spacing: var(--va-input-letter-spacing);\n cursor: inherit;\n align-self: stretch;\n}\n.va-input-wrapper__text input::-webkit-scrollbar {\n width: 4px;\n height: 4px;\n}\n.va-input-wrapper__text input::-webkit-scrollbar-track {\n box-shadow: none;\n border-radius: 10px;\n}\n.va-input-wrapper__text input::-webkit-scrollbar-thumb {\n background: var(--va-input-scroll-color);\n opacity: 0.3;\n border-radius: 2px;\n -webkit-transition: background 0.3s ease-in-out;\n transition: background 0.3s ease-in-out;\n}\n.va-input-wrapper__icons {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.va-input-wrapper__icons__reset:focus {\n outline: 2px solid var(--va-focus) !important;\n border-radius: 2px;\n}\n.va-input-wrapper__counter-wrapper {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n color: var(--va-input-wrapper-counter-color);\n font-size: var(--va-input-wrapper-counter-font-size);\n line-height: var(--va-input-wrapper-counter-line-height);\n}\n.va-input-wrapper__label {\n max-width: 100%;\n width: 100%;\n display: block;\n}\n.va-input-wrapper__label--inner {\n position: absolute;\n left: 0;\n top: 0;\n padding-top: 1px;\n}\n.va-input-wrapper__label--outer {\n margin-bottom: 2px;\n}\n.va-input-wrapper--labeled-inner .va-input-wrapper__text {\n padding-top: 12px;\n box-sizing: content-box;\n}\n.va-input-wrapper--labeled-inner .va-input-wrapper__field {\n height: calc(var(--va-input-wrapper-min-height) - var(--va-input-wrapper-border-width) * 2);\n}\n.va-input-wrapper--labeled-inner textarea {\n margin-top: 0;\n}\n.va-input-wrapper--solid {\n --va-input-wrapper-border-color: var(--va-input-color);\n}\n.va-input-wrapper--bordered .va-input-wrapper__field {\n border-top-left-radius: var(--va-input-wrapper-border-radius);\n border-top-right-radius: var(--va-input-wrapper-border-radius);\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n border-left-width: 0;\n border-right-width: 0;\n border-top-width: 0;\n}\n.va-input-wrapper--bordered .va-input-wrapper__field::after {\n bottom: 0;\n border-color: var(--va-input-wrapper-border-color);\n border-bottom-style: solid;\n}\n.va-input-wrapper--error {\n --va-input-wrapper-border-color: var(--va-input-wrapper-error-background, var(--va-danger));\n --va-input-wrapper-background: var(--va-input-wrapper-error-background, var(--va-danger));\n --va-input-wrapper-background-opacity: var(--va-input-wrapper-validation-background-opacity);\n}\n.va-input-wrapper--success {\n --va-input-wrapper-border-color: var(--va-input-wrapper-success-background, var(--va-success));\n --va-input-wrapper-background: var(--va-input-wrapper-success-background, var(--va-success));\n --va-input-wrapper-background-opacity: var(--va-input-wrapper-validation-background-opacity);\n}\n.va-input-wrapper--focused {\n --va-input-wrapper-border-color: var(--va-input-wrapper-color);\n}\n.va-input-wrapper--readonly {\n cursor: default;\n}\n.va-input-wrapper--disabled {\n cursor: default;\n opacity: 0.4;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n}';
const _hoisted_1 = { class: "va-input-wrapper__fieldset va-input-wrapper__size-keeper" };
const _hoisted_2 = { class: "va-input-wrapper__container" };
const _hoisted_3 = { class: "va-input-wrapper__text" };
const _hoisted_4 = ["placeholder", "readonly", "disabled"];
const _hoisted_5 = ["id"];
const _hoisted_6 = { class: "va-input-wrapper__counter" };
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_VaInputLabel = resolveComponent("VaInputLabel");
const _component_va_icon = resolveComponent("va-icon");
const _component_va_message_list = resolveComponent("va-message-list");
return openBlock(), createElementBlock("div", {
class: normalizeClass(["va-input-wrapper", _ctx.wrapperClass]),
onClick: _cache[6] || (_cache[6] = ($event) => _ctx.$emit("click", $event))
}, [
createElementVNode("fieldset", _hoisted_1, [
createVNode(_component_va_message_list, {
color: _ctx.messagesColor,
"model-value": _ctx.messagesComputed,
limit: _ctx.errorLimit,
"inherit-slots": ["message", "messages"]
}, {
default: withCtx(({ ariaAttributes: messagesChildAriaAttributes }) => [
(_ctx.$props.label || _ctx.$slots.label) && !_ctx.$props.innerLabel ? (openBlock(), createBlock(_component_VaInputLabel, mergeProps({
key: 0,
class: "va-input-wrapper__label va-input-wrapper__label--outer"
}, _ctx.vaInputLabelProps, { id: _ctx.labelId }), {
default: withCtx((bind) => [
renderSlot(_ctx.$slots, "label", normalizeProps(guardReactiveProps(bind)))
]),
_: 3
}, 16, ["id"])) : createCommentVNode("", true),
createElementVNode("div", _hoisted_2, [
_ctx.$slots.prepend ? (openBlock(), createElementBlock("div", {
key: 0,
class: "va-input-wrapper__prepend-inner",
onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click-prepend"))
}, [
renderSlot(_ctx.$slots, "prepend")
])) : createCommentVNode("", true),
createElementVNode("div", {
onClick: _cache[4] || (_cache[4] = ($event) => _ctx.$emit("click-field", $event)),
class: "va-input-wrapper__field"
}, [
_ctx.$slots.prependInner ? (openBlock(), createElementBlock("div", {
key: 0,
class: "va-input-wrapper__prepend-inner",
ref: "container",
onClick: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("click-prepend-inner", $event))
}, [
renderSlot(_ctx.$slots, "prependInner")
], 512)) : createCommentVNode("", true),
createElementVNode("div", _hoisted_3, [
(_ctx.$props.label || _ctx.$slots.label) && _ctx.$props.innerLabel ? (openBlock(), createBlock(_component_VaInputLabel, mergeProps({
key: 0,
class: "va-input-wrapper__label va-input-wrapper__label--inner"
}, _ctx.vaInputLabelProps, { id: _ctx.labelId }), {
default: withCtx((bind) => [
renderSlot(_ctx.$slots, "label", normalizeProps(guardReactiveProps(bind)))
]),
_: 3
}, 16, ["id"])) : createCommentVNode("", true),
renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({ ariaAttributes: { ...messagesChildAriaAttributes, ..._ctx.ariaAttributes }, value: _ctx.vModel })), () => [
withDirectives(createElementVNode("input", mergeProps({ ...messagesChildAriaAttributes, ..._ctx.ariaAttributes }, {
"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => _ctx.vModel = $event),
ref: "inputRef",
placeholder: _ctx.$props.placeholder,
readonly: _ctx.$props.readonly,
disabled: _ctx.$props.disabled
}), null, 16, _hoisted_4), [
[vModelDynamic, _ctx.vModel]
])
])
]),
_ctx.success ? (openBlock(), createBlock(_component_va_icon, {
key: 1,
color: "success",
name: "va-check-circle",
class: "va-input-wrapper__icon va-input-wrapper__icon--success"
})) : createCommentVNode("", true),
_ctx.error ? (openBlock(), createBlock(_component_va_icon, {
key: 2,
color: "danger",
name: "va-warning",
class: "va-input-wrapper__icon va-input-wrapper__icon--error"
})) : createCommentVNode("", true),
_ctx.$props.loading ? (openBlock(), createBlock(_component_va_icon, {
key: 3,
color: _ctx.$props.color,
name: "va-loading",
spin: "counter-clockwise",
class: "va-input-wrapper__icon va-input-wrapper__icon--loading"
}, null, 8, ["color"])) : createCommentVNode("", true),
renderSlot(_ctx.$slots, "icon"),
_ctx.$slots.appendInner ? (openBlock(), createElementBlock("div", {
key: 4,
class: "va-input-wrapper__append-inner",
onClick: _cache[3] || (_cache[3] = ($event) => _ctx.$emit("click-append-inner", $event))
}, [
renderSlot(_ctx.$slots, "appendInner")
])) : createCommentVNode("", true)
]),
_ctx.$slots.append ? (openBlock(), createElementBlock("div", {
key: 1,
class: "va-input-wrapper__append-inner",
onClick: _cache[5] || (_cache[5] = ($event) => _ctx.$emit("click-append"))
}, [
renderSlot(_ctx.$slots, "append")
])) : createCommentVNode("", true)
]),
_ctx.isCounterVisible ? (openBlock(), createElementBlock("div", {
key: 1,
class: "va-input-wrapper__counter-wrapper",
id: _ctx.characterCountId
}, [
renderSlot(_ctx.$slots, "counter", normalizeProps(guardReactiveProps({ valueLength: _ctx.counterValue, maxLength: _ctx.$props.maxLength })), () => [
createElementVNode("div", _hoisted_6, toDisplayString(_ctx.counterComputed), 1)
])
], 8, _hoisted_5)) : createCommentVNode("", true)
]),
_: 3
}, 8, ["color", "model-value", "limit"])
])
], 2);
}
const _VaInputWrapper = /* @__PURE__ */ _export_sfc(__default__, [["render", _sfc_render], ["styles", [...(__default__.components ? Object.values(__default__.components) : []).map((c) => c.styles || []).flat(), _style_0]]]);
export {
_VaInputWrapper as _
};
//# sourceMappingURL=VaInputWrapper.js.map