@opentinyvue/vue-renderless 3.21.0

package/ip-address/vue.js

@@ -0,0 +1,143 @@
+import {
+  __spreadProps,
+  __spreadValues
+} from "../chunk-G2ADBYYC.js";
+import {
+  isIP6,
+  isIP4,
+  ipValidator,
+  getCursorPosition,
+  getValue,
+  setValue,
+  focus,
+  select,
+  inputEvent,
+  change,
+  blur,
+  keyup,
+  keydown
+} from "./index";
+import { KEY_CODE } from "../common";
+const api = ["state", "focus", "inputEvent", "blur", "keyup", "keydown", "change", "select"];
+const initState = ({
+  reactive,
+  computed,
+  handleValue,
+  parent,
+  props
+}) => {
+  const state = reactive(__spreadProps(__spreadValues({}, handleValue.state), {
+    active: false,
+    isSelected: false,
+    filterKeyCodes: [
+      KEY_CODE.AtMark,
+      KEY_CODE.Backspace,
+      KEY_CODE.ArrowLeft,
+      KEY_CODE.ArrowRight,
+      KEY_CODE.Tab,
+      KEY_CODE.Delete
+    ],
+    formDisabled: computed(() => (parent.tinyForm || {}).disabled),
+    disabled: computed(() => props.disabled || state.formDisabled),
+    size: computed(() => props.size)
+  }));
+  return state;
+};
+const initApi = ({
+  state,
+  api: api2,
+  dispatch,
+  handleValue,
+  emit,
+  broadcast,
+  parent,
+  componentName,
+  props,
+  eventName
+}) => {
+  Object.assign(api2, __spreadProps(__spreadValues({}, handleValue.api), {
+    state,
+    dispatch,
+    broadcast,
+    getCursorPosition,
+    focus: focus({ emit, props, parent, state }),
+    select: select({ emit, props, parent, state }),
+    blur: blur({
+      api: api2,
+      componentName,
+      emit,
+      eventName: eventName.blur,
+      props,
+      state
+    }),
+    keyup: keyup({ api: api2, props, parent }),
+    change: change({ api: api2, emit }),
+    keydown: keydown({ api: api2, props, state }),
+    inputEvent: inputEvent({ api: api2, emit, props, componentName, eventName: eventName.change })
+  }));
+};
+const useHandleValue = ({ componentName, dispatch, eventName, props, reactive, toRefs, watch }) => {
+  const state = reactive({
+    address: [],
+    isDel: false
+  });
+  const api2 = {
+    isIP6,
+    isIP4
+  };
+  api2.getValue = getValue({ api: api2, props, state });
+  api2.setValue = setValue({ api: api2, props, state });
+  api2.ipValidator = ipValidator({ api: api2, props });
+  watch(
+    () => props.modelValue,
+    (value) => {
+      var _a;
+      if (!state.isDel) {
+        (_a = api2 == null ? void 0 : api2.setValue) == null ? void 0 : _a.call(api2, value);
+        dispatch(componentName, eventName, [value]);
+      }
+    },
+    { immediate: true }
+  );
+  return {
+    state: toRefs(state),
+    api: api2
+  };
+};
+const renderless = (props, { reactive, toRefs, watch, inject, computed }, { emit, parent, broadcast, dispatch }) => {
+  const api2 = {};
+  const componentName = "FormItem";
+  const eventName = {
+    change: "form.change",
+    blur: "form.blur"
+  };
+  parent.tinyForm = parent.tinyForm || inject("form", null);
+  const handleValue = useHandleValue({
+    componentName,
+    dispatch,
+    eventName: eventName.change,
+    props,
+    reactive,
+    toRefs,
+    watch
+  });
+  const state = initState({ reactive, computed, handleValue, parent, props });
+  initApi({
+    api: api2,
+    state,
+    handleValue,
+    dispatch,
+    broadcast,
+    emit,
+    props,
+    parent,
+    componentName,
+    eventName
+  });
+  return api2;
+};
+export {
+  api,
+  renderless,
+  useHandleValue
+};

package/label/index.js

@@ -0,0 +1,56 @@
+import "../chunk-G2ADBYYC.js";
+const prefix = "tiny-mobile-label-";
+function numFormat(num, decimal) {
+  let str = "";
+  str = (Math.round(num * 100) / 100).toFixed(decimal).toString().replace(/(\d)(?=(\d{3})+\.)/g, function($0, $1) {
+    return $1 + ",";
+  });
+  return str;
+}
+function handleNumberLabel(label, decimal) {
+  let val = label;
+  const reg1 = /[^(\-|\+)?\d+(\.\d+)?$]/g;
+  const reg2 = /0*([1-9]\d*|0\.\d+)/;
+  val = val.replace(reg1, "").replace(reg2, "$1");
+  let arr = val.split(".");
+  let numStr = "";
+  for (let i = 0; i < arr.length; i++) {
+    if (i === arr.length - 1 && arr.length > 1) {
+      numStr += ".";
+    }
+    numStr += arr[i];
+  }
+  numStr = numFormat(numStr, decimal);
+  numStr = numStr.replace(/\d+/, (s) => {
+    return s.replace(/(\d)(?=(\d{3})+$)/g, "$1,");
+  });
+  return numStr;
+}
+const handleClick = ({ emit, state }) => () => {
+  emit("click", state.label);
+};
+const computeLabel = (props) => () => {
+  let label = props.label;
+  if (props.type === "number") {
+    label = handleNumberLabel(props.label, props.decimal);
+  }
+  if (props.limit !== 0 && label.length > props.limit) {
+    return label.slice(0, props.limit);
+  }
+  return label;
+};
+const computeLabelClass = (props) => () => {
+  return [
+    `${prefix}${props.size}`,
+    `${prefix}${props.color}`,
+    `${prefix}${props.position}`,
+    props.wholeline || props.ellipsis === 1 || props.ellipsis === 2 || props.ellipsis === 3 ? `${prefix}wholeline` : "",
+    props.ellipsis > 0 && props.ellipsis < 4 ? `${prefix}ellipsis${props.ellipsis}` : "",
+    props.bold ? `${prefix}bold` : ""
+  ];
+};
+export {
+  computeLabel,
+  computeLabelClass,
+  handleClick
+};

package/label/vue.js

@@ -0,0 +1,26 @@
+import "../chunk-G2ADBYYC.js";
+import { handleClick, computeLabel, computeLabelClass } from "./index";
+const api = ["state", "handleClick", "computeLabel", "computeLabelStyle", "computeLabelClass"];
+const renderless = (props, { computed, onBeforeUnmount, reactive, watch, inject }, { emit, parent }) => {
+  parent.tinyForm = parent.tinyForm || inject("form", null);
+  const state = reactive({
+    label: computed(() => api2.computeLabel()),
+    type: props.type,
+    color: props.color,
+    size: props.size,
+    labelClass: computed(() => api2.computeLabelClass()),
+    isRequired: props.isRequired
+  });
+  const api2 = {
+    state,
+    handleClick: handleClick({ emit, state }),
+    computeLabel: computeLabel(props),
+    // computeLabelStyle: computeLabelStyle(props, state),
+    computeLabelClass: computeLabelClass(props)
+  };
+  return api2;
+};
+export {
+  api,
+  renderless
+};

package/layout/vue.js

@@ -0,0 +1,7 @@
+import "../chunk-G2ADBYYC.js";
+const api = [];
+const renderless = () => ({});
+export {
+  api,
+  renderless
+};

package/link/index.js

@@ -0,0 +1,9 @@
+import "../chunk-G2ADBYYC.js";
+const handleClick = ({ emit, props, state }) => (event) => {
+  if (!state.disabled && !props.href) {
+    emit("click", event);
+  }
+};
+export {
+  handleClick
+};

package/link/vue.js

@@ -0,0 +1,20 @@
+import "../chunk-G2ADBYYC.js";
+import { xss } from "@opentiny/utils";
+import { handleClick } from "./index";
+const api = ["state", "handleClick"];
+const renderless = (props, { inject, reactive, computed }, { emit, parent }) => {
+  parent.tinyForm = parent.tinyForm || inject("form", null);
+  const state = reactive({
+    formDisabled: computed(() => (parent.tinyForm || {}).disabled),
+    disabled: computed(() => props.disabled || state.formDisabled),
+    href: computed(() => xss.filterUrl(props.href))
+  });
+  return {
+    state,
+    handleClick: handleClick({ emit, props, state })
+  };
+};
+export {
+  api,
+  renderless
+};

package/link-menu/index.js

@@ -0,0 +1,104 @@
+import {
+  __spreadProps,
+  __spreadValues
+} from "../chunk-G2ADBYYC.js";
+import { mapTree } from "../grid/static";
+import { copyArray } from "../common/object";
+const dialogTitle = ({ constants, props, t }) => () => props.title || t(constants.DIALOG_TITLE);
+const showDialog = (state) => () => state.boxVisibility = true;
+const hideDialog = ({ api, state, vm, props }) => () => {
+  if (!props.keepSelectedNodes) {
+    state.currentCheckNode.forEach((item) => {
+      const isNode = state.listItem.filter((data) => data.id === item.id);
+      if (isNode.length) {
+        vm.$refs.tree.setChecked(item, true, true);
+        if (item.disabled !== void 0) {
+          item.disabled = false;
+        }
+      } else {
+        vm.$refs.tree.setChecked(item, false, true);
+      }
+    });
+    state.getNodeValue = copyArray(state.listItem);
+    if (state.getNodeValue.length === props.maxItem) {
+      api.disabledTreeNode(state.getNodeValue, true);
+    } else if (state.getNodeValue.length < props.maxItem) {
+      api.disabledTreeNode(state.getNodeValue, false);
+    }
+    state.currentCheckNode = [];
+  }
+  state.boxVisibility = false;
+};
+const sureNodevalue = (state) => () => {
+  state.listItem = state.getNodeValue.slice();
+  state.currentCheckNode = [];
+  state.boxVisibility = false;
+};
+const filterNode = () => (value, data) => data.label.includes(value);
+const getValue = ({ api, props, state }) => (value) => {
+  if (!props.keepSelectedNodes) {
+    state.currentCheckNode.push(value);
+  }
+  let index = -1;
+  state.getNodeValue.forEach((data, indexx) => {
+    if (data.id === value.id) {
+      index = indexx;
+    }
+  });
+  index !== -1 ? state.getNodeValue.splice(index, 1) : state.getNodeValue.push(value);
+  if (state.getNodeValue.length === props.maxItem) {
+    api.disabledTreeNode(state.getNodeValue, true);
+  } else if (state.getNodeValue.length < props.maxItem) {
+    api.disabledTreeNode(state.getNodeValue, false);
+  }
+};
+const disabledTreeNode = (state) => (arr, isDisabled) => {
+  state.datas.forEach((item) => {
+    if (!item.children) {
+      const index = arr.filter((data) => data.id === item.id);
+      if (!index.length) {
+        item.disabled = isDisabled;
+      }
+    } else {
+      item.children.forEach((item2) => {
+        const index = arr.filter((data) => data.id === item2.id);
+        if (!index.length) {
+          item2.disabled = isDisabled;
+        }
+      });
+    }
+  });
+};
+const initData = ({ state, props, service, api }) => () => {
+  let data = props.data;
+  if (!data && typeof service.getMenuDataSync === "function") {
+    const menuData = service.getMenuDataSync();
+    data = api.setMenuKey({ newData: [], menuData });
+  }
+  state.datas = mapTree(data || [], (item) => __spreadProps(__spreadValues({}, item), { disabled: false }));
+};
+const disabledParentNode = (state) => () => {
+  state.datas.forEach((item) => {
+    if (item.children) {
+      item.disabled = true;
+    }
+  });
+};
+const initService = ({ props, service }) => {
+  const $service = service || { base: {} };
+  return {
+    getMenuDataSync: props.getMenuDataSync || $service.base.getMenuDataSync
+  };
+};
+export {
+  dialogTitle,
+  disabledParentNode,
+  disabledTreeNode,
+  filterNode,
+  getValue,
+  hideDialog,
+  initData,
+  initService,
+  showDialog,
+  sureNodevalue
+};

package/link-menu/vue.js

@@ -0,0 +1,95 @@
+import "../chunk-G2ADBYYC.js";
+import {
+  initData,
+  dialogTitle,
+  disabledParentNode,
+  filterNode,
+  getValue,
+  hideDialog,
+  showDialog,
+  sureNodevalue,
+  disabledTreeNode,
+  initService
+} from "./index";
+import { copyArray } from "../common/object";
+import { setMenuKey } from "../tree-menu";
+const api = [
+  "state",
+  "initData",
+  "filterNode",
+  "getValue",
+  "hideDialog",
+  "setMenuKey",
+  "showDialog",
+  "sureNodevalue"
+];
+const initState = ({ reactive, computed, api: api2 }) => {
+  const state = reactive({
+    filterText: "",
+    datas: [],
+    disabled: false,
+    alertShow: false,
+    boxVisibility: false,
+    listItem: [],
+    getNodeValue: [],
+    currentCheckNode: [],
+    titles: computed(() => api2.dialogTitle())
+  });
+  return state;
+};
+const initWatch = ({ watch, state, props, nextTick, vm }) => {
+  watch(
+    () => state.filterText,
+    (value) => nextTick(() => vm.$refs.tree.filter(value))
+  );
+  watch(
+    () => props.data,
+    (value) => {
+      if (value) {
+        const changeData = copyArray(value);
+        changeData.forEach((item) => {
+          if (!item.children) {
+            item.disabled = false;
+          } else {
+            item.children.forEach((item2) => {
+              item2.disabled = false;
+            });
+          }
+        });
+        state.datas = changeData;
+      }
+    },
+    { immediate: true }
+  );
+};
+const initApi = ({ api: api2, state, constants, props, t, service, vm }) => {
+  Object.assign(api2, {
+    state,
+    filterNode: filterNode(),
+    showDialog: showDialog(state),
+    sureNodevalue: sureNodevalue(state),
+    disabledTreeNode: disabledTreeNode(state),
+    disabledParentNode: disabledParentNode(state),
+    dialogTitle: dialogTitle({ constants, props, t }),
+    setMenuKey: setMenuKey(api2),
+    getValue: getValue({ api: api2, state, props }),
+    initData: initData({ state, props, service, api: api2 }),
+    hideDialog: hideDialog({ api: api2, state, vm, props })
+  });
+};
+const renderless = (props, { computed, onMounted, reactive, watch }, { t, vm, service, constants, nextTick }) => {
+  service = initService({ props, service });
+  const api2 = {};
+  const state = initState({ reactive, computed, api: api2 });
+  initWatch({ watch, state, props, nextTick, vm });
+  onMounted(() => {
+    api2.initData();
+    api2.disabledParentNode(state);
+  });
+  initApi({ api: api2, state, constants, props, t, service, vm });
+  return api2;
+};
+export {
+  api,
+  renderless
+};

package/list/index.js

@@ -0,0 +1,13 @@
+import "../chunk-G2ADBYYC.js";
+const clickList = ({ emit, props }) => () => {
+  const list = {
+    id: props.id,
+    content: props.content,
+    subtext: props.subText,
+    contentdes: props.contentDes
+  };
+  emit("click", list);
+};
+export {
+  clickList
+};

package/list/vue.js

@@ -0,0 +1,17 @@
+import "../chunk-G2ADBYYC.js";
+import { clickList } from "./index";
+const api = ["state", "clickList"];
+const renderless = (props, { reactive }, { emit }) => {
+  const state = reactive({
+    test: "1"
+  });
+  const api2 = {
+    state,
+    clickList: clickList({ emit, props })
+  };
+  return api2;
+};
+export {
+  api,
+  renderless
+};

package/load-list/index.js

@@ -0,0 +1,43 @@
+import "../chunk-G2ADBYYC.js";
+import { isDisplayNone } from "../common/deps/dom";
+const clickList = ({ emit, props }) => () => {
+  const list = {
+    id: props.id,
+    content: props.content,
+    subtext: props.subText,
+    contentdes: props.contentDes
+  };
+  emit("click", list);
+};
+const check = ({ api, emit, props, state, vm }) => () => {
+  if (state.loading || props.finished || props.disabled || props.error || // skip check when inside an inactive tab
+  state.tabStatus === false) {
+    return;
+  }
+  const offset = +props.offset;
+  const scrollParentRect = api.useRect(state.scroller);
+  if (!scrollParentRect.height || isDisplayNone(vm.$el)) {
+    return;
+  }
+  let isReachEdge = false;
+  const placeholderRect = api.useRect(vm.$refs.placeholder);
+  if (props.direction === "up") {
+    isReachEdge = scrollParentRect.top - placeholderRect.top <= offset;
+  } else {
+    isReachEdge = placeholderRect.bottom - scrollParentRect.bottom <= offset;
+  }
+  if (isReachEdge) {
+    state.loading = true;
+    emit("update:loading", true);
+    emit("load");
+  }
+};
+const clickErrorText = ({ api, emit }) => () => {
+  emit("update:error", false);
+  api.check();
+};
+export {
+  check,
+  clickErrorText,
+  clickList
+};

package/load-list/vue.js

@@ -0,0 +1,69 @@
+import "../chunk-G2ADBYYC.js";
+import { clickList, check, clickErrorText } from "./index";
+import { getScrollParent } from "../common/deps/dom";
+import { useRect } from "../common/deps/useRect";
+import { useEventListener } from "../common/deps/useEventListener";
+import debounce from "../common/deps/debounce";
+const api = ["state", "clickList", "check", "clickErrorText"];
+const renderless = (props, {
+  inject,
+  reactive,
+  computed,
+  onMounted,
+  unref,
+  watch,
+  onUpdated,
+  isRef,
+  onUnmounted,
+  onActivated,
+  onDeactivated,
+  toRef
+}, { emit, vm, nextTick }) => {
+  const api2 = {};
+  const state = reactive({
+    loading: props.loading,
+    tabStatus: inject("TabStatus", null),
+    scrollParent: null,
+    scroller: computed(() => props.scroller || state.scrollParent)
+  });
+  Object.assign(api2, {
+    state,
+    clickList: clickList({ emit, props }),
+    useRect: useRect(unref),
+    check: debounce(+props.delay, check({ api: api2, emit, props, state, vm })),
+    clickErrorText: clickErrorText({ api: api2, emit }),
+    useEventListener: useEventListener({
+      unref,
+      isRef,
+      watch,
+      nextTick,
+      onMounted,
+      onUnmounted,
+      onActivated,
+      onDeactivated
+    })
+  });
+  watch(
+    () => [props.loading, props.finished, props.error],
+    () => api2.check()
+  );
+  watch(
+    () => state.tabStatus,
+    (tabActive) => tabActive && api2.check()
+  );
+  api2.useEventListener("scroll", api2.check, { target: toRef(state, "scroller"), passive: true });
+  onUpdated(() => {
+    state.loading = props.loading;
+  });
+  onMounted(() => {
+    state.scrollParent = getScrollParent(vm.$el);
+    if (props.immediateCheck) {
+      api2.check();
+    }
+  });
+  return api2;
+};
+export {
+  api,
+  renderless
+};

package/loading/index.js

@@ -0,0 +1,30 @@
+import "../chunk-G2ADBYYC.js";
+import afterLeave from "../common/deps/after-leave";
+import { removeClass } from "../common/deps/dom";
+const handleAfterLeave = (emit) => () => {
+  emit("after-leave");
+};
+const setText = (state) => (text) => {
+  state.text = text;
+};
+const close = ({ state, constants, vm }) => () => {
+  afterLeave(
+    vm,
+    () => {
+      const target = state.fullscreen || state.body ? document.body : state.target;
+      if (vm.$el && vm.$el.parentNode) {
+        removeClass(target, constants.PARENT_RELATIVE_CLS);
+        removeClass(target, constants.PARENT_HIDDEN_CLS);
+        vm.$el.parentNode.removeChild(vm.$el);
+      }
+      state.closed = true;
+    },
+    300
+  );
+  state.visible = false;
+};
+export {
+  close,
+  handleAfterLeave,
+  setText
+};

package/loading/vue.js

@@ -0,0 +1,32 @@
+import "../chunk-G2ADBYYC.js";
+import { handleAfterLeave, setText, close } from "./index";
+const api = ["state", "handleAfterLeave", "setText", "close"];
+const renderless = (props, { reactive, computed }, { constants, vm, emit, designConfig }) => {
+  const state = reactive({
+    text: null,
+    spinner: null,
+    visible: false,
+    customClass: "",
+    background: null,
+    fullscreen: true,
+    closed: false,
+    size: "",
+    iconSize: "",
+    loadingImg: computed(() => {
+      var _a;
+      return props.loadingImg || ((_a = designConfig == null ? void 0 : designConfig.props) == null ? void 0 : _a.loadingImg);
+    }),
+    iconStyle: computed(() => state.iconSize ? { width: state.iconSize + "px", height: state.iconSize + "px" } : {})
+  });
+  const api2 = {
+    state,
+    setText: setText(state),
+    handleAfterLeave: handleAfterLeave(emit),
+    close: close({ state, constants, vm })
+  };
+  return api2;
+};
+export {
+  api,
+  renderless
+};