@vuesax-alpha/nightly
Version:
A Component Library for Vue 3
375 lines (372 loc) • 14.1 kB
JavaScript
import { defineComponent, useSlots, computed, openBlock, createElementBlock, normalizeClass, normalizeStyle, createElementVNode, unref, withDirectives, mergeProps, isRef, vModelDynamic, withModifiers, toDisplayString, createCommentVNode, renderSlot, createVNode, Transition, withCtx, Fragment, renderList } from 'vue';
import { IconLoading, IconClose } from '../../icon/index.mjs';
import { VsCollapseTransition } from '../../collapse-transition/index.mjs';
import '../../../hooks/index.mjs';
import '../../../utils/index.mjs';
import { inputProps, inputEmits } from './input.mjs';
import './composables/index.mjs';
import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
import { useDeprecated } from '../../../hooks/use-deprecated/index.mjs';
import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
import { useId } from '../../../hooks/use-id/index.mjs';
import { useInput } from './composables/use-input.mjs';
import { useVuesaxBaseComponent } from '../../../hooks/use-base-component/index.mjs';
import { useColor } from '../../../hooks/use-common-props/index.mjs';
import { getVsColor } from '../../../utils/color.mjs';
import { useProp } from '../../../hooks/use-prop/index.mjs';
import { NOOP } from '@vue/shared';
const _hoisted_1 = ["id", "type", "disabled"];
const _hoisted_2 = ["for"];
const _hoisted_3 = ["for"];
const __default__ = defineComponent({
inheritAttrs: false,
name: "VsInput"
});
const _sfc_main = defineComponent({
...__default__,
props: inputProps,
emits: inputEmits,
setup(__props, { expose: __expose, emit }) {
var _a;
const props = __props;
const slots = useSlots();
useDeprecated(
{
from: "border",
type: "Prop",
version: "VuesaxAlpha",
scope: "vs-input",
ref: "https://vuesax-alpha.vercel.app/components/input#style",
replacement: "inputStyle"
},
computed(() => props.border)
);
useDeprecated(
{
from: "shadow",
type: "Prop",
version: "VuesaxAlpha",
scope: "vs-input",
ref: "https://vuesax-alpha.vercel.app/components/input#style",
replacement: "inputStyle"
},
computed(() => props.shadow)
);
useDeprecated(
{
from: "transparent",
type: "Prop",
version: "VuesaxAlpha",
scope: "vs-input",
ref: "https://vuesax-alpha.vercel.app/components/input#style",
replacement: "inputStyle"
},
computed(() => props.transparent)
);
useDeprecated(
{
from: "labelPlaceholder",
type: "Prop",
version: "VuesaxAlpha",
scope: "vs-input",
ref: "https://vuesax-alpha.vercel.app/components/input#label",
replacement: "labelFloat"
},
computed(() => !!props.labelPlaceholder)
);
useDeprecated(
{
from: "square",
type: "Prop",
version: "VuesaxAlpha",
scope: "vs-input",
ref: "https://vuesax-alpha.vercel.app/components/input#shape",
replacement: "shape"
},
computed(() => !!props.square)
);
const ns = useNamespace("input");
const inputId = (_a = props.id) != null ? _a : useId();
const messageType = ["success", "warn", "danger", "primary", "dark"];
const {
model,
inputType,
isVisiblePassword,
isShowPassword,
focused,
hovering,
inputRef,
blur,
handleBlur,
handleKeydown,
focus,
handleFocus,
handleChange,
select,
clickIcon,
handleShowPassword,
handleMouseLeave,
handleMouseEnter,
handleInput,
showClear,
clear
} = useInput(props, emit);
const vsBaseClasses = useVuesaxBaseComponent(useColor());
const inputKls = computed(() => [
vsBaseClasses,
ns.b(),
props.wrapClasses,
{ [ns.is(props.inputStyle)]: !!props.inputStyle },
ns.is("block", props.block),
ns.is("focus", focused.value),
ns.is("hovering", hovering.value),
ns.is(props.shape),
ns.is("text-white", props.textWhite),
{ [ns.m(`state-${props.state}`)]: !!props.state },
{ [ns.m("has-label")]: props.label || props.labelFloat },
{ [ns.m("has-color")]: props.color },
{ [ns.m("has-icon")]: slots.icon },
{ [ns.m("icon-after")]: props.iconAfter },
{ [ns.m("icon-eye")]: props.showPassword },
{ [ns.m("icon-clearable")]: showClear.value }
]);
const inputStyle = computed(() => [
ns.cssVar({
color: getVsColor(props.color)
}),
props.wrapStyles
]);
const progressState = computed(() => {
const progress = useProp("progress");
if (!progress.value || progress.value <= 33)
return "danger";
if (progress.value <= 66)
return "warn";
return "success";
});
__expose({
focus,
blur,
select,
clear,
inputRef
});
return (_ctx, _cache) => {
return openBlock(), createElementBlock(
"div",
{
class: normalizeClass(inputKls.value),
style: normalizeStyle(inputStyle.value)
},
[
createElementVNode(
"div",
{
class: normalizeClass([unref(ns).e("wrapper"), unref(ns).is("disabled", _ctx.disabled)]),
onMouseenter: _cache[13] || (_cache[13] = (...args) => unref(handleMouseEnter) && unref(handleMouseEnter)(...args)),
onMouseleave: _cache[14] || (_cache[14] = (...args) => unref(handleMouseLeave) && unref(handleMouseLeave)(...args))
},
[
withDirectives(createElementVNode("input", mergeProps(_ctx.$attrs, {
id: unref(inputId),
ref_key: "inputRef",
ref: inputRef,
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(model) ? model.value = $event : null),
type: unref(inputType),
disabled: _ctx.disabled,
class: [unref(ns).e("original"), unref(ns).is("disabled", _ctx.disabled)],
placeholder: "",
onInput: _cache[1] || (_cache[1] = (...args) => unref(handleInput) && unref(handleInput)(...args)),
onFocus: _cache[2] || (_cache[2] = (...args) => unref(handleFocus) && unref(handleFocus)(...args)),
onBlur: _cache[3] || (_cache[3] = (...args) => unref(handleBlur) && unref(handleBlur)(...args)),
onChange: _cache[4] || (_cache[4] = (...args) => unref(handleChange) && unref(handleChange)(...args)),
onKeydown: _cache[5] || (_cache[5] = (...args) => unref(handleKeydown) && unref(handleKeydown)(...args))
}), null, 16, _hoisted_1), [
[vModelDynamic, unref(model)]
]),
_ctx.placeholder || _ctx.labelFloat ? (openBlock(), createElementBlock("label", {
key: 0,
for: unref(inputId),
class: normalizeClass([
unref(ns).e("placeholder"),
{ [unref(ns).em("placeholder", "float")]: _ctx.labelFloat },
{
[unref(ns).em("placeholder", "hidden")]: unref(model) || unref(model) === 0 || unref(inputType) == "date" || unref(inputType) == "time"
}
]),
onMousedown: _cache[6] || (_cache[6] = withModifiers(
(...args) => unref(NOOP) && unref(NOOP)(...args),
["prevent"]
))
}, toDisplayString(_ctx.placeholder || _ctx.label), 43, _hoisted_2)) : createCommentVNode("v-if", true),
!_ctx.labelFloat ? (openBlock(), createElementBlock("label", {
key: 1,
for: unref(inputId),
class: normalizeClass([unref(ns).e("label")]),
onMousedown: _cache[7] || (_cache[7] = withModifiers(
(...args) => unref(NOOP) && unref(NOOP)(...args),
["prevent"]
))
}, toDisplayString(_ctx.label), 43, _hoisted_3)) : createCommentVNode("v-if", true),
_ctx.$slots.icon ? (openBlock(), createElementBlock(
"span",
{
key: 2,
class: normalizeClass([unref(ns).e("icon")]),
onMousedown: _cache[8] || (_cache[8] = withModifiers(
(...args) => unref(NOOP) && unref(NOOP)(...args),
["prevent"]
)),
onClick: _cache[9] || (_cache[9] = (...args) => unref(clickIcon) && unref(clickIcon)(...args))
},
[
renderSlot(_ctx.$slots, "icon")
],
34
)) : createCommentVNode("v-if", true),
_ctx.loading ? (openBlock(), createElementBlock(
"div",
{
key: 3,
class: normalizeClass(unref(ns).e("loading"))
},
[
createVNode(unref(IconLoading))
],
2
)) : createCommentVNode("v-if", true),
createVNode(Transition, { name: "clearable-transition" }, {
default: withCtx(() => [
unref(showClear) ? (openBlock(), createElementBlock(
"div",
{
key: 0,
class: normalizeClass(unref(ns).e("clearable"))
},
[
createVNode(unref(IconClose), {
onClick: unref(clear),
onMousedown: withModifiers(unref(NOOP), ["prevent"])
}, null, 8, ["onClick", "onMousedown"])
],
2
)) : createCommentVNode("v-if", true)
]),
_: 1
}),
createVNode(Transition, { name: "clearable-transition" }, {
default: withCtx(() => [
unref(isShowPassword) ? (openBlock(), createElementBlock(
"span",
{
key: 0,
class: normalizeClass(unref(ns).em("icon", "password")),
onClick: _cache[11] || (_cache[11] = (...args) => unref(handleShowPassword) && unref(handleShowPassword)(...args)),
onMousedown: _cache[12] || (_cache[12] = withModifiers(
(...args) => unref(NOOP) && unref(NOOP)(...args),
["prevent"]
))
},
[
createElementVNode(
"i",
{
class: normalizeClass(["bx", unref(isVisiblePassword) ? "bx-show-alt" : "bx-hide"]),
onMousedown: _cache[10] || (_cache[10] = withModifiers(
(...args) => unref(NOOP) && unref(NOOP)(...args),
["prevent"]
))
},
null,
34
)
],
34
)) : createCommentVNode("v-if", true)
]),
_: 1
}),
createElementVNode(
"div",
{
class: normalizeClass(unref(ns).e("affects"))
},
[
createElementVNode(
"div",
{
class: normalizeClass(unref(ns).em("affects", "1"))
},
null,
2
),
createElementVNode(
"div",
{
class: normalizeClass(unref(ns).em("affects", "2"))
},
null,
2
)
],
2
)
],
34
),
_ctx.progress ? (openBlock(), createElementBlock(
"div",
{
key: 0,
class: normalizeClass([unref(ns).e("progress"), unref(ns).em("progress", progressState.value)])
},
[
createElementVNode(
"div",
{
class: normalizeClass(unref(ns).em("progress", "bar")),
style: normalizeStyle({ width: `${_ctx.progress}%` })
},
null,
6
)
],
2
)) : createCommentVNode("v-if", true),
(openBlock(), createElementBlock(
Fragment,
null,
renderList(messageType, (message) => {
return createVNode(
unref(VsCollapseTransition),
{ key: message },
{
default: withCtx(() => [
_ctx.$slots[`message-${message}`] ? (openBlock(), createElementBlock(
"div",
{
key: 0,
class: normalizeClass([unref(ns).e("message"), unref(ns).em("message", message)])
},
[
renderSlot(_ctx.$slots, `message-${message}`)
],
2
)) : createCommentVNode("v-if", true)
]),
_: 2
},
1024
);
}),
64
))
],
6
);
};
}
});
var Input = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "/home/runner/work/vuesax-alpha/vuesax-alpha/packages/components/input/src/input.vue"]]);
export { Input as default };
//# sourceMappingURL=input2.mjs.map