@jecloud/ui/es/icon/src/icon-panel.js

JECloud UI库，基于ant-design-vue封装

import{isVNode as e,createVNode as t,createTextVNode as n,Fragment as o}from"vue";import{defineComponent as a,ref as l,reactive as r,watch as u,nextTick as i}from"vue";import{Row as c,Col as s}from"ant-design-vue";import{loadIcons as p,icons as f}from"./util";import{copy as d,debounce as m}from"@jecloud/utils";import v from"../../data";import g from"../../input";import y from"../../panel";import b from"../../modal";import x,{usePager as h}from"../../pager";import z from"../../button";import j from"../../toolbar";import S from"../../tabs";function k(t){return"function"==typeof t||"[object Object]"===Object.prototype.toString.call(t)&&!e(t)}export default a({name:"JeIconPanel",components:{Row:c,Col:s,Input:g,Pager:x,Button:z},props:{copy:{type:Boolean,default:!0},help:{type:Boolean,default:!0},size:{type:String,default:""}},emits:["select"],setup:function(e,a){var x=a.emit,w=a.slots,C=a.expose,I=l(f[0].code),N=l(""),P="small"===e.size?4:3,B=24/P,T=l(),V=25*B,q=v.Store.useGridStore({pageSize:V,autoLoad:!0,rootProperty:"data",proxy:function(e){var t=e.pageSize,n=e.page;return T.value.$el.parentNode.scrollTop=0,Promise.resolve(p({page:n,limit:t,type:I.value,keyword:N.value}))}}),F=r({size:"small",pageSizes:[10,15,20,25,30,35,40].map((function(e){return e*B})),align:"center",layouts:["Sizes","JumpNumber","Total"]}),J=h({props:{store:q},config:F,context:a}).pagerSlot;C({reset:function(){i((function(){N.value="",I.value=f[0].code,q.load()}))}});var K=function(e){var t=f.find((function(e){return I.value===e.code}));return t.cls+" "+t.prefix+"-"+e},O=function(t){var n=t.target.getAttribute("class");x("select",n),e.copy&&(d(n),b.message("复制成功！","success"))},U=m((function(){q.load(1)}),300);u((function(){return[I.value,N.value]}),(function(){U()}),{immediate:!0});var A=function(){b.alert({title:"使用帮助",okButton:!0,icon:"fal fa-question-circle",width:"600",height:"300",content:function(){return t(o,null,[t("p",null,[" ",n("1. 系统统一使用"),t("span",{style:"color:red;"},[n("“细体图标”")]),n("，有特殊说明，可以使用其他")," "]),t("p",null,[n("2. 图标统一使用"),t("span",{class:"red",textContent:"<i>"},null),n("标签，编写规范："),t("span",{style:"color:red;",textContent:'<i class="fal fa-abacus"></i>'},null)]),t("p",null,[" ",n("3. 点击图标，可以直接复制图标样式，复制内容："),t("span",{style:"color:red;"},[n("fal fa-abacus")])," "])])}})};return function(){var o,a,l;return t(y,{class:["je-icon-panel",e.size?"size--"+e.size:""]},{default:function(){return[t(y.Item,{region:"tbar"},k(o=t(j,{align:"center",class:"je-icon-panel-header"},{default:function(){var o;return[t(S,{activeKey:I.value,"onUpdate:activeKey":function(e){return I.value=e},class:"je-icon-panel-menu"},k(r=f.map((function(e){return t(S.TabPane,{key:e.code,tab:e.text},null)})))?r:{default:function(){return[r]}}),t(g,{placeholder:"搜索图标名称",style:"width: 200px",value:N.value,"onUpdate:value":function(e){return N.value=e},"allow-clear":!0},{prefix:function(){return t("i",{class:"fal fa-search"},null)}}),e.help?t(z,{type:"link",onClick:A},{default:function(){return[n("使用帮助")]},icon:function(){return t("i",{class:"fal fa-question-circle"},null)}}):null,t(j.Fill,null,null),t("span",{class:"je-icon-panel-actions"},[null===(o=w.action)||void 0===o?void 0:o.call(w)])]}}))?o:{default:function(){return[o]}}),t(y.Item,{region:"bbar"},k(a=J())?a:{default:function(){return[a]}}),t(y.Item,null,{default:function(){return[t(c,{style:"padding: 20px 0;height:auto;",wrap:!0,ref:T},k(l=q.data.map((function(n){return t(s,{key:n,span:P,class:"je-icon-panel-icons"},{default:function(){return[t("i",{class:[K(n)],title:e.copy?"点击复制字体样式":"",onClick:O},null),t("div",{class:"name",title:"small"===e.size?n:""},[n]),t("div",{class:"cls"},[K(n)])]}})})))?l:{default:function(){return[l]}})]}})];var r}})}}});