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

Farris Vue, a Farris Design based Vue3 component library.

(function(l,T){typeof exports=="object"&&typeof module<"u"?T(exports,require("../../components/common/index.umd.js"),require("../../components/tags/index.umd.js"),require("../../components/dynamic-resolver/index.umd.js"),require("vue"),require("../../components/designer-canvas/index.umd.js")):typeof define=="function"&&define.amd?define(["exports","../../components/common/index.umd.js","../../components/tags/index.umd.js","../../components/dynamic-resolver/index.umd.js","vue","../../components/designer-canvas/index.umd.js"],T):(l=typeof globalThis<"u"?globalThis:l||self,T(l.tags={},l.common,l.FTags,l.dynamicResolver,l.Vue,l.designerCanvas))})(this,function(l,T,N,V,n,P){"use strict";const R={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},placeholder:{type:String,default:""}};function E(o,r,d,h){const s=n.ref(-1),y=n.ref(!1);function j(u,c,p){o.disable||(u.stopPropagation(),c&&setTimeout(()=>{s.value=p,y.value=!0,c.moving=!0}))}function D(u,c){if(y.value&&(u.preventDefault(),s.value!==c)){const p=h.value[s.value],k=h.value;k.splice(s.value,1),k.splice(c,0,p),s.value=c}}function C(u,c){y.value&&(u.preventDefault(),u.dataTransfer&&(u.dataTransfer.dropEffect="move"))}function x(u,c){c&&(c.moving=!1),d.value=h.value.filter(p=>p.type==="Tag").map(p=>p.payload),y.value=!1,r.emit("change",d.value)}return{dragstart:j,dragenter:D,dragover:C,dragend:x,isDragging:y}}const b=n.defineComponent({name:"FTagsDesign",props:R,emits:["remove","selectionChange","change"],setup(o,r){const d=n.ref(o.selectable),h=n.ref(o.customClass),s=n.ref(o.data),y=n.ref(o.tagType),j=n.ref(o.tagStyle),D=n.ref(o.showColor),C=n.ref(o.activeTag),x=n.ref(o.customStyle),u=n.ref(o.showClose),c=n.ref(o.showAddButton),p=n.ref(o.showInput),k=n.ref(o.addButtonText),_=n.ref(o.enableAddButton);n.ref(o.placeholder),n.ref(""),n.ref();const v=n.ref(),z=n.ref(o.wrapText),I=n.ref(),S=n.ref(),G=n.inject("design-item-context"),M=P.useDesignerComponent(S,G);n.onMounted(()=>{S.value.componentInstance=M}),r.expose(M.value);function w(){const e=s.value.map(t=>({type:"Tag",payload:t}));return c.value&&e.push({type:"AddButton"}),e}const g=n.ref(w());function J(e){s.value=e,g.value=w()}const q=n.computed(()=>g.value.findIndex(e=>e.type==="Input")),Q=E(o,r,s,g),{dragstart:U,dragenter:Y,dragover:Z,dragend:ee}=Q;n.watch(()=>o.data,e=>J(e));const te=n.computed(()=>{const e={"farris-tags":!0,"farris-tags-checkable":d.value,"farris-tags-nowrap":!z.value};return h.value.split(" ").reduce((t,a)=>(t[a]=!0,t),e),e});function ne(e){const t={"farris-tag-item":!0,"farris-tag-item-checked":d.value&&e.checked,"farris-tag-item-checkable":d.value,"farris-tag-item-has-color":D.value,"farris-tag-item-actived":C.value===e.name};if(y.value){const a=`farris-tag-item-${y.value}`;t[a]=!0}return t}const ae=n.computed(()=>{const e={};return x.value&&x.value.split(";").reduce((t,a)=>{const i=a.split(":");return t[i[0]]=i[1],t},e),e});function se(e,t){d.value&&t.selectable&&(t.checked=!t.checked,C.value=t.checked?t.name:"",t.checked&&s.value.filter(a=>a.name!==t.name).forEach(a=>{a.checked=!t.checked}),r.emit("change",s.value),r.emit("selectionChange",t))}function oe(e,t){let a;switch(e.key){case"Backspace":s.value=s.value.filter(i=>i.name!==t.name),r.emit("change",s.value);break;case"ArrowLeft":a=Math.max(v.value.scrollLeft+20,0),v.value.scrollLeft=a;break;case"ArrowRight":a=Math.max(v.value.scrollLeft-20,0),v.value.scrollLeft=a}}function re(e,t){const a=s.value.findIndex(i=>i.name===t.name);if(a>-1){const[i]=s.value.splice(a,1);g.value=w(),r.emit("change",s.value),r.emit("remove",s.value,i,a)}e.stopPropagation()}const ie=n.computed(()=>({"farris-tag-item":!0,"farris-tag-add-button":!0,"farris-tag-add-button-disabled":!_.value}));function Re(e){}function le(){return n.createVNode("li",{class:ie.value,onClick:e=>void 0},[n.createVNode("span",{class:"f-icon f-icon-amplification"},null),n.createVNode("span",{class:"farris-tag-add-text"},[k.value])])}function ce(e){if(e&&!e.innerText){const t=q.value;if(t>0){const[a]=s.value.splice(t-1,1);g.value.splice(t-1,1),r.emit("remove",s.value,a,t-1)}}}function O(e,t,a){e>-1&&(s.value.splice(e,0,{name:t,value:a,selectable:d.value}),g.value=w(),r.emit("change",s.value))}function $(e){if(e&&e.innerText){const t=e.innerText,a=q.value;O(a,t,t),e.innerText=""}}function de(e){const t=e.target;t&&(t.innerText?$(t):r.emit("change",s.value))}function ue(e){e.key==="Enter"&&$(e.target),e.key==="Backspace"&&(ce(e.target),n.nextTick(()=>{var t;I.value&&((t=I.value)==null||t.focus())}))}function fe(){return n.createVNode("li",{class:"farris-tag-input-box"},[n.createVNode("div",{ref:I,class:"form-control",contenteditable:"true",onKeyup:ue,onBlur:de},null)])}function pe(e,t){return n.createVNode("li",{class:ne(e),style:ae.value,tabindex:0,id:e.name,key:e.name,onClick:a=>se(a,e),onKeydown:a=>oe(a,e),draggable:"true",onDragstart:a=>U(a,e,t),onDragenter:a=>Y(a,t),onDragend:a=>ee(a,e),onDragover:a=>Z(a,t)},[n.createVNode("div",{title:e.name,class:"tag-box"},[e.name]),u.value&&n.createVNode("span",{class:"tag-delete"},[n.createVNode("i",{class:"f-icon f-icon-close",onClick:a=>re(a,e)},null)])])}function ge(){return g.value.map((e,t)=>{switch(e.type){case"Tag":return pe(e.payload,t);case"AddButton":return le();case"Input":return fe()}})}const me=n.computed(()=>({"farris-tags-item-container":!0,"farris-tag-item-capsule":j.value==="capsule"}));function ye(e){const t=Math.max(v.value.scrollLeft-e.deltaX,0);v.value.scrollLeft=t}function ve(e){const t=v.value,a=s.value.length-1;if(t){const i=Array.from(t.children).filter(m=>m.className.indexOf("farris-tag-item")>-1).findIndex(m=>{const f=m.getBoundingClientRect(),A=window.getComputedStyle(m),L=parseInt(A["margin-left"],10)+f.width+parseInt(A["margin-right"],10);return f.left+L>e});if(i>-1)return i}return a}function he(e){if(p.value){const a=ve(e.clientX)+1,m=g.value.filter(f=>f.type!=="Input");m.splice(a,0,{type:"Input"}),g.value=m,n.nextTick(()=>{var f;I.value&&((f=I.value)==null||f.focus())})}}function Te(e){var a;e.preventDefault(),e.stopPropagation();const t=(a=e.dataTransfer)==null?void 0:a.getData("Text");if(t){const i=t.split(":"),m=i[0],f=i[1];[...s.value].findIndex(Ie=>Ie.value===f)>-1||O(s.value.length,m,f)}}function be(e){e.preventDefault()}return()=>n.createVNode("div",{ref:S,class:te.value,onClick:he,onDrop:Te,onDragover:be},[n.createVNode("ul",{ref:v,class:me.value,onWheel:e=>ye(e)},[ge()])])}});function F(o,r,d){return r}const K=new Map([["appearance",V.resolveAppearance]]),W={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:[]}}}}}},H={$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"]},B=V.createPropsResolver(N.tagsProps,H,K,F,W);b.register=(o,r,d,h)=>{o.tags=N,r.tags=B},b.registerDesigner=(o,r,d)=>{o.tags=b,r.tags=B};const X=T.withInstall(b);l.FTagsDesign=b,l.default=X,l.propsResolver=B,l.tagsProps=R,Object.defineProperties(l,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});