@opentiny/vue-renderless 3.1.0-alpha.0

package/popeditor/vue.js

@@ -0,0 +1,368 @@
+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 debounce from '@opentiny/vue-renderless/common/deps/debounce';
+import userPopper from '@opentiny/vue-renderless/common/deps/vue-popper';
+import { computedGetTitle, computedTreeOp, computedModalWidth, createSearchForm, filterNode, getColumns, getDisplay, getMultiSelectedData, getRadioSelectedData, handleClear, handleConfirm, handleOpen, handleReset, handleCancel, handleBeforeClose, handleSearch, handleSizeChange, initDisplay, openDialog, query, selectedGridSelectAll, selectedGridSelectChange, sourceGridSelectAll, sourceGridSelectChange, treeCheckChange, watchFilterText, handleNumberPageChange, doSearch, doClear, doSuggesst, closeSuggestPanel, getSuggestParam, suggestRadioChange, updateSuggestWidth, handlePager, initSearchOption, mounted } from './index';
+export var api = ['state', 'handleOpen', 'openDialog', 'handleClear', 'handleConfirm', 'handleReset', 'handleSearch', 'handleCancel', 'handleBeforeClose', 'handleSizeChange', 'selectedGridSelectAll', 'selectedGridSelectChange', 'sourceGridSelectAll', 'sourceGridSelectChange', 'treeCheckChange', 'handleNumberPageChange', 'doSearch', 'doClear', 'doSuggesst', 'closeSuggestPanel', 'popper', 'doSuggesstNow', 'suggestRadioChange'];
+var initState = function initState(_ref) {
+  var reactive = _ref.reactive,
+    computed = _ref.computed,
+    props = _ref.props,
+    api = _ref.api,
+    constants = _ref.constants,
+    t = _ref.t,
+    parent = _ref.parent;
+  var state = reactive({
+    open: false,
+    display: '',
+    getTitle: computed(function () {
+      return api.computedGetTitle({
+        constants: constants,
+        props: props,
+        t: t
+      });
+    }),
+    readonly: computed(function () {
+      return !props.suggest && props.readonly;
+    }),
+    modalWidth: computed(function () {
+      return api.computedModalWidth({
+        constants: constants,
+        props: props
+      });
+    }),
+    conditions: props.conditions,
+    activeName: props.showHistory ? constants.ACTIVE_NAME.history : constants.ACTIVE_NAME.source,
+    commitValue: Array.isArray(props.modelValue) ? props.modelValue.slice(0) : props.modelValue,
+    currentPage: 1,
+    baseColumns: computed(function () {
+      return getColumns({
+        constants: constants,
+        props: props
+      });
+    }),
+    selectedDatas: [],
+    selectedValues: [],
+    sourceGridDataset: [],
+    fullGridData: [],
+    historyGridDataset: [],
+    filterText: '',
+    treeOp: computed(function () {
+      return api.computedTreeOp(props, state);
+    }),
+    pagerConfig: reactive(_objectSpread({
+      currentPage: 1,
+      pageSize: 10,
+      total: 0,
+      layout: 'prev,pager,next'
+    }, props.gridOp.pagerOp || props.pagerOp || {})),
+    loading: false,
+    treeSelectList: [],
+    radioConfig: props.radioConfig,
+    searchOp: {},
+    cacheStore: {},
+    formDisabled: computed(function () {
+      return (parent.tinyForm || {}).disabled;
+    }),
+    disabled: computed(function () {
+      return props.disabled || state.formDisabled;
+    }),
+    suggestList: [],
+    showSuggestPanel: false,
+    inputHover: false,
+    search: null,
+    closeSuggestPanelInvoker: null
+  });
+  return state;
+};
+var initApi = function initApi(_ref2) {
+  var api = _ref2.api,
+    props = _ref2.props,
+    state = _ref2.state,
+    parent = _ref2.parent,
+    refs = _ref2.refs,
+    emit = _ref2.emit,
+    popper = _ref2.popper,
+    constants = _ref2.constants,
+    vm = _ref2.vm,
+    nextTick = _ref2.nextTick;
+  Object.assign(api, {
+    state: state,
+    popper: popper,
+    computedGetTitle: computedGetTitle,
+    computedModalWidth: computedModalWidth,
+    filterNode: filterNode(),
+    query: query({
+      constants: constants,
+      parent: parent,
+      props: props,
+      state: state
+    }),
+    watchFilterText: watchFilterText(vm),
+    treeCheckChange: treeCheckChange({
+      constants: constants,
+      state: state,
+      props: props
+    }),
+    getDisplay: getDisplay({
+      constants: constants,
+      props: props,
+      state: state
+    }),
+    createSearchForm: createSearchForm(props),
+    handleCancel: handleCancel({
+      props: props,
+      state: state,
+      constants: constants
+    }),
+    handleBeforeClose: handleBeforeClose({
+      props: props,
+      state: state,
+      constants: constants
+    }),
+    getMultiSelectedData: getMultiSelectedData({
+      props: props,
+      state: state
+    }),
+    getRadioSelectedData: getRadioSelectedData({
+      constants: constants,
+      props: props,
+      state: state,
+      vm: vm
+    }),
+    selectedGridSelectAll: selectedGridSelectAll({
+      constants: constants,
+      props: props,
+      vm: vm,
+      state: state
+    }),
+    selectedGridSelectChange: selectedGridSelectChange({
+      constants: constants,
+      props: props,
+      vm: vm,
+      state: state
+    }),
+    handleReset: handleReset({
+      api: api,
+      state: state,
+      props: props
+    }),
+    openDialog: openDialog({
+      api: api,
+      emit: emit,
+      props: props,
+      state: state
+    }),
+    initDisplay: initDisplay({
+      api: api,
+      constants: constants,
+      props: props,
+      state: state,
+      nextTick: nextTick
+    }),
+    handleSearch: handleSearch({
+      api: api,
+      props: props,
+      state: state,
+      refs: refs,
+      constants: constants
+    }),
+    computedTreeOp: computedTreeOp({
+      api: api,
+      constants: constants
+    }),
+    handleSizeChange: handleSizeChange({
+      api: api,
+      emit: emit,
+      state: state
+    }),
+    handleOpen: handleOpen({
+      api: api,
+      constants: constants,
+      props: props,
+      state: state
+    }),
+    handleClear: handleClear({
+      constants: constants,
+      emit: emit,
+      props: props,
+      state: state
+    }),
+    handleConfirm: handleConfirm({
+      api: api,
+      constants: constants,
+      emit: emit,
+      props: props,
+      state: state
+    }),
+    handleNumberPageChange: handleNumberPageChange({
+      api: api,
+      emit: emit,
+      state: state
+    }),
+    doSearch: doSearch({
+      api: api,
+      state: state,
+      props: props
+    }),
+    doClear: doClear({
+      api: api,
+      state: state,
+      props: props
+    }),
+    updateSuggestWidth: updateSuggestWidth({
+      refs: refs
+    }),
+    doSuggesstNow: doSuggesst({
+      api: api,
+      state: state,
+      props: props,
+      popper: popper
+    }),
+    doSuggesst: debounce(1000, doSuggesst({
+      api: api,
+      state: state,
+      props: props,
+      popper: popper
+    })),
+    closeSuggestPanel: closeSuggestPanel({
+      api: api,
+      state: state,
+      refs: refs
+    }),
+    sourceGridSelectChange: sourceGridSelectChange({
+      props: props,
+      state: state,
+      api: api
+    }),
+    sourceGridSelectAll: sourceGridSelectAll({
+      props: props,
+      state: state,
+      api: api
+    }),
+    getSuggestParam: getSuggestParam({
+      props: props,
+      state: state,
+      api: api
+    }),
+    suggestRadioChange: suggestRadioChange({
+      api: api,
+      state: state
+    }),
+    handlePager: handlePager({
+      api: api,
+      props: props,
+      state: state
+    }),
+    initSearchOption: initSearchOption({
+      api: api,
+      state: state
+    }),
+    mounted: mounted({
+      api: api,
+      props: props
+    })
+  });
+  state.search = api.createSearchForm(false);
+};
+var initWatch = function initWatch(_ref3) {
+  var watch = _ref3.watch,
+    props = _ref3.props,
+    api = _ref3.api,
+    state = _ref3.state,
+    popper = _ref3.popper;
+  watch(function () {
+    return props.gridOp.data;
+  }, function (value) {
+    state.fullGridData = value;
+    api.initDisplay(props.modelValue);
+  });
+  watch(function () {
+    return state.fullGridData;
+  }, api.handlePager);
+  watch(function () {
+    return props.modelValue;
+  }, api.initDisplay);
+  watch(function () {
+    return state.filterText;
+  }, api.watchFilterText, {
+    deep: true
+  });
+  watch(function () {
+    return state.showSuggestPanel;
+  }, function (value) {
+    popper.showPopper.value = value;
+  }, {
+    immediate: true
+  });
+  watch(function () {
+    return props.conditions;
+  }, api.initSearchOption, {
+    deep: true,
+    immediate: true
+  });
+};
+export var renderless = function renderless(props, _ref4, _ref5) {
+  var computed = _ref4.computed,
+    onMounted = _ref4.onMounted,
+    reactive = _ref4.reactive,
+    watch = _ref4.watch,
+    inject = _ref4.inject,
+    toRefs = _ref4.toRefs,
+    onBeforeUnmount = _ref4.onBeforeUnmount,
+    onDeactivated = _ref4.onDeactivated;
+  var t = _ref5.t,
+    refs = _ref5.refs,
+    parent = _ref5.parent,
+    emit = _ref5.emit,
+    constants = _ref5.constants,
+    vm = _ref5.vm,
+    nextTick = _ref5.nextTick,
+    slots = _ref5.slots;
+  var api = {};
+  var state = initState({
+    reactive: reactive,
+    computed: computed,
+    props: props,
+    api: api,
+    constants: constants,
+    t: t,
+    parent: parent
+  });
+  var popper = userPopper({
+    emit: emit,
+    refs: refs,
+    watch: watch,
+    onBeforeUnmount: onBeforeUnmount,
+    props: props,
+    nextTick: nextTick,
+    toRefs: toRefs,
+    slots: slots,
+    reactive: reactive,
+    onDeactivated: onDeactivated
+  });
+  parent.tinyForm = parent.tinyForm || inject('form', null);
+  initApi({
+    api: api,
+    props: props,
+    state: state,
+    parent: parent,
+    refs: refs,
+    emit: emit,
+    popper: popper,
+    constants: constants,
+    vm: vm,
+    nextTick: nextTick
+  });
+  initWatch({
+    watch: watch,
+    props: props,
+    api: api,
+    state: state,
+    popper: popper
+  });
+  onMounted(api.mounted);
+  onBeforeUnmount(api.closeSuggestPanel);
+  return api;
+};

package/popover/index.js

@@ -0,0 +1,203 @@
+import { on, off, addClass, removeClass } from '@opentiny/vue-renderless/common/deps/dom';
+import { guid } from '@opentiny/vue-renderless/common/string';
+import { KEY_CODE } from '@opentiny/vue-renderless/common';
+export var mounted = function mounted(_ref) {
+  var api = _ref.api,
+    state = _ref.state,
+    constants = _ref.constants,
+    props = _ref.props;
+  return function () {
+    state.mounted = true;
+    var referenceElm = state.referenceElm,
+      popperElm = state.popperElm,
+      tooltipId = state.tooltipId;
+    if (referenceElm) {
+      addClass(referenceElm, "".concat(constants.IDPREFIX, "__reference"));
+      referenceElm.setAttribute('aria-describedby', tooltipId);
+      referenceElm.setAttribute('tabindex', props.tabindex);
+      popperElm.setAttribute('tabindex', 0);
+      if (props.trigger !== 'click') {
+        on(referenceElm, 'focusin', function () {
+          api.handleFocus();
+          var instance = referenceElm.__vue__;
+          if (instance && typeof instance.focus === 'function') {
+            instance.focus();
+          }
+        });
+        on(popperElm, 'focusin', api.handleFocus);
+        on(referenceElm, 'focusout', api.handleBlur);
+        on(popperElm, 'focusout', api.handleBlur);
+      }
+      on(referenceElm, 'keydown', api.handleKeydown);
+      on(referenceElm, 'click', api.handleClick);
+    }
+    if (props.trigger === 'click') {
+      on(referenceElm, 'click', api.doToggle);
+      on(document, 'click', api.handleDocumentClick);
+    } else if (props.trigger === 'hover') {
+      on(referenceElm, 'mouseenter', api.handleMouseEnter);
+      on(popperElm, 'mouseenter', api.handleMouseEnter);
+      on(referenceElm, 'mouseleave', api.handleMouseLeave);
+      on(popperElm, 'mouseleave', api.handleMouseLeave);
+    } else if (props.trigger === 'focus') {
+      if (referenceElm.querySelector('input, textarea')) {
+        on(referenceElm, 'focusin', api.doShow);
+        on(referenceElm, 'focusout', api.doClose);
+      } else {
+        on(referenceElm, 'mousedown', api.doShow);
+        on(referenceElm, 'mouseup', api.doClose);
+      }
+    }
+  };
+};
+export var doToggle = function doToggle(state) {
+  return function () {
+    state.showPopper = !state.showPopper;
+  };
+};
+export var doShow = function doShow(state) {
+  return function () {
+    state.showPopper = true;
+  };
+};
+export var doClose = function doClose(state) {
+  return function () {
+    state.showPopper = false;
+  };
+};
+export var handleFocus = function handleFocus(_ref2) {
+  var props = _ref2.props,
+    state = _ref2.state;
+  return function () {
+    addClass(state.referenceElm, 'focusing');
+    if (props.trigger === 'click' || props.trigger === 'focus') {
+      state.showPopper = true;
+    }
+  };
+};
+export var handleClick = function handleClick(state) {
+  return function () {
+    removeClass(state.referenceElm, 'focusing');
+  };
+};
+export var handleBlur = function handleBlur(_ref3) {
+  var props = _ref3.props,
+    state = _ref3.state;
+  return function () {
+    removeClass(state.referenceElm, 'focusing');
+    if (props.trigger === 'click' || props.trigger === 'focus') {
+      state.showPopper = false;
+    }
+  };
+};
+export var handleMouseEnter = function handleMouseEnter(_ref4) {
+  var props = _ref4.props,
+    state = _ref4.state;
+  return function () {
+    clearTimeout(state.timer);
+    if (props.openDelay) {
+      state.timer = setTimeout(function () {
+        state.showPopper = true;
+      }, props.openDelay);
+    } else {
+      state.showPopper = true;
+    }
+  };
+};
+export var handleKeydown = function handleKeydown(_ref5) {
+  var api = _ref5.api,
+    props = _ref5.props;
+  return function (event) {
+    if (event.keyCode === KEY_CODE.Escape && props.trigger !== 'manual') {
+      api.doClose();
+    }
+  };
+};
+export var handleMouseLeave = function handleMouseLeave(_ref6) {
+  var props = _ref6.props,
+    state = _ref6.state;
+  return function () {
+    clearTimeout(state.timer);
+    if (props.closeDelay) {
+      state.timer = setTimeout(function () {
+        state.showPopper = false;
+      }, props.closeDelay);
+    } else {
+      state.showPopper = false;
+    }
+  };
+};
+export var handleDocumentClick = function handleDocumentClick(_ref7) {
+  var refs = _ref7.refs,
+    state = _ref7.state;
+  return function (event) {
+    var reference = state.referenceElm;
+    var popperElm = state.popperElm;
+    var $el = refs.root;
+    if (!$el || !reference || $el.contains(event.target) || reference.contains(event.target) || !popperElm || popperElm.contains(event.target)) {
+      return;
+    }
+    state.showPopper = false;
+  };
+};
+export var handleAfterEnter = function handleAfterEnter(emit) {
+  return function () {
+    emit('after-enter');
+  };
+};
+export var handleAfterLeave = function handleAfterLeave(_ref8) {
+  var emit = _ref8.emit,
+    api = _ref8.api;
+  return function () {
+    emit('after-leave');
+    api.doDestroy();
+  };
+};
+export var cleanup = function cleanup(_ref9) {
+  var props = _ref9.props,
+    state = _ref9.state;
+  return function () {
+    if (props.openDelay) {
+      clearTimeout(state.timer);
+    }
+  };
+};
+export var destroyed = function destroyed(_ref10) {
+  var state = _ref10.state,
+    api = _ref10.api;
+  return function () {
+    var reference = state.referenceElm;
+    off(reference, 'click', api.doToggle);
+    off(reference, 'mouseup', api.doClose);
+    off(reference, 'mousedown', api.doShow);
+    off(reference, 'focusin', api.doShow);
+    off(reference, 'focusout', api.doClose);
+    off(reference, 'mousedown', api.doShow);
+    off(reference, 'mouseup', api.doClose);
+    off(reference, 'mouseleave', api.handleMouseLeave);
+    off(reference, 'mouseenter', api.handleMouseEnter);
+    off(document, 'click', api.handleDocumentClick);
+  };
+};
+export var computedTooltipId = function computedTooltipId(constants) {
+  return function () {
+    return "".concat(constants.IDPREFIX, "-").concat(guid('', 4));
+  };
+};
+export var wrapMounted = function wrapMounted(_ref11) {
+  var api = _ref11.api,
+    props = _ref11.props,
+    refs = _ref11.refs,
+    state = _ref11.state;
+  return function () {
+    var reference = refs.reference,
+      popper = refs.popper,
+      wrapper = refs.wrapper;
+    var referenceElm = state.referenceElm = props.reference || reference;
+    state.popperElm = state.popperEl || popper;
+    if (!referenceElm && wrapper.children) {
+      state.referenceElm = wrapper.children[0] || wrapper;
+    }
+    state.referenceElm && api.mounted();
+  };
+};