@opentiny/vue-renderless 3.13.2 → 3.14.1

package/action-sheet/index.js

@@ -40,12 +40,11 @@ const visibleHandle = ({ emit, state }) => () => {
   emit("update:visible", false);
   emit("close", false);
 };
-const watchVisible = ({ emit, props, state }) => (value) => {
-  state.active = props.modelValue;
+const watchVisible = ({ emit, state }) => (bool) => {
   setTimeout(() => {
-    value ? state.toggle = true : state.toggle = false;
+    state.toggle = bool;
   }, 0);
-  emit("update:visible", value);
+  emit("update:visible", bool);
 };
 const menuHandle = ({ emit, state }) => (item) => {
   state.active = item.id;
@@ -54,13 +53,11 @@ const menuHandle = ({ emit, state }) => (item) => {
   emit("update:modelValue", item.id);
   emit("click", item);
 };
-const close = ({ emit, vm }) => () => {
-  vm.$refs.drawer.close();
-  emit("close", false);
+const close = ({ api }) => () => {
+  api.handleClose("close", false);
 };
-const hide = (emit) => () => {
-  emit("hide", false);
-  emit("update:visible", false);
+const hide = ({ api }) => () => {
+  api.handleClose("hide", false);
 };
 const selectOption = ({ emit, props }) => (option) => {
   const { valueField } = props;
@@ -68,18 +65,28 @@ const selectOption = ({ emit, props }) => (option) => {
   emit("update:modelValue", option[valueField]);
   emit("click", option);
 };
-const confirm = ({ emit, state }) => () => {
-  emit("confirm", state);
-  emit("update:visible", false);
+const confirm = ({ state, api }) => () => {
+  api.handleClose("confirm", state);
 };
 const actionSelectOption = ({ emit }) => (option, index) => {
   emit("update:visible", false);
   emit("click", option, index);
 };
+const handleClose = ({ vm, emit, props }) => (type, show) => {
+  if (typeof props.beforeClose === "function" && props.beforeClose(type) === false)
+    return;
+  if (type === "close") {
+    vm.$refs.drawer.close(true);
+  } else {
+    emit("update:visible", false);
+  }
+  emit(type, show);
+};
 export {
   actionSelectOption,
   close,
   confirm,
+  handleClose,
   hide,
   initScrollMenu,
   menuHandle,

package/action-sheet/vue.js

@@ -9,7 +9,8 @@ import {
   selectOption,
   confirm,
   actionSelectOption,
-  hide
+  hide,
+  handleClose
 } from "./index";
 const api = [
   "state",
@@ -25,26 +26,26 @@ const api = [
   "hide"
 ];
 const renderless = (props, { reactive, watch }, { emit, nextTick, refs, vm }, { BScroll }) => {
-  const api2 = {};
   const state = reactive({
     toggle: false,
-    active: null,
     sheetMaskStyle: {},
     sheetContentStyle: {},
     scroll: null
   });
+  const api2 = {};
   Object.assign(api2, {
     state,
     setSheetStyle: setSheetStyle({ state, props }),
     initScrollMenu: initScrollMenu({ state, nextTick, refs, BScroll }),
     visibleHandle: visibleHandle({ emit, state }),
-    watchVisible: watchVisible({ emit, props, state }),
+    watchVisible: watchVisible({ emit, state }),
     menuHandle: menuHandle({ state, emit }),
-    confirm: confirm({ state, emit }),
+    confirm: confirm({ state, api: api2 }),
     selectOption: selectOption({ emit, props }),
     actionSelectOption: actionSelectOption({ emit }),
-    close: close({ emit, vm }),
-    hide: hide(emit)
+    hide: hide({ api: api2 }),
+    close: close({ api: api2 }),
+    handleClose: handleClose({ vm, emit, props })
   });
   watch(
     () => props.visible,

package/amount/index.js

@@ -17,6 +17,7 @@ const initService = (service) => {
 const getDecimal = (props) => (value) => getMiniDecimal(value, props.plugin);
 const closePopper = (state) => () => {
   state.visible = false;
+  state.editorPhase = "close";
 };
 const popInput = ({ editorState, props, state, api }) => (value) => {
   value = api.onInputPreprocess(value);
@@ -32,22 +33,54 @@ const popInput = ({ editorState, props, state, api }) => (value) => {
   editorState.lastInput = value;
   editorState.amount = value;
 };
-const toggleVisible = ({ api, props, state, editorState }) => () => {
-  if (props.disabled || !props.popUp) {
+const toggleVisible = ({ api, props, state, editorState, uiMode, isMobileFirstMode: mf }) => () => {
+  if (state.disabled || !props.popUp) {
     return;
   }
   state.lock = true;
   state.visible = !state.visible;
   if (state.visible) {
     const { date, currency } = state;
-    Object.assign(editorState, {
-      amount: state.amount,
-      date,
-      currency
-    });
-    api.addOutSideEvent(state.visible);
+    if (!state.clearValues) {
+      Object.assign(editorState, {
+        amount: state.amount,
+        date,
+        currency
+      });
+    }
+    if (props.date || props.dateAllowEmpty) {
+      state.editorPhase = "selection";
+    } else {
+      state.editorPhase = "currency";
+    }
+    if (!mf || uiMode.value !== "default") {
+      api.addOutSideEvent(state.visible);
+    }
+  } else {
+    state.editorPhase = "close";
   }
 };
+const openDetailEditor = ({ state }) => (option, index) => {
+  const optionPhase = ["currency", "date"];
+  state.editorPhase = optionPhase[index];
+  state.visible = true;
+};
+const closeDetailEidtor = ({ state, props, api }) => (triggerCondition) => {
+  if (!triggerCondition) {
+    return;
+  }
+  const inSelectionPhase = state.editorPhase === "selection";
+  const isMultipleStep = props.date || props.dateAllowEmpty;
+  if (!inSelectionPhase && isMultipleStep) {
+    state.editorPhase = "selection";
+    state.visible = true;
+  } else {
+    api.toggleVisible();
+  }
+  setTimeout(() => {
+    api.save(true);
+  }, 0);
+};
 const innerFormat = ({ state, props }) => (value) => {
   const { fraction, zeroize, rounding } = state.format;
   const { modelTruncation } = props;
@@ -66,11 +99,13 @@ const innerFormat = ({ state, props }) => (value) => {
     rounding
   });
 };
-const save = ({ api, state, editorState }) => () => {
+const save = ({ api, state, editorState }) => (keepOpen) => {
   const { amount, date, currency } = editorState;
   Object.assign(state, { amount, date, currency });
-  api.closePopper();
-  let num = api.innerFormat(String(state.amount));
+  if (keepOpen !== true) {
+    api.closePopper();
+  }
+  let num = api.innerFormat(state.amount + "");
   state.amount = isNaN(num) ? 0 : num;
   if (!equalsDecimal(state.lastInput, state.amount) || state.lastCurrency !== currency || state.lastDate !== date) {
     api.emitChange();
@@ -84,16 +119,20 @@ const reset = ({ state, editorState }) => () => {
   const { amount, date, currency } = state;
   Object.assign(editorState, { amount, date, currency });
 };
-const emitChange = ({ emit, state }) => () => {
+const emitChange = ({ emit, state, props, api }) => () => {
   const { date, currency } = state;
-  const emitAmount = Number(state.amount);
-  emit("update:modelValue", emitAmount);
+  let emitAmount = props.stringMode ? api.getDecimal(state.amount).toString() : Number(state.amount);
+  if (props.numAllowEmpty && state.amount === "") {
+    emitAmount = state.amount;
+  }
+  state.amount && (state.clearValues = false);
+  !state.clearValues && emit("update:modelValue", emitAmount);
   emit("update:currency", currency);
   emit("update:date", date);
   emit("change", { amount: emitAmount, date, currency });
 };
 const inputFocus = ({ state, props }) => () => {
-  let amount = String(state.amount);
+  let amount = state.amount + "";
   state.isFocus = true;
   state.lock = false;
   const { fraction } = state.format;
@@ -105,7 +144,7 @@ const inputFocus = ({ state, props }) => () => {
 };
 const inputBlur = ({ api, state, props }) => () => {
   if (state.amountText !== "") {
-    let amount = api.innerFormat(String(state.amountText));
+    let amount = api.innerFormat(state.amountText + "");
     if (isNaN(amount)) {
       state.amount = "";
     }
@@ -118,8 +157,8 @@ const inputBlur = ({ api, state, props }) => () => {
   }
   state.lastInput = state.amount;
 };
-const handelClick = ({ api, refs }) => (e) => {
-  const contains = refs.root.contains(e.target);
+const handelClick = ({ api, vm }) => (e) => {
+  const contains = vm.$refs.root.contains(e.target);
   if (!contains) {
     api.closePopper();
   }
@@ -132,7 +171,7 @@ const addOutSideEvent = (api) => (visible) => {
   }
 };
 const initText = ({ state }) => () => {
-  let amount = String(state.amount);
+  let amount = state.amount + "";
   state.amountText = amount ? state.isFocus ? amount : formatNumber(state.amount, state.format) : "";
 };
 const onInputPreprocess = (props) => (value) => {
@@ -151,7 +190,7 @@ const onInputPreprocess = (props) => (value) => {
 const onInput = ({ state, props, api }) => (value) => {
   value = api.onInputPreprocess(value);
   const { fraction, groupSeparator } = state.format;
-  value = event.target.value.replace(/^-+/, "-");
+  value = event.target.value !== void 0 ? event.target.value.replace(/^-+/, "-") : value.replace(/^-+/, "-");
   const groups = value.split(groupSeparator).map((val) => val.trim());
   value = groups.join("");
   if (value !== "-" && api.getDecimal(value).isNaN()) {
@@ -184,7 +223,17 @@ const getPrecision = ({ service, props, currency }) => {
   }
   return __spreadValues(__spreadValues(__spreadProps(__spreadValues({}, defaultFmt), { fraction, rounding }), serFmt), format);
 };
-const getAmountText = ({ state, props }) => () => props.hideCurrency ? typeof state.amountText === "string" ? state.amountText.replace(state.currency, "") : state.amountText : state.amountText;
+const getAmountText = ({ state, props }) => () => {
+  const isFilter = props.shape === "filter" && props.filter;
+  if (props.hideCurrency && typeof state.amountText === "string") {
+    return isFilter ? state.radioVal + state.amountText.replace(state.currency, "") : state.amountText.replace(state.currency, "");
+  } else {
+    return isFilter ? state.radioVal + state.amountText : state.amountText;
+  }
+};
+const getAmountTextWithoutCurrncy = ({ state }) => () => {
+  return state.amountText.replace(state.currency, "");
+};
 const watchModelValue = ({ api, state }) => () => {
   let value = api.initAmount();
   state.amount = value;
@@ -197,23 +246,47 @@ const watchCurrency = ({ api, state, editorState }) => (value) => {
   state.lastCurrency = value;
   api.initText();
 };
-const initAmount = (props) => () => {
+const watchUiMode = ({ api, isMobileFirstMode: mf }) => (value) => {
+  if (mf && value === "default") {
+    api.addOutSideEvent(false);
+  }
+};
+const initAmount = ({ props, api }) => () => {
   let value = props.modelValue;
   value = value === null || isNaN(Number(value)) ? "" : value;
   if (!props.negative && value && Number(value) < 0) {
-    value -= 0;
-    value = Math.abs(value);
+    if (props.stringMode) {
+      value = api.getDecimal(String(value).replace(/^-/, "")).toString();
+    } else {
+      value -= 0;
+      value = Math.abs(value);
+    }
   }
   return value;
 };
+const handleClearClick = ({ state, emit, editorState }) => (event2) => {
+  event2.stopPropagation();
+  state.amountText = "";
+  state.radioVal = "";
+  editorState.amount = "";
+  state.clearValues = true;
+  emit("clear");
+};
+const handleChange = ({ state, emit }) => () => {
+  emit("filter-change", state.radioVal);
+};
 export {
   addOutSideEvent,
+  closeDetailEidtor,
   closePopper,
   emitChange,
   getAmountText,
+  getAmountTextWithoutCurrncy,
   getDecimal,
   getPrecision,
   handelClick,
+  handleChange,
+  handleClearClick,
   initAmount,
   initService,
   initText,
@@ -222,10 +295,12 @@ export {
   inputFocus,
   onInput,
   onInputPreprocess,
+  openDetailEditor,
   popInput,
   reset,
   save,
   toggleVisible,
   watchCurrency,
-  watchModelValue
+  watchModelValue,
+  watchUiMode
 };

package/amount/vue.js

@@ -23,7 +23,13 @@ import {
   watchModelValue,
   watchCurrency,
   onInputPreprocess,
-  initAmount
+  initAmount,
+  handleClearClick,
+  handleChange,
+  closeDetailEidtor,
+  openDetailEditor,
+  getAmountTextWithoutCurrncy,
+  watchUiMode
 } from "./index";
 const api = [
   "t",
@@ -38,9 +44,26 @@ const api = [
   "inputFocus",
   "closePopper",
   "onInput",
-  "getAmountText"
+  "getAmountText",
+  "handleClearClick",
+  "handleChange",
+  "openDetailEditor",
+  "closeDetailEidtor",
+  "uiMode",
+  "getAmountTextWithoutCurrncy",
+  "watchUiMode"
 ];
-const initState = ({ reactive, computed, props, $service, editorState }) => {
+const initState = ({
+  reactive,
+  computed,
+  props,
+  $service,
+  editorState,
+  vm,
+  api: api2,
+  constants,
+  parent
+}) => {
   const state = reactive({
     visible: false,
     amount: props.modelValue || "",
@@ -53,45 +76,88 @@ const initState = ({ reactive, computed, props, $service, editorState }) => {
     lastInput: props.modelValue,
     lastCurrency: props.currency,
     lastDate: props.date,
-    format: computed(() => __spreadProps(__spreadValues({}, getPrecision({ service: $service, props, currency: editorState.currency })), {
-      prefix: state.currency
-    }))
+    format: computed(() => {
+      return __spreadProps(__spreadValues({}, getPrecision({ service: $service, props, currency: editorState.currency })), {
+        prefix: state.currency
+      });
+    }),
+    disabled: computed(() => props.disabled || (parent.tinyForm || {}).disabled),
+    displayOnly: computed(() => props.displayOnly || (parent.tinyForm || {}).displayOnly),
+    theme: vm.theme,
+    radioVal: "",
+    clearValues: false,
+    amountValue: computed(() => api2.getAmountText()),
+    amountNumberValue: computed(() => api2.getAmountTextWithoutCurrncy()),
+    filterMenu: constants.FILTER_OPTION,
+    editorPhase: "close"
+    // 'close' | 'selection' | 'currency' | 'date',
   });
   return state;
 };
-const initEditorState = ({ reactive, props }) => reactive({
-  amount: "",
-  date: "",
-  currency: props.currency,
-  lastInput: props.modelValue
-});
-const initApi = ({ api: api2, t, editorState, props, state, emit, refs }) => {
+const initEditorState = ({
+  reactive,
+  props
+}) => {
+  return reactive({
+    amount: "",
+    date: "",
+    currency: props.currency,
+    lastInput: props.modelValue
+  });
+};
+const initUiMode = ({ useBreakpoint }) => {
+  return useBreakpoint().current;
+};
+const initApi = ({
+  api: api2,
+  t,
+  editorState,
+  props,
+  state,
+  emit,
+  vm,
+  uiMode,
+  isMobileFirstMode
+}) => {
   Object.assign(api2, {
     state,
     t,
     editorState,
+    uiMode,
     getDecimal: getDecimal(props),
     innerFormat: innerFormat({ state, props }),
     getAmountText: getAmountText({ state, props }),
-    initAmount: initAmount(props),
+    getAmountTextWithoutCurrncy: getAmountTextWithoutCurrncy({ state }),
+    initAmount: initAmount({ props, api: api2 }),
     onInputPreprocess: onInputPreprocess(props),
     onInput: onInput({ state, props, api: api2 }),
     initText: initText({ state }),
     inputFocus: inputFocus({ state, props }),
     inputBlur: inputBlur({ api: api2, props, state }),
     closePopper: closePopper(state),
-    emitChange: emitChange({ emit, state }),
+    emitChange: emitChange({ emit, state, props, api: api2 }),
     popInput: popInput({ editorState, api: api2, state, props }),
-    save: save({ api: api2, state, editorState, props }),
-    reset: reset({ api: api2, state, editorState }),
-    handelClick: handelClick({ api: api2, refs }),
+    save: save({ api: api2, state, editorState }),
+    reset: reset({ state, editorState }),
+    handelClick: handelClick({ api: api2, vm }),
     addOutSideEvent: addOutSideEvent(api2),
     watchModelValue: watchModelValue({ api: api2, state }),
     watchCurrency: watchCurrency({ api: api2, state, editorState }),
-    toggleVisible: toggleVisible({ api: api2, props, state, editorState })
+    watchUiMode: watchUiMode({ api: api2, isMobileFirstMode }),
+    toggleVisible: toggleVisible({ api: api2, props, state, editorState, uiMode, isMobileFirstMode }),
+    handleClearClick: handleClearClick({ state, emit, editorState }),
+    handleChange: handleChange({ state, emit }),
+    openDetailEditor: openDetailEditor({ state }),
+    closeDetailEidtor: closeDetailEidtor({ state, props, api: api2 })
   });
 };
-const initWatch = ({ watch, props, state, api: api2 }) => {
+const initWatch = ({
+  watch,
+  props,
+  state,
+  api: api2,
+  uiMode
+}) => {
   watch(() => props.modelValue, api2.watchModelValue, { immediate: true });
   watch(() => props.currency, api2.watchCurrency, { immediate: true });
   watch(
@@ -114,16 +180,26 @@ const initWatch = ({ watch, props, state, api: api2 }) => {
       state.format.fraction = value;
     }
   );
+  watch(uiMode, api2.watchUiMode);
 };
-const renderless = (props, { onUnmounted, computed, reactive, watch }, { t, emit, refs, service }) => {
+const renderless = (props, { onUnmounted, computed, reactive, watch, inject }, { t, emit, vm, service, parent, constants, isMobileFirstMode, useBreakpoint }) => {
+  var _a;
   const api2 = {};
   const $service = initService(service);
   const editorState = initEditorState({ reactive, props });
-  const state = initState({ reactive, computed, props, $service, editorState });
-  initApi({ api: api2, t, editorState, props, state, emit, refs });
-  api2.getDecimal(0);
-  initWatch({ watch, props, state, api: api2 });
-  onUnmounted(() => api2.addOutSideEvent(false));
+  const state = initState({ reactive, computed, props, $service, editorState, vm, api: api2, constants, parent });
+  const uiMode = initUiMode({ useBreakpoint });
+  initApi({ api: api2, t, editorState, props, state, emit, vm, uiMode, isMobileFirstMode });
+  parent.tinyForm = parent.tinyForm || inject("form", null);
+  (_a = api2 == null ? void 0 : api2.getDecimal) == null ? void 0 : _a.call(api2, 0);
+  initWatch({ watch, props, state, api: api2, uiMode });
+  onUnmounted(() => {
+    var _a2;
+    return (_a2 = api2 == null ? void 0 : api2.addOutSideEvent) == null ? void 0 : _a2.call(api2, false);
+  });
+  parent.$on("handle-clear", (event) => {
+    api2.handleClearClick(event);
+  });
   return api2;
 };
 export {

package/anchor/index.js

@@ -116,6 +116,7 @@ const unmounted = ({ state, api }) => () => {
 };
 const onItersectionObserver = ({ state, props, api, vm, emit }) => () => {
   const { expandLink, scrollContainer } = state;
+  state.currentLink && updateSkidPosition({ vm, state, emit });
   state.intersectionObserver = new IntersectionObserver(
     (entries) => {
       const { top } = scrollContainer.getBoundingClientRect();

package/area/index.js

@@ -1,8 +1,8 @@
 import "../chunk-G2ADBYYC.js";
-const fetchDefaultData = ({ emit, fetchArea, nextTick, props, refs, state }) => () => {
+const fetchDefaultData = ({ emit, fetchArea, nextTick, props, vm, state }) => () => {
   let parent = "";
   nextTick(() => {
-    emit("change-jcr", parent, refs.refInstance.$parent);
+    emit("change-jcr", parent, vm.$refs.refInstance.$parent);
   });
   let promise;
   if (props.fetchJcr) {
@@ -20,10 +20,10 @@ const fetchDefaultData = ({ emit, fetchArea, nextTick, props, refs, state }) =>
   state.office = "";
   emit("update:modelValue", [state.jcr, state.region, state.rep, state.office]);
 };
-const getRegion = ({ emit, fetchArea, nextTick, props, refs, state }) => (value) => {
+const getRegion = ({ emit, fetchArea, nextTick, props, vm, state }) => (value) => {
   state.jcr = value;
   nextTick(() => {
-    emit("change-region", value, refs.refInstance.$parent);
+    emit("change-region", value, vm.$refs.refInstance.$parent);
   });
   let promise;
   if (props.fetchRegion) {
@@ -40,10 +40,10 @@ const getRegion = ({ emit, fetchArea, nextTick, props, refs, state }) => (value)
   state.rep = "";
   emit("update:modelValue", [state.jcr, state.region, state.rep, state.office]);
 };
-const getRep = ({ emit, fetchArea, nextTick, props, refs, state }) => (value) => {
+const getRep = ({ emit, fetchArea, nextTick, props, vm, state }) => (value) => {
   state.region = value;
   nextTick(() => {
-    emit("change-rep", value, refs.refInstance.$parent);
+    emit("change-rep", value, vm.$refs.refInstance.$parent);
   });
   let promise;
   if (props.fetchRep) {
@@ -59,10 +59,10 @@ const getRep = ({ emit, fetchArea, nextTick, props, refs, state }) => (value) =>
   state.rep = "";
   emit("update:modelValue", [state.jcr, state.region, state.rep, state.office]);
 };
-const getOffice = ({ emit, fetchArea, nextTick, props, refs, state }) => (value) => {
+const getOffice = ({ emit, fetchArea, nextTick, props, vm, state }) => (value) => {
   state.rep = value;
   nextTick(() => {
-    emit("change-office", value, refs.refInstance.$parent);
+    emit("change-office", value, vm.$refs.refInstance.$parent);
   });
   let promise;
   if (props.fetchOffice) {

package/area/vue.js

@@ -1,7 +1,7 @@
 import "../chunk-G2ADBYYC.js";
 import { getRegion, changeOffice, getRep, getOffice, fetchDefaultData, beforeMount } from "./index";
 const api = ["state", "getRep", "getRegion", "getOffice", "changeOffice"];
-const renderless = (props, { onBeforeMount, reactive }, { emit, service, refs, nextTick }) => {
+const renderless = (props, { onBeforeMount, reactive }, { emit, service, vm, nextTick }) => {
   const api2 = {};
   const { fetchArea } = service || {};
   const state = reactive({
@@ -18,10 +18,10 @@ const renderless = (props, { onBeforeMount, reactive }, { emit, service, refs, n
     state,
     changeOffice: changeOffice({ emit, state }),
     beforeMount: beforeMount({ api: api2, props }),
-    getRep: getRep({ emit, fetchArea, nextTick, props, refs, state }),
-    getRegion: getRegion({ emit, fetchArea, nextTick, props, refs, state }),
-    getOffice: getOffice({ emit, fetchArea, nextTick, props, refs, state }),
-    fetchDefaultData: fetchDefaultData({ emit, fetchArea, nextTick, props, refs, state })
+    getRep: getRep({ emit, fetchArea, nextTick, props, vm, state }),
+    getRegion: getRegion({ emit, fetchArea, nextTick, props, vm, state }),
+    getOffice: getOffice({ emit, fetchArea, nextTick, props, vm, state }),
+    fetchDefaultData: fetchDefaultData({ emit, fetchArea, nextTick, props, vm, state })
   });
   onBeforeMount(api2.beforeMount);
   return api2;

package/async-flowchart/index.js

@@ -1,15 +1,20 @@
 import "../chunk-G2ADBYYC.js";
 import ResizeObserver from "../common/deps/ResizeObserver";
-const observeContainerSize = ({ nextTick, vm, state }) => () => {
+const observeContainerSize = ({
+  nextTick,
+  vm,
+  state
+}) => () => {
   nextTick(() => {
     const observedElement = vm.$el;
     if (observedElement) {
       state.temporary.observer = new ResizeObserver(() => {
         window.requestAnimationFrame(() => {
+          var _a;
           if (vm.$refs.chart) {
             vm.$refs.chart.refresh({
               graphWidth: observedElement.offsetWidth,
-              adjustX: -state.config.nodeWrapperSize / 2
+              adjustX: -(((_a = state == null ? void 0 : state.config) == null ? void 0 : _a.nodeWrapperSize) || 0) / 2
             });
           }
         });
@@ -27,7 +32,15 @@ const unobserveContainerSize = (state) => () => {
     state.temporary.observed = null;
   }
 };
-const fetchData = ({ Loading, props, state, vm, markRaw, api, nextTick }) => () => {
+const fetchData = ({
+  Loading,
+  props,
+  state,
+  vm,
+  markRaw,
+  api,
+  nextTick
+}) => () => {
   if (typeof props.fetch === "function") {
     api.unobserveContainerSize();
     state.loading = true;