@king-design/vue 3.0.0-beta.0 → 3.0.0-beta.2

package/components/colorpicker/index.js

@@ -2,6 +2,7 @@ import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
 import { Component } from 'intact-vue-next';
 import template from './index.vdt';
 import { sizes } from '../../styles/utils';
+import { Dropdown } from '../dropdown';
 var typeDefs = {
   value: {
     type: String,
@@ -11,13 +12,17 @@ var typeDefs = {
   size: sizes,
   disabled: Boolean,
   container: [Function, String],
-  show: Boolean
+  show: Boolean,
+  position: Dropdown.typeDefs.position
 };
 
 var defaults = function defaults() {
   return {
     presets: ['#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321', '#417505', '#BD10E0', '#9013FE', '#4A90E2', '#50E3C2', '#B8E986', '#000000', '#4A4A4A', '#9B9B9B', '#FFFFFF'],
-    size: 'default'
+    size: 'default',
+    position: {
+      collision: 'fit'
+    }
   };
 };
 

package/components/colorpicker/index.vdt.js

@@ -19,7 +19,8 @@ export default function ($props, $blocks, $__proto__) {
       value = _this$get.value,
       size = _this$get.size,
       disabled = _this$get.disabled,
-      container = _this$get.container;
+      container = _this$get.container,
+      position = _this$get.position;
 
   var classNameObj = (_classNameObj = {
     'k-colorpicker': true
@@ -27,11 +28,7 @@ export default function ($props, $blocks, $__proto__) {
   return _$cv('div', _extends({
     'className': _$cn(classNameObj)
   }, getRestProps(this)), _$cc(Dropdown, {
-    'position': {
-      my: 'left top+8',
-      at: 'left bottom',
-      collision: 'flip'
-    },
+    'position': position,
     'trigger': 'click',
     'disabled': disabled,
     'container': container,

package/components/copy/index.d.ts

@@ -0,0 +1,17 @@
+import { Component, TypeDefs } from 'intact-vue-next';
+import { Events } from '../types';
+export interface CopyProps {
+    text: string;
+    showMessage?: boolean;
+}
+export interface CopyEvents {
+    success: [string];
+    error: [];
+}
+export declare class Copy extends Component<CopyProps, CopyEvents> {
+    static template: string | import("intact").Template<any>;
+    static typeDefs: Required<TypeDefs<CopyProps>>;
+    static defaults: () => Partial<CopyProps>;
+    static events: Events<CopyEvents>;
+    private copy;
+}

package/components/copy/index.js

@@ -0,0 +1,43 @@
+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 { useCopy } from './useCopy';
+var typeDefs = {
+  text: String,
+  showMessage: Boolean
+};
+
+var defaults = function defaults() {
+  return {
+    showMessage: true
+  };
+};
+
+var events = {
+  success: true,
+  error: true
+};
+export var Copy = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(Copy, _Component);
+
+  function Copy() {
+    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.copy = useCopy();
+    return _this;
+  }
+
+  return Copy;
+}(Component);
+Copy.template = template;
+Copy.typeDefs = typeDefs;
+Copy.defaults = defaults;
+Copy.events = events;

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

@@ -0,0 +1 @@
+export {};

package/components/copy/index.spec.js

@@ -0,0 +1,52 @@
+import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
+import BasicDemo from '~/components/copy/demos/basic';
+import { mount, unmount } from '../../test/utils';
+describe('Copy', function () {
+  afterEach( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            unmount();
+
+          case 1:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  })));
+  it('should copy', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+    var _mount, instance, element, text;
+
+    return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            _mount = mount(BasicDemo), instance = _mount[0], element = _mount[1];
+            element.click();
+            _context2.prev = 2;
+            _context2.next = 5;
+            return navigator.clipboard.readText();
+
+          case 5:
+            text = _context2.sent;
+            expect(text).to.eql('Hello King Desgin!');
+            _context2.next = 12;
+            break;
+
+          case 9:
+            _context2.prev = 9;
+            _context2.t0 = _context2["catch"](2);
+            // Read permisson denied 
+            console.log(_context2.t0);
+
+          case 12:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2, null, [[2, 9]]);
+  })));
+});

package/components/copy/index.vdt.js

@@ -0,0 +1,45 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import { createUnknownComponentVNode as _$cc, className as _$cn } from 'intact-vue-next';
+import { Icon } from '../icon';
+import { getRestProps } from '../utils';
+import { Virtual } from '../virtual';
+import { Transition } from 'intact';
+import { makeStyles } from './styles';
+import { _$ } from '../../i18n';
+var _$tmp0 = {
+  'key': '2',
+  'className': 'k-icon-check',
+  'hoverable': true,
+  'color': 'success'
+};
+export default function ($props, $blocks, $__proto__) {
+  var _classNameObj;
+
+  $blocks || ($blocks = {});
+  $props || ($props = {});
+  var $this = this;
+
+  var _this$get = this.get(),
+      children = _this$get.children,
+      className = _this$get.className;
+
+  var _this$copy = this.copy,
+      startCopy = _this$copy.startCopy,
+      success = _this$copy.success;
+  var classNameObj = (_classNameObj = {}, _classNameObj["k-copy"] = true, _classNameObj[makeStyles()] = true, _classNameObj[className] = className, _classNameObj);
+  return _$cc(Transition, {
+    'name': 'k-fade',
+    'children': _$cc(Virtual, _extends({
+      'ev-click': startCopy,
+      'className': _$cn(classNameObj)
+    }, getRestProps(this), {
+      'children': children ? children : !success.value ? _$cc(Icon, {
+        'key': '1',
+        'className': 'k-icon-clone',
+        'hoverable': true,
+        'title': _$('复制')
+      }, '1') : _$cc(Icon, _$tmp0, '2')
+    }))
+  });
+}
+;

package/components/copy/styles.d.ts

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

package/components/copy/styles.js

@@ -0,0 +1,14 @@
+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: "t3aops",
+    styles: "cursor:pointer;vertical-align:middle"
+  } : {
+    name: "t3aops",
+    styles: "cursor:pointer;vertical-align:middle",
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+  });
+}

package/components/copy/useCopy.d.ts

@@ -0,0 +1,4 @@
+export declare function useCopy(): {
+    startCopy: () => void;
+    success: import("../../hooks/useState").State<boolean>;
+};

package/components/copy/useCopy.js

@@ -0,0 +1,90 @@
+import { Message } from '../message';
+import { useInstance } from 'intact-vue-next';
+import { selectValue } from '../utils';
+import { useState } from '../../hooks/useState';
+import { _$ } from '../../i18n';
+export function useCopy() {
+  var instance = useInstance();
+  var success = useState(false);
+  var timer;
+  return {
+    startCopy: function startCopy() {
+      var _instance$get = instance.get(),
+          text = _instance$get.text,
+          showMessage = _instance$get.showMessage;
+
+      if (clipboardCopy(text) || commandCopy(text)) {
+        showMessage && Message.success({
+          content: _$('复制成功')
+        });
+        success.set(true);
+        clearTimeout(timer);
+        timer = window.setTimeout(function () {
+          success.set(false);
+        }, 1000);
+        instance.trigger('success', text);
+      } else {
+        showMessage && Message.error({
+          content: _$('复制失败')
+        });
+        success.set(false);
+        instance.trigger('error');
+      }
+    },
+    success: success
+  };
+} // @reference: https://github.com/zenorocha/clipboard.js/blob/master/src/common/create-fake-element.js
+
+function createFakeElement(value) {
+  var isRTL = document.documentElement.getAttribute('dir') === 'rtl';
+  var fakeElement = document.createElement('textarea'); // Prevent zooming on iOS
+
+  fakeElement.style.fontSize = '12pt'; // Reset box model
+
+  fakeElement.style.border = '0';
+  fakeElement.style.padding = '0';
+  fakeElement.style.margin = '0'; // Move element out of screen horizontally
+
+  fakeElement.style.position = 'absolute';
+  fakeElement.style[isRTL ? 'right' : 'left'] = '-9999px'; // Move element to the same position vertically
+
+  var yPosition = window.pageYOffset || document.documentElement.scrollTop;
+  fakeElement.style.top = yPosition + "px";
+  fakeElement.setAttribute('readonly', '');
+  fakeElement.value = value;
+  return fakeElement;
+}
+
+function clipboardCopy(text) {
+  try {
+    navigator.clipboard.writeText(text);
+    return true;
+  } catch (e) {
+    if (process.env.NODE_ENV !== 'production') {
+      console.log(e);
+    }
+
+    return false;
+  }
+}
+
+function commandCopy(text) {
+  var fakeElement = createFakeElement(text);
+  document.body.appendChild(fakeElement);
+  selectValue(fakeElement);
+  var result;
+
+  try {
+    document.execCommand('copy');
+    result = true;
+  } catch (e) {
+    if (process.env.NODE_ENV !== 'production') {
+      console.log(e);
+    }
+
+    result = false;
+  }
+
+  document.body.removeChild(fakeElement);
+  return result;
+}

package/components/datepicker/calendar.vdt.js

@@ -6,27 +6,27 @@ import { _$ } from '../../i18n';
 import { makeCalendarStyles } from './styles';
 import { getNowDate } from './helpers';
 var _$tmp0 = {
-  'className': 'ion-ios-arrow-left',
+  'className': 'k-icon-left',
   'size': 'small'
 };
 var _$tmp1 = {
-  'className': 'ion-ios-arrow-left',
+  'className': 'k-icon-left',
   'size': 'small'
 };
 var _$tmp2 = {
-  'className': 'ion-ios-arrow-left',
+  'className': 'k-icon-left',
   'size': 'small'
 };
 var _$tmp3 = {
-  'className': 'ion-ios-arrow-right',
+  'className': 'k-icon-right',
   'size': 'small'
 };
 var _$tmp4 = {
-  'className': 'ion-ios-arrow-right',
+  'className': 'k-icon-right',
   'size': 'small'
 };
 var _$tmp5 = {
-  'className': 'ion-ios-arrow-right',
+  'className': 'k-icon-right',
   'size': 'small'
 };
 export default function ($props, $blocks, $__proto__) {