@opentiny/vue-renderless 3.1.0-alpha.0

package/input/index.js

@@ -0,0 +1,319 @@
+import { isSame } from '@opentiny/vue-renderless/common/type';
+var HIDDEN_STYLE = "\nheight:0 !important;visibility:hidden !important;overflow:hidden !important;\nposition:absolute !important;z-index:-1000 !important;top:0 !important;right:0 !important\n";
+var CONTEXT_STYLE = ['width', 'line-height', 'padding-top', 'padding-bottom', 'padding-left', 'padding-right', 'border-width', 'box-sizing', 'letter-spacing', 'font-family', 'font-weight', 'font-size', 'text-rendering', 'text-transform', 'text-indent'];
+var STYLE = {
+  BoxSizing: 'box-sizing',
+  BorderBox: 'border-box',
+  ContentBox: 'content-box',
+  PaddingTop: 'padding-top',
+  PaddingBottom: 'padding-bottom',
+  BorderTopWidth: 'border-top-width',
+  BorderBottomWidth: 'border-bottom-width'
+};
+var isServer = typeof window === 'undefined';
+var isKorean = function isKorean(text) {
+  return /([(\uAC00-\uD7AF)|(\u3130-\u318F)])+/gi.test(text);
+};
+export var showBox = function showBox(state) {
+  return function () {
+    if (state.inputDisabled) {
+      return false;
+    }
+    state.boxVisibility = true;
+  };
+};
+export var calculateNodeStyling = function calculateNodeStyling() {
+  return function (targetElement) {
+    var style = window.getComputedStyle(targetElement);
+    var boxSizing = style.getPropertyValue(STYLE.BoxSizing);
+    var paddingSize = parseFloat(style.getPropertyValue(STYLE.PaddingBottom)) + parseFloat(style.getPropertyValue(STYLE.PaddingTop));
+    var borderSize = parseFloat(style.getPropertyValue(STYLE.BorderBottomWidth)) + parseFloat(style.getPropertyValue(STYLE.BorderTopWidth));
+    var contextStyle = CONTEXT_STYLE.map(function (name) {
+      return "".concat(name, ":").concat(style.getPropertyValue(name));
+    }).join(';');
+    return {
+      contextStyle: contextStyle,
+      paddingSize: paddingSize,
+      borderSize: borderSize,
+      boxSizing: boxSizing
+    };
+  };
+};
+export var calcTextareaHeight = function calcTextareaHeight(_ref) {
+  var api = _ref.api,
+    hiddenTextarea = _ref.hiddenTextarea,
+    props = _ref.props;
+  return function (targetElement) {
+    var minRows = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
+    var maxRows = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+    if (!hiddenTextarea) {
+      hiddenTextarea = document.createElement('textarea');
+      document.body.appendChild(hiddenTextarea);
+    }
+    var _api$calculateNodeSty = api.calculateNodeStyling(targetElement),
+      paddingSize = _api$calculateNodeSty.paddingSize,
+      borderSize = _api$calculateNodeSty.borderSize,
+      boxSizing = _api$calculateNodeSty.boxSizing,
+      contextStyle = _api$calculateNodeSty.contextStyle;
+    hiddenTextarea.setAttribute('style', "".concat(contextStyle, ";").concat(HIDDEN_STYLE));
+    hiddenTextarea.value = targetElement.value || targetElement.placeholder || '';
+    var height = hiddenTextarea.scrollHeight;
+    var textareaStyle = {};
+    if (boxSizing === STYLE.BorderBox) {
+      height = height + borderSize * 2 + paddingSize;
+    } else if (boxSizing === STYLE.ContentBox) {
+      height = height - paddingSize;
+    }
+    hiddenTextarea.value = '';
+    var singleRowHeight = hiddenTextarea.scrollHeight - paddingSize;
+    if (minRows !== null) {
+      var minHeight = singleRowHeight * minRows;
+      if (boxSizing === STYLE.BorderBox) {
+        minHeight = minHeight + paddingSize + borderSize;
+      }
+      if (props.size) {
+        minHeight = props.size == 'mini' ? minHeight * 0.67 : props.size == 'small' ? minHeight : minHeight * 1.17;
+      }
+      if (props.height) {
+        minHeight = props.height;
+      }
+      height = Math.max(minHeight, height);
+      textareaStyle.minHeight = "".concat(minHeight, "px");
+    }
+    if (maxRows !== null) {
+      var maxHeight = singleRowHeight * maxRows;
+      if (boxSizing === STYLE.BorderBox) {
+        maxHeight += borderSize + paddingSize;
+      }
+      height = Math.min(maxHeight, height);
+    }
+    textareaStyle.height = "".concat(height, "px");
+    hiddenTextarea.parentNode && hiddenTextarea.parentNode.removeChild(hiddenTextarea);
+    hiddenTextarea = null;
+    return textareaStyle;
+  };
+};
+export var getInput = function getInput(refs) {
+  return function () {
+    return refs.input || refs.textarea;
+  };
+};
+export var blur = function blur(api) {
+  return function () {
+    return api.getInput().blur();
+  };
+};
+export var focus = function focus(api) {
+  return function () {
+    return api.getInput().focus();
+  };
+};
+export var select = function select(api) {
+  return function () {
+    return api.getInput().select();
+  };
+};
+export var handleBlur = function handleBlur(_ref2) {
+  var api = _ref2.api,
+    componentName = _ref2.componentName,
+    eventName = _ref2.eventName,
+    emit = _ref2.emit,
+    props = _ref2.props,
+    state = _ref2.state;
+  return function (event) {
+    state.focused = false;
+    emit('blur', event);
+    api.isMemoryStorage.value = false;
+    if (props.validateEvent) {
+      api.dispatch(componentName, eventName, [props.modelValue]);
+    }
+  };
+};
+export var handleFocus = function handleFocus(_ref3) {
+  var api = _ref3.api,
+    emit = _ref3.emit,
+    state = _ref3.state;
+  return function (event) {
+    state.focused = true;
+    emit('focus', event);
+    api.searchMemory(event.target.value);
+  };
+};
+export var handleInput = function handleInput(_ref4) {
+  var api = _ref4.api,
+    emit = _ref4.emit,
+    nextTick = _ref4.nextTick,
+    state = _ref4.state;
+  return function (event) {
+    if (state.isComposing) {
+      return;
+    }
+    if (event.target.value === state.nativeInputValue) {
+      return;
+    }
+    emit('update:modelValue', event.target.value);
+    emit('input', event);
+    api.searchMemory(event.target.value);
+    nextTick(api.setNativeInputValue);
+  };
+};
+export var handleChange = function handleChange(emit) {
+  return function (event) {
+    return emit('change', event.target.value);
+  };
+};
+export var resizeTextarea = function resizeTextarea(_ref5) {
+  var api = _ref5.api,
+    parent = _ref5.parent,
+    refs = _ref5.refs,
+    state = _ref5.state;
+  return function () {
+    if (isServer) {
+      return;
+    }
+    var autosize = parent.autosize,
+      type = parent.type;
+    if (type !== 'textarea') {
+      return;
+    }
+    if (!autosize) {
+      state.textareaCalcStyle = {
+        minHeight: api.calcTextareaHeight(refs.textarea).minHeight
+      };
+      return;
+    }
+    var minRows = autosize.minRows;
+    var maxRows = autosize.maxRows;
+    state.textareaCalcStyle = api.calcTextareaHeight(refs.textarea, minRows, maxRows);
+  };
+};
+export var setNativeInputValue = function setNativeInputValue(_ref6) {
+  var api = _ref6.api,
+    state = _ref6.state;
+  return function () {
+    var input = api.getInput();
+    if (!input) {
+      return;
+    }
+    if (isSame(input.value, state.nativeInputValue)) {
+      return;
+    }
+    input.value = state.nativeInputValue;
+  };
+};
+export var handleCompositionStart = function handleCompositionStart(state) {
+  return function () {
+    return state.isComposing = true;
+  };
+};
+export var handleCompositionUpdate = function handleCompositionUpdate(state) {
+  return function (event) {
+    var text = event.target.value;
+    var lastCharacter = text[text.length - 1] || '';
+    state.isComposing = !isKorean(lastCharacter);
+  };
+};
+export var handleCompositionEnd = function handleCompositionEnd(_ref7) {
+  var api = _ref7.api,
+    state = _ref7.state;
+  return function (event) {
+    if (state.isComposing) {
+      state.isComposing = false;
+      api.handleInput(event);
+    }
+  };
+};
+export var calcIconOffset = function calcIconOffset(_ref8) {
+  var CLASS_PREFIX = _ref8.CLASS_PREFIX,
+    parent = _ref8.parent;
+  return function (place) {
+    var elList = [].slice.call(parent.$el.querySelectorAll(".".concat(CLASS_PREFIX.Input).concat(place)) || []);
+    if (!elList.length) {
+      return;
+    }
+    var el = null;
+    for (var i = 0, len = elList.length; i < len; i++) {
+      if (elList[i].parentNode === parent.$el) {
+        el = elList[i];
+        break;
+      }
+    }
+    if (!el) {
+      return;
+    }
+    var pendantMap = {
+      suffix: 'append',
+      prefix: 'prepend'
+    };
+    var pendant = pendantMap[place];
+    if (parent.$slots[pendant]) {
+      var dom = parent.$el.querySelector(".".concat(CLASS_PREFIX.InputGroup).concat(pendant));
+      var transform;
+      if (place === 'suffix') {
+        transform = "translateX(-".concat(dom.offsetWidth, "px)");
+      } else if (place === 'prefix') {
+        transform = "translate(".concat(dom.offsetWidth, "px, -50%)");
+      }
+      el.style.transform = transform;
+    } else {
+      el.removeAttribute('style');
+    }
+  };
+};
+export var updateIconOffset = function updateIconOffset(api) {
+  return function () {
+    api.calcIconOffset('prefix');
+    api.calcIconOffset('suffix');
+  };
+};
+export var clear = function clear(emit) {
+  return function () {
+    emit('update:modelValue', '');
+    emit('change', '');
+    emit('clear');
+  };
+};
+export var handlePasswordVisible = function handlePasswordVisible(_ref9) {
+  var api = _ref9.api,
+    nextTick = _ref9.nextTick,
+    state = _ref9.state;
+  return function () {
+    state.passwordVisible = !state.passwordVisible;
+    nextTick(api.focus);
+  };
+};
+export var getSuffixVisible = function getSuffixVisible(_ref10) {
+  var parent = _ref10.parent,
+    props = _ref10.props,
+    state = _ref10.state;
+  return function () {
+    return parent.$slots.suffix || props.suffixIcon || state.showClear || props.showPassword || state.isWordLimitVisible || state.validateState && state.needStatusIcon;
+  };
+};
+export var textLength = function textLength(value) {
+  if (typeof value === 'number') {
+    return String(value).length;
+  }
+  return (value || '').length;
+};
+export var watchFormSelect = function watchFormSelect(_ref11) {
+  var emit = _ref11.emit,
+    props = _ref11.props,
+    state = _ref11.state;
+  return function (value) {
+    if (props.isSelect) {
+      emit('update:modelValue', value);
+      emit('change', value);
+      var filterData = props.selectMenu.length && props.selectMenu.filter(function (item) {
+        return item.id === value;
+      }).shift();
+      state.checkedLable = filterData ? filterData.label : '';
+    }
+  };
+};
+export var hasSelection = function hasSelection(api) {
+  return function () {
+    var input = api.getInput();
+    return input && input.selectionStart !== input.selectionEnd;
+  };
+};

package/input/vue.js

@@ -0,0 +1,319 @@
+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 { blur, showBox, watchFormSelect, clear, focus, select, getInput, textLength, handleBlur, handleFocus, handleInput, handleChange, calcIconOffset, resizeTextarea, getSuffixVisible, updateIconOffset, calcTextareaHeight, setNativeInputValue, calculateNodeStyling, handleCompositionEnd, handlePasswordVisible, handleCompositionStart, handleCompositionUpdate, hasSelection } from './index';
+import useStorageBox from '@opentiny/vue-renderless/tall-storage/vue-storage-box';
+export var api = ['blur', 'showBox', 'clear', 'focus', 'state', 'select', 'getInput', 'handleBlur', 'handleInput', 'handleFocus', 'handleChange', 'calcIconOffset', 'resizeTextarea', 'getSuffixVisible', 'updateIconOffset', 'calcTextareaHeight', 'setNativeInputValue', 'calculateNodeStyling', 'handleCompositionEnd', 'handlePasswordVisible', 'handleCompositionStart', 'handleCompositionUpdate', 'addMemory', 'searchMemory', 'selectedMemory', 'storageData', 'isMemoryStorage', 'hasSelection'];
+var initState = function initState(_ref) {
+  var reactive = _ref.reactive,
+    computed = _ref.computed,
+    mode = _ref.mode,
+    props = _ref.props,
+    parent = _ref.parent,
+    constants = _ref.constants;
+  var state = reactive({
+    mode: mode,
+    focused: false,
+    hovering: false,
+    isComposing: false,
+    passwordVisible: false,
+    boxVisibility: false,
+    textareaCalcStyle: {},
+    checkedLable: '',
+    sheetvalue: props.modelValue,
+    inputSize: computed(function () {
+      return props.size || state.formItemSize;
+    }),
+    showClear: computed(function () {
+      return props.clearable && !state.inputDisabled && !props.readonly && state.nativeInputValue && (state.focused || state.hovering);
+    }),
+    upperLimit: computed(function () {
+      return parent.$attrs.maxlength;
+    }),
+    textLength: computed(function () {
+      return textLength(props.modelValue);
+    }),
+    inputExceed: computed(function () {
+      return state.isWordLimitVisible && state.textLength > state.upperLimit;
+    }),
+    formItemSize: computed(function () {
+      return (parent.formItem || {}).formItemSize;
+    }),
+    validateIcon: computed(function () {
+      return constants.VALIDATE_ICON[state.validateState];
+    }),
+    showWordLimit: computed(function () {
+      return props.showWordLimit && parent.$attrs.maxlength;
+    }),
+    inputDisabled: computed(function () {
+      return props.disabled || (parent.tinyForm || {}).disabled;
+    }),
+    validateState: computed(function () {
+      return parent.formItem ? parent.formItem.validateState : '';
+    }),
+    textareaStyle: computed(function () {
+      return _objectSpread(_objectSpread({}, state.textareaCalcStyle), {}, {
+        resize: props.resize
+      });
+    }),
+    needStatusIcon: computed(function () {
+      return parent.tinyForm ? parent.tinyForm.statusIcon : false;
+    }),
+    showPwdVisible: computed(function () {
+      return props.showPassword && !state.inputDisabled && !props.readonly && (!!state.nativeInputValue || state.focused);
+    }),
+    nativeInputValue: computed(function () {
+      return props.modelValue === null || props.modelValue === undefined ? '' : String(props.modelValue);
+    }),
+    isWordLimitVisible: computed(function () {
+      return (props.showWordLimit && parent.$attrs.maxlength || props.counter) && (parent.type === 'text' || parent.type === 'textarea') && !state.inputDisabled && !props.readonly && !props.showPassword;
+    })
+  });
+  return state;
+};
+var initApi = function initApi(_ref2) {
+  var api = _ref2.api,
+    state = _ref2.state,
+    dispatch = _ref2.dispatch,
+    broadcast = _ref2.broadcast,
+    emit = _ref2.emit,
+    refs = _ref2.refs,
+    props = _ref2.props,
+    CLASS_PREFIX = _ref2.CLASS_PREFIX,
+    parent = _ref2.parent;
+  Object.assign(api, {
+    state: state,
+    dispatch: dispatch,
+    broadcast: broadcast,
+    showBox: showBox(state),
+    clear: clear(emit),
+    getInput: getInput(refs),
+    handleChange: handleChange(emit),
+    watchFormSelect: watchFormSelect({
+      emit: emit,
+      props: props,
+      state: state
+    }),
+    calcIconOffset: calcIconOffset({
+      CLASS_PREFIX: CLASS_PREFIX,
+      parent: parent
+    }),
+    getSuffixVisible: getSuffixVisible({
+      parent: parent,
+      props: props,
+      state: state
+    }),
+    calculateNodeStyling: calculateNodeStyling(),
+    handleCompositionStart: handleCompositionStart(state),
+    handleCompositionUpdate: handleCompositionUpdate(state)
+  });
+};
+var mergeApi = function mergeApi(_ref3) {
+  var storages = _ref3.storages,
+    api = _ref3.api,
+    componentName = _ref3.componentName,
+    props = _ref3.props,
+    emit = _ref3.emit,
+    eventName = _ref3.eventName,
+    nextTick = _ref3.nextTick,
+    parent = _ref3.parent,
+    state = _ref3.state,
+    refs = _ref3.refs;
+  var storageData = storages.storageData,
+    isMemoryStorage = storages.isMemoryStorage,
+    addMemory = storages.addMemory,
+    searchMemory = storages.searchMemory,
+    selectedMemory = storages.selectedMemory;
+  return Object.assign(api, {
+    addMemory: addMemory,
+    storageData: storageData,
+    searchMemory: searchMemory,
+    selectedMemory: selectedMemory,
+    isMemoryStorage: isMemoryStorage,
+    blur: blur(api),
+    focus: focus(api),
+    select: select(api),
+    handleBlur: handleBlur({
+      api: api,
+      componentName: componentName,
+      emit: emit,
+      eventName: eventName.blur,
+      props: props,
+      state: state
+    }),
+    handleFocus: handleFocus({
+      api: api,
+      emit: emit,
+      state: state
+    }),
+    handleInput: handleInput({
+      api: api,
+      emit: emit,
+      nextTick: nextTick,
+      state: state
+    }),
+    resizeTextarea: resizeTextarea({
+      api: api,
+      parent: parent,
+      refs: refs,
+      state: state
+    }),
+    updateIconOffset: updateIconOffset(api),
+    calcTextareaHeight: calcTextareaHeight({
+      api: api,
+      hiddenTextarea: null,
+      props: props
+    }),
+    setNativeInputValue: setNativeInputValue({
+      api: api,
+      state: state
+    }),
+    handleCompositionEnd: handleCompositionEnd({
+      api: api,
+      state: state
+    }),
+    handlePasswordVisible: handlePasswordVisible({
+      api: api,
+      nextTick: nextTick,
+      state: state
+    }),
+    hasSelection: hasSelection(api)
+  });
+};
+var initWatch = function initWatch(_ref4) {
+  var watch = _ref4.watch,
+    state = _ref4.state,
+    api = _ref4.api,
+    props = _ref4.props,
+    nextTick = _ref4.nextTick,
+    emit = _ref4.emit,
+    componentName = _ref4.componentName,
+    eventName = _ref4.eventName;
+  watch(function () {
+    return props.modelValue;
+  }, function (value) {
+    if (state.mode === 'mobile') {
+      state.sheetvalue = value;
+      emit('update:modelValue', value);
+    }
+    nextTick(api.resizeTextarea);
+    if (props.validateEvent) {
+      api.dispatch(componentName, eventName.change, [value]);
+    }
+  });
+  watch(function () {
+    return props.size;
+  }, function () {
+    return nextTick(api.resizeTextarea);
+  }, {
+    immediate: true
+  });
+  watch(function () {
+    return state.nativeInputValue;
+  }, function () {
+    api.setNativeInputValue();
+  });
+  watch(function () {
+    return props.type;
+  }, function () {
+    nextTick(function () {
+      api.setNativeInputValue();
+      api.resizeTextarea();
+      api.updateIconOffset();
+    });
+  });
+  watch(function () {
+    return state.sheetvalue;
+  }, function (value) {
+    return api.watchFormSelect(value);
+  }, {
+    immediate: true
+  });
+};
+export var renderless = function renderless(props, _ref5, _ref6) {
+  var computed = _ref5.computed,
+    onMounted = _ref5.onMounted,
+    onUpdated = _ref5.onUpdated,
+    reactive = _ref5.reactive,
+    toRefs = _ref5.toRefs,
+    watch = _ref5.watch,
+    inject = _ref5.inject;
+  var vm = _ref6.vm,
+    refs = _ref6.refs,
+    parent = _ref6.parent,
+    emit = _ref6.emit,
+    constants = _ref6.constants,
+    nextTick = _ref6.nextTick,
+    broadcast = _ref6.broadcast,
+    dispatch = _ref6.dispatch,
+    mode = _ref6.mode;
+  var api = {};
+  var componentName = constants.COMPONENT_NAME.FormItem;
+  var eventName = {
+    change: 'form.change',
+    blur: 'form.blur'
+  };
+  var CLASS_PREFIX = {
+    Input: constants.inputMode(mode),
+    InputGroup: constants.inputGroupMode(mode)
+  };
+  var state = initState({
+    reactive: reactive,
+    computed: computed,
+    mode: mode,
+    props: props,
+    parent: parent,
+    constants: constants
+  });
+  initApi({
+    api: api,
+    state: state,
+    dispatch: dispatch,
+    broadcast: broadcast,
+    emit: emit,
+    refs: refs,
+    props: props,
+    CLASS_PREFIX: CLASS_PREFIX,
+    parent: parent
+  });
+  var storages = useStorageBox({
+    api: api,
+    props: props,
+    reactive: reactive,
+    toRefs: toRefs
+  });
+  parent.tinyForm = parent.tinyForm || inject('form', null);
+  mergeApi({
+    api: api,
+    storages: storages,
+    componentName: componentName,
+    emit: emit,
+    eventName: eventName,
+    props: props,
+    state: state,
+    nextTick: nextTick,
+    parent: parent,
+    refs: refs
+  });
+  initWatch({
+    watch: watch,
+    state: state,
+    api: api,
+    props: props,
+    nextTick: nextTick,
+    emit: emit,
+    componentName: componentName,
+    eventName: eventName
+  });
+  onMounted(function () {
+    api.setNativeInputValue();
+    api.resizeTextarea();
+    api.updateIconOffset();
+    dispatch('Select', 'input-mounted', vm.$el);
+    dispatch('Tooltip', 'tooltip-update', vm.$el);
+  });
+  onUpdated(function () {
+    nextTick(api.updateIconOffset);
+  });
+  return api;
+};