@king-design/vue 2.0.0-beta.0

package/components/form/item.d.ts

@@ -0,0 +1,40 @@
+import { Component, TypeDefs } from 'intact-vue-next';
+import { messages, classNames } from './methods';
+export interface FormItemProps {
+    value?: any;
+    rules?: Rules;
+    messages?: typeof messages;
+    classNames?: typeof classNames;
+    errorClassName?: string;
+    label?: string;
+    htmlFor?: string;
+    hideLabel?: boolean;
+    fluid?: boolean;
+}
+export interface FormItemEvents {
+    change: [Event];
+    focusout: [FocusEvent];
+}
+export interface FormItemBlocks {
+    label: null;
+    content: null;
+    append: null;
+}
+export declare type Rules = Record<string, any>;
+export declare class FormItem extends Component<FormItemProps, FormItemEvents, FormItemBlocks> {
+    static template: string | import("intact").Template<any>;
+    static typeDefs: Required<TypeDefs<FormItemProps>>;
+    private form;
+    private error;
+    private dirty;
+    private validateHook;
+    init(): void;
+    validate(): boolean | (Promise<boolean> & {
+        cancelled: boolean;
+    });
+    isValid(): boolean;
+    reset(): void;
+}
+
+
+export {normalize} from 'intact-vue-next';

package/components/form/item.js

@@ -0,0 +1,76 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import { Component, inject } from 'intact-vue-next';
+import template from './item.vdt';
+import { FORM, RECORD_KEY } from './form';
+import { useRecordItem } from '../../hooks/useRecordComponent';
+import { useError } from './useError';
+import { useValidate } from './useValidate';
+import { useDirty } from './useDirty';
+var MessageOrClassname;
+
+(function (MessageOrClassname) {
+  MessageOrClassname[MessageOrClassname["Message"] = 0] = "Message";
+  MessageOrClassname[MessageOrClassname["ClassName"] = 1] = "ClassName";
+})(MessageOrClassname || (MessageOrClassname = {}));
+
+var typeDefs = {
+  value: null,
+  rules: Object,
+  messages: Object,
+  classNames: Object,
+  errorClassName: String,
+  label: String,
+  htmlFor: String,
+  hideLabel: Boolean,
+  fluid: Boolean
+};
+export var FormItem = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(FormItem, _Component);
+
+  function FormItem() {
+    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.form = inject(FORM, null);
+    _this.error = useError();
+    _this.dirty = useDirty(function () {
+      return _this.validateHook.validate;
+    });
+    _this.validateHook = useValidate(_this.error.getErrorMessage, _this.error.getErrorClassName, _this.error.message, _this.dirty.isDirty);
+    return _this;
+  }
+
+  var _proto = FormItem.prototype;
+
+  _proto.init = function init() {
+    useRecordItem(RECORD_KEY);
+  };
+
+  _proto.validate = function validate() {
+    if (!this.form) return true;
+    return this.validateHook.validate();
+  };
+
+  _proto.isValid = function isValid() {
+    return this.validateHook.isValid.value;
+  };
+
+  _proto.reset = function reset() {
+    this.error.reset();
+    this.validateHook.reset();
+    this.dirty.reset();
+  };
+
+  return FormItem;
+}(Component);
+FormItem.template = template;
+FormItem.typeDefs = typeDefs;
+
+export {normalize} from 'intact-vue-next';

package/components/form/item.vdt.js

@@ -0,0 +1,130 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import { createVNode as _$cv, className as _$cn, createElementVNode as _$ce, noop as _$no, createUnknownComponentVNode as _$cc, extend as _$ex, EMPTY_OBJ as _$em } from 'intact-vue-next';
+import { getRestProps } from '../utils';
+import { Tooltip } from '../tooltip';
+import { Icon } from '../icon';
+import { Transition } from 'intact';
+import { makeItemStyles } from './styles';
+var _$tmp0 = {
+  'className': 'ion-ios-information-outline k-form-error-more',
+  'size': 'small'
+};
+export default function ($props, $blocks, $__proto__) {
+  var _classNameObj, _$cn2;
+
+  $blocks || ($blocks = {});
+  $props || ($props = {});
+  var $this = this;
+  var _$blocks = {};
+  var __$blocks = {};
+
+  var _this$get = this.get(),
+      className = _this$get.className,
+      children = _this$get.children,
+      label = _this$get.label,
+      hideLabel = _this$get.hideLabel,
+      htmlFor = _this$get.htmlFor,
+      errorClassName = _this$get.errorClassName,
+      rules = _this$get.rules,
+      fluid = _this$get.fluid;
+
+  var _this$dirty = this.dirty,
+      isDirty = _this$dirty.isDirty.value,
+      onChange = _this$dirty.onChange,
+      onFocusout = _this$dirty.onFocusout;
+  var _this$validateHook = this.validateHook,
+      isValid = _this$validateHook.isValid.value,
+      customErrorClassName = _this$validateHook.errorClassName.value;
+  var classNameObj = (_classNameObj = {
+    'k-form-item': true,
+    'k-invalid': isDirty && !isValid,
+    'k-valid': isDirty && isValid
+  }, _classNameObj[className] = className, _classNameObj['k-fluid'] = fluid, _classNameObj[makeItemStyles()] = true, _classNameObj);
+  var starOnRequired = this.form && this.form.get('starOnRequired');
+  var labelWidth = this.form && this.form.get('labelWidth');
+  var labelStyle;
+
+  if (labelWidth != null) {
+    if (/^\d+$/.test(labelWidth)) {
+      labelStyle = {
+        width: labelWidth + 'px'
+      };
+    } else {
+      labelStyle = {
+        width: labelWidth
+      };
+    }
+  }
+
+  var _this$error = this.error,
+      ellipsis = _this$error.ellipsis,
+      message = _this$error.message,
+      errorRef = _this$error.errorRef;
+  return _$cv('div', _extends({}, getRestProps(this), {
+    'className': _$cn(classNameObj),
+    'ev-change': onChange,
+    'ev-focusout': onFocusout
+  }), [!hideLabel ? _$ce(2, 'label', [starOnRequired && rules && rules.required ? _$ce(2, 'span', '*', 16, 'k-form-star') : undefined, (_$blocks['label'] = function ($super) {
+    return label;
+  }, __$blocks['label'] = function ($super, data) {
+    var block = $blocks['label'];
+
+    var callBlock = function callBlock() {
+      return _$blocks['label'].call($this, $super, data);
+    };
+
+    return block ? block.call($this, callBlock, data) : callBlock();
+  }, __$blocks['label'](_$no))], 0, 'k-form-label', {
+    'htmlFor': htmlFor,
+    'style': labelStyle
+  }) : undefined, _$ce(2, 'div', [(_$blocks['content'] = function ($super) {
+    return children;
+  }, __$blocks['content'] = function ($super, data) {
+    var block = $blocks['content'];
+
+    var callBlock = function callBlock() {
+      return _$blocks['content'].call($this, $super, data);
+    };
+
+    return block ? block.call($this, callBlock, data) : callBlock();
+  }, __$blocks['content'](_$no)), _$cc(Transition, {
+    'key': 'error',
+    'name': 'k-fade',
+    'children': isDirty && !isValid ? _$ce(2, 'div', [_$ce(2, 'div', message.value, 0, 'k-error-message c-ellipsis', null, null, errorRef), _$cc(Tooltip, {
+      'hoverable': true,
+      'position': 'bottom',
+      'children': _$cc(Icon, _$tmp0),
+      '$blocks': function ($blocks) {
+        var _$blocks = {},
+            __$blocks = _$ex({}, $blocks);
+
+        return (_$blocks['content'] = function ($super) {
+          return message.value;
+        }, __$blocks['content'] = function ($super, data) {
+          var block = $blocks['content'];
+
+          var callBlock = function callBlock() {
+            return _$blocks['content'].call($this, $super, data);
+          };
+
+          return block ? block.call($this, callBlock, data) : callBlock();
+        }), __$blocks;
+      }.call($this, _$em)
+    })], 4, _$cn((_$cn2 = {
+      "k-form-error": true
+    }, _$cn2[errorClassName] = errorClassName, _$cn2[customErrorClassName] = customErrorClassName, _$cn2['k-ellipsis'] = ellipsis.value, _$cn2))) : undefined
+  }, 'error')], 0, 'k-form-content'), $blocks.append ? _$ce(2, 'div', (_$blocks['append'] = function ($super) {
+    return null;
+  }, __$blocks['append'] = function ($super, data) {
+    var block = $blocks['append'];
+
+    var callBlock = function callBlock() {
+      return _$blocks['append'].call($this, $super, data);
+    };
+
+    return block ? block.call($this, callBlock, data) : callBlock();
+  }, __$blocks['append'](_$no)), 0, 'k-form-append') : undefined]);
+}
+;
+
+export {normalize} from 'intact-vue-next';

package/components/form/methods.d.ts

@@ -0,0 +1,10 @@
+export declare type Method = (value: any, param: any) => boolean | string;
+export declare type Message = string | ((value: any, param: any) => string);
+export declare type ClassName = string | ((value: any, param: any) => string);
+export declare const methods: Record<string, Method>;
+export declare const messages: Record<string, Message>;
+export declare const classNames: Record<string, ClassName>;
+export declare const addMethod: (name: string, method: Method, message?: Message | undefined, className?: ClassName | undefined) => void;
+
+
+export {normalize} from 'intact-vue-next';

package/components/form/methods.js

@@ -0,0 +1,175 @@
+import _trimInstanceProperty from "@babel/runtime-corejs3/core-js/instance/trim";
+import { _$ } from '../../i18n';
+import { isNumber, isNullOrUndefined, isString } from 'intact-shared';
+
+function decimalPlaces(num) {
+  var match = ("" + num).match(/(?:\.(\d+))?$/);
+  /* istanbul ignore if */
+
+  if (!match) {
+    return 0;
+  } // Number of digits right of decimal point.
+
+
+  return match[1] ? match[1].length : 0;
+}
+
+export var methods = {
+  required: function required(value) {
+    if (isNullOrUndefined(value)) return false;
+
+    if (isString(value)) {
+      return _trimInstanceProperty(value).call(value).length > 0;
+    }
+
+    if (Array.isArray(value)) {
+      return value.length > 0;
+    }
+
+    return true;
+  },
+  digits: function digits(value) {
+    return /^\d+$/.test(value);
+  },
+  email: function email(value) {
+    return /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/.test(value);
+  },
+  url: function url(value) {
+    return /^(?:(?:(?:https?|ftp):)?\/\/)(?:\S+(?::\S*)?@)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,})).?)(?::\d{2,5})?(?:[/?#]\S*)?$/i.test(value);
+  },
+  date: function date(value) {
+    return !/Invalid|NaN/.test(new Date(value).toString());
+  },
+  dateISO: function dateISO(value) {
+    return /^\d{4}[\/\-](0?[1-9]|1[012])[\/\-](0?[1-9]|[12][0-9]|3[01])$/.test(value);
+  },
+  number: function number(value) {
+    return /^(?:-?\d+|-?\d{1,3}(?:,\d{3})+)?(?:\.\d+)?$/.test(value);
+  },
+  minLength: function minLength(value, param) {
+    if (isNumber(value)) value = String(value);
+    return value.length >= Number(param);
+  },
+  maxLength: function maxLength(value, param) {
+    if (isNumber(value)) value = String(value);
+    return value.length <= Number(param);
+  },
+  rangeLength: function rangeLength(value, param) {
+    if (isNumber(value)) value = String(value);
+    var length = value.length;
+    return length >= Number(param[0]) && length <= Number(param[1]);
+  },
+  min: function min(value, param) {
+    return Number(value) >= Number(param);
+  },
+  max: function max(value, param) {
+    return Number(value) <= Number(param);
+  },
+  range: function range(value, param) {
+    return Number(value) >= Number(param[0]) && Number(value) <= Number(param[1]);
+  },
+  step: function step(value, param) {
+    var decimals = decimalPlaces(param);
+
+    var toInt = function toInt(num) {
+      return Math.round(num * Math.pow(10, decimals));
+    };
+
+    return decimalPlaces(value) <= decimals && toInt(value) % toInt(param) === 0;
+  },
+  equal: function equal(value, param) {
+    return value === param;
+  }
+};
+export var messages = {
+  required: function required() {
+    return _$('必须填写');
+  },
+  digits: function digits() {
+    return _$('请输入数字');
+  },
+  email: function email() {
+    return _$('请输入正确的邮箱地址');
+  },
+  url: function url() {
+    return _$('请输入正确的网址');
+  },
+  date: function date() {
+    return _$('请输入正确的日期');
+  },
+  dateISO: function dateISO() {
+    return _$('请输入正确的日期 (YYYY-MM-DD)');
+  },
+  number: function number() {
+    return _$('请输入正确的数');
+  },
+  maxLength: function maxLength(value, param) {
+    if (Array.isArray(value)) {
+      return _$("\u6700\u591A\u9009\u62E9 {n} \u9879", {
+        n: param
+      });
+    } else {
+      return _$("\u6700\u591A\u8F93\u5165 {n} \u4E2A\u5B57\u7B26", {
+        n: param
+      });
+    }
+  },
+  minLength: function minLength(value, param) {
+    if (Array.isArray(value)) {
+      return _$("\u6700\u5C11\u9009\u62E9 {n} \u9879", {
+        n: param
+      });
+    } else {
+      return _$("\u6700\u5C11\u8F93\u5165 {n} \u4E2A\u5B57\u7B26", {
+        n: param
+      });
+    }
+  },
+  rangeLength: function rangeLength(value, param) {
+    if (Array.isArray(value)) {
+      return _$("\u8BF7\u9009\u62E9 {n} \u5230 {m} \u9879", {
+        n: param[0],
+        m: param[1]
+      });
+    } else {
+      return _$("\u8BF7\u8F93\u5165 {n} \u5230 {m} \u4E2A\u5B57\u7B26", {
+        n: param[0],
+        m: param[1]
+      });
+    }
+  },
+  max: function max(value, param) {
+    return _$("\u8BF7\u8F93\u5165\u4E0D\u5927\u4E8E {n} \u7684\u6570", {
+      n: param
+    });
+  },
+  min: function min(value, param) {
+    return _$("\u8BF7\u8F93\u5165\u4E0D\u5C0F\u4E8E {n} \u7684\u6570", {
+      n: param
+    });
+  },
+  range: function range(value, param) {
+    return _$("\u8BF7\u8F93\u5165 {n[0]} \u5230 {n[1]} \u4E4B\u95F4\u7684\u6570", {
+      n: param
+    });
+  },
+  step: function step(value, param) {
+    return _$("\u8BF7\u8F93\u5165\u6B65\u957F\u4E3A {n} \u7684\u6570", {
+      n: param
+    });
+  },
+  equal: function equal() {
+    return _$('两次输入不一致');
+  }
+};
+export var classNames = {};
+export var addMethod = function addMethod(name, method, message, className) {
+  methods[name] = method;
+  messages[name] = message !== undefined ? message : messages[name];
+
+  if (className) {
+    classNames[name] = className;
+  }
+};
+
+export {normalize} from 'intact-vue-next';

package/components/form/styles.d.ts

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

package/components/form/styles.js

@@ -0,0 +1,63 @@
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
+import { css } from '@emotion/css';
+import { theme, setDefault } from '../../styles/theme';
+import { deepDefaults } from '../../styles/utils';
+import '../../styles/global';
+var defaults = {
+  item: {
+    gap: "24px",
+    labelWidth: "80px",
+
+    get labelLineHeight() {
+      return theme.default.height;
+    },
+
+    labelTextAlign: 'right',
+    labelGap: '10px',
+
+    get starColor() {
+      return theme.color.danger;
+    },
+
+    starGap: '3px',
+    // invalid
+    errorFontSize: '12px',
+
+    get errorColor() {
+      return theme.color.danger;
+    },
+
+    get invalidBorder() {
+      return "1px solid " + theme.color.danger;
+    },
+
+    // append
+    appendPadding: "0 10px",
+    // layout
+    inlineGap: '16px',
+    verticalLabelGap: '8px',
+    // size
+    smallGap: '16px',
+    smallInlineGap: '12px',
+    miniGap: '8px',
+    miniInlineGap: '8px'
+  }
+};
+var form;
+setDefault(function () {
+  form = deepDefaults(theme, {
+    form: defaults
+  }).form;
+});
+export function makeItemStyles() {
+  return /*#__PURE__*/css("display:table;position:relative;table-layout:fixed;&:not(:last-of-type){margin-bottom:", form.item.gap, ";}&.k-fluid{width:100%;}.k-form-label{display:table-cell;width:", form.item.labelWidth, ";text-align:", form.item.labelTextAlign, ";padding-right:", form.item.labelGap, ";line-height:", form.item.labelLineHeight, ";}.k-form-star{color:", form.item.starColor, ";margin-right:", form.item.starGap, ";}.k-form-content{display:table-cell;vertical-align:middle;position:relative;}.k-form-error{position:absolute;color:", form.item.errorColor, ";font-size:", form.item.errorFontSize, ";left:0;right:0;display:flex;align-items:center;&.k-ellipsis{.k-form-error-more{display:inline-block;}}}.k-form-error-more{line-height:", form.item.errorFontSize, ";display:none;}&.k-invalid{.k-input{.k-input-inner{border:", form.item.invalidBorder, ";position:relative;z-index:1;}}.k-select,.k-checkbox-wrapper,.k-radio-wrapper{border:", form.item.invalidBorder, "!important;}.k-select .k-input .k-input-inner{border:none;}}.k-form-item{display:block;width:auto;}.k-form-append{display:table-cell;padding:", form.item.appendPadding, ";vertical-align:middle;}");
+}
+export function makeFormStyles() {
+  var _context;
+
+  return /*#__PURE__*/css("&.k-inline{.k-form-item{display:inline-block;vertical-align:top;margin-right:", form.item.inlineGap, ";}.k-form-label{width:auto;}}&.k-vertical{.k-form-item,.k-form-label,.k-form-content{display:block;}.k-form-label{width:auto;text-align:left;line-height:inherit;margin-bottom:", form.item.verticalLabelGap, ";}}", _mapInstanceProperty(_context = ['small', 'mini']).call(_context, function (size) {
+    return /*#__PURE__*/css("&.k-", size, "{.k-form-item:not(:last-of-type){margin:", form.item[size + "Gap"], ";}&.k-inline{.k-form-item{margin-right:", form.item[size + "InlineGap"], ";}}}");
+  }), ";");
+}
+
+export {normalize} from 'intact-vue-next';

package/components/form/useDirty.d.ts

@@ -0,0 +1,9 @@
+export declare function useDirty(getValidate: () => () => any): {
+    onChange: (e: Event) => void;
+    onFocusout: (e: FocusEvent) => void;
+    isDirty: import("../../hooks/useState").State<boolean>;
+    reset: () => void;
+};
+
+
+export {normalize} from 'intact-vue-next';

package/components/form/useDirty.js

@@ -0,0 +1,41 @@
+import { useInstance } from 'intact-vue-next';
+import { useState } from '../../hooks/useState';
+export function useDirty(getValidate) {
+  var instance = useInstance();
+  var isDirty = useState(false);
+
+  function onChange(e) {
+    dirty();
+    instance.trigger('change', e);
+  }
+
+  function onFocusout(e) {
+    dirty();
+    instance.trigger('focusout', e);
+  }
+
+  function dirty() {
+    if (isDirty.value) return;
+    isDirty.set(true); // for select, the focusout event triggers before select
+    // so we put off validating it
+
+    setTimeout(function () {
+      // maybe it has been unmounted or reset
+      if (instance.$unmounted || !isDirty.value) return;
+      getValidate()();
+    }, 100);
+  }
+
+  function reset() {
+    isDirty.set(false);
+  }
+
+  return {
+    onChange: onChange,
+    onFocusout: onFocusout,
+    isDirty: isDirty,
+    reset: reset
+  };
+}
+
+export {normalize} from 'intact-vue-next';

package/components/form/useError.d.ts

@@ -0,0 +1,11 @@
+export declare function useError(): {
+    ellipsis: import("../../hooks/useState").State<boolean>;
+    message: import("../../hooks/useState").State<string | undefined>;
+    errorRef: import('intact-vue-next').RefObject<HTMLDivElement>;
+    getErrorMessage: (key: string) => string;
+    getErrorClassName: (key: string) => string;
+    reset: () => void;
+};
+
+
+export {normalize} from 'intact-vue-next';

package/components/form/useError.js

@@ -0,0 +1,59 @@
+import { useInstance, nextTick, createRef } from 'intact-vue-next';
+import { useState, watchState } from '../../hooks/useState';
+import { messages as globalMessages, classNames as globalClassNames } from './methods';
+import { isFunction } from 'intact-shared'; // enum MessageOrClassname {
+// Message,
+// ClassName,
+// }
+
+export function useError() {
+  var instance = useInstance();
+  var ellipsis = useState(false);
+  var message = useState(undefined);
+  var errorRef = createRef();
+  watchState(message, function () {
+    nextTick(checkEllipsis);
+  });
+
+  function checkEllipsis() {
+    var error = errorRef.value;
+    if (!error) return;
+    ellipsis.set(error.offsetWidth < error.scrollWidth);
+  }
+
+  function getErrorMessageOrClassName(type, key) {
+    var custom = instance.get(type);
+    var value = custom && custom[key] || (type === 'messages' ? globalMessages[key] : globalClassNames[key]);
+
+    if (isFunction(value)) {
+      var rules = instance.get('rules');
+      return value(instance.get('value'), rules[key]);
+    }
+
+    return value;
+  }
+
+  function getErrorMessage(key) {
+    return getErrorMessageOrClassName('messages', key);
+  }
+
+  function getErrorClassName(key) {
+    return getErrorMessageOrClassName('classNames', key);
+  }
+
+  function reset() {
+    ellipsis.set(false);
+    message.set(undefined);
+  }
+
+  return {
+    ellipsis: ellipsis,
+    message: message,
+    errorRef: errorRef,
+    getErrorMessage: getErrorMessage,
+    getErrorClassName: getErrorClassName,
+    reset: reset
+  };
+}
+
+export {normalize} from 'intact-vue-next';

package/components/form/useValidate.d.ts

@@ -0,0 +1,14 @@
+import { State } from '../../hooks/useState';
+declare type PromiseWithCancelled = Promise<boolean> & {
+    cancelled: boolean;
+};
+export declare function useValidate(getErrorMessage: (ruleName: string) => string, getErrorClassName: (ruleName: string) => string, message: State<string | undefined>, isDirty: State<boolean>): {
+    isValid: State<boolean>;
+    errorClassName: State<string | undefined>;
+    validate: () => PromiseWithCancelled | boolean;
+    reset: () => void;
+};
+export {};
+
+
+export {normalize} from 'intact-vue-next';