@king-design/intact 3.0.1 → 3.1.0-beta.0

package/styles/global.ts

@@ -12,7 +12,6 @@ const slideDirections = {
 // TODO: update global when theme changed
 injectGlobal`
     html {
-        --var-wave-color: ${theme.color.primary};
         box-sizing: border-box;
         font-family: -apple-system,BlinkMacSystemFont,SF Pro SC,SF Pro Text,Helvetica Neue,Helvetica,PingFang SC,Segoe UI,Roboto,Hiragino Sans GB,arial,microsoft yahei ui,Microsoft YaHei,sans-serif;
     }
@@ -29,7 +28,7 @@ injectGlobal`
 
     // animation
     ${Object.keys(slideDirections).map(direction => {
-        return `
+        return css`
             .k-slide${direction}-enter-from,
             .k-slide${direction}-leave-to {
                 transform-origin: ${slideDirections[direction as keyof typeof slideDirections]};
@@ -40,10 +39,12 @@ injectGlobal`
             .k-slide${direction}-leave-active {
                 transform-origin: ${slideDirections[direction as keyof typeof slideDirections]};
                 transition: opacity ${theme.transition.large}, transform ${theme.transition.large} !important;
+            }
+            .k-slide${direction}-leave-active {
                 pointer-events: none;
             }
         `
-    }).join('')}
+    })}
     .k-fade-enter-from,
     .k-fade-leave-to {
         opacity: 0 !important;

package/styles/theme.ts

@@ -82,61 +82,7 @@ export function setTheme(customTheme: Theme) {
     queue.forEach(fn => fn());
 }
 
-export function setDefault(setTheme: Function) {
-    setTheme();
-    push(setTheme);
+export function setDefault(callback: Function) {
+    callback();
+    push(callback);
 }
-
-// push(resetTheme);
-// export const theme = defualtTheme();
-
-// export const theme = {
-//     large: {
-//         height: '40px',
-//         fontSize: '14px',
-//         padding: '24px',
-//     },
-//     default: {
-//         height: '32px',
-//         fontSize: '12px',
-//         padding: '16px',
-//     },
-//     small: {
-//         height: '24px',
-//         fontSize: '12px',
-//         padding: '8px',
-//     },
-//     mini: {
-//         height: '16px',
-//         fontSize: '12px',
-//         padding: '8px',
-//     },
-//     color: {
-//         lightBlack: '#737373',
-//         primary: '#0091ea',
-//         warning: '#ff9800',
-//         danger: '#ff4133',
-//         success: '#36b342',
-//         border: '#ccc',
-//         text: '#4c4c4c',
-//         ghost: '#737373',
-//         bg: '#f1f1f5',
-//         title: '#333',
-//         darkBorder: '#b2b2b2',
-//         placeholder: '#b2b2b2',
-//         get link() { return theme.color.primary },
-//         get linkHover() { return palette(theme.color.primary, -1) }, 
-//         disabled: '#ccc',
-//         disabledBg: '#f2f2f2',
-//         disabledBorder: '#ccc',
-//     },
-//     borderRadius: '2px',
-//     boxShadow: '0 0 4px 0 rgba(0, 0, 0, .3)',
-//     fontSize: '12px',
-//     lineHeight: 1.5,
-
-//     maxZIndex: 9999,
-//     midZIndex: 999,
-
-//     transition: '.25s ease-in-out',
-// }

package/es/components/skeleton/style.d.ts

@@ -1,6 +0,0 @@
-import '../../styles/global';
-export declare const kls: (className: string) => string;
-declare type ItemSize = 'default' | 'large' | 'small' | 'mini';
-export declare function makeStyles(size: ItemSize): string;
-export declare function makeItemStyles(): string;
-export {};

package/es/components/skeleton/style.js

@@ -1,35 +0,0 @@
-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 { deepDefaults } from '../../styles/utils';
-import { theme, setDefault } from '../../styles/theme';
-import { css, keyframes } from '@emotion/css';
-import '../../styles/global';
-export var kls = function kls(className) {
-  return "k-skeleton-" + className;
-};
-var defaults = {
-  item: {
-    bgColor: '#dcdde0'
-  }
-};
-var skeleton;
-setDefault(function () {
-  skeleton = deepDefaults(theme, {
-    skeleton: defaults
-  }).skeleton;
-});
-export function makeStyles(size) {
-  return /*#__PURE__*/css("&.k-animated{.", kls('item'), "{&>.k-skeleton-item-box{background:linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%);background-size:400% 100%;animation:", skeletonLoading, " 1.4s ease infinite;}}}.k-skeleton-items{.", kls('item'), ":first-child{.skeleton-item-text{width:33%;}}.", kls('item'), ":last-child{.skeleton-item-text{width:61%;}}}.", kls('avator-box'), "{display:flex;&>div:last-child{flex-grow:1;padding-left:20px;}}.skeleton-item-button,.skeleton-item-input{height:", theme[size].height, ";}");
-}
-var skeletonLoading = /*#__PURE__*/keyframes(process.env.NODE_ENV === "production" ? {
-  name: "1jmexzm",
-  styles: "0%{background-position:100% 50%;}to{background-position:0 50%;}"
-} : {
-  name: "1jmexzm",
-  styles: "0%{background-position:100% 50%;}to{background-position:0 50%;}",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-export function makeItemStyles() {
-  var skeletonItem = skeleton.item;
-  return /*#__PURE__*/css("&>div{background:", skeletonItem.bgColor, ";}.skeleton-item-text{width:100%;height:16px;border-radius:4px;margin-top:16px;}.skeleton-item-avator{width:40px;height:40px;border-radius:50%;}.skeleton-item-image{display:flex;justify-content:center;align-items:center;width:200px;height:200px;&>svg{width:48px;height:48px;fill:", skeletonItem.bgColor, ";}}.skeleton-item-button{width:64px;background:", skeletonItem.bgColor, ";}.skeleton-item-input{width:160px;background:", skeletonItem.bgColor, ";}");
-}

package/es/components/split/style.d.ts

@@ -1,4 +0,0 @@
-import '../../styles/global';
-export declare type Mode = 'horizontal' | 'vertical';
-export declare const kls: (className: string) => string;
-export declare function makeStyles(): string;

package/es/components/split/style.js

@@ -1,55 +0,0 @@
-import { theme, setDefault } from '../../styles/theme';
-import { css } from '@emotion/css';
-import '../../styles/global';
-import { deepDefaults } from '../../styles/utils';
-export var kls = function kls(className) {
-  return "k-split-" + className;
-};
-var defaults = {
-  splitLineSize: '6px',
-  dragLinesSize: '1px',
-  dragLinesCount: 5,
-  dragLiensGutter: 5,
-
-  get bgColor() {
-    return theme.color.bg;
-  },
-
-  get baseBorder() {
-    return "1px solid " + theme.color.border;
-  },
-
-  get transition() {
-    return theme.transition.middle;
-  },
-
-  get boderColor() {
-    return theme.color.border;
-  },
-
-  get dragLineMargin() {
-    return "-" + split.dragLinesCount * (split.dragLiensGutter + 1) / 2 + "px";
-  },
-
-  boxShadow: function boxShadow(direction) {
-    var i = 1;
-    var tmp = [];
-
-    while (i <= split.dragLinesCount) {
-      var shadowVal = direction === 'horizontal' ? "0 " + i * split.dragLiensGutter + "px 0 0" : i * split.dragLiensGutter + "px 0 0 0";
-      tmp.push(shadowVal + " " + split.boderColor);
-      i++;
-    }
-
-    return "" + tmp.join(',');
-  }
-};
-var split;
-setDefault(function () {
-  split = deepDefaults(theme, {
-    split: defaults
-  }).split;
-});
-export function makeStyles() {
-  return /*#__PURE__*/css("display:flex;height:100%;&>.", kls('first'), ",&>.", kls('last'), "{overflow:auto;position:relative;}&>.", kls('first'), "{flex:0 0 auto;}&>.", kls('last'), "{flex:auto;}&.k-first-auto{&>.", kls('first'), "{flex:auto;}&>.", kls('last'), "{flex:0 0 auto;}}&:not(.k-resizing){&>.", kls('first'), ",&>.", kls('last'), "{transition:all ", split.transition, ";}}&>.", kls('line-wrapper'), "{flex:0 0 auto;text-align:center;overflow:hidden;.", kls('line'), "{height:100%;background:", split.bgColor, ";position:relative;}.", kls('drag-lines'), "{background:", split.boderColor, ";position:absolute;}}&.k-horizontal{&>.", kls('line-wrapper'), "{cursor:col-resize;width:", split.splitLineSize, ";.", kls('line'), "{border-left:", split.baseBorder, ";border-right:", split.baseBorder, ";}.", kls('drag-lines'), "{height:", split.dragLinesSize, ";width:100%;top:50%;margin-top:", split.dragLineMargin, ";box-shadow:", split.boxShadow('horizontal'), ";}}}&.k-vertical{flex-direction:column;&>.", kls('line-wrapper'), "{cursor:row-resize;height:", split.splitLineSize, ";.", kls('line'), "{border-top:", split.baseBorder, ";border-bottom:", split.baseBorder, ";}.", kls('drag-lines'), "{width:", split.dragLinesSize, ";height:100%;left:50%;margin-left:", split.dragLineMargin, ";box-shadow:", split.boxShadow('vertical'), ";}}}");
-}