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