@opentiny/vue-renderless 3.12.0 → 3.13.0-alpha.0

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/alert/index.js

@@ -1,4 +1,33 @@
 import "../chunk-G2ADBYYC.js";
+const ALERT_TIMEOUT = 2e3;
+const watchAutoHide = ({ api, props }) => (newVal) => {
+  if (props.autoHide && newVal) {
+    const timer = setTimeout(() => {
+      api.handleClose();
+      clearTimeout(timer);
+    }, ALERT_TIMEOUT);
+  }
+};
+const computedClass = ({ props, mode }) => () => {
+  const { type, size, center } = props;
+  if (mode === "mobile") {
+    const alertClass = ["tiny-mobile-alert", "tiny-mobile-alert--" + type, "tiny-mobile-alert--" + size];
+    if (center) {
+      alertClass.push("is-center");
+    }
+    return alertClass;
+  }
+  return [];
+};
+const computedStyle = ({ props, mode }) => () => {
+  if (mode === "mobile") {
+    const style = {
+      top: isNaN(props.offset) ? props.offset : `${props.offset}px`
+    };
+    return style;
+  }
+  return null;
+};
 const handleClose = ({ emit, state }) => () => {
   state.show = false;
   emit("close");
@@ -26,9 +55,29 @@ const handleHeaderClick = ({ state, props, vm }) => () => {
     }
   }
 };
+const getEl = (node) => {
+  return node.$el || node;
+};
+const handlerTargetNode = ({ props, parent, vm, nextTick }) => () => {
+  const { target } = props;
+  const { $parent } = parent;
+  nextTick(() => {
+    const alertParentNode = $parent == null ? void 0 : $parent.$refs[target];
+    if (!target || !alertParentNode) {
+      return;
+    }
+    const targetNode = Array.isArray(alertParentNode) ? alertParentNode[0] : alertParentNode;
+    getEl(targetNode).insertBefore(vm.$el, getEl(targetNode).firstChild);
+  });
+};
 export {
+  ALERT_TIMEOUT,
+  computedClass,
   computedGetIcon,
   computedGetTitle,
+  computedStyle,
   handleClose,
-  handleHeaderClick
+  handleHeaderClick,
+  handlerTargetNode,
+  watchAutoHide
 };

package/alert/vue.js

@@ -1,24 +1,51 @@
 import "../chunk-G2ADBYYC.js";
-import { handleClose, computedGetIcon, computedGetTitle, handleHeaderClick } from "./index";
+import {
+  computedGetIcon,
+  computedGetTitle,
+  computedStyle,
+  computedClass,
+  handleClose,
+  handleHeaderClick,
+  watchAutoHide,
+  handlerTargetNode
+} from "./index";
 const api = ["handleClose", "state", "handleHeaderClick"];
-const renderless = (props, { computed, reactive }, { t, emit, constants, vm, designConfig }) => {
-  const state = reactive({
+const initState = ({ api: api2, computed, constants, reactive }) => {
+  return reactive({
     show: true,
-    getIcon: computed(() => api2.computedGetIcon()),
-    getTitle: computed(() => api2.computedGetTitle()),
     contentVisible: false,
     contentDescribeHeight: 0,
     contentDefaultHeight: 0,
     contentMaxHeight: constants.CONTENT_MAXHEUGHT,
-    scrollStatus: false
+    scrollStatus: false,
+    getIcon: computed(() => api2.computedGetIcon()),
+    getTitle: computed(() => api2.computedGetTitle()),
+    alertClass: computed(() => api2.computedClass()),
+    alertStyle: computed(() => api2.computedStyle())
   });
-  const api2 = {
+};
+const initApi = ({ api: api2, state, constants, props, designConfig, t, emit, vm, parent, nextTick, mode }) => {
+  Object.assign(api2, {
     state,
     computedGetIcon: computedGetIcon({ constants, props, designConfig }),
     computedGetTitle: computedGetTitle({ constants, props, t }),
+    computedClass: computedClass({ props, mode }),
+    computedStyle: computedStyle({ props, mode }),
     handleClose: handleClose({ emit, state }),
-    handleHeaderClick: handleHeaderClick({ state, props, vm })
-  };
+    handleHeaderClick: handleHeaderClick({ state, props, vm }),
+    watchAutoHide: watchAutoHide({ api: api2, props }),
+    handlerTargetNode: handlerTargetNode({ props, parent, vm, nextTick })
+  });
+};
+const initWatcher = ({ watch, props, api: api2 }) => {
+  watch(() => props.autoHide, api2.watchAutoHide, { immediate: true });
+  watch(() => props.target, api2.handlerTargetNode, { immediate: true });
+};
+const renderless = (props, { computed, reactive, watch }, { t, emit, constants, vm, designConfig, parent, nextTick, mode }) => {
+  const api2 = {};
+  const state = initState({ api: api2, computed, constants, reactive });
+  initApi({ api: api2, state, constants, props, designConfig, t, emit, vm, parent, nextTick, mode });
+  initWatcher({ watch, props, api: api2 });
   return api2;
 };
 export {

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();