@opentiny/vue-renderless 3.1.0-alpha.0

package/select/vue.js

@@ -0,0 +1,693 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+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 { debouncRquest, nodeCollapse, nodeExpand, getChildValue, nodeCheckClick, treeNodeClick, getTreeData, radioChange, getcheckedData, selectChange, calcOverFlow, toggleCheckAll, handleCopyClick, showTip, handleComposition, handleQueryChange, scrollToOption, handleMenuEnter, emitChange, getOption, setSelected, handleFocus, focus, blur, handleBlur, handleClearClick, doDestroy, handleClose, toggleLastOptionHitState, deletePrevTag, managePlaceholder, resetInputState, resetInputHeight, resetHoverIndex, handleOptionSelect, setSoftFocus, getValueIndex, toggleMenu, selectOption, deleteSelected, deleteTag, onInputChange, onOptionDestroy, resetInputWidth, handleResize, checkDefaultFirstOption, getValueKey, emptyText, watchValue, watchVisible, watchOptions, navigateOptions, getPluginOption, watchPropsOption, buildSelectConfig, buildRadioConfig, onMouseenterNative, onMouseleaveNative, onCopying, gridOnQueryChange, defaultOnQueryChange, toVisible, toHide, mounted, unMount, watchHoverIndex, computeOptimizeOpts, watchOptimizeOpts, getScrollListener, computeCollapseTags, computeMultipleLimit } from './index';
+import { BROWSER_NAME } from '@opentiny/vue-renderless/common';
+import browserInfo from '@opentiny/vue-renderless/common/browser';
+import debounce from '@opentiny/vue-renderless/common/deps/debounce';
+import { isNumber, isNull } from '@opentiny/vue-renderless/common/type';
+export var api = ['state', 'nodeCollapse', 'nodeExpand', 'toggleCheckAll', 'handleCopyClick', 'focus', 'blur', 'showTip', 'doDestroy', 'getOption', 'emitChange', 'handleBlur', 'toggleMenu', 'getValueKey', 'handleFocus', 'handleClose', 'setSoftFocus', 'getValueIndex', 'scrollToOption', 'resetHoverIndex', 'onOptionDestroy', 'resetInputWidth', 'resetInputHeight', 'managePlaceholder', 'checkDefaultFirstOption', 'toggleLastOptionHitState', 'deleteTag', 'setSelected', 'selectOption', 'handleResize', 'deletePrevTag', 'onInputChange', 'deleteSelected', 'handleMenuEnter', 'resetInputState', 'handleClearClick', 'handleComposition', 'handleQueryChange', 'handleOptionSelect', 'debouncedOnInputChange', 'debouncedQueryChange', 'navigateOptions', 'selectChange', 'radioChange', 'treeNodeClick', 'nodeCheckClick', 'buildSelectConfig', 'buildRadioConfig', 'onMouseenterNative', 'onMouseleaveNative', 'onCopying'];
+var initStateAdd = function initStateAdd(_ref) {
+  var computed = _ref.computed,
+    props = _ref.props,
+    api = _ref.api,
+    parent = _ref.parent;
+  return {
+    selectedTags: [],
+    tips: '',
+    showTip: false,
+    tipHover: false,
+    selectHover: false,
+    tipTimer: null,
+    selectCls: 'checked-sur',
+    overflow: null,
+    completed: false,
+    inputWidth: 0,
+    hoverIndex: -1,
+    hoverOption: -1,
+    inputLength: 20,
+    optionsCount: 0,
+    selectFiexd: {},
+    createdLabel: null,
+    isSilentBlur: false,
+    cachedOptions: [],
+    selectedLabel: '',
+    previousQuery: null,
+    inputHovering: false,
+    createdSelected: false,
+    isOnComposition: false,
+    cachedPlaceHolder: props.placeholder,
+    initialInputHeight: 0,
+    currentPlaceholder: props.placeholder,
+    filteredOptionsCount: 0,
+    gridData: [],
+    treeData: [],
+    remoteData: [],
+    currentKey: props.modelValue,
+    updateId: '',
+    popperElm: null,
+    debounce: computed(function () {
+      return isNumber(props.queryDebounce) ? props.queryDebounce : props.remote ? 300 : 0;
+    }),
+    emptyText: computed(function () {
+      return api.emptyText();
+    }),
+    formItemSize: computed(function () {
+      return (parent.formItem || {}).formItemSize;
+    }),
+    selectDisabled: computed(function () {
+      return props.disabled || (parent.form || {}).disabled;
+    }),
+    gridCheckedData: computed(function () {
+      return api.getcheckedData();
+    }),
+    isExpandAll: computed(function () {
+      return props.treeOp && props.treeOp.defaultExpandAll !== undefined ? props.treeOp.defaultExpandAll : true;
+    }),
+    searchSingleCopy: computed(function () {
+      return props.allowCopy && !props.multiple && props.filterable;
+    })
+  };
+};
+var initState = function initState(_ref2) {
+  var reactive = _ref2.reactive,
+    computed = _ref2.computed,
+    props = _ref2.props,
+    api = _ref2.api,
+    emitter = _ref2.emitter,
+    parent = _ref2.parent,
+    constants = _ref2.constants;
+  var stateAdd = initStateAdd({
+    computed: computed,
+    props: props,
+    api: api,
+    parent: parent
+  });
+  var state = reactive(_objectSpread(_objectSpread({}, stateAdd), {}, {
+    selectEmitter: emitter(),
+    datas: [],
+    query: '',
+    options: [],
+    visible: false,
+    showCopy: computed(function () {
+      return props.multiple && props.copyable && state.inputHovering && state.selected.length;
+    }),
+    showWarper: true,
+    selected: props.multiple ? [] : {},
+    softFocus: false,
+    hover: false,
+    firstAutoSeach: props.remoteConfig.autoSeach,
+    tagsStyle: computed(function () {
+      return {
+        'max-width': state.inputWidth - 32 + 'px',
+        width: '100%'
+      };
+    }),
+    readonly: computed(function () {
+      return props.readonly || !props.filterable || props.multiple || browserInfo.name !== BROWSER_NAME.IE && browserInfo.name !== BROWSER_NAME.Edge && !state.visible;
+    }),
+    iconClass: computed(function () {
+      return state.visible ? '' : constants.CLASS.IsReverse;
+    }),
+    showClose: computed(function () {
+      return props.clearable && !state.selectDisabled && state.inputHovering && (props.multiple ? Array.isArray(props.modelValue) && props.modelValue.length > 0 : !isNull(props.modelValue) && props.modelValue !== '');
+    }),
+    optionsAllDisabled: computed(function () {
+      return state.options.filter(function (option) {
+        return option.visible;
+      }).every(function (option) {
+        return option.disabled;
+      });
+    }),
+    collapseTagSize: computed(function () {
+      return ~['small', 'mini'].indexOf(state.selectSize) ? 'mini' : 'small';
+    }),
+    showNewOption: computed(function () {
+      return props.filterable && props.allowCreate && state.query !== '' && !state.options.filter(function (option) {
+        return !option.created;
+      }).some(function (option) {
+        return option.state.currentLabel === state.query;
+      });
+    }),
+    selectSize: computed(function () {
+      return props.size || state.formItemSize;
+    }),
+    optimizeOpts: computed(function () {
+      return api.computeOptimizeOpts();
+    }),
+    optimizeStore: {
+      flag: false,
+      valueIndex: 0,
+      startIndex: 0,
+      viewStyle: '',
+      datas: []
+    },
+    collapseTags: computed(function () {
+      return api.computeCollapseTags();
+    }),
+    multipleLimit: computed(function () {
+      return api.computeMultipleLimit();
+    })
+  }));
+  return state;
+};
+var addApi = function addApi(_ref3) {
+  var api = _ref3.api,
+    props = _ref3.props,
+    state = _ref3.state,
+    refs = _ref3.refs,
+    emit = _ref3.emit,
+    constants = _ref3.constants,
+    parent = _ref3.parent,
+    nextTick = _ref3.nextTick,
+    dispatch = _ref3.dispatch,
+    vm = _ref3.vm;
+  Object.assign(api, {
+    resetInputHeight: resetInputHeight({
+      api: api,
+      constants: constants,
+      nextTick: nextTick,
+      props: props,
+      refs: refs,
+      state: state
+    }),
+    calcOverFlow: calcOverFlow({
+      refs: refs,
+      props: props,
+      state: state
+    }),
+    handleFocus: handleFocus({
+      api: api,
+      emit: emit,
+      props: props,
+      state: state
+    }),
+    deleteTag: deleteTag({
+      api: api,
+      constants: constants,
+      emit: emit,
+      props: props,
+      vm: vm,
+      state: state
+    }),
+    watchValue: watchValue({
+      api: api,
+      constants: constants,
+      dispatch: dispatch,
+      props: props,
+      refs: refs,
+      state: state
+    }),
+    toHide: toHide({
+      constants: constants,
+      state: state,
+      props: props,
+      vm: vm,
+      api: api
+    }),
+    toVisible: toVisible({
+      constants: constants,
+      state: state,
+      props: props,
+      vm: vm,
+      api: api,
+      nextTick: nextTick
+    }),
+    setSelected: setSelected({
+      api: api,
+      constants: constants,
+      nextTick: nextTick,
+      props: props,
+      refs: refs,
+      state: state
+    }),
+    selectOption: selectOption({
+      api: api,
+      state: state,
+      props: props
+    }),
+    handleResize: handleResize({
+      api: api,
+      props: props
+    }),
+    watchOptions: watchOptions({
+      api: api,
+      constants: constants,
+      nextTick: nextTick,
+      parent: parent,
+      props: props,
+      state: state
+    }),
+    watchVisible: watchVisible({
+      api: api,
+      constants: constants,
+      emit: emit,
+      state: state,
+      refs: refs
+    }),
+    deletePrevTag: deletePrevTag({
+      api: api,
+      constants: constants,
+      emit: emit,
+      props: props,
+      state: state,
+      vm: vm
+    }),
+    onInputChange: onInputChange({
+      api: api,
+      props: props,
+      state: state,
+      constants: constants,
+      nextTick: nextTick
+    }),
+    deleteSelected: deleteSelected({
+      api: api,
+      constants: constants,
+      emit: emit,
+      props: props,
+      vm: vm,
+      state: state
+    }),
+    handleMenuEnter: handleMenuEnter({
+      api: api,
+      nextTick: nextTick,
+      state: state
+    }),
+    resetInputState: resetInputState({
+      api: api,
+      refs: refs,
+      state: state
+    }),
+    navigateOptions: navigateOptions({
+      api: api,
+      nextTick: nextTick,
+      state: state
+    }),
+    handleClearClick: handleClearClick(api),
+    handleComposition: handleComposition({
+      api: api,
+      nextTick: nextTick,
+      state: state
+    }),
+    handleQueryChange: handleQueryChange({
+      api: api,
+      constants: constants,
+      nextTick: nextTick,
+      props: props,
+      vm: vm,
+      state: state
+    }),
+    handleOptionSelect: handleOptionSelect({
+      api: api,
+      emit: emit,
+      nextTick: nextTick,
+      props: props,
+      refs: refs,
+      state: state
+    }),
+    getPluginOption: getPluginOption({
+      api: api,
+      props: props,
+      state: state
+    }),
+    toggleCheckAll: toggleCheckAll({
+      api: api,
+      emit: emit,
+      state: state
+    }),
+    debouncedQueryChange: debounce(state.debounce, function (event) {
+      api.handleQueryChange(event.target.value);
+    }),
+    debouncedOnInputChange: debounce(state.debounce, function () {
+      api.onInputChange();
+    }),
+    debouncRquest: debouncRquest({
+      api: api,
+      state: state,
+      props: props
+    }),
+    defaultOnQueryChange: defaultOnQueryChange({
+      props: props,
+      state: state,
+      constants: constants,
+      api: api
+    }),
+    mounted: mounted({
+      api: api,
+      parent: parent,
+      state: state,
+      props: props,
+      refs: refs
+    }),
+    unMount: unMount({
+      api: api,
+      parent: parent,
+      refs: refs,
+      state: state
+    }),
+    watchOptimizeOpts: watchOptimizeOpts({
+      api: api,
+      props: props,
+      refs: refs,
+      state: state
+    })
+  });
+};
+var initApi = function initApi(_ref4) {
+  var api = _ref4.api,
+    props = _ref4.props,
+    state = _ref4.state,
+    refs = _ref4.refs,
+    emit = _ref4.emit,
+    maskState = _ref4.maskState,
+    constants = _ref4.constants,
+    parent = _ref4.parent,
+    nextTick = _ref4.nextTick,
+    dispatch = _ref4.dispatch,
+    t = _ref4.t,
+    vm = _ref4.vm;
+  Object.assign(api, {
+    state: state,
+    maskState: maskState,
+    doDestroy: doDestroy(refs),
+    getTreeData: getTreeData(props),
+    blur: blur({
+      refs: refs,
+      state: state
+    }),
+    focus: focus({
+      refs: refs,
+      state: state
+    }),
+    getValueKey: getValueKey(props),
+    handleClose: handleClose(state),
+    getValueIndex: getValueIndex(props),
+    getChildValue: getChildValue(),
+    getOption: getOption({
+      props: props,
+      state: state
+    }),
+    emitChange: emitChange({
+      emit: emit,
+      props: props,
+      state: state,
+      constants: constants
+    }),
+    toggleMenu: toggleMenu({
+      refs: refs,
+      state: state,
+      props: props
+    }),
+    showTip: showTip({
+      props: props,
+      state: state,
+      refs: refs
+    }),
+    onOptionDestroy: onOptionDestroy(state),
+    setSoftFocus: setSoftFocus({
+      refs: refs,
+      state: state
+    }),
+    getcheckedData: getcheckedData({
+      props: props,
+      state: state
+    }),
+    resetInputWidth: resetInputWidth({
+      refs: refs,
+      state: state
+    }),
+    resetHoverIndex: resetHoverIndex({
+      props: props,
+      state: state
+    }),
+    scrollToOption: scrollToOption({
+      refs: refs,
+      constants: constants
+    }),
+    selectChange: selectChange({
+      emit: emit,
+      props: props,
+      refs: refs,
+      state: state
+    }),
+    radioChange: radioChange({
+      emit: emit,
+      props: props,
+      state: state
+    }),
+    handleCopyClick: handleCopyClick({
+      parent: parent,
+      props: props,
+      state: state
+    }),
+    treeNodeClick: treeNodeClick({
+      emit: emit,
+      props: props,
+      state: state
+    }),
+    managePlaceholder: managePlaceholder({
+      refs: refs,
+      state: state
+    }),
+    nodeCheckClick: nodeCheckClick({
+      emit: emit,
+      props: props,
+      state: state
+    }),
+    checkDefaultFirstOption: checkDefaultFirstOption(state),
+    nodeExpand: nodeExpand({
+      state: state,
+      constants: constants,
+      nextTick: nextTick
+    }),
+    nodeCollapse: nodeCollapse({
+      state: state,
+      constants: constants,
+      nextTick: nextTick
+    }),
+    handleBlur: handleBlur({
+      constants: constants,
+      dispatch: dispatch,
+      emit: emit,
+      state: state
+    }),
+    toggleLastOptionHitState: toggleLastOptionHitState({
+      state: state
+    }),
+    emptyText: emptyText({
+      I18N: constants.I18N,
+      props: props,
+      state: state,
+      t: t
+    }),
+    watchPropsOption: watchPropsOption({
+      constants: constants,
+      parent: parent,
+      props: props,
+      state: state
+    }),
+    buildSelectConfig: buildSelectConfig({
+      props: props,
+      state: state
+    }),
+    buildRadioConfig: buildRadioConfig({
+      props: props,
+      state: state
+    }),
+    onMouseenterNative: onMouseenterNative({
+      state: state
+    }),
+    onMouseleaveNative: onMouseleaveNative({
+      state: state
+    }),
+    onCopying: onCopying({
+      state: state,
+      refs: refs
+    }),
+    gridOnQueryChange: gridOnQueryChange({
+      props: props,
+      refs: refs,
+      constants: constants,
+      state: state
+    }),
+    watchHoverIndex: watchHoverIndex({
+      state: state
+    }),
+    computeOptimizeOpts: computeOptimizeOpts({
+      props: props,
+      state: state
+    }),
+    getScrollListener: getScrollListener({
+      props: props,
+      refs: refs,
+      state: state
+    }),
+    computeCollapseTags: computeCollapseTags(props),
+    computeMultipleLimit: computeMultipleLimit({
+      props: props,
+      state: state
+    })
+  });
+  addApi({
+    api: api,
+    props: props,
+    state: state,
+    refs: refs,
+    emit: emit,
+    constants: constants,
+    parent: parent,
+    nextTick: nextTick,
+    dispatch: dispatch,
+    vm: vm
+  });
+};
+var addWatch = function addWatch(_ref5) {
+  var watch = _ref5.watch,
+    props = _ref5.props,
+    api = _ref5.api,
+    state = _ref5.state;
+  watch(function () {
+    return _toConsumableArray(state.options);
+  }, api.watchOptions);
+  watch(function () {
+    return state.gridData;
+  }, api.setSelected, {
+    immediate: true
+  });
+  watch(function () {
+    return state.treeData;
+  }, api.setSelected, {
+    immediate: true
+  });
+  watch(function () {
+    return state.hoverIndex;
+  }, api.watchHoverIndex);
+  props.options && watch(function () {
+    return props.options;
+  }, api.watchPropsOption, {
+    immediate: true,
+    deep: true
+  });
+  watch(function () {
+    return state.optimizeOpts;
+  }, api.watchOptimizeOpts);
+};
+var initWatch = function initWatch(_ref6) {
+  var watch = _ref6.watch,
+    props = _ref6.props,
+    api = _ref6.api,
+    state = _ref6.state,
+    nextTick = _ref6.nextTick,
+    refs = _ref6.refs;
+  props.treeOp.data && watch(function () {
+    return props.treeOp.data;
+  }, function (data) {
+    state.treeData = data;
+  }, {
+    immediate: true,
+    deep: true
+  });
+  props.gridOp.data && watch(function () {
+    return props.gridOp.data;
+  }, function (data) {
+    state.gridData = data;
+  }, {
+    immediate: true,
+    deep: true
+  });
+  watch(function () {
+    return state.selectDisabled;
+  }, function () {
+    return nextTick(api.resetInputHeight);
+  });
+  watch(function () {
+    return props.placeholder;
+  }, function (value) {
+    state.cachedPlaceHolder = state.currentPlaceholder = value;
+  });
+  watch(function () {
+    return props.modelValue;
+  }, api.watchValue);
+  watch(function () {
+    return state.visible;
+  }, function (value) {
+    if ((props.filterable || props.remote) && !value) {
+      refs.reference.blur();
+    }
+    api.watchVisible(value);
+  });
+  addWatch({
+    watch: watch,
+    props: props,
+    api: api,
+    state: state
+  });
+};
+export var renderless = function renderless(props, _ref7, _ref8) {
+  var computed = _ref7.computed,
+    onBeforeUnmount = _ref7.onBeforeUnmount,
+    onMounted = _ref7.onMounted,
+    reactive = _ref7.reactive,
+    watch = _ref7.watch,
+    provide = _ref7.provide;
+  var vm = _ref8.vm,
+    refs = _ref8.refs,
+    parent = _ref8.parent,
+    emit = _ref8.emit,
+    constants = _ref8.constants,
+    nextTick = _ref8.nextTick,
+    dispatch = _ref8.dispatch,
+    t = _ref8.t,
+    emitter = _ref8.emitter;
+  var api = {};
+  var state = initState({
+    reactive: reactive,
+    computed: computed,
+    props: props,
+    api: api,
+    emitter: emitter,
+    parent: parent,
+    constants: constants
+  });
+  provide('selectEmitter', state.selectEmitter);
+  provide('selectVm', vm);
+  var maskState = reactive({
+    width: '',
+    height: '',
+    top: ''
+  });
+  initApi({
+    api: api,
+    props: props,
+    state: state,
+    refs: refs,
+    emit: emit,
+    maskState: maskState,
+    constants: constants,
+    parent: parent,
+    nextTick: nextTick,
+    dispatch: dispatch,
+    t: t,
+    vm: vm
+  });
+  initWatch({
+    watch: watch,
+    props: props,
+    api: api,
+    state: state,
+    nextTick: nextTick,
+    refs: refs
+  });
+  onMounted(api.mounted);
+  onBeforeUnmount(api.unMount);
+  if (props.multiple && !Array.isArray(props.modelValue)) {
+    emit('update:modelValue', []);
+  }
+  if (!props.multiple && Array.isArray(props.modelValue)) {
+    emit('update:modelValue', '');
+  }
+  state.selectEmitter.on(constants.EVENT_NAME.handleOptionClick, api.handleOptionSelect);
+  state.selectEmitter.on(constants.EVENT_NAME.setSelected, api.setSelected);
+  return api;
+};

package/select-dropdown/index.js

@@ -0,0 +1,23 @@
+export var mounted = function mounted(_ref) {
+  var selectEmitter = _ref.selectEmitter,
+    constants = _ref.constants,
+    state = _ref.state,
+    selectVm = _ref.selectVm,
+    updatePopper = _ref.updatePopper,
+    destroyPopper = _ref.destroyPopper,
+    parent = _ref.parent;
+  return function () {
+    selectEmitter.on(constants.EVENT_NAME.updatePopper, function (keepZIndex) {
+      var hideDrop = false;
+      if (!state.referenceElm || state.referenceElm.nodeType !== 1) {
+        state.referenceElm = selectVm.$refs.reference && selectVm.$refs.reference.$el;
+        selectVm.popperElm = selectVm.state.popperElm = state.popperElm = parent.$el;
+      }
+      if (parent.select.state.visible && !hideDrop) {
+        updatePopper(keepZIndex);
+        hideDrop = true;
+      }
+    });
+    selectEmitter.on(constants.EVENT_NAME.destroyPopper, destroyPopper);
+  };
+};