@opentiny/vue-renderless 3.1.0-alpha.0

package/ip-address/index.js

@@ -0,0 +1,370 @@
+import { KEY_CODE, IPTHRESHOLD } from '@opentiny/vue-renderless/common';
+export var isIP6 = function isIP6(str) {
+  return /^IPv6$/i.test(str);
+};
+export var isIP4 = function isIP4(str) {
+  return /^IPv4$/i.test(str);
+};
+export var ipValidator = function ipValidator(_ref) {
+  var props = _ref.props,
+    api = _ref.api;
+  return function (value) {
+    var result = true;
+    if (props.type) {
+      if (api.isIP6(props.type)) {
+        result = typeof value === 'string';
+      } else if (api.isIP4(props.type)) {
+        result = /^((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})(\.((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})){3}$/.test(value);
+      }
+    }
+    return result;
+  };
+};
+export var getCursorPosition = function getCursorPosition(el) {
+  var cursorPos = 0;
+  var selectRange = null;
+  if (document.selection) {
+    selectRange = document.selection.createRange();
+    selectRange.moveStart('character', -el.value.length);
+    cursorPos = selectRange.text.length;
+  }
+  if (el.selectionStart || el.selectionStart === '0') {
+    cursorPos = el.selectionStart;
+  }
+  return cursorPos;
+};
+export var getValue = function getValue(_ref2) {
+  var api = _ref2.api,
+    props = _ref2.props,
+    state = _ref2.state;
+  return function () {
+    var valueArr = [];
+    var result = '';
+    if (api.isIP6(props.type)) {
+      result = state.address[0].value || '';
+    } else {
+      state.address.forEach(function (item) {
+        if (api.isIP4(props.type) && item.value) {
+          item.value = item.value.replace(/\D/g, '');
+        }
+        item.value && valueArr.push(item.value);
+      });
+      result = state.address.filter(function (item) {
+        return item.value;
+      }).length === 4 ? valueArr.join('.') : '';
+    }
+    return result;
+  };
+};
+export var setValue = function setValue(_ref3) {
+  var api = _ref3.api,
+    props = _ref3.props,
+    state = _ref3.state;
+  return function (value) {
+    if (value) {
+      if (api.ipValidator(value)) {
+        if (api.isIP6(props.type)) {
+          state.address = [{
+            value: value
+          }];
+        } else {
+          state.address = value.split('.').map(function (item) {
+            return {
+              value: item
+            };
+          });
+        }
+      }
+    } else {
+      state.address = api.isIP6(props.type) ? [{
+        value: ''
+      }] : [{
+        value: ''
+      }, {
+        value: ''
+      }, {
+        value: ''
+      }, {
+        value: ''
+      }];
+    }
+  };
+};
+var activeEvent = function activeEvent(_ref4) {
+  var emit = _ref4.emit,
+    parent = _ref4.parent,
+    state = _ref4.state,
+    index = _ref4.index,
+    event = _ref4.event,
+    type = _ref4.type;
+  var target = event && event.target ? event.target : parent.$el.querySelectorAll('input')[index || 0];
+  type === 'focus' && (state.active = true);
+  if (!event) {
+    if (target && !state.isSelected) {
+      state.isSelected = true;
+      target[type]();
+      setTimeout(function () {
+        state.isSelected = false;
+      }, 10);
+      emit(type, target.value, index);
+    }
+  } else {
+    !state.isSelected && emit(type, target.value, index);
+  }
+};
+export var focus = function focus(_ref5) {
+  var emit = _ref5.emit,
+    parent = _ref5.parent,
+    state = _ref5.state;
+  return function (_ref6) {
+    var index = _ref6.index,
+      event = _ref6.event;
+    activeEvent({
+      emit: emit,
+      parent: parent,
+      state: state,
+      index: index,
+      event: event,
+      type: 'focus'
+    });
+  };
+};
+export var select = function select(_ref7) {
+  var emit = _ref7.emit,
+    parent = _ref7.parent,
+    state = _ref7.state;
+  return function (_ref8) {
+    var index = _ref8.index,
+      event = _ref8.event;
+    activeEvent({
+      emit: emit,
+      parent: parent,
+      state: state,
+      index: index,
+      event: event,
+      type: 'select'
+    });
+  };
+};
+export var inputEvent = function inputEvent(_ref9) {
+  var api = _ref9.api,
+    emit = _ref9.emit,
+    props = _ref9.props;
+  return function (_ref10) {
+    var item = _ref10.item,
+      index = _ref10.index;
+    var val = item.value.trim();
+    var value = '';
+    if (api.isIP4(props.type)) {
+      if (!index && api.ipValidator(val)) {
+        api.setValue(val);
+      } else if (isNaN(val) || val < IPTHRESHOLD.Min || val > IPTHRESHOLD.Max) {
+        item.value = '';
+      }
+    } else {
+      item.value = val.replace(/[\u4E00-\u9FA5]/g, '');
+    }
+    value = api.getValue();
+    emit('update:modelValue', value, index);
+  };
+};
+export var change = function change(_ref11) {
+  var api = _ref11.api,
+    emit = _ref11.emit;
+  return function () {
+    var value = api.getValue();
+    emit('change', value);
+  };
+};
+export var blur = function blur(_ref12) {
+  var api = _ref12.api,
+    componentName = _ref12.componentName,
+    emit = _ref12.emit,
+    eventName = _ref12.eventName,
+    props = _ref12.props,
+    state = _ref12.state;
+  return function (_ref13) {
+    var item = _ref13.item,
+      index = _ref13.index;
+    state.active = false;
+    state.isDel = false;
+    if (api.isIP4(props.type)) {
+      item.value = item.value.replace(/\D/g, '');
+    }
+    emit('blur', item.value, index);
+    api.dispatch(componentName, eventName);
+  };
+};
+export var keyup = function keyup(_ref14) {
+  var api = _ref14.api,
+    props = _ref14.props;
+  return function (_ref15) {
+    var item = _ref15.item,
+      index = _ref15.index,
+      event = _ref15.event;
+    var keyCode = event.keyCode;
+    var value = item.value.trim();
+    var nextIndex = index + 1;
+    if (api.isIP4(props.type)) {
+      if (isNaN(item.value)) {
+        item.value = item.value.replace(/\D/g, '');
+        return false;
+      }
+      if ([KEY_CODE.Tab, KEY_CODE.Space, KEY_CODE.NumpadDecimal, KEY_CODE.NumpadComma].indexOf(keyCode) > -1 && value) {
+        api.select({
+          index: nextIndex
+        });
+        return false;
+      }
+      if ((value === '0' || value > IPTHRESHOLD.NonNumeric || value.length === 3) && !isNaN(event.key)) {
+        api.focus({
+          index: nextIndex
+        });
+        api.select({
+          index: nextIndex
+        });
+        return false;
+      }
+    }
+  };
+};
+var checkError1 = function checkError1(_ref16) {
+  var Tab = _ref16.Tab,
+    Space = _ref16.Space,
+    NumpadDecimal = _ref16.NumpadDecimal,
+    NumpadComma = _ref16.NumpadComma,
+    keyCode = _ref16.keyCode,
+    value = _ref16.value;
+  return [Tab, Space, NumpadDecimal, NumpadComma].indexOf(keyCode) > -1 && value;
+};
+var checkError2 = function checkError2(newValue) {
+  return newValue && (isNaN(newValue) || newValue > IPTHRESHOLD.Max);
+};
+var checkError3 = function checkError3(_ref17) {
+  var isfilterKeyCodes = _ref17.isfilterKeyCodes,
+    isSelected = _ref17.isSelected,
+    value = _ref17.value;
+  return !isfilterKeyCodes && !isSelected && value === '0';
+};
+var checkError4 = function checkError4(_ref18) {
+  var isfilterKeyCodes = _ref18.isfilterKeyCodes,
+    isSelected = _ref18.isSelected,
+    value = _ref18.value,
+    key = _ref18.key;
+  return !isfilterKeyCodes && !isSelected && value + key > IPTHRESHOLD.Max;
+};
+var checkError5 = function checkError5(_ref19) {
+  var key = _ref19.key,
+    isfilterKeyCodes = _ref19.isfilterKeyCodes,
+    value = _ref19.value,
+    ctrlKey = _ref19.ctrlKey,
+    keyCode = _ref19.keyCode,
+    KeyV = _ref19.KeyV;
+  return isNaN(key) && !isfilterKeyCodes && !(!value && ctrlKey && keyCode === KeyV);
+};
+var isError = function isError(_ref20) {
+  var key = _ref20.key,
+    value = _ref20.value,
+    isSelected = _ref20.isSelected,
+    isfilterKeyCodes = _ref20.isfilterKeyCodes,
+    ctrlKey = _ref20.ctrlKey,
+    keyCode = _ref20.keyCode,
+    newValue = _ref20.newValue;
+  var Tab = KEY_CODE.Tab,
+    Space = KEY_CODE.Space,
+    NumpadDecimal = KEY_CODE.NumpadDecimal,
+    NumpadComma = KEY_CODE.NumpadComma,
+    KeyV = KEY_CODE.KeyV;
+  return checkError1({
+    Tab: Tab,
+    Space: Space,
+    NumpadDecimal: NumpadDecimal,
+    NumpadComma: NumpadComma,
+    keyCode: keyCode,
+    value: value
+  }) || checkError2(newValue) || checkError3({
+    isfilterKeyCodes: isfilterKeyCodes,
+    isSelected: isSelected,
+    value: value
+  }) || checkError4({
+    isfilterKeyCodes: isfilterKeyCodes,
+    isSelected: isSelected,
+    value: value,
+    key: key
+  }) || checkError5({
+    key: key,
+    isfilterKeyCodes: isfilterKeyCodes,
+    value: value,
+    ctrlKey: ctrlKey,
+    keyCode: keyCode,
+    KeyV: KeyV
+  });
+};
+export var keydown = function keydown(_ref21) {
+  var api = _ref21.api,
+    props = _ref21.props,
+    state = _ref21.state;
+  return function (_ref22) {
+    var item = _ref22.item,
+      index = _ref22.index,
+      event = _ref22.event;
+    var target = event.target,
+      key = event.key,
+      keyCode = event.keyCode,
+      ctrlKey = event.ctrlKey;
+    var value = item.value;
+    var selectionStart = target.selectionStart;
+    var selectionEnd = target.selectionEnd;
+    var isSelected = selectionStart !== selectionEnd;
+    var cursorPosition = api.getCursorPosition(target);
+    var isfilterKeyCodes = state.filterKeyCodes.indexOf(keyCode) !== -1;
+    var nextIndex = index + 1;
+    var lastIndex = index - 1;
+    var newValue = isSelected && !isfilterKeyCodes && value.substr(0, selectionStart) + key + value.substr(selectionEnd);
+    if (api.isIP4(props.type)) {
+      state.isDel = keyCode === KEY_CODE.Backspace || keyCode === KEY_CODE.Delete;
+      if (keyCode === KEY_CODE.Backspace && cursorPosition === 0 && !selectionEnd) {
+        api.focus({
+          index: lastIndex
+        });
+        return false;
+      }
+      if (keyCode === KEY_CODE.ArrowLeft && cursorPosition === 0) {
+        api.focus({
+          index: lastIndex
+        });
+        event.preventDefault();
+        return false;
+      }
+      if (keyCode === KEY_CODE.ArrowRight && cursorPosition === value.length) {
+        api.focus({
+          index: nextIndex
+        });
+        event.preventDefault();
+        return false;
+      }
+      if (isError({
+        key: key,
+        value: value,
+        isSelected: isSelected,
+        isfilterKeyCodes: isfilterKeyCodes,
+        ctrlKey: ctrlKey,
+        keyCode: keyCode,
+        newValue: newValue
+      })) {
+        event.preventDefault();
+        return false;
+      }
+    }
+  };
+};
+export var getHeightOfSize = function getHeightOfSize(size) {
+  var isLineHeight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'height';
+  var sizeMap = {
+    medium: '42px',
+    small: '36px',
+    mini: '24px'
+  };
+  var sizePX = sizeMap[size];
+  return sizePX ? isLineHeight + ':' + sizePX + ';' : '';
+};

package/ip-address/vue.js

@@ -0,0 +1,185 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import { isIP6, isIP4, ipValidator, getCursorPosition, getValue, setValue, focus, select, inputEvent, change, blur, keyup, keydown, getHeightOfSize } from './index';
+import { KEY_CODE } from '@opentiny/vue-renderless/common';
+export var api = ['state', 'focus', 'inputEvent', 'blur', 'keyup', 'keydown', 'change', 'select'];
+var initState = function initState(_ref) {
+  var reactive = _ref.reactive,
+    computed = _ref.computed,
+    handleValue = _ref.handleValue,
+    parent = _ref.parent,
+    props = _ref.props;
+  var state = reactive(_objectSpread(_objectSpread({}, handleValue.state), {}, {
+    active: false,
+    isSelected: false,
+    filterKeyCodes: [KEY_CODE.AtMark, KEY_CODE.Backspace, KEY_CODE.ArrowLeft, KEY_CODE.ArrowRight, KEY_CODE.Tab, KEY_CODE.Delete],
+    formDisabled: computed(function () {
+      return (parent.tinyForm || {}).disabled;
+    }),
+    disabled: computed(function () {
+      return props.disabled || state.formDisabled;
+    }),
+    heightStyle: computed(function () {
+      return getHeightOfSize(props.size);
+    }),
+    lineHeightStyle: computed(function () {
+      return getHeightOfSize(props.size, 'line-height');
+    }),
+    allHeightStyle: computed(function () {
+      return "".concat(state.heightStyle).concat(state.lineHeightStyle);
+    })
+  }));
+  return state;
+};
+var initApi = function initApi(_ref2) {
+  var state = _ref2.state,
+    api = _ref2.api,
+    dispatch = _ref2.dispatch,
+    handleValue = _ref2.handleValue,
+    emit = _ref2.emit,
+    broadcast = _ref2.broadcast,
+    parent = _ref2.parent,
+    componentName = _ref2.componentName,
+    props = _ref2.props,
+    eventName = _ref2.eventName;
+  Object.assign(api, _objectSpread(_objectSpread({}, handleValue.api), {}, {
+    state: state,
+    dispatch: dispatch,
+    broadcast: broadcast,
+    getCursorPosition: getCursorPosition,
+    focus: focus({
+      emit: emit,
+      props: props,
+      parent: parent,
+      state: state
+    }),
+    select: select({
+      emit: emit,
+      props: props,
+      parent: parent,
+      state: state
+    }),
+    blur: blur({
+      api: api,
+      componentName: componentName,
+      emit: emit,
+      eventName: eventName.blur,
+      props: props,
+      state: state
+    }),
+    keyup: keyup({
+      api: api,
+      props: props,
+      parent: parent
+    }),
+    change: change({
+      api: api,
+      emit: emit,
+      props: props
+    }),
+    keydown: keydown({
+      api: api,
+      props: props,
+      state: state
+    }),
+    inputEvent: inputEvent({
+      api: api,
+      emit: emit,
+      props: props
+    })
+  }));
+};
+export var useHandleValue = function useHandleValue(_ref3) {
+  var componentName = _ref3.componentName,
+    dispatch = _ref3.dispatch,
+    eventName = _ref3.eventName,
+    props = _ref3.props,
+    reactive = _ref3.reactive,
+    toRefs = _ref3.toRefs,
+    watch = _ref3.watch;
+  var state = reactive({
+    address: [],
+    isDel: false
+  });
+  var api = {
+    isIP6: isIP6,
+    isIP4: isIP4
+  };
+  api.getValue = getValue({
+    api: api,
+    props: props,
+    state: state
+  });
+  api.setValue = setValue({
+    api: api,
+    props: props,
+    state: state
+  });
+  api.ipValidator = ipValidator({
+    api: api,
+    props: props
+  });
+  watch(function () {
+    return props.modelValue;
+  }, function (value) {
+    if (!state.isDel) {
+      api.setValue(value);
+      dispatch(componentName, eventName, [value]);
+    }
+  }, {
+    immediate: true
+  });
+  return {
+    state: toRefs(state),
+    api: api
+  };
+};
+export var renderless = function renderless(props, _ref4, _ref5) {
+  var reactive = _ref4.reactive,
+    toRefs = _ref4.toRefs,
+    watch = _ref4.watch,
+    inject = _ref4.inject,
+    computed = _ref4.computed;
+  var $prefix = _ref5.$prefix,
+    emit = _ref5.emit,
+    parent = _ref5.parent,
+    broadcast = _ref5.broadcast,
+    dispatch = _ref5.dispatch;
+  var api = {};
+  var componentName = "".concat($prefix, "FormItem");
+  var eventName = {
+    change: "".concat($prefix, ".form.change"),
+    blur: "".concat($prefix, ".form.blur")
+  };
+  parent.tinyForm = parent.tinyForm || inject('form', null);
+  var handleValue = useHandleValue({
+    componentName: componentName,
+    dispatch: dispatch,
+    eventName: eventName.change,
+    props: props,
+    reactive: reactive,
+    toRefs: toRefs,
+    watch: watch
+  });
+  var state = initState({
+    reactive: reactive,
+    computed: computed,
+    handleValue: handleValue,
+    parent: parent,
+    props: props
+  });
+  initApi({
+    api: api,
+    state: state,
+    handleValue: handleValue,
+    dispatch: dispatch,
+    broadcast: broadcast,
+    emit: emit,
+    props: props,
+    parent: parent,
+    componentName: componentName,
+    eventName: eventName
+  });
+  return api;
+};

package/layout/vue.js

@@ -0,0 +1,4 @@
+export var api = [];
+export var renderless = function renderless() {
+  return {};
+};

package/link/index.js

@@ -0,0 +1,10 @@
+export var handleClick = function handleClick(_ref) {
+  var emit = _ref.emit,
+    props = _ref.props,
+    state = _ref.state;
+  return function (event) {
+    if (!state.disabled && !props.href) {
+      emit('click', event);
+    }
+  };
+};

package/link/vue.js

@@ -0,0 +1,26 @@
+import { handleClick } from './index';
+export var api = ['state', 'handleClick'];
+export var renderless = function renderless(props, _ref, _ref2) {
+  var inject = _ref.inject,
+    reactive = _ref.reactive,
+    computed = _ref.computed;
+  var emit = _ref2.emit,
+    parent = _ref2.parent;
+  parent.tinyForm = parent.tinyForm || inject('form', null);
+  var state = reactive({
+    formDisabled: computed(function () {
+      return (parent.tinyForm || {}).disabled;
+    }),
+    disabled: computed(function () {
+      return props.disabled || state.formDisabled;
+    })
+  });
+  return {
+    state: state,
+    handleClick: handleClick({
+      emit: emit,
+      props: props,
+      state: state
+    })
+  };
+};