@king-design/intact 3.0.0-beta.0 → 3.0.0-beta.1

package/es/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';
+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-truth',
+  '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/es/components/copy/styles.d.ts

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

package/es/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/es/components/copy/useCopy.d.ts

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

package/es/components/copy/useCopy.js

@@ -0,0 +1,90 @@
+import { Message } from '../message';
+import { useInstance } from 'intact';
+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/es/components/datepicker/index.spec.js

@@ -496,7 +496,7 @@ describe('Datepicker', function () {
 
             case 14:
               // remove specified item
-              close = element.querySelector('.k-select-close');
+              close = element.querySelector('.k-tag-close');
               close.click();
               expect(instance.get('date')).have.lengthOf(0);
               _context13.next = 19;

package/es/components/datepicker/index.vdt.js

@@ -68,7 +68,7 @@ export default function ($props, $blocks, $__proto__) {
         }
 
         return _$cc(Tabs, {
-          'type': 'border-card',
+          'type': 'card',
           'value': panel.value,
           'ev-$change:value': panel.set,
           'children': [_$cc(Tab, {

package/es/components/datepicker/styles.js

@@ -83,7 +83,7 @@ export function makePanelStyles() {
   return /*#__PURE__*/css("display:flex;.k-datepicker-shortcuts{width:", datepicker.shortcuts.width, ";padding:", datepicker.shortcuts.padding, ";border-right:", datepicker.border, ";}.k-datepicker-shortcut{height:", datepicker.shortcuts.shortcut.height, ";line-height:", datepicker.shortcuts.shortcut.height, ";padding:", datepicker.shortcuts.shortcut.padding, ";cursor:pointer;&:hover{background:", datepicker.shortcuts.shortcut.hoverBgcolor, ";}}.k-datepicker-calendars{display:flex;}.k-datepicker-calendar-wrapper{&:nth-child(2){border-left:", datepicker.border, ";}.k-tabs{border:none;.k-tabs-wrapper{float:none;}.k-tab{width:50%;}}}.k-datepicker-footer{border-top:", datepicker.border, ";padding:", datepicker.footer.padding, ";text-align:right;}");
 }
 export function makeCalendarStyles() {
-  return /*#__PURE__*/css("padding:", datepicker.padding, ";width:", datepicker.width, ";position:relative;.k-datepicker-month{display:flex;padding:", datepicker.month.padding, ";}.k-month-values{flex:1;font-size:14px;text-align:center;cursor:pointer;overflow:hidden;position:relative;}.k-month-value{margin:0 ", datepicker.month.valueGap, ";line-height:", theme.small.height, ";&:hover{color:", theme.color.primary, ";}},.k-weekdays{display:flex;border-bottom:", datepicker.border, ";padding:", datepicker.weekday.padding, ";}.k-weekday{flex:1;text-align:center;}.k-calendar-item{text-align:center;margin:", datepicker.item.gutter, ";aspect-ratio:1;display:flex;align-items:center;cursor:pointer;position:relative;border-radius:", datepicker.item.borderRadius, ";&.k-hover{background:", datepicker.item.hoverBgColor, ";}&.k-exceed{color:", datepicker.item.exceedColor, ";}&.k-today{border:", datepicker.item.todayBorder, ";}&.k-active{background:", datepicker.item.active.bgColor, ";color:", datepicker.item.active.color, ";&.k-today{border-color:", datepicker.item.active.todayBorderColor, ";}}&.k-disabled{color:", datepicker.item.disabled.color, ";cursor:not-allowed;background:", datepicker.item.disabled.hoverBgColor, ";}&.k-in-range:after{content:'';display:block;position:absolute;box-sizing:content-box;background:", datepicker.item.range.bgColor, ";width:100%;height:100%;left:-", datepicker.item.gutter, ";padding:0 ", datepicker.item.gutter, ";z-index:-1;}.k-value{flex:1;}}.k-days{display:grid;grid-template-columns:repeat(7, 1fr);}.k-years{display:grid;grid-template-columns:repeat(4, 1fr);}");
+  return /*#__PURE__*/css("padding:", datepicker.padding, ";width:", datepicker.width, ";position:relative;.k-datepicker-month{display:flex;padding:", datepicker.month.padding, ";}.k-month-values{flex:1;font-size:14px;text-align:center;cursor:pointer;overflow:hidden;position:relative;}.k-month-value{margin:0 ", datepicker.month.valueGap, ";line-height:", theme.small.height, ";&:hover{color:", theme.color.primary, ";}},.k-weekdays{display:flex;border-bottom:", datepicker.border, ";padding:", datepicker.weekday.padding, ";}.k-weekday{flex:1;text-align:center;}.k-calendar-item{text-align:center;margin:", datepicker.item.gutter, ";aspect-ratio:1;display:flex;align-items:center;cursor:pointer;position:relative;.k-value{border-radius:", datepicker.item.borderRadius, ";}&.k-hover .k-value{background:", datepicker.item.hoverBgColor, ";}&.k-exceed{color:", datepicker.item.exceedColor, ";}&.k-today .k-value{border:", datepicker.item.todayBorder, ";}&.k-active{background:", datepicker.item.active.bgColor, ";color:", datepicker.item.active.color, ";&.k-today .k-value{border-color:", datepicker.item.active.todayBorderColor, ";}}&.k-disabled{color:", datepicker.item.disabled.color, ";cursor:not-allowed;background:", datepicker.item.disabled.hoverBgColor, ";}&.k-in-range:after{content:'';display:block;position:absolute;box-sizing:content-box;background:", datepicker.item.range.bgColor, ";width:100%;height:100%;left:-", datepicker.item.gutter, ";padding:0 ", datepicker.item.gutter, ";z-index:-1;}.k-value{flex:1;display:flex;align-items:center;justify-content:center;height:100%;}}.k-days{display:grid;grid-template-columns:repeat(7, 1fr);}.k-years{display:grid;grid-template-columns:repeat(4, 1fr);}");
 }
 export function makeTimeStyles() {
   return /*#__PURE__*/css("display:flex;padding:", datepicker.padding, ";width:", datepicker.width, ";position:relative;.k-scroll-select{flex:1;height:305px;}");

package/es/components/diagram/shapes/callout.d.ts

@@ -12,7 +12,7 @@ export declare class DCallout extends DShape {
         rotatable?: boolean | undefined;
         editable?: boolean | undefined;
         connectable?: boolean | undefined;
-        strokeStyle?: "dashed" | "dotted" | "solid" | undefined;
+        strokeStyle?: "solid" | "dashed" | "dotted" | undefined;
         label?: string | number | undefined;
         style?: Record<string, string | number> | undefined;
         data?: any;

package/es/components/diagram/shapes/circle.d.ts

@@ -12,7 +12,7 @@ export declare class DCircle extends DShape {
         rotatable?: boolean | undefined;
         editable?: boolean | undefined;
         connectable?: boolean | undefined;
-        strokeStyle?: "dashed" | "dotted" | "solid" | undefined;
+        strokeStyle?: "solid" | "dashed" | "dotted" | undefined;
         label?: string | number | undefined;
         style?: Record<string, string | number> | undefined;
         data?: any;

package/es/components/diagram/shapes/document.d.ts

@@ -12,7 +12,7 @@ export declare class DDocument extends DShape {
         rotatable?: boolean | undefined;
         editable?: boolean | undefined;
         connectable?: boolean | undefined;
-        strokeStyle?: "dashed" | "dotted" | "solid" | undefined;
+        strokeStyle?: "solid" | "dashed" | "dotted" | undefined;
         label?: string | number | undefined;
         style?: Record<string, string | number> | undefined;
         data?: any;

package/es/components/diagram/shapes/ellipse.d.ts

@@ -12,7 +12,7 @@ export declare class DEllipse extends DShape {
         rotatable?: boolean | undefined;
         editable?: boolean | undefined;
         connectable?: boolean | undefined;
-        strokeStyle?: "dashed" | "dotted" | "solid" | undefined;
+        strokeStyle?: "solid" | "dashed" | "dotted" | undefined;
         label?: string | number | undefined;
         style?: Record<string, string | number> | undefined;
         data?: any;

package/es/components/diagram/shapes/hexagon.d.ts

@@ -12,7 +12,7 @@ export declare class DHexagon extends DShape {
         rotatable?: boolean | undefined;
         editable?: boolean | undefined;
         connectable?: boolean | undefined;
-        strokeStyle?: "dashed" | "dotted" | "solid" | undefined;
+        strokeStyle?: "solid" | "dashed" | "dotted" | undefined;
         label?: string | number | undefined;
         style?: Record<string, string | number> | undefined;
         data?: any;

package/es/components/diagram/shapes/image.d.ts

@@ -18,7 +18,7 @@ export declare class DImage extends DShape<DImageProps> {
         rotatable?: boolean | undefined;
         editable?: boolean | undefined;
         connectable?: boolean | undefined;
-        strokeStyle?: "dashed" | "dotted" | "solid" | undefined;
+        strokeStyle?: "solid" | "dashed" | "dotted" | undefined;
         label?: string | number | undefined;
         style?: Record<string, string | number> | undefined;
         data?: any;

package/es/components/diagram/shapes/parallelogram.d.ts

@@ -12,7 +12,7 @@ export declare class DParallelogram extends DShape {
         rotatable?: boolean | undefined;
         editable?: boolean | undefined;
         connectable?: boolean | undefined;
-        strokeStyle?: "dashed" | "dotted" | "solid" | undefined;
+        strokeStyle?: "solid" | "dashed" | "dotted" | undefined;
         label?: string | number | undefined;
         style?: Record<string, string | number> | undefined;
         data?: any;

package/es/components/diagram/shapes/rectangle.d.ts

@@ -18,7 +18,7 @@ export declare class DRectangle extends DShape<DRectangleProps> {
         rotatable?: boolean | undefined;
         editable?: boolean | undefined;
         connectable?: boolean | undefined;
-        strokeStyle?: "dashed" | "dotted" | "solid" | undefined;
+        strokeStyle?: "solid" | "dashed" | "dotted" | undefined;
         label?: string | number | undefined;
         style?: Record<string, string | number> | undefined;
         data?: any;

package/es/components/diagram/shapes/square.d.ts

@@ -13,7 +13,7 @@ export declare class DSquare extends DRectangle {
         rotatable?: boolean | undefined;
         editable?: boolean | undefined;
         connectable?: boolean | undefined;
-        strokeStyle?: "dashed" | "dotted" | "solid" | undefined;
+        strokeStyle?: "solid" | "dashed" | "dotted" | undefined;
         label?: string | number | undefined;
         style?: Record<string, string | number> | undefined;
         data?: any;

package/es/components/diagram/shapes/text.d.ts

@@ -12,7 +12,7 @@ export declare class DText extends DShape {
         rotatable?: boolean | undefined;
         editable?: boolean | undefined;
         connectable?: boolean | undefined;
-        strokeStyle?: "dashed" | "dotted" | "solid" | undefined;
+        strokeStyle?: "solid" | "dashed" | "dotted" | undefined;
         label?: string | number | undefined;
         style?: Record<string, string | number> | undefined;
         data?: any;

package/es/components/dialog/alert.vdt.js

@@ -41,11 +41,12 @@ export default function ($props, $blocks, $__proto__) {
     }), (_$blocks['body'] = function ($super) {
       return [_$ce(2, 'div', [!hideIcon && !icon ? _$cc(Icon, {
         'className': _$cn(iconClassName || {
-          "ion-ios-checkmark": type === 'success',
-          "ion-ios-information": type === 'warning',
-          "ion-ios-close": type === 'error',
-          "ion-ios-help": type === 'confirm'
-        })
+          "k-icon-success-fill": type === 'success',
+          "k-icon-warning-fill": type === 'warning',
+          "k-icon-error-fill": type === 'error',
+          "k-icon-question-fill": type === 'confirm'
+        }),
+        'color': type === 'error' ? 'danger' : type === 'confirm' ? 'primary' : type
       }) : undefined, icon], 0, 'k-dialog-tip-icon'), _$ce(2, 'div', [title ? _$ce(2, 'div', title, 0, 'k-alert-dialog-title') : undefined, content], 0, 'k-alert-dialog-wrapper')];
     }, __$blocks['body'] = function ($super, data) {
       var block = $blocks['body'];

package/es/components/dialog/index.spec.js

@@ -201,7 +201,7 @@ describe('Dialog', function () {
     var _mount4 = mount(Demo),
         instance = _mount4[0];
 
-    expect(getElement('.k-dialog-footer').innerText).to.eql('dialog footer 确定取消');
+    expect(getElement('.k-dialog-footer').innerText).to.eql('dialog footer 取消确定');
   });
   it('basic test', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
     var _mount5, instance, element, btn, dialog;
@@ -243,7 +243,7 @@ describe('Dialog', function () {
             return wait(500);
 
           case 20:
-            expect(document.body.getAttribute('style')).to.be.null;
+            expect(!!document.body.getAttribute('style')).to.be.false;
 
           case 21:
           case "end":
@@ -347,7 +347,7 @@ describe('Dialog', function () {
             return wait(500);
 
           case 18:
-            expect(document.body.getAttribute('style')).to.be.null;
+            expect(!!document.body.getAttribute('style')).to.be.false;
 
           case 19:
           case "end":
@@ -439,7 +439,7 @@ describe('Dialog', function () {
 
           case 4:
             dialog = expectDialog();
-            dialog.querySelector('.k-btn').click();
+            dialog.querySelector('.k-dialog-ok').click();
             _context12.next = 8;
             return wait();
 
@@ -472,7 +472,7 @@ describe('Dialog', function () {
 
           case 21:
             dialog = expectDialog();
-            dialog.querySelector('.k-btn').click();
+            dialog.querySelector('.k-dialog-ok').click();
             cb2 = sinon.spy();
             Dialog.confirm({
               content: 'test',
@@ -489,7 +489,7 @@ describe('Dialog', function () {
 
           case 31:
             expect(cb2.callCount).to.eql(0);
-            getElement('.k-dialog').querySelector('.k-btn').click();
+            getElement('.k-dialog').querySelector('.k-dialog-ok').click();
 
           case 33:
           case "end":

package/es/components/dropdown/dropdown.d.ts

@@ -3,6 +3,7 @@ import { Options, Feedback } from '../position';
 import { Portal, PortalProps } from '../portal';
 import { FeedbackCallback } from './usePosition';
 import type { Events } from '../types';
+import { Virtual } from '../virtual';
 export declare type Position = Options;
 export declare type PositionShorthand = 'left' | 'bottom' | 'right' | 'top';
 export declare const DROPDOWN = "Dropdown";
@@ -12,6 +13,7 @@ export interface DropdownProps {
     disabled?: boolean;
     value?: boolean;
     position?: Position | 'left' | 'bottom' | 'right' | 'top';
+    collison?: Position['collision'];
     of?: 'self' | 'parent' | Event;
     container?: PortalProps['container'];
 }
@@ -21,6 +23,8 @@ export interface DropdownEvents {
     hide: [];
     mouseenter: [MouseEvent];
     mouseleave: [MouseEvent];
+    click: [MouseEvent];
+    contextmenu: [MouseEvent];
     positioned: [Feedback];
 }
 export interface DropdownBlocks {
@@ -30,7 +34,7 @@ export declare class Dropdown<T extends DropdownProps = DropdownProps, E extends
     static typeDefs: Required<TypeDefs<DropdownProps>>;
     static defaults: () => Partial<DropdownProps>;
     static events: Events<DropdownEvents>;
-    static template: (this: Dropdown) => (VNode<import("intact").VNodeTag> | VNode<typeof Portal>)[];
+    static template: (this: Dropdown) => (VNode<typeof Virtual> | VNode<typeof Portal>)[];
     menuVNode: VNode | null;
     dropdown: Dropdown | null;
     rootDropdown: Dropdown | null;
@@ -41,9 +45,7 @@ export declare class Dropdown<T extends DropdownProps = DropdownProps, E extends
             value: boolean;
         };
     };
-    protected alwaysPortal: boolean;
-    private timer;
-    private triggerProps;
+    protected timer: number | undefined;
     init(): void;
     show(shouldFocus?: boolean): void;
     hide(immediately?: boolean): void;
@@ -53,6 +55,4 @@ export declare class Dropdown<T extends DropdownProps = DropdownProps, E extends
     private onContextMenu;
     private onLeave;
     private initEventCallbacks;
-    private callOriginalCallback;
-    private normalizeTriggerProps;
 }