@farris/ui-vue
Version:
Farris Vue, a Farris Design based Vue3 component library.
2 lines (1 loc) • 17.4 kB
JavaScript
(function(u,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("../dynamic-resolver/index.umd.js"),require("bignumber.js"),require("lodash-es"),require("../locale/index.umd.js"),require("../designer-canvas/index.umd.js")):typeof define=="function"&&define.amd?define(["exports","vue","../dynamic-resolver/index.umd.js","bignumber.js","lodash-es","../locale/index.umd.js","../designer-canvas/index.umd.js"],e):(u=typeof globalThis<"u"?globalThis:u||self,e(u["verify-detail"]={},u.Vue,u.dynamicResolver,u.BigNumber,u.LodashES,u.locale,u.designerCanvas))})(this,function(u,e,x,ae,le,P,D){"use strict";var ie=Object.defineProperty;var se=(u,e,x)=>e in u?ie(u,e,{enumerable:!0,configurable:!0,writable:!0,value:x}):u[e]=x;var j=(u,e,x)=>se(u,typeof e!="symbol"?e+"":e,x);const _=new Map([["appearance",x.resolveAppearance]]);function K(o,t,i){return t}const U={$schema:"https://json-schema.org/draft/2020-12/schema",$id:"https://farris-design.gitee.io/verify-detail.schema.json",title:"verify-detail",description:"A Farris Component",type:"object",properties:{id:{description:"The unique identifier for verify-detail",type:"string"},type:{description:"The type string of verify-detail",type:"string",default:"verify-detail"},appearance:{description:"",type:"object",properties:{class:{type:"string"},style:{type:"string"}},default:{}},binding:{description:"",type:"object",default:{}},disable:{type:"string",default:!1},editable:{description:"",type:"boolean",default:!0},placeholder:{description:"",type:"string",default:""},readonly:{description:"",type:"boolean",default:!1},require:{description:"",type:"boolean",default:!1},tabindex:{description:"",type:"number",default:-1},visible:{description:"",type:"boolean",default:!0}},required:["id","type"]},W={title:"verify-detail",description:"A Farris Component",type:"object",categories:{basic:{description:"Basic Infomation",title:"基本信息",properties:{id:{description:"组件标识",title:"标识",type:"string",readonly:!0},type:{description:"组件类型",title:"控件类型",type:"select",editor:{type:"waiting for modification",enum:[]}}}}}},k={showType:{type:String,default:""},showList:{type:Boolean,default:!1},verifyList:{type:Array,default:[]},verifyType:{type:Array,default:[]},customClass:{type:String,default:""},maxHeight:{type:Number,default:200},onValidatorClick:{type:Function}},R=x.createPropsResolver(k,U,_,K,W),I=e.defineComponent({name:"FVerifyDetail",props:k,emits:["validatorClick","listshow"],setup(o,t){let i=[];const l=e.ref(o.showList);e.watch(()=>o.showList,()=>{l.value=o.showList});const s=e.ref(o.verifyType);e.watch(()=>o.verifyType,()=>{s.value=o.verifyType});function c(){l.value=!l.value,t.emit("listshow",l.value)}function r(n){var d;!n&&s.value&&s.value.length>0&&(n=s.value[0].type),(d=s.value)==null||d.forEach(h=>{h.active=h.type===n})}function f(n){n=n||i[0].type,i.forEach(d=>{d.show=d.type===n})}function g(n){n.length<=0||(r(n.type),f(n.type))}function y(){l.value=!1,t.emit("listshow",!1)}function p(n){var d;(d=o.onValidatorClick)==null||d.call(o,n)}function b(n){return e.createVNode("li",{class:"f-verify-list",onClick:()=>p(n)},[e.createVNode("span",{class:["f-icon f-icon-close-outline list-icon list-error",{"list-warning":n.type==="warn"}]},null),e.createVNode("div",{class:"list-con"},[e.createVNode("div",{class:"list-title",title:n.title},[n.title]),e.createVNode("div",{class:"list-msg",title:n.msg},[n.msg])])])}function V(){return i.map(n=>e.createVNode("ul",{class:["f-verify-list-content",{active:n.show}]},[n.list&&n.list.map(d=>b(d))]))}const v=e.computed(()=>{var n;return((n=o.verifyList)==null?void 0:n.length)>0});function S(n){return{btn:!0,"verify-title-btn":!0,"f-state-selected":n.active,disabled:n.length<=0}}const L=e.computed(()=>{var n;return(n=s.value)==null?void 0:n.map(d=>e.createVNode("button",{class:S(d),onClick:()=>g(d)},[d.title,e.createVNode("span",null,[d.length])]))}),N=e.computed(()=>{var n;return e.createVNode("div",{class:"f-verify-nums",onClick:c},[e.createVNode("span",{class:"nums-icon f-icon f-icon-warning"},null),e.createVNode("span",{class:"nums-count"},[(n=o.verifyList)==null?void 0:n.length])])});function C(){var d;const n=[];s.value&&((d=s.value)!=null&&d.length)&&(s.value.map(h=>{const w={list:h.type==="all"?o.verifyList:[],show:!1,type:h.type};n.push(w)}),n.map((h,w)=>{const $=o.verifyList.filter(A=>A.type===h.type);n[w].list=w!==0?$:n[w].list}),s.value.map((h,w)=>{h.length=n[w].list.length})),i=n}return e.onBeforeMount(()=>{C(),f(o.showType),r(o.showType)}),()=>e.createVNode("div",{class:v.value?`f-verify-detail ${o.customClass}`:""},[v.value?e.createVNode("div",{class:"f-verify-detail-content"},[N.value,e.createVNode("div",{class:"f-verify-form-main",hidden:!l.value},[e.createVNode("div",{class:"f-verify-form-content"},[e.createVNode("div",{class:"f-verify-form-content-arrow"},null),e.createVNode("div",{class:"f-verify-form-content-list"},[e.createVNode("div",{class:"f-verify-forms-title"},[e.createVNode("div",{class:"btn-group"},[L.value]),e.createVNode("div",{class:"f-verify-close",onClick:y},[e.createVNode("span",{class:"f-icon f-icon-close"},null)])]),e.createVNode("div",{class:"f-verify-forms-list",style:{maxHeight:o.maxHeight+"px"}},[V()])])])])]):null])}}),Y=["moz","ms","webkit"];function z(){let o=0;return t=>{const i=new Date().getTime(),l=Math.max(0,16-(i-o)),s=setTimeout(()=>{t(i+l)},l);return o=i+l,s}}function G(){if(typeof window>"u")return()=>0;if(window.requestAnimationFrame)return window.requestAnimationFrame.bind(window);const o=Y.filter(t=>`${t}RequestAnimationFrame`in window)[0];return o?window[`${o}RequestAnimationFrame`]:z()}G(),e.ref("");function E(){const o=navigator.userAgent||navigator.vendor||window.opera,t=[/iPhone/i,/iPod/i,/Android.*Mobile/i,/webOS/i,/BlackBerry/i,/IEMobile/i,/Opera Mini/i,/Harmony/i],i=[/iPad/i,/Android(?!.*Mobile)/i,/Tablet/i,/PlayBook/i,/Kindle/i,/Silk/i];for(const f of i)if(f.test(o))return!1;for(const f of t)if(f.test(o))return!0;const l="ontouchstart"in window||navigator.maxTouchPoints>0,s=screen.width,c=screen.height,r=Math.min(s,c);return!!(l&&r<=768)}const J={showCloseButton:{type:Boolean,default:!0},position:{type:String,default:"top-center"},timeout:{type:Number,default:3e3},theme:{type:String,default:"bootstrap"},left:{type:Number},right:{type:Number},top:{type:Number},bottom:{type:Number},id:{type:String},animate:{type:String,default:"fadeIn"},options:{type:Object},safeHtml:{type:Boolean,default:!0}},Q={showCloseButton:{type:Boolean,default:!0},animate:{type:String,default:"fadeIn"},options:{type:Object}},F=e.defineComponent({name:"Toast",props:Q,emits:["close","click"],setup:(o,t)=>{const i=e.ref(o.animate),l="fadeOut",s=e.computed(()=>o.options),c=e.ref(!1),r=e.computed(()=>s.value.title&&s.value.message),f=e.computed(()=>!s.value.title&&s.value.message),g=e.computed(()=>{const n={animated:c.value,toast:!0,"toast--only-content":!r.value};return n[o.animate]=!1,n[l]=c.value,n["toasty-type-"+s.value.type]=!0,s.value.theme&&(n[s.value.theme]=!0),n}),y=e.computed(()=>{const h=`f-icon-${s.value&&s.value.type?s.value.type.replace("toasty-type-",""):"default"}`,w={"f-icon":!0};return w[h]=!0,w}),p=e.computed(()=>s.value.title||s.value.message),b=e.computed(()=>o.showCloseButton),V=e.computed(()=>!!s.value.buttons||!!t.slots.default),v=e.computed(()=>P.LocaleService.getLocale()==="en"?{wordBreak:"keep-all",overflowWrap:"break-word"}:{});function S(n){n.stopPropagation(),n.preventDefault(),c.value=!1,setTimeout(()=>{t.emit("close",s.value)},200)}function L(n,d){}function N(n){return`f-preten-link ${n.customClass?n.customClass:""}`}e.watch(i,()=>{i.value});const C=()=>{var n;return e.createVNode(e.Fragment,null,[e.createVNode("div",{class:"after-toast-msg text-right"},[!t.slots.default&&((n=s.value.buttons)==null?void 0:n.map(d=>e.createVNode("span",{class:N(d),onClick:h=>void 0},[d.text]))),t.slots.default&&t.slots.default()])])};return()=>e.createVNode("div",{class:g.value,style:"min-height:44px"},[b.value&&e.createVNode("button",{title:P.LocaleService.getLocaleValue("messageBox.close"),class:"toast-close f-btn-icon f-bare",onClick:S},[e.createVNode("span",{class:"f-icon modal_close"},null)]),p.value&&e.createVNode("section",{class:"modal-tips"},[!r.value&&e.createVNode("div",{class:"float-left modal-tips-iconwrap"},[e.createVNode("span",{class:y.value},null)]),e.createVNode("div",{class:"modal-tips-content"},[r.value&&e.createVNode(e.Fragment,null,[e.createVNode("h5",{class:"toast-title modal-tips-title",innerHTML:s.value.title},null),e.createVNode("p",{class:"toast-msg",innerHTML:s.value.message,style:v.value},null),V.value&&C()]),f.value&&(s.value.buttons?e.createVNode("div",{class:"toast-title-btns-wrapper d-flex"},[e.createVNode("h5",{class:"toast-title modal-tips-title only-toast-msg",style:v.value,innerHTML:s.value.message},null),e.createVNode("div",{class:"after-toast-title text-right ml-auto"},[C()])]):e.createVNode("h5",{class:"toast-title modal-tips-title only-toast-msg",style:v.value,innerHTML:s.value.message},null))])])])}}),H=e.defineComponent({name:"Notify",props:J,emits:["close","empty"],setup(o,t){var L;const i=E(),s=`farris-notify-${(L=o.options)!=null&&L.type?o.options.type:"info"}}`,c=e.computed(()=>({"farris-notify":!0,[s]:i})),r={left:12,right:12,top:20,bottom:12},f=e.ref(),g=e.ref(o.options),y=e.ref(o.showCloseButton),p=e.computed(()=>o.position||"bottom-right"),b=e.computed(()=>o.timeout!=null?o.timeout:3e3),V=e.computed(()=>{const N=o.bottom?o.bottom:r.bottom,C=o.top?o.top:r.top,n={transition:"all 0.2s ease",left:p.value.indexOf("left")>-1?`${o.left?o.left:r.left}px`:"",right:p.value.indexOf("right")>-1?`${o.right?o.right:r.right}px`:"",top:p.value.indexOf("top")>-1?`${C}px`:"",bottom:p.value.indexOf("bottom")>-1?`${N}px`:""};return p.value.indexOf("center")>-1&&(n.left="50%",n.marginLeft="calc(-24rem / 2)",p.value==="center-center"&&(n.top="50%",n.transform="translate(-50%, -50%)")),n});function v(N){t.emit("close")}b.value&&setTimeout(()=>{v()},b.value),t.expose({closeToast:v,container:f,notifyPosition:p});function S(N,C){v()}return()=>{var N;return i?e.createVNode("div",{class:c.value,ref:f},[(N=o.options)==null?void 0:N.message]):e.createVNode("div",{class:c.value,style:V.value,ref:f},[e.createVNode(F,{options:g.value,showCloseButton:y.value,animate:o.animate,onClose:C=>S(C,g.value)},null)])}}});class q{constructor(){j(this,"notifyRefs",[]);j(this,"globalConfig",e.reactive({}))}escapeAllHtml(t){if(typeof t!="string"||!t)return"";const i=document.createElement("div");return i.textContent=t||"",i.innerHTML.replace(/\\n/g,"<br>").replace(/\\t/g," ").replace(/\\r/g,"")}createNotifyInstance(t){const i=this,s=Object.assign({timeout:3e3,position:"bottom-right",showCloseButton:!0,safeHtml:!0},this.globalConfig,{...t}),c=document.createElement("div");c.style.display="contents";const r=e.createApp({setup(){var y;const f=e.ref();function g(){f.value.container.style.transform="scale(0)",setTimeout(()=>{i.updateNotifyPositionForClose(s,f),r.unmount()},220)}if(s.position.indexOf("top")>-1){const p=i.getNotifyInstances(s.position),b=p[p.length-1];if(b){const V=b.value.container.getBoundingClientRect();s.top=V.bottom}}return s.safeHtml&&((y=s.options)!=null&&y.message)&&(s.options.message=i.escapeAllHtml(s.options.message)),e.onUnmounted(()=>{document.body.removeChild(c)}),e.onMounted(()=>{i.updateNotifyPositionForCreate(s,f)}),()=>e.createVNode(e.Transition,{mode:"out-in",name:"fade",appear:!0},{default:()=>[e.createVNode(H,e.mergeProps({ref:f},s,{onClose:g}),null)]})}});return r.provide("NotifyService",this),document.body.appendChild(c),r.use(P.LocaleService.i18n),r.mount(c),r}getNotifyInstances(t){return this.notifyRefs.filter(i=>i.value.notifyPosition===t)}updateNotifyPositionForCreate(t,i){if(this.notifyRefs&&this.notifyRefs.length){const l=window.innerHeight;t.position.indexOf("bottom")>-1&&this.getNotifyInstances(t.position).forEach(s=>{const c=s.value.container.getBoundingClientRect();s.value.container.style.bottom=c.height+l-c.bottom+"px"})}this.notifyRefs=[...this.notifyRefs,i]}updateNotifyPositionForClose(t,i){const l=this.notifyRefs.indexOf(i);if(t.position.indexOf("top")>-1){const s=this.getNotifyInstances(t.position),c=s.indexOf(i);s.slice(c+1).forEach(r=>{r.value.container.style.top=r.value.container.offsetTop-r.value.container.offsetHeight+"px"})}l>-1&&this.notifyRefs.splice(l,1)}show(t){return this.createNotifyInstance(t)}buildNotifyProps(t,i){let l="",s="",c,r,f;typeof i=="string"?l=i:i&&(l=i.message||"",s=i.title||"",r=i.position||null,f=i.showCloseButton!=null?i.showCloseButton:null,c=i.timeout!=null?i.timeout:null);const y={options:{type:t,message:l,title:s}};return r!=null&&(y.position=r),f!=null&&(y.showCloseButton=f),c!=null&&(y.timeout=c),y}info(t){const i=this.buildNotifyProps("info",t);return this.show(i)}success(t){const i=this.buildNotifyProps("success",t);return this.show(i)}warning(t){const i=this.buildNotifyProps("warning",t);return this.show(i)}error(t){const i=this.buildNotifyProps("error",t);return this.show(i)}close(t){t&&t.unmount()}closeAll(){this.notifyRefs.forEach(t=>{t==null||t.value.closeToast()}),this.notifyRefs.length=0}}const X=Symbol("NOTIFY_SERVICE_TOKEN");H.install=o=>{o.component(H.name,H),o.component(F.name,F);const t=new q;o.provide(X,t),o.provide("FNotifyService",t)};function Z(o,t,i){e.createApp({setup(){return e.onUnmounted(()=>{t&&t()}),()=>e.createVNode(I,o,null)}}).mount(i)}const O=class O{static show(t,i){if(this.isMobile){this.notifyService.error("存在校验未通过项,请检查!");return}this.clear();let l=0;this.verifyContainer=document.createElement("div"),i&&i.offsetHeight>0?(l=i.offsetHeight-120,i.appendChild(this.verifyContainer)):(l=document.documentElement.clientHeight-120,document.body.appendChild(this.verifyContainer)),t.maxHeight=t.maxHeight?t.maxHeight:l,Z(t,this.clear,this.verifyContainer)}static clear(){if(O.isMobile)return;let t=this.verifyContainer;t&&(t.parentNode&&t.parentNode.removeChild(t),t=null)}};j(O,"verifyContainer",null),j(O,"isMobile",E()),j(O,"notifyService",new q);let M=O;const ee=e.defineComponent({name:"FVerifyDetailDesign",props:k,emits:["validatorClick","listshow"],setup(o,t){let i=[];const l=e.ref(o.showList),s=e.ref(o.maxHeight),c=e.ref(o.verifyList),r=e.ref(o.showType),f=e.ref(o.verifyType),g=e.ref(),y=e.inject("design-item-context"),p=D.useDesignerComponent(g,y);e.onMounted(()=>{g.value.componentInstance=p}),t.expose(p.value);function b(){l.value=!l.value,t.emit("listshow",l.value)}function V(a){var m;(m=f.value)==null||m.forEach(T=>{T.active=T.type===a})}function v(a){i.forEach(m=>{m.show=m.type===a})}function S(a){a.length<=0||(V(a.type),v(a.type))}function L(){l.value=!1,t.emit("listshow",!1)}function N(a){t.emit("validatorClick",a)}function C(a){return e.createVNode("li",{class:"f-verify-list",onClick:()=>N(a)},[e.createVNode("span",{class:["f-icon f-icon-close-outline list-icon list-error",{"list-warning":a.type==="warn"}]},null),e.createVNode("div",{class:"list-con"},[e.createVNode("p",{class:"list-title",title:a.title},[a.title]),e.createVNode("p",{class:"list-msg",title:a.msg},[a.msg])])])}function n(){return i.map(a=>e.createVNode("ul",{class:["f-verify-list-content",{active:a.show}]},[a.list&&a.list.map(m=>C(m))]))}const d=e.computed(()=>{var a;return((a=c.value)==null?void 0:a.length)>0});function h(a){return{"btn btn-secondary":!0,active:a.active,disabled:a.length<=0}}const w=e.computed(()=>{var a;return(a=f.value)==null?void 0:a.map(m=>e.createVNode("button",{class:h(m),onClick:()=>S(m)},[m.title,e.createVNode("span",null,[m.length])]))}),$=e.computed(()=>{var a;return e.createVNode("div",{class:"f-verify-nums",onClick:b},[e.createVNode("span",{class:"nums-icon f-icon f-icon-warning"},null),e.createVNode("span",{class:"nums-count"},[(a=c.value)==null?void 0:a.length])])});function A(){var m;const a=[];f.value&&((m=f.value)!=null&&m.length)&&(f.value.map(T=>{const B={list:T.type==="all"?c.value:[],show:!1,type:T.type};a.push(B)}),a.map((T,B)=>{const oe=c.value.filter(ne=>ne.type===T.type);a[B].list=B!==0?oe:a[B].list}),f.value.map((T,B)=>{T.length=a[B].list.length})),i=a}return e.onBeforeMount(()=>{A(),v(r.value),V(r.value)}),()=>e.createVNode("div",{ref:g},[d.value?e.createVNode("div",{class:"f-verify-detail"},[e.createVNode("div",{class:"f-verify-detail-content"},[$.value,e.createVNode("div",{class:"f-verify-form-main",hidden:!l.value},[e.createVNode("div",{class:"f-verify-form-content"},[e.createVNode("div",{class:"f-verify-form-content-arrow"},null),e.createVNode("div",{class:"f-verify-form-content-list"},[e.createVNode("div",{class:"f-verify-forms-title"},[e.createVNode("div",{class:"btn-group"},[w.value]),e.createVNode("div",{class:"f-verify-close",onClick:L},[e.createVNode("span",{class:"f-icon f-icon-close"},null)])]),e.createVNode("div",{class:"f-verify-forms-list",style:{maxHeight:s.value+"px"}},[n()])])])])])]):null])}}),te={install(o){o.component(I.name,I),o.provide("FVerifyDetailService",M)},register(o,t,i,l){o["verify-detail"]=I,t["verify-detail"]=R},registerDesigner(o,t,i){o["verify-detail"]=ee,t["verify-detail"]=R}};u.FVerifyDetail=I,u.FVerifyDetailService=M,u.default=te,u.propsResolver=R,u.verifyDetailProps=k,Object.defineProperties(u,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});