@farris/ui-vue
Version:
Farris Vue, a Farris Design based Vue3 component library.
2 lines (1 loc) • 20.2 kB
JavaScript
(function(V,d){typeof exports=="object"&&typeof module<"u"?d(exports,require("vue"),require("lodash-es")):typeof define=="function"&&define.amd?define(["exports","vue","lodash-es"],d):(V=typeof globalThis<"u"?globalThis:V||self,d(V.video={},V.Vue,V.LodashES))})(this,function(V,d,L){"use strict";var ue=Object.defineProperty;var fe=(V,d,L)=>d in V?ue(V,d,{enumerable:!0,configurable:!0,writable:!0,value:L}):V[d]=L;var D=(V,d,L)=>fe(V,typeof d!="symbol"?d+"":d,L);const j={},F={};function N(o){const{properties:e,title:t,ignore:n}=o,r=n&&Array.isArray(n),i=Object.keys(e).reduce((a,h)=>((!r||!n.find(y=>y===h))&&(a[h]=e[h].type==="object"&&e[h].properties?N(e[h]):L.cloneDeep(e[h].default)),a),{});if(t&&(!r||!n.find(a=>a==="id"))){const a=t.toLowerCase().replace(/-/g,"_");i.id=`${a}_${Math.random().toString().slice(2,6)}`}return i}function _(o){const{properties:e,title:t,required:n}=o;if(n&&Array.isArray(n)){const r=n.reduce((i,a)=>(i[a]=e[a].type==="object"&&e[a].properties?N(e[a]):L.cloneDeep(e[a].default),i),{});if(t&&n.find(i=>i==="id")){const i=t.toLowerCase().replace(/-/g,"_");r.id=`${i}_${Math.random().toString().slice(2,6)}`}return r}return{type:t}}function S(o,e={},t){const n=j[o];if(n){let r=_(n);const i=F[o];return r=i?i({getSchemaByType:S},r,e,t):r,r}return null}function W(o,e){const t=N(e);return Object.keys(t).reduce((n,r)=>(Object.prototype.hasOwnProperty.call(o,r)&&(n[r]&&L.isPlainObject(n[r])&&L.isPlainObject(o[r]||!o[r])?Object.assign(n[r],o[r]||{}):n[r]=o[r]),n),t),t}function q(o,e){return Object.keys(o).filter(n=>o[n]!=null).reduce((n,r)=>{if(e.has(r)){const i=e.get(r);if(typeof i=="string")n[i]=o[r];else{const a=i(r,o[r],o);Object.assign(n,a)}}else n[r]=o[r];return n},{})}function z(o,e,t=new Map){const n=W(o,e);return q(n,t)}function Y(o={}){function e(c,p,u,m){if(typeof u=="number")return m[c].length===u;if(typeof u=="object"){const g=Object.keys(u)[0],b=u[g];if(g==="not")return Number(m[c].length)!==Number(b);if(g==="moreThan")return Number(m[c].length)>=Number(b);if(g==="lessThan")return Number(m[c].length)<=Number(b)}return!1}function t(c,p,u,m){return m[c]&&m[c].propertyValue&&String(m[c].propertyValue.value)===String(u)}const n=new Map([["length",e],["getProperty",t]]);Object.keys(o).reduce((c,p)=>(c.set(p,o[p]),c),n);function r(c,p){const u=c;return typeof p=="number"?[{target:u,operator:"length",param:null,value:Number(p)}]:typeof p=="boolean"?[{target:u,operator:"getProperty",param:c,value:!!p}]:typeof p=="object"?Object.keys(p).map(m=>{if(m==="length")return{target:u,operator:"length",param:null,value:p[m]};const g=m,b=p[m];return{target:u,operator:"getProperty",param:g,value:b}}):[]}function i(c){return Object.keys(c).reduce((u,m)=>{const g=r(m,c[m]);return u.push(...g),u},[])}function a(c,p){if(n.has(c.operator)){const u=n.get(c.operator);return u&&u(c.target,c.param,c.value,p)||!1}return!1}function h(c,p){return i(c).reduce((g,b)=>g&&a(b,p),!0)}function y(c,p){const u=Object.keys(c),m=u.includes("allOf"),g=u.includes("anyOf"),b=m||g,l=(b?c[b?m?"allOf":"anyOf":"allOf"]:[c]).map(E=>h(E,p));return m?!l.includes(!1):l.includes(!0)}return{parseValueSchema:y}}const G={button:{type:"button",name:"按钮"},"response-toolbar":{type:"response-toolbar",name:"工具栏"},"response-toolbar-item":{type:"response-toolbar-item",name:"按钮"},"content-container":{type:"content-container",name:"容器"},"input-group":{type:"input-group",name:"文本"},textarea:{type:"textarea",name:"多行文本"},lookup:{type:"lookup",name:"帮助"},"number-spinner":{type:"number-spinner",name:"数值"},"date-picker":{type:"date-picker",name:"日期"},switch:{type:"switch",name:"开关"},"radio-group":{type:"radio-group",name:"单选组"},"check-box":{type:"check-box",name:"复选框"},"check-group":{type:"check-group",name:"复选框组"},"combo-list":{type:"combo-list",name:"下拉列表"},"response-form":{type:"response-form",name:"卡片面板"},"response-layout":{type:"response-layout",name:"布局容器",icon:"response-layout-3"},"response-layout-item":{type:"response-layout-item",name:"布局",icon:"response-layout-1"},"tree-grid":{type:"tree-grid",name:"树表格"},"tree-grid-column":{type:"tree-grid-column",name:"树表格列"},"data-grid":{type:"data-grid",name:"表格"},"data-grid-column":{type:"data-grid-column",name:"表格列"},module:{type:"Module",name:"模块"},component:{type:"component",name:"组件"},tabs:{type:"tabs",name:"标签页"},"tab-page":{type:"tab-page",name:"标签页项",dependentParentControl:"Tab"},"tab-toolbar-item":{type:"tab-toolbar-item",name:"标签页工具栏按钮"},"time-picker":{type:"time-picker",name:"时间选择"},section:{type:"section",name:"分组面板"},"section-toolbar":{type:"section-toolbar",name:"分组面板工具栏"},"section-toolbar-item":{type:"section-toolbar-item",name:"分组面板按钮"},splitter:{type:"splitter",name:"分栏面板"},"splitter-pane":{type:"splitter-pane",name:"分栏面板项",dependentParentControl:"Splitter"},"component-ref":{type:"component-ref",name:"组件引用节点"},uploader:{type:"uploader",name:"附件上传"},"page-header":{type:"page-header",name:"页头"},"page-footer":{type:"page-footer",name:"页脚"},"tab-toolbar":{type:"tab-toolbar",name:"标签页工具栏"},fieldset:{type:"fieldset",name:"分组"},"query-solution":{type:"query-solution",name:"筛选方案"},drawer:{type:"drawer",name:"抽屉"}},J={},Q={};Y();function X(o,e,t=new Map,n=(a,h,y,c)=>h,r={},i=a=>a){return j[e.title]=e,F[e.title]=n,J[e.title]=r,Q[e.title]=i,(a={},h=!0)=>{if(!h)return q(a,t);const y=z(a,e,t),c=Object.keys(o).reduce((p,u)=>(p[u]=o[u].default,p),{});return Object.assign(c,y)}}function Z(o,e){return{customClass:e.class,customStyle:e.style}}const R={$schema:"https://json-schema.org/draft/2020-12/schema",$id:"https://farris-design.gitee.io/video.schema.json",title:"video",description:"A Farris Video Component",type:"object",properties:{id:{description:"The unique identifier for a Video",type:"string"},type:{description:"The type string of Video component",type:"string",default:"video"},appearance:{description:"",type:"object",properties:{class:{type:"string"},style:{type:"string"}},default:{}},visible:{description:"",type:"boolean",default:!0}},required:["id","type"]},K=new Map([["appearance",Z]]);function I(o,e,t){return e}const H={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={src:{type:String,required:!0,default:""},autoplay:{type:Boolean,default:!0},controls:{type:Boolean,default:!0},loop:{type:Boolean,default:!1},muted:{type:Boolean,default:!1},preload:{type:String,default:"none"},poster:{type:String},width:{type:[String,Number],default:300},height:{type:[String,Number],default:168}},$=X(k,R,K,I,H);function x(o,e){function t(s){s.stopPropagation(),e.emit("abort")}function n(s){s.stopPropagation(),e.emit("play")}function r(s){s.stopPropagation(),e.emit("pause")}function i(s){s.stopPropagation(),e.emit("ended")}function a(s){s.stopPropagation(),e.emit("durationchange")}function h(s){s.stopPropagation(),e.emit("error")}function y(s){s.stopPropagation(),e.emit("loadeddata")}function c(s){s.stopPropagation(),e.emit("loadedmetadata")}function p(s){s.stopPropagation(),e.emit("loadstart")}function u(s){s.stopPropagation(),e.emit("playing")}function m(s){s.stopPropagation(),e.emit("progress")}function g(s){s.stopPropagation(),e.emit("timeupdate")}function b(s){s.stopPropagation(),e.emit("volumechange")}function v(s){s.stopPropagation(),e.emit("canplay")}return{onAbort:t,onPlay:n,onPause:r,onEnded:i,onDurationchange:a,onError:h,onLoadeddata:y,onLoadedmetadata:c,onLoadstart:p,onPlaying:u,onProgress:m,onTimeupdate:g,onVolumechange:b,onCanplay:v}}const O=d.defineComponent({name:"FVideo",props:k,emits:["abort","play","pause","ended","durationchange","canplay","error","loadeddata","loadedmetadata","loadstart","playing","progress","timeupdate","volumechange"],setup(o,e){const t=d.ref(),{onAbort:n,onPlay:r,onPause:i,onEnded:a,onDurationchange:h,onError:y,onLoadeddata:c,onLoadedmetadata:p,onLoadstart:u,onPlaying:m,onProgress:g,onTimeupdate:b,onVolumechange:v,onCanplay:s}=x(o,e);return d.onUnmounted(()=>{}),()=>d.createVNode("video",{ref:t,src:o.src,autoplay:o.autoplay,controls:o.controls,loop:o.loop,muted:o.muted,width:o.width,height:o.height,poster:o.poster,onAbort:l=>n(l),onPlay:l=>r(l),onPause:l=>i(l),onEnded:l=>a(l),onDurationchange:l=>h(l),onError:l=>y(l),onLoadeddata:l=>c(l),onLoadedmetadata:l=>p(l),onLoadstart:l=>u(l),onPlaying:l=>m(l),onProgress:l=>g(l),onTimeupdate:l=>b(l),onVolumechange:l=>v(l),onCanplay:l=>s(l)},[d.createTextVNode("Your browser does not support the video tag.")])}});function ee(o,e,t){var U;const n=t&&t.getStyles&&t.getStyles()||"",r=t&&t.getDesignerClass&&t.getDesignerClass()||"",i=d.ref();function a(){return(e==null?void 0:e.schema.componentType)==="frame"?!1:t&&t.checkCanMoveComponent?t.checkCanMoveComponent():!0}function h(){return!1}function y(){return(e==null?void 0:e.schema.componentType)==="frame"?!1:t&&t.checkCanDeleteComponent?t.checkCanDeleteComponent():!0}function c(){return(e==null?void 0:e.schema.componentType)==="frame"?!0:t&&t.hideNestedPaddingInDesginerView?t.hideNestedPaddingInDesginerView():!1}function p(f){if(!f||!f.value)return null;if(f.value.schema&&f.value.schema.type==="component")return f.value;const P=d.ref(f==null?void 0:f.value.parent),w=p(P);return w||null}function u(f=e){var T;if(t!=null&&t.getDraggableDesignItemElement)return t.getDraggableDesignItemElement(f);const{componentInstance:P,designerItemElementRef:w}=f;if(!P||!P.value)return null;const{getCustomButtons:M}=P.value;return P.value.canMove||M&&((T=M())!=null&&T.length)?w:u(f.parent)}function m(f){return!!t&&t.canAccepts(f)}function g(){return(e==null?void 0:e.schema.label)||(e==null?void 0:e.schema.title)||(e==null?void 0:e.schema.name)}function b(){}function v(f,P){var w;!f||!P||(t!=null&&t.onAcceptMovedChildElement&&t.onAcceptMovedChildElement(f,P),(w=e==null?void 0:e.setupContext)==null||w.emit("dragEnd"))}function s(f,P){const{componentType:w}=f;let M=S(w,f,P);t&&t.onResolveNewComponentSchema&&(M=t.onResolveNewComponentSchema(f,M));const T=w.toLowerCase().replace(/-/g,"_");return M&&!M.id&&M.type===w&&(M.id=`${T}_${Math.random().toString().slice(2,6)}`),M}function l(f){f&&t!=null&&t.onChildElementMovedOut&&t.onChildElementMovedOut(f)}function C(...f){if(t&&t.getPropsConfig)return t.getPropsConfig(...f)}function E(){t&&t.onRemoveComponent&&t.onRemoveComponent(),e!=null&&e.schema.contents&&e.schema.contents.map(f=>{let P=f.id;f.type==="component-ref"&&(P=f.component);const w=o.value.querySelectorAll(`#${P}-design-item`);w!=null&&w.length&&Array.from(w).map(M=>{var T;(T=M==null?void 0:M.componentInstance)!=null&&T.value.onRemoveComponent&&M.componentInstance.value.onRemoveComponent()})})}function B(){if(t&&t.getCustomButtons)return t.getCustomButtons()}function A(f){if(t&&t.onPropertyChanged)return t.onPropertyChanged(f)}return i.value={canMove:a(),canSelectParent:h(),canDelete:y(),canNested:!c(),contents:e==null?void 0:e.schema.contents,elementRef:o,parent:(U=e==null?void 0:e.parent)==null?void 0:U.componentInstance,schema:e==null?void 0:e.schema,styles:n,designerClass:r,canAccepts:m,getBelongedComponentInstance:p,getDraggableDesignItemElement:u,getDraggingDisplayText:g,getPropConfig:C,getDragScopeElement:b,onAcceptMovedChildElement:v,onChildElementMovedOut:l,addNewChildComponentSchema:s,triggerBelongedComponentToMoveWhenMoved:!!t&&t.triggerBelongedComponentToMoveWhenMoved||d.ref(!1),triggerBelongedComponentToDeleteWhenDeleted:!!t&&t.triggerBelongedComponentToDeleteWhenDeleted||d.ref(!1),onRemoveComponent:E,getCustomButtons:B,onPropertyChanged:A},i}class te{getTemplateRule(e,t){const n=t==null?void 0:t.formSchemaUtils,r=n==null?void 0:n.getFormTemplateRule(),i={canAccept:!0,canDelete:!0,canMove:!0};if(!r)return i;const a=this.getComponentContext(e),{componentClassList:h}=a;return h.forEach(y=>{if(!y||!r[y])return;const{canMove:c,canDelete:p,canAccept:u}=r[y];i.canMove=i.canMove&&this.resolveRuleValue(c,a),i.canDelete=i.canDelete&&this.resolveRuleValue(p,a),i.canAccept=i.canAccept&&this.resolveRuleValue(u,a)}),i}resolveRuleValue(e,t){return typeof e=="boolean"?e:this.parseRuleValueSchema(e,t)}parseRuleValueSchema(e,t){const n=e.invalidContext||[];let r=!0;for(const i of n){if(i.firstLevelChild){if(i.firstLevelChild.class){const{firstLevelChildClassList:a}=t;if(a&&!a.includes(i.firstLevelChild.class)){r=!1;continue}}if(i.firstLevelChild.type){const{firstLevelChildSchema:a}=t;if(!a||a.type!==i.firstLevelChild.type){r=!1;continue}}}if(i.secondLevelChild){if(i.secondLevelChild.class){const{secondLevelChildClassList:a}=t;if(a&&!a.includes(i.secondLevelChild.class)){r=!1;continue}}if(i.secondLevelChild.type){const{secondLevelChildSchema:a}=t;if(!a||a.type!==i.secondLevelChild.type){r=!1;continue}}}if(i.parent){if(i.parent.class){const{parentClassList:a}=t;if(a&&!a.includes(i.parent.class)){r=!1;continue}}if(i.parent.type){const{parentSchema:a}=t;if(a&&a.type!==i.parent.type){r=!1;continue}}}r=!0;break}return!r}getComponentContext(e){var v,s,l,C;const t=e.schema,n=t.appearance&&t.appearance.class||"",r=n.split(" ")||[],i=t.contents||[],a=i.length?i[0]:null,h=a&&a.appearance?a.appearance.class:"",y=h?h.split(" "):[],c=(v=a==null?void 0:a.contents)!=null&&v.length?a==null?void 0:a.contents[0]:null,p=c&&c.appearance?c.appearance.class:"",u=p?p.split(" "):[],m=t.type==="component"?(l=(s=e.parent)==null?void 0:s.parent)==null?void 0:l.schema:(C=e.parent)==null?void 0:C.schema,g=m&&m.appearance&&m.appearance.class||"",b=g?g.split(" "):[];return{componentClass:n,componentClassList:r,childContents:i,firstLevelChildSchema:a,firstLevelChildClass:h,firstLevelChildClassList:y,secondLevelChildSchema:c,secondLevelChildClass:p,secondLevelChildClassList:u,parentSchema:m,parentClass:g,parentClassList:b}}}const oe=d.ref(0);function ne(){oe.value++}const ae=d.ref(0);class re{constructor(e,t){D(this,"componentId");D(this,"viewModelId");D(this,"eventsEditorUtils");D(this,"formSchemaUtils");D(this,"formMetadataConverter");D(this,"designViewModelUtils");D(this,"designViewModelField");D(this,"controlCreatorUtils");D(this,"designerHostService");D(this,"schemaService",null);D(this,"metadataService",null);D(this,"propertyConfig",{type:"object",categories:{}});var n;this.componentId=e,this.designerHostService=t,this.eventsEditorUtils=t.eventsEditorUtils,this.formSchemaUtils=t.formSchemaUtils,this.formMetadataConverter=t.formMetadataConverter,this.viewModelId=((n=this.formSchemaUtils)==null?void 0:n.getViewModelIdByComponentId(e))||"",this.designViewModelUtils=t.designViewModelUtils,this.controlCreatorUtils=t.controlCreatorUtils,this.metadataService=t.metadataService,this.schemaService=t.schemaService}getTableInfo(){var e;return(e=this.schemaService)==null?void 0:e.getTableInfoByViewModelId(this.viewModelId)}setDesignViewModelField(e){var n;const t=e.binding&&e.binding.type==="Form"&&e.binding.field;if(t){if(!this.designViewModelField){const r=this.designViewModelUtils.getDgViewModel(this.viewModelId);this.designViewModelField=r.fields.find(i=>i.id===t)}e.updateOn=(n=this.designViewModelField)==null?void 0:n.updateOn}}getBasicPropConfig(e){return{description:"Basic Information",title:"基本信息",properties:{id:{description:"组件标识",title:"标识",type:"string",readonly:!0},type:{description:"组件类型",title:"控件类型",type:"select",editor:{type:"combo-list",textField:"name",valueField:"value",editable:!1,data:[{value:e.type,name:G[e.type].name}]}}}}}getAppearanceConfig(e=null){return{title:"外观",description:"Appearance",properties:{class:{title:"class样式",type:"string",description:"组件的CSS样式",$converter:"/converter/appearance.converter"},style:{title:"style样式",type:"string",description:"组件的样式",$converter:"/converter/appearance.converter"}},setPropertyRelates(t,n){if(t)switch(t&&t.propertyID){case"class":case"style":{ae.value++;break}}}}}updateElementByParentContainer(e,t){const n=t&&t.parent&&t.parent.schema;if(!n)return;const r=n.contents.findIndex(a=>a.id===e),i=L.cloneDeep(n.contents[r]);n.contents.splice(r,1),n.contents.splice(r,0,i),ne()}}class ie extends re{constructor(e,t){super(e,t)}getPropertyConfig(e){return this.propertyConfig.categories.basic=this.getBasicPropConfig(e),this.propertyConfig.categories.appearance=this.getAppearanceConfig(e),this.getEventPropConfig(e),this.propertyConfig}getEventPropConfig(e){const t=[{label:"onInit",name:"初始化事件"},{label:"onAfterViewInit",name:"视图初始化后事件"}],n=this,r=n.eventsEditorUtils.formProperties(e,n.viewModelId,t),i={};i[n.viewModelId]={type:"events-editor",editor:{initialData:r}},this.propertyConfig.categories.eventsEditor={title:"事件",hideTitle:!0,properties:i,refreshPanelAfterChanged:!0,tabId:"commands",tabName:"交互",setPropertyRelates(a,h){const y=a.propertyValue;delete e[n.viewModelId],y&&(y.setPropertyRelates=this.setPropertyRelates,n.eventsEditorUtils.saveRelatedParameters(e,n.viewModelId,y.events,y))}}}}function ce(o,e){const t=new te,{canMove:n,canDelete:r}=t.getTemplateRule(o,e);function i(){return!1}function a(){return r}function h(){return n}function y(){return!1}function c(){return" display: inherit;flex-direction: inherit;margin-bottom:10px"}function p(v){const s=new ie(v,e),{schema:l}=o;return s.getPropertyConfig(l)}function u(){var E,B,A,U;const v=o==null?void 0:o.schema,l=(e==null?void 0:e.formSchemaUtils).getViewModelIdByComponentId(v.id);if(v.componentType!=="data-grid"&&v.componentType!=="form"||!((E=o.componentInstance)!=null&&E.value.parent))return;const C=(B=o.componentInstance)==null?void 0:B.value.parent.schema;if((A=C==null?void 0:C.toolbar)!=null&&A.buttons&&C.toolbar.buttons.length){C.toolbar.buttons.forEach(P=>{const w=P.onClick,M=w&&w.split(".");if(!M||M.length<3)return;M[M.length-2]===l&&(P.needRemove=!0)}),C.toolbar.buttons=C.toolbar.buttons.filter(P=>!P.needRemove);const f=(U=o.componentInstance)==null?void 0:U.value.parent;f.parent&&f.parent.updateToolbarItems&&f.parent.updateToolbarItems()}}function m(){const v=e==null?void 0:e.designViewModelUtils,s=e==null?void 0:e.formSchemaUtils,l=o==null?void 0:o.schema;if(v&&s){const C=s.getViewModelIdByComponentId(l.id);v.deleteViewModelById(C),s.deleteComponent(l.id)}}function g(){const v=e==null?void 0:e.designViewModelUtils,s=e==null?void 0:e.formSchemaUtils,l=o==null?void 0:o.schema,C=s.getViewModelIdByComponentId(l.id);v.getDgViewModel(C).fields.forEach(E=>{if(s.getExpressions()&&s.getExpressions().length){const B=s.getExpressions().findIndex(A=>A.fieldId===E.id);B>-1&&s.getExpressions().splice(B,1)}})}function b(){u(),g(),m()}return{canAccepts:i,checkCanDeleteComponent:a,checkCanMoveComponent:h,hideNestedPaddingInDesginerView:y,getStyles:c,getPropsConfig:p,onRemoveComponent:b}}function se(o,e){const t=d.ref(o.width),n=d.ref(o.height);let r;d.watch(e,a=>{a&&(t.value=a.clientWidth,r=new ResizeObserver(h=>{if(!h||h.length<1)return;const c=h[0].contentRect;c&&(t.value=c.width)}),r.observe(a))});function i(){r&&r.disconnect()}return{destory:i,width:t,height:n}}const le=d.defineComponent({name:"FVideoDesign",props:k,setup(o,e){const t=d.ref(),n=d.inject("design-item-context"),r=d.inject("designer-host-service"),i=ce(n,r),a=ee(t,n,i),{width:h,height:y,destory:c}=se(o,t);return d.onMounted(()=>{t.value.componentInstance=a}),d.onUnmounted(()=>{c()}),e.expose(a.value),()=>d.createVNode("div",{ref:t,class:"drag-container","data-dragref":`${n.schema.id}-container`},[d.createVNode("video",{src:o.src,autoplay:o.autoplay,controls:o.controls,loop:o.loop,muted:o.muted,width:h.value,height:y.value},[d.createTextVNode("Your browser does not support the video tag.")])])}}),pe={install(o){o.component(O.name,O)},register(o,e,t,n){o.video=O,e.video=$},registerDesigner(o,e,t){o.video=le,e.video=$}};V.FVideo=O,V.default=pe,V.propsResolver=$,V.videoProps=k,Object.defineProperties(V,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});