@para-ui/core 2.2.4 → 2.2.5-beta

package/Tag/index.js

@@ -1,14 +1,286 @@
-!function(e,r){"object"==typeof exports&&"object"==typeof module?module.exports=r(require("react"),require("@para-ui/icons/Close"),require("clsx"),require("@para-ui/icons/Plus")):"function"==typeof define&&define.amd?define(["react","@para-ui/icons/Close","clsx","@para-ui/icons/Plus"],r):"object"==typeof exports?exports.ParaUI=r(require("react"),require("@para-ui/icons/Close"),require("clsx"),require("@para-ui/icons/Plus")):e.ParaUI=r(e.react,e["@para-ui/icons/Close"],e.clsx,e["@para-ui/icons/Plus"])}(self,(function(e,r,t,n){return function(){var a={5243:function(e,r,t){(r=t(3645)(!1)).push([e.id,".paraui-tag{display:inline-flex;justify-content:center;align-items:center;height:24px;margin-right:8px;padding:0 12px;font-size:12px;color:#2e3743;white-space:nowrap;background:rgba(171,176,185,.2);border-radius:4px}.paraui-tag-bordered{border:1px solid rgba(171,176,185,.2);line-height:22px}.paraui-tag-small{line-height:24px}.paraui-tag-small.paraui-tag-bordered{line-height:22px}.paraui-tag-large{line-height:28px}.paraui-tag-large.paraui-tag-bordered{line-height:26px}.paraui-tag .paraui-tag-close-icon{margin-left:4px;color:inherit;font-size:16px;cursor:pointer}.paraui-tag-close-icon:hover{color:inherit}.paraui-tag>.paraui-icon{vertical-align:-4px;color:inherit;font-size:16px}.paraui-tag>.paraui-icon+span{margin-left:4px}.paraui-tag-has-color,.paraui-tag-has-color .paraui-icon,.paraui-tag-has-color .paraui-icon:hover{color:inherit}.paraui-tag-blue{color:#3666d6;background-color:rgba(54,102,214,.05)}.paraui-tag-green{color:#53c31b;background-color:rgba(83,195,27,.05)}.paraui-tag-yellow{color:#ffa150;background-color:rgba(255,161,80,.05)}.paraui-tag-red{color:#eb6054;background-color:rgba(235,96,84,.05)}.paraui-tag-checkable{background-color:rgba(0,0,0,0);border-color:rgba(0,0,0,0);cursor:pointer}.paraui-tag-checkable:not(.paraui-tag-checkable-checked):hover{color:#1890ff}.paraui-tag-checkable:active,.paraui-tag .ant-tag-checkable-checked{color:#fff}.paraui-tag-checkable-checked{background-color:#1890ff}.paraui-tag-checkable:active{background-color:#096dd9}.paraui-tag-hidden{display:none}.paraui-tag-group{display:flex;align-items:center;flex-flow:row wrap}.paraui-tag-group-input{width:78px;height:24px;font-size:12px;color:#2e3743;text-indent:8px;border:1px solid rgba(171,176,185,.4);border-radius:4px}.paraui-tag-group-input-large{height:28px}.paraui-tag-group-new-icon{padding:0 5px}",""]),e.exports=r},3645:function(e){"use strict";e.exports=function(e){var r=[];return r.toString=function(){return this.map((function(r){var t=function(e,r){var t=e[1]||"",n=e[3];if(!n)return t;if(r&&"function"==typeof btoa){var a=(i=n,c=btoa(unescape(encodeURIComponent(JSON.stringify(i)))),u="sourceMappingURL=data:application/json;charset=utf-8;base64,".concat(c),"/*# ".concat(u," */")),o=n.sources.map((function(e){return"/*# sourceURL=".concat(n.sourceRoot||"").concat(e," */")}));return[t].concat(o).concat([a]).join("\n")}var i,c,u;return[t].join("\n")}(r,e);return r[2]?"@media ".concat(r[2]," {").concat(t,"}"):t})).join("")},r.i=function(e,t,n){"string"==typeof e&&(e=[[null,e,""]]);var a={};if(n)for(var o=0;o<this.length;o++){var i=this[o][0];null!=i&&(a[i]=!0)}for(var c=0;c<e.length;c++){var u=[].concat(e[c]);n&&a[u[0]]||(t&&(u[2]?u[2]="".concat(t," and ").concat(u[2]):u[2]=t),r.push(u))}},r}},7418:function(e){"use strict";
-/*
-object-assign
-(c) Sindre Sorhus
-@license MIT
-*/var r=Object.getOwnPropertySymbols,t=Object.prototype.hasOwnProperty,n=Object.prototype.propertyIsEnumerable;function a(e){if(null==e)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}e.exports=function(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de","5"===Object.getOwnPropertyNames(e)[0])return!1;for(var r={},t=0;t<10;t++)r["_"+String.fromCharCode(t)]=t;if("0123456789"!==Object.getOwnPropertyNames(r).map((function(e){return r[e]})).join(""))return!1;var n={};return"abcdefghijklmnopqrst".split("").forEach((function(e){n[e]=e})),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},n)).join("")}catch(e){return!1}}()?Object.assign:function(e,o){for(var i,c,u=a(e),l=1;l<arguments.length;l++){for(var s in i=Object(arguments[l]))t.call(i,s)&&(u[s]=i[s]);if(r){c=r(i);for(var p=0;p<c.length;p++)n.call(i,c[p])&&(u[c[p]]=i[c[p]])}}return u}},5251:function(e,r,t){"use strict";
-/** @license React v17.0.2
- * react-jsx-runtime.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */t(7418);var n=t(8156),a=60103;if(r.Fragment=60107,"function"==typeof Symbol&&Symbol.for){var o=Symbol.for;a=o("react.element"),r.Fragment=o("react.fragment")}var i=n.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,c=Object.prototype.hasOwnProperty,u={key:!0,ref:!0,__self:!0,__source:!0};function l(e,r,t){var n,o={},l=null,s=null;for(n in void 0!==t&&(l=""+t),void 0!==r.key&&(l=""+r.key),void 0!==r.ref&&(s=r.ref),r)c.call(r,n)&&!u.hasOwnProperty(n)&&(o[n]=r[n]);if(e&&e.defaultProps)for(n in r=e.defaultProps)void 0===o[n]&&(o[n]=r[n]);return{$$typeof:a,type:e,key:l,ref:s,props:o,_owner:i.current}}r.jsx=l,r.jsxs=l},5893:function(e,r,t){"use strict";e.exports=t(5251)},32:function(e,r,t){var n=t(3379),a=t(5243);"string"==typeof(a=a.__esModule?a.default:a)&&(a=[[e.id,a,""]]);var o={insert:("body","body"),singleton:!1};n(a,o);e.exports=a.locals||{}},3379:function(e,r,t){"use strict";var n,a=function(){return void 0===n&&(n=Boolean(window&&document&&document.all&&!window.atob)),n},o=function(){var e={};return function(r){if(void 0===e[r]){var t=document.querySelector(r);if(window.HTMLIFrameElement&&t instanceof window.HTMLIFrameElement)try{t=t.contentDocument.head}catch(e){t=null}e[r]=t}return e[r]}}(),i=[];function c(e){for(var r=-1,t=0;t<i.length;t++)if(i[t].identifier===e){r=t;break}return r}function u(e,r){for(var t={},n=[],a=0;a<e.length;a++){var o=e[a],u=r.base?o[0]+r.base:o[0],l=t[u]||0,s="".concat(u," ").concat(l);t[u]=l+1;var p=c(s),f={css:o[1],media:o[2],sourceMap:o[3]};-1!==p?(i[p].references++,i[p].updater(f)):i.push({identifier:s,updater:v(f,r),references:1}),n.push(s)}return n}function l(e){var r=document.createElement("style"),n=e.attributes||{};if(void 0===n.nonce){var a=t.nc;a&&(n.nonce=a)}if(Object.keys(n).forEach((function(e){r.setAttribute(e,n[e])})),"function"==typeof e.insert)e.insert(r);else{var i=o(e.insert||"head");if(!i)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");i.appendChild(r)}return r}var s,p=(s=[],function(e,r){return s[e]=r,s.filter(Boolean).join("\n")});function f(e,r,t,n){var a=t?"":n.media?"@media ".concat(n.media," {").concat(n.css,"}"):n.css;if(e.styleSheet)e.styleSheet.cssText=p(r,a);else{var o=document.createTextNode(a),i=e.childNodes;i[r]&&e.removeChild(i[r]),i.length?e.insertBefore(o,i[r]):e.appendChild(o)}}function d(e,r,t){var n=t.css,a=t.media,o=t.sourceMap;if(a?e.setAttribute("media",a):e.removeAttribute("media"),o&&"undefined"!=typeof btoa&&(n+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(o))))," */")),e.styleSheet)e.styleSheet.cssText=n;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(n))}}var g=null,b=0;function v(e,r){var t,n,a;if(r.singleton){var o=b++;t=g||(g=l(r)),n=f.bind(null,t,o,!1),a=f.bind(null,t,o,!0)}else t=l(r),n=d.bind(null,t,r),a=function(){!function(e){if(null===e.parentNode)return!1;e.parentNode.removeChild(e)}(t)};return n(e),function(r){if(r){if(r.css===e.css&&r.media===e.media&&r.sourceMap===e.sourceMap)return;n(e=r)}else a()}}e.exports=function(e,r){(r=r||{}).singleton||"boolean"==typeof r.singleton||(r.singleton=a());var t=u(e=e||[],r);return function(e){if(e=e||[],"[object Array]"===Object.prototype.toString.call(e)){for(var n=0;n<t.length;n++){var a=c(t[n]);i[a].references--}for(var o=u(e,r),l=0;l<t.length;l++){var s=c(t[l]);0===i[s].references&&(i[s].updater(),i.splice(s,1))}t=o}}}},5927:function(e){"use strict";e.exports=r},1632:function(e){"use strict";e.exports=n},5744:function(e){"use strict";e.exports=t},8156:function(r){"use strict";r.exports=e}},o={};function i(e){var r=o[e];if(void 0!==r)return r.exports;var t=o[e]={id:e,exports:{}};return a[e](t,t.exports,i),t.exports}i.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(r,{a:r}),r},i.d=function(e,r){for(var t in r)i.o(r,t)&&!i.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:r[t]})},i.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.nc=void 0;var c={};return function(){"use strict";i.r(c),i.d(c,{Tag:function(){return v},TagGroup:function(){return f},default:function(){return h}});var e=i(5893),r=i(8156),t=i(5927),n=i.n(t),a=i(5744),o=i.n(a),u=i(1632),l=i.n(u),s=(i(32),function(){return s=Object.assign||function(e){for(var r,t=1,n=arguments.length;t<n;t++)for(var a in r=arguments[t])Object.prototype.hasOwnProperty.call(r,a)&&(e[a]=r[a]);return e},s.apply(this,arguments)}),p=function(e,r,t){if(t||2===arguments.length)for(var n,a=0,o=r.length;a<o;a++)!n&&a in r||(n||(n=Array.prototype.slice.call(r,0,a)),n[a]=r[a]);return e.concat(n||Array.prototype.slice.call(r))},f=function(t){var n=t.className,a=t.size,i=void 0===a?"small":a,c=t.style,u=t.bordered,f=void 0!==u&&u,d=t.defaultInputValue,g=t.increased,b=void 0!==g&&g,v=t.increasedTag,y=t.onChange,m=(0,r.useState)([]),x=m[0],j=m[1],O=(0,r.useState)(null!=d?d:""),w=O[0],k=O[1],C=(0,r.useState)(!1),S=C[0],P=C[1],N=(0,r.useRef)();(0,r.useEffect)((function(){if(t.data){var e=t.data;e.some((function(e){return["string","number"].includes(typeof e)}))&&(e=e.map((function(e){return{value:e,label:e}}))),j(p([],e,!0))}}),[t.data]);var _=function(e){return e.map((function(e){return e.value}))},T=function(){P(!0),setTimeout((function(){var e;null===(e=N.current)||void 0===e||e.focus()}))},E=function(e){k(e.target.value)},I=function(){var e=w.trim();""!==e&&(x.push({value:e,label:e,closable:!0}),j(p([],x,!0)),null==y||y(x,_(x))),k(null!=d?d:""),P(!1)},M=function(e){13!==e.keyCode&&13!==e.which||I()},R=function(e){return function(r){var t=x.findIndex((function(r){return r.value===e.value}));t>-1&&(x.splice(t,1),j(p([],x,!0))),e.onClose&&e.onClose(r),null==y||y(x,_(x))}};return(0,e.jsxs)("div",s({className:o()("paraui-tag-group",n),style:c},{children:[(null==x?void 0:x.length)?x.map((function(r,t){return(0,e.jsx)(h,s({},r,{size:i,bordered:f,visible:!0,onClose:R(r)},{children:r.label}),t)})):null,b&&function(){var r;if(S){var t=o()("paraui-tag-group-input",{"paraui-tag-group-input-large":"large"===i});return(0,e.jsx)("input",{type:"text",ref:N,className:t,value:w,onChange:E,onBlur:I,onKeyDown:M})}var n=(0,e.jsx)(l(),{}),a="New Tag";v&&(n=v.icon||(0,e.jsx)(l(),{}),a=null!==(r=v.text)&&void 0!==r?r:"New Tag");var c=o()("paraui-tag-group-new",{"paraui-tag-group-new-icon":!a});return(0,e.jsx)(h,s({className:c,size:i,bordered:f,icon:n,onClick:T},{children:a}))}()]}))},d=function(){return d=Object.assign||function(e){for(var r,t=1,n=arguments.length;t<n;t++)for(var a in r=arguments[t])Object.prototype.hasOwnProperty.call(r,a)&&(e[a]=r[a]);return e},d.apply(this,arguments)},g=function(e,r){var t={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&r.indexOf(n)<0&&(t[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var a=0;for(n=Object.getOwnPropertySymbols(e);a<n.length;a++)r.indexOf(n[a])<0&&Object.prototype.propertyIsEnumerable.call(e,n[a])&&(t[n[a]]=e[n[a]])}return t},b=["blue","green","yellow","red"],v=function(t){var a,i=t.className,c=t.children,u=t.icon,l=t.color,s=t.onClose,p=t.closeIcon,f=t.closable,v=void 0!==f&&f,h=t.bordered,y=void 0!==h&&h,m=t.size,x=void 0===m?"small":m,j=t.style,O=t.visible,w=g(t,["className","children","icon","color","onClose","closeIcon","closable","bordered","size","style","visible"]),k=(0,r.useState)(!0),C=k[0],S=k[1];(0,r.useEffect)((function(){"visible"in t&&S(!!O)}),[O]);var P=function(){return!!l&&b.includes(l)},N=d({color:l&&!P()?l:void 0},j),_=o()("paraui-tag",i,((a={"paraui-tag-has-color":l,"paraui-tag-hidden":!C,"paraui-tag-bordered":y,"paraui-tag-large":"large"===x})["paraui-tag-".concat(l)]=P(),a)),T=function(e){e.stopPropagation(),null==s||s(e),e.defaultPrevented||"visible"in t||S(!1)};return(0,e.jsxs)("span",d({},w,{className:_,style:N},{children:[u?(0,e.jsxs)(e.Fragment,{children:[u,c&&(0,e.jsx)("span",{children:c})]}):c,v?p?(0,e.jsx)("span",d({className:"paraui-tag-close-icon",onClick:T},{children:p})):(0,e.jsx)(n(),{className:"paraui-tag-close-icon",onClick:T}):null]}))},h=v}(),c}()}));
+import { _ as _defineProperty } from '../_verture/defineProperty-0590dc61.js';
+import { _ as _slicedToArray } from '../_verture/slicedToArray-d7722f4b.js';
+import { _ as __rest } from '../_verture/tslib.es6-55ed4bd2.js';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useState, useRef, useEffect } from 'react';
+import CloseIcon from '@para-ui/icons/Close';
+import clsx from 'clsx';
+import { _ as _toConsumableArray } from '../_verture/toConsumableArray-f8047a75.js';
+import { _ as _typeof } from '../_verture/typeof-498dd2b1.js';
+import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
+import Plus from '@para-ui/icons/Plus';
+
+var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2022/1/12 上午9:43\n* @description\n*/\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n.paraui-tag {\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  height: 24px;\n  margin-right: 8px;\n  padding: 0 12px;\n  font-size: 12px;\n  color: rgb(46, 55, 67);\n  white-space: nowrap;\n  background: rgba(171, 176, 185, 0.2);\n  border-radius: 4px;\n}\n.paraui-tag-bordered {\n  border: 1px solid rgba(171, 176, 185, 0.2);\n  line-height: 22px;\n}\n.paraui-tag-small {\n  line-height: 24px;\n}\n.paraui-tag-small.paraui-tag-bordered {\n  line-height: 22px;\n}\n.paraui-tag-large {\n  line-height: 28px;\n}\n.paraui-tag-large.paraui-tag-bordered {\n  line-height: 26px;\n}\n.paraui-tag .paraui-tag-close-icon {\n  margin-left: 4px;\n  color: inherit;\n  font-size: 16px;\n  cursor: pointer;\n}\n.paraui-tag-close-icon:hover {\n  color: inherit;\n}\n.paraui-tag > .paraui-icon {\n  vertical-align: -4px;\n  color: inherit;\n  font-size: 16px;\n}\n.paraui-tag > .paraui-icon + span {\n  margin-left: 4px;\n}\n.paraui-tag-has-color, .paraui-tag-has-color .paraui-icon, .paraui-tag-has-color .paraui-icon:hover {\n  color: inherit;\n}\n.paraui-tag-blue {\n  color: rgb(54, 102, 214);\n  background-color: rgba(54, 102, 214, 0.05);\n}\n.paraui-tag-green {\n  color: rgb(83, 195, 27);\n  background-color: rgba(83, 195, 27, 0.05);\n}\n.paraui-tag-yellow {\n  color: rgb(255, 161, 80);\n  background-color: rgba(255, 161, 80, 0.05);\n}\n.paraui-tag-red {\n  color: rgb(235, 96, 84);\n  background-color: rgba(235, 96, 84, 0.05);\n}\n.paraui-tag-checkable {\n  background-color: transparent;\n  border-color: transparent;\n  cursor: pointer;\n}\n.paraui-tag-checkable:not(.paraui-tag-checkable-checked):hover {\n  color: #1890ff;\n}\n.paraui-tag-checkable:active,\n.paraui-tag .ant-tag-checkable-checked {\n  color: #fff;\n}\n.paraui-tag-checkable-checked {\n  background-color: #1890ff;\n}\n.paraui-tag-checkable:active {\n  background-color: #096dd9;\n}\n.paraui-tag-hidden {\n  display: none;\n}\n\n.paraui-tag-group {\n  display: flex;\n  align-items: center;\n  flex-flow: row wrap;\n}\n.paraui-tag-group-input {\n  width: 78px;\n  height: 24px;\n  font-size: 12px;\n  color: rgb(46, 55, 67);\n  text-indent: 8px;\n  border: 1px solid rgba(171, 176, 185, 0.4);\n  border-radius: 4px;\n}\n.paraui-tag-group-input-large {\n  height: 28px;\n}\n.paraui-tag-group-new-icon {\n  padding: 0 5px;\n}";
+styleInject(css_248z);
+
+var TagGroup = function TagGroup(props) {
+  var className = props.className,
+      _props$size = props.size,
+      size = _props$size === void 0 ? 'small' : _props$size,
+      style = props.style,
+      _props$bordered = props.bordered,
+      bordered = _props$bordered === void 0 ? false : _props$bordered,
+      defaultInputValue = props.defaultInputValue,
+      _props$increased = props.increased,
+      increased = _props$increased === void 0 ? false : _props$increased,
+      increasedTag = props.increasedTag,
+      onChange = props.onChange;
+
+  var _useState = useState([]),
+      _useState2 = _slicedToArray(_useState, 2),
+      inData = _useState2[0],
+      setInData = _useState2[1]; //数据源
+
+
+  var _useState3 = useState(defaultInputValue !== null && defaultInputValue !== void 0 ? defaultInputValue : ''),
+      _useState4 = _slicedToArray(_useState3, 2),
+      inputValue = _useState4[0],
+      setInputValue = _useState4[1]; //input value
+
+
+  var _useState5 = useState(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      inputVisible = _useState6[0],
+      setInputVisible = _useState6[1]; //input visible
+
+
+  var inputRef = useRef(); //input ref
+
+  useEffect(function () {
+    if (props.data) {
+      var tArr = props.data; //Item[]
+
+      var unObjType = tArr.some(function (v) {
+        return ['string', 'number'].includes(_typeof(v));
+      });
+
+      if (unObjType) {
+        tArr = tArr.map(function (_) {
+          return {
+            value: _,
+            label: _
+          };
+        });
+      }
+
+      setInData(_toConsumableArray(tArr));
+    }
+  }, [props.data]); //tag value
+
+  var getTagGroupVal = function getTagGroupVal(data) {
+    return data.map(function (_) {
+      return _.value;
+    });
+  }; //show input
+
+
+  var showInput = function showInput() {
+    setInputVisible(true);
+    setTimeout(function () {
+      var _a;
+
+      (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    });
+  }; //input change
+
+
+  var handleInputChange = function handleInputChange(e) {
+    setInputValue(e.target.value);
+  }; //input confirm
+
+
+  var handleInputConfirm = function handleInputConfirm() {
+    var val = inputValue.trim();
+
+    if (val !== '') {
+      inData.push({
+        value: val,
+        label: val,
+        closable: true
+      });
+      setInData(_toConsumableArray(inData));
+      onChange === null || onChange === void 0 ? void 0 : onChange(inData, getTagGroupVal(inData));
+    }
+
+    setInputValue(defaultInputValue !== null && defaultInputValue !== void 0 ? defaultInputValue : '');
+    setInputVisible(false);
+  }; //input enter
+
+
+  var handleInputEnter = function handleInputEnter(e) {
+    if (e.keyCode === 13 || e.which === 13) {
+      handleInputConfirm();
+    }
+  }; //handle close
+
+
+  var handleClose = function handleClose(item) {
+    return function (e) {
+      var idx = inData.findIndex(function (_) {
+        return _.value === item.value;
+      });
+
+      if (idx > -1) {
+        inData.splice(idx, 1);
+        setInData(_toConsumableArray(inData));
+      }
+
+      if (item.onClose) item.onClose(e);
+      onChange === null || onChange === void 0 ? void 0 : onChange(inData, getTagGroupVal(inData));
+    };
+  }; //渲染Tag组
+
+
+  var renderTagGroup = function renderTagGroup() {
+    if (!(inData === null || inData === void 0 ? void 0 : inData.length)) return null;
+    return inData.map(function (item, idx) {
+      return jsx(Tag, Object.assign({}, item, {
+        size: size,
+        bordered: bordered,
+        visible: true,
+        onClose: handleClose(item)
+      }, {
+        children: item.label
+      }), idx);
+    });
+  }; //动态增加tag
+
+
+  var renderNewInput = function renderNewInput() {
+    var _a;
+
+    if (inputVisible) {
+      var inputCls = clsx('paraui-tag-group-input', {
+        'paraui-tag-group-input-large': size === 'large'
+      });
+      return jsx("input", {
+        type: "text",
+        ref: inputRef,
+        className: inputCls,
+        value: inputValue,
+        onChange: handleInputChange,
+        onBlur: handleInputConfirm,
+        onKeyDown: handleInputEnter
+      });
+    }
+
+    var icon = jsx(Plus, {});
+
+    var text = 'New Tag';
+
+    if (increasedTag) {
+      icon = increasedTag.icon || jsx(Plus, {});
+      text = (_a = increasedTag.text) !== null && _a !== void 0 ? _a : 'New Tag';
+    }
+
+    var newCls = clsx('paraui-tag-group-new', {
+      'paraui-tag-group-new-icon': !text
+    });
+    return jsx(Tag, Object.assign({
+      className: newCls,
+      size: size,
+      bordered: bordered,
+      icon: icon,
+      onClick: showInput
+    }, {
+      children: text
+    }));
+  };
+
+  return jsxs("div", Object.assign({
+    className: clsx('paraui-tag-group', className),
+    style: style
+  }, {
+    children: [renderTagGroup(), increased && renderNewInput()]
+  }));
+};
+
+var PresetColors = ['blue', 'green', 'yellow', 'red']; //tag
+
+var InternalTag = function InternalTag(props) {
+  var className = props.className,
+      children = props.children,
+      icon = props.icon,
+      color = props.color,
+      onClose = props.onClose,
+      closeIcon = props.closeIcon,
+      _props$closable = props.closable,
+      closable = _props$closable === void 0 ? false : _props$closable,
+      _props$bordered = props.bordered,
+      bordered = _props$bordered === void 0 ? false : _props$bordered,
+      _props$size = props.size,
+      size = _props$size === void 0 ? 'small' : _props$size,
+      style = props.style,
+      visibleTag = props.visible,
+      restProps = __rest(props, ["className", "children", "icon", "color", "onClose", "closeIcon", "closable", "bordered", "size", "style", "visible"]);
+
+  var _useState = useState(true),
+      _useState2 = _slicedToArray(_useState, 2),
+      visible = _useState2[0],
+      setVisible = _useState2[1]; //显示tag
+
+
+  useEffect(function () {
+    if ('visible' in props) {
+      setVisible(!!visibleTag);
+    }
+  }, [visibleTag]); //是否预设颜色
+
+  var isPresetColor = function isPresetColor() {
+    if (!color) return false;
+    return PresetColors.includes(color);
+  }; //tag style
+
+
+  var tagStyle = Object.assign({
+    color: color && !isPresetColor() ? color : undefined
+  }, style); //tag cls
+
+  var tagClassName = clsx('paraui-tag', className, _defineProperty({
+    'paraui-tag-has-color': color,
+    'paraui-tag-hidden': !visible,
+    'paraui-tag-bordered': bordered,
+    'paraui-tag-large': size === 'large'
+  }, "paraui-tag-".concat(color), isPresetColor())); //tag close click
+
+  var handleCloseClick = function handleCloseClick(e) {
+    e.stopPropagation();
+    onClose === null || onClose === void 0 ? void 0 : onClose(e);
+
+    if (e.defaultPrevented) {
+      return;
+    }
+
+    if (!('visible' in props)) {
+      setVisible(false);
+    }
+  }; //渲染close icon
+
+
+  var renderCloseIcon = function renderCloseIcon() {
+    if (!closable) return null;
+    return closeIcon ? jsx("span", Object.assign({
+      className: 'paraui-tag-close-icon',
+      onClick: handleCloseClick
+    }, {
+      children: closeIcon
+    })) : jsx(CloseIcon, {
+      className: 'paraui-tag-close-icon',
+      onClick: handleCloseClick
+    });
+  };
+
+  return jsxs("span", Object.assign({}, restProps, {
+    className: tagClassName,
+    style: tagStyle
+  }, {
+    children: [icon ? jsxs(Fragment, {
+      children: [icon, children && jsx("span", {
+        children: children
+      })]
+    }) : children, renderCloseIcon()]
+  }));
+};
+var Tag = InternalTag;
+
+export { Tag, TagGroup, Tag as default };

package/Test/index.d.ts

@@ -1,2 +1,3 @@
-export declare const Test: () => JSX.Element;
-export default Test;
+declare const Test: () => JSX.Element;
+
+export { Test, Test as default };

package/Test/index.js

@@ -1,16 +1,9 @@
-!function(e,r){"object"==typeof exports&&"object"==typeof module?module.exports=r(require("react")):"function"==typeof define&&define.amd?define(["react"],r):"object"==typeof exports?exports.ParaUI=r(require("react")):e.ParaUI=r(e.react)}(self,(function(e){return function(){"use strict";var r={7418:function(e){
-/*
-object-assign
-(c) Sindre Sorhus
-@license MIT
-*/
-var r=Object.getOwnPropertySymbols,t=Object.prototype.hasOwnProperty,n=Object.prototype.propertyIsEnumerable;function o(e){if(null==e)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}e.exports=function(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de","5"===Object.getOwnPropertyNames(e)[0])return!1;for(var r={},t=0;t<10;t++)r["_"+String.fromCharCode(t)]=t;if("0123456789"!==Object.getOwnPropertyNames(r).map((function(e){return r[e]})).join(""))return!1;var n={};return"abcdefghijklmnopqrst".split("").forEach((function(e){n[e]=e})),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},n)).join("")}catch(e){return!1}}()?Object.assign:function(e,f){for(var i,c,a=o(e),u=1;u<arguments.length;u++){for(var p in i=Object(arguments[u]))t.call(i,p)&&(a[p]=i[p]);if(r){c=r(i);for(var l=0;l<c.length;l++)n.call(i,c[l])&&(a[c[l]]=i[c[l]])}}return a}},5251:function(e,r,t){
-/** @license React v17.0.2
- * react-jsx-runtime.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-t(7418);var n=t(8156),o=60103;if(60107,"function"==typeof Symbol&&Symbol.for){var f=Symbol.for;o=f("react.element"),f("react.fragment")}var i=n.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,c=Object.prototype.hasOwnProperty,a={key:!0,ref:!0,__self:!0,__source:!0};function u(e,r,t){var n,f={},u=null,p=null;for(n in void 0!==t&&(u=""+t),void 0!==r.key&&(u=""+r.key),void 0!==r.ref&&(p=r.ref),r)c.call(r,n)&&!a.hasOwnProperty(n)&&(f[n]=r[n]);if(e&&e.defaultProps)for(n in r=e.defaultProps)void 0===f[n]&&(f[n]=r[n]);return{$$typeof:o,type:e,key:u,ref:p,props:f,_owner:i.current}}r.jsx=u},5893:function(e,r,t){e.exports=t(5251)},8156:function(r){r.exports=e}},t={};function n(e){var o=t[e];if(void 0!==o)return o.exports;var f=t[e]={exports:{}};return r[e](f,f.exports,n),f.exports}n.d=function(e,r){for(var t in r)n.o(r,t)&&!n.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:r[t]})},n.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var o={};return function(){n.r(o),n.d(o,{Test:function(){return r}});var e=n(5893),r=function(){return(0,e.jsx)("div",{children:"123"})};o.default=r}(),o}()}));
+import { jsx } from 'react/jsx-runtime';
+
+var Test = function Test() {
+  return jsx("div", {
+    children: "123"
+  });
+};
+
+export { Test, Test as default };

package/TextField/index.d.ts

@@ -1,16 +1,21 @@
+import React__default, { ReactNode, FunctionComponent } from 'react';
+import { LabelTooltipProps } from '../Label/index.js';
+import styleInject from './node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n.paraui-text-field {\n  font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif;\n  font-size: 14px;\n  font-weight: 400;\n  display: inline-block;\n  width: 100%;\n}\n.paraui-text-field > .text-field-content {\n  border: 1px solid;\n  border-radius: 4px;\n  border-color: rgba(171, 176, 185, 0.4);\n  display: flex;\n  width: 100%;\n  position: relative;\n  background-color: rgb(255, 255, 255);\n}\n.paraui-text-field > .text-field-content:hover {\n  border-color: rgb(54, 102, 214);\n}\n.paraui-text-field > .text-field-content > .text-field-content-before {\n  color: rgb(46, 55, 67);\n  padding: 0 12px;\n  border-right: 1px solid rgba(171, 176, 185, 0.4);\n  background-color: rgba(171, 176, 185, 0.12);\n  border-bottom-left-radius: 4px;\n  border-top-left-radius: 4px;\n  white-space: nowrap;\n  display: flex;\n  align-items: center;\n}\n.paraui-text-field > .text-field-content > .text-field-content-before svg {\n  font-size: 20px;\n}\n.paraui-text-field > .text-field-content > .text-field-content-within {\n  position: relative;\n  display: flex;\n  flex-grow: 1;\n}\n.paraui-text-field > .text-field-content > .text-field-content-within > .clean-up-icon {\n  display: flex;\n  height: 100%;\n  align-items: center;\n  margin-right: 12px;\n  cursor: pointer;\n}\n.paraui-text-field > .text-field-content > .text-field-content-within > .clean-up-icon svg {\n  color: rgba(46, 55, 67, 0.7);\n  font-size: 16px;\n}\n.paraui-text-field > .text-field-content > .text-field-content-within > .clean-up-icon:hover svg {\n  color: rgba(54, 102, 214, 0.8);\n}\n.paraui-text-field > .text-field-content > .text-field-content-within > .right-icon {\n  display: flex;\n  height: 100%;\n  align-items: center;\n  margin-right: 12px;\n  cursor: pointer;\n  color: rgba(46, 55, 67, 0.7);\n  position: relative;\n  z-index: 1;\n}\n.paraui-text-field > .text-field-content > .text-field-content-within > .right-icon.right-icon-password:hover svg {\n  color: rgba(54, 102, 214, 0.8);\n}\n.paraui-text-field > .text-field-content > .text-field-content-within > .right-icon svg {\n  color: rgba(46, 55, 67, 0.7);\n  font-size: 20px;\n}\n.paraui-text-field > .text-field-content > .text-field-content-within > .length-limit {\n  display: flex;\n  height: 100%;\n  align-items: center;\n  margin-right: 12px;\n  color: rgba(46, 55, 67, 0.7);\n}\n.paraui-text-field > .text-field-content > .text-field-content-within > .text-field-content-within-input {\n  width: 100%;\n  line-height: 0;\n  position: relative;\n}\n.paraui-text-field > .text-field-content > .text-field-content-within > .text-field-content-within-input input::-webkit-outer-spin-button,\n.paraui-text-field > .text-field-content > .text-field-content-within > .text-field-content-within-input input::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n}\n.paraui-text-field > .text-field-content > .text-field-content-within > .text-field-content-within-input input[type=number] {\n  -moz-appearance: textfield;\n}\n.paraui-text-field > .text-field-content > .text-field-content-within > .text-field-content-within-input > input {\n  width: 100%;\n  height: 100%;\n}\n.paraui-text-field > .text-field-content > .text-field-content-within > .text-field-content-within-input > textarea {\n  width: 100% !important;\n  padding: 12px;\n  resize: none;\n}\n.paraui-text-field > .text-field-content > .text-field-content-within > .text-field-content-within-input > input, .paraui-text-field > .text-field-content > .text-field-content-within > .text-field-content-within-input > textarea {\n  font-size: 14px;\n  color: rgb(46, 55, 67);\n  border: 0;\n  border-radius: 4px;\n  background: transparent;\n}\n.paraui-text-field > .text-field-content > .text-field-content-within > .text-field-content-within-input > input::-ms-clear, .paraui-text-field > .text-field-content > .text-field-content-within > .text-field-content-within-input > textarea::-ms-clear {\n  display: none;\n}\n.paraui-text-field > .text-field-content > .text-field-content-within > .text-field-content-within-input > input::-ms-reveal, .paraui-text-field > .text-field-content > .text-field-content-within > .text-field-content-within-input > textarea::-ms-reveal {\n  display: none;\n}\n.paraui-text-field > .text-field-content > .text-field-content-within > .text-field-content-within-input > input:disabled, .paraui-text-field > .text-field-content > .text-field-content-within > .text-field-content-within-input > textarea:disabled {\n  background-color: transparent;\n}\n.paraui-text-field > .text-field-content > .text-field-content-within > .text-field-content-within-input > .text-field-label-placeholder {\n  width: 100%;\n  position: absolute;\n  left: 0;\n  top: 0;\n  height: 100%;\n  padding: 0 12px;\n  color: rgba(46, 55, 67, 0.4);\n  cursor: text;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.paraui-text-field > .text-field-content > .text-field-content-within > .text-field-content-within-input > .text-field-label-placeholder > .text-field-required {\n  margin-left: 2px;\n  color: rgb(235, 96, 84);\n}\n.paraui-text-field > .text-field-content > .text-field-content-after {\n  color: rgb(46, 55, 67);\n  padding: 0 12px;\n  border-left: 1px solid rgba(171, 176, 185, 0.4);\n  background-color: rgba(171, 176, 185, 0.12);\n  border-bottom-right-radius: 4px;\n  border-top-right-radius: 4px;\n  white-space: nowrap;\n  display: flex;\n  align-items: center;\n}\n.paraui-text-field > .text-field-content > .text-field-content-after svg {\n  font-size: 20px;\n}\n.paraui-text-field.text-field-multiline > .text-field-content .text-field-content-within > .clean-up-icon {\n  display: none;\n}\n.paraui-text-field.text-field-multiline > .text-field-content .text-field-content-within > .length-limit {\n  position: absolute;\n  height: 22px;\n  bottom: 0;\n  border-radius: 4px;\n  width: calc(100% - 12px);\n  background: white;\n  justify-content: flex-end;\n  padding-bottom: 8px;\n  margin-right: 0;\n}\n.paraui-text-field.text-field-multiline > .text-field-content .text-field-content-within > .text-field-content-within-input > .text-field-label-placeholder {\n  padding-top: 12px;\n  line-height: 1;\n  height: calc(100% - 24px);\n}\n.paraui-text-field.text-field-disabled > .text-field-content {\n  background-color: rgba(171, 176, 185, 0.12);\n}\n.paraui-text-field.text-field-disabled > .text-field-content:hover {\n  border-color: rgba(171, 176, 185, 0.4);\n}\n.paraui-text-field.text-field-disabled > .text-field-content > .text-field-content-before {\n  background-color: transparent;\n}\n.paraui-text-field.text-field-disabled > .text-field-content > .text-field-content-within > .text-field-content-within-input > .text-field-label-placeholder {\n  cursor: not-allowed;\n}\n.paraui-text-field.text-field-disabled > .text-field-content > .text-field-content-within > .text-field-content-within-input > input, .paraui-text-field.text-field-disabled > .text-field-content > .text-field-content-within > .text-field-content-within-input > textarea {\n  cursor: not-allowed;\n}\n.paraui-text-field.text-field-disabled > .text-field-content > .text-field-content-after {\n  background-color: transparent;\n}\n.paraui-text-field.text-field-disabled.text-field-multiline > .text-field-content .text-field-content-within > .length-limit {\n  background-color: transparent;\n}\n.paraui-text-field.text-field-error > .text-field-content {\n  border-color: rgb(235, 96, 84) !important;\n}\n.paraui-text-field.text-field-error > .text-field-content:hover {\n  border-color: rgb(235, 96, 84);\n}\n.paraui-text-field.text-field-limit > .text-field-content {\n  border-color: rgb(235, 96, 84) !important;\n}\n.paraui-text-field.text-field-limit > .text-field-content:hover {\n  border-color: rgb(235, 96, 84) !important;\n}\n.paraui-text-field.text-field-limit-length > .text-field-content > .text-field-content-within > .text-field-content-within-input > textarea {\n  padding-bottom: 25px;\n}\n.paraui-text-field.text-field-focus > .text-field-content {\n  border-color: rgb(54, 102, 214);\n}\n.paraui-text-field.text-field-small > .text-field-content {\n  height: 28px;\n}\n.paraui-text-field.text-field-small > .text-field-content > .text-field-content-before {\n  line-height: 26px;\n}\n.paraui-text-field.text-field-small > .text-field-content > .text-field-content-within > .text-field-content-within-input {\n  height: 26px;\n}\n.paraui-text-field.text-field-small > .text-field-content > .text-field-content-within > .text-field-content-within-input > input {\n  padding: 6px 12px;\n}\n.paraui-text-field.text-field-small > .text-field-content > .text-field-content-within > .text-field-content-within-input > .text-field-label-placeholder {\n  line-height: 26px;\n}\n.paraui-text-field.text-field-small > .text-field-content .text-field-content-after {\n  line-height: 26px;\n}\n.paraui-text-field.text-field-medium > .text-field-content {\n  height: 32px;\n}\n.paraui-text-field.text-field-medium > .text-field-content > .text-field-content-before {\n  line-height: 30px;\n}\n.paraui-text-field.text-field-medium > .text-field-content > .text-field-content-within > .text-field-content-within-input {\n  height: 30px;\n}\n.paraui-text-field.text-field-medium > .text-field-content > .text-field-content-within > .text-field-content-within-input > input {\n  padding: 8px 12px;\n}\n.paraui-text-field.text-field-medium > .text-field-content > .text-field-content-within > .text-field-content-within-input > .text-field-label-placeholder {\n  line-height: 30px;\n}\n.paraui-text-field.text-field-medium > .text-field-content .text-field-content-after {\n  line-height: 30px;\n}\n.paraui-text-field.text-field-large > .text-field-content {\n  height: 36px;\n}\n.paraui-text-field.text-field-large > .text-field-content > .text-field-content-before {\n  line-height: 34px;\n}\n.paraui-text-field.text-field-large > .text-field-content > .text-field-content-within > .text-field-content-within-input {\n  height: 34px;\n}\n.paraui-text-field.text-field-large > .text-field-content > .text-field-content-within > .text-field-content-within-input > input {\n  padding: 10px 12px;\n}\n.paraui-text-field.text-field-large > .text-field-content > .text-field-content-within > .text-field-content-within-input > .text-field-label-placeholder {\n  line-height: 34px;\n}\n.paraui-text-field.text-field-large > .text-field-content .text-field-content-after {\n  line-height: 34px;\n}\n.paraui-text-field.text-field-resize > .text-field-content > .text-field-content-within > .text-field-content-within-input > textarea {\n  resize: both;\n}\n\n.paraui-text-field-select.paraui-dropdown > .text-field-select-content {\n  max-height: 300px;\n  overflow: auto;\n}\n.paraui-text-field-select.paraui-dropdown > .text-field-select-content > .text-field-select-content-item {\n  display: flex;\n  cursor: pointer;\n  color: rgb(46, 55, 67);\n  padding: 0 12px;\n}\n.paraui-text-field-select.paraui-dropdown > .text-field-select-content > .text-field-select-content-item:hover {\n  background-color: rgba(171, 176, 185, 0.12);\n  color: rgb(54, 102, 214);\n}\n.paraui-text-field-select.paraui-dropdown > .text-field-select-content > .text-field-select-content-item.text-field-select-content-item-keydown {\n  background-color: rgba(171, 176, 185, 0.12);\n  color: rgb(54, 102, 214);\n}\n.paraui-text-field-select.paraui-dropdown > .text-field-select-content.text-field-select-content-loading {\n  height: 100px;\n  position: relative;\n  overflow: hidden;\n}\n.paraui-text-field-select.paraui-dropdown.paraui-text-field-select-small > .text-field-select-content > .text-field-select-content-item {\n  line-height: 28px;\n}\n.paraui-text-field-select.paraui-dropdown.paraui-text-field-select-medium > .text-field-select-content > .text-field-select-content-item {\n  line-height: 32px;\n}\n.paraui-text-field-select.paraui-dropdown.paraui-text-field-select-large > .text-field-select-content > .text-field-select-content-item {\n  line-height: 36px;\n}\n.paraui-text-field-select.paraui-text-field-select-data.paraui-tooltip {\n  padding: 8px 0;\n}";
+styleInject(css_248z);
+
 /**
  * @author linhd
  * @date 2021/8/5 15:05
  * @description 输入框
  */
-import React, { FunctionComponent, ReactNode } from 'react';
-import { LabelTooltipProps } from '../Label';
-import './index.scss';
-export interface TextFieldProps {
+
+interface TextFieldProps {
     /** 样式class */
     className?: string;
     /** style */
-    style?: React.CSSProperties;
+    style?: React__default.CSSProperties;
     /** 大小 */
     size?: 'small' | 'medium' | 'large';
     /** 标题在外,还是在内 */
@@ -66,28 +71,29 @@ export interface TextFieldProps {
     /** 渲染下拉子节点 */
     renderSelectItem?: (item: any) => ReactNode;
     /** 失去焦点 */
-    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    onBlur?: (event: React__default.FocusEvent<HTMLInputElement>) => void;
     /** 得到焦点 */
-    onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    onFocus?: (event: React__default.FocusEvent<HTMLInputElement>) => void;
     /** 改变输入框 */
-    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    onChange?: (event: React__default.ChangeEvent<HTMLInputElement>) => void;
     /** 点击图标 */
-    onClickIcon?: (event: React.PointerEvent<HTMLSpanElement>) => void;
+    onClickIcon?: (event: React__default.PointerEvent<HTMLSpanElement>) => void;
     /** 键盘按下 */
-    onKeydown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+    onKeydown?: (event: React__default.KeyboardEvent<HTMLInputElement>) => void;
     /** 键盘抬起 */
-    onKeyUp?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+    onKeyUp?: (event: React__default.KeyboardEvent<HTMLInputElement>) => void;
     /** 回车事件 */
-    onEnter?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+    onEnter?: (event: React__default.KeyboardEvent<HTMLInputElement>) => void;
     /** 点击前缀 */
-    onClickAddonBefore?: (event: React.MouseEvent<HTMLDivElement>) => void;
+    onClickAddonBefore?: (event: React__default.MouseEvent<HTMLDivElement>) => void;
     /** 点击后缀 */
-    onClickAddonAfter?: (event: React.MouseEvent<HTMLDivElement>) => void;
+    onClickAddonAfter?: (event: React__default.MouseEvent<HTMLDivElement>) => void;
     /** 点击清空内容回调 */
     onClear?: () => void;
     /** 选着下拉框 */
     onSelect?: (item: any) => void;
     [name: string]: any;
 }
-export declare const TextField: FunctionComponent<TextFieldProps>;
-export default TextField;
+declare const TextField: FunctionComponent<TextFieldProps>;
+
+export { TextField, TextFieldProps, TextField as default };