Update
This commit is contained in:
root
@@ -7,31 +7,34 @@
|
||||
/* size */
|
||||
.ui-chip {
|
||||
--min-height: 32px;
|
||||
--padding: 5px 12px;
|
||||
--padding: 0 12px;
|
||||
--font-size: var(--ui-font-size-md);
|
||||
--line-height: var(--ui-font-line-height-sm);
|
||||
--icon-size: 20px;
|
||||
--background-icon-size: 14px;
|
||||
}
|
||||
|
||||
.ui-chip.--m {
|
||||
--padding: 4px 10px;
|
||||
--padding: 0 10px;
|
||||
--min-height: 28px;
|
||||
}
|
||||
|
||||
.ui-chip.--s {
|
||||
--min-height: 24px;
|
||||
--padding: 3px 10px;
|
||||
--padding: 0 10px;
|
||||
--font-size: var(--ui-font-size-sm);
|
||||
--line-height: var(--ui-font-line-height-2xs);
|
||||
--icon-size: 18px;
|
||||
--background-icon-size: 12px;
|
||||
}
|
||||
|
||||
.ui-chip.--xs {
|
||||
--min-height: 20px;
|
||||
--padding: 2px 10px;
|
||||
--padding: 0 10px;
|
||||
--font-size: var(--ui-font-size-xs);
|
||||
--line-height: var(--ui-font-line-height-3xs);
|
||||
--icon-size: 16px;
|
||||
--background-icon-size: 10px;
|
||||
}
|
||||
|
||||
|
||||
@@ -51,6 +54,8 @@
|
||||
|
||||
--clear-color: var(--text-color);
|
||||
--box-shadow: none;
|
||||
|
||||
--cursor: pointer;
|
||||
}
|
||||
|
||||
.ui-chip.--filled {
|
||||
@@ -95,6 +100,11 @@
|
||||
--clear-color: var(--ui-color-base-4);
|
||||
}
|
||||
|
||||
.ui-chip.--outline-copilot {
|
||||
--text-color: var(--ui-color-copilot-accent-primary);
|
||||
--border-color: var(--ui-color-copilot-bg-content-2);
|
||||
}
|
||||
|
||||
.ui-chip.--shadow-no-accent {
|
||||
--text-color: var(--ui-color-base-3);
|
||||
--text-color-hover: var(--ui-color-base-1);
|
||||
@@ -116,6 +126,12 @@
|
||||
--box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.ui-chip.--shadow-disabled {
|
||||
--text-color: var(--ui-color-base-5);
|
||||
--box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
|
||||
--cursor: default;
|
||||
}
|
||||
|
||||
.ui-chip.--lock {
|
||||
--text-color: var(--ui-color-base-5);
|
||||
--background: var(--ui-color-base-7);
|
||||
@@ -139,7 +155,7 @@
|
||||
background: var(--background);
|
||||
border: var(--ui-border-width-thin) solid var(--border-color);
|
||||
box-shadow: var(--box-shadow);
|
||||
cursor: pointer;
|
||||
cursor: var(--cursor);
|
||||
transition: border-color var(--transition-duration);
|
||||
}
|
||||
|
||||
@@ -169,14 +185,25 @@
|
||||
.ui-chip-icon {
|
||||
--ui-icon-set__icon-color: var(--icon-color);
|
||||
--ui-icon-set__icon-size: var(--icon-size);
|
||||
display: grid;
|
||||
place-items: center;
|
||||
margin: 0 var(--ui-space-inline-2xs) 0 var(--ui-space-stack-2xs2-neg);
|
||||
}
|
||||
|
||||
.ui-chip.--no-text:not(.--with-clear) .ui-chip-icon {
|
||||
.ui-chip-icon.--with-background {
|
||||
--icon-background: initial;
|
||||
--ui-icon-set__icon-size: var(--background-icon-size);
|
||||
width: var(--icon-size);
|
||||
height: var(--icon-size);
|
||||
border-radius: var(--ui-border-radius-pill);
|
||||
background: var(--icon-background);
|
||||
}
|
||||
|
||||
.ui-chip.--no-text:not(.--with-right-icon) .ui-chip-icon {
|
||||
margin-right: var(--ui-space-stack-2xs2-neg);
|
||||
}
|
||||
|
||||
.ui-chip.--no-text.--with-clear .ui-chip-icon {
|
||||
.ui-chip.--no-text.--with-right-icon .ui-chip-icon {
|
||||
margin-right: var(--ui-space-inline-3xs);
|
||||
}
|
||||
|
||||
@@ -208,15 +235,15 @@
|
||||
}
|
||||
|
||||
|
||||
/* clear */
|
||||
.ui-chip-clear {
|
||||
/* right-icon */
|
||||
.ui-chip-right-icon {
|
||||
--ui-icon-set__icon-color: var(--clear-color);
|
||||
--ui-icon-set__icon-size: var(--icon-size);
|
||||
margin-right: var(--ui-space-inline-2xs2-neg);
|
||||
opacity: var(--ui-opacity-50);
|
||||
}
|
||||
|
||||
.ui-chip-clear:hover {
|
||||
.ui-chip-right-icon:hover {
|
||||
opacity: var(--ui-opacity-70);
|
||||
}
|
||||
|
||||
|
||||
@@ -13,9 +13,11 @@ this.BX.UI.System = this.BX.UI.System || {};
|
||||
OutlineWarning: 'outline-warning',
|
||||
Outline: 'outline',
|
||||
OutlineNoAccent: 'outline-no-accent',
|
||||
OutlineCopilot: 'outline-copilot',
|
||||
ShadowNoAccent: 'shadow-no-accent',
|
||||
Shadow: 'shadow',
|
||||
ShadowAccent: 'shadow-accent'
|
||||
ShadowAccent: 'shadow-accent',
|
||||
ShadowDisabled: 'shadow-disabled'
|
||||
});
|
||||
const ChipSize = Object.freeze({
|
||||
Lg: 'l',
|
||||
@@ -41,7 +43,15 @@ this.BX.UI.System = this.BX.UI.System || {};
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
default: ''
|
||||
default: null
|
||||
},
|
||||
iconColor: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
iconBackground: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
image: {
|
||||
/** @type ChipImage */
|
||||
@@ -60,6 +70,10 @@ this.BX.UI.System = this.BX.UI.System || {};
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
dropdown: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
lock: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
@@ -92,7 +106,7 @@ this.BX.UI.System = this.BX.UI.System || {};
|
||||
'--rounded': rounded,
|
||||
'--trimmable': trimmable,
|
||||
'--lock': lock,
|
||||
'--with-clear': withClear,
|
||||
'--with-right-icon': withClear || dropdown,
|
||||
'--no-text': text.length === 0,
|
||||
},
|
||||
]"
|
||||
@@ -101,9 +115,17 @@ this.BX.UI.System = this.BX.UI.System || {};
|
||||
@click="$emit('click')"
|
||||
>
|
||||
<img v-if="image" class="ui-chip-icon --image" :src="image.src" :alt="image.alt">
|
||||
<BIcon v-if="icon" class="ui-chip-icon" :name="icon"/>
|
||||
<div
|
||||
v-if="icon"
|
||||
class="ui-chip-icon"
|
||||
:class="{ '--with-background': Boolean(iconBackground) }"
|
||||
:style="{ '--icon-background': iconBackground }"
|
||||
>
|
||||
<BIcon :name="icon" :color="iconColor"/>
|
||||
</div>
|
||||
<div class="ui-chip-text">{{ text }}</div>
|
||||
<BIcon v-if="withClear" class="ui-chip-clear" :name="Outline.CROSS_M" @click.stop="$emit('clear')"/>
|
||||
<BIcon v-if="dropdown" class="ui-chip-right-icon" :name="Outline.CHEVRON_DOWN_M"/>
|
||||
<BIcon v-if="withClear" class="ui-chip-right-icon" :name="Outline.CROSS_M" @click.stop="$emit('clear')"/>
|
||||
<BIcon v-if="lock" class="ui-chip-lock" :name="Outline.LOCK_M"/>
|
||||
</div>
|
||||
`
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -1 +1 @@
|
||||
{"version":3,"file":"chip.bundle.map.js","names":["this","BX","UI","System","exports","ui_iconSet_api_vue","ChipDesign","Object","freeze","Filled","OutlineAccent","OutlineSuccess","OutlineAlert","OutlineWarning","Outline","OutlineNoAccent","ShadowNoAccent","Shadow","ShadowAccent","ChipSize","Lg","Md","Sm","Xs","Chip","name","components","BIcon","props","size","type","String","default","design","icon","image","text","rounded","Boolean","withClear","lock","trimmable","emits","setup","methods","handleKeydown","event","key","ctrlKey","metaKey","$emit","template","vue","Vue","IconSet"],"sources":["chip.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,EAAaC,OAAOC,OAAO,CAC/BC,OAAQ,SACRC,cAAe,iBACfC,eAAgB,kBAChBC,aAAc,gBACdC,eAAgB,kBAChBC,QAAS,UACTC,gBAAiB,oBACjBC,eAAgB,mBAChBC,OAAQ,SACRC,aAAc,kBAEhB,MAAMC,EAAWZ,OAAOC,OAAO,CAC7BY,GAAI,IACJC,GAAI,IACJC,GAAI,IACJC,GAAI,OAIN,MAAMC,EAAO,CACXC,KAAM,SACNC,WAAY,CACVC,MAAOtB,EAAmBsB,OAE5BC,MAAO,CACLC,KAAM,CACJC,KAAMC,OACNC,QAASb,EAASC,IAEpBa,OAAQ,CACNH,KAAMC,OACNC,QAAS1B,EAAWQ,SAEtBoB,KAAM,CACJJ,KAAMC,OACNC,QAAS,IAEXG,MAAO,CAELL,KAAMvB,OACNyB,QAAS,MAEXI,KAAM,CACJN,KAAMC,OACNC,QAAS,IAEXK,QAAS,CACPP,KAAMQ,QACNN,QAAS,OAEXO,UAAW,CACTT,KAAMQ,QACNN,QAAS,OAEXQ,KAAM,CACJV,KAAMQ,QACNN,QAAS,OAEXS,UAAW,CACTX,KAAMQ,QACNN,QAAS,QAGbU,MAAO,CAAC,QAAS,SACjB,KAAAC,GACE,MAAO,CACL7B,QAAST,EAAmBS,QAEhC,EACA8B,QAAS,CACP,aAAAC,CAAcC,GACZ,GAAIA,EAAMC,MAAQ,WAAaD,EAAME,SAAWF,EAAMG,SAAU,CAC9DjD,KAAKkD,MAAM,QACb,CACF,GAEFC,SAAU,8xBA2BZ,IAAIC,EAAmB7C,OAAOC,OAAO,CACpCF,WAAYA,EACZa,SAAUA,EACVK,KAAMA,IAGPpB,EAAQiD,IAAMD,EACdhD,EAAQE,WAAaA,EACrBF,EAAQe,SAAWA,CAEpB,EArHA,CAqHGnB,KAAKC,GAAGC,GAAGC,OAAOqB,KAAOxB,KAAKC,GAAGC,GAAGC,OAAOqB,MAAQ,CAAC,EAAGvB,GAAGC,GAAGoD","ignoreList":[]}
|
||||
{"version":3,"file":"chip.bundle.map.js","names":["this","BX","UI","System","exports","ui_iconSet_api_vue","ChipDesign","Object","freeze","Filled","OutlineAccent","OutlineSuccess","OutlineAlert","OutlineWarning","Outline","OutlineNoAccent","OutlineCopilot","ShadowNoAccent","Shadow","ShadowAccent","ShadowDisabled","ChipSize","Lg","Md","Sm","Xs","Chip","name","components","BIcon","props","size","type","String","default","design","icon","iconColor","iconBackground","image","text","rounded","Boolean","withClear","dropdown","lock","trimmable","emits","setup","methods","handleKeydown","event","key","ctrlKey","metaKey","$emit","template","vue","Vue","IconSet"],"sources":["chip.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,EAAaC,OAAOC,OAAO,CAC/BC,OAAQ,SACRC,cAAe,iBACfC,eAAgB,kBAChBC,aAAc,gBACdC,eAAgB,kBAChBC,QAAS,UACTC,gBAAiB,oBACjBC,eAAgB,kBAChBC,eAAgB,mBAChBC,OAAQ,SACRC,aAAc,gBACdC,eAAgB,oBAElB,MAAMC,EAAWd,OAAOC,OAAO,CAC7Bc,GAAI,IACJC,GAAI,IACJC,GAAI,IACJC,GAAI,OAIN,MAAMC,EAAO,CACXC,KAAM,SACNC,WAAY,CACVC,MAAOxB,EAAmBwB,OAE5BC,MAAO,CACLC,KAAM,CACJC,KAAMC,OACNC,QAASb,EAASC,IAEpBa,OAAQ,CACNH,KAAMC,OACNC,QAAS5B,EAAWQ,SAEtBsB,KAAM,CACJJ,KAAMC,OACNC,QAAS,MAEXG,UAAW,CACTL,KAAMC,OACNC,QAAS,MAEXI,eAAgB,CACdN,KAAMC,OACNC,QAAS,MAEXK,MAAO,CAELP,KAAMzB,OACN2B,QAAS,MAEXM,KAAM,CACJR,KAAMC,OACNC,QAAS,IAEXO,QAAS,CACPT,KAAMU,QACNR,QAAS,OAEXS,UAAW,CACTX,KAAMU,QACNR,QAAS,OAEXU,SAAU,CACRZ,KAAMU,QACNR,QAAS,OAEXW,KAAM,CACJb,KAAMU,QACNR,QAAS,OAEXY,UAAW,CACTd,KAAMU,QACNR,QAAS,QAGba,MAAO,CAAC,QAAS,SACjB,KAAAC,GACE,MAAO,CACLlC,QAAST,EAAmBS,QAEhC,EACAmC,QAAS,CACP,aAAAC,CAAcC,GACZ,GAAIA,EAAMC,MAAQ,WAAaD,EAAME,SAAWF,EAAMG,SAAU,CAC9DtD,KAAKuD,MAAM,QACb,CACF,GAEFC,SAAU,qlCAmCZ,IAAIC,EAAmBlD,OAAOC,OAAO,CACpCF,WAAYA,EACZe,SAAUA,EACVK,KAAMA,IAGPtB,EAAQsD,IAAMD,EACdrD,EAAQE,WAAaA,EACrBF,EAAQiB,SAAWA,CAEpB,EA3IA,CA2IGrB,KAAKC,GAAGC,GAAGC,OAAOuB,KAAO1B,KAAKC,GAAGC,GAAGC,OAAOuB,MAAQ,CAAC,EAAGzB,GAAGC,GAAGyD","ignoreList":[]}
|
||||
File diff suppressed because one or more lines are too long
@@ -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({Filled:"filled",OutlineAccent:"outline-accent",OutlineSuccess:"outline-success",OutlineAlert:"outline-alert",OutlineWarning:"outline-warning",Outline:"outline",OutlineNoAccent:"outline-no-accent",ShadowNoAccent:"shadow-no-accent",Shadow:"shadow",ShadowAccent:"shadow-accent"});const i=Object.freeze({Lg:"l",Md:"m",Sm:"s",Xs:"xs"});const l={name:"UiChip",components:{BIcon:e.BIcon},props:{size:{type:String,default:i.Lg},design:{type:String,default:n.Outline},icon:{type:String,default:""},image:{type:Object,default:null},text:{type:String,default:""},rounded:{type:Boolean,default:false},withClear:{type:Boolean,default:false},lock:{type:Boolean,default:false},trimmable:{type:Boolean,default:false}},emits:["click","clear"],setup(){return{Outline:e.Outline}},methods:{handleKeydown(t){if(t.key==="Enter"&&!(t.ctrlKey||t.metaKey)){this.$emit("click")}}},template:`\n\t\t<div\n\t\t\tclass="ui-chip"\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'--rounded': rounded,\n\t\t\t\t\t'--trimmable': trimmable,\n\t\t\t\t\t'--lock': lock,\n\t\t\t\t\t'--with-clear': withClear,\n\t\t\t\t\t'--no-text': text.length === 0,\n\t\t\t\t},\n\t\t\t]"\n\t\t\ttabindex="0"\n\t\t\t@keydown="handleKeydown"\n\t\t\t@click="$emit('click')"\n\t\t>\n\t\t\t<img v-if="image" class="ui-chip-icon --image" :src="image.src" :alt="image.alt">\n\t\t\t<BIcon v-if="icon" class="ui-chip-icon" :name="icon"/>\n\t\t\t<div class="ui-chip-text">{{ text }}</div>\n\t\t\t<BIcon v-if="withClear" class="ui-chip-clear" :name="Outline.CROSS_M" @click.stop="$emit('clear')"/>\n\t\t\t<BIcon v-if="lock" class="ui-chip-lock" :name="Outline.LOCK_M"/>\n\t\t</div>\n\t`};var c=Object.freeze({ChipDesign:n,ChipSize:i,Chip:l});t.Vue=c;t.ChipDesign=n;t.ChipSize=i})(this.BX.UI.System.Chip=this.BX.UI.System.Chip||{},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({Filled:"filled",OutlineAccent:"outline-accent",OutlineSuccess:"outline-success",OutlineAlert:"outline-alert",OutlineWarning:"outline-warning",Outline:"outline",OutlineNoAccent:"outline-no-accent",OutlineCopilot:"outline-copilot",ShadowNoAccent:"shadow-no-accent",Shadow:"shadow",ShadowAccent:"shadow-accent",ShadowDisabled:"shadow-disabled"});const i=Object.freeze({Lg:"l",Md:"m",Sm:"s",Xs:"xs"});const l={name:"UiChip",components:{BIcon:e.BIcon},props:{size:{type:String,default:i.Lg},design:{type:String,default:n.Outline},icon:{type:String,default:null},iconColor:{type:String,default:null},iconBackground:{type:String,default:null},image:{type:Object,default:null},text:{type:String,default:""},rounded:{type:Boolean,default:false},withClear:{type:Boolean,default:false},dropdown:{type:Boolean,default:false},lock:{type:Boolean,default:false},trimmable:{type:Boolean,default:false}},emits:["click","clear"],setup(){return{Outline:e.Outline}},methods:{handleKeydown(t){if(t.key==="Enter"&&!(t.ctrlKey||t.metaKey)){this.$emit("click")}}},template:`\n\t\t<div\n\t\t\tclass="ui-chip"\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'--rounded': rounded,\n\t\t\t\t\t'--trimmable': trimmable,\n\t\t\t\t\t'--lock': lock,\n\t\t\t\t\t'--with-right-icon': withClear || dropdown,\n\t\t\t\t\t'--no-text': text.length === 0,\n\t\t\t\t},\n\t\t\t]"\n\t\t\ttabindex="0"\n\t\t\t@keydown="handleKeydown"\n\t\t\t@click="$emit('click')"\n\t\t>\n\t\t\t<img v-if="image" class="ui-chip-icon --image" :src="image.src" :alt="image.alt">\n\t\t\t<div\n\t\t\t\tv-if="icon"\n\t\t\t\tclass="ui-chip-icon"\n\t\t\t\t:class="{ '--with-background': Boolean(iconBackground) }"\n\t\t\t\t:style="{ '--icon-background': iconBackground }"\n\t\t\t>\n\t\t\t\t<BIcon :name="icon" :color="iconColor"/>\n\t\t\t</div>\n\t\t\t<div class="ui-chip-text">{{ text }}</div>\n\t\t\t<BIcon v-if="dropdown" class="ui-chip-right-icon" :name="Outline.CHEVRON_DOWN_M"/>\n\t\t\t<BIcon v-if="withClear" class="ui-chip-right-icon" :name="Outline.CROSS_M" @click.stop="$emit('clear')"/>\n\t\t\t<BIcon v-if="lock" class="ui-chip-lock" :name="Outline.LOCK_M"/>\n\t\t</div>\n\t`};var c=Object.freeze({ChipDesign:n,ChipSize:i,Chip:l});t.Vue=c;t.ChipDesign=n;t.ChipSize=i})(this.BX.UI.System.Chip=this.BX.UI.System.Chip||{},BX.UI.IconSet);
|
||||
//# sourceMappingURL=chip.bundle.map.js
|
||||
@@ -7,31 +7,34 @@
|
||||
/* size */
|
||||
.ui-chip {
|
||||
--min-height: 32px;
|
||||
--padding: 5px 12px;
|
||||
--padding: 0 12px;
|
||||
--font-size: var(--ui-font-size-md);
|
||||
--line-height: var(--ui-font-line-height-sm);
|
||||
--icon-size: 20px;
|
||||
--background-icon-size: 14px;
|
||||
}
|
||||
|
||||
.ui-chip.--m {
|
||||
--padding: 4px 10px;
|
||||
--padding: 0 10px;
|
||||
--min-height: 28px;
|
||||
}
|
||||
|
||||
.ui-chip.--s {
|
||||
--min-height: 24px;
|
||||
--padding: 3px 10px;
|
||||
--padding: 0 10px;
|
||||
--font-size: var(--ui-font-size-sm);
|
||||
--line-height: var(--ui-font-line-height-2xs);
|
||||
--icon-size: 18px;
|
||||
--background-icon-size: 12px;
|
||||
}
|
||||
|
||||
.ui-chip.--xs {
|
||||
--min-height: 20px;
|
||||
--padding: 2px 10px;
|
||||
--padding: 0 10px;
|
||||
--font-size: var(--ui-font-size-xs);
|
||||
--line-height: var(--ui-font-line-height-3xs);
|
||||
--icon-size: 16px;
|
||||
--background-icon-size: 10px;
|
||||
}
|
||||
|
||||
|
||||
@@ -51,6 +54,8 @@
|
||||
|
||||
--clear-color: var(--text-color);
|
||||
--box-shadow: none;
|
||||
|
||||
--cursor: pointer;
|
||||
}
|
||||
|
||||
.ui-chip.--filled {
|
||||
@@ -95,6 +100,11 @@
|
||||
--clear-color: var(--ui-color-base-4);
|
||||
}
|
||||
|
||||
.ui-chip.--outline-copilot {
|
||||
--text-color: var(--ui-color-copilot-accent-primary);
|
||||
--border-color: var(--ui-color-copilot-bg-content-2);
|
||||
}
|
||||
|
||||
.ui-chip.--shadow-no-accent {
|
||||
--text-color: var(--ui-color-base-3);
|
||||
--text-color-hover: var(--ui-color-base-1);
|
||||
@@ -116,6 +126,12 @@
|
||||
--box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.ui-chip.--shadow-disabled {
|
||||
--text-color: var(--ui-color-base-5);
|
||||
--box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
|
||||
--cursor: default;
|
||||
}
|
||||
|
||||
.ui-chip.--lock {
|
||||
--text-color: var(--ui-color-base-5);
|
||||
--background: var(--ui-color-base-7);
|
||||
@@ -138,7 +154,7 @@
|
||||
background: var(--background);
|
||||
border: var(--ui-border-width-thin) solid var(--border-color);
|
||||
box-shadow: var(--box-shadow);
|
||||
cursor: pointer;
|
||||
cursor: var(--cursor);
|
||||
transition: border-color var(--transition-duration);
|
||||
}
|
||||
|
||||
@@ -168,14 +184,25 @@
|
||||
.ui-chip-icon {
|
||||
--ui-icon-set__icon-color: var(--icon-color);
|
||||
--ui-icon-set__icon-size: var(--icon-size);
|
||||
display: grid;
|
||||
place-items: center;
|
||||
margin: 0 var(--ui-space-inline-2xs) 0 var(--ui-space-stack-2xs2-neg);
|
||||
}
|
||||
|
||||
.ui-chip.--no-text:not(.--with-clear) .ui-chip-icon {
|
||||
.ui-chip-icon.--with-background {
|
||||
--icon-background: initial;
|
||||
--ui-icon-set__icon-size: var(--background-icon-size);
|
||||
width: var(--icon-size);
|
||||
height: var(--icon-size);
|
||||
border-radius: var(--ui-border-radius-pill);
|
||||
background: var(--icon-background);
|
||||
}
|
||||
|
||||
.ui-chip.--no-text:not(.--with-right-icon) .ui-chip-icon {
|
||||
margin-right: var(--ui-space-stack-2xs2-neg);
|
||||
}
|
||||
|
||||
.ui-chip.--no-text.--with-clear .ui-chip-icon {
|
||||
.ui-chip.--no-text.--with-right-icon .ui-chip-icon {
|
||||
margin-right: var(--ui-space-inline-3xs);
|
||||
}
|
||||
|
||||
@@ -207,15 +234,15 @@
|
||||
}
|
||||
|
||||
|
||||
/* clear */
|
||||
.ui-chip-clear {
|
||||
/* right-icon */
|
||||
.ui-chip-right-icon {
|
||||
--ui-icon-set__icon-color: var(--clear-color);
|
||||
--ui-icon-set__icon-size: var(--icon-size);
|
||||
margin-right: var(--ui-space-inline-2xs2-neg);
|
||||
opacity: var(--ui-opacity-50);
|
||||
}
|
||||
|
||||
.ui-chip-clear:hover {
|
||||
.ui-chip-right-icon:hover {
|
||||
opacity: var(--ui-opacity-70);
|
||||
}
|
||||
|
||||
|
||||
@@ -6,9 +6,11 @@ export const ChipDesign = Object.freeze({
|
||||
OutlineWarning: 'outline-warning',
|
||||
Outline: 'outline',
|
||||
OutlineNoAccent: 'outline-no-accent',
|
||||
OutlineCopilot: 'outline-copilot',
|
||||
ShadowNoAccent: 'shadow-no-accent',
|
||||
Shadow: 'shadow',
|
||||
ShadowAccent: 'shadow-accent',
|
||||
ShadowDisabled: 'shadow-disabled',
|
||||
});
|
||||
|
||||
export const ChipSize = Object.freeze({
|
||||
|
||||
@@ -25,7 +25,15 @@ export const Chip = {
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
default: '',
|
||||
default: null,
|
||||
},
|
||||
iconColor: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
iconBackground: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
image: {
|
||||
/** @type ChipImage */
|
||||
@@ -44,6 +52,10 @@ export const Chip = {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
dropdown: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
lock: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
@@ -79,7 +91,7 @@ export const Chip = {
|
||||
'--rounded': rounded,
|
||||
'--trimmable': trimmable,
|
||||
'--lock': lock,
|
||||
'--with-clear': withClear,
|
||||
'--with-right-icon': withClear || dropdown,
|
||||
'--no-text': text.length === 0,
|
||||
},
|
||||
]"
|
||||
@@ -88,9 +100,17 @@ export const Chip = {
|
||||
@click="$emit('click')"
|
||||
>
|
||||
<img v-if="image" class="ui-chip-icon --image" :src="image.src" :alt="image.alt">
|
||||
<BIcon v-if="icon" class="ui-chip-icon" :name="icon"/>
|
||||
<div
|
||||
v-if="icon"
|
||||
class="ui-chip-icon"
|
||||
:class="{ '--with-background': Boolean(iconBackground) }"
|
||||
:style="{ '--icon-background': iconBackground }"
|
||||
>
|
||||
<BIcon :name="icon" :color="iconColor"/>
|
||||
</div>
|
||||
<div class="ui-chip-text">{{ text }}</div>
|
||||
<BIcon v-if="withClear" class="ui-chip-clear" :name="Outline.CROSS_M" @click.stop="$emit('clear')"/>
|
||||
<BIcon v-if="dropdown" class="ui-chip-right-icon" :name="Outline.CHEVRON_DOWN_M"/>
|
||||
<BIcon v-if="withClear" class="ui-chip-right-icon" :name="Outline.CROSS_M" @click.stop="$emit('clear')"/>
|
||||
<BIcon v-if="lock" class="ui-chip-lock" :name="Outline.LOCK_M"/>
|
||||
</div>
|
||||
`,
|
||||
|
||||
6
core/bitrix/js/ui/system/dialog/bundle.config.js
Normal file
6
core/bitrix/js/ui/system/dialog/bundle.config.js
Normal file
@@ -0,0 +1,6 @@
|
||||
module.exports = {
|
||||
input: 'src/index.js',
|
||||
output: 'dist/dialog.bundle.js',
|
||||
namespace: 'BX.UI.System',
|
||||
browserslist: true,
|
||||
};
|
||||
18
core/bitrix/js/ui/system/dialog/config.php
Normal file
18
core/bitrix/js/ui/system/dialog/config.php
Normal file
@@ -0,0 +1,18 @@
|
||||
<?php
|
||||
if (!defined('B_PROLOG_INCLUDED') || B_PROLOG_INCLUDED !== true)
|
||||
{
|
||||
die();
|
||||
}
|
||||
|
||||
return [
|
||||
'css' => 'dist/dialog.bundle.css',
|
||||
'js' => 'dist/dialog.bundle.js',
|
||||
'rel' => [
|
||||
'main.core',
|
||||
'main.popup',
|
||||
'ui.system.typography',
|
||||
'ui.icon-set.api.core',
|
||||
'ui.icon-set.outline',
|
||||
],
|
||||
'skip_core' => false,
|
||||
];
|
||||
222
core/bitrix/js/ui/system/dialog/dist/dialog.bundle.css
vendored
Normal file
222
core/bitrix/js/ui/system/dialog/dist/dialog.bundle.css
vendored
Normal file
@@ -0,0 +1,222 @@
|
||||
.ui-system-dialog {
|
||||
--ui-system-dialog-padding-x: 24px;
|
||||
--ui-color-bg-content: #fff;
|
||||
}
|
||||
|
||||
body.ui-system-dialog__disable-scrolling {
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
scrollbar-gutter: stable;
|
||||
}
|
||||
|
||||
.ui-system-dialog__header {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
padding: 14px var(--ui-system-dialog-padding-x) 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.ui-system-dialog__header:has(.ui-system-dialog__header-left:empty) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ui-system-dialog__header-left {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.ui-system-dialog__header-close-btn {
|
||||
--ui-icon-set__icon-color: var(--ui-color-base-4);
|
||||
position: relative;
|
||||
right: -4px;
|
||||
width: 24px;
|
||||
height: 26px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.ui-system-dialog__header-close-btn:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ui-system-dialog__subtitle {
|
||||
margin-top: 6px;
|
||||
color: var(--ui-color-base-4);
|
||||
}
|
||||
|
||||
.ui-system-dialog__content {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
padding: 12px var(--ui-system-dialog-padding-x) 18px;
|
||||
}
|
||||
|
||||
.ui-system-dialog__content.--rm-vertical {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.ui-system-dialog__content.--rm-horizontal {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.ui-system-dialog__footer {
|
||||
box-sizing: border-box;
|
||||
padding: 0 var(--ui-system-dialog-padding-x);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0 12px;
|
||||
}
|
||||
|
||||
.ui-system-dialog__footer:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ui-system-dialog__left-buttons,
|
||||
.ui-system-dialog__center-buttons,
|
||||
.ui-system-dialog__right-buttons {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
gap: 0 12px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.ui-system-dialog__left-buttons:empty,
|
||||
.ui-system-dialog__center-buttons:empty,
|
||||
.ui-system-dialog__right-buttons:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ui-system-dialog__left-buttons {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.ui-system-dialog__center-buttons {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.ui-system-dialog__right-buttons {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
/* Стили для указателей диалога */
|
||||
.ui-system-dialog.popup-window-with-angle {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.ui-system-dialog.popup-window-with-angle::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Указатели сверху */
|
||||
.ui-system-dialog.popup-window-angle-top-left::before {
|
||||
top: -8px;
|
||||
left: 30px;
|
||||
border-width: 0 8px 8px 8px;
|
||||
border-color: transparent transparent var(--ui-color-bg-content) transparent;
|
||||
}
|
||||
|
||||
.ui-system-dialog.popup-window-angle-top-center::before {
|
||||
top: -8px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
border-width: 0 8px 8px 8px;
|
||||
border-color: transparent transparent var(--ui-color-bg-content) transparent;
|
||||
}
|
||||
|
||||
.ui-system-dialog.popup-window-angle-top-right::before {
|
||||
top: -8px;
|
||||
right: 30px;
|
||||
border-width: 0 8px 8px 8px;
|
||||
border-color: transparent transparent var(--ui-color-bg-content) transparent;
|
||||
}
|
||||
|
||||
/* Указатели справа */
|
||||
.ui-system-dialog.popup-window-angle-right-top::before {
|
||||
top: 30px;
|
||||
right: -8px;
|
||||
border-width: 8px 0 8px 8px;
|
||||
border-color: transparent transparent transparent var(--ui-color-bg-content);
|
||||
}
|
||||
|
||||
.ui-system-dialog.popup-window-angle-right-center::before {
|
||||
top: 50%;
|
||||
right: -8px;
|
||||
transform: translateY(-50%);
|
||||
border-width: 8px 0 8px 8px;
|
||||
border-color: transparent transparent transparent var(--ui-color-bg-content);
|
||||
}
|
||||
|
||||
.ui-system-dialog.popup-window-angle-right-bottom::before {
|
||||
bottom: 30px;
|
||||
right: -8px;
|
||||
border-width: 8px 0 8px 8px;
|
||||
border-color: transparent transparent transparent var(--ui-color-bg-content);
|
||||
}
|
||||
|
||||
/* Указатели снизу */
|
||||
.ui-system-dialog.popup-window-angle-bottom-left::before {
|
||||
bottom: -8px;
|
||||
left: 30px;
|
||||
border-width: 8px 8px 0 8px;
|
||||
border-color: var(--ui-color-bg-content) transparent transparent transparent;
|
||||
}
|
||||
|
||||
.ui-system-dialog.popup-window-angle-bottom-center::before {
|
||||
bottom: -8px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
border-width: 8px 8px 0 8px;
|
||||
border-color: var(--ui-color-bg-content) transparent transparent transparent;
|
||||
}
|
||||
|
||||
.ui-system-dialog.popup-window-angle-bottom-right::before {
|
||||
bottom: -8px;
|
||||
right: 30px;
|
||||
border-width: 8px 8px 0 8px;
|
||||
border-color: var(--ui-color-bg-content) transparent transparent transparent;
|
||||
}
|
||||
|
||||
/* Указатели слева */
|
||||
.ui-system-dialog.popup-window-angle-left-top::before {
|
||||
top: 30px;
|
||||
left: -8px;
|
||||
border-width: 8px 8px 8px 0;
|
||||
border-color: transparent var(--ui-color-bg-content) transparent transparent;
|
||||
}
|
||||
|
||||
.ui-system-dialog.popup-window-angle-left-center::before {
|
||||
top: 50%;
|
||||
left: -8px;
|
||||
transform: translateY(-50%);
|
||||
border-width: 8px 8px 8px 0;
|
||||
border-color: transparent var(--ui-color-bg-content) transparent transparent;
|
||||
}
|
||||
|
||||
.ui-system-dialog.popup-window-angle-left-bottom::before {
|
||||
bottom: 30px;
|
||||
left: -8px;
|
||||
border-width: 8px 8px 8px 0;
|
||||
border-color: transparent var(--ui-color-bg-content) transparent transparent;
|
||||
}
|
||||
540
core/bitrix/js/ui/system/dialog/dist/dialog.bundle.js
vendored
Normal file
540
core/bitrix/js/ui/system/dialog/dist/dialog.bundle.js
vendored
Normal file
@@ -0,0 +1,540 @@
|
||||
/* eslint-disable */
|
||||
this.BX = this.BX || {};
|
||||
this.BX.UI = this.BX.UI || {};
|
||||
(function (exports,main_core,main_popup,ui_system_typography,ui_iconSet_api_core) {
|
||||
'use strict';
|
||||
|
||||
const DialogAnglePositions = Object.freeze({
|
||||
topLeft: 'topLeft',
|
||||
topCenter: 'topCenter',
|
||||
topRight: 'topRight',
|
||||
rightTop: 'rightTop',
|
||||
rightCenter: 'rightCenter',
|
||||
rightBottom: 'rightBottom',
|
||||
bottomLeft: 'bottomLeft',
|
||||
bottomCenter: 'bottomCenter',
|
||||
bottomRight: 'bottomRight',
|
||||
leftTop: 'leftTop',
|
||||
leftCenter: 'leftCenter',
|
||||
leftBottom: 'leftBottom'
|
||||
});
|
||||
const aliases = {
|
||||
onShow: {
|
||||
namespace: 'BX.UI.System.Dialog',
|
||||
eventName: 'onShow'
|
||||
},
|
||||
onAfterShow: {
|
||||
namespace: 'BX.UI.System.Dialog',
|
||||
eventName: 'onAfterShow'
|
||||
},
|
||||
onHide: {
|
||||
namespace: 'BX.UI.System.Dialog',
|
||||
eventName: 'onHide'
|
||||
},
|
||||
onAfterHide: {
|
||||
namespace: 'BX.UI.System.Dialog',
|
||||
eventName: 'onAfterHide'
|
||||
}
|
||||
};
|
||||
|
||||
let _ = t => t,
|
||||
_t,
|
||||
_t2,
|
||||
_t3,
|
||||
_t4,
|
||||
_t5,
|
||||
_t6,
|
||||
_t7,
|
||||
_t8;
|
||||
var _title = /*#__PURE__*/babelHelpers.classPrivateFieldLooseKey("title");
|
||||
var _subtitle = /*#__PURE__*/babelHelpers.classPrivateFieldLooseKey("subtitle");
|
||||
var _hasCloseButton = /*#__PURE__*/babelHelpers.classPrivateFieldLooseKey("hasCloseButton");
|
||||
var _content = /*#__PURE__*/babelHelpers.classPrivateFieldLooseKey("content");
|
||||
var _leftButtons = /*#__PURE__*/babelHelpers.classPrivateFieldLooseKey("leftButtons");
|
||||
var _rightButtons = /*#__PURE__*/babelHelpers.classPrivateFieldLooseKey("rightButtons");
|
||||
var _centerButtons = /*#__PURE__*/babelHelpers.classPrivateFieldLooseKey("centerButtons");
|
||||
var _hasVerticalPadding = /*#__PURE__*/babelHelpers.classPrivateFieldLooseKey("hasVerticalPadding");
|
||||
var _hasHorizontalPadding = /*#__PURE__*/babelHelpers.classPrivateFieldLooseKey("hasHorizontalPadding");
|
||||
var _hasOverlay = /*#__PURE__*/babelHelpers.classPrivateFieldLooseKey("hasOverlay");
|
||||
var _width = /*#__PURE__*/babelHelpers.classPrivateFieldLooseKey("width");
|
||||
var _disableScrolling = /*#__PURE__*/babelHelpers.classPrivateFieldLooseKey("disableScrolling");
|
||||
var _closeByClickOutside = /*#__PURE__*/babelHelpers.classPrivateFieldLooseKey("closeByClickOutside");
|
||||
var _closeByEsc = /*#__PURE__*/babelHelpers.classPrivateFieldLooseKey("closeByEsc");
|
||||
var _stickPosition = /*#__PURE__*/babelHelpers.classPrivateFieldLooseKey("stickPosition");
|
||||
var _bindElement = /*#__PURE__*/babelHelpers.classPrivateFieldLooseKey("bindElement");
|
||||
var _anglePosition = /*#__PURE__*/babelHelpers.classPrivateFieldLooseKey("anglePosition");
|
||||
var _popup = /*#__PURE__*/babelHelpers.classPrivateFieldLooseKey("popup");
|
||||
var _createPopup = /*#__PURE__*/babelHelpers.classPrivateFieldLooseKey("createPopup");
|
||||
var _getPopup = /*#__PURE__*/babelHelpers.classPrivateFieldLooseKey("getPopup");
|
||||
var _updatePopupContent = /*#__PURE__*/babelHelpers.classPrivateFieldLooseKey("updatePopupContent");
|
||||
var _renderPopupContent = /*#__PURE__*/babelHelpers.classPrivateFieldLooseKey("renderPopupContent");
|
||||
var _renderDialogHeader = /*#__PURE__*/babelHelpers.classPrivateFieldLooseKey("renderDialogHeader");
|
||||
var _renderCloseButton = /*#__PURE__*/babelHelpers.classPrivateFieldLooseKey("renderCloseButton");
|
||||
var _renderDialogContent = /*#__PURE__*/babelHelpers.classPrivateFieldLooseKey("renderDialogContent");
|
||||
var _renderDialogFooter = /*#__PURE__*/babelHelpers.classPrivateFieldLooseKey("renderDialogFooter");
|
||||
var _renderLeftButtons = /*#__PURE__*/babelHelpers.classPrivateFieldLooseKey("renderLeftButtons");
|
||||
var _renderCenterButtons = /*#__PURE__*/babelHelpers.classPrivateFieldLooseKey("renderCenterButtons");
|
||||
var _renderRightButtons = /*#__PURE__*/babelHelpers.classPrivateFieldLooseKey("renderRightButtons");
|
||||
var _getPopupBorderRadius = /*#__PURE__*/babelHelpers.classPrivateFieldLooseKey("getPopupBorderRadius");
|
||||
var _getCalculatedBindElement = /*#__PURE__*/babelHelpers.classPrivateFieldLooseKey("getCalculatedBindElement");
|
||||
var _calculateAnglePosition = /*#__PURE__*/babelHelpers.classPrivateFieldLooseKey("calculateAnglePosition");
|
||||
var _getPopupClassName = /*#__PURE__*/babelHelpers.classPrivateFieldLooseKey("getPopupClassName");
|
||||
var _adjustDialogPosition = /*#__PURE__*/babelHelpers.classPrivateFieldLooseKey("adjustDialogPosition");
|
||||
class Dialog extends main_core.Event.EventEmitter {
|
||||
constructor(options = {}) {
|
||||
var _options$leftButtons, _options$centerButton, _options$rightButtons, _options$hasHorizonta, _options$hasVerticalP, _options$closeByClick, _options$closeByEsc;
|
||||
super(options);
|
||||
Object.defineProperty(this, _adjustDialogPosition, {
|
||||
value: _adjustDialogPosition2
|
||||
});
|
||||
Object.defineProperty(this, _getPopupClassName, {
|
||||
value: _getPopupClassName2
|
||||
});
|
||||
Object.defineProperty(this, _calculateAnglePosition, {
|
||||
value: _calculateAnglePosition2
|
||||
});
|
||||
Object.defineProperty(this, _getCalculatedBindElement, {
|
||||
value: _getCalculatedBindElement2
|
||||
});
|
||||
Object.defineProperty(this, _getPopupBorderRadius, {
|
||||
value: _getPopupBorderRadius2
|
||||
});
|
||||
Object.defineProperty(this, _renderRightButtons, {
|
||||
value: _renderRightButtons2
|
||||
});
|
||||
Object.defineProperty(this, _renderCenterButtons, {
|
||||
value: _renderCenterButtons2
|
||||
});
|
||||
Object.defineProperty(this, _renderLeftButtons, {
|
||||
value: _renderLeftButtons2
|
||||
});
|
||||
Object.defineProperty(this, _renderDialogFooter, {
|
||||
value: _renderDialogFooter2
|
||||
});
|
||||
Object.defineProperty(this, _renderDialogContent, {
|
||||
value: _renderDialogContent2
|
||||
});
|
||||
Object.defineProperty(this, _renderCloseButton, {
|
||||
value: _renderCloseButton2
|
||||
});
|
||||
Object.defineProperty(this, _renderDialogHeader, {
|
||||
value: _renderDialogHeader2
|
||||
});
|
||||
Object.defineProperty(this, _renderPopupContent, {
|
||||
value: _renderPopupContent2
|
||||
});
|
||||
Object.defineProperty(this, _updatePopupContent, {
|
||||
value: _updatePopupContent2
|
||||
});
|
||||
Object.defineProperty(this, _getPopup, {
|
||||
value: _getPopup2
|
||||
});
|
||||
Object.defineProperty(this, _createPopup, {
|
||||
value: _createPopup2
|
||||
});
|
||||
Object.defineProperty(this, _title, {
|
||||
writable: true,
|
||||
value: void 0
|
||||
});
|
||||
Object.defineProperty(this, _subtitle, {
|
||||
writable: true,
|
||||
value: void 0
|
||||
});
|
||||
Object.defineProperty(this, _hasCloseButton, {
|
||||
writable: true,
|
||||
value: void 0
|
||||
});
|
||||
Object.defineProperty(this, _content, {
|
||||
writable: true,
|
||||
value: void 0
|
||||
});
|
||||
Object.defineProperty(this, _leftButtons, {
|
||||
writable: true,
|
||||
value: []
|
||||
});
|
||||
Object.defineProperty(this, _rightButtons, {
|
||||
writable: true,
|
||||
value: []
|
||||
});
|
||||
Object.defineProperty(this, _centerButtons, {
|
||||
writable: true,
|
||||
value: []
|
||||
});
|
||||
Object.defineProperty(this, _hasVerticalPadding, {
|
||||
writable: true,
|
||||
value: void 0
|
||||
});
|
||||
Object.defineProperty(this, _hasHorizontalPadding, {
|
||||
writable: true,
|
||||
value: void 0
|
||||
});
|
||||
Object.defineProperty(this, _hasOverlay, {
|
||||
writable: true,
|
||||
value: void 0
|
||||
});
|
||||
Object.defineProperty(this, _width, {
|
||||
writable: true,
|
||||
value: void 0
|
||||
});
|
||||
Object.defineProperty(this, _disableScrolling, {
|
||||
writable: true,
|
||||
value: void 0
|
||||
});
|
||||
Object.defineProperty(this, _closeByClickOutside, {
|
||||
writable: true,
|
||||
value: void 0
|
||||
});
|
||||
Object.defineProperty(this, _closeByEsc, {
|
||||
writable: true,
|
||||
value: void 0
|
||||
});
|
||||
Object.defineProperty(this, _stickPosition, {
|
||||
writable: true,
|
||||
value: void 0
|
||||
});
|
||||
Object.defineProperty(this, _bindElement, {
|
||||
writable: true,
|
||||
value: void 0
|
||||
});
|
||||
Object.defineProperty(this, _anglePosition, {
|
||||
writable: true,
|
||||
value: void 0
|
||||
});
|
||||
Object.defineProperty(this, _popup, {
|
||||
writable: true,
|
||||
value: void 0
|
||||
});
|
||||
this.setEventNamespace('UI.System.Dialog');
|
||||
this.subscribeFromOptions(options.events);
|
||||
babelHelpers.classPrivateFieldLooseBase(this, _title)[_title] = options.title;
|
||||
babelHelpers.classPrivateFieldLooseBase(this, _subtitle)[_subtitle] = options.subtitle;
|
||||
babelHelpers.classPrivateFieldLooseBase(this, _hasCloseButton)[_hasCloseButton] = main_core.Type.isBoolean(options.hasCloseButton) ? options.hasCloseButton : true;
|
||||
babelHelpers.classPrivateFieldLooseBase(this, _content)[_content] = options.content;
|
||||
babelHelpers.classPrivateFieldLooseBase(this, _leftButtons)[_leftButtons] = (_options$leftButtons = options.leftButtons) != null ? _options$leftButtons : [];
|
||||
babelHelpers.classPrivateFieldLooseBase(this, _centerButtons)[_centerButtons] = (_options$centerButton = options.centerButtons) != null ? _options$centerButton : [];
|
||||
babelHelpers.classPrivateFieldLooseBase(this, _rightButtons)[_rightButtons] = (_options$rightButtons = options.rightButtons) != null ? _options$rightButtons : [];
|
||||
babelHelpers.classPrivateFieldLooseBase(this, _hasHorizontalPadding)[_hasHorizontalPadding] = (_options$hasHorizonta = options.hasHorizontalPadding) != null ? _options$hasHorizonta : true;
|
||||
babelHelpers.classPrivateFieldLooseBase(this, _hasVerticalPadding)[_hasVerticalPadding] = (_options$hasVerticalP = options.hasVerticalPadding) != null ? _options$hasVerticalP : true;
|
||||
babelHelpers.classPrivateFieldLooseBase(this, _hasOverlay)[_hasOverlay] = options.hasOverlay === true;
|
||||
babelHelpers.classPrivateFieldLooseBase(this, _disableScrolling)[_disableScrolling] = options.disableScrolling;
|
||||
babelHelpers.classPrivateFieldLooseBase(this, _closeByClickOutside)[_closeByClickOutside] = (_options$closeByClick = options.closeByClickOutside) != null ? _options$closeByClick : true;
|
||||
babelHelpers.classPrivateFieldLooseBase(this, _closeByEsc)[_closeByEsc] = (_options$closeByEsc = options.closeByEsc) != null ? _options$closeByEsc : true;
|
||||
babelHelpers.classPrivateFieldLooseBase(this, _width)[_width] = options.width;
|
||||
|
||||
// this.#stickPosition = options.stickPosition;
|
||||
// this.#anglePosition = options.anglePosition;
|
||||
// this.#bindElement = options.bindElement;
|
||||
}
|
||||
|
||||
static show(options) {
|
||||
const dialog = new Dialog(options);
|
||||
dialog.show();
|
||||
}
|
||||
subscribeFromOptions(events) {
|
||||
super.subscribeFromOptions(events, aliases);
|
||||
}
|
||||
show() {
|
||||
babelHelpers.classPrivateFieldLooseBase(this, _getPopup)[_getPopup]().show();
|
||||
}
|
||||
hide() {
|
||||
babelHelpers.classPrivateFieldLooseBase(this, _getPopup)[_getPopup]().close();
|
||||
}
|
||||
setTitle(title) {
|
||||
babelHelpers.classPrivateFieldLooseBase(this, _title)[_title] = title;
|
||||
if (babelHelpers.classPrivateFieldLooseBase(this, _popup)[_popup]) {
|
||||
babelHelpers.classPrivateFieldLooseBase(this, _updatePopupContent)[_updatePopupContent]();
|
||||
}
|
||||
}
|
||||
setSubtitle(subtitle) {
|
||||
babelHelpers.classPrivateFieldLooseBase(this, _subtitle)[_subtitle] = subtitle;
|
||||
if (babelHelpers.classPrivateFieldLooseBase(this, _popup)[_popup]) {
|
||||
babelHelpers.classPrivateFieldLooseBase(this, _updatePopupContent)[_updatePopupContent]();
|
||||
}
|
||||
}
|
||||
setContent(content) {
|
||||
babelHelpers.classPrivateFieldLooseBase(this, _content)[_content] = content;
|
||||
if (babelHelpers.classPrivateFieldLooseBase(this, _popup)[_popup]) {
|
||||
babelHelpers.classPrivateFieldLooseBase(this, _updatePopupContent)[_updatePopupContent]();
|
||||
}
|
||||
}
|
||||
setLeftButtons(buttons) {
|
||||
babelHelpers.classPrivateFieldLooseBase(this, _leftButtons)[_leftButtons] = buttons;
|
||||
if (babelHelpers.classPrivateFieldLooseBase(this, _popup)[_popup]) {
|
||||
babelHelpers.classPrivateFieldLooseBase(this, _updatePopupContent)[_updatePopupContent]();
|
||||
}
|
||||
}
|
||||
setCenterButtons(buttons) {
|
||||
babelHelpers.classPrivateFieldLooseBase(this, _centerButtons)[_centerButtons] = buttons;
|
||||
if (babelHelpers.classPrivateFieldLooseBase(this, _popup)[_popup]) {
|
||||
babelHelpers.classPrivateFieldLooseBase(this, _updatePopupContent)[_updatePopupContent]();
|
||||
}
|
||||
}
|
||||
setRightButtons(buttons) {
|
||||
babelHelpers.classPrivateFieldLooseBase(this, _rightButtons)[_rightButtons] = buttons;
|
||||
if (babelHelpers.classPrivateFieldLooseBase(this, _popup)[_popup]) {
|
||||
babelHelpers.classPrivateFieldLooseBase(this, _updatePopupContent)[_updatePopupContent]();
|
||||
}
|
||||
}
|
||||
}
|
||||
function _createPopup2() {
|
||||
return new main_popup.Popup({
|
||||
noAllPaddings: true,
|
||||
className: babelHelpers.classPrivateFieldLooseBase(this, _getPopupClassName)[_getPopupClassName](),
|
||||
closeIcon: false,
|
||||
content: babelHelpers.classPrivateFieldLooseBase(this, _renderPopupContent)[_renderPopupContent](),
|
||||
events: {
|
||||
onShow: () => {
|
||||
babelHelpers.classPrivateFieldLooseBase(this, _adjustDialogPosition)[_adjustDialogPosition]();
|
||||
if (babelHelpers.classPrivateFieldLooseBase(this, _disableScrolling)[_disableScrolling]) {
|
||||
main_core.Dom.addClass(document.body, 'ui-system-dialog__disable-scrolling');
|
||||
}
|
||||
this.emit('onShow');
|
||||
},
|
||||
onAfterShow: () => {
|
||||
babelHelpers.classPrivateFieldLooseBase(this, _adjustDialogPosition)[_adjustDialogPosition]();
|
||||
this.emit('onAfterShow');
|
||||
},
|
||||
onClose: () => {
|
||||
babelHelpers.classPrivateFieldLooseBase(this, _adjustDialogPosition)[_adjustDialogPosition]();
|
||||
if (babelHelpers.classPrivateFieldLooseBase(this, _disableScrolling)[_disableScrolling]) {
|
||||
main_core.Dom.removeClass(document.body, 'ui-system-dialog__disable-scrolling');
|
||||
}
|
||||
this.emit('onHide');
|
||||
},
|
||||
onAfterClose: () => {
|
||||
babelHelpers.classPrivateFieldLooseBase(this, _adjustDialogPosition)[_adjustDialogPosition]();
|
||||
this.emit('onAfterHide');
|
||||
}
|
||||
},
|
||||
borderRadius: babelHelpers.classPrivateFieldLooseBase(this, _getPopupBorderRadius)[_getPopupBorderRadius](),
|
||||
minWidth: babelHelpers.classPrivateFieldLooseBase(this, _width)[_width],
|
||||
maxWidth: babelHelpers.classPrivateFieldLooseBase(this, _width)[_width],
|
||||
overlay: babelHelpers.classPrivateFieldLooseBase(this, _hasOverlay)[_hasOverlay] ? {
|
||||
backgroundColor: 'rgba(0, 32, 78, 0.46)',
|
||||
opacity: 100
|
||||
} : undefined,
|
||||
autoHide: babelHelpers.classPrivateFieldLooseBase(this, _closeByClickOutside)[_closeByClickOutside],
|
||||
closeByEsc: babelHelpers.classPrivateFieldLooseBase(this, _closeByEsc)[_closeByEsc],
|
||||
cacheable: false,
|
||||
anglePosition: babelHelpers.classPrivateFieldLooseBase(this, _anglePosition)[_anglePosition]
|
||||
// bindElement: this.#getCalculatedBindElement(),
|
||||
});
|
||||
}
|
||||
function _getPopup2() {
|
||||
if (!babelHelpers.classPrivateFieldLooseBase(this, _popup)[_popup]) {
|
||||
babelHelpers.classPrivateFieldLooseBase(this, _popup)[_popup] = babelHelpers.classPrivateFieldLooseBase(this, _createPopup)[_createPopup]();
|
||||
}
|
||||
return babelHelpers.classPrivateFieldLooseBase(this, _popup)[_popup];
|
||||
}
|
||||
function _updatePopupContent2() {
|
||||
var _babelHelpers$classPr;
|
||||
(_babelHelpers$classPr = babelHelpers.classPrivateFieldLooseBase(this, _popup)[_popup]) == null ? void 0 : _babelHelpers$classPr.setContent(babelHelpers.classPrivateFieldLooseBase(this, _renderPopupContent)[_renderPopupContent]());
|
||||
}
|
||||
function _renderPopupContent2() {
|
||||
return main_core.Tag.render(_t || (_t = _`
|
||||
<div class="ui-system-dialog__content-wrapper">
|
||||
${0}
|
||||
${0}
|
||||
${0}
|
||||
</div>
|
||||
`), babelHelpers.classPrivateFieldLooseBase(this, _renderDialogHeader)[_renderDialogHeader](), babelHelpers.classPrivateFieldLooseBase(this, _renderDialogContent)[_renderDialogContent](), babelHelpers.classPrivateFieldLooseBase(this, _renderDialogFooter)[_renderDialogFooter]());
|
||||
}
|
||||
function _renderDialogHeader2() {
|
||||
return main_core.Tag.render(_t2 || (_t2 = _`
|
||||
<header class="ui-system-dialog__header">
|
||||
<div class="ui-system-dialog__header-left">
|
||||
${0}
|
||||
${0}
|
||||
</div>
|
||||
${0}
|
||||
</header>
|
||||
`), babelHelpers.classPrivateFieldLooseBase(this, _title)[_title] ? ui_system_typography.Headline.render(babelHelpers.classPrivateFieldLooseBase(this, _title)[_title], {
|
||||
size: 'md'
|
||||
}) : '', babelHelpers.classPrivateFieldLooseBase(this, _subtitle)[_subtitle] ? ui_system_typography.Text.render(babelHelpers.classPrivateFieldLooseBase(this, _subtitle)[_subtitle], {
|
||||
size: 'xs',
|
||||
className: 'ui-system-dialog__subtitle'
|
||||
}) : '', babelHelpers.classPrivateFieldLooseBase(this, _hasCloseButton)[_hasCloseButton] ? babelHelpers.classPrivateFieldLooseBase(this, _renderCloseButton)[_renderCloseButton]() : '');
|
||||
}
|
||||
function _renderCloseButton2() {
|
||||
const icon = new ui_iconSet_api_core.Icon({
|
||||
icon: ui_iconSet_api_core.Outline.CROSS_L,
|
||||
size: 24,
|
||||
hoverMode: ui_iconSet_api_core.IconHoverMode.DEFAULT
|
||||
});
|
||||
const btn = main_core.Tag.render(_t3 || (_t3 = _`<button class="ui-system-dialog__header-close-btn">${0}</button>`), icon.render());
|
||||
main_core.bind(btn, 'click', () => {
|
||||
babelHelpers.classPrivateFieldLooseBase(this, _popup)[_popup].close();
|
||||
});
|
||||
return btn;
|
||||
}
|
||||
function _renderDialogContent2() {
|
||||
const classes = ['ui-system-dialog__content'];
|
||||
if (babelHelpers.classPrivateFieldLooseBase(this, _hasHorizontalPadding)[_hasHorizontalPadding] === false) {
|
||||
classes.push('--rm-horizontal');
|
||||
}
|
||||
if (babelHelpers.classPrivateFieldLooseBase(this, _hasVerticalPadding)[_hasVerticalPadding] === false) {
|
||||
classes.push('--rm-vertical');
|
||||
}
|
||||
return main_core.Tag.render(_t4 || (_t4 = _`<div class="${0}">${0}</div>`), classes.join(' '), babelHelpers.classPrivateFieldLooseBase(this, _content)[_content]);
|
||||
}
|
||||
function _renderDialogFooter2() {
|
||||
return main_core.Tag.render(_t5 || (_t5 = _`
|
||||
<footer class="ui-system-dialog__footer">
|
||||
${0}
|
||||
${0}
|
||||
${0}
|
||||
</footer>
|
||||
`), babelHelpers.classPrivateFieldLooseBase(this, _renderLeftButtons)[_renderLeftButtons](babelHelpers.classPrivateFieldLooseBase(this, _leftButtons)[_leftButtons]), babelHelpers.classPrivateFieldLooseBase(this, _renderCenterButtons)[_renderCenterButtons](babelHelpers.classPrivateFieldLooseBase(this, _centerButtons)[_centerButtons]), babelHelpers.classPrivateFieldLooseBase(this, _renderRightButtons)[_renderRightButtons](babelHelpers.classPrivateFieldLooseBase(this, _rightButtons)[_rightButtons]));
|
||||
}
|
||||
function _renderLeftButtons2(buttons) {
|
||||
const container = main_core.Tag.render(_t6 || (_t6 = _`<div class="ui-system-dialog__left-buttons"></div>`));
|
||||
buttons.forEach(button => {
|
||||
main_core.Dom.append(button.render(), container);
|
||||
});
|
||||
return container;
|
||||
}
|
||||
function _renderCenterButtons2(buttons) {
|
||||
const container = main_core.Tag.render(_t7 || (_t7 = _`<div class="ui-system-dialog__center-buttons"></div>`));
|
||||
buttons.forEach(button => {
|
||||
main_core.Dom.append(button.render(), container);
|
||||
});
|
||||
return container;
|
||||
}
|
||||
function _renderRightButtons2(buttons) {
|
||||
const container = main_core.Tag.render(_t8 || (_t8 = _`<div class="ui-system-dialog__right-buttons"></div>`));
|
||||
buttons.forEach(button => {
|
||||
main_core.Dom.append(button.render(), container);
|
||||
});
|
||||
return container;
|
||||
}
|
||||
function _getPopupBorderRadius2() {
|
||||
if (babelHelpers.classPrivateFieldLooseBase(this, _stickPosition)[_stickPosition] === 'top') {
|
||||
return '0 0 18px 18px';
|
||||
}
|
||||
if (babelHelpers.classPrivateFieldLooseBase(this, _stickPosition)[_stickPosition] === 'right') {
|
||||
return '18ox 0 0 18px';
|
||||
}
|
||||
if (babelHelpers.classPrivateFieldLooseBase(this, _stickPosition)[_stickPosition] === 'bottom') {
|
||||
return '18px 18px 0 0';
|
||||
}
|
||||
if (babelHelpers.classPrivateFieldLooseBase(this, _stickPosition)[_stickPosition] === 'left') {
|
||||
return '18px 0 0 18px';
|
||||
}
|
||||
return '18px 18px 18px 18px';
|
||||
}
|
||||
function _getCalculatedBindElement2() {
|
||||
if (!babelHelpers.classPrivateFieldLooseBase(this, _bindElement)[_bindElement]) {
|
||||
return null;
|
||||
}
|
||||
if (main_core.Type.isPlainObject(babelHelpers.classPrivateFieldLooseBase(this, _bindElement)[_bindElement]) && 'top' in babelHelpers.classPrivateFieldLooseBase(this, _bindElement)[_bindElement] && 'left' in babelHelpers.classPrivateFieldLooseBase(this, _bindElement)[_bindElement]) {
|
||||
return babelHelpers.classPrivateFieldLooseBase(this, _bindElement)[_bindElement];
|
||||
}
|
||||
if (main_core.Type.isDomNode(babelHelpers.classPrivateFieldLooseBase(this, _bindElement)[_bindElement]) && babelHelpers.classPrivateFieldLooseBase(this, _anglePosition)[_anglePosition]) {
|
||||
var _babelHelpers$classPr2;
|
||||
const {
|
||||
width = 0,
|
||||
height = 0
|
||||
} = main_core.Dom.getPosition((_babelHelpers$classPr2 = babelHelpers.classPrivateFieldLooseBase(this, _popup)[_popup]) == null ? void 0 : _babelHelpers$classPr2.getPopupContainer());
|
||||
return babelHelpers.classPrivateFieldLooseBase(this, _calculateAnglePosition)[_calculateAnglePosition](babelHelpers.classPrivateFieldLooseBase(this, _bindElement)[_bindElement], babelHelpers.classPrivateFieldLooseBase(this, _anglePosition)[_anglePosition], width, height);
|
||||
}
|
||||
return babelHelpers.classPrivateFieldLooseBase(this, _bindElement)[_bindElement];
|
||||
}
|
||||
function _calculateAnglePosition2(element, anglePosition, popupWidth, popupHeight) {
|
||||
const elementPosition = main_core.Dom.getPosition(element);
|
||||
const {
|
||||
left,
|
||||
top,
|
||||
width,
|
||||
height
|
||||
} = elementPosition;
|
||||
const angleWidth = 16;
|
||||
const angleHeight = 8;
|
||||
const angleOffset = 30;
|
||||
switch (anglePosition) {
|
||||
case DialogAnglePositions.topLeft:
|
||||
return {
|
||||
top: top + height + popupHeight + angleHeight,
|
||||
left: left + (width - angleWidth) / 2 - angleOffset
|
||||
};
|
||||
case DialogAnglePositions.topCenter:
|
||||
return {
|
||||
top: top + height + popupHeight + angleHeight * 2,
|
||||
left: left - width / 2 - angleOffset - angleWidth / 2
|
||||
};
|
||||
case DialogAnglePositions.topRight:
|
||||
return {
|
||||
top: top + height + popupHeight + angleHeight * 2,
|
||||
left: left - popupWidth + width / 2 + angleOffset + angleWidth / 2
|
||||
};
|
||||
case DialogAnglePositions.rightTop:
|
||||
return {
|
||||
top: top + height / 2 - angleOffset - angleWidth / 2,
|
||||
left: left - popupWidth - angleHeight
|
||||
};
|
||||
case DialogAnglePositions.rightCenter:
|
||||
return {
|
||||
top: top + height / 2 - popupHeight / 2,
|
||||
left: left - popupWidth - angleHeight
|
||||
};
|
||||
case DialogAnglePositions.rightBottom:
|
||||
return {
|
||||
top: top + height / 2 - popupHeight + angleOffset + angleWidth / 2,
|
||||
left: left - popupWidth - angleHeight
|
||||
};
|
||||
case DialogAnglePositions.bottomLeft:
|
||||
return {
|
||||
top: top - popupHeight - angleHeight,
|
||||
left: left + width / 2 - angleOffset - angleWidth / 2
|
||||
};
|
||||
case DialogAnglePositions.bottomCenter:
|
||||
return {
|
||||
top: top - popupHeight - angleHeight,
|
||||
left: left - width / 2 - angleOffset - angleWidth / 2
|
||||
};
|
||||
case DialogAnglePositions.bottomRight:
|
||||
return {
|
||||
top: top - popupHeight - angleHeight,
|
||||
left: left - popupWidth + width / 2 + angleOffset + angleWidth / 2
|
||||
};
|
||||
case DialogAnglePositions.leftTop:
|
||||
return {
|
||||
top: top + height / 2 - angleOffset - angleWidth / 2,
|
||||
left: left + width + angleHeight
|
||||
};
|
||||
case DialogAnglePositions.leftCenter:
|
||||
return {
|
||||
top: top + height / 2 - popupHeight / 2,
|
||||
left: left + width + angleHeight
|
||||
};
|
||||
case DialogAnglePositions.leftBottom:
|
||||
return {
|
||||
top: top + height / 2 - popupHeight + angleOffset + angleWidth / 2,
|
||||
left: left + width + angleHeight
|
||||
};
|
||||
default:
|
||||
return {
|
||||
top: top + height / 2,
|
||||
left: left + width / 2
|
||||
};
|
||||
}
|
||||
}
|
||||
function _getPopupClassName2() {
|
||||
const classes = ['ui-system-dialog'];
|
||||
if (babelHelpers.classPrivateFieldLooseBase(this, _anglePosition)[_anglePosition]) {
|
||||
classes.push('popup-window-with-angle');
|
||||
const angleClass = babelHelpers.classPrivateFieldLooseBase(this, _anglePosition)[_anglePosition].replaceAll(/([A-Z])/g, '-$1').toLowerCase();
|
||||
classes.push(`popup-window-angle-${angleClass}`);
|
||||
}
|
||||
return classes.join(' ');
|
||||
}
|
||||
function _adjustDialogPosition2() {
|
||||
if (babelHelpers.classPrivateFieldLooseBase(this, _popup)[_popup]) {
|
||||
babelHelpers.classPrivateFieldLooseBase(this, _popup)[_popup].setBindElement(babelHelpers.classPrivateFieldLooseBase(this, _getCalculatedBindElement)[_getCalculatedBindElement]());
|
||||
babelHelpers.classPrivateFieldLooseBase(this, _popup)[_popup].adjustPosition();
|
||||
}
|
||||
}
|
||||
|
||||
exports.Dialog = Dialog;
|
||||
|
||||
}((this.BX.UI.System = this.BX.UI.System || {}),BX,BX.Main,BX.UI.System.Typography,BX.UI.IconSet));
|
||||
//# sourceMappingURL=dialog.bundle.js.map
|
||||
1
core/bitrix/js/ui/system/dialog/dist/dialog.bundle.js.map
vendored
Normal file
1
core/bitrix/js/ui/system/dialog/dist/dialog.bundle.js.map
vendored
Normal file
File diff suppressed because one or more lines are too long
1
core/bitrix/js/ui/system/dialog/dist/dialog.bundle.map.js
vendored
Normal file
1
core/bitrix/js/ui/system/dialog/dist/dialog.bundle.map.js
vendored
Normal file
File diff suppressed because one or more lines are too long
1
core/bitrix/js/ui/system/dialog/dist/dialog.bundle.min.css
vendored
Normal file
1
core/bitrix/js/ui/system/dialog/dist/dialog.bundle.min.css
vendored
Normal file
@@ -0,0 +1 @@
|
||||
.ui-system-dialog{--ui-system-dialog-padding-x:24px;--ui-color-bg-content:#fff}body.ui-system-dialog__disable-scrolling{width:100%;position:fixed;scrollbar-gutter:stable}.ui-system-dialog__header{box-sizing:border-box;width:100%;padding:14px var(--ui-system-dialog-padding-x) 0;display:flex;flex-direction:row;justify-content:space-between;align-items:flex-start}.ui-system-dialog__header:has(.ui-system-dialog__header-left:empty){display:none}.ui-system-dialog__header-left{width:100%;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start}.ui-system-dialog__header-close-btn{--ui-icon-set__icon-color:var(--ui-color-base-4);position:relative;right:-4px;width:24px;height:26px;padding:0;margin:0;display:flex;flex-direction:row;align-items:center;background-color:transparent;border:none;cursor:pointer}.ui-system-dialog__header-close-btn:empty{display:none}.ui-system-dialog__subtitle{margin-top:6px;color:var(--ui-color-base-4)}.ui-system-dialog__content{box-sizing:border-box;width:100%;padding:12px var(--ui-system-dialog-padding-x) 18px}.ui-system-dialog__content.--rm-vertical{padding-top:0;padding-bottom:0}.ui-system-dialog__content.--rm-horizontal{padding-left:0;padding-right:0}.ui-system-dialog__footer{box-sizing:border-box;padding:0 var(--ui-system-dialog-padding-x);display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:0 12px}.ui-system-dialog__footer:empty{display:none}.ui-system-dialog__center-buttons,.ui-system-dialog__left-buttons,.ui-system-dialog__right-buttons{display:flex;flex-direction:row;align-items:center;flex:1;gap:0 12px;margin-bottom:24px}.ui-system-dialog__center-buttons:empty,.ui-system-dialog__left-buttons:empty,.ui-system-dialog__right-buttons:empty{display:none}.ui-system-dialog__left-buttons{justify-content:flex-start}.ui-system-dialog__center-buttons{justify-content:center}.ui-system-dialog__right-buttons{justify-content:flex-end}.ui-system-dialog.popup-window-with-angle{position:relative}.ui-system-dialog.popup-window-with-angle:before{content:"";position:absolute;width:0;height:0;border-style:solid;z-index:1}.ui-system-dialog.popup-window-angle-top-left:before{top:-8px;left:30px;border-width:0 8px 8px;border-color:transparent transparent var(--ui-color-bg-content) transparent}.ui-system-dialog.popup-window-angle-top-center:before{top:-8px;left:50%;transform:translateX(-50%);border-width:0 8px 8px;border-color:transparent transparent var(--ui-color-bg-content) transparent}.ui-system-dialog.popup-window-angle-top-right:before{top:-8px;right:30px;border-width:0 8px 8px;border-color:transparent transparent var(--ui-color-bg-content) transparent}.ui-system-dialog.popup-window-angle-right-top:before{top:30px}.ui-system-dialog.popup-window-angle-right-center:before,.ui-system-dialog.popup-window-angle-right-top:before{right:-8px;border-width:8px 0 8px 8px;border-color:transparent transparent transparent var(--ui-color-bg-content)}.ui-system-dialog.popup-window-angle-right-center:before{top:50%;transform:translateY(-50%)}.ui-system-dialog.popup-window-angle-right-bottom:before{bottom:30px;right:-8px;border-width:8px 0 8px 8px;border-color:transparent transparent transparent var(--ui-color-bg-content)}.ui-system-dialog.popup-window-angle-bottom-left:before{bottom:-8px;left:30px;border-width:8px 8px 0;border-color:var(--ui-color-bg-content) transparent transparent transparent}.ui-system-dialog.popup-window-angle-bottom-center:before{bottom:-8px;left:50%;transform:translateX(-50%);border-width:8px 8px 0;border-color:var(--ui-color-bg-content) transparent transparent transparent}.ui-system-dialog.popup-window-angle-bottom-right:before{bottom:-8px;right:30px;border-width:8px 8px 0;border-color:var(--ui-color-bg-content) transparent transparent transparent}.ui-system-dialog.popup-window-angle-left-top:before{top:30px}.ui-system-dialog.popup-window-angle-left-center:before,.ui-system-dialog.popup-window-angle-left-top:before{left:-8px;border-width:8px 8px 8px 0;border-color:transparent var(--ui-color-bg-content) transparent transparent}.ui-system-dialog.popup-window-angle-left-center:before{top:50%;transform:translateY(-50%)}.ui-system-dialog.popup-window-angle-left-bottom:before{bottom:30px;left:-8px;border-width:8px 8px 8px 0;border-color:transparent var(--ui-color-bg-content) transparent transparent}
|
||||
22
core/bitrix/js/ui/system/dialog/dist/dialog.bundle.min.js
vendored
Normal file
22
core/bitrix/js/ui/system/dialog/dist/dialog.bundle.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
21
core/bitrix/js/ui/system/dialog/src/const.js
Normal file
21
core/bitrix/js/ui/system/dialog/src/const.js
Normal file
@@ -0,0 +1,21 @@
|
||||
export const DialogAnglePositions = Object.freeze({
|
||||
topLeft: 'topLeft',
|
||||
topCenter: 'topCenter',
|
||||
topRight: 'topRight',
|
||||
rightTop: 'rightTop',
|
||||
rightCenter: 'rightCenter',
|
||||
rightBottom: 'rightBottom',
|
||||
bottomLeft: 'bottomLeft',
|
||||
bottomCenter: 'bottomCenter',
|
||||
bottomRight: 'bottomRight',
|
||||
leftTop: 'leftTop',
|
||||
leftCenter: 'leftCenter',
|
||||
leftBottom: 'leftBottom',
|
||||
});
|
||||
|
||||
export const aliases = {
|
||||
onShow: { namespace: 'BX.UI.System.Dialog', eventName: 'onShow' },
|
||||
onAfterShow: { namespace: 'BX.UI.System.Dialog', eventName: 'onAfterShow' },
|
||||
onHide: { namespace: 'BX.UI.System.Dialog', eventName: 'onHide' },
|
||||
onAfterHide: { namespace: 'BX.UI.System.Dialog', eventName: 'onAfterHide' },
|
||||
};
|
||||
222
core/bitrix/js/ui/system/dialog/src/css/dialog.css
Normal file
222
core/bitrix/js/ui/system/dialog/src/css/dialog.css
Normal file
@@ -0,0 +1,222 @@
|
||||
.ui-system-dialog {
|
||||
--ui-system-dialog-padding-x: 24px;
|
||||
--ui-color-bg-content: #fff;
|
||||
}
|
||||
|
||||
body.ui-system-dialog__disable-scrolling {
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
scrollbar-gutter: stable;
|
||||
}
|
||||
|
||||
.ui-system-dialog__header {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
padding: 14px var(--ui-system-dialog-padding-x) 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.ui-system-dialog__header:has(.ui-system-dialog__header-left:empty) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ui-system-dialog__header-left {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.ui-system-dialog__header-close-btn {
|
||||
--ui-icon-set__icon-color: var(--ui-color-base-4);
|
||||
position: relative;
|
||||
right: -4px;
|
||||
width: 24px;
|
||||
height: 26px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.ui-system-dialog__header-close-btn:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ui-system-dialog__subtitle {
|
||||
margin-top: 6px;
|
||||
color: var(--ui-color-base-4);
|
||||
}
|
||||
|
||||
.ui-system-dialog__content {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
padding: 12px var(--ui-system-dialog-padding-x) 18px;
|
||||
}
|
||||
|
||||
.ui-system-dialog__content.--rm-vertical {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.ui-system-dialog__content.--rm-horizontal {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.ui-system-dialog__footer {
|
||||
box-sizing: border-box;
|
||||
padding: 0 var(--ui-system-dialog-padding-x);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0 12px;
|
||||
}
|
||||
|
||||
.ui-system-dialog__footer:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ui-system-dialog__left-buttons,
|
||||
.ui-system-dialog__center-buttons,
|
||||
.ui-system-dialog__right-buttons {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
gap: 0 12px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.ui-system-dialog__left-buttons:empty,
|
||||
.ui-system-dialog__center-buttons:empty,
|
||||
.ui-system-dialog__right-buttons:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ui-system-dialog__left-buttons {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.ui-system-dialog__center-buttons {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.ui-system-dialog__right-buttons {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
/* Стили для указателей диалога */
|
||||
.ui-system-dialog.popup-window-with-angle {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.ui-system-dialog.popup-window-with-angle::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Указатели сверху */
|
||||
.ui-system-dialog.popup-window-angle-top-left::before {
|
||||
top: -8px;
|
||||
left: 30px;
|
||||
border-width: 0 8px 8px 8px;
|
||||
border-color: transparent transparent var(--ui-color-bg-content) transparent;
|
||||
}
|
||||
|
||||
.ui-system-dialog.popup-window-angle-top-center::before {
|
||||
top: -8px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
border-width: 0 8px 8px 8px;
|
||||
border-color: transparent transparent var(--ui-color-bg-content) transparent;
|
||||
}
|
||||
|
||||
.ui-system-dialog.popup-window-angle-top-right::before {
|
||||
top: -8px;
|
||||
right: 30px;
|
||||
border-width: 0 8px 8px 8px;
|
||||
border-color: transparent transparent var(--ui-color-bg-content) transparent;
|
||||
}
|
||||
|
||||
/* Указатели справа */
|
||||
.ui-system-dialog.popup-window-angle-right-top::before {
|
||||
top: 30px;
|
||||
right: -8px;
|
||||
border-width: 8px 0 8px 8px;
|
||||
border-color: transparent transparent transparent var(--ui-color-bg-content);
|
||||
}
|
||||
|
||||
.ui-system-dialog.popup-window-angle-right-center::before {
|
||||
top: 50%;
|
||||
right: -8px;
|
||||
transform: translateY(-50%);
|
||||
border-width: 8px 0 8px 8px;
|
||||
border-color: transparent transparent transparent var(--ui-color-bg-content);
|
||||
}
|
||||
|
||||
.ui-system-dialog.popup-window-angle-right-bottom::before {
|
||||
bottom: 30px;
|
||||
right: -8px;
|
||||
border-width: 8px 0 8px 8px;
|
||||
border-color: transparent transparent transparent var(--ui-color-bg-content);
|
||||
}
|
||||
|
||||
/* Указатели снизу */
|
||||
.ui-system-dialog.popup-window-angle-bottom-left::before {
|
||||
bottom: -8px;
|
||||
left: 30px;
|
||||
border-width: 8px 8px 0 8px;
|
||||
border-color: var(--ui-color-bg-content) transparent transparent transparent;
|
||||
}
|
||||
|
||||
.ui-system-dialog.popup-window-angle-bottom-center::before {
|
||||
bottom: -8px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
border-width: 8px 8px 0 8px;
|
||||
border-color: var(--ui-color-bg-content) transparent transparent transparent;
|
||||
}
|
||||
|
||||
.ui-system-dialog.popup-window-angle-bottom-right::before {
|
||||
bottom: -8px;
|
||||
right: 30px;
|
||||
border-width: 8px 8px 0 8px;
|
||||
border-color: var(--ui-color-bg-content) transparent transparent transparent;
|
||||
}
|
||||
|
||||
/* Указатели слева */
|
||||
.ui-system-dialog.popup-window-angle-left-top::before {
|
||||
top: 30px;
|
||||
left: -8px;
|
||||
border-width: 8px 8px 8px 0;
|
||||
border-color: transparent var(--ui-color-bg-content) transparent transparent;
|
||||
}
|
||||
|
||||
.ui-system-dialog.popup-window-angle-left-center::before {
|
||||
top: 50%;
|
||||
left: -8px;
|
||||
transform: translateY(-50%);
|
||||
border-width: 8px 8px 8px 0;
|
||||
border-color: transparent var(--ui-color-bg-content) transparent transparent;
|
||||
}
|
||||
|
||||
.ui-system-dialog.popup-window-angle-left-bottom::before {
|
||||
bottom: 30px;
|
||||
left: -8px;
|
||||
border-width: 8px 8px 8px 0;
|
||||
border-color: transparent var(--ui-color-bg-content) transparent transparent;
|
||||
}
|
||||
503
core/bitrix/js/ui/system/dialog/src/dialog.js
Normal file
503
core/bitrix/js/ui/system/dialog/src/dialog.js
Normal file
@@ -0,0 +1,503 @@
|
||||
import { bind, Dom, Tag, Type, Event } from 'main.core';
|
||||
import { Popup } from 'main.popup';
|
||||
import { Headline, Text } from 'ui.system.typography';
|
||||
import { Outline, Icon, IconHoverMode } from 'ui.icon-set.api.core';
|
||||
import 'ui.icon-set.outline';
|
||||
|
||||
import type { DialogAnglePositon, DialogEvents, DialogStickPosition } from './type';
|
||||
import { DialogAnglePositions, aliases } from './const';
|
||||
|
||||
import './css/dialog.css';
|
||||
|
||||
type DialogBindElement = Element | { top: number; left: number; };
|
||||
|
||||
export type DialogOptions = {
|
||||
title?: string;
|
||||
subtitle?: string;
|
||||
hasCloseButton?: boolean;
|
||||
content: HTMLElement;
|
||||
leftButtons?: Button[];
|
||||
centerButtons?: Button[];
|
||||
rightButtons?: Button[];
|
||||
hasVerticalPadding?: boolean;
|
||||
hasHorizontalPadding?: boolean;
|
||||
events?: DialogEvents;
|
||||
hasOverlay?: boolean;
|
||||
disableScrolling?: boolean;
|
||||
closeByEsc?: boolean;
|
||||
closeByClickOutside?: boolean;
|
||||
|
||||
// stickPosition: ?DialogStickPosition;
|
||||
// bindElement?: DialogBindElement;
|
||||
// anglePosition?: DialogAnglePositon;
|
||||
};
|
||||
|
||||
export class Dialog extends Event.EventEmitter
|
||||
{
|
||||
#title: ?string;
|
||||
#subtitle: ?string;
|
||||
#hasCloseButton: ?boolean;
|
||||
#content: ?HTMLElement;
|
||||
#leftButtons: Button[] = [];
|
||||
#rightButtons: Button[] = [];
|
||||
#centerButtons: Button[] = [];
|
||||
#hasVerticalPadding: ?boolean;
|
||||
#hasHorizontalPadding: ?boolean;
|
||||
#hasOverlay: ?boolean;
|
||||
#width: ?number;
|
||||
#disableScrolling: boolean;
|
||||
#closeByClickOutside: ?boolean;
|
||||
#closeByEsc: ?boolean;
|
||||
|
||||
#stickPosition: ?DialogStickPosition;
|
||||
#bindElement: ?DialogBindElement;
|
||||
#anglePosition: ?DialogAnglePositon;
|
||||
|
||||
#popup: ?Popup;
|
||||
|
||||
constructor(options: DialogOptions = {})
|
||||
{
|
||||
super(options);
|
||||
|
||||
this.setEventNamespace('UI.System.Dialog');
|
||||
this.subscribeFromOptions(options.events);
|
||||
|
||||
this.#title = options.title;
|
||||
this.#subtitle = options.subtitle;
|
||||
this.#hasCloseButton = Type.isBoolean(options.hasCloseButton) ? options.hasCloseButton : true;
|
||||
this.#content = options.content;
|
||||
this.#leftButtons = options.leftButtons ?? [];
|
||||
this.#centerButtons = options.centerButtons ?? [];
|
||||
this.#rightButtons = options.rightButtons ?? [];
|
||||
this.#hasHorizontalPadding = options.hasHorizontalPadding ?? true;
|
||||
this.#hasVerticalPadding = options.hasVerticalPadding ?? true;
|
||||
this.#hasOverlay = options.hasOverlay === true;
|
||||
this.#disableScrolling = options.disableScrolling;
|
||||
this.#closeByClickOutside = options.closeByClickOutside ?? true;
|
||||
this.#closeByEsc = options.closeByEsc ?? true;
|
||||
this.#width = options.width;
|
||||
|
||||
// this.#stickPosition = options.stickPosition;
|
||||
// this.#anglePosition = options.anglePosition;
|
||||
// this.#bindElement = options.bindElement;
|
||||
}
|
||||
|
||||
static show(options?: DialogOptions): void
|
||||
{
|
||||
const dialog = new Dialog(options);
|
||||
|
||||
dialog.show();
|
||||
}
|
||||
|
||||
subscribeFromOptions(events)
|
||||
{
|
||||
super.subscribeFromOptions(events, aliases);
|
||||
}
|
||||
|
||||
show(): void
|
||||
{
|
||||
this.#getPopup().show();
|
||||
}
|
||||
|
||||
hide(): void
|
||||
{
|
||||
this.#getPopup().close();
|
||||
}
|
||||
|
||||
setTitle(title: string): void
|
||||
{
|
||||
this.#title = title;
|
||||
|
||||
if (this.#popup)
|
||||
{
|
||||
this.#updatePopupContent();
|
||||
}
|
||||
}
|
||||
|
||||
setSubtitle(subtitle: string): void
|
||||
{
|
||||
this.#subtitle = subtitle;
|
||||
|
||||
if (this.#popup)
|
||||
{
|
||||
this.#updatePopupContent();
|
||||
}
|
||||
}
|
||||
|
||||
setContent(content: HTMLElement): void
|
||||
{
|
||||
this.#content = content;
|
||||
|
||||
if (this.#popup)
|
||||
{
|
||||
this.#updatePopupContent();
|
||||
}
|
||||
}
|
||||
|
||||
setLeftButtons(buttons: Button[]): void
|
||||
{
|
||||
this.#leftButtons = buttons;
|
||||
|
||||
if (this.#popup)
|
||||
{
|
||||
this.#updatePopupContent();
|
||||
}
|
||||
}
|
||||
|
||||
setCenterButtons(buttons: Button[]): void
|
||||
{
|
||||
this.#centerButtons = buttons;
|
||||
|
||||
if (this.#popup)
|
||||
{
|
||||
this.#updatePopupContent();
|
||||
}
|
||||
}
|
||||
|
||||
setRightButtons(buttons: Button[]): void
|
||||
{
|
||||
this.#rightButtons = buttons;
|
||||
|
||||
if (this.#popup)
|
||||
{
|
||||
this.#updatePopupContent();
|
||||
}
|
||||
}
|
||||
|
||||
#createPopup(): Popup
|
||||
{
|
||||
return new Popup({
|
||||
noAllPaddings: true,
|
||||
className: this.#getPopupClassName(),
|
||||
closeIcon: false,
|
||||
content: this.#renderPopupContent(),
|
||||
events: {
|
||||
onShow: () => {
|
||||
this.#adjustDialogPosition();
|
||||
if (this.#disableScrolling)
|
||||
{
|
||||
Dom.addClass(document.body, 'ui-system-dialog__disable-scrolling');
|
||||
}
|
||||
this.emit('onShow');
|
||||
},
|
||||
onAfterShow: () => {
|
||||
this.#adjustDialogPosition();
|
||||
this.emit('onAfterShow');
|
||||
},
|
||||
onClose: () => {
|
||||
this.#adjustDialogPosition();
|
||||
if (this.#disableScrolling)
|
||||
{
|
||||
Dom.removeClass(document.body, 'ui-system-dialog__disable-scrolling');
|
||||
}
|
||||
this.emit('onHide');
|
||||
},
|
||||
onAfterClose: () => {
|
||||
this.#adjustDialogPosition();
|
||||
this.emit('onAfterHide');
|
||||
},
|
||||
},
|
||||
borderRadius: this.#getPopupBorderRadius(),
|
||||
minWidth: this.#width,
|
||||
maxWidth: this.#width,
|
||||
overlay: this.#hasOverlay ? {
|
||||
backgroundColor: 'rgba(0, 32, 78, 0.46)',
|
||||
opacity: 100,
|
||||
} : undefined,
|
||||
autoHide: this.#closeByClickOutside,
|
||||
closeByEsc: this.#closeByEsc,
|
||||
cacheable: false,
|
||||
|
||||
anglePosition: this.#anglePosition,
|
||||
// bindElement: this.#getCalculatedBindElement(),
|
||||
});
|
||||
}
|
||||
|
||||
#getPopup(): Popup
|
||||
{
|
||||
if (!this.#popup)
|
||||
{
|
||||
this.#popup = this.#createPopup();
|
||||
}
|
||||
|
||||
return this.#popup;
|
||||
}
|
||||
|
||||
#updatePopupContent(): void
|
||||
{
|
||||
this.#popup?.setContent(this.#renderPopupContent());
|
||||
}
|
||||
|
||||
#renderPopupContent(): HTMLElement
|
||||
{
|
||||
return Tag.render`
|
||||
<div class="ui-system-dialog__content-wrapper">
|
||||
${this.#renderDialogHeader()}
|
||||
${this.#renderDialogContent()}
|
||||
${this.#renderDialogFooter()}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
#renderDialogHeader(): HTMLElement
|
||||
{
|
||||
return Tag.render`
|
||||
<header class="ui-system-dialog__header">
|
||||
<div class="ui-system-dialog__header-left">
|
||||
${this.#title ? Headline.render(this.#title, { size: 'md' }) : ''}
|
||||
${this.#subtitle ? Text.render(this.#subtitle, { size: 'xs', className: 'ui-system-dialog__subtitle' }) : ''}
|
||||
</div>
|
||||
${this.#hasCloseButton ? this.#renderCloseButton() : ''}
|
||||
</header>
|
||||
`;
|
||||
}
|
||||
|
||||
#renderCloseButton(): ?HTMLButtonElement
|
||||
{
|
||||
const icon = new Icon({
|
||||
icon: Outline.CROSS_L,
|
||||
size: 24,
|
||||
hoverMode: IconHoverMode.DEFAULT,
|
||||
});
|
||||
|
||||
const btn = Tag.render`<button class="ui-system-dialog__header-close-btn">${icon.render()}</button>`;
|
||||
|
||||
bind(btn, 'click', () => {
|
||||
this.#popup.close();
|
||||
});
|
||||
|
||||
return btn;
|
||||
}
|
||||
|
||||
#renderDialogContent(): HTMLElement
|
||||
{
|
||||
const classes = ['ui-system-dialog__content'];
|
||||
|
||||
if (this.#hasHorizontalPadding === false)
|
||||
{
|
||||
classes.push('--rm-horizontal');
|
||||
}
|
||||
|
||||
if (this.#hasVerticalPadding === false)
|
||||
{
|
||||
classes.push('--rm-vertical');
|
||||
}
|
||||
|
||||
return Tag.render`<div class="${classes.join(' ')}">${this.#content}</div>`;
|
||||
}
|
||||
|
||||
#renderDialogFooter(): ?HTMLElement
|
||||
{
|
||||
return Tag.render`
|
||||
<footer class="ui-system-dialog__footer">
|
||||
${this.#renderLeftButtons(this.#leftButtons)}
|
||||
${this.#renderCenterButtons(this.#centerButtons)}
|
||||
${this.#renderRightButtons(this.#rightButtons)}
|
||||
</footer>
|
||||
`;
|
||||
}
|
||||
|
||||
#renderLeftButtons(buttons: Button[]): HTMLElement
|
||||
{
|
||||
const container = Tag.render`<div class="ui-system-dialog__left-buttons"></div>`;
|
||||
|
||||
buttons.forEach((button) => {
|
||||
Dom.append(button.render(), container);
|
||||
});
|
||||
|
||||
return container;
|
||||
}
|
||||
|
||||
#renderCenterButtons(buttons: Button[]): HTMLElement
|
||||
{
|
||||
const container = Tag.render`<div class="ui-system-dialog__center-buttons"></div>`;
|
||||
|
||||
buttons.forEach((button) => {
|
||||
Dom.append(button.render(), container);
|
||||
});
|
||||
|
||||
return container;
|
||||
}
|
||||
|
||||
#renderRightButtons(buttons: Button[]): HTMLElement
|
||||
{
|
||||
const container = Tag.render`<div class="ui-system-dialog__right-buttons"></div>`;
|
||||
|
||||
buttons.forEach((button) => {
|
||||
Dom.append(button.render(), container);
|
||||
});
|
||||
|
||||
return container;
|
||||
}
|
||||
|
||||
#getPopupBorderRadius(): string
|
||||
{
|
||||
if (this.#stickPosition === 'top')
|
||||
{
|
||||
return '0 0 18px 18px';
|
||||
}
|
||||
|
||||
if (this.#stickPosition === 'right')
|
||||
{
|
||||
return '18ox 0 0 18px';
|
||||
}
|
||||
|
||||
if (this.#stickPosition === 'bottom')
|
||||
{
|
||||
return '18px 18px 0 0';
|
||||
}
|
||||
|
||||
if (this.#stickPosition === 'left')
|
||||
{
|
||||
return '18px 0 0 18px';
|
||||
}
|
||||
|
||||
return '18px 18px 18px 18px';
|
||||
}
|
||||
|
||||
#getCalculatedBindElement(): ?DialogBindElement
|
||||
{
|
||||
if (!this.#bindElement)
|
||||
{
|
||||
return null;
|
||||
}
|
||||
|
||||
if (Type.isPlainObject(this.#bindElement) && 'top' in this.#bindElement && 'left' in this.#bindElement)
|
||||
{
|
||||
return this.#bindElement;
|
||||
}
|
||||
|
||||
if (Type.isDomNode(this.#bindElement) && this.#anglePosition)
|
||||
{
|
||||
const { width = 0, height = 0 } = Dom.getPosition(this.#popup?.getPopupContainer());
|
||||
|
||||
return this.#calculateAnglePosition(this.#bindElement, this.#anglePosition, width, height);
|
||||
}
|
||||
|
||||
return this.#bindElement;
|
||||
}
|
||||
|
||||
#calculateAnglePosition(
|
||||
element: HTMLElement,
|
||||
anglePosition: DialogAnglePositon,
|
||||
popupWidth: number,
|
||||
popupHeight: number,
|
||||
): { top: number; left: number }
|
||||
{
|
||||
const elementPosition = Dom.getPosition(element);
|
||||
const { left, top, width, height } = elementPosition;
|
||||
|
||||
const angleWidth = 16;
|
||||
const angleHeight = 8;
|
||||
const angleOffset = 30;
|
||||
|
||||
switch (anglePosition)
|
||||
{
|
||||
case DialogAnglePositions.topLeft:
|
||||
return {
|
||||
top: top + height + popupHeight + angleHeight,
|
||||
left: left + (width - angleWidth) / 2 - angleOffset,
|
||||
};
|
||||
|
||||
case DialogAnglePositions.topCenter:
|
||||
return {
|
||||
top: top + height + popupHeight + angleHeight * 2,
|
||||
left: left - (width / 2) - angleOffset - angleWidth / 2,
|
||||
};
|
||||
|
||||
case DialogAnglePositions.topRight:
|
||||
return {
|
||||
top: top + height + popupHeight + angleHeight * 2,
|
||||
left: left - popupWidth + width / 2 + angleOffset + angleWidth / 2,
|
||||
};
|
||||
|
||||
case DialogAnglePositions.rightTop:
|
||||
return {
|
||||
top: top + (height / 2) - angleOffset - angleWidth / 2,
|
||||
left: left - popupWidth - angleHeight,
|
||||
};
|
||||
|
||||
case DialogAnglePositions.rightCenter:
|
||||
return {
|
||||
top: top + (height / 2) - popupHeight / 2,
|
||||
left: left - popupWidth - angleHeight,
|
||||
};
|
||||
|
||||
case DialogAnglePositions.rightBottom:
|
||||
return {
|
||||
top: top + (height / 2) - popupHeight + angleOffset + angleWidth / 2,
|
||||
left: left - popupWidth - angleHeight,
|
||||
};
|
||||
|
||||
case DialogAnglePositions.bottomLeft:
|
||||
return {
|
||||
top: top - popupHeight - angleHeight,
|
||||
left: left + (width / 2) - angleOffset - angleWidth / 2,
|
||||
};
|
||||
|
||||
case DialogAnglePositions.bottomCenter:
|
||||
return {
|
||||
top: top - popupHeight - angleHeight,
|
||||
left: left - (width / 2) - angleOffset - angleWidth / 2,
|
||||
};
|
||||
|
||||
case DialogAnglePositions.bottomRight:
|
||||
return {
|
||||
top: top - popupHeight - angleHeight,
|
||||
left: left - popupWidth + width / 2 + angleOffset + angleWidth / 2,
|
||||
};
|
||||
|
||||
case DialogAnglePositions.leftTop:
|
||||
return {
|
||||
top: top + (height / 2) - angleOffset - angleWidth / 2,
|
||||
left: left + width + angleHeight,
|
||||
};
|
||||
|
||||
case DialogAnglePositions.leftCenter:
|
||||
return {
|
||||
top: top + (height / 2) - popupHeight / 2,
|
||||
left: left + width + angleHeight,
|
||||
};
|
||||
|
||||
case DialogAnglePositions.leftBottom:
|
||||
return {
|
||||
top: top + (height / 2) - popupHeight + angleOffset + angleWidth / 2,
|
||||
left: left + width + angleHeight,
|
||||
};
|
||||
|
||||
default:
|
||||
return {
|
||||
top: top + (height / 2),
|
||||
left: left + (width / 2),
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
#getPopupClassName(): string
|
||||
{
|
||||
const classes = ['ui-system-dialog'];
|
||||
|
||||
if (this.#anglePosition)
|
||||
{
|
||||
classes.push('popup-window-with-angle');
|
||||
|
||||
const angleClass = this.#anglePosition
|
||||
.replaceAll(/([A-Z])/g, '-$1')
|
||||
.toLowerCase();
|
||||
|
||||
classes.push(`popup-window-angle-${angleClass}`);
|
||||
}
|
||||
|
||||
return classes.join(' ');
|
||||
}
|
||||
|
||||
#adjustDialogPosition(): void
|
||||
{
|
||||
if (this.#popup)
|
||||
{
|
||||
this.#popup.setBindElement(this.#getCalculatedBindElement());
|
||||
|
||||
this.#popup.adjustPosition();
|
||||
}
|
||||
}
|
||||
}
|
||||
11
core/bitrix/js/ui/system/dialog/src/index.js
Normal file
11
core/bitrix/js/ui/system/dialog/src/index.js
Normal file
@@ -0,0 +1,11 @@
|
||||
import { Dialog, type DialogOptions } from './dialog';
|
||||
import { type DialogEvents } from './type';
|
||||
|
||||
export type {
|
||||
DialogOptions,
|
||||
DialogEvents,
|
||||
};
|
||||
|
||||
export {
|
||||
Dialog,
|
||||
};
|
||||
27
core/bitrix/js/ui/system/dialog/src/type.js
Normal file
27
core/bitrix/js/ui/system/dialog/src/type.js
Normal file
@@ -0,0 +1,27 @@
|
||||
import { DialogAnglePositions } from './const';
|
||||
import { BaseEvent } from 'main.core.events';
|
||||
|
||||
export type DialogAnglePositon = DialogAnglePositions.topLeft
|
||||
| DialogAnglePositions.topCenter
|
||||
| DialogAnglePositions.topRight
|
||||
| DialogAnglePositions.rightTop
|
||||
| DialogAnglePositions.rightCenter
|
||||
| DialogAnglePositions.rightBottom
|
||||
| DialogAnglePositions.bottomLeft
|
||||
| DialogAnglePositions.bottomCenter
|
||||
| DialogAnglePositions.bottomRight
|
||||
| DialogAnglePositions.leftTop
|
||||
| DialogAnglePositions.leftCenter
|
||||
| DialogAnglePositions.leftBottom
|
||||
;
|
||||
|
||||
export type DialogStickPosition = 'top' | 'left' | 'bottom' | 'right';
|
||||
|
||||
export type DialogEventHandler = (event: BaseEvent) => void;
|
||||
export type DialogEvents = {
|
||||
onHide: ?DialogEventHandler;
|
||||
onAfterHide: ?DialogEventHandler;
|
||||
onShow: ?DialogEventHandler;
|
||||
onAfterShow: ?DialogEventHandler;
|
||||
onBeforeShow?: DialogEventHandler;
|
||||
}
|
||||
@@ -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>
|
||||
`,
|
||||
};
|
||||
|
||||
@@ -10,6 +10,7 @@ return [
|
||||
'rel' => [
|
||||
'main.popup',
|
||||
'ui.icon-set.main',
|
||||
'ui.buttons',
|
||||
'ui.cnt',
|
||||
'ui.icon-set.api.core',
|
||||
'ui.icon-set.outline',
|
||||
|
||||
@@ -125,32 +125,53 @@
|
||||
|
||||
/* ui-popup-menu-item */
|
||||
.ui-popup-menu-item {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
}
|
||||
.ui-popup-menu-item.--is-ui-button {
|
||||
padding: 5px var(--pmenu-cell-padding-LR) 5px var(--pmenu-cell-padding-LR);
|
||||
}
|
||||
|
||||
/* ui-popup-menu-item-action */
|
||||
.ui-popup-menu-item-action {
|
||||
/* normalize */
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
text-align: left;
|
||||
font-family: inherit;
|
||||
/* normalize end */
|
||||
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-left: var(--pmenu-cell-padding-LR);
|
||||
padding-right: var(--pmenu-cell-padding-LR);
|
||||
gap: 20px;
|
||||
padding: 1px var(--pmenu-cell-padding-LR) 1px var(--pmenu-cell-padding-LR);
|
||||
width: 100%;
|
||||
min-height: 35px;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.ui-popup-menu-item.--disabled {
|
||||
.ui-popup-menu-item.--disabled .ui-popup-menu-item-action {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.ui-popup-menu-item.--hovered,
|
||||
.ui-popup-menu-item:not(.--disabled):hover {
|
||||
.ui-popup-menu-item.--hovered .ui-popup-menu-item-action,
|
||||
.ui-popup-menu-item-action:hover {
|
||||
box-shadow: inset 0 0 0 999px rgb(from var(--ui-color-bg-state-hover-default-hex) r g b / var(--ui-color-bg-state-hover-default-opacity));
|
||||
}
|
||||
.ui-popup-menu-item:not(.--disabled):active {
|
||||
.ui-popup-menu-item.--disabled .ui-popup-menu-item-action:hover {
|
||||
box-shadow: none;
|
||||
}
|
||||
.ui-popup-menu-item-action:active {
|
||||
box-shadow: inset 0 0 0 999px rgb(from var(--ui-color-bg-state-click-default-hex) r g b / var(--ui-color-bg-state-click-default-opacity));
|
||||
}
|
||||
.ui-popup-menu-item.--disabled .ui-popup-menu-item-action:active {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.ui-popup-menu-item-header {
|
||||
padding-top: var(--pmenu-cell-padding-TB);
|
||||
padding-bottom: var(--pmenu-cell-padding-TB);
|
||||
padding: var(--pmenu-cell-padding-TB) 0 var(--pmenu-cell-padding-TB) 0;
|
||||
}
|
||||
|
||||
/* ui-popup-menu-item-title */
|
||||
@@ -158,57 +179,43 @@
|
||||
display: flex;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* ui-popup-menu-item-title-text */
|
||||
.ui-popup-menu-item-title-text {
|
||||
line-height: var(--pmenu-title-line-height);
|
||||
color: var(--ui-color-base-1);
|
||||
font-size: var(--ui-font-size-md);
|
||||
}
|
||||
|
||||
.ui-popup-menu-item.--accent-2 .ui-popup-menu-item-title-text {
|
||||
color: var(--ui-color-accent-main-primary);
|
||||
}
|
||||
|
||||
.ui-popup-menu-item.--alert .ui-popup-menu-item-title-text {
|
||||
color: var(--ui-color-accent-main-alert);
|
||||
}
|
||||
|
||||
.ui-popup-menu-item.--copilot .ui-popup-menu-item-title-text {
|
||||
color: var(--ui-color-copilot-accent-primary);
|
||||
}
|
||||
|
||||
.ui-popup-menu-item.--disabled .ui-popup-menu-item-title-text {
|
||||
color: var(--ui-color-base-5);
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* ui-popup-menu-item-subtitle */
|
||||
.ui-popup-menu-item-subtitle {
|
||||
color: var(--ui-color-base-4);
|
||||
font-size: var(--ui-font-size-xs);
|
||||
}
|
||||
|
||||
.ui-popup-menu-item.--accent-2 .ui-popup-menu-item-subtitle {
|
||||
color: var(--ui-color-accent-main-primary-alt-2);
|
||||
}
|
||||
|
||||
.ui-popup-menu-item.--alert .ui-popup-menu-item-subtitle {
|
||||
color: var(--ui-color-accent-soft-border-red);
|
||||
}
|
||||
|
||||
.ui-popup-menu-item.--copilot .ui-popup-menu-item-subtitle {
|
||||
color: var(--ui-color-copilot-bg-content-3);
|
||||
}
|
||||
|
||||
.ui-popup-menu-item.--disabled .ui-popup-menu-item-subtitle {
|
||||
color: var(--ui-color-base-5);
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* ui-popup-menu-item-badge-text */
|
||||
.ui-popup-menu-item-badge-text {
|
||||
--badge-color: var(--ui-color-accent-main-success);
|
||||
@@ -216,7 +223,6 @@
|
||||
color: var(--badge-color);
|
||||
font-size: var(--ui-font-size-4xs);
|
||||
}
|
||||
|
||||
.ui-popup-menu-item.--disabled .ui-popup-menu-item-badge-text {
|
||||
color: var(--ui-color-base-5);
|
||||
}
|
||||
@@ -227,7 +233,6 @@
|
||||
.ui-popup-menu-item-buttons {
|
||||
display: flex;
|
||||
gap: var(--ui-space-inline-2xs2);
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.ui-popup-menu-item-icon {
|
||||
@@ -238,20 +243,16 @@
|
||||
.ui-popup-menu-item .ui-icon-set {
|
||||
--ui-icon-set__icon-base-color: var(--ui-color-base-5);
|
||||
}
|
||||
|
||||
.ui-popup-menu-item.--accent-1 .ui-icon-set,
|
||||
.ui-popup-menu-item.--accent-2 .ui-icon-set {
|
||||
--ui-icon-set__icon-base-color: var(--ui-color-accent-main-primary-alt-2);
|
||||
}
|
||||
|
||||
.ui-popup-menu-item.--alert .ui-icon-set {
|
||||
--ui-icon-set__icon-base-color: var(--ui-color-accent-soft-border-red);
|
||||
}
|
||||
|
||||
.ui-popup-menu-item.--copilot .ui-icon-set {
|
||||
--ui-icon-set__icon-base-color: var(--ui-color-copilot-bg-content-3);
|
||||
}
|
||||
|
||||
.ui-popup-menu-item.--disabled .ui-icon-set {
|
||||
--ui-icon-set__icon-base-color: var(--ui-color-base-7);
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
/* eslint-disable */
|
||||
this.BX = this.BX || {};
|
||||
this.BX.UI = this.BX.UI || {};
|
||||
(function (exports,main_popup,ui_iconSet_main,ui_cnt,ui_iconSet_api_core,ui_iconSet_outline,main_core) {
|
||||
(function (exports,main_popup,ui_iconSet_main,ui_buttons,ui_cnt,ui_iconSet_api_core,ui_iconSet_outline,main_core) {
|
||||
'use strict';
|
||||
|
||||
var _delta = /*#__PURE__*/babelHelpers.classPrivateFieldLooseKey("delta");
|
||||
@@ -80,7 +80,8 @@ this.BX.UI = this.BX.UI || {};
|
||||
_t12,
|
||||
_t13,
|
||||
_t14,
|
||||
_t15;
|
||||
_t15,
|
||||
_t16;
|
||||
var _options = /*#__PURE__*/babelHelpers.classPrivateFieldLooseKey("options");
|
||||
var _callbacks = /*#__PURE__*/babelHelpers.classPrivateFieldLooseKey("callbacks");
|
||||
var _subMenu = /*#__PURE__*/babelHelpers.classPrivateFieldLooseKey("subMenu");
|
||||
@@ -331,19 +332,25 @@ this.BX.UI = this.BX.UI || {};
|
||||
return babelHelpers.classPrivateFieldLooseBase(this, _subMenu)[_subMenu];
|
||||
}
|
||||
render() {
|
||||
var _babelHelpers$classPr7;
|
||||
if (babelHelpers.classPrivateFieldLooseBase(this, _element)[_element]) {
|
||||
return babelHelpers.classPrivateFieldLooseBase(this, _element)[_element];
|
||||
}
|
||||
const uiButtonOptions = babelHelpers.classPrivateFieldLooseBase(this, _options)[_options].uiButtonOptions;
|
||||
const isUiButton = Boolean(uiButtonOptions);
|
||||
const classNameIsUiButton = isUiButton ? ' --is-ui-button' : '';
|
||||
const classNameDesign = babelHelpers.classPrivateFieldLooseBase(this, _options)[_options].design ? ` --${babelHelpers.classPrivateFieldLooseBase(this, _options)[_options].design}` : '';
|
||||
babelHelpers.classPrivateFieldLooseBase(this, _element)[_element] = main_core.Tag.render(_t || (_t = _`
|
||||
<div class="ui-popup-menu-item --${0}">
|
||||
${0}
|
||||
<div class="ui-popup-menu-item${0}${0}">
|
||||
${0}
|
||||
</div>
|
||||
`), (_babelHelpers$classPr7 = babelHelpers.classPrivateFieldLooseBase(this, _options)[_options].design) != null ? _babelHelpers$classPr7 : MenuItemDesign.Default, babelHelpers.classPrivateFieldLooseBase(this, _renderHeader)[_renderHeader](), babelHelpers.classPrivateFieldLooseBase(this, _renderButtons)[_renderButtons]());
|
||||
main_core.Event.bind(babelHelpers.classPrivateFieldLooseBase(this, _element)[_element], 'click', babelHelpers.classPrivateFieldLooseBase(this, _options)[_options].onClick);
|
||||
main_core.Event.bind(babelHelpers.classPrivateFieldLooseBase(this, _element)[_element], 'mouseenter', babelHelpers.classPrivateFieldLooseBase(this, _onMouseEnter)[_onMouseEnter]);
|
||||
main_core.Event.bind(babelHelpers.classPrivateFieldLooseBase(this, _element)[_element], 'mouseleave', babelHelpers.classPrivateFieldLooseBase(this, _onMouseLeave)[_onMouseLeave]);
|
||||
`), classNameIsUiButton, classNameDesign, isUiButton ? new ui_buttons.Button(uiButtonOptions).render() : main_core.Tag.render(_t2 || (_t2 = _`
|
||||
<button
|
||||
class="ui-popup-menu-item-action"
|
||||
onclick="${0}"
|
||||
onmouseenter="${0}"
|
||||
onmouseleave="${0}"
|
||||
>${0}${0}</button>
|
||||
`), babelHelpers.classPrivateFieldLooseBase(this, _options)[_options].onClick, babelHelpers.classPrivateFieldLooseBase(this, _onMouseEnter)[_onMouseEnter], babelHelpers.classPrivateFieldLooseBase(this, _onMouseLeave)[_onMouseLeave], babelHelpers.classPrivateFieldLooseBase(this, _renderHeader)[_renderHeader](), babelHelpers.classPrivateFieldLooseBase(this, _renderButtons)[_renderButtons]()));
|
||||
return babelHelpers.classPrivateFieldLooseBase(this, _element)[_element];
|
||||
}
|
||||
closeSubMenuWithTimeout() {
|
||||
@@ -351,19 +358,19 @@ this.BX.UI = this.BX.UI || {};
|
||||
babelHelpers.classPrivateFieldLooseBase(this, _closeTimeout)[_closeTimeout] = setTimeout(this.closeSubMenu, 200);
|
||||
}
|
||||
destroy() {
|
||||
var _babelHelpers$classPr8;
|
||||
(_babelHelpers$classPr8 = babelHelpers.classPrivateFieldLooseBase(this, _subMenu)[_subMenu]) == null ? void 0 : _babelHelpers$classPr8.destroy();
|
||||
var _babelHelpers$classPr7;
|
||||
(_babelHelpers$classPr7 = babelHelpers.classPrivateFieldLooseBase(this, _subMenu)[_subMenu]) == null ? void 0 : _babelHelpers$classPr7.destroy();
|
||||
}
|
||||
}
|
||||
function _onSubMenuItemClick2(item) {
|
||||
item.onClick == null ? void 0 : item.onClick();
|
||||
if (!item.subMenu && babelHelpers.classPrivateFieldLooseBase(this, _options)[_options].closeOnSubItemClick) {
|
||||
var _babelHelpers$classPr9, _babelHelpers$classPr10;
|
||||
(_babelHelpers$classPr9 = (_babelHelpers$classPr10 = babelHelpers.classPrivateFieldLooseBase(this, _callbacks)[_callbacks]).onSubMenuItemClick) == null ? void 0 : _babelHelpers$classPr9.call(_babelHelpers$classPr10);
|
||||
var _babelHelpers$classPr8, _babelHelpers$classPr9;
|
||||
(_babelHelpers$classPr8 = (_babelHelpers$classPr9 = babelHelpers.classPrivateFieldLooseBase(this, _callbacks)[_callbacks]).onSubMenuItemClick) == null ? void 0 : _babelHelpers$classPr8.call(_babelHelpers$classPr9);
|
||||
}
|
||||
}
|
||||
function _renderHeader2() {
|
||||
return main_core.Tag.render(_t2 || (_t2 = _`
|
||||
return main_core.Tag.render(_t3 || (_t3 = _`
|
||||
<div class="ui-popup-menu-item-header">
|
||||
${0}
|
||||
${0}
|
||||
@@ -371,7 +378,7 @@ this.BX.UI = this.BX.UI || {};
|
||||
`), babelHelpers.classPrivateFieldLooseBase(this, _renderTitle)[_renderTitle](), babelHelpers.classPrivateFieldLooseBase(this, _renderSubtitle)[_renderSubtitle]());
|
||||
}
|
||||
function _renderTitle2() {
|
||||
return main_core.Tag.render(_t3 || (_t3 = _`
|
||||
return main_core.Tag.render(_t4 || (_t4 = _`
|
||||
<div class="ui-popup-menu-item-title">
|
||||
${0}
|
||||
<div class="ui-popup-menu-item-title-text">${0}</div>
|
||||
@@ -383,20 +390,20 @@ this.BX.UI = this.BX.UI || {};
|
||||
if (!babelHelpers.classPrivateFieldLooseBase(this, _options)[_options].isLocked) {
|
||||
return '';
|
||||
}
|
||||
return main_core.Tag.render(_t4 || (_t4 = _`
|
||||
return main_core.Tag.render(_t5 || (_t5 = _`
|
||||
<div class="ui-popup-menu-item-lock">
|
||||
<div class="ui-icon-set --${0}"></div>
|
||||
</div>
|
||||
`), ui_iconSet_api_core.Outline.LOCK_L);
|
||||
}
|
||||
function _renderBadgeText2() {
|
||||
var _babelHelpers$classPr11;
|
||||
if (!main_core.Type.isStringFilled((_babelHelpers$classPr11 = babelHelpers.classPrivateFieldLooseBase(this, _options)[_options].badgeText) == null ? void 0 : _babelHelpers$classPr11.title)) {
|
||||
var _babelHelpers$classPr10;
|
||||
if (!main_core.Type.isStringFilled((_babelHelpers$classPr10 = babelHelpers.classPrivateFieldLooseBase(this, _options)[_options].badgeText) == null ? void 0 : _babelHelpers$classPr10.title)) {
|
||||
return '';
|
||||
}
|
||||
const color = babelHelpers.classPrivateFieldLooseBase(this, _options)[_options].badgeText.color;
|
||||
const style = color ? `--badge-color: ${color};` : '';
|
||||
return main_core.Tag.render(_t5 || (_t5 = _`
|
||||
return main_core.Tag.render(_t6 || (_t6 = _`
|
||||
<div class="ui-popup-menu-item-badge-text" style="${0}">
|
||||
${0}
|
||||
</div>
|
||||
@@ -406,12 +413,12 @@ this.BX.UI = this.BX.UI || {};
|
||||
if (!main_core.Type.isStringFilled(babelHelpers.classPrivateFieldLooseBase(this, _options)[_options].subtitle)) {
|
||||
return '';
|
||||
}
|
||||
return main_core.Tag.render(_t6 || (_t6 = _`
|
||||
return main_core.Tag.render(_t7 || (_t7 = _`
|
||||
<div class="ui-popup-menu-item-subtitle">${0}</div>
|
||||
`), main_core.Text.encode(babelHelpers.classPrivateFieldLooseBase(this, _options)[_options].subtitle));
|
||||
}
|
||||
function _renderButtons2() {
|
||||
return main_core.Tag.render(_t7 || (_t7 = _`
|
||||
return main_core.Tag.render(_t8 || (_t8 = _`
|
||||
<div class="ui-popup-menu-item-buttons">
|
||||
${0}
|
||||
${0}
|
||||
@@ -426,11 +433,11 @@ this.BX.UI = this.BX.UI || {};
|
||||
return '';
|
||||
}
|
||||
if (!babelHelpers.classPrivateFieldLooseBase(this, _options)[_options].isSelected) {
|
||||
return main_core.Tag.render(_t8 || (_t8 = _`
|
||||
return main_core.Tag.render(_t9 || (_t9 = _`
|
||||
<div class="ui-popup-menu-item-check"></div>
|
||||
`));
|
||||
}
|
||||
return main_core.Tag.render(_t9 || (_t9 = _`
|
||||
return main_core.Tag.render(_t10 || (_t10 = _`
|
||||
<div class="ui-popup-menu-item-check">
|
||||
<div class="ui-icon-set --${0}"></div>
|
||||
</div>
|
||||
@@ -440,7 +447,7 @@ this.BX.UI = this.BX.UI || {};
|
||||
if (!babelHelpers.classPrivateFieldLooseBase(this, _options)[_options].extraIcon) {
|
||||
return '';
|
||||
}
|
||||
const extra = main_core.Tag.render(_t10 || (_t10 = _`
|
||||
const extra = main_core.Tag.render(_t11 || (_t11 = _`
|
||||
<div class="ui-popup-menu-item-extra ${0}">
|
||||
<div class="ui-icon-set --${0}"></div>
|
||||
</div>
|
||||
@@ -456,11 +463,11 @@ this.BX.UI = this.BX.UI || {};
|
||||
return '';
|
||||
}
|
||||
if (!babelHelpers.classPrivateFieldLooseBase(this, _options)[_options].counter.value) {
|
||||
return main_core.Tag.render(_t11 || (_t11 = _`
|
||||
return main_core.Tag.render(_t12 || (_t12 = _`
|
||||
<div class="ui-popup-menu-item-counter"></div>
|
||||
`));
|
||||
}
|
||||
return main_core.Tag.render(_t12 || (_t12 = _`
|
||||
return main_core.Tag.render(_t13 || (_t13 = _`
|
||||
<div class="ui-popup-menu-item-counter">
|
||||
${0}
|
||||
</div>
|
||||
@@ -471,14 +478,14 @@ this.BX.UI = this.BX.UI || {};
|
||||
}
|
||||
function _renderIcon2() {
|
||||
if (babelHelpers.classPrivateFieldLooseBase(this, _options)[_options].icon) {
|
||||
return main_core.Tag.render(_t13 || (_t13 = _`
|
||||
return main_core.Tag.render(_t14 || (_t14 = _`
|
||||
<div class="ui-popup-menu-item-icon">
|
||||
<div class="ui-icon-set --${0}"></div>
|
||||
</div>
|
||||
`), babelHelpers.classPrivateFieldLooseBase(this, _options)[_options].icon);
|
||||
}
|
||||
if (babelHelpers.classPrivateFieldLooseBase(this, _options)[_options].svg) {
|
||||
return main_core.Tag.render(_t14 || (_t14 = _`
|
||||
return main_core.Tag.render(_t15 || (_t15 = _`
|
||||
<div class="ui-popup-menu-item-svg">
|
||||
${0}
|
||||
</div>
|
||||
@@ -490,7 +497,7 @@ this.BX.UI = this.BX.UI || {};
|
||||
if (!babelHelpers.classPrivateFieldLooseBase(this, _options)[_options].subMenu) {
|
||||
return '';
|
||||
}
|
||||
return main_core.Tag.render(_t15 || (_t15 = _`
|
||||
return main_core.Tag.render(_t16 || (_t16 = _`
|
||||
<div class="ui-popup-menu-item-arrow">
|
||||
<div class="ui-icon-set --${0}"></div>
|
||||
</div>
|
||||
@@ -622,6 +629,7 @@ this.BX.UI = this.BX.UI || {};
|
||||
const defaultOptions = {
|
||||
noAllPaddings: true,
|
||||
autoHide: true,
|
||||
closeByEsc: true,
|
||||
autoHideHandler: babelHelpers.classPrivateFieldLooseBase(this, _shouldHide)[_shouldHide],
|
||||
closeOnItemClick: true
|
||||
};
|
||||
@@ -810,5 +818,5 @@ this.BX.UI = this.BX.UI || {};
|
||||
exports.MenuSectionDesign = MenuSectionDesign;
|
||||
exports.MenuRichHeaderDesign = MenuRichHeaderDesign;
|
||||
|
||||
}((this.BX.UI.System = this.BX.UI.System || {}),BX.Main,BX,BX.UI,BX.UI.IconSet,BX,BX));
|
||||
}((this.BX.UI.System = this.BX.UI.System || {}),BX.Main,BX,BX.UI,BX.UI,BX.UI.IconSet,BX,BX));
|
||||
//# sourceMappingURL=menu.bundle.js.map
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -1,31 +1,52 @@
|
||||
/* ui-popup-menu-item */
|
||||
.ui-popup-menu-item {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
}
|
||||
.ui-popup-menu-item.--is-ui-button {
|
||||
padding: 5px var(--pmenu-cell-padding-LR) 5px var(--pmenu-cell-padding-LR);
|
||||
}
|
||||
|
||||
/* ui-popup-menu-item-action */
|
||||
.ui-popup-menu-item-action {
|
||||
/* normalize */
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
text-align: left;
|
||||
font-family: inherit;
|
||||
/* normalize end */
|
||||
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-left: var(--pmenu-cell-padding-LR);
|
||||
padding-right: var(--pmenu-cell-padding-LR);
|
||||
gap: 20px;
|
||||
padding: 1px var(--pmenu-cell-padding-LR) 1px var(--pmenu-cell-padding-LR);
|
||||
width: 100%;
|
||||
min-height: 35px;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.ui-popup-menu-item.--disabled {
|
||||
.ui-popup-menu-item.--disabled .ui-popup-menu-item-action {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.ui-popup-menu-item.--hovered,
|
||||
.ui-popup-menu-item:not(.--disabled):hover {
|
||||
.ui-popup-menu-item.--hovered .ui-popup-menu-item-action,
|
||||
.ui-popup-menu-item-action:hover {
|
||||
box-shadow: inset 0 0 0 999px rgb(from var(--ui-color-bg-state-hover-default-hex) r g b / var(--ui-color-bg-state-hover-default-opacity));
|
||||
}
|
||||
.ui-popup-menu-item:not(.--disabled):active {
|
||||
.ui-popup-menu-item.--disabled .ui-popup-menu-item-action:hover {
|
||||
box-shadow: none;
|
||||
}
|
||||
.ui-popup-menu-item-action:active {
|
||||
box-shadow: inset 0 0 0 999px rgb(from var(--ui-color-bg-state-click-default-hex) r g b / var(--ui-color-bg-state-click-default-opacity));
|
||||
}
|
||||
.ui-popup-menu-item.--disabled .ui-popup-menu-item-action:active {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.ui-popup-menu-item-header {
|
||||
padding-top: var(--pmenu-cell-padding-TB);
|
||||
padding-bottom: var(--pmenu-cell-padding-TB);
|
||||
padding: var(--pmenu-cell-padding-TB) 0 var(--pmenu-cell-padding-TB) 0;
|
||||
}
|
||||
|
||||
/* ui-popup-menu-item-title */
|
||||
@@ -33,57 +54,43 @@
|
||||
display: flex;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* ui-popup-menu-item-title-text */
|
||||
.ui-popup-menu-item-title-text {
|
||||
line-height: var(--pmenu-title-line-height);
|
||||
color: var(--ui-color-base-1);
|
||||
font-size: var(--ui-font-size-md);
|
||||
}
|
||||
|
||||
.ui-popup-menu-item.--accent-2 .ui-popup-menu-item-title-text {
|
||||
color: var(--ui-color-accent-main-primary);
|
||||
}
|
||||
|
||||
.ui-popup-menu-item.--alert .ui-popup-menu-item-title-text {
|
||||
color: var(--ui-color-accent-main-alert);
|
||||
}
|
||||
|
||||
.ui-popup-menu-item.--copilot .ui-popup-menu-item-title-text {
|
||||
color: var(--ui-color-copilot-accent-primary);
|
||||
}
|
||||
|
||||
.ui-popup-menu-item.--disabled .ui-popup-menu-item-title-text {
|
||||
color: var(--ui-color-base-5);
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* ui-popup-menu-item-subtitle */
|
||||
.ui-popup-menu-item-subtitle {
|
||||
color: var(--ui-color-base-4);
|
||||
font-size: var(--ui-font-size-xs);
|
||||
}
|
||||
|
||||
.ui-popup-menu-item.--accent-2 .ui-popup-menu-item-subtitle {
|
||||
color: var(--ui-color-accent-main-primary-alt-2);
|
||||
}
|
||||
|
||||
.ui-popup-menu-item.--alert .ui-popup-menu-item-subtitle {
|
||||
color: var(--ui-color-accent-soft-border-red);
|
||||
}
|
||||
|
||||
.ui-popup-menu-item.--copilot .ui-popup-menu-item-subtitle {
|
||||
color: var(--ui-color-copilot-bg-content-3);
|
||||
}
|
||||
|
||||
.ui-popup-menu-item.--disabled .ui-popup-menu-item-subtitle {
|
||||
color: var(--ui-color-base-5);
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* ui-popup-menu-item-badge-text */
|
||||
.ui-popup-menu-item-badge-text {
|
||||
--badge-color: var(--ui-color-accent-main-success);
|
||||
@@ -91,7 +98,6 @@
|
||||
color: var(--badge-color);
|
||||
font-size: var(--ui-font-size-4xs);
|
||||
}
|
||||
|
||||
.ui-popup-menu-item.--disabled .ui-popup-menu-item-badge-text {
|
||||
color: var(--ui-color-base-5);
|
||||
}
|
||||
@@ -102,7 +108,6 @@
|
||||
.ui-popup-menu-item-buttons {
|
||||
display: flex;
|
||||
gap: var(--ui-space-inline-2xs2);
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.ui-popup-menu-item-icon {
|
||||
@@ -113,20 +118,16 @@
|
||||
.ui-popup-menu-item .ui-icon-set {
|
||||
--ui-icon-set__icon-base-color: var(--ui-color-base-5);
|
||||
}
|
||||
|
||||
.ui-popup-menu-item.--accent-1 .ui-icon-set,
|
||||
.ui-popup-menu-item.--accent-2 .ui-icon-set {
|
||||
--ui-icon-set__icon-base-color: var(--ui-color-accent-main-primary-alt-2);
|
||||
}
|
||||
|
||||
.ui-popup-menu-item.--alert .ui-icon-set {
|
||||
--ui-icon-set__icon-base-color: var(--ui-color-accent-soft-border-red);
|
||||
}
|
||||
|
||||
.ui-popup-menu-item.--copilot .ui-icon-set {
|
||||
--ui-icon-set__icon-base-color: var(--ui-color-copilot-bg-content-3);
|
||||
}
|
||||
|
||||
.ui-popup-menu-item.--disabled .ui-icon-set {
|
||||
--ui-icon-set__icon-base-color: var(--ui-color-base-7);
|
||||
}
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import { Dom, Event, Tag, Text, Type } from 'main.core';
|
||||
import { Button as UiButton } from 'ui.buttons';
|
||||
import { Counter, CounterColor } from 'ui.cnt';
|
||||
import { Outline } from 'ui.icon-set.api.core';
|
||||
import 'ui.icon-set.outline';
|
||||
@@ -48,17 +49,27 @@ export class MenuItem
|
||||
return this.#element;
|
||||
}
|
||||
|
||||
const uiButtonOptions = this.#options.uiButtonOptions;
|
||||
const isUiButton = Boolean(uiButtonOptions);
|
||||
const classNameIsUiButton = isUiButton ? ' --is-ui-button' : '';
|
||||
const classNameDesign = this.#options.design ? ` --${this.#options.design}` : '';
|
||||
|
||||
this.#element = Tag.render`
|
||||
<div class="ui-popup-menu-item --${this.#options.design ?? MenuItemDesign.Default}">
|
||||
${this.#renderHeader()}
|
||||
${this.#renderButtons()}
|
||||
<div class="ui-popup-menu-item${classNameIsUiButton}${classNameDesign}">
|
||||
${isUiButton
|
||||
? new UiButton(uiButtonOptions).render()
|
||||
: Tag.render`
|
||||
<button
|
||||
class="ui-popup-menu-item-action"
|
||||
onclick="${this.#options.onClick}"
|
||||
onmouseenter="${this.#onMouseEnter}"
|
||||
onmouseleave="${this.#onMouseLeave}"
|
||||
>${this.#renderHeader()}${this.#renderButtons()}</button>
|
||||
`
|
||||
}
|
||||
</div>
|
||||
`;
|
||||
|
||||
Event.bind(this.#element, 'click', this.#options.onClick);
|
||||
Event.bind(this.#element, 'mouseenter', this.#onMouseEnter);
|
||||
Event.bind(this.#element, 'mouseleave', this.#onMouseLeave);
|
||||
|
||||
return this.#element;
|
||||
}
|
||||
|
||||
|
||||
@@ -20,6 +20,7 @@ export class Menu
|
||||
const defaultOptions: MenuOptions = {
|
||||
noAllPaddings: true,
|
||||
autoHide: true,
|
||||
closeByEsc: true,
|
||||
autoHideHandler: this.#shouldHide,
|
||||
closeOnItemClick: true,
|
||||
};
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import type { PopupOptions } from 'main.popup';
|
||||
import type { CounterOptions } from 'ui.cnt';
|
||||
import type { ButtonOptions } from 'ui.buttons';
|
||||
|
||||
export type MenuOptions = PopupOptions & {
|
||||
sections: MenuSectionOptions[],
|
||||
@@ -34,6 +35,7 @@ export type MenuItemOptions = {
|
||||
subMenu: MenuOptions[],
|
||||
isLocked: boolean,
|
||||
closeOnSubItemClick: boolean,
|
||||
uiButtonOptions: ButtonOptions,
|
||||
};
|
||||
|
||||
type BadgeText = {
|
||||
|
||||
Reference in New Issue
Block a user