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

Farris Vue, a Farris Design based Vue3 component library.

(function(M,W){typeof exports=="object"&&typeof module<"u"?W(exports,require("../common/index.umd.js"),require("vue"),require("lodash-es")):typeof define=="function"&&define.amd?define(["exports","../common/index.umd.js","vue","lodash-es"],W):(M=typeof globalThis<"u"?globalThis:M||self,W(M.tags={},M.common,M.Vue,M.LodashES))})(this,function(M,W,t,X){"use strict";function Te(a,e,p){return e}const fe={},de={};function Z(a){const{properties:e,title:p,ignore:u}=a,n=u&&Array.isArray(u),m=Object.keys(e).reduce((v,k)=>((!n||!u.find(S=>S===k))&&(v[k]=e[k].type==="object"&&e[k].properties?Z(e[k]):X.cloneDeep(e[k].default)),v),{});if(p&&(!n||!u.find(v=>v==="id"))){const v=p.toLowerCase().replace(/-/g,"_");m.id=`${v}_${Math.random().toString().slice(2,6)}`}return m}function we(a){const{properties:e,title:p,required:u}=a;if(u&&Array.isArray(u)){const n=u.reduce((m,v)=>(m[v]=e[v].type==="object"&&e[v].properties?Z(e[v]):X.cloneDeep(e[v].default),m),{});if(p&&u.find(m=>m==="id")){const m=p.toLowerCase().replace(/-/g,"_");n.id=`${m}_${Math.random().toString().slice(2,6)}`}return n}return{type:p}}function pe(a,e={},p){const u=fe[a];if(u){let n=we(u);const m=de[a];return n=m?m({getSchemaByType:pe},n,e,p):n,n}return null}function ke(a,e){const p=Z(e);return Object.keys(p).reduce((u,n)=>(Object.prototype.hasOwnProperty.call(a,n)&&(u[n]&&X.isPlainObject(u[n])&&X.isPlainObject(a[n]||!a[n])?Object.assign(u[n],a[n]||{}):u[n]=a[n]),u),p),p}function ge(a,e){return Object.keys(a).filter(u=>a[u]!=null).reduce((u,n)=>{if(e.has(n)){const m=e.get(n);if(typeof m=="string")u[m]=a[n];else{const v=m(n,a[n],a);Object.assign(u,v)}}else u[n]=a[n];return u},{})}function Be(a,e,p=new Map){const u=ke(a,e);return ge(u,p)}function De(a={}){function e(f,g,c,h){if(typeof c=="number")return h[f].length===c;if(typeof c=="object"){const b=Object.keys(c)[0],B=c[b];if(b==="not")return Number(h[f].length)!==Number(B);if(b==="moreThan")return Number(h[f].length)>=Number(B);if(b==="lessThan")return Number(h[f].length)<=Number(B)}return!1}function p(f,g,c,h){return h[f]&&h[f].propertyValue&&String(h[f].propertyValue.value)===String(c)}const u=new Map([["length",e],["getProperty",p]]);Object.keys(a).reduce((f,g)=>(f.set(g,a[g]),f),u);function n(f,g){const c=f;return typeof g=="number"?[{target:c,operator:"length",param:null,value:Number(g)}]:typeof g=="boolean"?[{target:c,operator:"getProperty",param:f,value:!!g}]:typeof g=="object"?Object.keys(g).map(h=>{if(h==="length")return{target:c,operator:"length",param:null,value:g[h]};const b=h,B=g[h];return{target:c,operator:"getProperty",param:b,value:B}}):[]}function m(f){return Object.keys(f).reduce((c,h)=>{const b=n(h,f[h]);return c.push(...b),c},[])}function v(f,g){if(u.has(f.operator)){const c=u.get(f.operator);return c&&c(f.target,f.param,f.value,g)||!1}return!1}function k(f,g){return m(f).reduce((b,B)=>b&&v(B,g),!0)}function S(f,g){const c=Object.keys(f),h=c.includes("allOf"),b=c.includes("anyOf"),B=h||b,C=(B?f[B?h?"allOf":"anyOf":"allOf"]:[f]).map(q=>k(q,g));return h?!C.includes(!1):C.includes(!0)}return{parseValueSchema:S}}const Ae={},Se={};De();function Ne(a,e,p=new Map,u=(v,k,S,f)=>k,n={},m=v=>v){return fe[e.title]=e,de[e.title]=u,Ae[e.title]=n,Se[e.title]=m,(v={},k=!0)=>{if(!k)return ge(v,p);const S=Be(v,e,p),f=Object.keys(a).reduce((g,c)=>(g[c]=a[c].default,g),{});return Object.assign(f,S)}}function je(a,e){return{customClass:e.class,customStyle:e.style}}const Oe=new Map([["appearance",je]]),Ve={title:"tags",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:[]}}}}}},Pe={$schema:"https://json-schema.org/draft/2020-12/schema",$id:"https://farris-design.gitee.io/tags.schema.json",title:"tags",description:"A Farris Component",type:"object",properties:{id:{description:"The unique identifier for tags",type:"string"},type:{description:"The type string of tags",type:"string",default:"tags"},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"]},U={activeTag:{type:String,default:""},addButtonText:{type:String,default:""},customClass:{type:String,default:""},customStyle:{type:String,default:""},data:{type:Array,default:[{name:"示例1"}]},enableAddButton:{type:Boolean,default:!1},selectable:{type:Boolean,default:!1},showAddButton:{type:Boolean,default:!1},showClose:{type:Boolean,default:!0},showColor:{type:Boolean,default:!1},tagType:{type:String,default:""},tagStyle:{type:String,default:""},wrapText:{type:Boolean,default:!1},draggable:{type:Boolean,default:!1},disable:{type:Boolean,default:!1}},x=Ne(U,Pe,Oe,Te,Ve);function me(a,e,p,u){const n=t.ref(-1),m=t.ref(!1);function v(g,c,h){a.disable||(g.stopPropagation(),c&&setTimeout(()=>{n.value=h,m.value=!0,c.moving=!0}))}function k(g,c){if(m.value&&(g.preventDefault(),n.value!==c)){const h=u.value[n.value],b=u.value;b.splice(n.value,1),b.splice(c,0,h),n.value=c}}function S(g,c){m.value&&(g.preventDefault(),g.dataTransfer&&(g.dataTransfer.dropEffect="move"))}function f(g,c){c&&(c.moving=!1),p.value=u.value.filter(h=>h.type==="Tag").map(h=>h.payload),m.value=!1,e.emit("change",p.value)}return{dragstart:v,dragenter:k,dragover:S,dragend:f,isDragging:m}}const H=t.defineComponent({name:"FTags",props:U,emits:["remove","selectionChange","change"],setup(a,e){const p=t.ref(a.selectable),u=t.ref(a.customClass),n=t.ref(a.data),m=t.ref(a.tagType),v=t.ref(a.tagStyle),k=t.ref(a.showColor),S=t.ref(a.customStyle),f=t.ref(a.activeTag),g=t.ref(a.addButtonText),c=t.ref(),h=t.ref(a.wrapText),b=t.ref();t.ref(a.disable);const B=t.ref(!1);function A(){const r=n.value.map(o=>({type:"Tag",payload:o}));return a.showAddButton&&r.push({type:"AddButton"}),r}const N=t.ref(A());function C(r){n.value=r,N.value=A()}const L=t.computed(()=>N.value.findIndex(r=>r.type==="Input")),q=me(a,e,n,N),{dragstart:I,dragenter:$,dragover:V,dragend:F}=q;t.watch(()=>a.data,r=>C(r)),t.watch(()=>a.showAddButton,()=>{N.value=A()}),t.watch(()=>a.disable,r=>{N.value=A()}),t.watch(()=>a.activeTag,r=>{f.value=r}),t.watch(B,r=>{const o=[...N.value];r?o.length>0&&o[o.length-1].type!=="Input"&&(o.splice(o.length-1,1),o.splice(o.length,0,{type:"Input"}),N.value=o,t.nextTick(()=>{var d;b.value&&((d=b.value)==null||d.focus())})):o.length>0&&o[o.length-1].type!=="AddButton"&&(o.splice(o.length-1,1),o.splice(o.length,0,{type:"AddButton"}),N.value=o)});const y=t.computed(()=>{const r={"farris-tags":!0,"farris-tags-checkable":p.value,"farris-tags-nowrap":!h.value};return u.value.split(" ").reduce((o,d)=>(o[d]=!0,o),r),r});function w(r){const o={"farris-tag-item":!0,"farris-tag-item-checked":p.value&&r.checked,"farris-tag-item-checkable":p.value,"farris-tag-item-has-color":k.value,"farris-tag-item-actived":f.value===r.name};if(m.value){const d=`farris-tag-item-${m.value}`;o[d]=!0}return o}const T=t.computed(()=>{const r={};return S.value&&S.value.split(";").reduce((o,d)=>{const P=d.split(":");return o[P[0]]=P[1],o},r),r});function D(r,o){!a.disable&&p.value&&(!o.hasOwnProperty("selectable")||o.selectable)&&(o.checked=!o.checked,f.value=o.checked?o.name:"",o.checked&&n.value.filter(d=>d.name!==o.name).forEach(d=>{d.checked=!o.checked}),e.emit("change",n.value),e.emit("selectionChange",o))}function j(r,o){if(a.disable)return;let d;switch(r.key){case"Backspace":n.value=n.value.filter(P=>P.name!==o.name),e.emit("change",n.value);break;case"ArrowLeft":d=Math.max(c.value.scrollLeft+20,0),c.value.scrollLeft=d;break;case"ArrowRight":d=Math.max(c.value.scrollLeft-20,0),c.value.scrollLeft=d}}function _(r,o){const d=n.value.findIndex(P=>P.name===o.name);if(d>-1){const[P]=n.value.splice(d,1);N.value=A(),e.emit("change",n.value),e.emit("remove",{tags:n.value,remove:P})}r.stopPropagation()}const K=t.computed(()=>({"farris-tag-item":!0,"farris-tag-add-button":!0,"farris-tag-add-button-disabled":!a.enableAddButton}));function ee(r){r.stopPropagation(),B.value=!0}function te(){return!a.disable&&t.createVNode("li",{class:K.value,onClick:r=>ee(r)},[t.createVNode("span",{class:"f-icon f-icon-amplification"},null),g.value&&t.createVNode("span",{class:"farris-tag-add-text"},[g.value])])}function z(r,o,d){r>-1&&(n.value.splice(r,0,{name:o,value:d,selectable:p.value}),N.value=A(),B.value=!1,e.emit("change",n.value))}function G(r){if(r&&r.value){const o=r.value,d=L.value;z(d,o,o),r.innerText=""}else B.value=!1}function ae(r){const o=r.target;o&&o.value?G(o):B.value=!1}function ne(r){r.key==="Enter"&&G(r.target)}function he(){return!a.disable&&t.createVNode("li",{class:"farris-tag-input-box"},[t.createVNode("input",{title:"farris-tag-input-box",ref:b,class:"form-control",onKeyup:ne,onBlur:ae},null)])}function re(r,o){return t.createVNode("li",{class:w(r),style:T.value,tabindex:0,id:r.name,key:r.name,onClick:d=>D(d,r),onKeydown:d=>j(d,r),draggable:"false",onDragstart:d=>I(d,r,o),onDragenter:d=>$(d,o),onDragend:d=>F(d,r),onDragover:d=>V(d,o)},[t.createVNode("span",{title:r.name,class:"tag-box"},[r.name]),!a.disable&&a.showClose&&t.createVNode("span",{class:"tag-delete"},[t.createVNode("i",{class:"f-icon f-icon-close",onClick:d=>_(d,r)},null)])])}function se(){return N.value.map((r,o)=>{switch(r.type){case"Tag":return re(r.payload,o);case"AddButton":return te();case"Input":return he()}})}const J=t.computed(()=>({"farris-tags-item-container":!0,"farris-tag-item-capsule":v.value==="capsule"}));function Q(r){const o=Math.max(c.value.scrollLeft-r.deltaX,0);c.value.scrollLeft=o}function oe(r){var d;r.preventDefault(),r.stopPropagation();const o=(d=r.dataTransfer)==null?void 0:d.getData("Text");if(o){const P=o.split(":"),ce=P[0],Y=P[1];[...n.value].findIndex(ie=>ie.value===Y)>-1||z(n.value.length,ce,Y)}}function le(r){r.preventDefault()}return()=>t.createVNode("div",{class:y.value,onDrop:oe,onDragover:le},[t.createVNode("ul",{ref:c,class:J.value,onWheel:r=>Q(r)},[se()])])}});function Me(a,e,p){var F;const u="",n="",m=t.ref();function v(){return(e==null?void 0:e.schema.componentType)!=="frame"}function k(){return!1}function S(){return(e==null?void 0:e.schema.componentType)!=="frame"}function f(){return(e==null?void 0:e.schema.componentType)==="frame"}function g(y){if(!y||!y.value)return null;if(y.value.schema&&y.value.schema.type==="component")return y.value;const w=t.ref(y==null?void 0:y.value.parent),T=g(w);return T||null}function c(y=e){var j;const{componentInstance:w,designerItemElementRef:T}=y;if(!w||!w.value)return null;const{getCustomButtons:D}=w.value;return w.value.canMove||D&&((j=D())!=null&&j.length)?T:c(y.parent)}function h(y){return!!p}function b(){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 A(y,w){var T;!y||!w||(T=e==null?void 0:e.setupContext)==null||T.emit("dragEnd")}function N(y,w){const{componentType:T}=y;let D=pe(T,y,w);const j=T.toLowerCase().replace(/-/g,"_");return D&&!D.id&&D.type===T&&(D.id=`${j}_${Math.random().toString().slice(2,6)}`),D}function C(y){}function L(...y){}function q(y){if(!y)return;const w=e==null?void 0:e.schema,{formSchemaUtils:T}=y;if(w&&T.getExpressions().length){const D=T.getExpressions().findIndex(j=>j.target===w.id);D>-1&&T.getExpressions().splice(D,1)}}function I(y){q(y),e!=null&&e.schema.contents&&e.schema.contents.map(w=>{let T=w.id;w.type==="component-ref"&&(T=w.component);const D=a.value.querySelectorAll(`#${T}-design-item`);D!=null&&D.length&&Array.from(D).map(j=>{var _;(_=j==null?void 0:j.componentInstance)!=null&&_.value.onRemoveComponent&&j.componentInstance.value.onRemoveComponent(y)})})}function $(){}function V(y){}return m.value={canMove:v(),canSelectParent:k(),canDelete:S(),canNested:!f(),contents:e==null?void 0:e.schema.contents,elementRef:a,parent:(F=e==null?void 0:e.parent)==null?void 0:F.componentInstance,schema:e==null?void 0:e.schema,styles:u,designerClass:n,canAccepts:h,getBelongedComponentInstance:g,getDraggableDesignItemElement:c,getDraggingDisplayText:b,getPropConfig:L,getDragScopeElement:B,onAcceptMovedChildElement:A,onChildElementMovedOut:C,addNewChildComponentSchema:N,triggerBelongedComponentToMoveWhenMoved:t.ref(!1),triggerBelongedComponentToDeleteWhenDeleted:t.ref(!1),onRemoveComponent:I,getCustomButtons:$,onPropertyChanged:V},m}const Ce=t.defineComponent({name:"FTagsDesign",props:U,emits:["remove","selectionChange","change"],setup(a,e){const p=t.ref(a.selectable),u=t.ref(a.customClass),n=t.ref(a.data),m=t.ref(a.tagType),v=t.ref(a.tagStyle),k=t.ref(a.showColor),S=t.ref(a.activeTag),f=t.ref(a.customStyle),g=t.ref(a.showClose),c=t.ref(a.showAddButton),h=t.ref(a.showInput),b=t.ref(a.addButtonText),B=t.ref(a.enableAddButton);t.ref(a.placeholder),t.ref(""),t.ref();const A=t.ref(),N=t.ref(a.wrapText),C=t.ref(),L=t.ref(),q=t.inject("design-item-context"),I=Me(L,q);t.onMounted(()=>{L.value.componentInstance=I}),e.expose(I.value);function $(){const s=n.value.map(l=>({type:"Tag",payload:l}));return c.value&&s.push({type:"AddButton"}),s}const V=t.ref($());function F(s){n.value=s,V.value=$()}const y=t.computed(()=>V.value.findIndex(s=>s.type==="Input")),w=me(a,e,n,V),{dragstart:T,dragenter:D,dragover:j,dragend:_}=w;t.watch(()=>a.data,s=>F(s));const K=t.computed(()=>{const s={"farris-tags":!0,"farris-tags-checkable":p.value,"farris-tags-nowrap":!N.value};return u.value.split(" ").reduce((l,i)=>(l[i]=!0,l),s),s});function ee(s){const l={"farris-tag-item":!0,"farris-tag-item-checked":p.value&&s.checked,"farris-tag-item-checkable":p.value,"farris-tag-item-has-color":k.value,"farris-tag-item-actived":S.value===s.name};if(m.value){const i=`farris-tag-item-${m.value}`;l[i]=!0}return l}const te=t.computed(()=>{const s={};return f.value&&f.value.split(";").reduce((l,i)=>{const O=i.split(":");return l[O[0]]=O[1],l},s),s});function z(s,l){p.value&&l.selectable&&(l.checked=!l.checked,S.value=l.checked?l.name:"",l.checked&&n.value.filter(i=>i.name!==l.name).forEach(i=>{i.checked=!l.checked}),e.emit("change",n.value),e.emit("selectionChange",l))}function G(s,l){let i;switch(s.key){case"Backspace":n.value=n.value.filter(O=>O.name!==l.name),e.emit("change",n.value);break;case"ArrowLeft":i=Math.max(A.value.scrollLeft+20,0),A.value.scrollLeft=i;break;case"ArrowRight":i=Math.max(A.value.scrollLeft-20,0),A.value.scrollLeft=i}}function ae(s,l){const i=n.value.findIndex(O=>O.name===l.name);if(i>-1){const[O]=n.value.splice(i,1);V.value=$(),e.emit("change",n.value),e.emit("remove",n.value,O,i)}s.stopPropagation()}const ne=t.computed(()=>({"farris-tag-item":!0,"farris-tag-add-button":!0,"farris-tag-add-button-disabled":!B.value}));function he(s){}function re(){return t.createVNode("li",{class:ne.value,onClick:s=>void 0},[t.createVNode("span",{class:"f-icon f-icon-amplification"},null),t.createVNode("span",{class:"farris-tag-add-text"},[b.value])])}function se(s){if(s&&!s.innerText){const l=y.value;if(l>0){const[i]=n.value.splice(l-1,1);V.value.splice(l-1,1),e.emit("remove",n.value,i,l-1)}}}function J(s,l,i){s>-1&&(n.value.splice(s,0,{name:l,value:i,selectable:p.value}),V.value=$(),e.emit("change",n.value))}function Q(s){if(s&&s.innerText){const l=s.innerText,i=y.value;J(i,l,l),s.innerText=""}}function oe(s){const l=s.target;l&&(l.innerText?Q(l):e.emit("change",n.value))}function le(s){s.key==="Enter"&&Q(s.target),s.key==="Backspace"&&(se(s.target),t.nextTick(()=>{var l;C.value&&((l=C.value)==null||l.focus())}))}function r(){return t.createVNode("li",{class:"farris-tag-input-box"},[t.createVNode("div",{ref:C,class:"form-control",contenteditable:"true",onKeyup:le,onBlur:oe},null)])}function o(s,l){return t.createVNode("li",{class:ee(s),style:te.value,tabindex:0,id:s.name,key:s.name,onClick:i=>z(i,s),onKeydown:i=>G(i,s),draggable:"true",onDragstart:i=>T(i,s,l),onDragenter:i=>D(i,l),onDragend:i=>_(i,s),onDragover:i=>j(i,l)},[t.createVNode("div",{title:s.name,class:"tag-box"},[s.name]),g.value&&t.createVNode("span",{class:"tag-delete"},[t.createVNode("i",{class:"f-icon f-icon-close",onClick:i=>ae(i,s)},null)])])}function d(){return V.value.map((s,l)=>{switch(s.type){case"Tag":return o(s.payload,l);case"AddButton":return re();case"Input":return r()}})}const P=t.computed(()=>({"farris-tags-item-container":!0,"farris-tag-item-capsule":v.value==="capsule"}));function ce(s){const l=Math.max(A.value.scrollLeft-s.deltaX,0);A.value.scrollLeft=l}function Y(s){const l=A.value,i=n.value.length-1;if(l){const O=Array.from(l.children).filter(R=>R.className.indexOf("farris-tag-item")>-1).findIndex(R=>{const E=R.getBoundingClientRect(),ue=window.getComputedStyle(R),be=parseInt(ue["margin-left"],10)+E.width+parseInt(ue["margin-right"],10);return E.left+be>s});if(O>-1)return O}return i}function ye(s){if(h.value){const i=Y(s.clientX)+1,R=V.value.filter(E=>E.type!=="Input");R.splice(i,0,{type:"Input"}),V.value=R,t.nextTick(()=>{var E;C.value&&((E=C.value)==null||E.focus())})}}function ve(s){var i;s.preventDefault(),s.stopPropagation();const l=(i=s.dataTransfer)==null?void 0:i.getData("Text");if(l){const O=l.split(":"),R=O[0],E=O[1];[...n.value].findIndex(Re=>Re.value===E)>-1||J(n.value.length,R,E)}}function ie(s){s.preventDefault()}return()=>t.createVNode("div",{ref:L,class:K.value,onClick:ye,onDrop:ve,onDragover:ie},[t.createVNode("ul",{ref:A,class:P.value,onWheel:s=>ce(s)},[d()])])}});H.register=(a,e,p,u)=>{a.tags=H,e.tags=x},H.registerDesigner=(a,e,p)=>{a.tags=Ce,e.tags=x};const Ee=W.withInstall(H);M.FTags=H,M.default=Ee,M.propsResolver=x,M.tagsProps=U,Object.defineProperties(M,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});