vue-devui 1.0.0-rc.2 → 1.0.0-rc.5

package/nuxt/components/TagInput.js

@@ -1,3 +0,0 @@
-import '../../tag-input/style.css' 
-
-export  { TagInput as default } from '../../tag-input/index.es.js'

package/tag-input/index.es.js

@@ -1,331 +0,0 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-import { createVNode, mergeProps, defineComponent, ref, computed, watch, nextTick } from "vue";
-var removeBtnSvg = createVNode("svg", mergeProps({
-  "width": "12px",
-  "height": "12px",
-  "viewBox": "0 0 12 12",
-  "version": "1.1",
-  "xmlns": "http://www.w3.org/2000/svg"
-}, {
-  "xmlns:xlink": "http://www.w3.org/1999/xlink"
-}), [createVNode("g", {
-  "stroke": "none",
-  "stroke-width": "1",
-  "fill": "none",
-  "fill-rule": "evenodd"
-}, [createVNode("path", {
-  "d": "M8.86785321,3.13214679 C9.02624037,3.29053395 9.02624037,3.54733027 8.86785321,3.70571743 L6.573,6 L8.86785321,8.29428257 C9.02624037,8.45266973 9.02624037,8.70946605 8.86785321,8.86785321 C8.70946605,9.02624037 8.45266973,9.02624037 8.29428257,8.86785321 L6,6.573 L3.70571743,8.86785321 C3.54733027,9.02624037 3.29053395,9.02624037 3.13214679,8.86785321 C2.97375963,8.70946605 2.97375963,8.45266973 3.13214679,8.29428257 L5.427,6 L3.13214679,3.70571743 C2.97375963,3.54733027 2.97375963,3.29053395 3.13214679,3.13214679 C3.29053395,2.97375963 3.54733027,2.97375963 3.70571743,3.13214679 L6,5.427 L8.29428257,3.13214679 C8.45266973,2.97375963 8.70946605,2.97375963 8.86785321,3.13214679 Z",
-  "fill-rule": "nonzero"
-}, null)])]);
-var tagInput = "";
-const tagInputProps = {
-  tags: {
-    type: Array,
-    default: () => []
-  },
-  displayProperty: {
-    type: String,
-    default: "name"
-  },
-  placeholder: {
-    type: String,
-    default: ""
-  },
-  minLength: {
-    type: Number,
-    default: 3
-  },
-  maxLength: {
-    type: Number,
-    default: Number.MAX_SAFE_INTEGER
-  },
-  maxTags: {
-    type: Number,
-    default: Number.MAX_SAFE_INTEGER
-  },
-  maxTagsText: {
-    type: String,
-    default: "\u5DF2\u8FBE\u5230\u6700\u5927\u4E2A\u6570\uFF1A"
-  },
-  spellcheck: {
-    type: Boolean,
-    default: true
-  },
-  suggestionList: {
-    type: Array,
-    default: () => []
-  },
-  disabled: {
-    type: Boolean,
-    default: false
-  },
-  isAddBySpace: {
-    type: Boolean,
-    default: true
-  },
-  disabledText: {
-    type: String,
-    default: ""
-  },
-  noData: {
-    type: String,
-    default: ""
-  },
-  caseSensitivity: {
-    type: Boolean,
-    default: false
-  }
-};
-const KEYS_MAP = {
-  tab: "Tab",
-  down: "ArrowDown",
-  up: "ArrowUp",
-  enter: "Enter",
-  space: " "
-};
-var TagInput = defineComponent({
-  name: "DTagInput",
-  props: tagInputProps,
-  emits: ["update:tags", "update:suggestionList", "valueChange"],
-  setup(props, ctx) {
-    const add = (arr, target) => {
-      const res = Object.assign({}, target);
-      delete res.__index;
-      return arr.concat(res);
-    };
-    const remove = (arr, targetIdx) => {
-      const newArr = arr.slice();
-      newArr.splice(targetIdx, 1);
-      return newArr;
-    };
-    const tagInputVal = ref("");
-    const onInput = ($event) => {
-      const v = $event.target.value || "";
-      tagInputVal.value = v.trim();
-    };
-    const mergedSuggestions = computed(() => {
-      let suggestions = props.suggestionList.map((item, index2) => {
-        return __spreadValues({
-          __index: index2
-        }, item);
-      });
-      if (tagInputVal.value === "") {
-        return suggestions;
-      }
-      return suggestions = props.caseSensitivity ? suggestions.filter((item) => item[props.displayProperty].indexOf(tagInputVal.value) !== -1) : suggestions.filter((item) => item[props.displayProperty].toLowerCase().indexOf(tagInputVal.value.toLowerCase()) !== -1);
-    });
-    const selectIndex = ref(0);
-    watch(mergedSuggestions, () => {
-      selectIndex.value = 0;
-    });
-    const onSelectIndexChange = (isUp = false) => {
-      if (isUp) {
-        selectIndex.value < mergedSuggestions.value.length - 1 ? selectIndex.value++ : selectIndex.value = 0;
-        return;
-      }
-      selectIndex.value > 0 ? selectIndex.value-- : selectIndex.value = mergedSuggestions.value.length - 1;
-    };
-    const tagInputRef = ref(null);
-    const isInputBoxFocus = ref(false);
-    const onInputFocus = () => {
-      isInputBoxFocus.value = true;
-    };
-    const onInputBlur = () => {
-      isInputBoxFocus.value = false;
-    };
-    const handleEnter = () => {
-      let res = {
-        [props.displayProperty]: tagInputVal.value
-      };
-      if (tagInputVal.value === "" && mergedSuggestions.value.length === 0) {
-        return false;
-      }
-      if (props.tags.findIndex((item) => item[props.displayProperty] === tagInputVal.value) > -1) {
-        tagInputVal.value = "";
-        return false;
-      }
-      if (mergedSuggestions.value.length === 0 && (tagInputVal.value.length < props.minLength || tagInputVal.value.length > props.maxLength)) {
-        tagInputVal.value = "";
-        return false;
-      }
-      if (mergedSuggestions.value.length) {
-        const target = mergedSuggestions.value[selectIndex.value];
-        res = target;
-        ctx.emit("update:suggestionList", remove(props.suggestionList, target.__index));
-      }
-      const newTags = add(props.tags, res);
-      ctx.emit("valueChange", props.tags, newTags);
-      ctx.emit("update:tags", newTags);
-      mergedSuggestions.value.length === 0 && (tagInputVal.value = "");
-    };
-    const onInputKeydown = ($event) => {
-      switch ($event.key) {
-        case KEYS_MAP.tab:
-        case KEYS_MAP.enter:
-        case KEYS_MAP.space:
-          if (!props.isAddBySpace && KEYS_MAP.space) {
-            return;
-          }
-          handleEnter();
-          break;
-        case KEYS_MAP.down:
-          onSelectIndexChange(true);
-          break;
-        case KEYS_MAP.up:
-          onSelectIndexChange();
-          break;
-      }
-    };
-    const removeTag = ($event, tagIdx) => {
-      $event.preventDefault();
-      ctx.emit("update:suggestionList", add(props.suggestionList, props.tags[tagIdx]));
-      const newTags = remove(props.tags, tagIdx);
-      ctx.emit("valueChange", props.tags, newTags);
-      ctx.emit("update:tags", newTags);
-      nextTick(() => {
-        var _a;
-        (_a = tagInputRef.value) == null ? void 0 : _a.focus();
-      });
-    };
-    const onSuggestionItemClick = ($event, itemIndex) => {
-      $event.preventDefault();
-      const target = mergedSuggestions.value[itemIndex];
-      const newTags = add(props.tags, target);
-      const newSuggestions = remove(props.suggestionList, target.__index);
-      ctx.emit("valueChange", props.tags, newTags);
-      ctx.emit("update:tags", newTags);
-      ctx.emit("update:suggestionList", newSuggestions);
-    };
-    const isTagsLimit = computed(() => props.maxTags <= props.tags.length);
-    const isShowSuggestion = computed(() => {
-      return !props.disabled && !isTagsLimit.value && isInputBoxFocus.value;
-    });
-    return {
-      tagInputRef,
-      tagInputVal,
-      isInputBoxFocus,
-      onInput,
-      onInputFocus,
-      onInputBlur,
-      removeTag,
-      onSuggestionItemClick,
-      onInputKeydown,
-      isShowSuggestion,
-      mergedSuggestions,
-      selectIndex,
-      isTagsLimit
-    };
-  },
-  render() {
-    const {
-      tagInputVal,
-      isInputBoxFocus,
-      disabled,
-      disabledText,
-      isTagsLimit,
-      maxTagsText,
-      displayProperty,
-      tags,
-      onInputKeydown,
-      onInputFocus,
-      onInputBlur,
-      onInput,
-      onSuggestionItemClick,
-      removeTag,
-      placeholder,
-      spellcheck,
-      isShowSuggestion,
-      noData,
-      mergedSuggestions,
-      selectIndex,
-      maxTags
-    } = this;
-    const inputBoxCls = {
-      "devui-tags": true,
-      "devui-form-control": true,
-      "devui-dropdown-origin": true,
-      "devui-dropdown-origin-open": isInputBoxFocus,
-      "devui-disabled": disabled
-    };
-    const tagInputCls = {
-      input: true,
-      "devui-input": true,
-      "invalid-tag": false
-    };
-    const tagInputStyle = [`display:${disabled ? "none" : "block"};`];
-    const noDataTpl = createVNode("li", {
-      "class": "devui-suggestion-item devui-disabled"
-    }, [noData]);
-    return createVNode("div", {
-      "class": "devui-tags-host",
-      "tabindex": "-1"
-    }, [createVNode("div", {
-      "class": inputBoxCls,
-      "style": ["box-shadow: none;"]
-    }, [createVNode("ul", {
-      "class": "devui-tag-list",
-      "title": disabled ? disabledText : ""
-    }, [tags.map((tag, tagIdx) => {
-      return createVNode("li", {
-        "class": "devui-tag-item"
-      }, [createVNode("span", null, [tag[displayProperty]]), !disabled && createVNode("a", {
-        "class": "remove-button",
-        "onMousedown": ($event) => removeTag($event, tagIdx)
-      }, [removeBtnSvg])]);
-    })]), createVNode("input", {
-      "type": "text",
-      "ref": "tagInputRef",
-      "value": tagInputVal,
-      "class": tagInputCls,
-      "style": tagInputStyle,
-      "onKeydown": onInputKeydown,
-      "onFocus": onInputFocus,
-      "onBlur": onInputBlur,
-      "onInput": ($event) => onInput($event),
-      "placeholder": isTagsLimit ? `${maxTagsText} ${maxTags}` : placeholder,
-      "spellcheck": spellcheck,
-      "disabled": isTagsLimit
-    }, null)]), !isShowSuggestion ? "" : createVNode("div", {
-      "class": "devui-tags-autocomplete devui-dropdown-menu"
-    }, [createVNode("ul", {
-      "class": "devui-suggestion-list"
-    }, [mergedSuggestions.length === 0 ? noDataTpl : mergedSuggestions.map((item, index2) => {
-      return createVNode("li", {
-        "class": {
-          "devui-suggestion-item": true,
-          selected: index2 === selectIndex
-        },
-        "onMousedown": ($event) => {
-          onSuggestionItemClick($event, index2);
-        }
-      }, [item[displayProperty]]);
-    })])])]);
-  }
-});
-TagInput.install = function(app) {
-  app.component(TagInput.name, TagInput);
-};
-var index = {
-  title: "TagInput \u6807\u7B7E\u8F93\u5165\u6846",
-  category: "\u6570\u636E\u5F55\u5165",
-  status: "100%",
-  install(app) {
-    app.use(TagInput);
-  }
-};
-export { TagInput, index as default };

package/tag-input/index.umd.js

@@ -1 +0,0 @@
-var K=Object.defineProperty;var A=Object.getOwnPropertySymbols;var O=Object.prototype.hasOwnProperty,R=Object.prototype.propertyIsEnumerable;var E=(u,e,o)=>e in u?K(u,e,{enumerable:!0,configurable:!0,writable:!0,value:o}):u[e]=o,P=(u,e)=>{for(var o in e||(e={}))O.call(e,o)&&E(u,o,e[o]);if(A)for(var o of A(e))R.call(e,o)&&E(u,o,e[o]);return u};(function(u,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(u=typeof globalThis!="undefined"?globalThis:u||self,e(u.index={},u.Vue))})(this,function(u,e){"use strict";var o=e.createVNode("svg",e.mergeProps({width:"12px",height:"12px",viewBox:"0 0 12 12",version:"1.1",xmlns:"http://www.w3.org/2000/svg"},{"xmlns:xlink":"http://www.w3.org/1999/xlink"}),[e.createVNode("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[e.createVNode("path",{d:"M8.86785321,3.13214679 C9.02624037,3.29053395 9.02624037,3.54733027 8.86785321,3.70571743 L6.573,6 L8.86785321,8.29428257 C9.02624037,8.45266973 9.02624037,8.70946605 8.86785321,8.86785321 C8.70946605,9.02624037 8.45266973,9.02624037 8.29428257,8.86785321 L6,6.573 L3.70571743,8.86785321 C3.54733027,9.02624037 3.29053395,9.02624037 3.13214679,8.86785321 C2.97375963,8.70946605 2.97375963,8.45266973 3.13214679,8.29428257 L5.427,6 L3.13214679,3.70571743 C2.97375963,3.54733027 2.97375963,3.29053395 3.13214679,3.13214679 C3.29053395,2.97375963 3.54733027,2.97375963 3.70571743,3.13214679 L6,5.427 L8.29428257,3.13214679 C8.45266973,2.97375963 8.70946605,2.97375963 8.86785321,3.13214679 Z","fill-rule":"nonzero"},null)])]),j="";const F={tags:{type:Array,default:()=>[]},displayProperty:{type:String,default:"name"},placeholder:{type:String,default:""},minLength:{type:Number,default:3},maxLength:{type:Number,default:Number.MAX_SAFE_INTEGER},maxTags:{type:Number,default:Number.MAX_SAFE_INTEGER},maxTagsText:{type:String,default:"\u5DF2\u8FBE\u5230\u6700\u5927\u4E2A\u6570\uFF1A"},spellcheck:{type:Boolean,default:!0},suggestionList:{type:Array,default:()=>[]},disabled:{type:Boolean,default:!1},isAddBySpace:{type:Boolean,default:!0},disabledText:{type:String,default:""},noData:{type:String,default:""},caseSensitivity:{type:Boolean,default:!1}},p={tab:"Tab",down:"ArrowDown",up:"ArrowUp",enter:"Enter",space:" "};var m=e.defineComponent({name:"DTagInput",props:F,emits:["update:tags","update:suggestionList","valueChange"],setup(t,d){const g=(n,a)=>{const s=Object.assign({},a);return delete s.__index,n.concat(s)},v=(n,a)=>{const s=n.slice();return s.splice(a,1),s},l=e.ref(""),b=n=>{const a=n.target.value||"";l.value=a.trim()},i=e.computed(()=>{let n=t.suggestionList.map((a,s)=>P({__index:s},a));return l.value===""?n:n=t.caseSensitivity?n.filter(a=>a[t.displayProperty].indexOf(l.value)!==-1):n.filter(a=>a[t.displayProperty].toLowerCase().indexOf(l.value.toLowerCase())!==-1)}),r=e.ref(0);e.watch(i,()=>{r.value=0});const h=(n=!1)=>{if(n){r.value<i.value.length-1?r.value++:r.value=0;return}r.value>0?r.value--:r.value=i.value.length-1},w=e.ref(null),f=e.ref(!1),S=()=>{f.value=!0},L=()=>{f.value=!1},N=()=>{let n={[t.displayProperty]:l.value};if(l.value===""&&i.value.length===0)return!1;if(t.tags.findIndex(s=>s[t.displayProperty]===l.value)>-1||i.value.length===0&&(l.value.length<t.minLength||l.value.length>t.maxLength))return l.value="",!1;if(i.value.length){const s=i.value[r.value];n=s,d.emit("update:suggestionList",v(t.suggestionList,s.__index))}const a=g(t.tags,n);d.emit("valueChange",t.tags,a),d.emit("update:tags",a),i.value.length===0&&(l.value="")},C=n=>{switch(n.key){case p.tab:case p.enter:case p.space:if(!t.isAddBySpace&&p.space)return;N();break;case p.down:h(!0);break;case p.up:h();break}},V=(n,a)=>{n.preventDefault(),d.emit("update:suggestionList",g(t.suggestionList,t.tags[a]));const s=v(t.tags,a);d.emit("valueChange",t.tags,s),d.emit("update:tags",s),e.nextTick(()=>{var c;(c=w.value)==null||c.focus()})},k=(n,a)=>{n.preventDefault();const s=i.value[a],c=g(t.tags,s),B=v(t.suggestionList,s.__index);d.emit("valueChange",t.tags,c),d.emit("update:tags",c),d.emit("update:suggestionList",B)},I=e.computed(()=>t.maxTags<=t.tags.length),T=e.computed(()=>!t.disabled&&!I.value&&f.value);return{tagInputRef:w,tagInputVal:l,isInputBoxFocus:f,onInput:b,onInputFocus:S,onInputBlur:L,removeTag:V,onSuggestionItemClick:k,onInputKeydown:C,isShowSuggestion:T,mergedSuggestions:i,selectIndex:r,isTagsLimit:I}},render(){const{tagInputVal:t,isInputBoxFocus:d,disabled:g,disabledText:v,isTagsLimit:l,maxTagsText:b,displayProperty:i,tags:r,onInputKeydown:h,onInputFocus:w,onInputBlur:f,onInput:S,onSuggestionItemClick:L,removeTag:N,placeholder:C,spellcheck:V,isShowSuggestion:k,noData:I,mergedSuggestions:T,selectIndex:n,maxTags:a}=this,s={"devui-tags":!0,"devui-form-control":!0,"devui-dropdown-origin":!0,"devui-dropdown-origin-open":d,"devui-disabled":g},c={input:!0,"devui-input":!0,"invalid-tag":!1},B=[`display:${g?"none":"block"};`],D=e.createVNode("li",{class:"devui-suggestion-item devui-disabled"},[I]);return e.createVNode("div",{class:"devui-tags-host",tabindex:"-1"},[e.createVNode("div",{class:s,style:["box-shadow: none;"]},[e.createVNode("ul",{class:"devui-tag-list",title:g?v:""},[r.map((y,x)=>e.createVNode("li",{class:"devui-tag-item"},[e.createVNode("span",null,[y[i]]),!g&&e.createVNode("a",{class:"remove-button",onMousedown:_=>N(_,x)},[o])]))]),e.createVNode("input",{type:"text",ref:"tagInputRef",value:t,class:c,style:B,onKeydown:h,onFocus:w,onBlur:f,onInput:y=>S(y),placeholder:l?`${b} ${a}`:C,spellcheck:V,disabled:l},null)]),k?e.createVNode("div",{class:"devui-tags-autocomplete devui-dropdown-menu"},[e.createVNode("ul",{class:"devui-suggestion-list"},[T.length===0?D:T.map((y,x)=>e.createVNode("li",{class:{"devui-suggestion-item":!0,selected:x===n},onMousedown:_=>{L(_,x)}},[y[i]]))])]):""])}});m.install=function(t){t.component(m.name,m)};var M={title:"TagInput \u6807\u7B7E\u8F93\u5165\u6846",category:"\u6570\u636E\u5F55\u5165",status:"100%",install(t){t.use(m)}};u.TagInput=m,u.default=M,Object.defineProperty(u,"__esModule",{value:!0}),u[Symbol.toStringTag]="Module"});

package/tag-input/style.css

@@ -1 +0,0 @@
-:host{display:block;outline:none}.devui-tags-host{position:relative;height:100%;outline:none}.devui-tags-host:active{outline:0}.devui-form-control.devui-tags{-moz-appearance:textfield;-webkit-appearance:textfield;padding:2px 4px;overflow:hidden;word-wrap:break-word;cursor:text;background-color:var(--devui-base-bg, #ffffff);border:1px solid var(--devui-line, #adb0b8);border-radius:var(--devui-border-radius, 2px);height:100%;transition:border-color .3s cubic-bezier(.645,.045,.355,1)}.devui-form-control.devui-tags:hover{border-color:var(--devui-list-item-hover-bg, #f2f5fc)}.devui-form-control.devui-tags.focused{outline:0}.devui-form-control.devui-tags.devui-dropdown-origin:focus-within{border-color:var(--devui-brand, #5e7ce0)}.devui-form-control.devui-tags .devui-tag-list{margin:0;padding:0;list-style-type:none}.devui-form-control.devui-tags .devui-tag-item{margin:1px;padding:0 10px;display:inline-block;min-height:18px;line-height:18px;border-radius:var(--devui-border-radius, 2px);color:var(--devui-text, #252b3a);background-color:var(--devui-label-bg, #eef0f5);position:relative;border:1px solid var(--devui-label-bg, #eef0f5)}.devui-form-control.devui-tags .devui-tag-item span{line-height:1.5;margin-right:25px}.devui-form-control.devui-tags .devui-tag-item .remove-button{margin:0 0 0 12px;padding:0;border:none;vertical-align:top;font-size:var(--devui-font-size-page-title, 16px);border-radius:50%;background-color:var(--devui-line, #adb0b8);width:12px;height:12px;display:inline-block;line-height:12px;text-align:center;transform:translateY(-50%);position:absolute;top:50%;right:10px}.devui-form-control.devui-tags .devui-tag-item .remove-button svg path{fill:var(--devui-light-text, #ffffff)}.devui-form-control.devui-tags .devui-tag-item .remove-button:hover{text-decoration:none}.devui-form-control.devui-tags:not(.devui-disabled) .devui-tag-item{cursor:pointer}.devui-form-control.devui-tags:not(.devui-disabled) .devui-tag-item span:hover{color:var(--devui-list-item-hover-text, #526ecc)}.devui-form-control.devui-tags:not(.devui-disabled) .devui-tag-item .remove-button:hover{background-color:var(--devui-list-item-hover-text, #526ecc)}.devui-form-control.devui-tags.devui-disabled{border-color:var(--devui-disabled-line, #dfe1e6);background-color:var(--devui-disabled-bg, #f5f5f6);cursor:not-allowed}.devui-form-control.devui-tags.devui-disabled .devui-tag-item{color:var(--devui-disabled-text, #adb0b8);background-color:var(--devui-disabled-bg, #f5f5f6);border-color:var(--devui-disabled-line, #dfe1e6)}.devui-form-control.devui-tags.devui-disabled .devui-tag-item span{margin-right:0}.devui-form-control.devui-tags.devui-disabled .devui-tag-item .remove-button{background-color:var(--devui-disabled-line, #dfe1e6)}.devui-form-control.devui-tags.devui-disabled .devui-tag-item .remove-button svg path{fill:var(--devui-light-text, #ffffff)}.devui-form-control.devui-tags.devui-disabled .devui-tag-list{min-height:22px}.devui-form-control.devui-tags input.devui-input{border:0;outline:0;float:left;width:100%;height:22px;font-size:var(--devui-font-size, 12px);padding-left:5px}.devui-form-control.devui-tags input.devui-input::-ms-clear{display:none}.devui-tags-autocomplete{position:absolute;padding-bottom:5px;z-index:var(--devui-z-index-dropdown, 1052);width:100%;background-color:var(--devui-connected-overlay-bg, #ffffff);box-shadow:var(--devui-shadow-connected-overlay, 0 2px 8px 0) var(--devui-shadow, rgba(0, 0, 0, .2))}.devui-tags-autocomplete.devui-dropdown-menu{display:block;margin:4px 0}.devui-tags-autocomplete .devui-suggestion-list{margin:0;padding:0;list-style-type:none;max-height:280px;overflow-y:auto;position:relative}.devui-tags-autocomplete .devui-suggestion-list .devui-suggestion-item{padding:5px 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:var(--devui-font-size, 12px);line-height:20px}.devui-tags-autocomplete .devui-suggestion-list .devui-suggestion-item:not(.devui-disabled){cursor:pointer;color:var(--devui-text, #252b3a)}.devui-tags-autocomplete .devui-suggestion-list .devui-suggestion-item:not(.devui-disabled):hover{background-color:var(--devui-list-item-hover-bg, #f2f5fc)}.devui-tags-autocomplete .devui-suggestion-list .devui-suggestion-item:not(.devui-disabled).selected{color:var(--devui-brand, #5e7ce0);background-color:var(--devui-list-item-hover-bg, #f2f5fc)}.devui-tags-autocomplete .devui-suggestion-list .devui-suggestion-item{transition:color var(--devui-animation-duration-fast, .1s) var(--devui-animation-ease-in-smooth, cubic-bezier(.645, .045, .355, 1)),background-color var(--devui-animation-duration-fast, .1s) var(--devui-animation-ease-in-smooth, cubic-bezier(.645, .045, .355, 1))}