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

Farris Vue, a Farris Design based Vue3 component library.

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