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

package/__tests__/components/dropdown.spec.ts

@@ -0,0 +1,72 @@
+import {createApp, render} from 'vue';
+import {mount, unmount, dispatchEvent, getElement, wait} from '@/test/utils';
+import {Dropdown, DropdownMenu, DropdownItem} from '../../';
+
+describe('Dropdown', () => {
+    it('should save original events', async () => {
+        const click = sinon.spy();
+        const container = document.createElement('div');
+        document.body.appendChild(container);
+        const vue = createApp({
+            template: `
+                <div>
+                    <Dropdown>
+                        <button ref="button" @click="test">
+                            hover
+                        </button>
+                        <DropdownMenu>
+                            <DropdownItem>item 1</DropdownItem>
+                            <DropdownItem>item 2</DropdownItem>
+                            <DropdownItem>item 3</DropdownItem>
+                        </DropdownMenu>
+                    </Dropdown>
+                </div>
+            `,
+            components: {
+                Dropdown, DropdownMenu, DropdownItem
+            },
+            methods: {
+                test() {
+                    click();
+                }
+            }
+        }).mount(container);
+
+        (vue.$refs.button as HTMLElement).click();
+        await wait();
+        expect(click.callCount).to.eql(1);
+        expect(getElement('.k-dropdown-menu')).to.be.exist;
+
+        render(null, container);
+        document.body.removeChild(container);
+    });
+
+    it('handle trigger without props', async () => {
+        const container = document.createElement('div');
+        document.body.appendChild(container);
+        const vue = createApp({
+            template: `
+                <div>
+                    <Dropdown>
+                        <button>hover</button>
+                        <DropdownMenu>
+                            <DropdownItem>item 1</DropdownItem>
+                            <DropdownItem>item 2</DropdownItem>
+                            <DropdownItem>item 3</DropdownItem>
+                        </DropdownMenu>
+                    </Dropdown>
+                </div>
+            `,
+            components: {
+                Dropdown, DropdownMenu, DropdownItem
+            },
+        }).mount(container);
+
+        vue.$el.querySelector('button').click();
+        await wait();
+        expect(getElement('.k-dropdown-menu')).to.be.exist;
+
+        render(null, container);
+        document.body.removeChild(container);
+    });
+});

package/__tests__/components/select.spec.ts

@@ -0,0 +1,29 @@
+import {createApp, render} from 'vue';
+import {mount, unmount, dispatchEvent, getElement, wait} from '@/test/utils';
+import {Select, Option} from '../../';
+
+describe('Select', () => {
+    it('handle trigger without props', async () => {
+        const container = document.createElement('div');
+        document.body.appendChild(container);
+        const vue = createApp({
+            template: `
+                <div>
+                    <Select>
+                        <Option v-for="item in [1, 2]" :value="item">{{ item }}</Option>
+                    </Select>
+                </div>
+            `,
+            components: {
+                Select, Option
+            },
+        }).mount(container);
+
+        vue.$el.querySelector('.k-select').click();
+        await wait();
+        expect(getElement('.k-select-menu').textContent).to.eql('12');
+
+        render(null, container);
+        document.body.removeChild(container);
+    });
+});

package/__tests__/index.ts

@@ -0,0 +1,46 @@
+import {createApp, render, h} from 'vue';
+import {Component, createRef} from 'intact';
+import {mount, unmount, testDemos, wait, nextFrame} from '@/test/utils';
+import {matchSnapshot} from 'chai-karma-snapshot';
+import mx from '../components/diagram/mxgraph/mx';
+import '../../../test/test.styl';
+
+chai.use(matchSnapshot);
+
+mx.mxClient.IS_POINTER = false;
+
+const testsContext = require.context('./components/', true, /.*\.spec\.ts/);
+testsContext.keys().forEach(testsContext);
+
+const reactReq = require.context('~/components/', true, /^((?!(affix|code)).)*\/demos\/.*next\.vue$/);
+// const reactReq = require.context('~/components/', true, /button\/demos\/.*next\.vue$/);
+
+describe('Vue Next Demos', () => {
+    afterEach(() => unmount());
+
+    function wrap(Demo: any) {
+        return class extends Component {
+            static template = '<div ref={this.elementRef}></div>';
+            private elementRef = createRef<HTMLElement>();
+
+            mounted() {
+                createApp({
+                    render: () => h(Demo)
+                }).mount(this.elementRef.value!);
+            }
+
+            beforeUnmount() {
+                render(null, this.elementRef.value!);
+            }
+        }
+    }
+
+    testDemos(reactReq, async (Demo) => {
+        const [instance, element] = mount(wrap(Demo as any));
+        await wait();
+        // FIXME: I don't why the width of `autoWidth` input is an unexpected value
+        // while we run test on Github Actions.
+        const innerHTML = element.innerHTML.replace(/(\<input.*?style="width: )(?:.*?)(px;")/g, '$1$2');
+        expect(innerHTML).to.matchSnapshot();
+    });
+});

package/__tests__/karma.conf.js

@@ -0,0 +1,54 @@
+const path = require('path');
+const os = require('os');
+const createWebpackConfig = require('./webpack.config');
+
+const isDebug = !process.env.UPDATE && !process.env.CI
+
+// for get font files
+// https://github.com/ryanclark/karma-webpack/issues/498#issuecomment-790040818
+const output = {
+    path: path.join(os.tmpdir(), '_karma_webpack_') + Math.floor(Math.random() * 1000000),
+};
+
+module.exports = function (config) {
+    config.set({
+        browsers: process.env.UPDATE || process.env.CI ? ['MyChromeHeadless'] : undefined,
+        customLaunchers: {
+            'MyChromeHeadless': {
+                base: 'ChromeHeadless',
+                flags: ['--window-size=1920,1080', '--force-device-scale-factor=1'],
+            }
+        },
+        frameworks: ['webpack', 'mocha', 'sinon-chai', 'snapshot', 'mocha-snapshot'],
+        reporters: ['mocha'],
+        files: [
+            './index.ts',
+            './__snapshots__/**/*.md',
+        ],
+        preprocessors: {
+            './index.ts': ['webpack', 'sourcemap'],
+            './__snapshots__/**/*.md': ['snapshot'],
+        },
+        webpack: {...createWebpackConfig().toConfig(), output},
+        // webpack: createWebpackConfig().toConfig(),
+        webpackMiddleware: {
+            // noInfo: true
+        },
+        autoWatch: true,
+        mochaReporter: {
+            showDiff: true,
+        },
+        client: {
+            mocha: {
+                reporter: 'html',
+                ui: 'bdd',
+            }
+        },
+        snapshot: {
+            update: process.env.UPDATE === '1',
+            prune: process.env.UPDATE === '3',
+        },
+        logLevel: config.LOG_INFO,
+        singleRun: !isDebug,
+    });
+};

package/__tests__/webpack.config.js

@@ -0,0 +1,61 @@
+const path = require('path');
+const genConfig = require('../../../scripts/webpack');
+const {VueLoaderPlugin} = require('vue-loader');
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
+const {addConfig} = require('../../../test/webpack');
+
+const resolve = (p) => path.resolve(__dirname, p);
+
+module.exports = function() {
+     const config = genConfig()
+        // .context(resolve(''))
+        .module
+            .rule('ts')
+                .test(/\.ts$/)
+                .use('ts')
+                    .loader('ts-loader')
+                    .options({
+                        appendTsSuffixTo: [/\.vue$/],
+                        configFile: resolve('../tsconfig.json'),
+                        happyPackMode: true,
+                    })
+                    .end()
+                .end()
+            .rule('vue')
+                .test(/\.vue$/)
+                .use('vue')
+                    .loader(resolve('../node_modules/vue-loader'))
+                    .end()
+                .end()
+            .end()
+        .resolve
+            .alias
+                .set('vue$', resolve('../node_modules/vue/dist/vue.esm-bundler.js'))
+                .set('vue-router', resolve('../node_modules/vue-router/dist/vue-router.esm-bundler.js'))
+            .end()
+        .end()
+        .plugin('vue')
+            .use(VueLoaderPlugin)
+            .end()
+        .devtool('inline-source-map');
+
+    config.stats({
+        errorDetails: true
+    });
+
+    addConfig(config);
+
+    // config.plugin('ts-checker').use(ForkTsCheckerWebpackPlugin, [{
+        // typescript: {
+            // configFile: resolve('../tsconfig.json'),
+            // diagnosticOptions: {
+                // semantic: true,
+                // syntactic: true,
+            // },
+        // },
+    // }]);
+
+    return config;
+}
+
+

package/components/breadcrumb/item.d.ts

@@ -1,6 +1,6 @@
 import { Component, TypeDefs } from 'intact-vue-next';
 export interface BreadcrumbItemProps {
-    to?: string;
+    to?: string | object;
 }
 export declare class BreadcrumbItem extends Component<BreadcrumbItemProps> {
     static template: string | import("intact").Template<any>;

package/components/breadcrumb/item.js

@@ -4,10 +4,9 @@ import { __decorate } from "tslib";
 import { Component } from 'intact-vue-next';
 import { bind } from '../utils';
 import template from './item.vdt';
-import { isExternalLink } from '../utils';
-import { useRouter } from '../../hooks/useRouter';
+import { useRouter, navigate } from '../../hooks/useRouter';
 var typeDefs = {
-  to: String
+  to: [String, Object]
 };
 export var BreadcrumbItem = /*#__PURE__*/function (_Component) {
   _inheritsLoose(BreadcrumbItem, _Component);
@@ -29,17 +28,7 @@ export var BreadcrumbItem = /*#__PURE__*/function (_Component) {
   var _proto = BreadcrumbItem.prototype;
 
   _proto.onClick = function onClick() {
-    var to = this.get('to');
-
-    if (to) {
-      var router = this.router.value;
-
-      if (router && !isExternalLink(to)) {
-        router.push(to);
-      } else {
-        window.location.href = to;
-      }
-    }
+    navigate(this.router.value, this.get('to'));
   };
 
   return BreadcrumbItem;

package/components/breadcrumb/styles.js

@@ -24,5 +24,5 @@ setDefault(function () {
   }).breadcrumb;
 });
 export default function makeStyles() {
-  return /*#__PURE__*/css("font-size:", breadcrumb.fontSize, ";.k-breadcrumb-item{display:inline-block;&:last-of-type .k-breadcrumb-link{font-weight:", breadcrumb.activeFontWeight, ";color:", breadcrumb.activeColor, ";}}.k-breadcrumb-link,.k-breadcrumb-link a{color:", breadcrumb.color, ";}a.k-breadcrumb-link:hover,.k-breadcrumb-link a:hover{color:", breadcrumb.hoverColor, ";}.k-breadcrumb-separator{margin:0 ", breadcrumb.gap, ";}");
+  return /*#__PURE__*/css("font-size:", breadcrumb.fontSize, ";display:flex;align-items:center;.k-breadcrumb-item{&:last-of-type .k-breadcrumb-link{font-weight:", breadcrumb.activeFontWeight, ";color:", breadcrumb.activeColor, ";}}.k-breadcrumb-link,.k-breadcrumb-link a{color:", breadcrumb.color, ";}a.k-breadcrumb-link,.k-breadcrumb-link a{cursor:pointer;&:hover{color:", breadcrumb.hoverColor, ";}}.k-breadcrumb-separator{margin:0 ", breadcrumb.gap, ";}");
 }

package/components/button/index.vdt.js

@@ -4,6 +4,8 @@ import { getRestProps } from '../utils';
 import { Icon } from '../icon';
 import { makeButtonStyles } from './styles';
 import { DynamicButton } from './dynamicButton';
+import { Wave } from '../wave';
+import { button as theme } from './styles';
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj;
 
@@ -72,22 +74,29 @@ export default function ($props, $blocks, $__proto__) {
   var buttonGroup = this.buttonGroup;
   var checkType = buttonGroup ? buttonGroup.get('checkType') : 'none';
   var isCheckType = checkType !== 'none';
-  return _$cc(DynamicButton, _extends({
-    'className': _$cn(classNameObj),
-    'tagName': tagName
-  }, getRestProps(this), {
-    'ref': this.elementRef,
-    'tabindex': disabled || loading ? '-1' : tabindex,
-    'ev-click': this.onClick,
-    'ev-mouseup': this.onMouseUp,
-    'htmlType': htmlType,
-    'name': isCheckType ? null : name,
-    'children': [loading ? iconSide === 'right' ? [children, loadingIcon] : [loadingIcon, children] : children, isCheckType ? _$ce(64, 'input', null, 1, 'k-button-input', {
-      'type': checkType,
-      'name': name,
-      'checked': checked,
-      'tabindex': '-1'
-    }) : undefined]
-  }), null, this.elementRef);
+  var typeStyles = theme[type];
+  var waveColor = typeStyles && typeStyles.borderColor || theme.primary.borderColor;
+  return _$cc(Wave, {
+    'disabled': loading || disabled || type === 'none' || type === 'link',
+    'inset': '-2px',
+    'color': waveColor,
+    'children': _$cc(DynamicButton, _extends({
+      'className': _$cn(classNameObj),
+      'tagName': tagName
+    }, getRestProps(this), {
+      'ref': this.elementRef,
+      'tabindex': disabled || loading ? '-1' : tabindex,
+      'ev-click': this.onClick,
+      'ev-mouseup': this.onMouseUp,
+      'htmlType': htmlType,
+      'name': isCheckType ? null : name,
+      'children': [loading ? iconSide === 'right' ? [children, loadingIcon] : [loadingIcon, children] : children, isCheckType ? _$ce(64, 'input', null, 1, 'k-button-input', {
+        'type': checkType,
+        'name': name,
+        'checked': checked,
+        'tabindex': '-1'
+      }) : undefined]
+    }), null, this.elementRef)
+  });
 }
 ;

package/components/button/styles.d.ts

@@ -1,6 +1,87 @@
 import '../../styles/global';
+declare type TypeStyles = {
+    color: string;
+    bgColor: string;
+    borderColor: string;
+    hoverBorderColor: string;
+    ghostColor: string;
+};
+declare type SizeStyles = {
+    fontSize: string;
+    height: string;
+    padding: string;
+};
 export declare const types: readonly ["primary", "warning", "danger", "active", "success"];
-declare let button: any;
+declare const defaults: {
+    readonly transition: string;
+    active: TypeStyles;
+    secondary: {
+        readonly color: string;
+        readonly borderColor: string;
+        readonly hoverBgColor: string;
+        readonly activeBgColor: string;
+    };
+    link: {
+        readonly color: string;
+        readonly hoverColor: string;
+        readonly hoverBgColor: string;
+    };
+    none: {
+        readonly hoverBgColor: string;
+    };
+    group: {
+        primary: {
+            readonly borderColor: string;
+        };
+        warning: {
+            readonly borderColor: string;
+        };
+        danger: {
+            readonly borderColor: string;
+        };
+        success: {
+            readonly borderColor: string;
+        };
+    };
+} & {
+    readonly color: string;
+    bgColor: string;
+    lineHeight: string;
+    readonly padding: string;
+    readonly borderColor: string;
+    readonly borderRadius: string;
+    readonly fontSize: string;
+    readonly height: string;
+    readonly hoverBorderColor: string;
+    readonly hoverColor: string;
+    ghost: {
+        color: string;
+        readonly hoverColor: string;
+        borderColor: string;
+        readonly hoverBorderColor: string;
+    };
+    icon: {
+        gap: string;
+        fontSize: string;
+    };
+    disabled: {
+        readonly color: string;
+        readonly bgColor: string;
+        readonly borderColor: string;
+        readonly ghostBorderColor: string;
+    };
+} & {
+    primary: TypeStyles;
+    warning: TypeStyles;
+    danger: TypeStyles;
+    success: TypeStyles;
+    active: TypeStyles;
+} & {
+    small: SizeStyles;
+    large: SizeStyles;
+    mini: SizeStyles;
+};
+declare let button: typeof defaults;
 export { button };
 export declare function makeButtonStyles({ iconSide }: {
     iconSide?: string;

package/components/button/styles.js

@@ -149,6 +149,10 @@ var btnSizeStyles = sizes.reduce(function (memo, size) {
   return memo;
 }, {});
 var defaults = deepDefaults({
+  get transition() {
+    return theme.transition.middle;
+  },
+
   active: btnActiveStyles,
   secondary: {
     get color() {
@@ -175,6 +179,16 @@ var defaults = deepDefaults({
 
     get hoverColor() {
       return theme.color.linkHover;
+    },
+
+    get hoverBgColor() {
+      return theme.color.hoverBg;
+    }
+
+  },
+  none: {
+    get hoverBgColor() {
+      return theme.color.bg;
     }
 
   },
@@ -221,10 +235,10 @@ export function makeButtonStyles(_ref) {
   return cx(
   /*#__PURE__*/
   // extract static styles to individual css method for performance
-  css("display:inline-flex;align-items:center;justify-content:center;cursor:pointer;height:", button.height, ";padding:", button.padding, ";outline:none;vertical-align:middle;color:", button.color, ";background:", button.bgColor, ";border-radius:", button.borderRadius, ";border:1px solid ", button.borderColor, ";font-size:", button.fontSize, ";white-space:nowrap;transition:all ", theme.transition, ";line-height:", button.lineHeight, ";&:hover,&:focus{border-color:", button.hoverBorderColor, ";color:", button.hoverColor, ";}&:active{background:", palette(theme.color.primary, -4), ";}.k-button-input{position:absolute;opacity:0;width:0;height:0;}", _mapInstanceProperty(types).call(types, function (type) {
+  css("display:inline-flex;align-items:center;justify-content:center;cursor:pointer;height:", button.height, ";padding:", button.padding, ";outline:none;vertical-align:middle;color:", button.color, ";background:", button.bgColor, ";border-radius:", button.borderRadius, ";border:1px solid ", button.borderColor, ";font-size:", button.fontSize, ";white-space:nowrap;transition:all ", button.transition, ";line-height:", button.lineHeight, ";&:hover,&:focus{border-color:", button.hoverBorderColor, ";color:", button.hoverColor, ";}&:active{background:", palette(theme.color.primary, -4), ";}.k-button-input{position:absolute;opacity:0;width:0;height:0;}", _mapInstanceProperty(types).call(types, function (type) {
     var typeStyles = button[type];
     return /*#__PURE__*/css("&.k-", type, "{background:", typeStyles.bgColor, ";color:", typeStyles.color, ";border-color:", typeStyles.borderColor, ";&:hover,&:focus{background:", palette(typeStyles.bgColor, -1), ";border-color:", typeStyles.hoverBorderColor, ";color:", typeStyles.color, ";}&:active{background:", palette(typeStyles.bgColor, 1), ";border-color:", palette(typeStyles.borderColor, 1), ";}}");
-  }), "&.k-secondary{color:", secondary.color, ";border-color:", secondary.borderColor, ";&:hover,&:focus{background:", secondary.hoverBgColor, ";}&:active{background:", secondary.activeBgColor, ";}}&.k-link{color:", link.color, ";&:hover{color:", link.hoverColor, ";}}&.k-disabled{&,&:hover{color:", button.disabled.color, ";background:", button.disabled.bgColor, ";border-color:", button.disabled.borderColor, ";cursor:not-allowed;}}&.k-none,&.k-link{&,&:hover{border:none;background:transparent;}&.k-active{color:", theme.color.primary, ";}}", _mapInstanceProperty(sizes).call(sizes, function (size) {
+  }), "&.k-secondary{color:", secondary.color, ";border-color:", secondary.borderColor, ";&:hover,&:focus{background:", secondary.hoverBgColor, ";}&:active{background:", secondary.activeBgColor, ";}}&.k-link{color:", link.color, ";&:hover{color:", link.hoverColor, ";background:", link.hoverBgColor, ";}}&.k-disabled{&,&:hover{color:", button.disabled.color, ";background:", button.disabled.bgColor, ";border-color:", button.disabled.borderColor, ";cursor:not-allowed;}}&.k-none,&.k-link{background:transparent;&,&:hover{border:none;}&.k-active{color:", theme.color.primary, ";}}&.k-none:hover{background:", button.none.hoverBgColor, ";}", _mapInstanceProperty(sizes).call(sizes, function (size) {
     var styles = button[size];
     return /*#__PURE__*/css("&.k-", size, "{font-size:", styles.fontSize, ";height:", styles.height, ";padding:", styles.padding, ";&.k-btn-icon{width:", styles.height, ";}}");
   }), "&.k-btn-icon{width:", button.height, ";padding:0;.k-icon{margin:0;}}&.k-fluid{width:100%;padding:0;}&.k-circle{border-radius:calc(", button.large.height, " / 2);}&.k-loading{", _mapInstanceProperty(types).call(types, function (type) {

package/components/card/styles.js

@@ -5,7 +5,7 @@ import '../../styles/global';
 var defaults = {
   border: '1px solid #e5e5e5',
   padding: '16px',
-  boxShadow: '0 0 20px 0 rgba(0, 0, 0, .06)',
+  boxShadow: '0 0 8px 0 rgba(0, 0, 0, .05)',
   headerHeight: '48px',
   headerFontSize: '14px',
   bgColor: '#fff'

package/components/carousel/styles.js

@@ -3,7 +3,10 @@ import { theme, setDefault } from '../../styles/theme';
 import { deepDefaults } from '../../styles/utils';
 import '../../styles/global';
 var defaults = {
-  transition: ".5s ease",
+  get transition() {
+    return theme.transition.large;
+  },
+
   height: "300px",
   indicator: {
     bottom: "8px",

package/components/carousel/useSlide.js

@@ -48,7 +48,7 @@ export function useSlide(getItems, getItemsWithCloned) {
 
   function _translateToItem() {
     _translateToItem = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(item, oldIndex, newIndex, keepDirection) {
-      var itemsWithCloned, length;
+      var itemsWithCloned, length, lengthWithCloned;
       return _regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) {
           switch (_context.prev = _context.next) {
@@ -62,7 +62,7 @@ export function useSlide(getItems, getItemsWithCloned) {
 
             case 2:
               if (!keepDirection) {
-                _context.next = 13;
+                _context.next = 14;
                 break;
               }
 
@@ -75,25 +75,26 @@ export function useSlide(getItems, getItemsWithCloned) {
               }
 
               _context.next = 8;
-              return setTranslate(itemsWithCloned[0], false);
+              return setTranslate(itemsWithCloned[(itemsWithCloned.length - length) / 2 - 1], false);
 
             case 8:
-              _context.next = 13;
+              _context.next = 14;
               break;
 
             case 10:
               if (!(oldIndex === 0 && newIndex === length - 1)) {
-                _context.next = 13;
+                _context.next = 14;
                 break;
               }
 
-              _context.next = 13;
-              return setTranslate(itemsWithCloned[itemsWithCloned.length - 1], false);
+              lengthWithCloned = itemsWithCloned.length;
+              _context.next = 14;
+              return setTranslate(itemsWithCloned[lengthWithCloned - (lengthWithCloned - length) / 2], false);
 
-            case 13:
+            case 14:
               setTranslate(item, true);
 
-            case 14:
+            case 15:
             case "end":
               return _context.stop();
           }