Update
This commit is contained in:
root
@@ -1,3 +1,10 @@
|
||||
/* Normalize */
|
||||
.ui-system-input-value {
|
||||
outline: none;
|
||||
}
|
||||
/* Normalize end */
|
||||
|
||||
|
||||
/* Common */
|
||||
.ui-system-input {
|
||||
--padding-horizontal: var(--ui-space-inline-sm);
|
||||
@@ -110,13 +117,17 @@
|
||||
--dropdown-padding: var(--icon-padding-size);
|
||||
}
|
||||
|
||||
.ui-system-input .ui-icon-set {
|
||||
.ui-system-input-value ~ .ui-icon-set {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
--ui-icon-set__icon-color: var(--ui-color-base-3);
|
||||
--ui-icon-set__icon-size: var(--icon-size);
|
||||
}
|
||||
.ui-system-input-value.ui-system-input-value_multi ~ .ui-icon-set {
|
||||
top: var(--padding-horizontal);
|
||||
transform: none;
|
||||
}
|
||||
|
||||
|
||||
/* Container */
|
||||
@@ -125,6 +136,7 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: var(--align);
|
||||
padding: 0 0 6px 0;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
@@ -154,8 +166,12 @@
|
||||
}
|
||||
|
||||
.ui-system-input-label.--error {
|
||||
margin-bottom: 0;
|
||||
margin-top: var(--ui-space-stack-2xs2-neg);
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: var(--inline-label-margin);
|
||||
margin: 0;
|
||||
padding: 0 var(--ui-space-inline-2xs);
|
||||
background: var(--label-background);
|
||||
color: var(--ui-color-accent-main-alert);
|
||||
}
|
||||
|
||||
@@ -175,6 +191,9 @@
|
||||
line-height: var(--ui-font-line-height-sm);
|
||||
text-align: var(--align);
|
||||
}
|
||||
.ui-system-input-value.ui-system-input-value_multi {
|
||||
padding-top: calc(var(--padding-vertical) + 2px);
|
||||
}
|
||||
|
||||
.ui-system-input-value::placeholder {
|
||||
color: var(--placeholder-color);
|
||||
|
||||
@@ -30,6 +30,10 @@ this.BX.UI.System = this.BX.UI.System || {};
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
rowsQuantity: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
default: ''
|
||||
@@ -111,7 +115,21 @@ this.BX.UI.System = this.BX.UI.System || {};
|
||||
]">
|
||||
<div v-if="label" class="ui-system-input-label" :class="{ '--inline': labelInline }">{{ label }}</div>
|
||||
<div class="ui-system-input-container">
|
||||
<textarea
|
||||
v-if="rowsQuantity > 1"
|
||||
v-model="value"
|
||||
class="ui-system-input-value ui-system-input-value_multi"
|
||||
:placeholder="placeholder"
|
||||
:disabled="disabled"
|
||||
:rows="rowsQuantity"
|
||||
ref="input"
|
||||
@click="$emit('click', $event)"
|
||||
@focus="$emit('focus', $event)"
|
||||
@blur="$emit('blur', $event)"
|
||||
@input="$emit('input', $event)"
|
||||
/>
|
||||
<input
|
||||
v-else
|
||||
v-model="value"
|
||||
class="ui-system-input-value"
|
||||
:placeholder="placeholder"
|
||||
@@ -121,12 +139,12 @@ this.BX.UI.System = this.BX.UI.System || {};
|
||||
@focus="$emit('focus', $event)"
|
||||
@blur="$emit('blur', $event)"
|
||||
@input="$emit('input', $event)"
|
||||
>
|
||||
/>
|
||||
<BIcon v-if="icon" class="ui-system-input-icon" :name="icon"/>
|
||||
<BIcon v-if="withClear" class="ui-system-input-cross" :name="Outline.CROSS_L" @click="$emit('clear')"/>
|
||||
<BIcon v-if="dropdown" class="ui-system-input-dropdown" :name="Outline.CHEVRON_DOWN_L"/>
|
||||
</div>
|
||||
<div v-if="error?.trim() && !disabled" class="ui-system-input-label --inline --error">{{ error }}</div>
|
||||
<div v-if="error?.trim() && !disabled" class="ui-system-input-label --error">{{ error }}</div>
|
||||
</div>
|
||||
`
|
||||
};
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -1 +1 @@
|
||||
{"version":3,"file":"input.bundle.map.js","names":["this","BX","UI","System","exports","ui_iconSet_api_vue","InputSize","Object","freeze","Lg","Md","Sm","InputDesign","Primary","Grey","LightGrey","Disabled","Naked","BInput","name","components","BIcon","expose","props","modelValue","type","String","default","label","labelInline","Boolean","placeholder","error","size","design","icon","center","withClear","dropdown","active","emits","setup","Outline","computed","value","get","set","$emit","disabled","template","vue","Vue","Input","IconSet"],"sources":["input.bundle.js"],"mappings":"AACAA,KAAKC,GAAKD,KAAKC,IAAM,CAAC,EACtBD,KAAKC,GAAGC,GAAKF,KAAKC,GAAGC,IAAM,CAAC,EAC5BF,KAAKC,GAAGC,GAAGC,OAASH,KAAKC,GAAGC,GAAGC,QAAU,CAAC,GACzC,SAAUC,EAAQC,GAClB,aAEA,MAAMC,EAAYC,OAAOC,OAAO,CAC9BC,GAAI,IACJC,GAAI,IACJC,GAAI,MAEN,MAAMC,EAAcL,OAAOC,OAAO,CAChCK,QAAS,UACTC,KAAM,OACNC,UAAW,aACXC,SAAU,WACVC,MAAO,UAIT,MAAMC,EAAS,CACbC,KAAM,SACNC,WAAY,CACVC,MAAOhB,EAAmBgB,OAE5BC,OAAQ,CAAC,QACTC,MAAO,CACLC,WAAY,CACVC,KAAMC,OACNC,QAAS,IAEXC,MAAO,CACLH,KAAMC,OACNC,QAAS,IAEXE,YAAa,CACXJ,KAAMK,QACNH,QAAS,OAEXI,YAAa,CACXN,KAAMC,OACNC,QAAS,IAEXK,MAAO,CACLP,KAAMC,OACNC,QAAS,IAEXM,KAAM,CACJR,KAAMC,OACNC,QAASrB,EAAUG,IAErByB,OAAQ,CACNT,KAAMC,OACNC,QAASf,EAAYE,MAEvBqB,KAAM,CACJV,KAAMC,OACNC,QAAS,IAEXS,OAAQ,CACNX,KAAMK,QACNH,QAAS,OAEXU,UAAW,CACTZ,KAAMK,QACNH,QAAS,OAEXW,SAAU,CACRb,KAAMK,QACNH,QAAS,OAEXY,OAAQ,CACNd,KAAMK,QACNH,QAAS,QAGba,MAAO,CAAC,oBAAqB,QAAS,QAAS,OAAQ,QAAS,SAChE,KAAAC,GACE,MAAO,CACLC,QAASrC,EAAmBqC,QAEhC,EACAC,SAAU,CACRC,MAAO,CACL,GAAAC,GACE,OAAO7C,KAAKwB,UACd,EACA,GAAAsB,CAAIF,GACF5C,KAAK+C,MAAM,oBAAqBH,EAClC,GAEF,QAAAI,GACE,OAAOhD,KAAKkC,SAAWtB,EAAYI,QACrC,GAEFiC,SAAU,+wCAqCZ,IAAIC,EAAmB3C,OAAOC,OAAO,CACpCF,UAAWA,EACXM,YAAaA,EACbM,OAAQA,IAGTd,EAAQ+C,IAAMD,EACd9C,EAAQE,UAAYA,EACpBF,EAAQQ,YAAcA,CAEvB,EA3IA,CA2IGZ,KAAKC,GAAGC,GAAGC,OAAOiD,MAAQpD,KAAKC,GAAGC,GAAGC,OAAOiD,OAAS,CAAC,EAAGnD,GAAGC,GAAGmD","ignoreList":[]}
|
||||
{"version":3,"file":"input.bundle.map.js","names":["this","BX","UI","System","exports","ui_iconSet_api_vue","InputSize","Object","freeze","Lg","Md","Sm","InputDesign","Primary","Grey","LightGrey","Disabled","Naked","BInput","name","components","BIcon","expose","props","modelValue","type","String","default","rowsQuantity","Number","label","labelInline","Boolean","placeholder","error","size","design","icon","center","withClear","dropdown","active","emits","setup","Outline","computed","value","get","set","$emit","disabled","template","vue","Vue","Input","IconSet"],"sources":["input.bundle.js"],"mappings":"AACAA,KAAKC,GAAKD,KAAKC,IAAM,CAAC,EACtBD,KAAKC,GAAGC,GAAKF,KAAKC,GAAGC,IAAM,CAAC,EAC5BF,KAAKC,GAAGC,GAAGC,OAASH,KAAKC,GAAGC,GAAGC,QAAU,CAAC,GACzC,SAAUC,EAAQC,GAClB,aAEA,MAAMC,EAAYC,OAAOC,OAAO,CAC9BC,GAAI,IACJC,GAAI,IACJC,GAAI,MAEN,MAAMC,EAAcL,OAAOC,OAAO,CAChCK,QAAS,UACTC,KAAM,OACNC,UAAW,aACXC,SAAU,WACVC,MAAO,UAIT,MAAMC,EAAS,CACbC,KAAM,SACNC,WAAY,CACVC,MAAOhB,EAAmBgB,OAE5BC,OAAQ,CAAC,QACTC,MAAO,CACLC,WAAY,CACVC,KAAMC,OACNC,QAAS,IAEXC,aAAc,CACZH,KAAMI,OACNF,QAAS,GAEXG,MAAO,CACLL,KAAMC,OACNC,QAAS,IAEXI,YAAa,CACXN,KAAMO,QACNL,QAAS,OAEXM,YAAa,CACXR,KAAMC,OACNC,QAAS,IAEXO,MAAO,CACLT,KAAMC,OACNC,QAAS,IAEXQ,KAAM,CACJV,KAAMC,OACNC,QAASrB,EAAUG,IAErB2B,OAAQ,CACNX,KAAMC,OACNC,QAASf,EAAYE,MAEvBuB,KAAM,CACJZ,KAAMC,OACNC,QAAS,IAEXW,OAAQ,CACNb,KAAMO,QACNL,QAAS,OAEXY,UAAW,CACTd,KAAMO,QACNL,QAAS,OAEXa,SAAU,CACRf,KAAMO,QACNL,QAAS,OAEXc,OAAQ,CACNhB,KAAMO,QACNL,QAAS,QAGbe,MAAO,CAAC,oBAAqB,QAAS,QAAS,OAAQ,QAAS,SAChE,KAAAC,GACE,MAAO,CACLC,QAASvC,EAAmBuC,QAEhC,EACAC,SAAU,CACRC,MAAO,CACL,GAAAC,GACE,OAAO/C,KAAKwB,UACd,EACA,GAAAwB,CAAIF,GACF9C,KAAKiD,MAAM,oBAAqBH,EAClC,GAEF,QAAAI,GACE,OAAOlD,KAAKoC,SAAWxB,EAAYI,QACrC,GAEFmC,SAAU,kuDAmDZ,IAAIC,EAAmB7C,OAAOC,OAAO,CACpCF,UAAWA,EACXM,YAAaA,EACbM,OAAQA,IAGTd,EAAQiD,IAAMD,EACdhD,EAAQE,UAAYA,EACpBF,EAAQQ,YAAcA,CAEvB,EA7JA,CA6JGZ,KAAKC,GAAGC,GAAGC,OAAOmD,MAAQtD,KAAKC,GAAGC,GAAGC,OAAOmD,OAAS,CAAC,EAAGrD,GAAGC,GAAGqD","ignoreList":[]}
|
||||
@@ -1 +1 @@
|
||||
.ui-system-input{--padding-horizontal:var(--ui-space-inline-sm);--inline-label-margin:var(--ui-space-inline-xs);--border-color:var(--ui-color-base-5);--border-color-active:var(--ui-color-accent-main-link);--padding-vertical:var(--ui-space-stack-xs);--font-size:var(--ui-font-size-lg);--label-font-size:var(--ui-font-size-sm);--label-line-height:var(--ui-font-line-height-2xs)}.ui-system-input.--m{--padding-vertical:var(--ui-space-stack-2xs2);--font-size:var(--ui-font-size-md)}.ui-system-input.--s{--padding-horizontal:var(--ui-space-inline-xs);--padding-vertical:var(--ui-space-stack-2xs);--font-size:var(--ui-font-size-xs);--line-height:var(--ui-font-line-height-3xs);--label-font-size:var(--ui-font-size-4xs);--label-line-height:var(--ui-font-line-height-3xs)}.ui-system-input{--label-margin:var(--ui-space-stack-2xs2);--label-color:var(--ui-color-base-3);--background:var(--ui-color-bg-content-primary);--text-color:var(--ui-color-base-1);--placeholder-color:var(--ui-color-base-4);--icon-color:var(--ui-color-base-3);--label-background:var(--background)}.ui-system-input.--primary{--border-color:var(--ui-color-g-content-blue-3)}.ui-system-input.--light-grey{--border-color-active:var(--ui-color-accent-main-primary);--border-color:var(--ui-color-base-7)}.ui-system-input.--disabled{--label-color:var(--ui-color-base-5);--border-color:transparent;--background:var(--ui-color-base-7);--placeholder-color:var(--ui-color-base-5);--text-color:var(--ui-color-base-5);--icon-color:var(--ui-color-base-5);--label-background:var(--ui-color-bg-content-primary);pointer-events:none}.ui-system-input.--naked{--border-color:transparent;--border-color-active:transparent;--background:none;--padding-horizontal:0px;--inline-label-margin:0px;--label-margin:0px}.ui-system-input:not(.--naked).--error{--border-color:var(--ui-color-accent-main-alert);--border-color-active:var(--ui-color-accent-main-alert)}.ui-system-input{--align:initial}.ui-system-input.--center{--inline-label-margin:0px;--align:center}.ui-system-input{--icon-size:20px;--icon-padding-size:calc(var(--icon-size) + var(--ui-space-inline-2xs));--icon-padding:0px;--clear-padding:0px;--dropdown-padding:0px}.ui-system-input.--with-icon{--icon-padding:var(--icon-padding-size)}.ui-system-input.--with-clear{--clear-padding:var(--icon-padding-size)}.ui-system-input.--with-dropdown{--dropdown-padding:var(--icon-padding-size)}.ui-system-input .ui-icon-set{position:absolute;top:50%;transform:translateY(-50%);--ui-icon-set__icon-color:var(--ui-color-base-3);--ui-icon-set__icon-size:var(--icon-size)}.ui-system-input{flex-direction:column;align-items:var(--align);min-width:0}.ui-system-input,.ui-system-input-container{position:relative;display:flex}.ui-system-input-label{max-width:-webkit-max-content;max-width:max-content;margin-bottom:var(--label-margin);color:var(--label-color);font-size:var(--label-font-size);line-height:var(--label-line-height)}.ui-system-input-label.--inline{z-index:1;margin-bottom:var(--ui-space-stack-2xs2-neg);margin-left:var(--inline-label-margin);padding:0 var(--ui-space-inline-2xs);border-radius:var(--ui-border-radius-2xs);background:var(--label-background)}.ui-system-input-label.--error{margin-bottom:0;margin-top:var(--ui-space-stack-2xs2-neg);color:var(--ui-color-accent-main-alert)}.ui-system-input-value{flex:1;min-width:0;padding:var(--padding-vertical);padding-left:calc(var(--padding-horizontal) + var(--icon-padding));padding-right:calc(var(--padding-horizontal) + var(--clear-padding) + var(--dropdown-padding));border-radius:var(--ui-border-radius-sm);border:var(--ui-border-width-thin) solid var(--border-color);background:var(--background);color:var(--text-color);font-size:var(--font-size);line-height:var(--ui-font-line-height-sm);text-align:var(--align)}.ui-system-input-value::placeholder{color:var(--placeholder-color)}.ui-system-input-value:focus,.ui-system-input.--active .ui-system-input-value{border-color:var(--border-color-active)}.ui-system-input-icon{left:var(--padding-horizontal);pointer-events:none}.ui-system-input-cross{right:calc(var(--padding-horizontal) + var(--dropdown-padding));opacity:var(--ui-opacity-50);cursor:pointer}.ui-system-input-cross:hover{opacity:var(--ui-opacity-70)}.ui-system-input-dropdown{--ui-icon-set__icon-color:var(--ui-color-base-2);right:var(--padding-horizontal);pointer-events:none}
|
||||
.ui-system-input-value{outline:none}.ui-system-input{--padding-horizontal:var(--ui-space-inline-sm);--inline-label-margin:var(--ui-space-inline-xs);--border-color:var(--ui-color-base-5);--border-color-active:var(--ui-color-accent-main-link);--padding-vertical:var(--ui-space-stack-xs);--font-size:var(--ui-font-size-lg);--label-font-size:var(--ui-font-size-sm);--label-line-height:var(--ui-font-line-height-2xs)}.ui-system-input.--m{--padding-vertical:var(--ui-space-stack-2xs2);--font-size:var(--ui-font-size-md)}.ui-system-input.--s{--padding-horizontal:var(--ui-space-inline-xs);--padding-vertical:var(--ui-space-stack-2xs);--font-size:var(--ui-font-size-xs);--line-height:var(--ui-font-line-height-3xs);--label-font-size:var(--ui-font-size-4xs);--label-line-height:var(--ui-font-line-height-3xs)}.ui-system-input{--label-margin:var(--ui-space-stack-2xs2);--label-color:var(--ui-color-base-3);--background:var(--ui-color-bg-content-primary);--text-color:var(--ui-color-base-1);--placeholder-color:var(--ui-color-base-4);--icon-color:var(--ui-color-base-3);--label-background:var(--background)}.ui-system-input.--primary{--border-color:var(--ui-color-g-content-blue-3)}.ui-system-input.--light-grey{--border-color-active:var(--ui-color-accent-main-primary);--border-color:var(--ui-color-base-7)}.ui-system-input.--disabled{--label-color:var(--ui-color-base-5);--border-color:transparent;--background:var(--ui-color-base-7);--placeholder-color:var(--ui-color-base-5);--text-color:var(--ui-color-base-5);--icon-color:var(--ui-color-base-5);--label-background:var(--ui-color-bg-content-primary);pointer-events:none}.ui-system-input.--naked{--border-color:transparent;--border-color-active:transparent;--background:none;--padding-horizontal:0px;--inline-label-margin:0px;--label-margin:0px}.ui-system-input:not(.--naked).--error{--border-color:var(--ui-color-accent-main-alert);--border-color-active:var(--ui-color-accent-main-alert)}.ui-system-input{--align:initial}.ui-system-input.--center{--inline-label-margin:0px;--align:center}.ui-system-input{--icon-size:20px;--icon-padding-size:calc(var(--icon-size) + var(--ui-space-inline-2xs));--icon-padding:0px;--clear-padding:0px;--dropdown-padding:0px}.ui-system-input.--with-icon{--icon-padding:var(--icon-padding-size)}.ui-system-input.--with-clear{--clear-padding:var(--icon-padding-size)}.ui-system-input.--with-dropdown{--dropdown-padding:var(--icon-padding-size)}.ui-system-input-value~.ui-icon-set{position:absolute;top:50%;transform:translateY(-50%);--ui-icon-set__icon-color:var(--ui-color-base-3);--ui-icon-set__icon-size:var(--icon-size)}.ui-system-input-value.ui-system-input-value_multi~.ui-icon-set{top:var(--padding-horizontal);transform:none}.ui-system-input{flex-direction:column;align-items:var(--align);padding:0 0 6px;min-width:0}.ui-system-input,.ui-system-input-container{position:relative;display:flex}.ui-system-input-label{max-width:-webkit-max-content;max-width:max-content;margin-bottom:var(--label-margin);color:var(--label-color);font-size:var(--label-font-size);line-height:var(--label-line-height)}.ui-system-input-label.--inline{z-index:1;margin-bottom:var(--ui-space-stack-2xs2-neg);margin-left:var(--inline-label-margin);border-radius:var(--ui-border-radius-2xs)}.ui-system-input-label.--error,.ui-system-input-label.--inline{padding:0 var(--ui-space-inline-2xs);background:var(--label-background)}.ui-system-input-label.--error{position:absolute;bottom:0;left:var(--inline-label-margin);margin:0;color:var(--ui-color-accent-main-alert)}.ui-system-input-value{flex:1;min-width:0;padding:var(--padding-vertical);padding-left:calc(var(--padding-horizontal) + var(--icon-padding));padding-right:calc(var(--padding-horizontal) + var(--clear-padding) + var(--dropdown-padding));border-radius:var(--ui-border-radius-sm);border:var(--ui-border-width-thin) solid var(--border-color);background:var(--background);color:var(--text-color);font-size:var(--font-size);line-height:var(--ui-font-line-height-sm);text-align:var(--align)}.ui-system-input-value.ui-system-input-value_multi{padding-top:calc(var(--padding-vertical) + 2px)}.ui-system-input-value::placeholder{color:var(--placeholder-color)}.ui-system-input-value:focus,.ui-system-input.--active .ui-system-input-value{border-color:var(--border-color-active)}.ui-system-input-icon{left:var(--padding-horizontal);pointer-events:none}.ui-system-input-cross{right:calc(var(--padding-horizontal) + var(--dropdown-padding));opacity:var(--ui-opacity-50);cursor:pointer}.ui-system-input-cross:hover{opacity:var(--ui-opacity-70)}.ui-system-input-dropdown{--ui-icon-set__icon-color:var(--ui-color-base-2);right:var(--padding-horizontal);pointer-events:none}
|
||||
@@ -1,2 +1,2 @@
|
||||
this.BX=this.BX||{};this.BX.UI=this.BX.UI||{};this.BX.UI.System=this.BX.UI.System||{};(function(t,e){"use strict";const n=Object.freeze({Lg:"l",Md:"m",Sm:"s"});const i=Object.freeze({Primary:"primary",Grey:"grey",LightGrey:"light-grey",Disabled:"disabled",Naked:"naked"});const l={name:"BInput",components:{BIcon:e.BIcon},expose:["blur"],props:{modelValue:{type:String,default:""},label:{type:String,default:""},labelInline:{type:Boolean,default:false},placeholder:{type:String,default:""},error:{type:String,default:""},size:{type:String,default:n.Lg},design:{type:String,default:i.Grey},icon:{type:String,default:""},center:{type:Boolean,default:false},withClear:{type:Boolean,default:false},dropdown:{type:Boolean,default:false},active:{type:Boolean,default:false}},emits:["update:modelValue","click","focus","blur","input","clear"],setup(){return{Outline:e.Outline}},computed:{value:{get(){return this.modelValue},set(t){this.$emit("update:modelValue",t)}},disabled(){return this.design===i.Disabled}},template:`\n\t\t<div\n\t\t\tclass="ui-system-input"\n\t\t\t:class="[\n\t\t\t\t'--' + design,\n\t\t\t\t'--' + size,\n\t\t\t\t{\n\t\t\t\t\t'--center': center,\n\t\t\t\t\t'--with-icon': icon,\n\t\t\t\t\t'--with-clear': withClear,\n\t\t\t\t\t'--with-dropdown': dropdown,\n\t\t\t\t\t'--active': active,\n\t\t\t\t\t'--error': error && !disabled,\n\t\t\t\t},\n\t\t\t]">\n\t\t\t<div v-if="label" class="ui-system-input-label" :class="{ '--inline': labelInline }">{{ label }}</div>\n\t\t\t<div class="ui-system-input-container">\n\t\t\t\t<input\n\t\t\t\t\tv-model="value"\n\t\t\t\t\tclass="ui-system-input-value"\n\t\t\t\t\t:placeholder="placeholder"\n\t\t\t\t\t:disabled="disabled"\n\t\t\t\t\tref="input"\n\t\t\t\t\t@click="$emit('click', $event)"\n\t\t\t\t\t@focus="$emit('focus', $event)"\n\t\t\t\t\t@blur="$emit('blur', $event)"\n\t\t\t\t\t@input="$emit('input', $event)"\n\t\t\t\t>\n\t\t\t\t<BIcon v-if="icon" class="ui-system-input-icon" :name="icon"/>\n\t\t\t\t<BIcon v-if="withClear" class="ui-system-input-cross" :name="Outline.CROSS_L" @click="$emit('clear')"/>\n\t\t\t\t<BIcon v-if="dropdown" class="ui-system-input-dropdown" :name="Outline.CHEVRON_DOWN_L"/>\n\t\t\t</div>\n\t\t\t<div v-if="error?.trim() && !disabled" class="ui-system-input-label --inline --error">{{ error }}</div>\n\t\t</div>\n\t`};var s=Object.freeze({InputSize:n,InputDesign:i,BInput:l});t.Vue=s;t.InputSize=n;t.InputDesign=i})(this.BX.UI.System.Input=this.BX.UI.System.Input||{},BX.UI.IconSet);
|
||||
this.BX=this.BX||{};this.BX.UI=this.BX.UI||{};this.BX.UI.System=this.BX.UI.System||{};(function(t,e){"use strict";const n=Object.freeze({Lg:"l",Md:"m",Sm:"s"});const i=Object.freeze({Primary:"primary",Grey:"grey",LightGrey:"light-grey",Disabled:"disabled",Naked:"naked"});const l={name:"BInput",components:{BIcon:e.BIcon},expose:["blur"],props:{modelValue:{type:String,default:""},rowsQuantity:{type:Number,default:1},label:{type:String,default:""},labelInline:{type:Boolean,default:false},placeholder:{type:String,default:""},error:{type:String,default:""},size:{type:String,default:n.Lg},design:{type:String,default:i.Grey},icon:{type:String,default:""},center:{type:Boolean,default:false},withClear:{type:Boolean,default:false},dropdown:{type:Boolean,default:false},active:{type:Boolean,default:false}},emits:["update:modelValue","click","focus","blur","input","clear"],setup(){return{Outline:e.Outline}},computed:{value:{get(){return this.modelValue},set(t){this.$emit("update:modelValue",t)}},disabled(){return this.design===i.Disabled}},template:`\n\t\t<div\n\t\t\tclass="ui-system-input"\n\t\t\t:class="[\n\t\t\t\t'--' + design,\n\t\t\t\t'--' + size,\n\t\t\t\t{\n\t\t\t\t\t'--center': center,\n\t\t\t\t\t'--with-icon': icon,\n\t\t\t\t\t'--with-clear': withClear,\n\t\t\t\t\t'--with-dropdown': dropdown,\n\t\t\t\t\t'--active': active,\n\t\t\t\t\t'--error': error && !disabled,\n\t\t\t\t},\n\t\t\t]">\n\t\t\t<div v-if="label" class="ui-system-input-label" :class="{ '--inline': labelInline }">{{ label }}</div>\n\t\t\t<div class="ui-system-input-container">\n\t\t\t\t<textarea\n\t\t\t\t\tv-if="rowsQuantity > 1"\n\t\t\t\t\tv-model="value"\n\t\t\t\t\tclass="ui-system-input-value ui-system-input-value_multi"\n\t\t\t\t\t:placeholder="placeholder"\n\t\t\t\t\t:disabled="disabled"\n\t\t\t\t\t:rows="rowsQuantity"\n\t\t\t\t\tref="input"\n\t\t\t\t\t@click="$emit('click', $event)"\n\t\t\t\t\t@focus="$emit('focus', $event)"\n\t\t\t\t\t@blur="$emit('blur', $event)"\n\t\t\t\t\t@input="$emit('input', $event)"\n\t\t\t\t/>\n\t\t\t\t<input\n\t\t\t\t\tv-else\n\t\t\t\t\tv-model="value"\n\t\t\t\t\tclass="ui-system-input-value"\n\t\t\t\t\t:placeholder="placeholder"\n\t\t\t\t\t:disabled="disabled"\n\t\t\t\t\tref="input"\n\t\t\t\t\t@click="$emit('click', $event)"\n\t\t\t\t\t@focus="$emit('focus', $event)"\n\t\t\t\t\t@blur="$emit('blur', $event)"\n\t\t\t\t\t@input="$emit('input', $event)"\n\t\t\t\t/>\n\t\t\t\t<BIcon v-if="icon" class="ui-system-input-icon" :name="icon"/>\n\t\t\t\t<BIcon v-if="withClear" class="ui-system-input-cross" :name="Outline.CROSS_L" @click="$emit('clear')"/>\n\t\t\t\t<BIcon v-if="dropdown" class="ui-system-input-dropdown" :name="Outline.CHEVRON_DOWN_L"/>\n\t\t\t</div>\n\t\t\t<div v-if="error?.trim() && !disabled" class="ui-system-input-label --error">{{ error }}</div>\n\t\t</div>\n\t`};var s=Object.freeze({InputSize:n,InputDesign:i,BInput:l});t.Vue=s;t.InputSize=n;t.InputDesign=i})(this.BX.UI.System.Input=this.BX.UI.System.Input||{},BX.UI.IconSet);
|
||||
//# sourceMappingURL=input.bundle.map.js
|
||||
@@ -1,3 +1,10 @@
|
||||
/* Normalize */
|
||||
.ui-system-input-value {
|
||||
outline: none;
|
||||
}
|
||||
/* Normalize end */
|
||||
|
||||
|
||||
/* Common */
|
||||
.ui-system-input {
|
||||
--padding-horizontal: var(--ui-space-inline-sm);
|
||||
@@ -110,13 +117,17 @@
|
||||
--dropdown-padding: var(--icon-padding-size);
|
||||
}
|
||||
|
||||
.ui-system-input .ui-icon-set {
|
||||
.ui-system-input-value ~ .ui-icon-set {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
--ui-icon-set__icon-color: var(--ui-color-base-3);
|
||||
--ui-icon-set__icon-size: var(--icon-size);
|
||||
}
|
||||
.ui-system-input-value.ui-system-input-value_multi ~ .ui-icon-set {
|
||||
top: var(--padding-horizontal);
|
||||
transform: none;
|
||||
}
|
||||
|
||||
|
||||
/* Container */
|
||||
@@ -125,6 +136,7 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: var(--align);
|
||||
padding: 0 0 6px 0;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
@@ -153,8 +165,12 @@
|
||||
}
|
||||
|
||||
.ui-system-input-label.--error {
|
||||
margin-bottom: 0;
|
||||
margin-top: var(--ui-space-stack-2xs2-neg);
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: var(--inline-label-margin);
|
||||
margin: 0;
|
||||
padding: 0 var(--ui-space-inline-2xs);
|
||||
background: var(--label-background);
|
||||
color: var(--ui-color-accent-main-alert);
|
||||
}
|
||||
|
||||
@@ -174,6 +190,9 @@
|
||||
line-height: var(--ui-font-line-height-sm);
|
||||
text-align: var(--align);
|
||||
}
|
||||
.ui-system-input-value.ui-system-input-value_multi {
|
||||
padding-top: calc(var(--padding-vertical) + 2px);
|
||||
}
|
||||
|
||||
.ui-system-input-value::placeholder {
|
||||
color: var(--placeholder-color);
|
||||
|
||||
@@ -18,6 +18,10 @@ export const BInput = {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
rowsQuantity: {
|
||||
type: Number,
|
||||
default: 1,
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
default: '',
|
||||
@@ -110,7 +114,21 @@ export const BInput = {
|
||||
]">
|
||||
<div v-if="label" class="ui-system-input-label" :class="{ '--inline': labelInline }">{{ label }}</div>
|
||||
<div class="ui-system-input-container">
|
||||
<textarea
|
||||
v-if="rowsQuantity > 1"
|
||||
v-model="value"
|
||||
class="ui-system-input-value ui-system-input-value_multi"
|
||||
:placeholder="placeholder"
|
||||
:disabled="disabled"
|
||||
:rows="rowsQuantity"
|
||||
ref="input"
|
||||
@click="$emit('click', $event)"
|
||||
@focus="$emit('focus', $event)"
|
||||
@blur="$emit('blur', $event)"
|
||||
@input="$emit('input', $event)"
|
||||
/>
|
||||
<input
|
||||
v-else
|
||||
v-model="value"
|
||||
class="ui-system-input-value"
|
||||
:placeholder="placeholder"
|
||||
@@ -120,12 +138,12 @@ export const BInput = {
|
||||
@focus="$emit('focus', $event)"
|
||||
@blur="$emit('blur', $event)"
|
||||
@input="$emit('input', $event)"
|
||||
>
|
||||
/>
|
||||
<BIcon v-if="icon" class="ui-system-input-icon" :name="icon"/>
|
||||
<BIcon v-if="withClear" class="ui-system-input-cross" :name="Outline.CROSS_L" @click="$emit('clear')"/>
|
||||
<BIcon v-if="dropdown" class="ui-system-input-dropdown" :name="Outline.CHEVRON_DOWN_L"/>
|
||||
</div>
|
||||
<div v-if="error?.trim() && !disabled" class="ui-system-input-label --inline --error">{{ error }}</div>
|
||||
<div v-if="error?.trim() && !disabled" class="ui-system-input-label --error">{{ error }}</div>
|
||||
</div>
|
||||
`,
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user