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

package/styles/fonts/ionicons.ts

@@ -12,8 +12,8 @@
 import {injectGlobal} from '@emotion/css';
 import eot from './ionicons.eot';
 import ttf from './ionicons.ttf';
-import woff from './iconfont.woff';
-import svg from './iconfont.svg';
+import woff from './ionicons.woff';
+import svg from './ionicons.svg';
 
 injectGlobal`
     @font-face {

package/styles/global.ts

@@ -50,13 +50,13 @@ injectGlobal`
     }
     .k-fade-enter-active,
     .k-fade-leave-active {
-        transition: opacity ${theme.transition.large};
+        transition: opacity ${theme.transition.large} !important;
     }
     .k-fade-leave-active:not(tr) {
         position: absolute;
     }
     .k-fade-move {
-        transition: transform ${theme.transition.large};
+        transition: transform ${theme.transition.large} !important;
     }
 
     .k-scale-enter-from,
@@ -136,7 +136,7 @@ injectGlobal`
         text-overflow: ellipsis;
     }
     .c-hidden {
-        display: none;
+        display: none !important;
     }
     .c-middle {
         display: inline-block;

package/styles/theme.ts

@@ -7,12 +7,12 @@ export function defaultTheme() {
         large: {
             height: '40px',
             fontSize: '14px',
-            padding: '24px',
+            padding: '16px',
         },
         default: {
             height: '32px',
             fontSize: '12px',
-            padding: '16px',
+            padding: '12px',
         },
         small: {
             height: '24px',
@@ -20,35 +20,39 @@ export function defaultTheme() {
             padding: '8px',
         },
         mini: {
-            height: '16px',
+            height: '21px',
             fontSize: '12px',
             padding: '8px',
         },
         color: {
             primary: '#0091ea',
-            warning: '#ff9800',
-            danger: '#ff4133',
+            warning: '#ff9a05',
+            danger: '#ff4433',
             success: '#36b342',
-            border: '#ccc',
-            text: '#4c4c4c',
+            border: '#d0d5d9',
+            text: '#3c4449',
             ghost: '#737373',
-            bg: '#f1f1f5',
-            title: '#333',
-            darkBorder: '#b2b2b2',
-            placeholder: '#b2b2b2',
+            info:'#0091ea',
+            bg: '#f3f5f6',
+            title: '#151b1e',
+            darkBorder: '#d0d5d9',
+            placeholder: '#bec3c5',
             get link() { return theme.color.primary },
             get linkHover() { return palette(theme.color.primary, -1) }, 
-            get hoverBg() { return palette(theme.color.primary, -4) }, 
-            disabled: '#ccc',
-            disabledBg: '#f2f2f2',
-            disabledBorder: '#ccc',
-            lightBlack: '#737373',
+            hoverBg: '#f3f5f6',
+            // get hoverBg() { return palette(theme.color.primary, -4) }, 
+            disabled: '#bec3c5',
+            disabledBg: '#f0f2f4',
+            disabledBorder: '#d0d5d9',
+            lightBlack: '#848f9a',
         },
-        borderRadius: '2px',
-        boxShadow: '0 0 16px 0 rgba(0, 0, 0, .1)',
+        borderRadius: '4px',
+        largeBorderRadius: '6px',
+        boxShadow: '0px 0px 8px rgba(0, 0, 0, 0.08)',
+        middleBoxShadow: '0px 2px 16px 2px rgba(0, 0, 0, 0.08)',
+        largeBoxShadow: '0px 4px 32px 4px rgba(0, 0, 0, 0.08)',
         fontSize: '12px',
         lineHeight: 1.5,
-    
         maxZIndex: 9999,
         midZIndex: 999,
     

package/components/pagination/demos/noBoard.md

@@ -1,22 +0,0 @@
----
-title: 无边框样式
-order: 1.1
----
-
-添加`noBorder`属性，可以展示无边框的样式效果
-
-```vdt
-import {Pagination} from 'kpc';
-
-<div>
-    <Pagination noBorder total={200} size="large" />
-    <Pagination noBorder total={200} />
-    <Pagination noBorder total={200} size="small" />
-    <Pagination noBorder total={200} size="mini" />
-</div>
-```
-
-```styl
-.k-pagination
-    margin-bottom 20px
-```

package/components/table/useResizeObserver.ts

@@ -1,22 +0,0 @@
-import {onMounted, onBeforeUnmount, RefObject, useInstance} from "intact";
-import {debounce} from '../utils';
-import ResizeObserver from 'resize-observer-polyfill';
-
-export function useResizeObserver(elementRef: RefObject<HTMLElement>, callback: Function) {
-    const instance = useInstance()!;
-
-    let ro: ResizeObserver;
-    onMounted(() => {
-        // use debounce instead of throttle, because if there is
-        // transition on parent container, the width is weired
-        // #342
-        ro = new ResizeObserver(debounce(() => {
-            if (instance.$unmounted) return;
-            callback();
-        }, 100, true));
-        ro.observe(elementRef.value!);
-    });
-    onBeforeUnmount(() => {
-        ro.disconnect();
-    });
-}

package/components/tooltip/demos/confirm.md

@@ -1,41 +0,0 @@
----
-title: 确认提示层
-order: 4
----
-
-给组件添加`confirm`属性，可以展示确认提示弹层。点击“确认”和“取消”按钮分别会触发`ok`和`cancel`
-事件。你还可以通过`okText`和`cancelText`属性指定按钮文案
-
-```vdt
-import {Tooltip} from 'kpc';
-import {Button} from 'kpc';
-
-<div>
-    <Tooltip content="确定删除？"
-        confirm
-        theme="light"
-        trigger="click"
-        ev-ok={this.ok}
-        ev-cancel={this.cancel}
-        ref="__test"
-    >
-        <Button>删除</Button>
-    </Tooltip>
-</div>
-```
-
-```ts
-import {Message} from 'kpc';
-
-export default class extends Component {
-    static template = template;
-
-    ok() {
-        Message.success('Clicked ok!');
-    }
-
-    cancel() {
-        Message.info('Clicked cancel!');
-    }
-}
-```

package/es/components/table/useResizeObserver.d.ts

@@ -1,2 +0,0 @@
-import { RefObject } from "intact";
-export declare function useResizeObserver(elementRef: RefObject<HTMLElement>, callback: Function): void;

package/es/components/table/useResizeObserver.js

@@ -1,20 +0,0 @@
-import { onMounted, onBeforeUnmount, useInstance } from "intact";
-import { debounce } from '../utils';
-import ResizeObserver from 'resize-observer-polyfill';
-export function useResizeObserver(elementRef, callback) {
-  var instance = useInstance();
-  var ro;
-  onMounted(function () {
-    // use debounce instead of throttle, because if there is
-    // transition on parent container, the width is weired
-    // #342
-    ro = new ResizeObserver(debounce(function () {
-      if (instance.$unmounted) return;
-      callback();
-    }, 100, true));
-    ro.observe(elementRef.value);
-  });
-  onBeforeUnmount(function () {
-    ro.disconnect();
-  });
-}