@opentiny/vue-renderless 3.1.0-alpha.0

package/cascader-panel/vue.js

@@ -0,0 +1,217 @@
+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 { initStore, checkNode, getMenuIndex, isLeaf, focusNode, getCheckedNodes, clearCheckedNodes, getFlattedNodes, getNodeByValue, scrollIntoView, calculateMultiCheckedValue, lazyLoad, handleCheckChange, handleExpand, handleKeyDown, calculateCheckedNodePaths, expandNodes, syncActivePath, watchCheckedValue, syncCheckedValue, syncMenuState, syncMultiCheckState } from './index';
+import { merge } from '@opentiny/vue-renderless/common/object';
+import { isEmpty } from '@opentiny/vue-renderless/cascader';
+import Store from './store.js';
+export var api = ['state', 'handleKeyDown', 'getCheckedNodes', 'clearCheckedNodes', 'scrollIntoView', 'handleExpand', 'handleCheckChange', 'getNodeByValue', 'calculateMultiCheckedValue', 'lazyLoad', 'getFlattedNodes'];
+var initDefaultProps = function initDefaultProps() {
+  return {
+    expandTrigger: 'click',
+    multiple: false,
+    checkStrictly: false,
+    emitPath: true,
+    lazy: false,
+    lazyLoad: function lazyLoad() {
+      return undefined;
+    },
+    value: 'value',
+    label: 'label',
+    children: 'children',
+    leaf: 'leaf',
+    disabled: 'disabled',
+    hoverThreshold: 500
+  };
+};
+var initState = function initState(_ref) {
+  var reactive = _ref.reactive,
+    props = _ref.props,
+    computed = _ref.computed,
+    parent = _ref.parent,
+    slots = _ref.slots;
+  var DefaultProps = initDefaultProps();
+  var state = reactive({
+    checkedValue: null,
+    checkedNodePaths: [],
+    store: [],
+    menus: [],
+    activePath: [],
+    loadCount: 0,
+    config: computed(function () {
+      return merge(_objectSpread({}, DefaultProps), props.props || {});
+    }),
+    multiple: computed(function () {
+      return state.config.multiple;
+    }),
+    checkStrictly: computed(function () {
+      return state.config.checkStrictly;
+    }),
+    leafOnly: computed(function () {
+      return !state.checkStrictly;
+    }),
+    isHoverMenu: computed(function () {
+      return state.config.expandTrigger === 'hover';
+    }),
+    renderLabelFn: computed(function () {
+      var _parent$$parent;
+      return props.renderLabel || slots["default"] || ((_parent$$parent = parent.$parent) === null || _parent$$parent === void 0 ? void 0 : _parent$$parent.$options.componentName) === 'TinyCascader' && parent.$parent.$scopedSlots["default"];
+    })
+  });
+  return state;
+};
+var initApi = function initApi(_ref2) {
+  var api = _ref2.api,
+    state = _ref2.state,
+    menus = _ref2.menus,
+    props = _ref2.props,
+    nextTick = _ref2.nextTick,
+    parent = _ref2.parent,
+    emit = _ref2.emit;
+  Object.assign(api, {
+    state: state,
+    isLeaf: isLeaf(),
+    getMenuIndex: getMenuIndex(),
+    getNodeByValue: getNodeByValue(state),
+    getFlattedNodes: getFlattedNodes(state),
+    handleCheckChange: handleCheckChange(state),
+    scrollIntoView: scrollIntoView({
+      menus: menus
+    }),
+    syncActivePath: syncActivePath({
+      api: api,
+      state: state
+    }),
+    initStore: initStore({
+      api: api,
+      props: props,
+      state: state,
+      Store: Store
+    }),
+    syncMenuState: syncMenuState({
+      api: api,
+      nextTick: nextTick,
+      state: state
+    }),
+    syncMultiCheckState: syncMultiCheckState({
+      api: api,
+      state: state
+    }),
+    calculateCheckedNodePaths: calculateCheckedNodePaths({
+      api: api,
+      state: state
+    }),
+    lazyLoad: lazyLoad({
+      api: api,
+      $parent: parent,
+      state: state,
+      Store: Store
+    }),
+    syncCheckedValue: syncCheckedValue({
+      api: api,
+      props: props,
+      state: state
+    }),
+    focusNode: focusNode(api),
+    checkNode: checkNode(api),
+    expandNodes: expandNodes(api),
+    handleExpand: handleExpand({
+      emit: emit,
+      state: state
+    }),
+    getCheckedNodes: getCheckedNodes({
+      api: api,
+      state: state
+    }),
+    clearCheckedNodes: clearCheckedNodes({
+      api: api,
+      state: state
+    }),
+    calculateMultiCheckedValue: calculateMultiCheckedValue({
+      api: api,
+      state: state
+    }),
+    watchCheckedValue: watchCheckedValue({
+      api: api,
+      emit: emit,
+      props: props,
+      state: state
+    }),
+    handleKeyDown: handleKeyDown({
+      api: api,
+      emit: emit,
+      menus: menus
+    })
+  });
+};
+var initWatch = function initWatch(_ref3) {
+  var watch = _ref3.watch,
+    state = _ref3.state,
+    props = _ref3.props,
+    api = _ref3.api;
+  watch(function () {
+    return props.options;
+  }, function () {
+    return api.initStore();
+  }, {
+    deep: true,
+    immediate: true
+  });
+  watch(function () {
+    return props.modelValue;
+  }, function () {
+    api.syncCheckedValue();
+    state.checkStrictly && api.calculateCheckedNodePaths();
+  });
+  watch(function () {
+    return state.checkedValue;
+  }, function (value) {
+    api.watchCheckedValue(value);
+  }, {
+    deep: true
+  });
+};
+export var renderless = function renderless(props, _ref4, _ref5) {
+  var computed = _ref4.computed,
+    onMounted = _ref4.onMounted,
+    reactive = _ref4.reactive,
+    watch = _ref4.watch,
+    provide = _ref4.provide;
+  var nextTick = _ref5.nextTick,
+    emit = _ref5.emit,
+    parent = _ref5.parent,
+    childrenHandler = _ref5.childrenHandler,
+    slots = _ref5.slots;
+  var api = {};
+  var menus = [];
+  var state = initState({
+    reactive: reactive,
+    props: props,
+    computed: computed,
+    parent: parent,
+    slots: slots
+  });
+  childrenHandler(function (_ref6) {
+    var vm = _ref6.vm;
+    menus.push(vm);
+  });
+  initApi({
+    api: api,
+    state: state,
+    menus: menus,
+    props: props,
+    nextTick: nextTick,
+    parent: parent,
+    emit: emit
+  });
+  initWatch({
+    watch: watch,
+    state: state,
+    props: props,
+    api: api
+  });
+  onMounted(function () {
+    return !isEmpty(props.modelValue) && api.syncCheckedValue();
+  });
+  return api;
+};

package/checkbox/index.js

@@ -0,0 +1,145 @@
+export var addToStore = function addToStore(_ref) {
+  var state = _ref.state,
+    props = _ref.props;
+  return function () {
+    if (Array.isArray(state.model) && state.model.indexOf(props.label) === -1) {
+      state.model.push(props.label);
+    } else {
+      state.model = props.trueLabel || true;
+    }
+  };
+};
+export var handleChange = function handleChange(_ref2) {
+  var state = _ref2.state,
+    props = _ref2.props,
+    emit = _ref2.emit,
+    nextTick = _ref2.nextTick,
+    dispatch = _ref2.dispatch,
+    constants = _ref2.constants;
+  return function (event) {
+    if (state.isLimitExceeded) {
+      return;
+    }
+    var value;
+    if (event.target.checked) {
+      value = props.trueLabel === undefined ? true : props.trueLabel;
+    } else {
+      value = props.falseLabel === undefined ? false : props.falseLabel;
+    }
+    emit('change', value, event);
+    nextTick(function () {
+      state.isGroup && dispatch(constants.CHECKBOX_GROUP, 'change', [state.checkboxGroup.modelValue]);
+    });
+  };
+};
+export var computedGetModelGet = function computedGetModelGet(_ref3) {
+  var state = _ref3.state,
+    props = _ref3.props;
+  return function () {
+    var model = state.isGroup ? state.store : props.modelValue !== undefined ? props.modelValue : state.selfModel;
+    return ~[undefined, null].indexOf(model) ? [] : model;
+  };
+};
+export var computedGetModelSet = function computedGetModelSet(_ref4) {
+  var state = _ref4.state,
+    dispatch = _ref4.dispatch,
+    emit = _ref4.emit,
+    constants = _ref4.constants;
+  return function (value) {
+    if (state.isGroup) {
+      state.isLimitExceeded = false;
+      state.checkboxGroup.min !== undefined && value.length < state.checkboxGroup.min && (state.isLimitExceeded = true);
+      state.checkboxGroup.max !== undefined && value.length > state.checkboxGroup.max && (state.isLimitExceeded = true);
+      state.isLimitExceeded === false && dispatch(constants.CHECKBOX_GROUP, 'update:modelValue', [value]);
+    } else {
+      emit('update:modelValue', value);
+      state.selfModel = value;
+    }
+  };
+};
+export var computedIsChecked = function computedIsChecked(_ref5) {
+  var state = _ref5.state,
+    props = _ref5.props;
+  return function () {
+    if (typeof state.model === 'boolean') {
+      return state.model;
+    } else if (Array.isArray(state.model)) {
+      return state.model.indexOf(props.label) > -1;
+    } else if (state.model !== null && state.model !== undefined) {
+      return state.model === props.trueLabel;
+    }
+  };
+};
+export var computedIsGroup = function computedIsGroup(_ref6) {
+  var state = _ref6.state,
+    parent = _ref6.parent,
+    constants = _ref6.constants;
+  return function () {
+    var parentObj = parent.$parent;
+    while (parentObj) {
+      if (parentObj.$options.componentName !== constants.CHECKBOX_GROUP) {
+        parentObj = parentObj.$parent;
+      } else {
+        state.checkboxGroup = parentObj;
+        return true;
+      }
+    }
+    return false;
+  };
+};
+export var computedStore = function computedStore(_ref7) {
+  var state = _ref7.state,
+    props = _ref7.props;
+  return function () {
+    return state.checkboxGroup ? state.checkboxGroup.modelValue : props.modelValue;
+  };
+};
+export var computedIsLimitDisabled = function computedIsLimitDisabled(state) {
+  return function () {
+    var _state$checkboxGroup = state.checkboxGroup,
+      max = _state$checkboxGroup.max,
+      min = _state$checkboxGroup.min;
+    return !!(max || min) && state.model.length >= max && !state.isChecked || state.model.length <= min && state.isChecked;
+  };
+};
+export var computedIsDisabled = function computedIsDisabled(_ref8) {
+  var state = _ref8.state,
+    props = _ref8.props;
+  return function () {
+    return (state.isGroup ? state.checkboxGroup.disabled || props.disabled || state.isLimitDisabled : props.disabled) || state.formDisabled;
+  };
+};
+export var computedFormItemSize = function computedFormItemSize(props) {
+  return function () {
+    return (props.formItem || {}).formItemSize;
+  };
+};
+export var computedCheckboxSize = function computedCheckboxSize(_ref9) {
+  var state = _ref9.state,
+    props = _ref9.props,
+    formItemSize = _ref9.formItemSize;
+  return function () {
+    var tempCheckboxSize = props.size || formItemSize.value;
+    return state.isGroup ? state.checkboxGroup.state.checkboxGroupSize || tempCheckboxSize : tempCheckboxSize;
+  };
+};
+export var mounted = function mounted(_ref10) {
+  var props = _ref10.props,
+    emit = _ref10.emit,
+    api = _ref10.api,
+    parent = _ref10.parent;
+  return function () {
+    props.checked && api.addToStore();
+    props.indeterminate && parent.$el.setAttribute('aria-controls', props.controls);
+    emit('complete', true);
+  };
+};
+export var toggleEvent = function toggleEvent(_ref11) {
+  var parent = _ref11.parent,
+    props = _ref11.props,
+    type = _ref11.type;
+  var inputEl = parent.$el;
+  Object.keys(props.events).forEach(function (ev) {
+    return inputEl[type + 'EventListener'](ev, props.events[ev]);
+  });
+};

package/checkbox/vue.js

@@ -0,0 +1,139 @@
+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 { addToStore, handleChange, computedGetModelGet, computedGetModelSet, computedIsChecked, computedIsGroup, computedStore, computedIsLimitDisabled, computedIsDisabled, computedFormItemSize, computedCheckboxSize, mounted, toggleEvent } from './index';
+export var api = ['state', 'handleChange'];
+export var renderless = function renderless(props, _ref, _ref2) {
+  var computed = _ref.computed,
+    onMounted = _ref.onMounted,
+    onBeforeUnmount = _ref.onBeforeUnmount,
+    reactive = _ref.reactive,
+    watch = _ref.watch,
+    inject = _ref.inject;
+  var parent = _ref2.parent,
+    emit = _ref2.emit,
+    constants = _ref2.constants,
+    nextTick = _ref2.nextTick,
+    dispatch = _ref2.dispatch;
+  parent.tinyForm = parent.tinyForm || inject('form', null);
+  var api = {
+    dispatch: dispatch
+  };
+  var state = reactive(_objectSpread(_objectSpread({}, {
+    focus: false,
+    selfModel: false,
+    isLimitExceeded: false
+  }), {}, {
+    store: computed(function () {
+      return api.computedStore();
+    }),
+    isGroup: computed(function () {
+      return api.computedIsGroup();
+    }),
+    isChecked: computed(function () {
+      return api.computedIsChecked();
+    }),
+    isDisabled: computed(function () {
+      return api.computedIsDisabled();
+    }),
+    checkboxSize: computed(function () {
+      return api.computedCheckboxSize();
+    }),
+    isLimitDisabled: computed(function () {
+      return api.computedIsLimitDisabled();
+    }),
+    formDisabled: computed(function () {
+      return (parent.tinyForm || {}).disabled;
+    }),
+    model: computed({
+      get: function get() {
+        return api.computedGetModelGet();
+      },
+      set: function set(value) {
+        return api.computedGetModelSet(value);
+      }
+    })
+  }));
+  Object.assign(api, {
+    state: state,
+    addToStore: addToStore({
+      state: state,
+      props: props
+    }),
+    computedStore: computedStore({
+      state: state,
+      props: props
+    }),
+    computedFormItemSize: computedFormItemSize(props),
+    computedIsChecked: computedIsChecked({
+      state: state,
+      props: props
+    }),
+    computedIsLimitDisabled: computedIsLimitDisabled(state),
+    computedIsDisabled: computedIsDisabled({
+      state: state,
+      props: props
+    }),
+    computedGetModelGet: computedGetModelGet({
+      state: state,
+      props: props
+    }),
+    computedIsGroup: computedIsGroup({
+      state: state,
+      parent: parent,
+      constants: constants
+    }),
+    computedGetModelSet: computedGetModelSet({
+      state: state,
+      dispatch: dispatch,
+      emit: emit,
+      constants: constants
+    })
+  });
+  var formItemSize = computed(function () {
+    return api.computedFormItemSize();
+  });
+  api.computedCheckboxSize = computedCheckboxSize({
+    state: state,
+    props: props,
+    formItemSize: formItemSize
+  });
+  Object.assign(api, {
+    mounted: mounted({
+      emit: emit,
+      props: props,
+      api: api,
+      parent: parent
+    }),
+    handleChange: handleChange({
+      state: state,
+      props: props,
+      emit: emit,
+      nextTick: nextTick,
+      dispatch: api.dispatch,
+      constants: constants
+    })
+  });
+  watch(function () {
+    return props.modelValue;
+  }, function (value) {
+    return props.validateEvent && api.dispatch(constants.FORM_ITEM, constants.FORM_CHANGE, value);
+  });
+  onBeforeUnmount(function () {
+    toggleEvent({
+      parent: parent,
+      props: props,
+      type: 'remove'
+    });
+  });
+  onMounted(function () {
+    dispatch('Tooltip', 'tooltip-update');
+    toggleEvent({
+      parent: parent,
+      props: props,
+      type: 'add'
+    });
+    api.mounted();
+  });
+  return api;
+};

package/checkbox-button/index.js

@@ -0,0 +1,102 @@
+export var handleChange = function handleChange(_ref) {
+  var state = _ref.state,
+    props = _ref.props,
+    emit = _ref.emit,
+    nextTick = _ref.nextTick,
+    dispatch = _ref.dispatch,
+    constants = _ref.constants;
+  return function (event) {
+    if (state.isLimitExceeded) return;
+    var value;
+    if (event.target.checked) {
+      value = props.trueLabel === undefined ? true : props.trueLabel;
+    } else {
+      value = props.falseLabel === undefined ? false : props.falseLabel;
+    }
+    emit('change', value, event);
+    nextTick(function () {
+      if (state.checkboxGroup) {
+        dispatch(constants.CHECKBOX_GROUP, 'change', [state.checkboxGroup.modelValue]);
+      }
+    });
+  };
+};
+export var computedGetModelGet = function computedGetModelGet(_ref2) {
+  var state = _ref2.state,
+    props = _ref2.props;
+  return function () {
+    return state.checkboxGroup ? state.store : props.modelValue !== undefined ? props.modelValue : state.selfModel;
+  };
+};
+export var computedGetModelSet = function computedGetModelSet(_ref3) {
+  var state = _ref3.state,
+    props = _ref3.props,
+    emit = _ref3.emit,
+    dispatch = _ref3.dispatch,
+    constants = _ref3.constants;
+  return function (value) {
+    if (state.checkboxGroup) {
+      state.isLimitExceeded = false;
+      state.checkboxGroup.min !== undefined && value.length < state.checkboxGroup.min && (state.isLimitExceeded = true);
+      state.checkboxGroup.max !== undefined && value.length > state.checkboxGroup.max && (state.isLimitExceeded = true);
+      state.isLimitExceeded === false && dispatch(constants.CHECKBOX_GROUP, 'update:modelValue', [value]);
+    } else if (props.modelValue !== undefined) {
+      emit('update:modelValue', value);
+    } else {
+      state.selfModel = value;
+    }
+  };
+};
+export var computedCheckboxGroup = function computedCheckboxGroup(_ref4) {
+  var parent = _ref4.parent,
+    constants = _ref4.constants;
+  return function () {
+    var parentObj = parent.$parent;
+    while (parentObj) {
+      if (parentObj.$options.componentName !== constants.CHECKBOX_GROUP) {
+        parentObj = parentObj.$parent;
+      } else {
+        return parentObj;
+      }
+    }
+    return false;
+  };
+};
+export var computedIsDisabled = function computedIsDisabled(_ref5) {
+  var state = _ref5.state,
+    props = _ref5.props;
+  return function () {
+    return state.checkboxGroup ? state.checkboxGroup.disabled || props.disabled || state.isLimitDisabled : props.disabled;
+  };
+};
+export var computedActiveStyle = function computedActiveStyle(state) {
+  return function () {
+    return {
+      backgroundColor: state.checkboxGroup.fill || '',
+      borderColor: state.checkboxGroup.fill || '',
+      color: state.checkboxGroup.textColor || '',
+      'box-shadow': '-1px 0 0 0 ' + state.checkboxGroup.fill
+    };
+  };
+};
+export var computedFormItemSize = function computedFormItemSize(props) {
+  return function () {
+    return (props.formItem || {}).formItemSize;
+  };
+};
+export var computedSize = function computedSize(_ref6) {
+  var state = _ref6.state,
+    formItemSize = _ref6.formItemSize;
+  return function () {
+    return state.checkboxGroup && state.checkboxGroup.state.checkboxGroupSize || formItemSize.value;
+  };
+};
+export var toggleEvent = function toggleEvent(_ref7) {
+  var parent = _ref7.parent,
+    props = _ref7.props,
+    type = _ref7.type;
+  var inputEl = parent.$el.querySelector('input');
+  Object.keys(props.events).forEach(function (ev) {
+    inputEl[type + 'EventListener'](ev, props.events[ev]);
+  });
+};