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