@king-design/vue 2.0.0-beta.0

package/components/form/useValidate.js

@@ -0,0 +1,118 @@
+import _Promise from "@babel/runtime-corejs3/core-js/promise";
+import { useInstance } from 'intact-vue-next';
+import { useState } from '../../hooks/useState';
+import { methods as globalMethods } from './methods';
+import { isFunction, isString } from 'intact-shared';
+import { useReceive } from '../../hooks/useReceive';
+export function useValidate(getErrorMessage, getErrorClassName, message, isDirty) {
+  var instance = useInstance();
+  var isValid = useState(true);
+  var errorClassName = useState(undefined);
+  var promise = null;
+  useReceive(['value', 'rules'], validateIfDirty);
+
+  function validateIfDirty() {
+    if (isDirty.value) {
+      validate();
+    }
+  }
+
+  function validate() {
+    var _instance$get = instance.get(),
+        rules = _instance$get.rules,
+        value = _instance$get.value;
+
+    if (!rules) return true;
+    cancel();
+    var promises = [];
+    var ruleNames = []; // check required rule firstly, detect whether it is empty or not
+
+    var required = globalMethods.required(value, true);
+
+    if (rules.required) {
+      promises.push(required);
+      ruleNames.push('required');
+    } // if required rule passed, then check other rules
+
+
+    if (required) {
+      for (var key in rules) {
+        var rule = rules[key];
+        if (key === 'required' || rule === false) continue;
+        var fn = void 0;
+
+        if (isFunction(rule)) {
+          fn = rule;
+        } else {
+          fn = globalMethods[key];
+          /* istanbul ignore if */
+
+          if (!fn) {
+            console.warn("Can not find validate method: " + key);
+            continue;
+          }
+        }
+
+        promises.push(fn(value, rules[key]));
+        ruleNames.push(key);
+      }
+    }
+
+    return promise = _Promise.all(promises).then(function (results) {
+      for (var index = 0; index < results.length; index++) {
+        var result = results[index];
+
+        if (result !== true) {
+          var ruleName = ruleNames[index];
+          return [false, result || getErrorMessage(ruleName), getErrorMessage(ruleName)];
+        }
+      }
+
+      return [true, message.value, undefined];
+    }, function (err) {
+      var message;
+      var className;
+
+      if (isString(err)) {
+        message = err;
+      } else if (err) {
+        message = err.message || getErrorMessage(err.name);
+        className = err.className || getErrorMessage(err.name);
+      }
+
+      return [false, message, className];
+    }).then(function (_ref) {
+      var _isValid = _ref[0],
+          _message = _ref[1],
+          _className = _ref[2];
+      // if cancelled, should return the last result
+      if (promise.cancelled) return isValid.value;
+      isDirty.set(true);
+      errorClassName.set(_className);
+      message.set(_message);
+      isValid.set(_isValid);
+      return _isValid;
+    });
+  }
+
+  function cancel() {
+    if (promise) {
+      promise.cancelled = true;
+    }
+  }
+
+  function reset() {
+    isValid.set(true);
+    errorClassName.set(undefined);
+    cancel();
+  }
+
+  return {
+    isValid: isValid,
+    errorClassName: errorClassName,
+    validate: validate,
+    reset: reset
+  };
+}
+
+export {normalize} from 'intact-vue-next';

package/components/grid/col.d.ts

@@ -0,0 +1,20 @@
+import { Component, TypeDefs } from 'intact-vue-next';
+import { PrimitiveValue, BreakpointValues } from './constants';
+export declare type BaseColProps = {
+    span?: PrimitiveValue;
+    offset?: PrimitiveValue;
+    order?: PrimitiveValue;
+    pull?: PrimitiveValue;
+    push?: PrimitiveValue;
+};
+export declare type BreakpointProps = BreakpointValues<keyof BaseColProps>;
+export declare type ColProps = BaseColProps & BreakpointProps;
+export declare const baseTypeDefs: Required<TypeDefs<BaseColProps>>;
+export declare class Col extends Component<ColProps> {
+    static template: string | import("intact").Template<any>;
+    static typeDefs: Required<TypeDefs<ColProps>>;
+    private breakpoints;
+}
+
+
+export {normalize} from 'intact-vue-next';

package/components/grid/col.js

@@ -0,0 +1,43 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import { Component } from 'intact-vue-next';
+import template from './col.vdt';
+import { PrimitiveValue, Value, breakpoints } from './constants';
+import { useBreakpoints } from './useBreakpoints';
+export var baseTypeDefs = {
+  span: PrimitiveValue,
+  offset: PrimitiveValue,
+  order: PrimitiveValue,
+  pull: PrimitiveValue,
+  push: PrimitiveValue
+};
+
+var typeDefs = _extends({}, baseTypeDefs, breakpoints.reduce(function (memo, key) {
+  memo[key] = Value;
+  return memo;
+}, {}));
+
+export var Col = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(Col, _Component);
+
+  function Col() {
+    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.breakpoints = useBreakpoints();
+    return _this;
+  }
+
+  return Col;
+}(Component);
+Col.template = template;
+Col.typeDefs = typeDefs;
+
+export {normalize} from 'intact-vue-next';

package/components/grid/col.vdt.js

@@ -0,0 +1,42 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import { createUnknownComponentVNode as _$cc, createVNode as _$cv, className as _$cn, createElementVNode as _$ce } from 'intact-vue-next';
+import { getRestProps } from '../utils';
+import { makeColStyles } from './styles';
+import { context as GutterContext, gutterStyle } from './useGutter';
+export default function ($props, $blocks, $__proto__) {
+  var _this = this;
+
+  $blocks || ($blocks = {});
+  $props || ($props = {});
+  var $this = this;
+
+  var _this$get = this.get(),
+      className = _this$get.className,
+      _children = _this$get.children,
+      span = _this$get.span,
+      style = _this$get.style,
+      offset = _this$get.offset,
+      push = _this$get.push,
+      pull = _this$get.pull,
+      order = _this$get.order;
+
+  return _$cc(GutterContext.Consumer, {
+    'children': function children(gutter) {
+      var _extends2;
+
+      var classNameObj = _extends((_extends2 = {
+        'k-col': true
+      }, _extends2["k-" + span] = span, _extends2["k-offset-" + offset] = offset, _extends2["k-pull-" + pull] = pull, _extends2["k-push-" + push] = push, _extends2["k-order-" + order] = order, _extends2[className] = className && !gutter, _extends2[makeColStyles()] = true, _extends2), _this.breakpoints.getBreakpointsClassName());
+
+      var newStyle = gutter ? gutterStyle(gutter, style, 'padding') : style;
+      return _$cv('div', _extends({
+        'className': _$cn(classNameObj)
+      }, getRestProps(_this), {
+        'style': newStyle
+      }), gutter ? _$ce(2, 'div', _children, 0, _$cn(className)) : _children);
+    }
+  });
+}
+;
+
+export {normalize} from 'intact-vue-next';

package/components/grid/constants.d.ts

@@ -0,0 +1,19 @@
+export declare type Breakpoint = 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs';
+export declare type PrimitiveValue = string | number;
+export declare type BreakpointValue = {
+    [key in Breakpoint]?: PrimitiveValue;
+};
+export declare type Value = PrimitiveValue | BreakpointValue;
+export declare type BreakpointPropsValues<T extends string> = {
+    [key in T]?: PrimitiveValue;
+};
+export declare type BreakpointValues<T extends string> = {
+    [key in Breakpoint]?: PrimitiveValue | null | undefined | BreakpointPropsValues<T>;
+};
+export declare const Value: (ObjectConstructor | StringConstructor | NumberConstructor)[];
+export declare const PrimitiveValue: (StringConstructor | NumberConstructor)[];
+export declare const responsiveMap: Record<Breakpoint, string>;
+export declare const breakpoints: Breakpoint[];
+
+
+export {normalize} from 'intact-vue-next';

package/components/grid/constants.js

@@ -0,0 +1,14 @@
+import _Object$keys from "@babel/runtime-corejs3/core-js/object/keys";
+export var Value = [String, Number, Object];
+export var PrimitiveValue = [String, Number];
+export var responsiveMap = {
+  xxl: "(min-width: 1400px)",
+  xl: "(min-width: 1200px)",
+  lg: "(min-width: 992px)",
+  md: "(min-width: 768px)",
+  sm: "(min-width: 576px)",
+  xs: "(max-width: 575px)"
+};
+export var breakpoints = _Object$keys(responsiveMap);
+
+export {normalize} from 'intact-vue-next';

package/components/grid/index.d.ts

@@ -0,0 +1,5 @@
+export * from './row';
+export * from './col';
+
+
+export {normalize} from 'intact-vue-next';

package/components/grid/index.js

@@ -0,0 +1,4 @@
+export * from './row';
+export * from './col';
+
+export {normalize} from 'intact-vue-next';

package/components/grid/row.d.ts

@@ -0,0 +1,15 @@
+import { Component, TypeDefs } from 'intact-vue-next';
+import { Value } from './constants';
+export interface RowProps {
+    gutter?: Value;
+    justify?: 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly';
+    align?: 'top' | 'bottom' | 'middle' | 'stretch' | 'baseline';
+}
+export declare class Row extends Component<RowProps> {
+    static template: string | import("intact").Template<any>;
+    static typeDefs: Required<TypeDefs<RowProps>>;
+    private gutter;
+}
+
+
+export {normalize} from 'intact-vue-next';

package/components/grid/row.js

@@ -0,0 +1,34 @@
+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 './row.vdt';
+import { useGutter } from './useGutter';
+import { Value } from './constants';
+var typeDefs = {
+  gutter: Value,
+  justify: ['start', 'end', 'center', 'between', 'around', 'evenly'],
+  align: ['top', 'bottom', 'middle', 'stretch', 'baseline']
+};
+export var Row = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(Row, _Component);
+
+  function Row() {
+    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.gutter = useGutter();
+    return _this;
+  }
+
+  return Row;
+}(Component);
+Row.template = template;
+Row.typeDefs = typeDefs;
+
+export {normalize} from 'intact-vue-next';

package/components/grid/row.vdt.js

@@ -0,0 +1,36 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import { createVNode as _$cv, className as _$cn, createUnknownComponentVNode as _$cc } from 'intact-vue-next';
+import { getRestProps } from '../utils';
+import { makeRowStyles } from './styles';
+import { context as GutterContext, gutterStyle } from './useGutter';
+export default function ($props, $blocks, $__proto__) {
+  var _classNameObj;
+
+  $blocks || ($blocks = {});
+  $props || ($props = {});
+  var $this = this;
+
+  var _this$get = this.get(),
+      className = _this$get.className,
+      children = _this$get.children,
+      style = _this$get.style,
+      justify = _this$get.justify,
+      align = _this$get.align;
+
+  var classNameObj = (_classNameObj = {
+    'k-row': true
+  }, _classNameObj["k-justify-" + justify] = justify, _classNameObj["k-align-" + align] = align, _classNameObj[className] = className, _classNameObj[makeRowStyles()] = true, _classNameObj);
+  var gutter = this.gutter.getGutter();
+  var newStyle = gutter ? gutterStyle(gutter, style, 'margin') : style;
+  return _$cv('div', _extends({
+    'className': _$cn(classNameObj)
+  }, getRestProps(this), {
+    'style': newStyle
+  }), _$cc(GutterContext.Provider, {
+    'value': gutter,
+    'children': children
+  }));
+}
+;
+
+export {normalize} from 'intact-vue-next';

package/components/grid/styles.d.ts

@@ -0,0 +1,6 @@
+import '../../styles/global';
+export declare function makeRowStyles(): string;
+export declare function makeColStyles(): string;
+
+
+export {normalize} from 'intact-vue-next';

package/components/grid/styles.js

@@ -0,0 +1,56 @@
+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 { theme, setDefault } from '../../styles/theme';
+import { deepDefaults } from '../../styles/utils';
+import '../../styles/global';
+import { breakpoints, responsiveMap } from './constants';
+var defaults = {};
+var grid;
+setDefault(function () {
+  grid = deepDefaults(theme, {
+    grid: defaults
+  }).grid;
+});
+export function makeRowStyles() {
+  return /*#__PURE__*/css(process.env.NODE_ENV === "production" ? {
+    name: "1d2b9xj",
+    styles: "position:relative;display:flex;flex-wrap:wrap;&.k-justify-start{justify-content:flex-start;}&.k-justify-end{justify-content:flex-end;}&.k-justify-center{justify-content:center;}&.k-justify-between{justify-content:space-between;}&.k-justify-around{justify-content:space-around;}&.k-justify-evenly{justify-content:space-evenly;}&.k-align-top{align-items:flex-start;}&.k-align-bottom{align-items:flex-end;}&.k-align-middle{align-items:center;}&.k-align-stretch{align-items:stretch;}&.k-align-baseline{align-items:baseline;}"
+  } : {
+    name: "1d2b9xj",
+    styles: "position:relative;display:flex;flex-wrap:wrap;&.k-justify-start{justify-content:flex-start;}&.k-justify-end{justify-content:flex-end;}&.k-justify-center{justify-content:center;}&.k-justify-between{justify-content:space-between;}&.k-justify-around{justify-content:space-around;}&.k-justify-evenly{justify-content:space-evenly;}&.k-align-top{align-items:flex-start;}&.k-align-bottom{align-items:flex-end;}&.k-align-middle{align-items:center;}&.k-align-stretch{align-items:stretch;}&.k-align-baseline{align-items:baseline;}",
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+  });
+}
+var colsStyles = makeBreakpointsCols();
+export function makeColStyles() {
+  return /*#__PURE__*/css("position:relative;width:100%;", colsStyles, ";");
+}
+
+function makeBreakpointsCols() {
+  var styles = [];
+  styles.push(makeCols(''));
+
+  for (var i = breakpoints.length - 1; i >= 0; i--) {
+    var breakpoint = breakpoints[i];
+    if (breakpoint === 'xs') continue;
+    styles.push("@media " + responsiveMap[breakpoint] + " {");
+    styles.push(makeCols("-" + breakpoint));
+    styles.push('}');
+  }
+
+  return styles.join('');
+}
+
+function makeCols(prefix) {
+  var colsStyles = [];
+
+  for (var i = 0; i < 24; i++) {
+    var percentage = String(i / 24 * 100) + '%';
+    colsStyles.push("\n            &.k" + prefix + "-" + i + " {\n                width: " + percentage + ";\n            }\n            &.k" + prefix + "-offset-" + i + " {\n                margin-left: " + percentage + ";\n            }\n            &.k" + prefix + "-order-" + i + " {\n                order: " + i + ";\n            }\n            &.k" + prefix + "-push-" + i + " {\n                left: " + percentage + ";\n            }\n            &.k" + prefix + "-pull-" + i + " {\n                right: " + percentage + ";\n            }\n        ");
+  }
+
+  return colsStyles.join('');
+}
+
+export {normalize} from 'intact-vue-next';

package/components/grid/useBreakpoints.d.ts

@@ -0,0 +1,6 @@
+export declare function useBreakpoints(): {
+    getBreakpointsClassName: () => Record<string, true>;
+};
+
+
+export {normalize} from 'intact-vue-next';

package/components/grid/useBreakpoints.js

@@ -0,0 +1,51 @@
+import _Object$keys from "@babel/runtime-corejs3/core-js/object/keys";
+import { useInstance } from 'intact-vue-next';
+import { breakpoints } from './constants';
+import { isStringOrNumber, isNullOrUndefined } from 'intact-shared';
+import { baseTypeDefs } from './col';
+export function useBreakpoints() {
+  var instance = useInstance();
+  var breakpointsValue = {};
+  breakpoints.forEach(function (breakpoint) {
+    instance.on("$receive:" + breakpoint, function (v) {
+      if (!v) {
+        breakpointsValue[breakpoint] = null;
+      } else if (isStringOrNumber(v)) {
+        breakpointsValue[breakpoint] = {
+          span: Number(v)
+        };
+      } else {
+        breakpointsValue[breakpoint] = v;
+      }
+    });
+  });
+
+  function getBreakpointsClassName() {
+    var classNameObj = {};
+    breakpoints.forEach(function (breakpoint) {
+      var value = breakpointsValue[breakpoint];
+      if (isNullOrUndefined(value)) return;
+      var prefix = breakpoint === 'xs' ? 'k-' : "k-" + breakpoint + "-";
+
+      if (!isNullOrUndefined(value.span)) {
+        classNameObj["" + prefix + value.span] = true;
+      }
+
+      _Object$keys(baseTypeDefs).forEach(function (prop) {
+        // ignore span prop
+        if (prop === 'span') return;
+
+        if (!isNullOrUndefined(value[prop])) {
+          classNameObj["" + prefix + prop + "-" + value[prop]] = true;
+        }
+      });
+    });
+    return classNameObj;
+  }
+
+  return {
+    getBreakpointsClassName: getBreakpointsClassName
+  };
+}
+
+export {normalize} from 'intact-vue-next';

package/components/grid/useGutter.d.ts

@@ -0,0 +1,11 @@
+export declare const context: {
+    Provider: import('intact-vue-next').ComponentConstructor<import("intact").Component<import("../context").ProviderProps<number>, {}, {}, {}>>;
+    Consumer: import("intact").ComponentConstructor<import("intact").Component<{}, {}, {}, {}>>;
+};
+export declare function useGutter(): {
+    getGutter: () => import("./constants").PrimitiveValue | null | undefined;
+};
+export declare function gutterStyle(gutter: number, style: string | Record<string, string> | undefined, prop: 'margin' | 'padding'): string | Record<string, string>;
+
+
+export {normalize} from 'intact-vue-next';

package/components/grid/useGutter.js

@@ -0,0 +1,104 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import { useInstance } from 'intact-vue-next';
+import { createContext } from '../context';
+import { hasDocumentAvailable, isObject, isNullOrUndefined } from 'intact-shared';
+import { useState } from '../../hooks/useState';
+import { responsiveMap } from './constants';
+var enquire;
+
+if (hasDocumentAvailable) {
+  enquire = require('enquire.js');
+}
+
+export var context = createContext(0);
+export function useGutter() {
+  var instance = useInstance();
+  var matches = useState({
+    xxl: false,
+    xl: false,
+    lg: false,
+    md: false,
+    sm: false,
+    xs: false
+  });
+
+  if (enquire) {
+    var _loop = function _loop(key) {
+      enquire.register(responsiveMap[key], {
+        match: function match() {
+          var _instance$get = instance.get(),
+              gutter = _instance$get.gutter;
+
+          if (isObject(gutter)) {
+            var _extends2;
+
+            matches.set(_extends({}, matches.value, (_extends2 = {}, _extends2[key] = true, _extends2)));
+          }
+        },
+        unmatch: function unmatch() {
+          var _instance$get2 = instance.get(),
+              gutter = _instance$get2.gutter;
+
+          if (isObject(gutter)) {
+            var _extends3;
+
+            matches.set(_extends({}, matches.value, (_extends3 = {}, _extends3[key] = false, _extends3)));
+          }
+        }
+      });
+    };
+
+    for (var key in responsiveMap) {
+      _loop(key);
+    }
+  }
+
+  function getGutter() {
+    var _instance$get3 = instance.get(),
+        gutter = _instance$get3.gutter;
+
+    if (isObject(gutter)) {
+      var _key;
+
+      var lastFound = null;
+
+      for (_key in responsiveMap) {
+        var value = gutter[_key];
+
+        if (!isNullOrUndefined(value)) {
+          lastFound = value;
+
+          if (matches.value[_key]) {
+            return value;
+          }
+        }
+      } // if the breakpoint has not value, use the closest breakpoint value instead of
+
+
+      return lastFound;
+    }
+
+    return gutter;
+  }
+
+  return {
+    getGutter: getGutter
+  };
+}
+export function gutterStyle(gutter, style, prop) {
+  var margin = gutter / 2;
+  var sign = prop === 'margin' ? '-' : '';
+  if (!style) style = '';
+
+  if (typeof style === 'string') {
+    style = "" + style + (!style || /;\s*$/.test(style) ? '' : ';') + prop + "-left: " + sign + margin + "px; " + prop + "-right: " + sign + margin + "px;";
+  } else {
+    var _extends4;
+
+    style = _extends((_extends4 = {}, _extends4[prop + "Left"] = "" + sign + margin + "px", _extends4[prop + "Right"] = "" + sign + margin + "px", _extends4), style);
+  }
+
+  return style;
+}
+
+export {normalize} from 'intact-vue-next';

package/components/icon/index.d.ts

@@ -0,0 +1,18 @@
+import { Component, TypeDefs } from 'intact-vue-next';
+import { Sizes } from '../types';
+export interface IconProps {
+    size?: Sizes | string | number;
+    color?: string;
+    rotate?: boolean;
+    hoverable?: boolean;
+}
+export declare class Icon extends Component<IconProps> {
+    static displayName: string;
+    static template: string | import("intact").Template<any>;
+    static typeDefs: Required<TypeDefs<IconProps>>;
+    static defaults: () => Partial<IconProps>;
+    private colors;
+}
+
+
+export {normalize} from 'intact-vue-next';

package/components/icon/index.js

@@ -0,0 +1,48 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+
+var _context, _context2;
+
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import { Component } from 'intact-vue-next';
+import template from './index.vdt';
+import { colors, sizes } from './styles';
+var typeDefs = {
+  size: _concatInstanceProperty(_context = []).call(_context, sizes, ['default', String, Number]),
+  color: String,
+  rotate: Boolean,
+  hoverable: Boolean
+};
+
+var defaults = function defaults() {
+  return {
+    size: 'default'
+  };
+};
+
+var defaultColors = _concatInstanceProperty(_context2 = []).call(_context2, colors, ['default']);
+
+export var Icon = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(Icon, _Component);
+
+  function Icon() {
+    var _context3;
+
+    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(_context3 = [this]).call(_context3, args)) || this;
+    _this.colors = defaultColors;
+    return _this;
+  }
+
+  return Icon;
+}(Component);
+Icon.displayName = 'Icon';
+Icon.template = template;
+Icon.typeDefs = typeDefs;
+Icon.defaults = defaults;
+
+export {normalize} from 'intact-vue-next';