@farris/ui-vue
Version:
Farris Vue, a Farris Design based Vue3 component library.
2 lines (1 loc) • 17.6 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,le,re,P,q){"use strict";var se=Object.defineProperty;var ae=(u,e,x)=>e in u?se(u,e,{enumerable:!0,configurable:!0,writable:!0,value:x}):u[e]=x;var I=(u,e,x)=>ae(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:[]}}}}}},j={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(j,U,_,K,W),M=e.defineComponent({name:"FVerifyDetail",props:j,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 f;!n&&s.value&&s.value.length>0&&(n=s.value[0].type),(f=s.value)==null||f.forEach(g=>{g.active=g.type===n})}function d(n){n=n||i[0].type,i.forEach(f=>{f.show=f.type===n})}function p(n){n.length<=0||(r(n.type),d(n.type))}function h(){l.value=!1,t.emit("listshow",!1)}function m(n){var f;(f=o.onValidatorClick)==null||f.call(o,n)}function b(n){return e.createVNode("li",{class:"f-verify-list",onClick:()=>m(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(f=>b(f))]))}const v=e.computed(()=>{var n;return((n=o.verifyList)==null?void 0:n.length)>0});function L(n){return{btn:!0,"verify-title-btn":!0,"f-state-selected":n.active,disabled:n.length<=0}}const S=e.computed(()=>{var n;return(n=s.value)==null?void 0:n.map(f=>e.createVNode("button",{class:L(f),onClick:()=>p(f)},[f.title,e.createVNode("span",null,[f.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 f;const n=[];s.value&&((f=s.value)!=null&&f.length)&&(s.value.map(g=>{const w={list:g.type==="all"?o.verifyList:[],show:!1,type:g.type};n.push(w)}),n.map((g,w)=>{const E=o.verifyList.filter(A=>A.type===g.type);n[w].list=w!==0?E:n[w].list}),s.value.map((g,w)=>{g.length=n[w].list.length})),i=n}return e.onBeforeMount(()=>{C(),d(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"},[S.value]),e.createVNode("div",{class:"f-verify-close",onClick:h},[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])}}),X=["moz","ms","webkit"];function Y(){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 z(){if(typeof window>"u")return()=>0;if(window.requestAnimationFrame)return window.requestAnimationFrame.bind(window);const o=X.filter(t=>`${t}RequestAnimationFrame`in window)[0];return o?window[`${o}RequestAnimationFrame`]:Y()}z(),e.ref("");function F(){if(typeof window>"u"||typeof navigator>"u")return!1;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 p of i)if(p.test(o))return!1;for(const p of t)if(p.test(o))return!0;if(typeof screen>"u")return!1;const l="ontouchstart"in window||navigator.maxTouchPoints>0,s=screen.width,c=screen.height,r=Math.min(s,c);return!!(l&&r<=768)}function G(){const o=F();return o&&document.body.classList.add("f-mobile"),o}typeof document<"u"&&G();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}},$=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),d=e.computed(()=>!s.value.title&&s.value.message),p=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}),h=e.computed(()=>{const g=`f-icon-${s.value&&s.value.type?s.value.type.replace("toasty-type-",""):"default"}`,w={"f-icon":!0};return w[g]=!0,w}),m=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 L(n){n.stopPropagation(),n.preventDefault(),c.value=!1,setTimeout(()=>{t.emit("close",s.value)},200)}function S(n,f){}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(f=>e.createVNode("span",{class:N(f),onClick:g=>void 0},[f.text]))),t.slots.default&&t.slots.default()])])};return()=>e.createVNode("div",{class:p.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:L},[e.createVNode("span",{class:"f-icon modal_close"},null)]),m.value&&e.createVNode("section",{class:"modal-tips"},[!r.value&&e.createVNode("div",{class:"float-left modal-tips-iconwrap"},[e.createVNode("span",{class:h.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()]),d.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))])])])}}),k=e.defineComponent({name:"Notify",props:J,emits:["close","empty"],setup(o,t){var S;const i=F(),s=`farris-notify-${(S=o.options)!=null&&S.type?o.options.type:"info"}}`,c=e.computed(()=>({"farris-notify":!0,[s]:i})),r={left:12,right:12,top:20,bottom:12},d=e.ref(),p=e.ref(o.options),h=e.ref(o.showCloseButton),m=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:m.value.indexOf("left")>-1?`${o.left?o.left:r.left}px`:"",right:m.value.indexOf("right")>-1?`${o.right?o.right:r.right}px`:"",top:m.value.indexOf("top")>-1?`${C}px`:"",bottom:m.value.indexOf("bottom")>-1?`${N}px`:""};return m.value.indexOf("center")>-1&&(n.left="50%",n.marginLeft="calc(-24rem / 2)",m.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:d,notifyPosition:m});function L(N,C){v()}return()=>{var N;return i?e.createVNode("div",{class:c.value,ref:d},[(N=o.options)==null?void 0:N.message]):e.createVNode("div",{class:c.value,style:V.value,ref:d},[e.createVNode($,{options:p.value,showCloseButton:h.value,animate:o.animate,onClose:C=>L(C,p.value)},null)])}}});class D{constructor(){I(this,"notifyRefs",[]);I(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 h;const d=e.ref();function p(){d.value.container.style.transform="scale(0)",setTimeout(()=>{i.updateNotifyPositionForClose(s,d),r.unmount()},220)}if(s.position.indexOf("top")>-1){const m=i.getNotifyInstances(s.position),b=m[m.length-1];if(b){const V=b.value.container.getBoundingClientRect();s.top=V.bottom}}return s.safeHtml&&((h=s.options)!=null&&h.message)&&(s.options.message=i.escapeAllHtml(s.options.message)),e.onUnmounted(()=>{document.body.removeChild(c)}),e.onMounted(()=>{i.updateNotifyPositionForCreate(s,d)}),()=>e.createVNode(e.Transition,{mode:"out-in",name:"fade",appear:!0},{default:()=>[e.createVNode(k,e.mergeProps({ref:d},s,{onClose:p}),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,d;typeof i=="string"?l=i:i&&(l=i.message||"",s=i.title||"",r=i.position||null,d=i.showCloseButton!=null?i.showCloseButton:null,c=i.timeout!=null?i.timeout:null);const h={options:{type:t,message:l,title:s}};return r!=null&&(h.position=r),d!=null&&(h.showCloseButton=d),c!=null&&(h.timeout=c),h}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 Z=Symbol("NOTIFY_SERVICE_TOKEN");k.install=o=>{o.component(k.name,k),o.component($.name,$);const t=new D;o.provide(Z,t),o.provide("FNotifyService",t)};function ee(o,t,i){e.createApp({setup(){return e.onUnmounted(()=>{t&&t()}),()=>e.createVNode(M,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,ee(t,this.clear,this.verifyContainer)}static clear(){if(O.isMobile)return;let t=this.verifyContainer;t&&(t.parentNode&&t.parentNode.removeChild(t),t=null)}};I(O,"verifyContainer",null),I(O,"isMobile",F()),I(O,"notifyService",new D);let H=O;const te=e.defineComponent({name:"FVerifyDetailDesign",props:j,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),d=e.ref(o.verifyType),p=e.ref(),h=e.inject("design-item-context"),m=q.useDesignerComponent(p,h);e.onMounted(()=>{p.value.componentInstance=m}),t.expose(m.value);function b(){l.value=!l.value,t.emit("listshow",l.value)}function V(a){var y;(y=d.value)==null||y.forEach(T=>{T.active=T.type===a})}function v(a){i.forEach(y=>{y.show=y.type===a})}function L(a){a.length<=0||(V(a.type),v(a.type))}function S(){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(y=>C(y))]))}const f=e.computed(()=>{var a;return((a=c.value)==null?void 0:a.length)>0});function g(a){return{"btn btn-secondary":!0,active:a.active,disabled:a.length<=0}}const w=e.computed(()=>{var a;return(a=d.value)==null?void 0:a.map(y=>e.createVNode("button",{class:g(y),onClick:()=>L(y)},[y.title,e.createVNode("span",null,[y.length])]))}),E=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 y;const a=[];d.value&&((y=d.value)!=null&&y.length)&&(d.value.map(T=>{const B={list:T.type==="all"?c.value:[],show:!1,type:T.type};a.push(B)}),a.map((T,B)=>{const ne=c.value.filter(ie=>ie.type===T.type);a[B].list=B!==0?ne:a[B].list}),d.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:p},[f.value?e.createVNode("div",{class:"f-verify-detail"},[e.createVNode("div",{class:"f-verify-detail-content"},[E.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:S},[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])}}),oe={install(o){o.component(M.name,M),o.provide("FVerifyDetailService",H)},register(o,t,i,l){o["verify-detail"]=M,t["verify-detail"]=R},registerDesigner(o,t,i){o["verify-detail"]=te,t["verify-detail"]=R}};u.FVerifyDetail=M,u.FVerifyDetailService=H,u.default=oe,u.propsResolver=R,u.verifyDetailProps=j,Object.defineProperties(u,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});