@king-design/vue 2.0.0-beta.1 → 2.0.0

package/components/wave/index.js

@@ -0,0 +1,120 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import { __decorate } from "tslib";
+import { Component, findDomFromVNode } from 'intact-vue-next';
+import { isArray } from 'intact-shared';
+import { bind } from '../utils';
+import { makeStyles } from './styles';
+import { theme } from '../../styles/theme';
+var typeDefs = {
+  disabled: Boolean,
+  color: String,
+  inset: String
+};
+
+var defaults = function defaults() {
+  return {
+    color: theme.color.primary,
+    inset: '-1px'
+  };
+};
+
+export var Wave = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(Wave, _Component);
+
+  function Wave() {
+    var _context;
+
+    var _this;
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
+    _this.instance = null;
+    _this.className = void 0;
+    _this.timer = 0;
+    return _this;
+  }
+
+  var _proto = Wave.prototype;
+
+  _proto.initClassName = function initClassName() {
+    var _this$get = this.get(),
+        color = _this$get.color,
+        inset = _this$get.inset;
+
+    this.className = makeStyles(color || theme.color.primary, inset);
+  };
+
+  _proto.mounted = function mounted() {
+    var children = this.get('children');
+    var node = findDomFromVNode(children, true);
+
+    if (!node || node.nodeType !== 1) {
+      return;
+    }
+
+    this.instance = node;
+    node.addEventListener('click', this.onClick);
+  };
+
+  _proto.beforeUnmount = function beforeUnmount() {
+    if (this.instance) {
+      this.instance.removeEventListener('click', this.onClick);
+    }
+
+    this.resetAnimation();
+  };
+
+  _proto.onClick = function onClick(e) {
+    var _this2 = this;
+
+    this.initClassName();
+    var instance = this.instance;
+
+    var _this$get2 = this.get(),
+        disabled = _this$get2.disabled;
+
+    var node = e.target; // 点击输入框中的icon时，此时输入框不需要动效
+
+    var isInput = instance.classList.contains('k-input-wrapper');
+    if (disabled || isInput && node.classList.contains('k-icon')) return;
+    this.resetAnimation();
+    instance.addEventListener('animationend', this.resetAnimation);
+    this.timer = window.setTimeout(function () {
+      instance.classList.add(_this2.className);
+    });
+  };
+
+  _proto.resetAnimation = function resetAnimation() {
+    var node = this.instance;
+    if (!node) return;
+    node.classList.remove(this.className);
+    node.removeEventListener('animationend', this.resetAnimation);
+    clearTimeout(this.timer);
+  };
+
+  return Wave;
+}(Component);
+Wave.typeDefs = typeDefs;
+Wave.defaults = defaults;
+
+Wave.template = function () {
+  var children = this.get('children');
+
+  if (process.env.NODE_ENV !== 'production') {
+    if (!children || isArray(children) && children.length > 1) {
+      throw new Error('Wave must receive only one Element children');
+    }
+  }
+
+  return children;
+};
+
+__decorate([bind], Wave.prototype, "mounted", null);
+
+__decorate([bind], Wave.prototype, "onClick", null);
+
+__decorate([bind], Wave.prototype, "resetAnimation", null);

package/components/wave/styles.d.ts

@@ -0,0 +1,2 @@
+import '../../styles/global';
+export declare function makeStyles(color: string, inset: string): string;

package/components/wave/styles.js

@@ -0,0 +1,17 @@
+import { css, keyframes } from '@emotion/css';
+import { theme, setDefault } from '../../styles/theme';
+import { deepDefaults } from '../../styles/utils';
+import '../../styles/global';
+var defaults = {
+  inset: '-3px'
+};
+var wave;
+setDefault(function () {
+  wave = deepDefaults(theme, {
+    wave: defaults
+  }).wave;
+});
+export function makeStyles(color, inset) {
+  var waveEffect = /*#__PURE__*/keyframes("100%{top:calc(", inset, " + ", wave.inset, ");bottom:calc(", inset, " + ", wave.inset, ");left:calc(", inset, " + ", wave.inset, ");right:calc(", inset, " + ", wave.inset, ");opacity:0.05;}");
+  return /*#__PURE__*/css("position:relative;&::after{display:block;content:'';position:absolute;top:", inset, ";bottom:", inset, ";left:", inset, ";right:", inset, ";opacity:0.4;border-radius:4px;z-index:2;animation:", waveEffect, " .2s ease-in;animation-fill-mode:forwards;border:2px solid ", color, ";}&.k-circle,&.k-radio-wrapper{&:after{border-radius:calc(", theme.large.height, " / 2 + 4px);}}");
+}

package/hooks/useRouter.d.ts

@@ -1 +1,2 @@
 export declare function useRouter(): import('intact-vue-next').RefObject<any>;
+export declare function navigate(router: any, to?: string | object): void;

package/hooks/useRouter.js

@@ -19,6 +19,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
  * in Vue, find the $router
  */
 import { useInstance, createRef, onMounted } from 'intact-vue-next';
+import { isExternalLink } from '../components/utils';
 export function useRouter() {
   var instance = useInstance();
   var ref = createRef();
@@ -27,6 +28,15 @@ export function useRouter() {
   });
   return ref;
 }
+export function navigate(router, to) {
+  if (to) {
+    if (router && !isExternalLink(to)) {
+      router.push(to);
+    } else {
+      location.href = to;
+    }
+  }
+}
 
 function findRouter(instance) {
   var Component = instance.constructor;

package/index.d.ts

@@ -1,5 +1,5 @@
 /*!
- * @king-design v2.0.0-beta.0
+ * @king-design v2.0.0
  *
  * Copyright (c) Kingsoft Cloud
  * Released under the MIT License
@@ -55,7 +55,8 @@ export * from './components/transfer';
 export * from './components/tree';
 export * from './components/treeSelect';
 export * from './components/upload';
-export declare const version = "2.0.0-beta.1";
+export * from './components/wave';
+export declare const version = "2.0.0";
 
 
 export {normalize} from 'intact-vue-next';

package/index.js

@@ -1,5 +1,5 @@
 /*!
- * @king-design v2.0.0-beta.0
+ * @king-design v2.0.0
  *
  * Copyright (c) Kingsoft Cloud
  * Released under the MIT License
@@ -57,7 +57,8 @@ export * from './components/transfer';
 export * from './components/tree';
 export * from './components/treeSelect';
 export * from './components/upload';
-export var version = '2.0.0-beta.1';
+export * from './components/wave';
+export var version = '2.0.0';
 /* generate end */
 
 export {normalize} from 'intact-vue-next';

package/install.d.ts

@@ -0,0 +1,2 @@
+import type { App } from 'vue';
+export declare function install(Vue: App): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@king-design/vue",
-  "version": "2.0.0-beta.1",
+  "version": "2.0.0",
   "description": "King-Design UI components for Vue3.0.",
   "keywords": [
     "component",
@@ -12,16 +12,6 @@
     "king-design",
     "kpc"
   ],
-  "files": [
-    "components",
-    "hooks",
-    "i18n",
-    "styles",
-    "dist",
-    "index.js",
-    "install.js",
-    "index.d.ts"
-  ],
   "author": "Javey <jiawei23716@sina.com>",
   "homepage": "https://design.ksyun.com",
   "license": "MIT",
@@ -48,7 +38,7 @@
     "dayjs": "^1.10.7",
     "downloadjs": "^1.4.7",
     "enquire.js": "^2.1.6",
-    "intact-vue-next": "^3.0.0-beta.20",
+    "intact-vue-next": "^3.0.0",
     "monaco-editor": "^0.26.1",
     "mxgraphx": "^4.0.7",
     "resize-observer-polyfill": "^1.5.1",

package/styles/global.js

@@ -4,6 +4,7 @@ import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
 import _Object$keys from "@babel/runtime-corejs3/core-js/object/keys";
 import { injectGlobal } from '@emotion/css';
 import { theme } from './theme';
+import { palette } from '../styles/utils';
 var slideDirections = {
   down: 'center top 0',
   up: 'center bottom 0',
@@ -11,6 +12,6 @@ var slideDirections = {
   right: 'left center 0'
 }; // TODO: update global when theme changed
 
-injectGlobal("html{box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,SF Pro SC,SF Pro Text,Helvetica Neue,Helvetica,PingFang SC,Segoe UI,Roboto,Hiragino Sans GB,arial,microsoft yahei ui,Microsoft YaHei,SimSun,sans-serif;}body{font-size:", theme.fontSize, ";line-height:", theme.lineHeight, ";margin:0;padding:0;color:", theme.color.text, ";}*,*:before,*:after{box-sizing:inherit;}", _mapInstanceProperty(_context = _Object$keys(slideDirections)).call(_context, function (direction) {
-  return "\n            .k-slide" + direction + "-enter-from,\n            .k-slide" + direction + "-leave-to {\n                transform-origin: " + slideDirections[direction] + ";\n                opacity: 0;\n                transform: " + (direction === 'down' || direction === 'up' ? "scaleY(.8)" : 'scaleX(.8)') + ";\n            }\n            .k-slide" + direction + "-enter-active,\n            .k-slide" + direction + "-leave-active {\n                transform-origin: " + slideDirections[direction] + ";\n                transition: opacity " + theme.transition + ", transform " + theme.transition + " !important;\n                pointer-events: none;\n            }\n        ";
-}).join(''), " .k-fade-enter-from,.k-fade-leave-to{opacity:0!important;}.k-fade-enter-active,.k-fade-leave-active{transition:opacity ", theme.transition, ";}.k-fade-leave-active:not(tr){position:absolute;}.k-fade-move{transition:transform ", theme.transition, ";}.k-scale-enter-from,.k-scale-leave-to{transform:scale(0);}.k-scale-enter-active,.k-scale-leave-active{transition:transform ", theme.transition, ";}.k-expand-enter-from,.k-expand-leave-to{opacity:0;overflow:hidden;}.k-expand-enter-active,.k-expand-leave-active{transition:all ", theme.transition, "!important;overflow:hidden;}.k-expand-move{transition:transform ", theme.transition, ";}.k-dropdown-enter-from,.k-dropdown-leave-to{opacity:0;transform:translateY(-20px);}.k-dropdown-enter-active,.k-dropdown-leave-active,.k-dropdown-move{transition:all ", theme.transition, ";}.k-dropdown-leave-active{position:absolute!important;}.k-dropdown-move{transition:transform ", theme.transition, ";}.c-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.c-hidden{display:none;}.c-middle{display:inline-block;vertical-align:middle;}");
+injectGlobal("html{--var-wave-color:", theme.color.primary, ";box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,SF Pro SC,SF Pro Text,Helvetica Neue,Helvetica,PingFang SC,Segoe UI,Roboto,Hiragino Sans GB,arial,microsoft yahei ui,Microsoft YaHei,SimSun,sans-serif;}body{font-size:", theme.fontSize, ";line-height:", theme.lineHeight, ";margin:0;padding:0;color:", theme.color.text, ";}*,*:before,*:after{box-sizing:inherit;}", _mapInstanceProperty(_context = _Object$keys(slideDirections)).call(_context, function (direction) {
+  return "\n            .k-slide" + direction + "-enter-from,\n            .k-slide" + direction + "-leave-to {\n                transform-origin: " + slideDirections[direction] + ";\n                opacity: 0;\n                transform: " + (direction === 'down' || direction === 'up' ? "scaleY(.8)" : 'scaleX(.8)') + ";\n            }\n            .k-slide" + direction + "-enter-active,\n            .k-slide" + direction + "-leave-active {\n                transform-origin: " + slideDirections[direction] + ";\n                transition: opacity " + theme.transition.large + ", transform " + theme.transition.large + " !important;\n                pointer-events: none;\n            }\n        ";
+}).join(''), " .k-fade-enter-from,.k-fade-leave-to{opacity:0!important;}.k-fade-enter-active,.k-fade-leave-active{transition:opacity ", theme.transition.large, ";}.k-fade-leave-active:not(tr){position:absolute;}.k-fade-move{transition:transform ", theme.transition.large, ";}.k-scale-enter-from,.k-scale-leave-to{transform:scale(0);}.k-scale-enter-active,.k-scale-leave-active{transition:transform ", theme.transition.large, ";}.k-expand-enter-from,.k-expand-leave-to{opacity:0;overflow:hidden;}.k-expand-enter-active,.k-expand-leave-active{transition:all ", theme.transition.large, "!important;overflow:hidden;}.k-expand-move{transition:transform ", theme.transition.large, ";}.k-dropdown-enter-from,.k-dropdown-leave-to{opacity:0;transform:translateY(-20px);}.k-dropdown-enter-active,.k-dropdown-leave-active,.k-dropdown-move{transition:all ", theme.transition.large, ";}.k-dropdown-leave-active{position:absolute!important;}.k-dropdown-move{transition:transform ", theme.transition.large, ";}.k-fade-in-left-enter-from,.k-fade-in-left-leave-to{opacity:0;transform:translate3d(-15px, 0, 0);}.k-fade-in-left-enter-active,.k-fade-in-left-leave-active{transition:all ", theme.transition.large, ";td{background:", palette(theme.color.primary, -4), "!important;}}.k-fade-in-left-move{transition:transform ", theme.transition.large, ";}.k-fade-expand-enter-from,.k-fade-expand-leave-to{opacity:0;}.k-fade-expand-enter-active,.k-fade-expand-leave-active{transition:all ", theme.transition.large, ";background:", palette(theme.color.primary, -4), "!important;}.c-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.c-hidden{display:none;}.c-middle{display:inline-block;vertical-align:middle;}");

package/styles/theme.d.ts

@@ -1,8 +1,7 @@
-export declare type ThemeValue<T> = T;
 export declare type Theme = {
-    [name: string]: ThemeValue<string> | ThemeValue<number> | Theme;
+    [name: string]: string | number | Theme;
 };
-export declare function defualtTheme(): {
+export declare function defaultTheme(): {
     large: {
         height: string;
         fontSize: string;
@@ -24,7 +23,6 @@ export declare function defualtTheme(): {
         padding: string;
     };
     color: {
-        lightBlack: string;
         primary: string;
         warning: string;
         danger: string;
@@ -38,9 +36,11 @@ export declare function defualtTheme(): {
         placeholder: string;
         readonly link: string;
         readonly linkHover: string;
+        readonly hoverBg: string;
         disabled: string;
         disabledBg: string;
         disabledBorder: string;
+        lightBlack: string;
     };
     borderRadius: string;
     boxShadow: string;
@@ -48,7 +48,11 @@ export declare function defualtTheme(): {
     lineHeight: number;
     maxZIndex: number;
     midZIndex: number;
-    transition: string;
+    transition: {
+        small: string;
+        middle: string;
+        large: string;
+    };
 };
 declare let theme: {
     large: {
@@ -72,7 +76,6 @@ declare let theme: {
         padding: string;
     };
     color: {
-        lightBlack: string;
         primary: string;
         warning: string;
         danger: string;
@@ -86,9 +89,11 @@ declare let theme: {
         placeholder: string;
         readonly link: string;
         readonly linkHover: string;
+        readonly hoverBg: string;
         disabled: string;
         disabledBg: string;
         disabledBorder: string;
+        lightBlack: string;
     };
     borderRadius: string;
     boxShadow: string;
@@ -96,7 +101,11 @@ declare let theme: {
     lineHeight: number;
     maxZIndex: number;
     midZIndex: number;
-    transition: string;
+    transition: {
+        small: string;
+        middle: string;
+        large: string;
+    };
 };
 export declare function resetTheme(): void;
 export { theme };

package/styles/theme.js

@@ -1,5 +1,5 @@
 import { palette, deepExtends } from './utils';
-export function defualtTheme() {
+export function defaultTheme() {
   return {
     large: {
       height: '40px',
@@ -22,7 +22,6 @@ export function defualtTheme() {
       padding: '8px'
     },
     color: {
-      lightBlack: '#737373',
       primary: '#0091ea',
       warning: '#ff9800',
       danger: '#ff4133',
@@ -43,22 +42,31 @@ export function defualtTheme() {
         return palette(theme.color.primary, -1);
       },
 
+      get hoverBg() {
+        return palette(theme.color.primary, -4);
+      },
+
       disabled: '#ccc',
       disabledBg: '#f2f2f2',
-      disabledBorder: '#ccc'
+      disabledBorder: '#ccc',
+      lightBlack: '#737373'
     },
     borderRadius: '2px',
-    boxShadow: '0 0 4px 0 rgba(0, 0, 0, .3)',
+    boxShadow: '0 0 16px 0 rgba(0, 0, 0, .1)',
     fontSize: '12px',
     lineHeight: 1.5,
     maxZIndex: 9999,
     midZIndex: 999,
-    transition: '.25s ease-in-out'
+    transition: {
+      small: '.1s cubic-bezier(0.42, 0, 0.58, 1)',
+      middle: '.2s cubic-bezier(0.25, 0.1, 0.25, 1)',
+      large: '.3s cubic-bezier(0.25, 0.1, 0.25, 1)'
+    }
   };
 }
-var theme = defualtTheme();
+var theme = defaultTheme();
 export function resetTheme() {
-  theme = defualtTheme();
+  theme = defaultTheme();
 }
 export { theme };
 var queue = [];

package/tsconfig.json

@@ -0,0 +1,22 @@
+{
+    // "extends": "../../tsconfig",
+    "compilerOptions": {
+        // "outDir": "./build",
+        "esModuleInterop": true,
+        "target": "ESNext",
+        "module": "ESNext",
+        "declaration": true,
+        "strict": true,
+        "moduleResolution": "node",
+        "paths": {
+            "vue": ["./node_modules/vue"],
+            "kpc-vue-next": ["./"],
+            "kpc-vue-next/*": ["./*"],
+            "@/*": ["../../*"]
+        }
+    },
+    "include": [
+        "../../typings",
+        "../../test/utils.ts"
+    ]
+}