vxe-pc-ui 4.18.23 → 4.19.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/all.esm.js +1076 -989
- package/dist/style.css +1 -1
- package/dist/style.min.css +1 -1
- package/es/calendar/src/calendar.js +1 -1
- package/es/card/src/card.js +1 -1
- package/es/carousel/src/carousel.js +1 -1
- package/es/countdown/src/countdown.js +1 -1
- package/es/date-picker/src/date-picker.js +3 -3
- package/es/icon/style.css +1 -1
- package/es/icon-picker/src/icon-picker.js +1 -1
- package/es/layout-aside/src/layout-aside.js +31 -6
- package/es/layout-aside/style.css +5 -0
- package/es/layout-aside/style.min.css +1 -1
- package/es/layout-body/src/layout-body.js +29 -6
- package/es/layout-body/style.css +5 -1
- package/es/layout-body/style.min.css +1 -1
- package/es/list/src/list.js +1 -1
- package/es/menu/src/menu.js +20 -5
- package/es/menu/style.css +14 -2
- package/es/menu/style.min.css +1 -1
- package/es/scrollbar/src/scrollbar.js +38 -17
- package/es/scrollbar/style.css +16 -13
- package/es/scrollbar/style.min.css +1 -1
- package/es/select/src/select.js +2 -2
- package/es/style.css +1 -1
- package/es/style.min.css +1 -1
- package/es/tabs/src/tabs.js +1 -1
- package/es/text-ellipsis/style.css +29 -10
- package/es/text-ellipsis/style.min.css +1 -1
- package/es/ui/index.js +8 -2
- package/es/ui/src/log.js +1 -1
- package/es/upload/src/upload.js +1 -1
- package/es/vxe-layout-aside/style.css +5 -0
- package/es/vxe-layout-aside/style.min.css +1 -1
- package/es/vxe-layout-body/style.css +5 -1
- package/es/vxe-layout-body/style.min.css +1 -1
- package/es/vxe-menu/style.css +14 -2
- package/es/vxe-menu/style.min.css +1 -1
- package/es/vxe-scrollbar/style.css +16 -13
- package/es/vxe-scrollbar/style.min.css +1 -1
- package/es/vxe-text-ellipsis/style.css +29 -10
- package/es/vxe-text-ellipsis/style.min.css +1 -1
- package/lib/calendar/src/calendar.js +1 -1
- package/lib/calendar/src/calendar.min.js +1 -1
- package/lib/card/src/card.js +1 -1
- package/lib/card/src/card.min.js +1 -1
- package/lib/carousel/src/carousel.js +1 -1
- package/lib/carousel/src/carousel.min.js +1 -1
- package/lib/countdown/src/countdown.js +1 -1
- package/lib/countdown/src/countdown.min.js +1 -1
- package/lib/date-picker/src/date-picker.js +3 -3
- package/lib/date-picker/src/date-picker.min.js +1 -1
- package/lib/icon/style/style.css +1 -1
- package/lib/icon/style/style.min.css +1 -1
- package/lib/icon-picker/src/icon-picker.js +1 -1
- package/lib/icon-picker/src/icon-picker.min.js +1 -1
- package/lib/index.umd.js +1456 -1333
- package/lib/index.umd.min.js +1 -1
- package/lib/layout-aside/src/layout-aside.js +35 -4
- package/lib/layout-aside/src/layout-aside.min.js +1 -1
- package/lib/layout-aside/style/style.css +5 -0
- package/lib/layout-aside/style/style.min.css +1 -1
- package/lib/layout-body/src/layout-body.js +35 -3
- package/lib/layout-body/src/layout-body.min.js +1 -1
- package/lib/layout-body/style/style.css +5 -1
- package/lib/layout-body/style/style.min.css +1 -1
- package/lib/list/src/list.js +1 -1
- package/lib/list/src/list.min.js +1 -1
- package/lib/menu/src/menu.js +25 -3
- package/lib/menu/src/menu.min.js +1 -1
- package/lib/menu/style/style.css +14 -2
- package/lib/menu/style/style.min.css +1 -1
- package/lib/scrollbar/src/scrollbar.js +38 -8
- package/lib/scrollbar/src/scrollbar.min.js +1 -1
- package/lib/scrollbar/style/style.css +16 -13
- package/lib/scrollbar/style/style.min.css +1 -1
- package/lib/select/src/select.js +2 -2
- package/lib/select/src/select.min.js +1 -1
- package/lib/style.css +1 -1
- package/lib/style.min.css +1 -1
- package/lib/tabs/src/tabs.js +1 -1
- package/lib/tabs/src/tabs.min.js +1 -1
- package/lib/text-ellipsis/style/style.css +29 -10
- package/lib/text-ellipsis/style/style.min.css +1 -1
- package/lib/ui/index.js +8 -2
- package/lib/ui/index.min.js +1 -1
- package/lib/ui/src/log.js +1 -1
- package/lib/ui/src/log.min.js +1 -1
- package/lib/upload/src/upload.js +1 -1
- package/lib/upload/src/upload.min.js +1 -1
- package/lib/vxe-layout-aside/style/style.css +5 -0
- package/lib/vxe-layout-aside/style/style.min.css +1 -1
- package/lib/vxe-layout-body/style/style.css +5 -1
- package/lib/vxe-layout-body/style/style.min.css +1 -1
- package/lib/vxe-menu/style/style.css +14 -2
- package/lib/vxe-menu/style/style.min.css +1 -1
- package/lib/vxe-scrollbar/style/style.css +16 -13
- package/lib/vxe-scrollbar/style/style.min.css +1 -1
- package/lib/vxe-text-ellipsis/style/style.css +29 -10
- package/lib/vxe-text-ellipsis/style/style.min.css +1 -1
- package/package.json +2 -2
- package/packages/calendar/src/calendar.ts +1 -1
- package/packages/card/src/card.ts +1 -1
- package/packages/carousel/src/carousel.ts +1 -1
- package/packages/countdown/src/countdown.ts +1 -1
- package/packages/date-picker/src/date-picker.ts +3 -3
- package/packages/icon-picker/src/icon-picker.ts +1 -1
- package/packages/layout-aside/src/layout-aside.ts +32 -6
- package/packages/layout-body/src/layout-body.ts +33 -6
- package/packages/list/src/list.ts +1 -1
- package/packages/menu/src/menu.ts +26 -5
- package/packages/scrollbar/src/scrollbar.ts +41 -14
- package/packages/select/src/select.ts +2 -2
- package/packages/tabs/src/tabs.ts +1 -1
- package/packages/ui/index.ts +8 -3
- package/packages/upload/src/upload.ts +1 -1
- package/styles/components/layout-aside.scss +5 -0
- package/styles/components/layout-body.scss +4 -1
- package/styles/components/menu.scss +15 -2
- package/styles/components/scrollbar.scss +24 -17
- package/styles/components/text-ellipsis.scss +23 -64
- package/styles/theme/base.scss +2 -0
- package/types/components/layout-aside.d.ts +5 -0
- package/types/components/layout-body.d.ts +5 -1
- package/types/components/menu.d.ts +5 -0
- package/types/components/scrollbar.d.ts +15 -0
- /package/es/icon/{iconfont.1791517860186.ttf → iconfont.1791542939851.ttf} +0 -0
- /package/es/icon/{iconfont.1791517860186.woff → iconfont.1791542939851.woff} +0 -0
- /package/es/icon/{iconfont.1791517860186.woff2 → iconfont.1791542939851.woff2} +0 -0
- /package/es/{iconfont.1791517860186.ttf → iconfont.1791542939851.ttf} +0 -0
- /package/es/{iconfont.1791517860186.woff → iconfont.1791542939851.woff} +0 -0
- /package/es/{iconfont.1791517860186.woff2 → iconfont.1791542939851.woff2} +0 -0
- /package/lib/icon/style/{iconfont.1791517860186.ttf → iconfont.1791542939851.ttf} +0 -0
- /package/lib/icon/style/{iconfont.1791517860186.woff → iconfont.1791542939851.woff} +0 -0
- /package/lib/icon/style/{iconfont.1791517860186.woff2 → iconfont.1791542939851.woff2} +0 -0
- /package/lib/{iconfont.1791517860186.ttf → iconfont.1791542939851.ttf} +0 -0
- /package/lib/{iconfont.1791517860186.woff → iconfont.1791542939851.woff} +0 -0
- /package/lib/{iconfont.1791517860186.woff2 → iconfont.1791542939851.woff2} +0 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_comp=require("../../ui/src/comp"),_xeUtils=_interopRequireDefault(require("xe-utils")),_ui=require("../../ui"),_dom=require("../../ui/src/dom"),_utils=require("../../ui/src/utils"),_vn=require("../../ui/src/vn"),_input=_interopRequireDefault(require("../../input/src/input"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function createReactData(){return{initialized:!1,selectIcon:"",panelIndex:0,panelStyle:{},panelPlacement:null,visiblePanel:!1,isAniVisible:!1,isActivated:!1,searchValue:"",iconList:[]}}function createInternalData(){return{fullList:[]}}var _default=exports.default=(0,_comp.defineVxeComponent)({name:"VxeIconPicker",props:{modelValue:String,placeholder:String,clearable:Boolean,size:{type:String,default:()=>(0,_ui.getConfig)().iconPicker.size||(0,_ui.getConfig)().size},className:[String,Function],popupClassName:[String,Function],width:[Number,String],showIconTitle:{type:Boolean,default:()=>(0,_ui.getConfig)().iconPicker.showIconTitle},readonly:{type:Boolean,default:null},disabled:{type:Boolean,default:null},filterable:{type:Boolean,default:()=>(0,_ui.getConfig)().iconPicker.filterable},filterConfig:Object,icons:Array,placement:String,popupConfig:Object,transfer:{type:Boolean,default:null}},emits:["update:modelValue","change","clear","click"],setup(g,e){let t=e.emit,l=(0,_vue.inject)("$xeModal",null),n=(0,_vue.inject)("$xeDrawer",null),a=(0,_vue.inject)("$xeTable",null),u=(0,_vue.inject)("$xeForm",null),r=(0,_vue.inject)("xeFormItemInfo",null);var i=_xeUtils.default.uniqueId();let m=(0,_ui.useSize)(g).computeSize,h=(0,_vue.reactive)(createReactData()),c=createInternalData(),x=(0,_vue.ref)(),b=(0,_vue.ref)(),E=(0,_vue.ref)(),k=(0,_vue.ref)(),o={refElem:x},P={xID:i,props:g,context:e,reactData:h,getRefMaps:()=>o};let I=(0,_vue.computed)(()=>{var e=g.readonly;return null===e?!!u&&u.props.readonly:e}),C=(0,_vue.computed)(()=>{var e=g.disabled;return null===e?!!u&&u.props.disabled:e}),y=(0,_vue.computed)(()=>{var e=g.transfer,i=S.value;if(_xeUtils.default.isBoolean(i.transfer))return i.transfer;if(null===e){i=(0,_ui.getConfig)().iconPicker.transfer;if(_xeUtils.default.isBoolean(i))return i;if(a||l||n||u)return!0}return e}),T=(0,_vue.computed)(()=>{var e=g.placeholder;return(e=e||(0,_ui.getConfig)().select.placeholder)?(0,_utils.getFuncText)(e):(0,_ui.getI18n)("vxe.base.pleaseSelect")}),A=(0,_vue.computed)(()=>{var e=g.width,i={};return e&&(i.width=(0,_dom.toCssUnit)(e)),i}),V=(0,_vue.computed)(()=>{var{chunkSize:e,height:i,chunkWidth:l,maxHeight:t}=S.value,l={"--vxe-ui-icon-picker-item-width":l?(0,_dom.toCssUnit)(l):100/(e||4)+"%"};return i&&(l["--vxe-ui-icon-picker-panel-height"]=(0,_dom.toCssUnit)(i)),t&&(l["--vxe-ui-icon-picker-panel-max-height"]=(0,_dom.toCssUnit)(t)),l}),s=(0,_vue.computed)(()=>{let e=g.icons;return(e=e&&e.length?e:(0,_ui.getConfig)().iconPicker.icons||[]).map(e=>_xeUtils.default.isString(e)?{title:e,icon:"vxe-icon-"+(""+(e||"")).replace(/^vxe-icon-/,"")}:{title:""+(e.title||""),icon:e.icon||"",iconRender:e.iconRender})}),v=(0,_vue.computed)(()=>Object.assign({},(0,_ui.getConfig)().iconPicker.filterConfig,g.filterConfig)),S=(0,_vue.computed)(()=>Object.assign({},(0,_ui.getConfig)().iconPicker.popupConfig,g.popupConfig)),N=(0,_vue.computed)(()=>{let i=h.selectIcon;var e=s.value;return i?e.find(e=>e.icon===i):null}),U=()=>{h.panelIndex<(0,_utils.getLastZIndex)()&&(h.panelIndex=(0,_utils.nextZIndex)())},d=()=>{let l=g.placement,t=h.panelIndex,n=x.value,a=E.value,u=y.value,r=S.value,c=r.width;var e=()=>{var e=(0,_dom.updatePanelPlacement)(n,a,{placement:r.placement||l,defaultPlacement:r.defaultPlacement,teleportTo:u}),i=Object.assign(e.style,{zIndex:t,minWidth:void 0});c&&Object.assign(i,{width:(0,_dom.toCssUnit)(c)}),h.panelStyle=i,h.panelPlacement=e.placement};return e(),(0,_vue.nextTick)().then(e)},_=()=>{var e=c.hpTimeout;C.value||(e&&(clearTimeout(e),c.hpTimeout=void 0),h.initialized||(h.initialized=!0),h.isActivated=!0,h.isAniVisible=!0,setTimeout(()=>{h.visiblePanel=!0,B(),d()},10),U(),d())},p=()=>{h.visiblePanel=!1,c.hpTimeout=setTimeout(()=>{h.isAniVisible=!1},350)},B=()=>{g.filterable&&(0,_vue.nextTick)(()=>{var e=k.value;e&&e.focus()})},f=()=>{let l=g.modelValue;var e=h.searchValue;let t=v.value.filterMethod;var n=s.value;let a=n;if(e){let i=(""+e).toLowerCase();a=n.filter(e=>t?t({option:e,value:l,searchValue:i,$iconPicker:P}):e.title&&-1<(""+e.title).toLowerCase().indexOf(i)||e.icon&&-1<(""+e.icon).indexOf(i))}h.iconList=a},O=(e,i)=>{(h.selectIcon=i)!==g.modelValue&&(t("update:modelValue",i),w("change",{value:i},e),u)&&r&&u.triggerItemEvent(e,r.itemConfig.field,i)},D=()=>{C.value||h.visiblePanel||_()},K=()=>{h.isActivated=!1},L=(e,i)=>{O(e,i),w("clear",{value:i},e)},z=(e,i)=>{L(i,null),p()},j=e=>{e.preventDefault(),(h.visiblePanel?p:_)()},q=e=>{j(e),w("click",{},e)},$=e=>{var i,l,t=h.visiblePanel;C.value||(i=x.value,l=E.value,h.isActivated=(0,_dom.getEventTargetNode)(e,i).flag||(0,_dom.getEventTargetNode)(e,l).flag,t&&!h.isActivated&&p())},F=e=>{var i,l,t,n,a,u,r,c=g.clearable,o=h.visiblePanel;C.value||(i=_ui.globalEvents.hasKey(e,_ui.GLOBAL_EVENT_KEYS.TAB),l=_ui.globalEvents.hasKey(e,_ui.GLOBAL_EVENT_KEYS.ENTER),t=_ui.globalEvents.hasKey(e,_ui.GLOBAL_EVENT_KEYS.ESCAPE),n=_ui.globalEvents.hasKey(e,_ui.GLOBAL_EVENT_KEYS.ARROW_UP),a=_ui.globalEvents.hasKey(e,_ui.GLOBAL_EVENT_KEYS.ARROW_DOWN),u=_ui.globalEvents.hasKey(e,_ui.GLOBAL_EVENT_KEYS.DELETE),r=_ui.globalEvents.hasKey(e,_ui.GLOBAL_EVENT_KEYS.SPACEBAR),i&&(h.isActivated=!1),o?t||i?p():l?(e.preventDefault(),e.stopPropagation()):(n||a||r)&&e.preventDefault():(n||a||l||r)&&h.isActivated&&(e.preventDefault(),_()),h.isActivated&&u&&c&&L(e,null))},G=()=>{var{visiblePanel:e,isActivated:i}=h;e&&p(),i&&(h.isActivated=!1),(e||i)&&(e=b.value)&&e.blur()},Y=()=>{var e=h.visiblePanel;e&&d()},M=()=>{var e=h.visiblePanel;e&&d()},w=(e,i,l)=>{t(e,(0,_ui.createEvent)(l,{$iconPicker:P},i))},W=(i={dispatchEvent:w,isPanelVisible(){return h.visiblePanel},togglePanel(){return(h.visiblePanel?p:_)(),(0,_vue.nextTick)()},hidePanel(){return h.visiblePanel&&p(),(0,_vue.nextTick)()},showPanel(){return h.visiblePanel||_(),(0,_vue.nextTick)()},focus(){var e=b.value;return h.isActivated=!0,e&&e.blur(),(0,_vue.nextTick)()},blur(){var e=b.value;return e&&e.blur(),(h.isActivated=!1,_vue.nextTick)()}},(e,i)=>{i=i.icon;O(e,i),p()}),H=e=>{h.searchValue=e},Z=()=>{h.isActivated=!0};let R=_xeUtils.default.debounce(()=>{f()},350,{trailing:!0});Object.assign(P,i);return h.selectIcon=""+(g.modelValue||""),f(),(0,_vue.watch)(()=>g.modelValue,e=>{h.selectIcon=""+(e||"")}),(0,_vue.watch)(s,()=>{f()}),(0,_vue.onMounted)(()=>{_ui.globalEvents.on(P,"mousedown",$),_ui.globalEvents.on(P,"keydown",F),_ui.globalEvents.on(P,"blur",G),_ui.globalEvents.on(P,"resize",Y),_ui.globalEvents.on(P,"scroll",M)}),(0,_vue.onBeforeUnmount)(()=>{_ui.globalEvents.off(P,"mousewheel"),_ui.globalEvents.off(P,"mousedown"),_ui.globalEvents.off(P,"keydown"),_ui.globalEvents.off(P,"blur"),_ui.globalEvents.off(P,"resize"),_ui.globalEvents.off(P,"scroll"),_xeUtils.default.assign(h,createReactData()),_xeUtils.default.assign(c,createInternalData())}),(0,_vue.provide)("$xeIconPicker",P),P.renderVN=()=>{var e,i,l,t,n,{className:a,clearable:u,filterable:r}=g,{initialized:c,isActivated:o,isAniVisible:s,visiblePanel:v,selectIcon:d}=h,_=m.value,p=C.value,f=y.value;return I.value?(0,_vue.h)("div",{ref:x,class:["vxe-ico-picker--readonly",a]},[(0,_vue.h)("i",{class:d})]):(e=A.value,i=T.value,l=V.value,t=(n=S.value).appendTo,n=n.className||g.popupClassName,(0,_vue.h)("div",{ref:x,class:["vxe-ico-picker",a?_xeUtils.default.isFunction(a)?a({$iconPicker:P}):a:"",{["size--"+_]:_,"show--clear":u&&!p&&!!d,"is--visible":v,"is--disabled":p,"is--active":o}],style:e},[(0,_vue.h)("div",{class:"vxe-ico-picker--inner",onClick:q},[(0,_vue.h)("input",{ref:b,class:"vxe-ico-picker--input",onFocus:D,onBlur:K}),d?(()=>{var e=h.selectIcon,i=N.value;if(i){var l=i.iconRender,t=l?_ui.renderer.get(l.name):null,t=t?t.renderIconPickerOptionIcon:null;if(t&&l)return(0,_vue.h)("div",{key:"inc",class:"vxe-ico-picker--icon"},(0,_vn.getSlotVNs)(t(l,{$iconPicker:P,option:i})))}return(0,_vue.h)("div",{key:"ind",class:"vxe-ico-picker--icon"},[(0,_vue.h)("i",{class:e})])})():(0,_vue.h)("div",{class:"vxe-ico-picker--placeholder"},i),(0,_vue.h)("div",{class:"vxe-ico-picker--suffix"},[(0,_vue.h)("div",{class:"vxe-ico-picker--clear-icon",onClick:z},[(0,_vue.h)("i",{class:(0,_ui.getIcon)().INPUT_CLEAR})]),(0,_vue.h)("div",{class:"vxe-ico-picker--suffix-icon"},[(0,_vue.h)("i",{class:v?(0,_ui.getIcon)().ICON_PICKER_OPEN:(0,_ui.getIcon)().ICON_PICKER_CLOSE})])])]),(0,_vue.h)(_vue.Teleport,{to:(0,_dom.getPopupContainer)(t),disabled:!f||!c},[(0,_vue.h)("div",{ref:E,class:["vxe-table--ignore-clear vxe-ico-picker--panel",n?_xeUtils.default.isFunction(n)?n({$iconPicker:P}):n:"",{["size--"+_]:_,"is--transfer":f,"ani--leave":s,"ani--enter":v}],placement:h.panelPlacement,style:h.panelStyle},[c&&(v||s)?(0,_vue.h)("div",{class:"vxe-ico-picker--panel-wrapper",style:l},[r?(0,_vue.h)("div",{class:"vxe-ico-picker--panel-search"},[(0,_vue.h)(_input.default,{ref:k,class:"vxe-ico-picker-search--input",modelValue:h.searchValue,type:"text",clearable:!0,disabled:!1,readonly:!1,placeholder:(0,_ui.getI18n)("vxe.iconPicker.search"),prefixIcon:(0,_ui.getIcon)().INPUT_SEARCH,"onUpdate:modelValue":H,onFocus:Z,onChange:R,onSearch:R})]):(0,_ui.renderEmptyElement)(P),(()=>{let t=g.showIconTitle,{selectIcon:n,iconList:e}=h;return e.length?(0,_vue.h)("div",{class:"vxe-ico-picker--list-wrapper"},[(0,_vue.h)("div",{class:"vxe-ico-picker--list"},e.map(i=>{var e=i.iconRender,l=e?_ui.renderer.get(e.name):null,l=l?l.renderIconPickerOptionIcon:null;return(0,_vue.h)("div",{class:["vxe-ico-picker--item",{"is--selected":n===i.icon}]},[(0,_vue.h)("div",{class:"vxe-ico-picker--item-inner",onClick(e){C.value||W(e,i)}},[(0,_vue.h)("div",{class:"vxe-ico-picker--item-icon"},l&&e?(0,_vn.getSlotVNs)(l(e,{$iconPicker:P,option:i})):[(0,_vue.h)("i",{class:i.icon||""})]),t?(0,_vue.h)("div",{class:"vxe-ico-picker--item-title"},""+(i.title||"")):(0,_ui.renderEmptyElement)(P)])])}))]):(0,_vue.h)("div",{class:"vxe-ico-picker--empty-placeholder"},(0,_ui.getI18n)("vxe.iconPicker.emptyText"))})()]):(0,_ui.renderEmptyElement)(P)])])]))},P},render(){return this.renderVN()}});
|
|
1
|
+
Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_comp=require("../../ui/src/comp"),_xeUtils=_interopRequireDefault(require("xe-utils")),_ui=require("../../ui"),_dom=require("../../ui/src/dom"),_utils=require("../../ui/src/utils"),_vn=require("../../ui/src/vn"),_input=_interopRequireDefault(require("../../input"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function createReactData(){return{initialized:!1,selectIcon:"",panelIndex:0,panelStyle:{},panelPlacement:null,visiblePanel:!1,isAniVisible:!1,isActivated:!1,searchValue:"",iconList:[]}}function createInternalData(){return{fullList:[]}}var _default=exports.default=(0,_comp.defineVxeComponent)({name:"VxeIconPicker",props:{modelValue:String,placeholder:String,clearable:Boolean,size:{type:String,default:()=>(0,_ui.getConfig)().iconPicker.size||(0,_ui.getConfig)().size},className:[String,Function],popupClassName:[String,Function],width:[Number,String],showIconTitle:{type:Boolean,default:()=>(0,_ui.getConfig)().iconPicker.showIconTitle},readonly:{type:Boolean,default:null},disabled:{type:Boolean,default:null},filterable:{type:Boolean,default:()=>(0,_ui.getConfig)().iconPicker.filterable},filterConfig:Object,icons:Array,placement:String,popupConfig:Object,transfer:{type:Boolean,default:null}},emits:["update:modelValue","change","clear","click"],setup(g,e){let t=e.emit,l=(0,_vue.inject)("$xeModal",null),n=(0,_vue.inject)("$xeDrawer",null),a=(0,_vue.inject)("$xeTable",null),u=(0,_vue.inject)("$xeForm",null),r=(0,_vue.inject)("xeFormItemInfo",null);var i=_xeUtils.default.uniqueId();let m=(0,_ui.useSize)(g).computeSize,h=(0,_vue.reactive)(createReactData()),c=createInternalData(),x=(0,_vue.ref)(),b=(0,_vue.ref)(),E=(0,_vue.ref)(),k=(0,_vue.ref)(),o={refElem:x},P={xID:i,props:g,context:e,reactData:h,getRefMaps:()=>o};let I=(0,_vue.computed)(()=>{var e=g.readonly;return null===e?!!u&&u.props.readonly:e}),C=(0,_vue.computed)(()=>{var e=g.disabled;return null===e?!!u&&u.props.disabled:e}),y=(0,_vue.computed)(()=>{var e=g.transfer,i=S.value;if(_xeUtils.default.isBoolean(i.transfer))return i.transfer;if(null===e){i=(0,_ui.getConfig)().iconPicker.transfer;if(_xeUtils.default.isBoolean(i))return i;if(a||l||n||u)return!0}return e}),T=(0,_vue.computed)(()=>{var e=g.placeholder;return(e=e||(0,_ui.getConfig)().select.placeholder)?(0,_utils.getFuncText)(e):(0,_ui.getI18n)("vxe.base.pleaseSelect")}),A=(0,_vue.computed)(()=>{var e=g.width,i={};return e&&(i.width=(0,_dom.toCssUnit)(e)),i}),V=(0,_vue.computed)(()=>{var{chunkSize:e,height:i,chunkWidth:l,maxHeight:t}=S.value,l={"--vxe-ui-icon-picker-item-width":l?(0,_dom.toCssUnit)(l):100/(e||4)+"%"};return i&&(l["--vxe-ui-icon-picker-panel-height"]=(0,_dom.toCssUnit)(i)),t&&(l["--vxe-ui-icon-picker-panel-max-height"]=(0,_dom.toCssUnit)(t)),l}),s=(0,_vue.computed)(()=>{let e=g.icons;return(e=e&&e.length?e:(0,_ui.getConfig)().iconPicker.icons||[]).map(e=>_xeUtils.default.isString(e)?{title:e,icon:"vxe-icon-"+(""+(e||"")).replace(/^vxe-icon-/,"")}:{title:""+(e.title||""),icon:e.icon||"",iconRender:e.iconRender})}),v=(0,_vue.computed)(()=>Object.assign({},(0,_ui.getConfig)().iconPicker.filterConfig,g.filterConfig)),S=(0,_vue.computed)(()=>Object.assign({},(0,_ui.getConfig)().iconPicker.popupConfig,g.popupConfig)),N=(0,_vue.computed)(()=>{let i=h.selectIcon;var e=s.value;return i?e.find(e=>e.icon===i):null}),U=()=>{h.panelIndex<(0,_utils.getLastZIndex)()&&(h.panelIndex=(0,_utils.nextZIndex)())},d=()=>{let l=g.placement,t=h.panelIndex,n=x.value,a=E.value,u=y.value,r=S.value,c=r.width;var e=()=>{var e=(0,_dom.updatePanelPlacement)(n,a,{placement:r.placement||l,defaultPlacement:r.defaultPlacement,teleportTo:u}),i=Object.assign(e.style,{zIndex:t,minWidth:void 0});c&&Object.assign(i,{width:(0,_dom.toCssUnit)(c)}),h.panelStyle=i,h.panelPlacement=e.placement};return e(),(0,_vue.nextTick)().then(e)},_=()=>{var e=c.hpTimeout;C.value||(e&&(clearTimeout(e),c.hpTimeout=void 0),h.initialized||(h.initialized=!0),h.isActivated=!0,h.isAniVisible=!0,setTimeout(()=>{h.visiblePanel=!0,B(),d()},10),U(),d())},p=()=>{h.visiblePanel=!1,c.hpTimeout=setTimeout(()=>{h.isAniVisible=!1},350)},B=()=>{g.filterable&&(0,_vue.nextTick)(()=>{var e=k.value;e&&e.focus()})},f=()=>{let l=g.modelValue;var e=h.searchValue;let t=v.value.filterMethod;var n=s.value;let a=n;if(e){let i=(""+e).toLowerCase();a=n.filter(e=>t?t({option:e,value:l,searchValue:i,$iconPicker:P}):e.title&&-1<(""+e.title).toLowerCase().indexOf(i)||e.icon&&-1<(""+e.icon).indexOf(i))}h.iconList=a},O=(e,i)=>{(h.selectIcon=i)!==g.modelValue&&(t("update:modelValue",i),w("change",{value:i},e),u)&&r&&u.triggerItemEvent(e,r.itemConfig.field,i)},D=()=>{C.value||h.visiblePanel||_()},K=()=>{h.isActivated=!1},L=(e,i)=>{O(e,i),w("clear",{value:i},e)},z=(e,i)=>{L(i,null),p()},j=e=>{e.preventDefault(),(h.visiblePanel?p:_)()},q=e=>{j(e),w("click",{},e)},$=e=>{var i,l,t=h.visiblePanel;C.value||(i=x.value,l=E.value,h.isActivated=(0,_dom.getEventTargetNode)(e,i).flag||(0,_dom.getEventTargetNode)(e,l).flag,t&&!h.isActivated&&p())},F=e=>{var i,l,t,n,a,u,r,c=g.clearable,o=h.visiblePanel;C.value||(i=_ui.globalEvents.hasKey(e,_ui.GLOBAL_EVENT_KEYS.TAB),l=_ui.globalEvents.hasKey(e,_ui.GLOBAL_EVENT_KEYS.ENTER),t=_ui.globalEvents.hasKey(e,_ui.GLOBAL_EVENT_KEYS.ESCAPE),n=_ui.globalEvents.hasKey(e,_ui.GLOBAL_EVENT_KEYS.ARROW_UP),a=_ui.globalEvents.hasKey(e,_ui.GLOBAL_EVENT_KEYS.ARROW_DOWN),u=_ui.globalEvents.hasKey(e,_ui.GLOBAL_EVENT_KEYS.DELETE),r=_ui.globalEvents.hasKey(e,_ui.GLOBAL_EVENT_KEYS.SPACEBAR),i&&(h.isActivated=!1),o?t||i?p():l?(e.preventDefault(),e.stopPropagation()):(n||a||r)&&e.preventDefault():(n||a||l||r)&&h.isActivated&&(e.preventDefault(),_()),h.isActivated&&u&&c&&L(e,null))},G=()=>{var{visiblePanel:e,isActivated:i}=h;e&&p(),i&&(h.isActivated=!1),(e||i)&&(e=b.value)&&e.blur()},Y=()=>{var e=h.visiblePanel;e&&d()},M=()=>{var e=h.visiblePanel;e&&d()},w=(e,i,l)=>{t(e,(0,_ui.createEvent)(l,{$iconPicker:P},i))},W=(i={dispatchEvent:w,isPanelVisible(){return h.visiblePanel},togglePanel(){return(h.visiblePanel?p:_)(),(0,_vue.nextTick)()},hidePanel(){return h.visiblePanel&&p(),(0,_vue.nextTick)()},showPanel(){return h.visiblePanel||_(),(0,_vue.nextTick)()},focus(){var e=b.value;return h.isActivated=!0,e&&e.blur(),(0,_vue.nextTick)()},blur(){var e=b.value;return e&&e.blur(),(h.isActivated=!1,_vue.nextTick)()}},(e,i)=>{i=i.icon;O(e,i),p()}),H=e=>{h.searchValue=e},Z=()=>{h.isActivated=!0};let R=_xeUtils.default.debounce(()=>{f()},350,{trailing:!0});Object.assign(P,i);return h.selectIcon=""+(g.modelValue||""),f(),(0,_vue.watch)(()=>g.modelValue,e=>{h.selectIcon=""+(e||"")}),(0,_vue.watch)(s,()=>{f()}),(0,_vue.onMounted)(()=>{_ui.globalEvents.on(P,"mousedown",$),_ui.globalEvents.on(P,"keydown",F),_ui.globalEvents.on(P,"blur",G),_ui.globalEvents.on(P,"resize",Y),_ui.globalEvents.on(P,"scroll",M)}),(0,_vue.onBeforeUnmount)(()=>{_ui.globalEvents.off(P,"mousewheel"),_ui.globalEvents.off(P,"mousedown"),_ui.globalEvents.off(P,"keydown"),_ui.globalEvents.off(P,"blur"),_ui.globalEvents.off(P,"resize"),_ui.globalEvents.off(P,"scroll"),_xeUtils.default.assign(h,createReactData()),_xeUtils.default.assign(c,createInternalData())}),(0,_vue.provide)("$xeIconPicker",P),P.renderVN=()=>{var e,i,l,t,n,{className:a,clearable:u,filterable:r}=g,{initialized:c,isActivated:o,isAniVisible:s,visiblePanel:v,selectIcon:d}=h,_=m.value,p=C.value,f=y.value;return I.value?(0,_vue.h)("div",{ref:x,class:["vxe-ico-picker--readonly",a]},[(0,_vue.h)("i",{class:d})]):(e=A.value,i=T.value,l=V.value,t=(n=S.value).appendTo,n=n.className||g.popupClassName,(0,_vue.h)("div",{ref:x,class:["vxe-ico-picker",a?_xeUtils.default.isFunction(a)?a({$iconPicker:P}):a:"",{["size--"+_]:_,"show--clear":u&&!p&&!!d,"is--visible":v,"is--disabled":p,"is--active":o}],style:e},[(0,_vue.h)("div",{class:"vxe-ico-picker--inner",onClick:q},[(0,_vue.h)("input",{ref:b,class:"vxe-ico-picker--input",onFocus:D,onBlur:K}),d?(()=>{var e=h.selectIcon,i=N.value;if(i){var l=i.iconRender,t=l?_ui.renderer.get(l.name):null,t=t?t.renderIconPickerOptionIcon:null;if(t&&l)return(0,_vue.h)("div",{key:"inc",class:"vxe-ico-picker--icon"},(0,_vn.getSlotVNs)(t(l,{$iconPicker:P,option:i})))}return(0,_vue.h)("div",{key:"ind",class:"vxe-ico-picker--icon"},[(0,_vue.h)("i",{class:e})])})():(0,_vue.h)("div",{class:"vxe-ico-picker--placeholder"},i),(0,_vue.h)("div",{class:"vxe-ico-picker--suffix"},[(0,_vue.h)("div",{class:"vxe-ico-picker--clear-icon",onClick:z},[(0,_vue.h)("i",{class:(0,_ui.getIcon)().INPUT_CLEAR})]),(0,_vue.h)("div",{class:"vxe-ico-picker--suffix-icon"},[(0,_vue.h)("i",{class:v?(0,_ui.getIcon)().ICON_PICKER_OPEN:(0,_ui.getIcon)().ICON_PICKER_CLOSE})])])]),(0,_vue.h)(_vue.Teleport,{to:(0,_dom.getPopupContainer)(t),disabled:!f||!c},[(0,_vue.h)("div",{ref:E,class:["vxe-table--ignore-clear vxe-ico-picker--panel",n?_xeUtils.default.isFunction(n)?n({$iconPicker:P}):n:"",{["size--"+_]:_,"is--transfer":f,"ani--leave":s,"ani--enter":v}],placement:h.panelPlacement,style:h.panelStyle},[c&&(v||s)?(0,_vue.h)("div",{class:"vxe-ico-picker--panel-wrapper",style:l},[r?(0,_vue.h)("div",{class:"vxe-ico-picker--panel-search"},[(0,_vue.h)(_input.default,{ref:k,class:"vxe-ico-picker-search--input",modelValue:h.searchValue,type:"text",clearable:!0,disabled:!1,readonly:!1,placeholder:(0,_ui.getI18n)("vxe.iconPicker.search"),prefixIcon:(0,_ui.getIcon)().INPUT_SEARCH,"onUpdate:modelValue":H,onFocus:Z,onChange:R,onSearch:R})]):(0,_ui.renderEmptyElement)(P),(()=>{let t=g.showIconTitle,{selectIcon:n,iconList:e}=h;return e.length?(0,_vue.h)("div",{class:"vxe-ico-picker--list-wrapper"},[(0,_vue.h)("div",{class:"vxe-ico-picker--list"},e.map(i=>{var e=i.iconRender,l=e?_ui.renderer.get(e.name):null,l=l?l.renderIconPickerOptionIcon:null;return(0,_vue.h)("div",{class:["vxe-ico-picker--item",{"is--selected":n===i.icon}]},[(0,_vue.h)("div",{class:"vxe-ico-picker--item-inner",onClick(e){C.value||W(e,i)}},[(0,_vue.h)("div",{class:"vxe-ico-picker--item-icon"},l&&e?(0,_vn.getSlotVNs)(l(e,{$iconPicker:P,option:i})):[(0,_vue.h)("i",{class:i.icon||""})]),t?(0,_vue.h)("div",{class:"vxe-ico-picker--item-title"},""+(i.title||"")):(0,_ui.renderEmptyElement)(P)])])}))]):(0,_vue.h)("div",{class:"vxe-ico-picker--empty-placeholder"},(0,_ui.getI18n)("vxe.iconPicker.emptyText"))})()]):(0,_ui.renderEmptyElement)(P)])])]))},P},render(){return this.renderVN()}});
|