@king-design/vue 2.0.0-beta.0 → 2.0.1

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/affix/index.d.ts

@@ -27,6 +27,3 @@ export declare class Affix extends Component<AffixProps, AffixEvents> {
     private elementRef;
     private style;
 }
-
-
-export {normalize} from 'intact-vue-next';

package/components/affix/index.js

@@ -30,6 +30,4 @@ export var Affix = /*#__PURE__*/function (_Component) {
   return Affix;
 }(Component);
 Affix.template = template;
-Affix.typeDefs = typeDefs;
-
-export {normalize} from 'intact-vue-next';
+Affix.typeDefs = typeDefs;

package/components/affix/index.spec.d.ts

@@ -1,4 +1 @@
 export {};
-
-
-export {normalize} from 'intact-vue-next';

package/components/affix/index.spec.js

@@ -127,6 +127,4 @@ describe('Affix', function () {
       }
     }, _callee2, this);
   })));
-});
-
-export {normalize} from 'intact-vue-next';
+});

package/components/affix/index.vdt.js

@@ -30,6 +30,4 @@ export default function ($props, $blocks, $__proto__) {
     'style': _style.value
   }));
 }
-;
-
-export {normalize} from 'intact-vue-next';
+;

package/components/affix/styles.d.ts

@@ -1,5 +1,2 @@
 import '../../styles/global';
 export declare function makeStyles(): string;
-
-
-export {normalize} from 'intact-vue-next';

package/components/affix/styles.js

@@ -13,6 +13,4 @@ setDefault(function () {
 });
 export function makeStyles() {
   return /*#__PURE__*/css("position:relative;z-index:", affix.zIndex, ";");
-}
-
-export {normalize} from 'intact-vue-next';
+}

package/components/affix/useStyle.d.ts

@@ -3,6 +3,3 @@ export declare function useStyle(elementRef: RefObject<HTMLElement>): {
     style: import("../../hooks/useState").State<Record<string, string> | null>;
     containerStyle: import("../../hooks/useState").State<Record<string, string> | null>;
 };
-
-
-export {normalize} from 'intact-vue-next';

package/components/affix/useStyle.js

@@ -120,6 +120,4 @@ export function useStyle(elementRef) {
     style: style,
     containerStyle: containerStyle
   };
-}
-
-export {normalize} from 'intact-vue-next';
+}

package/components/badge/index.d.ts

@@ -8,6 +8,3 @@ export declare class Badge extends Component<BadgeProps> {
     static template: string | import("intact").Template<any>;
     static typeDefs: Required<TypeDefs<BadgeProps>>;
 }
-
-
-export {normalize} from 'intact-vue-next';

package/components/badge/index.js

@@ -16,6 +16,4 @@ export var Badge = /*#__PURE__*/function (_Component) {
   return Badge;
 }(Component);
 Badge.template = template;
-Badge.typeDefs = typeDefs;
-
-export {normalize} from 'intact-vue-next';
+Badge.typeDefs = typeDefs;

package/components/badge/index.vdt.js

@@ -27,6 +27,4 @@ export default function ($props, $blocks, $__proto__) {
     'className': _$cn(classNameObj)
   }), [children, !disabled ? _$ce(2, 'sup', text, 0, 'k-badge-text') : undefined]);
 }
-;
-
-export {normalize} from 'intact-vue-next';
+;

package/components/badge/styles.d.ts

@@ -1,5 +1,2 @@
 import '../../styles/global';
 export default function makeStyles(): string;
-
-
-export {normalize} from 'intact-vue-next';

package/components/badge/styles.js

@@ -23,6 +23,4 @@ setDefault(function () {
 });
 export default function makeStyles() {
   return /*#__PURE__*/css("display:inline-block;position:relative;vertical-align:middle;>.k-badge-text{display:inline-block;position:absolute;width:", badge.width, ";height:", badge.height, ";border-radius:50%;top:0;right:0;transform:translate(50%, -50%);background:", badge.bgColor, ";font-size:75%;vertical-align:baseline;}&.k-has-text>.k-badge-text{width:auto;height:", badge.textHeight, ";line-height:", badge.textHeight, ";border-radius:calc(", badge.textHeight, " / 2);padding:0 ", badge.textPadding, ";color:", badge.textColor, ";}&.k-alone>.k-badge-text{position:static;transform:none;}");
-}
-
-export {normalize} from 'intact-vue-next';
+}

package/components/breadcrumb/index.d.ts

@@ -13,6 +13,3 @@ export declare class Breadcrumb extends Component<BreadcrumbProps, BreadcrumbEve
     static typeDefs: Required<TypeDefs<BreadcrumbProps>>;
     static defaults: () => Partial<BreadcrumbProps>;
 }
-
-
-export {normalize} from 'intact-vue-next';

package/components/breadcrumb/index.js

@@ -23,6 +23,4 @@ export var Breadcrumb = /*#__PURE__*/function (_Component) {
 }(Component);
 Breadcrumb.template = template;
 Breadcrumb.typeDefs = typeDefs;
-Breadcrumb.defaults = defaults;
-
-export {normalize} from 'intact-vue-next';
+Breadcrumb.defaults = defaults;

package/components/breadcrumb/index.spec.d.ts

@@ -1,4 +1 @@
 export {};
-
-
-export {normalize} from 'intact-vue-next';

package/components/breadcrumb/index.spec.js

@@ -41,6 +41,4 @@ describe('Breadcrumb', function () {
   // history.back();
   // document.body.removeChild(app.$el);
   // });
-});
-
-export {normalize} from 'intact-vue-next';
+});

package/components/breadcrumb/index.vdt.js

@@ -57,6 +57,4 @@ export default function ($props, $blocks, $__proto__) {
     'className': _$cn(classNameObj)
   }, getRestProps(this)), vNodes);
 }
-;
-
-export {normalize} from 'intact-vue-next';
+;

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>;
@@ -8,6 +8,3 @@ export declare class BreadcrumbItem extends Component<BreadcrumbItemProps> {
     private router;
     private onClick;
 }
-
-
-export {normalize} from 'intact-vue-next';

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;
@@ -47,6 +36,4 @@ export var BreadcrumbItem = /*#__PURE__*/function (_Component) {
 BreadcrumbItem.template = template;
 BreadcrumbItem.typeDefs = typeDefs;
 
-__decorate([bind], BreadcrumbItem.prototype, "onClick", null);
-
-export {normalize} from 'intact-vue-next';
+__decorate([bind], BreadcrumbItem.prototype, "onClick", null);

package/components/breadcrumb/item.vdt.js

@@ -22,6 +22,4 @@ export default function ($props, $blocks, $__proto__) {
     'ev-click': this.onClick
   }) : _$ce(2, 'span', children, 0, 'k-breadcrumb-link'));
 }
-;
-
-export {normalize} from 'intact-vue-next';
+;

package/components/breadcrumb/styles.d.ts

@@ -1,5 +1,2 @@
 import '../../styles/global';
 export default function makeStyles(): string;
-
-
-export {normalize} from 'intact-vue-next';

package/components/breadcrumb/styles.js

@@ -24,7 +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, ";}");
-}
-
-export {normalize} from 'intact-vue-next';
+  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/constants.d.ts

@@ -1,4 +1 @@
 export declare const BUTTON_GROUP = "ButtonGroup";
-
-
-export {normalize} from 'intact-vue-next';

package/components/button/constants.js

@@ -1,3 +1 @@
-export var BUTTON_GROUP = 'ButtonGroup';
-
-export {normalize} from 'intact-vue-next';
+export var BUTTON_GROUP = 'ButtonGroup';

package/components/button/dynamicButton.d.ts

@@ -6,6 +6,3 @@ export declare type DynamicButtonProps = {
     type?: string;
 };
 export declare const DynamicButton: ComponentFunction<DynamicButtonProps>;
-
-
-export {normalize} from 'intact-vue-next';

package/components/button/dynamicButton.js

@@ -19,6 +19,4 @@ export var DynamicButton = function DynamicButton(_ref) {
   }
 
   return h(tagName, props);
-};
-
-export {normalize} from 'intact-vue-next';
+};

package/components/button/group.d.ts

@@ -12,6 +12,3 @@ export declare class ButtonGroup extends Component<ButtonGroupProps> {
     init(): void;
     setValue(v: any): void;
 }
-
-
-export {normalize} from 'intact-vue-next';

package/components/button/group.js

@@ -46,6 +46,4 @@ export var ButtonGroup = /*#__PURE__*/function (_Component) {
 }(Component);
 ButtonGroup.template = template;
 ButtonGroup.typeDefs = typeDefs;
-ButtonGroup.defaults = defaults;
-
-export {normalize} from 'intact-vue-next';
+ButtonGroup.defaults = defaults;

package/components/button/group.vdt.js

@@ -24,6 +24,4 @@ export default function ($props, $blocks, $__proto__) {
     'className': _$cn(classNameObj)
   }, getRestProps(this)), children);
 }
-;
-
-export {normalize} from 'intact-vue-next';
+;

package/components/button/index.d.ts

@@ -46,6 +46,3 @@ export declare class Button extends Component<ButtonProps, ButtonEvents> {
     private onClick;
     private onMouseUp;
 }
-
-
-export {normalize} from 'intact-vue-next';

package/components/button/index.js

@@ -116,6 +116,4 @@ Button.defaults = defaults;
 
 __decorate([bind], Button.prototype, "onClick", null);
 
-__decorate([bind], Button.prototype, "onMouseUp", null);
-
-export {normalize} from 'intact-vue-next';
+__decorate([bind], Button.prototype, "onMouseUp", null);

package/components/button/index.spec.d.ts

@@ -1,4 +1 @@
 export {};
-
-
-export {normalize} from 'intact-vue-next';

package/components/button/index.spec.js

@@ -124,6 +124,4 @@ describe('Button', function () {
       }
     }, _callee3);
   })));
-});
-
-export {normalize} from 'intact-vue-next';
+});