vxe-pc-ui 0.2.0 → 0.3.0

package/lib/tabs/src/tabs.js

@@ -17,10 +17,11 @@ var _default = exports.default = (0, _vue.defineComponent)({
     destroyOnClose: Boolean,
     type: String
   },
-  emits: [],
+  emits: ['update:modelValue', 'click', 'change', 'load'],
   setup(props, context) {
     const {
-      slots
+      slots,
+      emit
     } = context;
     const xID = _xeUtils.default.uniqueId();
     const refElem = (0, _vue.ref)();
@@ -96,15 +97,37 @@ var _default = exports.default = (0, _vue.defineComponent)({
     };
     const clickEvent = (evnt, item) => {
       const {
-        initNames
+        initNames,
+        activeName
       } = reactData;
       const {
         name
       } = item;
+      let isInit = false;
+      const value = name;
       if (!initNames.includes(name)) {
+        isInit = true;
         initNames.push(name);
       }
       reactData.activeName = name;
+      emit('update:modelValue', value);
+      if (name !== activeName) {
+        emit('change', {
+          value,
+          name,
+          $event: evnt
+        });
+      }
+      emit('click', {
+        name,
+        $event: evnt
+      });
+      if (isInit) {
+        emit('load', {
+          name,
+          $event: evnt
+        });
+      }
       updateLineStyle();
     };
     const renderTabHeader = list => {
@@ -129,6 +152,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
         } = item;
         const tabSlot = slots ? slots.tab : null;
         return (0, _vue.h)('div', {
+          key: name,
           class: ['vxe-tab-header--item', {
             'is--active': activeName === name
           }],
@@ -162,6 +186,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
       return (0, _vue.h)(_tabPane.default, item, {
         default() {
           return name && initNames.includes(name) ? (0, _vue.h)('div', {
+            key: name,
             class: ['vxe-tab-pane--item', {
               'is--visible': activeName === name
             }]
@@ -175,7 +200,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
       } = props;
       const activeOptionTab = computeActiveOptionTab.value;
       if (destroyOnClose) {
-        return activeOptionTab ? renderOptionPane(activeOptionTab) : (0, _vue.createCommentVNode)();
+        return activeOptionTab ? [renderOptionPane(activeOptionTab)] : (0, _vue.createCommentVNode)();
       }
       return options.map(renderOptionPane);
     };
@@ -190,6 +215,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
       } = item;
       const defaultSlot = slots ? slots.default : null;
       return name && initNames.includes(name) ? (0, _vue.h)('div', {
+        key: name,
         class: ['vxe-tab-pane--item', {
           'is--visible': activeName === name
         }]
@@ -201,7 +227,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
       } = props;
       const activeDefaultTab = computeActiveDefaultTab.value;
       if (destroyOnClose) {
-        return activeDefaultTab ? renderDefaultPane(activeDefaultTab) : (0, _vue.createCommentVNode)();
+        return activeDefaultTab ? [renderDefaultPane(activeDefaultTab)] : (0, _vue.createCommentVNode)();
       }
       return staticTabs.map(renderDefaultPane);
     };

package/lib/tabs/src/tabs.min.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_xeUtils=_interopRequireDefault(require("xe-utils")),_tabPane=_interopRequireDefault(require("./tab-pane")),_vn=require("../../ui/src/vn");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}var _default=exports.default=(0,_vue.defineComponent)({name:"VxeTabs",props:{modelValue:[String,Number,Boolean],options:Array,destroyOnClose:Boolean,type:String},emits:[],setup(n,e){const i=e["slots"];var t=_xeUtils.default.uniqueId();const u=(0,_vue.ref)(),l=(0,_vue.ref)(),r=(0,_vue.reactive)({staticTabs:[],activeName:n.modelValue,initNames:n.modelValue?[n.modelValue]:[],lintLeft:0,lintWidth:0}),a={refElem:u},v=(0,_vue.computed)(()=>{var e=n["options"];const t=r["activeName"];return e?e.find(e=>e.name===t):null}),o=(0,_vue.computed)(()=>{const{staticTabs:e,activeName:t}=r;return e.find(e=>e.name===t)}),s={};t={xID:t,props:n,context:e,reactData:r,getRefMaps:()=>a,getComputeMaps:()=>s};const d=(e,t)=>e&&(_xeUtils.default.isString(e)&&(e=i[e]||null),_xeUtils.default.isFunction(e))?(0,_vn.getSlotVNs)(e(t)):[],c=()=>{(0,_vue.nextTick)(()=>{var{type:e,options:t}=n;const{staticTabs:a,activeName:s}=r;var i=l.value;i&&!e&&-1<(e=_xeUtils.default.findIndexOf(a.length?a:t,e=>e.name===s))&&(i=(t=i.children[e]).clientWidth,e=Math.max(4,Math.floor(.6*i)),r.lintLeft=t.offsetLeft+Math.floor((i-e)/2),r.lintWidth=e)})},m=(e,t)=>{var a=r["initNames"],t=t["name"];a.includes(t)||a.push(t),r.activeName=t,c()},_=e=>{const{initNames:t,activeName:a}=r,{name:s,slots:i}=e,n=i?i.default:null;return(0,_vue.h)(_tabPane.default,e,{default(){return s&&t.includes(s)?(0,_vue.h)("div",{class:["vxe-tab-pane--item",{"is--visible":a===s}]},d(n,{})):(0,_vue.createCommentVNode)()}})},p=e=>{var{initNames:t,activeName:a}=r,{name:e,slots:s}=e,s=s?s.default:null;return e&&t.includes(e)?(0,_vue.h)("div",{class:["vxe-tab-pane--item",{"is--visible":a===e}]},d(s,{})):(0,_vue.createCommentVNode)()};return(0,_vue.watch)(()=>n.modelValue,e=>{r.activeName=e,c()}),(0,_vue.onMounted)(()=>{c()}),t.renderVN=()=>{var{type:e,options:t}=n,a=r["staticTabs"],s=i.default;return(0,_vue.h)("div",{ref:u,class:["vxe-tabs","vxe-tabs--"+(e||"default")]},[(0,_vue.h)("div",{class:"vxe-tabs-slots"},s?s({}):[]),(e=>{var t=n["type"];const{activeName:i,lintLeft:a,lintWidth:s}=r;return(0,_vue.h)("div",{class:"vxe-tabs-header"},[(0,_vue.h)("div",{ref:l,class:"vxe-tabs-header--wrapper"},e.map(t=>{var{title:e,name:a,slots:s}=t,s=s?s.tab:null;return(0,_vue.h)("div",{class:["vxe-tab-header--item",{"is--active":i===a}],onClick(e){m(e,t)}},[(0,_vue.h)("div",{class:"vxe-tab-header--item-name"},s?d(s,{name:a,title:e}):""+e)])})),t?null:(0,_vue.h)("span",{class:"vxe-tabs-header--active-line",style:{left:a+"px",width:s+"px"}})])})(s?a:t||[]),(0,_vue.h)("div",{class:"vxe-tabs-pane"},s?(e=a,s=n.destroyOnClose,a=o.value,s?a?p(a):(0,_vue.createCommentVNode)():e.map(p)):(s=t||[],a=n.destroyOnClose,e=v.value,a?e?_(e):(0,_vue.createCommentVNode)():s.map(_)))])},(0,_vue.provide)("$xeTabs",t),t},render(){return this.renderVN()}});
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_xeUtils=_interopRequireDefault(require("xe-utils")),_tabPane=_interopRequireDefault(require("./tab-pane")),_vn=require("../../ui/src/vn");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}var _default=exports.default=(0,_vue.defineComponent)({name:"VxeTabs",props:{modelValue:[String,Number,Boolean],options:Array,destroyOnClose:Boolean,type:String},emits:["update:modelValue","click","change","load"],setup(l,e){const{slots:i,emit:s}=e;var t=_xeUtils.default.uniqueId();const u=(0,_vue.ref)(),r=(0,_vue.ref)(),v=(0,_vue.reactive)({staticTabs:[],activeName:l.modelValue,initNames:l.modelValue?[l.modelValue]:[],lintLeft:0,lintWidth:0}),a={refElem:u},o=(0,_vue.computed)(()=>{var e=l["options"];const t=v["activeName"];return e?e.find(e=>e.name===t):null}),d=(0,_vue.computed)(()=>{const{staticTabs:e,activeName:t}=v;return e.find(e=>e.name===t)}),n={};t={xID:t,props:l,context:e,reactData:v,getRefMaps:()=>a,getComputeMaps:()=>n};const c=(e,t)=>e&&(_xeUtils.default.isString(e)&&(e=i[e]||null),_xeUtils.default.isFunction(e))?(0,_vn.getSlotVNs)(e(t)):[],m=()=>{(0,_vue.nextTick)(()=>{var{type:e,options:t}=l;const{staticTabs:a,activeName:n}=v;var i=r.value;i&&!e&&-1<(e=_xeUtils.default.findIndexOf(a.length?a:t,e=>e.name===n))&&(i=(t=i.children[e]).clientWidth,e=Math.max(4,Math.floor(.6*i)),v.lintLeft=t.offsetLeft+Math.floor((i-e)/2),v.lintWidth=e)})},_=(e,t)=>{var{initNames:a,activeName:n}=v,t=t["name"];let i=!1;var l=t;a.includes(t)||(i=!0,a.push(t)),v.activeName=t,s("update:modelValue",l),t!==n&&s("change",{value:l,name:t,$event:e}),s("click",{name:t,$event:e}),i&&s("load",{name:t,$event:e}),m()},p=e=>{const{initNames:t,activeName:a}=v,{name:n,slots:i}=e,l=i?i.default:null;return(0,_vue.h)(_tabPane.default,e,{default(){return n&&t.includes(n)?(0,_vue.h)("div",{key:n,class:["vxe-tab-pane--item",{"is--visible":a===n}]},c(l,{})):(0,_vue.createCommentVNode)()}})},f=e=>{var{initNames:t,activeName:a}=v,{name:e,slots:n}=e,n=n?n.default:null;return e&&t.includes(e)?(0,_vue.h)("div",{key:e,class:["vxe-tab-pane--item",{"is--visible":a===e}]},c(n,{})):(0,_vue.createCommentVNode)()};return(0,_vue.watch)(()=>l.modelValue,e=>{v.activeName=e,m()}),(0,_vue.onMounted)(()=>{m()}),t.renderVN=()=>{var{type:e,options:t}=l,a=v["staticTabs"],n=i.default;return(0,_vue.h)("div",{ref:u,class:["vxe-tabs","vxe-tabs--"+(e||"default")]},[(0,_vue.h)("div",{class:"vxe-tabs-slots"},n?n({}):[]),(e=>{var t=l["type"];const{activeName:i,lintLeft:a,lintWidth:n}=v;return(0,_vue.h)("div",{class:"vxe-tabs-header"},[(0,_vue.h)("div",{ref:r,class:"vxe-tabs-header--wrapper"},e.map(t=>{var{title:e,name:a,slots:n}=t,n=n?n.tab:null;return(0,_vue.h)("div",{key:a,class:["vxe-tab-header--item",{"is--active":i===a}],onClick(e){_(e,t)}},[(0,_vue.h)("div",{class:"vxe-tab-header--item-name"},n?c(n,{name:a,title:e}):""+e)])})),t?null:(0,_vue.h)("span",{class:"vxe-tabs-header--active-line",style:{left:a+"px",width:n+"px"}})])})(n?a:t||[]),(0,_vue.h)("div",{class:"vxe-tabs-pane"},n?(e=a,n=l.destroyOnClose,a=d.value,n?a?[f(a)]:(0,_vue.createCommentVNode)():e.map(f)):(n=t||[],a=l.destroyOnClose,e=o.value,a?e?[p(e)]:(0,_vue.createCommentVNode)():n.map(p)))])},(0,_vue.provide)("$xeTabs",t),t},render(){return this.renderVN()}});

package/lib/ui/src/core.js

@@ -84,7 +84,7 @@ function setIcon(options) {
 function getIcon(key) {
   return arguments.length ? _xeUtils.default.get(_iconStore.default, key) : _iconStore.default;
 }
-const version = exports.version = "0.2.0";
+const version = exports.version = "0.3.0";
 const VxeCore = {
   version,
   setConfig,

package/lib/ui/src/core.min.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var _exportNames={setConfig:!0,getConfig:!0,setIcon:!0,getIcon:!0,version:!0},_xeUtils=(exports.default=void 0,exports.getConfig=getConfig,exports.getIcon=getIcon,exports.setConfig=setConfig,exports.setIcon=setIcon,exports.version=void 0,_interopRequireDefault(require("xe-utils"))),_domZindex=_interopRequireDefault(require("dom-zindex")),_globalStore=_interopRequireDefault(require("./globalStore")),_iconStore=_interopRequireDefault(require("./iconStore")),_theme=_interopRequireDefault(require("./theme")),_i18n=require("./i18n"),_renderer=(Object.keys(_i18n).forEach(function(e){"default"===e||"__esModule"===e||Object.prototype.hasOwnProperty.call(_exportNames,e)||e in exports&&exports[e]===_i18n[e]||Object.defineProperty(exports,e,{enumerable:!0,get:function(){return _i18n[e]}})}),require("./renderer")),_validators=(Object.keys(_renderer).forEach(function(e){"default"===e||"__esModule"===e||Object.prototype.hasOwnProperty.call(_exportNames,e)||e in exports&&exports[e]===_renderer[e]||Object.defineProperty(exports,e,{enumerable:!0,get:function(){return _renderer[e]}})}),require("./validators"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function setConfig(e){return e&&(e.theme&&(0,_theme.default)(e),e.zIndex)&&_domZindex.default.setCurrent(e.zIndex),e?_xeUtils.default.merge(_globalStore.default,e):_globalStore.default}function getConfig(e,t){return arguments.length?_xeUtils.default.get(_globalStore.default,e,t):_globalStore.default}function setIcon(e){return e?Object.assign(_iconStore.default,e):_iconStore.default}function getIcon(e){return arguments.length?_xeUtils.default.get(_iconStore.default,e):_iconStore.default}Object.keys(_validators).forEach(function(e){"default"===e||"__esModule"===e||Object.prototype.hasOwnProperty.call(_exportNames,e)||e in exports&&exports[e]===_validators[e]||Object.defineProperty(exports,e,{enumerable:!0,get:function(){return _validators[e]}})});const version=exports.version="0.2.0",VxeCore={version:version,setConfig:setConfig,getConfig:getConfig,setIcon:setIcon,getIcon:getIcon,getI18n:_i18n.getI18n,renderer:_renderer.renderer,validators:_validators.validators,modal:null};(0,_theme.default)();var _default=exports.default=VxeCore;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var _exportNames={setConfig:!0,getConfig:!0,setIcon:!0,getIcon:!0,version:!0},_xeUtils=(exports.default=void 0,exports.getConfig=getConfig,exports.getIcon=getIcon,exports.setConfig=setConfig,exports.setIcon=setIcon,exports.version=void 0,_interopRequireDefault(require("xe-utils"))),_domZindex=_interopRequireDefault(require("dom-zindex")),_globalStore=_interopRequireDefault(require("./globalStore")),_iconStore=_interopRequireDefault(require("./iconStore")),_theme=_interopRequireDefault(require("./theme")),_i18n=require("./i18n"),_renderer=(Object.keys(_i18n).forEach(function(e){"default"===e||"__esModule"===e||Object.prototype.hasOwnProperty.call(_exportNames,e)||e in exports&&exports[e]===_i18n[e]||Object.defineProperty(exports,e,{enumerable:!0,get:function(){return _i18n[e]}})}),require("./renderer")),_validators=(Object.keys(_renderer).forEach(function(e){"default"===e||"__esModule"===e||Object.prototype.hasOwnProperty.call(_exportNames,e)||e in exports&&exports[e]===_renderer[e]||Object.defineProperty(exports,e,{enumerable:!0,get:function(){return _renderer[e]}})}),require("./validators"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function setConfig(e){return e&&(e.theme&&(0,_theme.default)(e),e.zIndex)&&_domZindex.default.setCurrent(e.zIndex),e?_xeUtils.default.merge(_globalStore.default,e):_globalStore.default}function getConfig(e,t){return arguments.length?_xeUtils.default.get(_globalStore.default,e,t):_globalStore.default}function setIcon(e){return e?Object.assign(_iconStore.default,e):_iconStore.default}function getIcon(e){return arguments.length?_xeUtils.default.get(_iconStore.default,e):_iconStore.default}Object.keys(_validators).forEach(function(e){"default"===e||"__esModule"===e||Object.prototype.hasOwnProperty.call(_exportNames,e)||e in exports&&exports[e]===_validators[e]||Object.defineProperty(exports,e,{enumerable:!0,get:function(){return _validators[e]}})});const version=exports.version="0.3.0",VxeCore={version:version,setConfig:setConfig,getConfig:getConfig,setIcon:setIcon,getIcon:getIcon,getI18n:_i18n.getI18n,renderer:_renderer.renderer,validators:_validators.validators,modal:null};(0,_theme.default)();var _default=exports.default=VxeCore;

package/lib/ui/src/log.js

@@ -8,7 +8,7 @@ exports.getLog = getLog;
 exports.warnLog = void 0;
 var _i18n = require("./i18n");
 function getLog(message, params) {
-  return `[vxe-table v${"0.2.0"}] ${(0, _i18n.getI18n)(message, params)}`;
+  return `[vxe-table v${"0.3.0"}] ${(0, _i18n.getI18n)(message, params)}`;
 }
 function outLog(type) {
   return function (message, params) {

package/lib/ui/src/log.min.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.errLog=void 0,exports.getLog=getLog,exports.warnLog=void 0;var _i18n=require("./i18n");function getLog(o,e){return"[vxe-table v0.2.0] "+(0,_i18n.getI18n)(o,e)}function outLog(r){return function(o,e){o=getLog(o,e);return console[r](o),o}}const warnLog=exports.warnLog=outLog("warn"),errLog=exports.errLog=outLog("error");
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.errLog=void 0,exports.getLog=getLog,exports.warnLog=void 0;var _i18n=require("./i18n");function getLog(o,e){return"[vxe-table v0.3.0] "+(0,_i18n.getI18n)(o,e)}function outLog(r){return function(o,e){o=getLog(o,e);return console[r](o),o}}const warnLog=exports.warnLog=outLog("warn"),errLog=exports.errLog=outLog("error");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vxe-pc-ui",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "一个基于 vue 的 PC 端组件库",
   "scripts": {
     "update": "npm install --legacy-peer-deps",

package/packages/tabs/src/tabs.ts

@@ -13,9 +13,14 @@ export default defineComponent({
     destroyOnClose: Boolean as PropType<VxeTabsPropTypes.DestroyOnClose>,
     type: String as PropType<VxeTabsPropTypes.Type>
   },
-  emits: [],
+  emits: [
+    'update:modelValue',
+    'click',
+    'change',
+    'load'
+  ],
   setup (props, context) {
-    const { slots } = context
+    const { slots, emit } = context
 
     const xID = XEUtils.uniqueId()
 
@@ -89,12 +94,23 @@ export default defineComponent({
     }
 
     const clickEvent = (evnt: KeyboardEvent, item: VxeTabPaneProps | VxeTabPaneDefines.TabConfig) => {
-      const { initNames } = reactData
+      const { initNames, activeName } = reactData
       const { name } = item
+      let isInit = false
+      const value = name
       if (!initNames.includes(name)) {
+        isInit = true
         initNames.push(name)
       }
       reactData.activeName = name
+      emit('update:modelValue', value)
+      if (name !== activeName) {
+        emit('change', { value, name, $event: evnt })
+      }
+      emit('click', { name, $event: evnt })
+      if (isInit) {
+        emit('load', { name, $event: evnt })
+      }
       updateLineStyle()
     }
 
@@ -111,6 +127,7 @@ export default defineComponent({
           const { title, name, slots } = item
           const tabSlot = slots ? slots.tab : null
           return h('div', {
+            key: name,
             class: ['vxe-tab-header--item', {
               'is--active': activeName === name
             }],
@@ -143,6 +160,7 @@ export default defineComponent({
         default () {
           return name && initNames.includes(name)
             ? h('div', {
+              key: name,
               class: ['vxe-tab-pane--item', {
                 'is--visible': activeName === name
               }]
@@ -156,7 +174,7 @@ export default defineComponent({
       const { destroyOnClose } = props
       const activeOptionTab = computeActiveOptionTab.value
       if (destroyOnClose) {
-        return activeOptionTab ? renderOptionPane(activeOptionTab) : createCommentVNode()
+        return activeOptionTab ? [renderOptionPane(activeOptionTab)] : createCommentVNode()
       }
       return options.map(renderOptionPane)
     }
@@ -167,6 +185,7 @@ export default defineComponent({
       const defaultSlot = slots ? slots.default : null
       return name && initNames.includes(name)
         ? h('div', {
+          key: name,
           class: ['vxe-tab-pane--item', {
             'is--visible': activeName === name
           }]
@@ -178,7 +197,7 @@ export default defineComponent({
       const { destroyOnClose } = props
       const activeDefaultTab = computeActiveDefaultTab.value
       if (destroyOnClose) {
-        return activeDefaultTab ? renderDefaultPane(activeDefaultTab) : createCommentVNode()
+        return activeDefaultTab ? [renderDefaultPane(activeDefaultTab)] : createCommentVNode()
       }
       return staticTabs.map(renderDefaultPane)
     }

package/types/components/tab-pane.d.ts

@@ -23,7 +23,7 @@ export interface VxeTabPanePrivateRef extends TabPanePrivateRef { }
 
 export namespace VxeTabPanePropTypes {
   export type Title = string | number
-  export type Name = string | number | boolean
+  export type Name = string | number
 }
 
 export type VxeTabPaneProps = {

package/types/components/tabs.d.ts

@@ -1,6 +1,6 @@
 import { RenderFunction, SetupContext, Ref, ComponentPublicInstance } from 'vue'
 import { defineVxeComponent, VxeComponentBase, VxeComponentEvent } from '../tool'
-import { VxeTabPaneProps, VxeTabPaneDefines } from './tab-pane'
+import { VxeTabPaneProps, VxeTabPaneDefines, VxeTabPanePropTypes } from './tab-pane'
 
 /* eslint-disable no-use-before-define,@typescript-eslint/ban-types */
 
@@ -23,7 +23,7 @@ export interface TabsPrivateRef {
 export interface VxeTabsPrivateRef extends TabsPrivateRef { }
 
 export namespace VxeTabsPropTypes {
-  export type ModelValue = undefined | null | string | number | boolean
+  export type ModelValue = undefined | null | VxeTabPanePropTypes.Name
   export type Options = VxeTabPaneProps[]
   export type DestroyOnClose = boolean
   export type Type = null | '' | 'default' | 'card' | 'border-card'