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

Farris Vue, a Farris Design based Vue3 component library.

(function(d,p){typeof exports=="object"&&typeof module<"u"?p(exports,require("../common/index.umd.js"),require("vue")):typeof define=="function"&&define.amd?define(["exports","../common/index.umd.js","vue"],p):(d=typeof globalThis<"u"?globalThis:d||self,p(d.tags={},d.common,d.Vue))})(this,function(d,p,a){"use strict";const k={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 x(l,i,m,b){const s=a.ref(-1),f=a.ref(!1);function w(c,o,g){l.disable||(c.stopPropagation(),o&&setTimeout(()=>{s.value=g,f.value=!0,o.moving=!0}))}function C(c,o){if(f.value&&(c.preventDefault(),s.value!==o)){const g=b.value[s.value],v=b.value;v.splice(s.value,1),v.splice(o,0,g),s.value=o}}function B(c,o){f.value&&(c.preventDefault(),c.dataTransfer&&(c.dataTransfer.dropEffect="move"))}function h(c,o){o&&(o.moving=!1),m.value=b.value.filter(g=>g.type==="Tag").map(g=>g.payload),f.value=!1,i.emit("change",m.value)}return{dragstart:w,dragenter:C,dragover:B,dragend:h,isDragging:f}}const I=a.defineComponent({name:"FTags",props:k,emits:["remove","selectionChange","change","click"],setup(l,i){const m=a.ref(l.selectable),b=a.ref(l.customClass),s=a.ref(l.data),f=a.ref(l.tagType),w=a.ref(l.tagStyle),C=a.ref(l.showColor),B=a.ref(l.customStyle),h=a.ref(l.activeTag),c=a.ref(l.addButtonText),o=a.ref(),g=a.ref(l.wrapText),v=a.ref();a.ref(l.disable);const T=a.ref(!1);function y(){const e=s.value.map(t=>({type:"Tag",payload:t}));return l.showAddButton&&e.push({type:"AddButton"}),e}const r=a.ref(y());function V(e){s.value=e,r.value=y()}const j=a.computed(()=>r.value.findIndex(e=>e.type==="Input")),O=x(l,i,s,r),{dragstart:P,dragenter:E,dragover:L,dragend:M}=O;a.watch(()=>l.data,e=>V(e)),a.watch(()=>l.showAddButton,()=>{r.value=y()}),a.watch(()=>l.disable,e=>{r.value=y()}),a.watch(()=>l.activeTag,e=>{h.value=e}),a.watch(()=>l.tagType,e=>{f.value=e}),a.watch(()=>l.tagStyle,e=>{w.value=e}),a.watch(()=>l.wrapText,e=>{g.value=e}),a.watch(()=>l.addButtonText,e=>{c.value=e}),a.watch(T,e=>{const t=[...r.value];e?t.length>0&&t[t.length-1].type!=="Input"&&(t.splice(t.length-1,1),t.splice(t.length,0,{type:"Input"}),r.value=t,a.nextTick(()=>{var n;v.value&&((n=v.value)==null||n.focus())})):t.length>0&&t[t.length-1].type!=="AddButton"&&(t.splice(t.length-1,1),t.splice(t.length,0,{type:"AddButton"}),r.value=t)});const K=a.computed(()=>{const e={"farris-tags":!0,"farris-tags-checkable":m.value,"farris-tags-nowrap":!g.value};return b.value.split(" ").reduce((t,n)=>(t[n]=!0,t),e),e});function F(e){const t={"farris-tag-item":!0,"farris-tag-item-checked":m.value&&e.checked,"farris-tag-item-checkable":!h.value&&!f.value&&m.value,"farris-tag-item-has-color":C.value,"farris-tag-item-actived":h.value===e.name};if(f.value){const n=`farris-tag-item-${f.value}`;t[n]=!0}return t}const R=a.computed(()=>{const e={borderColor:"#E6E6E6"};return B.value&&B.value.split(";").reduce((t,n)=>{const u=n.split(":");return t[u[0]]=u[1],t},e),e});function q(e,t){!l.disable&&m.value&&(!t.hasOwnProperty("selectable")||t.selectable)&&(t.checked=!t.checked,h.value=t.checked?t.name:"",t.checked&&s.value.filter(n=>n.name!==t.name).forEach(n=>{n.checked=!t.checked}),i.emit("change",s.value),i.emit("selectionChange",t))}function H(e,t){if(l.disable)return;let n;switch(e.key){case"Backspace":s.value=s.value.filter(u=>u.name!==t.name),i.emit("change",s.value);break;case"ArrowLeft":n=Math.max(o.value.scrollLeft+20,0),o.value.scrollLeft=n;break;case"ArrowRight":n=Math.max(o.value.scrollLeft-20,0),o.value.scrollLeft=n}}function _(e,t){const n=s.value.findIndex(u=>u.name===t.name);if(n>-1){const[u]=s.value.splice(n,1);r.value=y(),i.emit("change",s.value),i.emit("remove",{tags:s.value,remove:u})}e.stopPropagation()}const W=a.computed(()=>({"farris-tag-item":!0,"farris-tag-add-button":!0,"farris-tag-add-button-disabled":!l.enableAddButton}));function X(e){l.enableAddButton&&(e.stopPropagation(),T.value=!0)}function z(){return!l.disable&&a.createVNode("li",{class:W.value,onClick:e=>X(e)},[a.createVNode("span",{class:"f-icon f-icon-amplification"},null),c.value&&a.createVNode("span",{class:"farris-tag-add-text"},[c.value])])}function S(e,t,n){e>-1&&(s.value.splice(e,0,{name:t,value:n,selectable:m.value}),r.value=y(),T.value=!1,i.emit("change",s.value))}function A(e){if(e&&e.value){const t=e.value,n=j.value;S(n,t,t),e.innerText=""}else T.value=!1}function G(e){const t=e.target;t&&t.value?A(t):T.value=!1}function J(e){e.key==="Enter"&&A(e.target)}function Q(){return!l.disable&&a.createVNode("li",{class:"farris-tag-input-box"},[a.createVNode("input",{ref:v,class:"form-control",onKeyup:J,onBlur:G},null)])}function U(e,t){return a.createVNode("li",{class:F(e),style:R.value,tabindex:0,id:e.name,key:e.name,onClick:n=>q(n,e),onKeydown:n=>H(n,e),draggable:"false",onDragstart:n=>P(n,e,t),onDragenter:n=>E(n,t),onDragend:n=>M(n,e),onDragover:n=>L(n,t)},[a.createVNode("span",{title:e.name,class:"tag-box"},[e.name]),!l.disable&&l.showClose&&a.createVNode("span",{class:"tag-delete"},[a.createVNode("i",{class:"f-icon f-icon-close",onClick:n=>_(n,e)},null)])])}function Y(){return r.value.map((e,t)=>{switch(e.type){case"Tag":return U(e.payload,t);case"AddButton":return z();case"Input":return Q()}})}const Z=a.computed(()=>({"h-100":!0,"farris-tags-item-container":!0,"farris-tag-item-capsule":w.value==="capsule"}));function $(e){const t=Math.max(o.value.scrollLeft-e.deltaX,0);o.value.scrollLeft=t}function ee(e){var n;e.preventDefault(),e.stopPropagation();const t=(n=e.dataTransfer)==null?void 0:n.getData("Text");if(t){const u=t.split(":"),ne=u[0],D=u[1];[...s.value].findIndex(le=>le.value===D)>-1||S(s.value.length,ne,D)}}function te(e){e.preventDefault()}function ae(){i.emit("click")}return()=>a.createVNode("div",a.mergeProps(i.attrs,{class:K.value,onDrop:ee,onDragover:te,"data-placeholder":l.placeholder,onClick:ae}),[!!r.value.length&&a.createVNode("ul",{ref:o,class:Z.value,onWheel:e=>$(e)},[Y()])])}}),N=p.withInstall(I);d.FTags=I,d.default=N,d.tagsProps=k,Object.defineProperties(d,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});