@king-design/vue 2.0.0-beta.0

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

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

package/components/checkbox/index.spec.js

@@ -0,0 +1,217 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
+import _Array$from2 from "@babel/runtime-corejs3/core-js/array/from";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import { __decorate } from "tslib";
+import { Component } from 'intact-vue-next';
+import GroupDemo from '~/components/checkbox/demos/group';
+import ValueDemo from '~/components/checkbox/demos/value';
+import BasicDemo from '~/components/checkbox/demos/basic';
+import { mount, unmount, dispatchEvent, wait } from '../../test/utils';
+import { Checkbox } from './';
+import { bind } from '../utils';
+describe('Checkbox', function () {
+  afterEach(function () {
+    return unmount();
+  });
+  it('should get value correctly of group checkboxes', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    var _mount, instance, element, _Array$from, first, second;
+
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _mount = mount(GroupDemo), instance = _mount[0], element = _mount[1];
+            _Array$from = _Array$from2(element.querySelectorAll('.k-checkbox')), first = _Array$from[0], second = _Array$from[1];
+            first.click();
+            _context.next = 5;
+            return wait();
+
+          case 5:
+            expect(instance.get('languages')).be.eql(['Javascript']);
+            second.click();
+            _context.next = 9;
+            return wait();
+
+          case 9:
+            expect(instance.get('languages')).be.eql(['Javascript', 'C++']);
+            first.click();
+            _context.next = 13;
+            return wait();
+
+          case 13:
+            expect(instance.get('languages')).be.eql(['C++']);
+
+          case 14:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  })));
+  it('should get value correctly of checkbox which set trueValue and falseValue', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+    var _mount2, instance, element, _Array$from3, first, second, third;
+
+    return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            _mount2 = mount(ValueDemo), instance = _mount2[0], element = _mount2[1];
+            _Array$from3 = _Array$from2(element.querySelectorAll('.k-checkbox')), first = _Array$from3[0], second = _Array$from3[1], third = _Array$from3[2];
+            first.click();
+            _context2.next = 5;
+            return wait();
+
+          case 5:
+            expect(instance.get('value1')).be.true;
+            first.click();
+            _context2.next = 9;
+            return wait();
+
+          case 9:
+            expect(instance.get('value1')).be.false;
+            second.click();
+            _context2.next = 13;
+            return wait();
+
+          case 13:
+            expect(instance.get('value2')).be.eql('checked');
+            second.click();
+            _context2.next = 17;
+            return wait();
+
+          case 17:
+            expect(instance.get('value2')).be.false;
+            third.click();
+            _context2.next = 21;
+            return wait();
+
+          case 21:
+            expect(instance.get('value3')).be.eql(instance.get('checkedValue'));
+            third.click();
+            _context2.next = 25;
+            return wait();
+
+          case 25:
+            expect(instance.get('value3')).be.eql(0);
+
+          case 26:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  })));
+  it('should check when press enter key for enabled checkbox', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
+    var _mount3, instance, element, _Array$from4, first, second;
+
+    return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+      while (1) {
+        switch (_context3.prev = _context3.next) {
+          case 0:
+            _mount3 = mount(BasicDemo), instance = _mount3[0], element = _mount3[1];
+            _Array$from4 = _Array$from2(element.querySelectorAll('.k-checkbox')), first = _Array$from4[0], second = _Array$from4[1];
+            dispatchEvent(first, 'keypress', {
+              keyCode: 13
+            });
+            _context3.next = 5;
+            return wait();
+
+          case 5:
+            expect(first.className).include('k-checked');
+            dispatchEvent(second, 'keypress', {
+              keyCode: 13
+            });
+            _context3.next = 9;
+            return wait();
+
+          case 9:
+            expect(second.className).not.include('k-checked');
+
+          case 10:
+          case "end":
+            return _context3.stop();
+        }
+      }
+    }, _callee3);
+  })));
+  it('should only trigger change event once', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
+    var spy, Demo, _mount4, instance, element, _Array$from5, checkbox1, checkbox2, checkbox3;
+
+    return _regeneratorRuntime.wrap(function _callee4$(_context5) {
+      while (1) {
+        switch (_context5.prev = _context5.next) {
+          case 0:
+            spy = sinon.spy();
+
+            Demo = /*#__PURE__*/function (_Component) {
+              _inheritsLoose(Demo, _Component);
+
+              function Demo() {
+                var _context4;
+
+                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(_context4 = [this]).call(_context4, args)) || this;
+                _this.Checkbox = Checkbox;
+                return _this;
+              }
+
+              var _proto = Demo.prototype;
+
+              _proto.onChange = function onChange(v) {
+                this.set('value', v);
+                spy(v);
+              };
+
+              return Demo;
+            }(Component);
+
+            Demo.template = "\n                const {Checkbox} = this;\n                <div>\n                    <Checkbox v-for={[1, 2, 3]} \n                        trueValue={$value} \n                        name=\"name\"\n                        value={this.get('value')} \n                        ev-change={this.onChange}\n                        disabled={$value === 3}\n                    />\n                </div>\n            ";
+
+            Demo.defaults = function () {
+              return {
+                value: [1]
+              };
+            };
+
+            __decorate([bind], Demo.prototype, "onChange", null);
+
+            _mount4 = mount(Demo), instance = _mount4[0], element = _mount4[1];
+            _Array$from5 = _Array$from2(element.querySelectorAll('.k-checkbox')), checkbox1 = _Array$from5[0], checkbox2 = _Array$from5[1], checkbox3 = _Array$from5[2];
+            checkbox2.click();
+            _context5.next = 10;
+            return wait();
+
+          case 10:
+            expect(spy.callCount).to.eql(1);
+            expect(spy.calledWith([1, 2])).to.eql(true);
+            checkbox1.click();
+            _context5.next = 15;
+            return wait();
+
+          case 15:
+            expect(spy.callCount).to.eql(2);
+            expect(spy.calledWith([2])).to.eql(true);
+            checkbox3.click();
+            _context5.next = 20;
+            return wait();
+
+          case 20:
+            expect(spy.callCount).to.eql(2);
+
+          case 21:
+          case "end":
+            return _context5.stop();
+        }
+      }
+    }, _callee4);
+  })));
+});
+
+export {normalize} from 'intact-vue-next';

package/components/checkbox/index.vdt.js

@@ -0,0 +1,67 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime-corejs3/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["className", "disabled", "falseValue", "children", "value", "trueValue", "style", "indeterminate", "title"];
+import { createVNode as _$cv, className as _$cn, createElementVNode as _$ce } from 'intact-vue-next';
+import { getRestProps } from '../utils';
+import makeStyles from './styles';
+export default function ($props, $blocks, $__proto__) {
+  var _classNameObj;
+
+  $blocks || ($blocks = {});
+  $props || ($props = {});
+  var $this = this;
+
+  var _this$get = this.get(),
+      className = _this$get.className,
+      disabled = _this$get.disabled,
+      falseValue = _this$get.falseValue,
+      children = _this$get.children,
+      value = _this$get.value,
+      trueValue = _this$get.trueValue,
+      style = _this$get.style,
+      indeterminate = _this$get.indeterminate,
+      title = _this$get.title,
+      rest = _objectWithoutPropertiesLoose(_this$get, _excluded);
+
+  var isChecked = this.isChecked();
+  var classNameObj = (_classNameObj = {
+    'k-checkbox': true,
+    'k-disabled': disabled,
+    'k-checked': isChecked,
+    'k-indeterminate': indeterminate
+  }, _classNameObj[className] = className, _classNameObj[makeStyles()] = true, _classNameObj);
+  var events = ['ev-click', 'ev-change', 'ev-mouseenter', 'ev-mouseleave'].reduce(function (memo, name) {
+    if (rest[name]) {
+      if (name === 'ev-click' || name === 'ev-change') {// do not bind click to label, otherwise it will trigger click event twice
+        // don't bind change to input, use click instead of, #448
+        // evClick = rest[name];
+      } else {
+        memo[name] = rest[name];
+      }
+
+      delete rest[name];
+    }
+
+    return memo;
+  }, {});
+  return _$cv('label', _extends({
+    'className': _$cn(classNameObj),
+    'style': style,
+    'tabindex': disabled ? null : "0",
+    'title': title,
+    'ev-click': this.onClick,
+    'ev-keypress': this.onKeypress
+  }, events), [_$ce(2, 'span', _$cv('input', _extends({
+    'type': 'checkbox',
+    'checked': isChecked,
+    'value': trueValue,
+    'trueValue': trueValue,
+    'falseValue': falseValue,
+    'disabled': disabled,
+    'tabindex': '-1',
+    'ref': this.inputRef
+  }, getRestProps(this, rest))), 2, 'k-checkbox-wrapper'), children ? _$ce(2, 'span', children, 0, 'k-checkbox-text') : undefined]);
+}
+;
+
+export {normalize} from 'intact-vue-next';

package/components/checkbox/styles.d.ts

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

package/components/checkbox/styles.js

@@ -0,0 +1,77 @@
+import { css } from '@emotion/css';
+import { theme, setDefault } from '../../styles/theme';
+import { deepDefaults } from '../../styles/utils';
+import '../../styles/global';
+var defaults = {
+  width: '14px',
+
+  get borderColor() {
+    return theme.color.darkBorder;
+  },
+
+  get borderRadius() {
+    return theme.borderRadius;
+  },
+
+  get transition() {
+    return theme.transition;
+  },
+
+  bgColor: '#fff',
+  // text
+  text: {
+    gap: '8px'
+  },
+  // checked
+  checked: {
+    get borderColor() {
+      return theme.color.primary;
+    },
+
+    get bgColor() {
+      return checkbox.checked.borderColor;
+    }
+
+  },
+  inner: {
+    width: '5px',
+    height: '10px',
+    top: '-1px',
+    left: '4px',
+    border: '1px solid #fff'
+  },
+  // disabled
+  disabled: {
+    get color() {
+      return theme.color.disabled;
+    },
+
+    get borderColor() {
+      return theme.color.disabledBorder;
+    },
+
+    get bgColor() {
+      return theme.color.disabledBg;
+    },
+
+    get innerColor() {
+      return theme.color.disabledBorder;
+    }
+
+  },
+  // indeterminate
+  indeterminate: {
+    innerLeft: '3px'
+  }
+};
+var checkbox;
+setDefault(function () {
+  checkbox = deepDefaults(theme, {
+    checkbox: defaults
+  }).checkbox;
+});
+export default function makeStyles() {
+  return /*#__PURE__*/css("display:inline-flex;align-items:center;cursor:pointer;vertical-align:middle;.k-checkbox-wrapper{display:inline-block;width:", checkbox.width, ";height:", checkbox.width, ";vertical-align:middle;border:1px solid ", checkbox.borderColor, ";border-radius:", checkbox.borderRadius, ";position:relative;transition:all ", checkbox.transition, ";background:", checkbox.bgColor, ";flex:0 0 auto;&:before{content:\"\";display:block;position:absolute;width:", checkbox.inner.width, ";height:", checkbox.inner.height, ";top:", checkbox.inner.top, ";left:", checkbox.inner.left, ";border:", checkbox.inner.border, ";border-top:0;border-left:0;transform:rotate(45deg) scale(0);transition:all ", checkbox.transition, ";}}input{width:100%;height:100%;opacity:0;cursor:pointer;position:absolute;left:0;top:0;margin:0;}.k-checkbox-text{vertical-align:middle;margin-left:", checkbox.text.gap, ";display:inline-block;flex:0 1 auto;}&.k-checked,&.k-indeterminate{.k-checkbox-wrapper{border-color:", checkbox.checked.borderColor, ";background:", checkbox.checked.bgColor, ";}}&.k-indeterminate{.k-checkbox-wrapper{&:before{transform:rotate(90deg) scale(1);border-bottom:0;left:", checkbox.indeterminate.innerLeft, ";}}}&.k-checked{.k-checkbox-wrapper{&:before{transform:rotate(45deg) scale(1);}}}&:focus{outline:none;.k-checkbox-wrapper{border-color:", checkbox.checked.borderColor, ";}}&.k-disabled{color:", checkbox.disabled.color, ";cursor:not-allowed;.k-checkbox-wrapper{border-color:", checkbox.disabled.borderColor, ";background:", checkbox.disabled.bgColor, ";&:before{border-color:", checkbox.disabled.innerColor, ";}}input{cursor:not-allowed;}}");
+}
+
+export {normalize} from 'intact-vue-next';

package/components/code/crossDomain.d.ts

@@ -0,0 +1,4 @@
+export declare function crossDomainWorker(): void;
+
+
+export {normalize} from 'intact-vue-next';

package/components/code/crossDomain.js

@@ -0,0 +1,48 @@
+import _URL from "@babel/runtime-corejs3/core-js/url";
+export function crossDomainWorker() {
+  if (!window.MonacoEnvironment) return;
+  var oldGetWorkerUrl = window.MonacoEnvironment.getWorkerUrl;
+  if (oldGetWorkerUrl.$) return;
+  oldGetWorkerUrl.$ = true;
+
+  window.MonacoEnvironment.getWorkerUrl = function (moduleId, label) {
+    var workerUrl = oldGetWorkerUrl(moduleId, label);
+
+    var _isSameOrigin = isSameOrigin(workerUrl),
+        isSame = _isSameOrigin.isSame,
+        url = _isSameOrigin.url;
+    /* istanbul ignore else */
+
+
+    if (isSame) return workerUrl;else {
+      var blob;
+
+      try {
+        blob = new Blob(["importScripts('" + url + "');"], {
+          type: 'application/javascript'
+        });
+      } catch (e) {
+        var blobBuilder = new (window.BlobBuilder || window.WebKitBlobBuilder || window.MozBlobBuilder)();
+        blobBuilder.append("importScripts('" + url + "');");
+        blob = blobBuilder.getBlob('application/javascript');
+      }
+
+      var URL = _URL || window.webkitURL;
+      var blobUrl = URL.createObjectURL(blob);
+      return blobUrl;
+    }
+  };
+}
+
+function isSameOrigin(url) {
+  var loc = window.location;
+  var a = document.createElement('a');
+  a.href = url;
+  return {
+    isSame: a.hostname === loc.hostname && a.port === loc.port && a.protocol === loc.protocol,
+    // maybe the protocol is relative
+    url: a.href
+  };
+}
+
+export {normalize} from 'intact-vue-next';

package/components/code/index.d.ts

@@ -0,0 +1,26 @@
+import { Component, TypeDefs } from 'intact-vue-next';
+import type { editor } from 'monaco-editor';
+import type { Events } from '../types';
+export interface CodeProps {
+    value?: string;
+    language?: string;
+    theme?: 'vs' | 'vs-dark' | 'hc-black';
+    readOnly?: boolean;
+    width?: string;
+    height?: string;
+    options?: editor.IStandaloneEditorConstructionOptions;
+}
+export interface CodeEvents {
+    ready: [editor.IStandaloneCodeEditor, typeof editor];
+}
+export declare class Code extends Component<CodeProps, CodeEvents> {
+    static template: string | import("intact").Template<any>;
+    static typeDefs: Required<TypeDefs<CodeProps>>;
+    static defaults: () => Partial<CodeProps>;
+    static events: Events<CodeEvents>;
+    private editor;
+    getEditor(): editor.IStandaloneCodeEditor | null;
+}
+
+
+export {normalize} from 'intact-vue-next';

package/components/code/index.js

@@ -0,0 +1,58 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import { Component } from 'intact-vue-next';
+import template from './index.vdt';
+import { useEditor } from './useEditor';
+var typeDefs = {
+  value: String,
+  language: String,
+  theme: ['vs', 'vs-dark', 'hc-black'],
+  readOnly: Boolean,
+  width: String,
+  height: String,
+  options: Object
+};
+
+var defaults = function defaults() {
+  return {
+    value: '',
+    language: 'javascript',
+    theme: 'vs',
+    options: {}
+  };
+};
+
+var events = {
+  ready: true
+};
+export var Code = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(Code, _Component);
+
+  function Code() {
+    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.editor = useEditor();
+    return _this;
+  }
+
+  var _proto = Code.prototype;
+
+  _proto.getEditor = function getEditor() {
+    return this.editor.getEditor();
+  };
+
+  return Code;
+}(Component);
+Code.template = template;
+Code.typeDefs = typeDefs;
+Code.defaults = defaults;
+Code.events = events;
+
+export {normalize} from 'intact-vue-next';

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

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

package/components/code/index.spec.js

@@ -0,0 +1,73 @@
+import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
+import _Promise from "@babel/runtime-corejs3/core-js/promise";
+import BasicDemo from '~/components/code/demos/basic';
+import { mount, unmount, wait } from '../../test/utils';
+describe('Code', function () {
+  afterEach(function () {
+    return unmount();
+  });
+  it('should update status', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    var _mount, instance, element, code, set, editor;
+
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            this.timeout(0);
+            _mount = mount(BasicDemo), instance = _mount[0], element = _mount[1];
+            code = instance.$lastInput.children;
+            _context.next = 5;
+            return new _Promise(function (resolve) {
+              code.on('ready', resolve);
+            });
+
+          case 5:
+            set = function set(name, value) {
+              code.set(name, value);
+              code.trigger("$receive:" + name, value);
+            }; // change language
+
+
+            set('language', 'php');
+            expect(element.dataset.modeId).to.eql('php'); // change theme
+
+            set('theme', 'vs-dark');
+            expect(element.querySelector('.monaco-editor').classList.contains('vs-dark')).to.be.true; // change options
+
+            set('options', {
+              minimap: {
+                enabled: false
+              }
+            });
+            expect(element.querySelector('.minimap').style.width).to.eql('0px'); // change size
+
+            set('height', '300px');
+            _context.next = 15;
+            return wait(0);
+
+          case 15:
+            expect(element.querySelector('.monaco-editor').style.height).to.eql('300px'); // change value
+
+            editor = code.getEditor();
+            editor.setValue('test');
+            expect(instance.get('value')).to.eql('test');
+            instance.set('value', 'hello');
+            _context.next = 22;
+            return wait();
+
+          case 22:
+            expect(editor.getValue()).to.eql('hello'); // change readonly
+
+            set('readOnly', true);
+
+          case 24:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee, this);
+  })));
+});
+
+export {normalize} from 'intact-vue-next';

package/components/code/index.vdt.js

@@ -0,0 +1,54 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import { createVNode as _$cv, className as _$cn, createUnknownComponentVNode as _$cc } from 'intact-vue-next';
+import { addStyle, getRestProps } from '../utils';
+import { Spin } from '../spin';
+import { makeStyles } from './styles';
+var _$tmp0 = {
+  'center': true,
+  'overlay': true,
+  'size': 'small'
+};
+export default function ($props, $blocks, $__proto__) {
+  var _classNameObj;
+
+  $blocks || ($blocks = {});
+  $props || ($props = {});
+  var $this = this;
+
+  var _this$get = this.get(),
+      width = _this$get.width,
+      height = _this$get.height,
+      className = _this$get.className,
+      style = _this$get.style;
+
+  var classNameObj = (_classNameObj = {
+    'k-code': true
+  }, _classNameObj[className] = className, _classNameObj[makeStyles()] = true, _classNameObj);
+
+  if (width || height) {
+    var _style = {};
+
+    if (width) {
+      _style.width = width;
+    }
+
+    if (height) {
+      _style.height = height;
+    }
+
+    style = addStyle(style, _style);
+  }
+
+  var _this$editor = this.editor,
+      elementRef = _this$editor.elementRef,
+      loading = _this$editor.loading;
+  return _$cv('div', _extends({
+    'className': _$cn(classNameObj)
+  }, getRestProps(this), {
+    'style': style,
+    'ref': elementRef
+  }), loading.value ? _$cc(Spin, _$tmp0) : undefined);
+}
+;
+
+export {normalize} from 'intact-vue-next';

package/components/code/styles.d.ts

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

package/components/code/styles.js

@@ -0,0 +1,16 @@
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+
+import { css } from '@emotion/css';
+import '../../styles/global';
+export function makeStyles() {
+  return /*#__PURE__*/css(process.env.NODE_ENV === "production" ? {
+    name: "1wv4onu",
+    styles: "position:relative;height:100%"
+  } : {
+    name: "1wv4onu",
+    styles: "position:relative;height:100%",
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+  });
+}
+
+export {normalize} from 'intact-vue-next';

package/components/code/useEditor.d.ts

@@ -0,0 +1,9 @@
+import type { editor } from 'monaco-editor';
+export declare function useEditor(): {
+    elementRef: import('intact-vue-next').RefObject<HTMLElement>;
+    loading: import("../../hooks/useState").State<boolean>;
+    getEditor: () => editor.IStandaloneCodeEditor | null;
+};
+
+
+export {normalize} from 'intact-vue-next';