@opentiny/vue-renderless 3.1.0-alpha.0

package/action-sheet/index.js

@@ -0,0 +1,28 @@
+export var visibleHandle = function visibleHandle(emit) {
+  return function () {
+    emit('update:visible', false);
+    emit('close', false);
+  };
+};
+export var watchVisible = function watchVisible(_ref) {
+  var emit = _ref.emit,
+    props = _ref.props,
+    state = _ref.state;
+  return function (value) {
+    state.active = props.modelValue;
+    setTimeout(function () {
+      value ? state.toggle = true : state.toggle = false;
+    }, 0);
+    emit('update:visible', value);
+  };
+};
+export var menuHandle = function menuHandle(_ref2) {
+  var emit = _ref2.emit,
+    state = _ref2.state;
+  return function (item) {
+    state.active = item.id;
+    emit('update:visible', false);
+    emit('update:modelValue', item.id);
+    emit('click', item);
+  };
+};

package/action-sheet/vue.js

@@ -0,0 +1,29 @@
+import { visibleHandle, watchVisible, menuHandle } from './index';
+export var api = ['state', 'visibleHandle', 'menuHandle'];
+export var renderless = function renderless(props, _ref, _ref2) {
+  var reactive = _ref.reactive,
+    watch = _ref.watch;
+  var emit = _ref2.emit;
+  var api = {};
+  var state = reactive({
+    toggle: false,
+    active: null
+  });
+  watch(function () {
+    return props.visible;
+  }, api.watchVisible);
+  Object.assign(api, {
+    state: state,
+    menuHandle: menuHandle({
+      state: state,
+      emit: emit
+    }),
+    visibleHandle: visibleHandle(emit),
+    watchVisible: watchVisible({
+      emit: emit,
+      props: props,
+      state: state
+    })
+  });
+  return api;
+};

package/alert/index.js

@@ -0,0 +1,23 @@
+export var close = function close(_ref) {
+  var emit = _ref.emit,
+    state = _ref.state;
+  return function () {
+    state.show = false;
+    emit('close');
+  };
+};
+export var computedGetIcon = function computedGetIcon(_ref2) {
+  var constants = _ref2.constants,
+    props = _ref2.props;
+  return function () {
+    return props.icon || constants.ICON_MAP[props.type];
+  };
+};
+export var computedGetTitle = function computedGetTitle(_ref3) {
+  var constants = _ref3.constants,
+    t = _ref3.t,
+    props = _ref3.props;
+  return function () {
+    return props.title || t(constants.TITLE_MAP[props.type]);
+  };
+};

package/alert/vue.js

@@ -0,0 +1,37 @@
+import { close, computedGetIcon, computedGetTitle } from './index';
+export var api = ['close', 'state'];
+export var renderless = function renderless(props, _ref, _ref2) {
+  var computed = _ref.computed,
+    reactive = _ref.reactive;
+  var t = _ref2.t,
+    emit = _ref2.emit,
+    constants = _ref2.constants;
+  var api = {
+    computedGetIcon: computedGetIcon({
+      constants: constants,
+      props: props
+    }),
+    computedGetTitle: computedGetTitle({
+      constants: constants,
+      props: props,
+      t: t
+    })
+  };
+  var state = reactive({
+    show: true,
+    getIcon: computed(function () {
+      return api.computedGetIcon();
+    }),
+    getTitle: computed(function () {
+      return api.computedGetTitle();
+    })
+  });
+  Object.assign(api, {
+    state: state,
+    close: close({
+      state: state,
+      emit: emit
+    })
+  });
+  return api;
+};

package/autocomplete/index.js

@@ -0,0 +1,175 @@
+export var getData = function getData(_ref) {
+  var props = _ref.props,
+    state = _ref.state,
+    updatePopper = _ref.updatePopper,
+    nextTick = _ref.nextTick;
+  return function (queryString) {
+    if (state.suggestionDisabled) {
+      return;
+    }
+    state.loading = true;
+    props.fetchSuggestions(queryString, function (suggestions) {
+      state.loading = false;
+      if (state.suggestionDisabled) {
+        return;
+      }
+      if (Array.isArray(suggestions)) {
+        state.suggestions = suggestions;
+        state.highlightedIndex = props.highlightFirstItem ? 0 : -1;
+      } else {
+        throw new Error('[TINY Error][Autocomplete]autocomplete suggestions must be an array');
+      }
+      nextTick(updatePopper);
+    });
+  };
+};
+export var handleChange = function handleChange(_ref2) {
+  var api = _ref2.api,
+    emit = _ref2.emit,
+    state = _ref2.state,
+    props = _ref2.props;
+  return function (value) {
+    state.activated = true;
+    emit('update:modelValue', value);
+    state.suggestionDisabled = false;
+    if (!props.triggerOnFocus && !value) {
+      state.suggestionDisabled = true;
+      state.suggestions = [];
+      return;
+    }
+    api.debouncedGetData(value);
+  };
+};
+export var handleFocus = function handleFocus(_ref3) {
+  var api = _ref3.api,
+    emit = _ref3.emit,
+    props = _ref3.props,
+    state = _ref3.state;
+  return function (event) {
+    state.activated = true;
+    emit('focus', event);
+    if (props.triggerOnFocus) {
+      state.suggestionDisabled = false;
+      api.debouncedGetData(props.modelValue);
+    }
+  };
+};
+export var handleBlur = function handleBlur(_ref4) {
+  var emit = _ref4.emit,
+    state = _ref4.state;
+  return function (event) {
+    state.suggestionDisabled = true;
+    emit('blur', event);
+  };
+};
+export var handleClear = function handleClear(_ref5) {
+  var emit = _ref5.emit,
+    state = _ref5.state;
+  return function () {
+    state.activated = false;
+    emit('clear');
+  };
+};
+export var close = function close(state) {
+  return function () {
+    state.activated = false;
+  };
+};
+export var handleKeyEnter = function handleKeyEnter(_ref6) {
+  var api = _ref6.api,
+    emit = _ref6.emit,
+    nextTick = _ref6.nextTick,
+    props = _ref6.props,
+    state = _ref6.state;
+  return function (event) {
+    if (state.suggestionVisible && state.highlightedIndex >= 0 && state.highlightedIndex < state.suggestions.length) {
+      event.preventDefault();
+      api.select(state.suggestions[state.highlightedIndex]);
+    } else if (props.selectWhenUnmatched) {
+      emit('select', {
+        value: props.modelValue
+      });
+      nextTick(function () {
+        state.suggestions = [];
+        state.highlightedIndex = -1;
+      });
+    }
+  };
+};
+export var select = function select(_ref7) {
+  var emit = _ref7.emit,
+    nextTick = _ref7.nextTick,
+    props = _ref7.props,
+    state = _ref7.state;
+  return function (item) {
+    emit('update:modelValue', item[props.valueKey]);
+    emit('select', item);
+    nextTick(function () {
+      state.activated = false;
+      state.suggestions = [];
+      state.highlightedIndex = -1;
+    });
+  };
+};
+export var highlight = function highlight(_ref8) {
+  var constants = _ref8.constants,
+    refs = _ref8.refs,
+    state = _ref8.state;
+  return function (index) {
+    if (!state.suggestionVisible || state.loading) {
+      return;
+    }
+    if (index < 0) {
+      state.highlightedIndex = -1;
+      return;
+    }
+    if (index >= state.suggestions.length) {
+      index = state.suggestions.length - 1;
+    }
+    var suggestion = refs.popper.querySelector(constants.WARP_CLS);
+    var suggestionList = suggestion.querySelectorAll(constants.ITEM_CLS);
+    var highlightItem = suggestionList[index];
+    var scrollTop = suggestion.scrollTop;
+    var offsetTop = highlightItem.offsetTop;
+    if (offsetTop + highlightItem.scrollHeight > scrollTop + suggestion.clientHeight) {
+      suggestion.scrollTop += highlightItem.scrollHeight;
+    }
+    if (offsetTop < scrollTop) {
+      suggestion.scrollTop -= highlightItem.scrollHeight;
+    }
+    state.highlightedIndex = index;
+    var $input = refs.input.getInput();
+    $input.setAttribute('aria-activedescendant', "".concat(state.id, "-item-").concat(state.highlightedIndex));
+  };
+};
+export var computedVisible = function computedVisible(state) {
+  var suggestions = state.suggestions;
+  var isValidData = Array.isArray(suggestions) && suggestions.length > 0;
+  return (isValidData || state.loading) && state.activated;
+};
+export var watchVisible = function watchVisible(_ref9) {
+  var suggestionState = _ref9.suggestionState,
+    refs = _ref9.refs;
+  return function (val) {
+    var $input = refs.input.getInput();
+    if ($input) {
+      suggestionState.dropdownWidth = $input.offsetWidth + 'px';
+      suggestionState.showPopper = val;
+    }
+  };
+};
+export var mounted = function mounted(_ref10) {
+  var refs = _ref10.refs,
+    state = _ref10.state,
+    suggestionState = _ref10.suggestionState;
+  return function () {
+    var input = refs.input;
+    var $input = input.getInput();
+    suggestionState.popperElm = refs.popper;
+    suggestionState.referenceElm = $input;
+    $input.setAttribute('role', 'textbox');
+    $input.setAttribute('aria-autocomplete', 'list');
+    $input.setAttribute('aria-controls', 'id');
+    $input.setAttribute('aria-activedescendant', "".concat(state.id, "-item-").concat(state.highlightedIndex));
+  };
+};

package/autocomplete/vue.js

@@ -0,0 +1,171 @@
+import debounce from '@opentiny/vue-renderless/common/deps/debounce';
+import userPopper from '@opentiny/vue-renderless/common/deps/vue-popper';
+import { guid } from '@opentiny/vue-renderless/common/string';
+import { computedVisible, watchVisible, mounted, getData, handleChange, handleFocus, handleBlur, handleClear, close, handleKeyEnter, select, highlight } from './index';
+export var api = ['state', 'select', 'suggestionState', 'getInput', 'handleChange', 'close', 'handleFocus', 'handleBlur', 'handleClear', 'handleKeyEnter', 'highlight', 'select', 'doDestroy'];
+var initState = function initState(_ref) {
+  var reactive = _ref.reactive,
+    $prefix = _ref.$prefix,
+    computed = _ref.computed;
+  var state = reactive({
+    activated: false,
+    suggestions: [],
+    loading: false,
+    highlightedIndex: -1,
+    suggestionDisabled: false,
+    id: $prefix + '-' + guid(),
+    suggestionVisible: computed(function () {
+      return computedVisible(state);
+    })
+  });
+  return state;
+};
+var initSuggestionState = function initSuggestionState(_ref2) {
+  var reactive = _ref2.reactive,
+    parent = _ref2.parent,
+    showPopper = _ref2.showPopper,
+    popperElm = _ref2.popperElm,
+    referenceElm = _ref2.referenceElm;
+  return reactive({
+    parent: parent,
+    dropdownWidth: '',
+    showPopper: showPopper,
+    popperElm: popperElm,
+    referenceElm: referenceElm
+  });
+};
+var initApi = function initApi(_ref3) {
+  var api = _ref3.api,
+    state = _ref3.state,
+    doDestroy = _ref3.doDestroy,
+    suggestionState = _ref3.suggestionState,
+    emit = _ref3.emit,
+    refs = _ref3.refs,
+    props = _ref3.props,
+    updatePopper = _ref3.updatePopper,
+    nextTick = _ref3.nextTick,
+    constants = _ref3.constants;
+  api.getData = getData({
+    props: props,
+    state: state,
+    updatePopper: updatePopper,
+    nextTick: nextTick
+  });
+  Object.assign(api, {
+    state: state,
+    doDestroy: doDestroy,
+    suggestionState: suggestionState,
+    close: close(state),
+    handleBlur: handleBlur({
+      emit: emit,
+      state: state
+    }),
+    mounted: mounted({
+      refs: refs,
+      state: state,
+      suggestionState: suggestionState
+    }),
+    highlight: highlight({
+      constants: constants,
+      refs: refs,
+      state: state
+    }),
+    handleClear: handleClear({
+      emit: emit,
+      state: state
+    }),
+    select: select({
+      emit: emit,
+      nextTick: nextTick,
+      props: props,
+      state: state
+    }),
+    watchVisible: watchVisible({
+      suggestionState: suggestionState,
+      refs: refs
+    }),
+    handleChange: handleChange({
+      api: api,
+      emit: emit,
+      state: state,
+      props: props
+    }),
+    handleFocus: handleFocus({
+      api: api,
+      emit: emit,
+      props: props,
+      state: state
+    }),
+    handleKeyEnter: handleKeyEnter({
+      api: api,
+      emit: emit,
+      nextTick: nextTick,
+      props: props,
+      state: state
+    }),
+    debouncedGetData: debounce(props.debounce, api.getData)
+  });
+};
+export var renderless = function renderless(props, _ref4, _ref5) {
+  var computed = _ref4.computed,
+    onBeforeUnmount = _ref4.onBeforeUnmount,
+    onMounted = _ref4.onMounted,
+    reactive = _ref4.reactive,
+    watch = _ref4.watch,
+    toRefs = _ref4.toRefs,
+    onDeactivated = _ref4.onDeactivated;
+  var $prefix = _ref5.$prefix,
+    refs = _ref5.refs,
+    parent = _ref5.parent,
+    emit = _ref5.emit,
+    constants = _ref5.constants,
+    nextTick = _ref5.nextTick,
+    slots = _ref5.slots;
+  var api = {};
+  var state = initState({
+    reactive: reactive,
+    $prefix: $prefix,
+    computed: computed
+  });
+  var _userPopper = userPopper({
+      reactive: reactive,
+      watch: watch,
+      refs: refs,
+      emit: emit,
+      slots: slots,
+      nextTick: nextTick,
+      props: props,
+      onBeforeUnmount: onBeforeUnmount,
+      toRefs: toRefs,
+      onDeactivated: onDeactivated
+    }),
+    showPopper = _userPopper.showPopper,
+    popperElm = _userPopper.popperElm,
+    referenceElm = _userPopper.referenceElm,
+    doDestroy = _userPopper.doDestroy,
+    updatePopper = _userPopper.updatePopper;
+  var suggestionState = initSuggestionState({
+    reactive: reactive,
+    parent: parent,
+    showPopper: showPopper,
+    popperElm: popperElm,
+    referenceElm: referenceElm
+  });
+  initApi({
+    api: api,
+    state: state,
+    doDestroy: doDestroy,
+    suggestionState: suggestionState,
+    emit: emit,
+    refs: refs,
+    props: props,
+    updatePopper: updatePopper,
+    nextTick: nextTick,
+    constants: constants
+  });
+  watch(function () {
+    return state.suggestionVisible;
+  }, api.watchVisible);
+  onMounted(api.mounted);
+  return api;
+};

package/avatar/index.js

@@ -0,0 +1,29 @@
+export var handleError = function handleError(_ref) {
+  var props = _ref.props,
+    state = _ref.state;
+  return function () {
+    var error = props.error;
+    var errorFlag = error ? error() : undefined;
+    if (errorFlag !== false) {
+      state.isImageExist = false;
+    }
+  };
+};
+export var computedAvatarClass = function computedAvatarClass(contants) {
+  return function (props) {
+    var size = props.size,
+      icon = props.icon,
+      shape = props.shape;
+    var classList = [contants.COMPONENT_PREFIX];
+    if (size && typeof size === 'string') {
+      classList.push("".concat(contants.COMPONENT_PREFIX, "--").concat(size));
+    }
+    if (icon) {
+      classList.push("".concat(contants.COMPONENT_PREFIX, "--").concat(contants.icon));
+    }
+    if (shape) {
+      classList.push("".concat(contants.COMPONENT_PREFIX, "--").concat(shape));
+    }
+    return classList.join(' ');
+  };
+};

package/avatar/vue.js

@@ -0,0 +1,24 @@
+import { computedAvatarClass, handleError } from './index';
+export var api = ['state', 'handleError'];
+export var renderless = function renderless(props, _ref, _ref2) {
+  var computed = _ref.computed,
+    reactive = _ref.reactive;
+  var constants = _ref2.constants;
+  var api = {
+    computedAvatarClass: computedAvatarClass(constants)
+  };
+  var state = reactive({
+    isImageExist: true,
+    avatarClass: computed(function () {
+      return api.computedAvatarClass(props);
+    })
+  });
+  Object.assign(api, {
+    state: state,
+    handleError: handleError({
+      props: props,
+      state: state
+    })
+  });
+  return api;
+};

package/badge/index.js

@@ -0,0 +1,16 @@
+export var computedContent = function computedContent(_ref) {
+  var props = _ref.props,
+    state = _ref.state;
+  return function () {
+    return typeof state.valueRef === 'number' && typeof props.max === 'number' ? props.max < state.valueRef ? "".concat(props.max, "+") : state.valueRef : state.valueRef;
+  };
+};
+export var computedValueRef = function computedValueRef(_ref2) {
+  var props = _ref2.props;
+  return function () {
+    if (typeof props.value === 'number') {
+      return props.value;
+    }
+    return typeof props.modelValue === 'number' ? props.modelValue : undefined;
+  };
+};

package/badge/vue.js

@@ -0,0 +1,30 @@
+import { computedContent, computedValueRef } from './index';
+import { xss } from '@opentiny/vue-renderless/common/xss';
+export var api = ['state'];
+export var renderless = function renderless(props, _ref) {
+  var computed = _ref.computed,
+    reactive = _ref.reactive;
+  var api = {
+    computedValueRef: computedValueRef({
+      props: props
+    })
+  };
+  var state = reactive({
+    isOverstep: false,
+    valueRef: computed(function () {
+      return api.computedValueRef();
+    }),
+    content: computed(function () {
+      return api.computedContent();
+    }),
+    href: computed(function () {
+      return xss.filterUrl(props.href);
+    })
+  });
+  api.state = state;
+  api.computedContent = computedContent({
+    props: props,
+    state: state
+  });
+  return api;
+};

package/breadcrumb/vue.js

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

package/breadcrumb-item/vue.js

@@ -0,0 +1,24 @@
+import { on, off } from '@opentiny/vue-renderless/common/deps/dom';
+export var api = [];
+export var renderless = function renderless(props, _ref, _ref2) {
+  var onMounted = _ref.onMounted,
+    onBeforeUnmount = _ref.onBeforeUnmount;
+  var refs = _ref2.refs,
+    router = _ref2.router;
+  var api = {
+    linkClick: function linkClick() {
+      var replace = props.replace,
+        to = props.to;
+      if (!to || !router) {
+        return;
+      }
+      replace ? router.replace(to) : router.push(to);
+    }
+  };
+  onMounted(function () {
+    on(refs.link, 'click', api.linkClick);
+  });
+  onBeforeUnmount(function () {
+    off(refs.link, 'click', api.linkClick);
+  });
+};

package/bulletin-board/index.js

@@ -0,0 +1,21 @@
+import { xss } from '@opentiny/vue-renderless/common/xss.js';
+export var getRoute = function getRoute(route) {
+  return "/".concat(route || '').replace(/^\/+/, '/');
+};
+export var computedDataList = function computedDataList(_ref) {
+  var props = _ref.props,
+    state = _ref.state;
+  return function () {
+    var list = props.data[Number(state.actName) - 1] || [];
+    list.forEach(function (subItem) {
+      subItem.url = xss.filterUrl(subItem.url);
+    });
+    return list;
+  };
+};
+export var computedMoreLink = function computedMoreLink(_ref2) {
+  var props = _ref2.props;
+  return function () {
+    return props.moreLink && xss.filterUrl(props.moreLink.url);
+  };
+};

package/bulletin-board/vue.js

@@ -0,0 +1,36 @@
+import { getRoute, computedDataList, computedMoreLink } from './index';
+export var api = ['state', 'getRoute'];
+export var renderless = function renderless(props, _ref) {
+  var reactive = _ref.reactive,
+    computed = _ref.computed,
+    watch = _ref.watch;
+  var api = {};
+  var state = reactive({
+    actName: props.activeName,
+    dataList: computed(function () {
+      return api.computedDataList();
+    }),
+    moreLink: computed(function () {
+      return api.computedMoreLink();
+    })
+  });
+  watch(function () {
+    return props.activeName;
+  }, function (value) {
+    state.actName = value;
+  }, {
+    immediate: true
+  });
+  Object.assign(api, {
+    state: state,
+    getRoute: getRoute,
+    computedDataList: computedDataList({
+      props: props,
+      state: state
+    }),
+    computedMoreLink: computedMoreLink({
+      props: props
+    })
+  });
+  return api;
+};

package/button/index.js

@@ -0,0 +1,19 @@
+export var handleClick = function handleClick(_ref) {
+  var emit = _ref.emit,
+    props = _ref.props,
+    state = _ref.state;
+  return function (event) {
+    if (props.nativeType === 'button' && props.resetTime > 0) {
+      state.disabled = true;
+      state.timer = setTimeout(function () {
+        state.disabled = false;
+      }, props.resetTime);
+    }
+    emit('click', event);
+  };
+};
+export var clearTimer = function clearTimer(state) {
+  return function () {
+    return clearTimeout(state.timer);
+  };
+};