@farris/ui-vue/components/capsule/index.umd.cjs

Farris Vue, a Farris Design based Vue3 component library.

(function(j,n){typeof exports=="object"&&typeof module<"u"?n(exports,require("vue"),require("lodash-es"),require("../common/index.umd.js")):typeof define=="function"&&define.amd?define(["exports","vue","lodash-es","../common/index.umd.js"],n):(j=typeof globalThis<"u"?globalThis:j||self,n(j.capsule={},j.Vue,j.LodashES,j.common))})(this,function(j,n,T,z){"use strict";const G={$schema:"https://json-schema.org/draft/2020-12/schema",$id:"https://farris-design.gitee.io/capsule.schema.json",title:"capsule",description:"A Farris Component",type:"object",properties:{id:{description:"The unique identifier for a capsule",type:"string"},type:{description:"The type string of capsule component",type:"string",default:"capsule"},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"]},F={},C={};function E(c){const{properties:e,title:i,ignore:r}=c,l=r&&Array.isArray(r),o=Object.keys(e).reduce((p,v)=>((!l||!r.find(O=>O===v))&&(p[v]=e[v].type==="object"&&e[v].properties?E(e[v]):T.cloneDeep(e[v].default)),p),{});if(i&&(!l||!r.find(p=>p==="id"))){const p=i.toLowerCase().replace(/-/g,"_");o.id=`${p}_${Math.random().toString().slice(2,6)}`}return o}function J(c){const{properties:e,title:i,required:r}=c;if(r&&Array.isArray(r)){const l=r.reduce((o,p)=>(o[p]=e[p].type==="object"&&e[p].properties?E(e[p]):T.cloneDeep(e[p].default),o),{});if(i&&r.find(o=>o==="id")){const o=i.toLowerCase().replace(/-/g,"_");l.id=`${o}_${Math.random().toString().slice(2,6)}`}return l}return{type:i}}function L(c,e={},i){const r=F[c];if(r){let l=J(r);const o=C[c];return l=o?o({getSchemaByType:L},l,e,i):l,l}return null}function Q(c,e){const i=E(e);return Object.keys(i).reduce((r,l)=>(Object.prototype.hasOwnProperty.call(c,l)&&(r[l]&&T.isPlainObject(r[l])&&T.isPlainObject(c[l]||!c[l])?Object.assign(r[l],c[l]||{}):r[l]=c[l]),r),i),i}function _(c,e){return Object.keys(c).filter(r=>c[r]!=null).reduce((r,l)=>{if(e.has(l)){const o=e.get(l);if(typeof o=="string")r[o]=c[l];else{const p=o(l,c[l],c);Object.assign(r,p)}}else r[l]=c[l];return r},{})}function X(c,e,i=new Map){const r=Q(c,e);return _(r,i)}function Y(c={}){function e(u,m,d,y){if(typeof d=="number")return y[u].length===d;if(typeof d=="object"){const h=Object.keys(d)[0],g=d[h];if(h==="not")return Number(y[u].length)!==Number(g);if(h==="moreThan")return Number(y[u].length)>=Number(g);if(h==="lessThan")return Number(y[u].length)<=Number(g)}return!1}function i(u,m,d,y){return y[u]&&y[u].propertyValue&&String(y[u].propertyValue.value)===String(d)}const r=new Map([["length",e],["getProperty",i]]);Object.keys(c).reduce((u,m)=>(u.set(m,c[m]),u),r);function l(u,m){const d=u;return typeof m=="number"?[{target:d,operator:"length",param:null,value:Number(m)}]:typeof m=="boolean"?[{target:d,operator:"getProperty",param:u,value:!!m}]:typeof m=="object"?Object.keys(m).map(y=>{if(y==="length")return{target:d,operator:"length",param:null,value:m[y]};const h=y,g=m[y];return{target:d,operator:"getProperty",param:h,value:g}}):[]}function o(u){return Object.keys(u).reduce((d,y)=>{const h=l(y,u[y]);return d.push(...h),d},[])}function p(u,m){if(r.has(u.operator)){const d=r.get(u.operator);return d&&d(u.target,u.param,u.value,m)||!1}return!1}function v(u,m){return o(u).reduce((h,g)=>h&&p(g,m),!0)}function O(u,m){const d=Object.keys(u),y=d.includes("allOf"),h=d.includes("anyOf"),g=y||h,S=(g?u[g?y?"allOf":"anyOf":"allOf"]:[u]).map(A=>v(A,m));return y?!S.includes(!1):S.includes(!0)}return{parseValueSchema:O}}const Z={},H={};Y();function I(c,e,i=new Map,r=(p,v,O,u)=>v,l={},o=p=>p){return F[e.title]=e,C[e.title]=r,Z[e.title]=l,H[e.title]=o,(p={},v=!0)=>{if(!v)return _(p,i);const O=X(p,e,i),u=Object.keys(c).reduce((m,d)=>(m[d]=c[d].default,m),{});return Object.assign(u,O)}}function K(c,e){return{customClass:e.class,customStyle:e.style}}const x=new Map([["appearance",K]]);function ee(c,e,i){return e}const te={title:"capsule",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={items:{Type:Array,default:[{name:"升序",value:"asc",icon:"f-icon f-icon-col-ascendingorder"},{name:"降序",value:"desc",icon:"f-icon f-icon-col-descendingorder"}]},modelValue:{type:String,default:""},type:{type:String,default:"primary"}},W={name:{type:String,default:""},value:{type:String,default:""},isActive:{type:Boolean,default:!1},icon:{type:String,default:""},index:{type:Number,default:0},show:{type:Boolean,default:!0},disabled:{type:Boolean,default:!1}},q=I(k,G,x,ee,te),U=n.defineComponent({name:"FCapsuleItem",props:W,emits:["mounted","active"],setup(c,e){const i=n.ref(),r=n.ref(c.isActive);n.watch(()=>c.isActive,p=>{r.value=p});const l=n.computed(()=>({"f-capsule-item":!0,"f-capsule-active-item":r.value,"f-capsule-disabled":c.disabled}));n.onMounted(()=>{e.emit("mounted",i,c.value)});function o(p){c.disabled||e.emit("active",p,{name:c.name,value:c.value})}return()=>n.createVNode("div",{ref:i,class:l.value,onClick:p=>o(p)},[c.icon&&n.createVNode("i",{class:c.icon},null),c.name])}}),B=n.defineComponent({name:"FCapsule",props:k,emits:["change","update:modelValue"],setup(c,e){const i=n.ref(c.items),r=n.ref(),l=2,o=n.ref(c.modelValue),p=n.ref("none"),v=n.ref(c.type),O=n.computed(()=>{const a={"f-capsule-container":!0};return v.value&&(a[v.value]=!0),a}),u=n.computed(()=>({})),m=n.computed(()=>({"f-capsule":!0})),d=n.ref(l),y=n.ref(0),h=n.ref(0),g=n.computed(()=>({left:`${d.value}px`,width:`${y.value}px`,transition:p.value})),M=n.computed(()=>({width:`${h.value}px`})),V=new Map;function S(a){var t;if(V.has(a.value)){const s=(t=V.get(a.value))==null?void 0:t.value;if(s){const f=s.getBoundingClientRect(),b=r.value.getBoundingClientRect();d.value=f.left-b.left+l+r.value.scrollLeft,y.value=f.width-2*l}}}function w(a,t){const s=a.value;o.value=s,e.emit("update:modelValue",s),S(a),t&&e.emit("change",s)}function A(a){const t=i.value.findIndex(s=>s.value===a);t>-1&&w(i.value[t],!1)}n.watch(()=>c.modelValue,a=>{o.value=a,A(o.value)}),n.onMounted(async()=>{A(o.value),await n.nextTick(),p.value="0.1s ease-out all",h.value=Array.from(V.values()).reduce((a,t)=>(a+=t.value.clientWidth,a),0)});function $(a,t){w(t,!0)}function R(a,t){V.set(t,a)}function N(a){Array.from(V.keys()).forEach(t=>{a.find(f=>f.value===t)||V.delete(t)})}function P(a,t){return n.createVNode(U,{name:a.name,value:a.value,isActive:a.value===o.value,index:t,disabled:a.disabled,key:a.value,onMounted:R,onActive:$},null)}return n.watch(()=>c.items,async a=>{const t=a.filter(s=>s.show);N(t),i.value=t,await n.nextTick(),A(o.value),h.value=Array.from(V.values()).reduce((s,f)=>(s+=f.value.clientWidth,s),0)}),()=>n.createVNode("span",{ref:r,class:O.value,style:u.value},[n.createVNode("span",{class:"f-capsule-pane"},[i.value.map((a,t)=>P(a,t))]),n.createVNode("small",{class:m.value,style:g.value},null),n.createVNode("div",{class:"f-capsule-board",style:M.value},null)])}});function ne(c,e,i){var P;const r="",l="",o=n.ref();function p(){return(e==null?void 0:e.schema.componentType)!=="frame"}function v(){return!1}function O(){return(e==null?void 0:e.schema.componentType)!=="frame"}function u(){return(e==null?void 0:e.schema.componentType)==="frame"}function m(a){if(!a||!a.value)return null;if(a.value.schema&&a.value.schema.type==="component")return a.value;const t=n.ref(a==null?void 0:a.value.parent),s=m(t);return s||null}function d(a=e){var b;const{componentInstance:t,designerItemElementRef:s}=a;if(!t||!t.value)return null;const{getCustomButtons:f}=t.value;return t.value.canMove||f&&((b=f())!=null&&b.length)?s:d(a.parent)}function y(a){return!!i}function h(){return(e==null?void 0:e.schema.label)||(e==null?void 0:e.schema.title)||(e==null?void 0:e.schema.name)}function g(){}function M(a,t){var s;!a||!t||(s=e==null?void 0:e.setupContext)==null||s.emit("dragEnd")}function V(a,t){const{componentType:s}=a;let f=L(s,a,t);const b=s.toLowerCase().replace(/-/g,"_");return f&&!f.id&&f.type===s&&(f.id=`${b}_${Math.random().toString().slice(2,6)}`),f}function S(a){}function w(...a){}function A(a){if(!a)return;const t=e==null?void 0:e.schema,{formSchemaUtils:s}=a;if(t&&s.getExpressions().length){const f=s.getExpressions().findIndex(b=>b.target===t.id);f>-1&&s.getExpressions().splice(f,1)}}function $(a){A(a),e!=null&&e.schema.contents&&e.schema.contents.map(t=>{let s=t.id;t.type==="component-ref"&&(s=t.component);const f=c.value.querySelectorAll(`#${s}-design-item`);f!=null&&f.length&&Array.from(f).map(b=>{var D;(D=b==null?void 0:b.componentInstance)!=null&&D.value.onRemoveComponent&&b.componentInstance.value.onRemoveComponent(a)})})}function R(){}function N(a){}return o.value={canMove:p(),canSelectParent:v(),canDelete:O(),canNested:!u(),contents:e==null?void 0:e.schema.contents,elementRef:c,parent:(P=e==null?void 0:e.parent)==null?void 0:P.componentInstance,schema:e==null?void 0:e.schema,styles:r,designerClass:l,canAccepts:y,getBelongedComponentInstance:m,getDraggableDesignItemElement:d,getDraggingDisplayText:h,getPropConfig:w,getDragScopeElement:g,onAcceptMovedChildElement:M,onChildElementMovedOut:S,addNewChildComponentSchema:V,triggerBelongedComponentToMoveWhenMoved:n.ref(!1),triggerBelongedComponentToDeleteWhenDeleted:n.ref(!1),onRemoveComponent:$,getCustomButtons:R,onPropertyChanged:N},o}const ae=n.defineComponent({name:"FCapsuleDesign",props:k,emits:["change","update:modelValue"],setup(c,e){const i=n.ref(c.items),r=n.ref(),l=2,o=n.ref(c.modelValue),p=n.ref("none"),v=n.ref(c.type),O=n.inject("design-item-context"),u=ne(r,O);n.onMounted(()=>{r.value.componentInstance=u}),e.expose(u.value);const m=n.computed(()=>{const t={"f-capsule-container":!0};return v.value&&(t[v.value]=!0),t}),d=n.computed(()=>({})),y=n.computed(()=>({"f-capsule":!0})),h=n.ref(l),g=n.ref(0),M=n.ref(0),V=n.computed(()=>({left:`${h.value}px`,width:`${g.value}px`,transition:p.value})),S=n.computed(()=>({width:`${M.value}px`})),w=new Map;function A(t){var s;if(w.has(t.value)){const f=(s=w.get(t.value))==null?void 0:s.value;if(f){const b=f.getBoundingClientRect(),D=r.value.getBoundingClientRect();h.value=b.left-D.left+l+r.value.scrollLeft,g.value=b.width-2*l}}}function $(t,s){const f=t.value;o.value=f,e.emit("update:modelValue",f),A(t),s&&e.emit("change",f)}function R(t){const s=i.value.findIndex(f=>f.value===t);s>-1&&$(i.value[s],!1)}n.watch(()=>c.modelValue,t=>{o.value=t,R(o.value)}),n.watch(()=>c.items,async t=>{i.value=t,await n.nextTick(),R(o.value),M.value=Array.from(w.values()).reduce((s,f)=>(s+=f.value.clientWidth,s),0)}),n.onMounted(async()=>{R(o.value),await n.nextTick(),p.value="0.1s ease-out all",M.value=Array.from(w.values()).reduce((t,s)=>(t+=s.value.clientWidth,t),0)});function N(t,s){$(s,!0)}function P(t,s){w.set(s,t)}function a(t,s){return n.createVNode(U,{name:t.name,value:t.value,isActive:t.value===o.value,index:s,onMounted:P,onActive:N},null)}return()=>n.createVNode("span",{ref:r,class:m.value,style:d.value},[n.createVNode("span",{class:"f-capsule-pane"},[i.value.map((t,s)=>a(t,s))]),n.createVNode("small",{class:y.value,style:V.value},null),n.createVNode("div",{class:"f-capsule-board",style:S.value},null)])}});B.register=(c,e,i)=>{c.capsule=B,e.capsule=q},B.registerDesigner=(c,e,i)=>{c.capsule=ae,e.capsule=q};const ce=z.withInstall(B);j.FCapsule=B,j.capsuleItemProps=W,j.capsuleProps=k,j.default=ce,j.propsResolver=q,Object.defineProperties(j,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});