@opentinyvue/vue-renderless 3.21.0

package/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2022 - present TinyVue Authors.
+Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,16 @@
+# @opentinyvue/vue-renderless
+
+Provides a rendering-free logic layer for the `TinyVue` component.
+
+## You can customize the global configuration of some components
+
+### Modify the popup window starting level (z-index)
+
+Add the following code to the entry file `main.js`:
+
+```js
+import PopupManager from '@opentinyvue/vue-renderless/common/deps/popup-manager'
+
+// Set the starting level to 3000
+PopupManager.zIndex = 3000
+```

package/action-menu/index.js

@@ -0,0 +1,59 @@
+import "../chunk-G2ADBYYC.js";
+const computedMaxShowNum = ({ props, state }) => () => {
+  if (props.maxShowNum !== void 0) {
+    return props.maxShowNum;
+  }
+  if (state.isCardMode) {
+    return 3;
+  } else {
+    return 2;
+  }
+};
+const computedSpacing = ({ props, state, designConfig }) => () => {
+  if (props.spacing !== void 0) {
+    return String(props.spacing).includes("px") ? props.spacing : props.spacing + "px";
+  }
+  if (state.isCardMode) {
+    return "10px";
+  } else {
+    return (designConfig == null ? void 0 : designConfig.props.spacing) || "8px";
+  }
+};
+const computedMoreText = ({ props, state, t }) => () => {
+  if (props.moreText !== void 0) {
+    return props.moreText;
+  }
+  if (state.isCardMode) {
+    return "";
+  } else {
+    return t("ui.actionMenu.moreText");
+  }
+};
+const computedSuffixIcon = ({ props, state }) => () => {
+  if (props.suffixIcon) {
+    return props.suffixIcon;
+  }
+  if (state.isCardMode) {
+    return "tiny-icon-ellipsis";
+  } else {
+    return "";
+  }
+};
+const handleMoreClick = (emit) => () => {
+  emit("more-click");
+};
+const handleItemClick = (emit) => (data) => {
+  emit("item-click", data);
+};
+const visibleChange = (emit) => (status) => {
+  emit("visible-change", status);
+};
+export {
+  computedMaxShowNum,
+  computedMoreText,
+  computedSpacing,
+  computedSuffixIcon,
+  handleItemClick,
+  handleMoreClick,
+  visibleChange
+};

package/action-menu/vue.js

@@ -0,0 +1,38 @@
+import "../chunk-G2ADBYYC.js";
+import {
+  handleMoreClick,
+  handleItemClick,
+  visibleChange,
+  computedMaxShowNum,
+  computedSpacing,
+  computedMoreText,
+  computedSuffixIcon
+} from "./index";
+const api = ["state", "handleMoreClick", "handleItemClick", "visibleChange"];
+const renderless = (props, { computed, reactive }, { emit, t, designConfig }) => {
+  const api2 = {};
+  const state = reactive({
+    visibleOptions: computed(() => props.options.slice(0, state.maxShowNum)),
+    isCardMode: computed(() => props.mode === "card"),
+    moreOptions: computed(() => props.options.slice(state.maxShowNum)),
+    spacing: computed(() => api2.computedSpacing()),
+    maxShowNum: computed(() => api2.computedMaxShowNum()),
+    moreText: computed(() => api2.computedMoreText()),
+    suffixIcon: computed(() => api2.computedSuffixIcon())
+  });
+  Object.assign(api2, {
+    state,
+    handleMoreClick: handleMoreClick(emit),
+    handleItemClick: handleItemClick(emit),
+    visibleChange: visibleChange(emit),
+    computedMaxShowNum: computedMaxShowNum({ props, state }),
+    computedSpacing: computedSpacing({ props, state, designConfig }),
+    computedMoreText: computedMoreText({ props, state, t }),
+    computedSuffixIcon: computedSuffixIcon({ props, state })
+  });
+  return api2;
+};
+export {
+  api,
+  renderless
+};

package/action-sheet/index.js

@@ -0,0 +1,96 @@
+import "../chunk-G2ADBYYC.js";
+const setSheetStyle = ({ state, props }) => () => {
+  if (props.contentPosition) {
+    state.sheetMaskStyle = {
+      "position": "absolute"
+    };
+    state.sheetContentStyle = {
+      "max-height": props.height
+    };
+  } else {
+    state.sheetMaskStyle = {
+      "position": "fixed"
+    };
+    state.sheetContentStyle = {
+      "position": "fixed",
+      "max-height": props.height
+    };
+  }
+  state.contentStyle = props.contentStyle ? props.contentStyle : "";
+};
+const initScrollMenu = ({ state, nextTick, refs, BScroll }) => () => {
+  nextTick(() => {
+    const { scrollMenu } = refs;
+    if (!scrollMenu) {
+      return;
+    }
+    if (!state.scroll) {
+      state.scroll = new BScroll(scrollMenu, {
+        probeType: 3,
+        tap: "tap"
+      });
+    } else {
+      state.scroll.refresh();
+    }
+  });
+};
+const visibleHandle = ({ emit, state }) => () => {
+  state.scroll = null;
+  emit("update:visible", false);
+  emit("close", false);
+};
+const watchVisible = ({ emit, state }) => (bool) => {
+  setTimeout(() => {
+    state.toggle = bool;
+  }, 0);
+  emit("update:visible", bool);
+};
+const menuHandle = ({ emit, state }) => (item) => {
+  state.active = item.id;
+  state.scroll = null;
+  emit("update:visible", false);
+  emit("update:modelValue", item.id);
+  emit("click", item);
+};
+const close = ({ api }) => () => {
+  api.handleClose("close", false);
+};
+const hide = ({ api }) => () => {
+  api.handleClose("hide", false);
+};
+const selectOption = ({ emit, props }) => (option) => {
+  const { valueField } = props;
+  emit("update:visible", false);
+  emit("update:modelValue", option[valueField]);
+  emit("click", option);
+};
+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,
+  selectOption,
+  setSheetStyle,
+  visibleHandle,
+  watchVisible
+};

package/action-sheet/vue.js

@@ -0,0 +1,66 @@
+import "../chunk-G2ADBYYC.js";
+import {
+  setSheetStyle,
+  initScrollMenu,
+  visibleHandle,
+  watchVisible,
+  menuHandle,
+  close,
+  selectOption,
+  confirm,
+  actionSelectOption,
+  hide,
+  handleClose
+} from "./index";
+const api = [
+  "state",
+  "setSheetStyle",
+  "initScrollMenu",
+  "visibleHandle",
+  "watchVisible",
+  "menuHandle",
+  "close",
+  "selectOption",
+  "confirm",
+  "actionSelectOption",
+  "hide"
+];
+const renderless = (props, { reactive, watch }, { emit, nextTick, refs, vm }, { BScroll }) => {
+  const state = reactive({
+    toggle: false,
+    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, state }),
+    menuHandle: menuHandle({ state, emit }),
+    confirm: confirm({ state, api: api2 }),
+    selectOption: selectOption({ emit, props }),
+    actionSelectOption: actionSelectOption({ emit }),
+    hide: hide({ api: api2 }),
+    close: close({ api: api2 }),
+    handleClose: handleClose({ vm, emit, props })
+  });
+  watch(
+    () => props.visible,
+    (value) => {
+      if (value) {
+        api2.setSheetStyle({ state, props });
+        api2.initScrollMenu({ state, nextTick, refs, BScroll });
+      }
+      api2.watchVisible(value);
+    }
+  );
+  watch(() => props.visible, api2.watchVisible, { immediate: true });
+  return api2;
+};
+export {
+  api,
+  renderless
+};

package/alert/index.js

@@ -0,0 +1,83 @@
+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");
+};
+const computedGetIcon = ({ constants, props, designConfig }) => () => {
+  var _a;
+  const designIcon = (_a = designConfig == null ? void 0 : designConfig.icons) == null ? void 0 : _a[props.type];
+  return props.icon || designIcon || constants.ICON_MAP[props.type];
+};
+const computedGetTitle = ({ constants, t, props }) => () => props.title || t(constants.TITLE_MAP[props.type]);
+const handleHeaderClick = ({ state, props, vm }) => () => {
+  if (props.showFoldable) {
+    state.contentVisible = !state.contentVisible;
+  }
+  if (vm.$refs.ContentDescribe) {
+    state.contentDescribeHeight = vm.$refs.ContentDescribe.scrollHeight;
+    if (state.contentDescribeHeight > state.contentMaxHeight) {
+      state.scrollStatus = true;
+    }
+  }
+  if (vm.$refs.ContentDefault) {
+    state.contentDefaultHeight = vm.$refs.ContentDefault.scrollHeight;
+    if (state.contentDefaultHeight > state.contentMaxHeight) {
+      state.scrollStatus = true;
+    }
+  }
+};
+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,
+  handlerTargetNode,
+  watchAutoHide
+};

package/alert/vue.js

@@ -0,0 +1,54 @@
+import "../chunk-G2ADBYYC.js";
+import {
+  computedGetIcon,
+  computedGetTitle,
+  computedStyle,
+  computedClass,
+  handleClose,
+  handleHeaderClick,
+  watchAutoHide,
+  handlerTargetNode
+} from "./index";
+const api = ["handleClose", "state", "handleHeaderClick"];
+const initState = ({ api: api2, computed, constants, reactive }) => {
+  return reactive({
+    show: true,
+    contentVisible: false,
+    contentDescribeHeight: 0,
+    contentDefaultHeight: 0,
+    contentMaxHeight: constants.CONTENT_MAXHEUGHT,
+    scrollStatus: false,
+    getIcon: computed(() => api2.computedGetIcon()),
+    getTitle: computed(() => api2.computedGetTitle()),
+    alertClass: computed(() => api2.computedClass()),
+    alertStyle: computed(() => api2.computedStyle())
+  });
+};
+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 }),
+    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 {
+  api,
+  renderless
+};