@king-design/vue 2.0.0-beta.0

package/styles/global.d.ts

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

package/styles/global.js

@@ -0,0 +1,18 @@
+var _context;
+
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
+import _Object$keys from "@babel/runtime-corejs3/core-js/object/keys";
+import { injectGlobal } from '@emotion/css';
+import { theme } from './theme';
+var slideDirections = {
+  down: 'center top 0',
+  up: 'center bottom 0',
+  left: 'right center 0',
+  right: 'left center 0'
+}; // TODO: update global when theme changed
+
+injectGlobal("html{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,SimSun,sans-serif;}body{font-size:", theme.fontSize, ";line-height:", theme.lineHeight, ";margin:0;padding:0;color:", theme.color.text, ";}*,*:before,*:after{box-sizing:inherit;}", _mapInstanceProperty(_context = _Object$keys(slideDirections)).call(_context, function (direction) {
+  return "\n            .k-slide" + direction + "-enter-from,\n            .k-slide" + direction + "-leave-to {\n                transform-origin: " + slideDirections[direction] + ";\n                opacity: 0;\n                transform: " + (direction === 'down' || direction === 'up' ? "scaleY(.8)" : 'scaleX(.8)') + ";\n            }\n            .k-slide" + direction + "-enter-active,\n            .k-slide" + direction + "-leave-active {\n                transform-origin: " + slideDirections[direction] + ";\n                transition: opacity " + theme.transition + ", transform " + theme.transition + " !important;\n                pointer-events: none;\n            }\n        ";
+}).join(''), " .k-fade-enter-from,.k-fade-leave-to{opacity:0!important;}.k-fade-enter-active,.k-fade-leave-active{transition:opacity ", theme.transition, ";}.k-fade-leave-active:not(tr){position:absolute;}.k-fade-move{transition:transform ", theme.transition, ";}.k-scale-enter-from,.k-scale-leave-to{transform:scale(0);}.k-scale-enter-active,.k-scale-leave-active{transition:transform ", theme.transition, ";}.k-expand-enter-from,.k-expand-leave-to{opacity:0;overflow:hidden;}.k-expand-enter-active,.k-expand-leave-active{transition:all ", theme.transition, "!important;overflow:hidden;}.k-expand-move{transition:transform ", theme.transition, ";}.k-dropdown-enter-from,.k-dropdown-leave-to{opacity:0;transform:translateY(-20px);}.k-dropdown-enter-active,.k-dropdown-leave-active,.k-dropdown-move{transition:all ", theme.transition, ";}.k-dropdown-leave-active{position:absolute!important;}.k-dropdown-move{transition:transform ", theme.transition, ";}.c-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.c-hidden{display:none;}.c-middle{display:inline-block;vertical-align:middle;}");
+
+export {normalize} from 'intact-vue-next';

package/styles/keyframes.d.ts

@@ -0,0 +1,4 @@
+export declare const rotate: string;
+
+
+export {normalize} from 'intact-vue-next';

package/styles/keyframes.js

@@ -0,0 +1,13 @@
+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 { keyframes } from '@emotion/css';
+export var rotate = /*#__PURE__*/keyframes(process.env.NODE_ENV === "production" ? {
+  name: "1b2444z",
+  styles: "0%{transform-origin:50% 50%;transform:rotate(0);}100%{transform-origin:50% 50%;transform:rotate(360deg);}"
+} : {
+  name: "1b2444z",
+  styles: "0%{transform-origin:50% 50%;transform:rotate(0);}100%{transform-origin:50% 50%;transform:rotate(360deg);}",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+
+export {normalize} from 'intact-vue-next';

package/styles/theme.d.ts

@@ -0,0 +1,108 @@
+export declare type ThemeValue<T> = T;
+export declare type Theme = {
+    [name: string]: ThemeValue<string> | ThemeValue<number> | Theme;
+};
+export declare function defualtTheme(): {
+    large: {
+        height: string;
+        fontSize: string;
+        padding: string;
+    };
+    default: {
+        height: string;
+        fontSize: string;
+        padding: string;
+    };
+    small: {
+        height: string;
+        fontSize: string;
+        padding: string;
+    };
+    mini: {
+        height: string;
+        fontSize: string;
+        padding: string;
+    };
+    color: {
+        lightBlack: string;
+        primary: string;
+        warning: string;
+        danger: string;
+        success: string;
+        border: string;
+        text: string;
+        ghost: string;
+        bg: string;
+        title: string;
+        darkBorder: string;
+        placeholder: string;
+        readonly link: string;
+        readonly linkHover: string;
+        disabled: string;
+        disabledBg: string;
+        disabledBorder: string;
+    };
+    borderRadius: string;
+    boxShadow: string;
+    fontSize: string;
+    lineHeight: number;
+    maxZIndex: number;
+    midZIndex: number;
+    transition: string;
+};
+declare let theme: {
+    large: {
+        height: string;
+        fontSize: string;
+        padding: string;
+    };
+    default: {
+        height: string;
+        fontSize: string;
+        padding: string;
+    };
+    small: {
+        height: string;
+        fontSize: string;
+        padding: string;
+    };
+    mini: {
+        height: string;
+        fontSize: string;
+        padding: string;
+    };
+    color: {
+        lightBlack: string;
+        primary: string;
+        warning: string;
+        danger: string;
+        success: string;
+        border: string;
+        text: string;
+        ghost: string;
+        bg: string;
+        title: string;
+        darkBorder: string;
+        placeholder: string;
+        readonly link: string;
+        readonly linkHover: string;
+        disabled: string;
+        disabledBg: string;
+        disabledBorder: string;
+    };
+    borderRadius: string;
+    boxShadow: string;
+    fontSize: string;
+    lineHeight: number;
+    maxZIndex: number;
+    midZIndex: number;
+    transition: string;
+};
+export declare function resetTheme(): void;
+export { theme };
+export declare function push(setTheme: Function): void;
+export declare function setTheme(customTheme: Theme): void;
+export declare function setDefault(setTheme: Function): void;
+
+
+export {normalize} from 'intact-vue-next';

package/styles/theme.js

@@ -0,0 +1,130 @@
+import { palette, deepExtends } from './utils';
+export function defualtTheme() {
+  return {
+    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'
+  };
+}
+var theme = defualtTheme();
+export function resetTheme() {
+  theme = defualtTheme();
+}
+export { theme };
+var queue = [];
+export function push(setTheme) {
+  queue.push(setTheme);
+}
+export function setTheme(customTheme) {
+  resetTheme();
+  deepExtends(theme, customTheme); // queue
+
+  queue.forEach(function (fn) {
+    return fn();
+  });
+}
+export function setDefault(setTheme) {
+  setTheme();
+  push(setTheme);
+} // 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',
+// }
+
+export {normalize} from 'intact-vue-next';

package/styles/utils.d.ts

@@ -0,0 +1,17 @@
+export declare function deepDefaults<T, U>(source: T, defaults: U): T & U;
+export declare function deepDefaults<T, U, V>(source: T, defaults1: U, defaults2: V): T & U & V;
+export declare function deepDefaults<T, U, V, W>(source: T, defaults1: U, defaults2: V, defaults3: W): T & U & V & W;
+export declare function deepDefaults(source: any, ...defaults: any[]): any;
+export declare function deepExtends<T, U>(source: T, defaults: U): T & U;
+export declare function deepExtends<T, U, V>(source: T, defaults1: U, defaults2: V): T & U & V;
+export declare function deepExtends<T, U, V, W>(source: T, defaults1: U, defaults2: V, defaults3: W): T & U & V & W;
+export declare function deepExtends(source: any, ...defaults: any[]): any;
+export declare function palette(color: string, level: number): string;
+export declare function getLeft(padding: string): string;
+export declare function getRight(padding: string): string;
+export declare function darken(color: string, number: number): string;
+export declare type Sizes = 'large' | 'default' | 'small' | 'mini';
+export declare const sizes: Sizes[];
+
+
+export {normalize} from 'intact-vue-next';

package/styles/utils.js

@@ -0,0 +1,116 @@
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js/object/get-own-property-descriptor";
+import { isObject } from 'intact-shared';
+import tinycolor from 'tinycolor2';
+export function deepDefaults(source) {
+  for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+    args[_key - 1] = arguments[_key];
+  }
+
+  for (var _i = 0, _args = args; _i < _args.length; _i++) {
+    var defaults = _args[_i];
+
+    for (var key in defaults) {
+      var sourceDescriptor = _Object$getOwnPropertyDescriptor(source, key);
+
+      var defaultDescriptor = _Object$getOwnPropertyDescriptor(defaults, key);
+
+      if (defaultDescriptor !== undefined) {
+        if (sourceDescriptor === undefined) {
+          Object.defineProperty(source, key, defaultDescriptor);
+        } else if (isObject(defaultDescriptor.value)) {
+          if (!isObject(sourceDescriptor.value)) {
+            Object.defineProperty(source, key, defaultDescriptor);
+          } else {
+            deepDefaults(sourceDescriptor.value, defaultDescriptor.value);
+          }
+        }
+      }
+    }
+  }
+
+  return source;
+}
+export function deepExtends(source) {
+  for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
+    args[_key2 - 1] = arguments[_key2];
+  }
+
+  for (var _i2 = 0, _args2 = args; _i2 < _args2.length; _i2++) {
+    var defaults = _args2[_i2];
+
+    for (var key in defaults) {
+      var sourceDescriptor = _Object$getOwnPropertyDescriptor(source, key);
+
+      var defaultDescriptor = _Object$getOwnPropertyDescriptor(defaults, key);
+
+      if (defaultDescriptor !== undefined) {
+        if (sourceDescriptor === undefined || !isObject(sourceDescriptor.value)) {
+          if (!isObject(defaultDescriptor.value)) {
+            Object.defineProperty(source, key, defaultDescriptor);
+          } else {
+            source[key] = {};
+            deepExtends(source[key], defaultDescriptor.value);
+          }
+        } else if (isObject(defaultDescriptor.value)) {
+          deepExtends(sourceDescriptor.value, defaultDescriptor.value);
+        }
+      }
+    }
+  }
+
+  return source;
+}
+var cache = {};
+export function palette(color, level) {
+  var key = color + '@' + level;
+  if (cache[key]) return cache[key];
+
+  var _tinycolor$toHsv = tinycolor(color).toHsv(),
+      h = _tinycolor$toHsv.h,
+      s = _tinycolor$toHsv.s,
+      v = _tinycolor$toHsv.v;
+
+  var deS = s < 0.1 ? 0 : (s - 0.1) / 4;
+  var inS = (1 - s) / 4;
+  var deV = (1 - v) / 4;
+  var inV = v <= 0.4 ? 0 : (v - 0.4) / 4;
+  var ret;
+  if (level < 0 && level >= -4) ret = tinycolor({
+    h: h + level,
+    s: s + level * deS,
+    v: v - level * deV
+  }).toHexString();else if (level > 0 && level <= 4) ret = tinycolor({
+    h: h + level,
+    s: s + level * inS,
+    v: v - level * inV
+  }).toHexString();else ret = color;
+  return cache[key] = ret;
+}
+export function getLeft(padding) {
+  var paddings = padding.split(/\s+/);
+  var length = paddings.length;
+
+  if (length === 4) {
+    return paddings[3];
+  } else if (length > 1) {
+    return paddings[1];
+  } else {
+    return padding;
+  }
+}
+export function getRight(padding) {
+  var paddings = padding.split(/\s+/);
+  var length = paddings.length;
+
+  if (length > 1) {
+    return paddings[1];
+  } else {
+    return padding;
+  }
+}
+export function darken(color, number) {
+  return tinycolor(color).darken(number).toHexString();
+}
+export var sizes = ['large', 'default', 'small', 'mini'];
+
+export {normalize} from 'intact-vue-next';