@opentinyvue/vue-renderless 3.21.0

package/cascader-mobile/vue.js

@@ -0,0 +1,109 @@
+import "../chunk-G2ADBYYC.js";
+import {
+  close,
+  watchVisible,
+  selectOption,
+  confirm,
+  searchMethod,
+  searchSelectHandler,
+  searchBoxToggle,
+  watchModelValue,
+  isSelected,
+  setLevel,
+  created,
+  loadData,
+  getNodeConfig,
+  initTreeStore,
+  renderSearchOption,
+  computedNavListHandler,
+  disabledNavOption,
+  syncCheckStatus
+} from "./index";
+const api = [
+  "state",
+  "close",
+  "selectOption",
+  "confirm",
+  "searchMethod",
+  "searchSelectHandler",
+  "searchBoxToggle",
+  "setLevel",
+  "loadData",
+  "renderSearchOption",
+  "disabledNavOption",
+  "isSelected"
+];
+const renderless = (props, { computed, reactive, watch }, { emit, constants }) => {
+  const api2 = {};
+  const state = reactive({
+    toggle: false,
+    loading: false,
+    root: null,
+    store: null,
+    navList: [],
+    rootData: [],
+    level: 0,
+    isLeaf: false,
+    search: {
+      show: false,
+      input: "",
+      options: [],
+      filterOptions: []
+    },
+    options: computed(() => {
+      let arr;
+      let list = [state.rootData];
+      state.navList.forEach((option) => {
+        arr = option.childNodes;
+        arr && arr.length && list.push(arr);
+      });
+      return list;
+    }),
+    checkIds: computed(() => state.navList.map((option) => option.data[props.valueField])),
+    checkLabels: computed(() => state.navList.map((option) => option.data[props.textField])),
+    waitLoadList: computed(
+      () => state.navList.filter((option) => option.selfWaitLoad).map((option) => option.data[props.valueField])
+    ),
+    computedNavList: computed(() => api2.computedNavListHandler()),
+    showButton: computed(() => {
+      const len = state.navList.length;
+      if (!props.nodeConfig.checkStrictly) {
+        if (state.level < len - 1) {
+          return false;
+        }
+      }
+      return len && (props.nodeConfig.checkStrictly || state.navList[len - 1].isLeaf);
+    })
+  });
+  Object.assign(api2, {
+    state,
+    confirm: confirm({ state, emit, props, api: api2 }),
+    selectOption: selectOption({ state, emit, props, api: api2 }),
+    close: close({ state, emit }),
+    watchVisible: watchVisible({ emit, state, props, api: api2 }),
+    watchModelValue: watchModelValue({ props, state, emit }),
+    searchMethod: searchMethod({ state, props, api: api2 }),
+    searchSelectHandler: searchSelectHandler({ state, emit, api: api2, props }),
+    searchBoxToggle: searchBoxToggle({ state, props, api: api2 }),
+    syncCheckStatus: syncCheckStatus({ state, props, api: api2 }),
+    setLevel: setLevel({ state, api: api2 }),
+    created: created({ api: api2 }),
+    loadData: loadData({ state, props }),
+    getNodeConfig: getNodeConfig({ state, constants, props }),
+    initTreeStore: initTreeStore({ props, state, api: api2 }),
+    renderSearchOption: renderSearchOption({ props, state, api: api2 }),
+    computedNavListHandler: computedNavListHandler({ props, state, api: api2 }),
+    disabledNavOption: disabledNavOption({ state }),
+    isSelected: isSelected({ state, api: api2, props })
+  });
+  api2.created();
+  api2.syncCheckStatus();
+  watch(() => props.visible, api2.watchVisible);
+  watch(() => props.modelValue, api2.watchModelValue, { immediate: true, deep: true });
+  watch(() => props.data, api2.loadData, { deep: true });
+  return api2;
+};
+export {
+  api,
+  renderless
+};

package/cascader-node/index.js

@@ -0,0 +1,58 @@
+import "../chunk-G2ADBYYC.js";
+const comptCheckPath = ({ api, parent, state }) => () => {
+  if (!state.config.checkStrictly) {
+    return false;
+  }
+  return parent.state.checkedNodePaths.some((checkedPath) => api.isInPath(checkedPath));
+};
+const handleExpand = ({ api, parent, props, state }) => () => {
+  const { multiple, checkStrictly } = state.config;
+  if (!checkStrictly && state.isDisabled || props.node.loading) {
+    return;
+  }
+  if (state.config.lazy && !props.node.loaded) {
+    parent.lazyLoad(props.node, () => {
+      if (!state.isLeaf) {
+        api.handleExpand();
+      }
+      if (multiple && state.isLeaf) {
+        const checked = state.isLeaf ? props.node.checked : false;
+        api.handleMultiCheckChange(Boolean(checked));
+      } else {
+        parent.handleExpand(props.node);
+      }
+    });
+  } else {
+    parent.handleExpand(props.node);
+  }
+};
+const handleCheckChange = ({ api, parent, dispatch, state }) => () => {
+  parent.handleCheckChange(state.value);
+  api.handleExpand();
+  dispatch("TinyCascaderPanel", "close", false);
+};
+const handleMultiCheckChange = ({ parent, props }) => (checked) => {
+  props.node.doCheck(checked);
+  parent.calculateMultiCheckedValue();
+};
+const isInPath = (props) => (pathNodes) => {
+  const selectedPathNode = pathNodes[props.node.level - 1] || {};
+  return selectedPathNode.uid === props.node.uid;
+};
+const handleNodeClick = ({ state, api }) => () => {
+  if (!state.isDisabled) {
+    if (state.isLeaf) {
+      api.handleCheckChange();
+    } else {
+      api.handleExpand();
+    }
+  }
+};
+export {
+  comptCheckPath,
+  handleCheckChange,
+  handleExpand,
+  handleMultiCheckChange,
+  handleNodeClick,
+  isInPath
+};

package/cascader-node/vue.js

@@ -0,0 +1,41 @@
+import "../chunk-G2ADBYYC.js";
+import {
+  comptCheckPath,
+  handleExpand,
+  isInPath,
+  handleCheckChange,
+  handleMultiCheckChange,
+  handleNodeClick
+} from "./index";
+const api = ["state", "handleMultiCheckChange", "handleCheckChange", "handleExpand", "handleNodeClick"];
+const renderless = (props, { computed, reactive, inject }, { dispatch }) => {
+  const parent = inject("panel");
+  const api2 = {};
+  const state = reactive({
+    config: computed(() => parent.state.config),
+    isLeaf: computed(() => props.node.isLeaf),
+    isDisabled: computed(() => props.node.isDisabled),
+    checkedValue: computed(() => parent.state.checkedValue),
+    isChecked: computed(() => props.node.isSameNode(state.checkedValue)),
+    inActivePath: computed(() => api2.isInPath(parent.state.activePath)),
+    inCheckedPath: computed(() => api2.comptCheckPath()),
+    value: computed(() => props.node.getValueByOption()),
+    nodeLabel: computed(() => {
+      return parent.state.renderLabelFn ? parent.state.renderLabelFn({ node: props.node, data: props.node.data }) : props.node.label;
+    })
+  });
+  Object.assign(api2, {
+    state,
+    isInPath: isInPath(props),
+    handleExpand: handleExpand({ api: api2, props, parent, state }),
+    comptCheckPath: comptCheckPath({ api: api2, parent, state }),
+    handleCheckChange: handleCheckChange({ api: api2, parent, dispatch, state }),
+    handleMultiCheckChange: handleMultiCheckChange({ parent, props }),
+    handleNodeClick: handleNodeClick({ state, api: api2 })
+  });
+  return api2;
+};
+export {
+  api,
+  renderless
+};

package/cascader-panel/index.js

@@ -0,0 +1,301 @@
+import "../chunk-G2ADBYYC.js";
+import { isNull } from "../common/type";
+import { isEqual } from "../common/object";
+import { isEmpty } from "../cascader";
+import { KEY_CODE, CASCADER } from "../common";
+import scrollIntoViewCommon from "../common/deps/scroll-into-view";
+const watchCheckedValue = ({ api, emit, props, state }) => (value) => {
+  if (!isEqual(value, props.modelValue)) {
+    state.checkStrictly && api.calculateCheckedNodePaths();
+    emit("update:modelValue", value);
+    emit("change", value);
+  }
+};
+const initStore = ({ api, props, state, Store }) => () => {
+  if (state.config.lazy && isEmpty(props.options)) {
+    api.lazyLoad();
+  } else {
+    state.store = new Store(props.options, state.config);
+    state.menus = [state.store.getNodes()];
+    api.syncMenuState();
+  }
+};
+const syncCheckedValue = ({ api, props, state }) => () => {
+  if (!isEqual(props.modelValue, state.checkedValue)) {
+    state.checkedValue = props.modelValue;
+    api.syncMenuState();
+  }
+};
+const syncMenuState = ({ api, nextTick, state }) => () => {
+  api.syncActivePath();
+  state.multiple && api.syncMultiCheckState();
+  state.checkStrictly && api.calculateCheckedNodePaths();
+  nextTick(() => api.scrollIntoView);
+};
+const syncMultiCheckState = ({ api, state }) => () => {
+  const nodes = api.getFlattedNodes(state.leafOnly);
+  nodes.forEach((node) => {
+    if (state.checkedValue) {
+      node.syncCheckState(state.checkedValue);
+    }
+  });
+};
+const syncActivePath = ({ api, state }) => () => {
+  if (!isEmpty(state.activePath)) {
+    const nodes = state.activePath.map((node) => api.getNodeByValue(node.getValue())).filter((node) => node);
+    if (isNull(nodes[0])) {
+      state.activePath = [];
+    } else {
+      api.expandNodes(nodes);
+    }
+  } else if (!isEmpty(state.checkedValue)) {
+    const value = state.multiple ? state.checkedValue[0] : state.checkedValue;
+    const checkedNode = api.getNodeByValue(value) || {};
+    const nodes = (checkedNode.pathNodes || []).slice(0, -1);
+    api.expandNodes(nodes);
+  } else {
+    state.activePath = [];
+    state.menus = [state.store.getNodes()];
+  }
+};
+const expandNodes = (api) => (nodes) => nodes.forEach((node) => api.handleExpand(node, true));
+const coerceTruthyValueToArray = (val) => {
+  if (Array.isArray(val)) {
+    return val;
+  } else if (val) {
+    return [val];
+  }
+  return [];
+};
+const calculateCheckedNodePaths = ({ api, state }) => () => {
+  const checkedValues = state.multiple ? coerceTruthyValueToArray(state.checkedValue) : [state.checkedValue];
+  state.checkedNodePaths = checkedValues.map((v) => {
+    const checkedNode = api.getNodeByValue(v);
+    return checkedNode ? checkedNode.pathNodes : [];
+  });
+};
+const focusNode = (api) => (el) => {
+  if (!el) {
+    return;
+  }
+  el.focus();
+  !api.isLeaf(el) && el.click();
+};
+const getMenuIndex = () => (el) => {
+  if (!el) {
+    return;
+  }
+  const pieces = el.id.split("-");
+  return Number(pieces[pieces.length - 2]);
+};
+const checkNode = (api) => (el) => {
+  if (!el) {
+    return;
+  }
+  const input = el.querySelector("input");
+  if (input) {
+    input.click();
+  } else if (api.isLeaf(el)) {
+    el.click();
+  }
+};
+const handleKeyDown = ({ api, emit, menus }) => (event) => {
+  const { target, keyCode } = event;
+  if (keyCode === KEY_CODE.ArrowUp) {
+    const prev = getSibling(target, -1);
+    api.focusNode(prev);
+  } else if (keyCode === KEY_CODE.ArrowDown) {
+    const next = getSibling(target, 1);
+    api.focusNode(next);
+  } else if (keyCode === KEY_CODE.ArrowLeft) {
+    const preMenu = menus[Number(api.getMenuIndex(target)) - 1];
+    if (preMenu) {
+      const expandedNode = preMenu.$el.querySelector(CASCADER.CascaderNodeExpand);
+      api.focusNode(expandedNode);
+    }
+  } else if (keyCode === KEY_CODE.ArrowRight) {
+    const nextMenu = menus[Number(api.getMenuIndex(target)) + 1];
+    if (nextMenu) {
+      const firstNode = nextMenu.$el.querySelector(CASCADER.CascaderNodeTab);
+      api.focusNode(firstNode);
+    }
+  } else if (keyCode === KEY_CODE.Enter) {
+    api.checkNode(target);
+  } else if (~[KEY_CODE.Escape, KEY_CODE.Tab].indexOf(keyCode)) {
+    emit("close");
+  }
+};
+const handleExpand = ({ emit, state }) => (node, silent) => {
+  const { level } = node;
+  const path = state.activePath.slice(0, level - 1);
+  const menus = state.menus.slice(0, level);
+  if (!node.isLeaf) {
+    path.push(node);
+    menus.push(node.children);
+  }
+  state.activePath = path;
+  state.menus = menus;
+  if (!silent) {
+    const pathValues = path.map((node2) => node2.getValue());
+    emit("active-item-change", pathValues);
+    emit("expand-change", pathValues);
+  }
+};
+const handleCheckChange = (state) => (value) => {
+  state.checkedValue = value;
+};
+const lazyLoad = ({
+  api,
+  $parent,
+  state,
+  Store,
+  emit
+}) => (currentNode, onFullfiled) => {
+  let node = currentNode;
+  if (!node) {
+    node = node || { root: true, level: 0 };
+    state.store = new Store([], state.config);
+    state.menus = [state.store.getNodes()];
+  }
+  node.loading = true;
+  const afterLoad = (dataList) => {
+    const parent = node.root ? null : node;
+    dataList && dataList.length && state.store.appendNodes(dataList, parent);
+    node.loading = false;
+    node.loaded = true;
+    emit("load-data", dataList);
+    if (Array.isArray(state.checkedValue)) {
+      const nodeValue = state.checkedValue[state.loadCount++];
+      const valueKey = state.config.value;
+      const leafKey = state.config.leaf;
+      if (Array.isArray(dataList) && dataList.filter((item) => item[valueKey] === nodeValue).length > 0) {
+        const checkedNode = state.store.getNodeByValue(nodeValue);
+        if (!(checkedNode == null ? void 0 : checkedNode.data[leafKey])) {
+          api.lazyLoad(checkedNode, () => {
+            api.handleExpand(checkedNode);
+          });
+        }
+        if ($parent.computePresentText && state.loadCount === state.checkedValue.length) {
+          $parent.computePresentText();
+        }
+      }
+    }
+    onFullfiled && onFullfiled(dataList);
+  };
+  state.config.lazyLoad(node, afterLoad);
+};
+const calculateMultiCheckedValue = ({ api, state }) => () => {
+  state.checkedValue = api.getCheckedNodes(state.leafOnly).map((node) => node.getValueByOption());
+};
+const scrollIntoView = ({ menus }) => () => {
+  menus.forEach((menu) => {
+    const menuElement = menu.$el;
+    if (menuElement) {
+      const container = menuElement.querySelector(CASCADER.ScrollWrap);
+      const activeNode = menuElement.querySelector(CASCADER.CascaderActice) || menuElement.querySelector(CASCADER.ActivePath);
+      scrollIntoViewCommon(container, activeNode);
+    }
+  });
+};
+const getNodeByValue = (state) => (val) => state.store.getNodeByValue(val);
+const getFlattedNodes = (state) => (leafOnly) => {
+  const cached = !state.config.lazy;
+  return state.store.getFlattedNodes(leafOnly, cached);
+};
+const getCheckedNodes = ({ api, state }) => (leafOnly, cascaderCheckedValue) => {
+  const isCascaderChecked = (str, checkedValue) => {
+    let flag = true;
+    if (!state.multiple || !checkedValue) {
+      return flag;
+    }
+    flag = false;
+    if (!Array.isArray(checkedValue)) {
+      return flag;
+    }
+    for (let i = 0; i < checkedValue.length; i++) {
+      if (Array.isArray(checkedValue[i])) {
+        if (checkedValue[i].length) {
+          flag = checkedValue[i][checkedValue[i].length - 1] === str;
+        }
+      } else {
+        flag = checkedValue[i] === str;
+      }
+      if (flag) {
+        break;
+      }
+    }
+    return flag;
+  };
+  if (state.multiple) {
+    const nodes = api.getFlattedNodes(leafOnly);
+    return nodes.filter((node2) => node2.checked && isCascaderChecked(node2.value, cascaderCheckedValue));
+  }
+  const node = api.getNodeByValue(cascaderCheckedValue || state.checkedValue);
+  return isEmpty(state.checkedValue) || !node ? [] : [node];
+};
+const clearCheckedNodes = ({ api, state }) => () => {
+  const { multiple, emitPath } = state.config;
+  if (multiple) {
+    api.getCheckedNodes(state.leafOnly).filter((node) => !node.isDisabled).forEach((node) => node.doCheck(false));
+    api.calculateMultiCheckedValue();
+  } else {
+    state.checkedValue = emitPath ? [] : null;
+  }
+};
+const isLeaf = () => (el) => !el.getAttribute("data-owns");
+const getSibling = (el, distance) => {
+  const { parentNode } = el;
+  if (parentNode) {
+    const siblings = parentNode.querySelectorAll(CASCADER.CascaderNodeTab);
+    const index = Array.prototype.indexOf.call(siblings, el);
+    return siblings[index + distance] || null;
+  }
+  return null;
+};
+const valueEquals = (a, b) => {
+  if (a === b) {
+    return true;
+  }
+  if (!Array.isArray(b)) {
+    return false;
+  }
+  if (!Array.isArray(a)) {
+    return false;
+  }
+  if (a.length !== b.length) {
+    return false;
+  }
+  for (let i = 0, len = a.length; i !== len; ++i) {
+    if (a[i] !== b[i]) {
+      return false;
+    }
+  }
+  return true;
+};
+export {
+  calculateCheckedNodePaths,
+  calculateMultiCheckedValue,
+  checkNode,
+  clearCheckedNodes,
+  coerceTruthyValueToArray,
+  expandNodes,
+  focusNode,
+  getCheckedNodes,
+  getFlattedNodes,
+  getMenuIndex,
+  getNodeByValue,
+  getSibling,
+  handleCheckChange,
+  handleExpand,
+  handleKeyDown,
+  initStore,
+  isLeaf,
+  lazyLoad,
+  scrollIntoView,
+  syncActivePath,
+  syncCheckedValue,
+  syncMenuState,
+  syncMultiCheckState,
+  valueEquals,
+  watchCheckedValue
+};

package/cascader-panel/node.js

@@ -0,0 +1,136 @@
+import "../chunk-G2ADBYYC.js";
+import { isEqual } from "../common/object";
+import { capitalize } from "../common/string";
+import { isNull } from "../common/type";
+let uid = 0;
+class Node {
+  constructor(data, config, parentNode) {
+    Object.assign(this, { data, config, uid: uid++ });
+    this.parent = parentNode || null;
+    this.level = !this.parent ? 1 : this.parent.level + 1;
+    this.initState();
+    this.initChildren();
+  }
+  initState() {
+    const { value, label } = this.config;
+    this.value = this.data[value];
+    this.label = String(this.data[label]);
+    this.pathNodes = this.calculatePathNodes();
+    this.path = this.pathNodes.map((node) => node.value);
+    this.pathLabels = this.pathNodes.map((node) => node.label);
+    Object.assign(this, { loading: false, loaded: false });
+  }
+  initChildren() {
+    const { config } = this;
+    const childrenKey = config.children;
+    const childrenData = this.data[childrenKey];
+    this.hasChildren = Array.isArray(childrenData);
+    this.children = (childrenData || []).map((child) => new Node(child, config, this));
+  }
+  get isLeaf() {
+    const { data, loaded, hasChildren, children, config } = this;
+    const { lazy, leaf } = config;
+    if (lazy) {
+      const leafValue = data[leaf];
+      const isLeaf = !isNull(leafValue) ? leafValue : loaded ? !children.length : false;
+      this.hasChildren = !isLeaf;
+      return Boolean(isLeaf);
+    }
+    return !hasChildren;
+  }
+  /**
+   * 当前节点是否被disable
+   */
+  get isDisabled() {
+    const { data, parent, config } = this;
+    const { checkStrictly, disabled } = config;
+    const disabledKey = disabled;
+    return Boolean(data[disabledKey] || !checkStrictly && parent && parent.isDisabled);
+  }
+  calculatePathNodes() {
+    const nodes = [this];
+    let parentNode = this.parent;
+    while (parentNode) {
+      nodes.unshift(parentNode);
+      parentNode = parentNode.parent;
+    }
+    return nodes;
+  }
+  getValue() {
+    return this.value;
+  }
+  getPath() {
+    return this.path;
+  }
+  getValueByOption() {
+    return this.config.emitPath ? this.getPath() : this.getValue();
+  }
+  /**
+   *
+   * @param allLevels 输入框中是否显示选中值的完整路径
+   * @param separator 分割符
+   * @returns 选中值的路径
+   */
+  getText(allLevels, separator) {
+    return allLevels ? this.pathLabels.join(separator) : this.label;
+  }
+  isSameNode(checkedValue) {
+    const value = this.getValueByOption();
+    const isMultiple = this.config.multiple && Array.isArray(checkedValue);
+    return isMultiple ? checkedValue.some((val) => isEqual(val, value)) : isEqual(checkedValue, value);
+  }
+  emit(eventName, ...args) {
+    const { parent } = this;
+    const handlerName = `onChild${capitalize(eventName)}`;
+    if (parent) {
+      parent[handlerName] && parent[handlerName](...args);
+      parent.emit(eventName, ...args);
+    }
+  }
+  broadcast(eventName, ...args) {
+    const handlerName = `onParent${capitalize(eventName)}`;
+    this.children.forEach((child) => {
+      if (child) {
+        child.broadcast(eventName, ...args);
+        child[handlerName] && child[handlerName](...args);
+      }
+    });
+  }
+  onParentCheck(checked) {
+    !this.isDisabled && this.setCheckState(checked);
+  }
+  onChildCheck() {
+    const { children } = this;
+    const validChildren = children.filter((child) => !child.isDisabled);
+    const checked = validChildren.length ? validChildren.every((child) => child.checked) : false;
+    this.setCheckState(checked);
+  }
+  syncCheckState(checkedValue) {
+    const value = this.getValueByOption();
+    const checked = this.isSameNode(checkedValue);
+    this.doCheck(checked);
+  }
+  setCheckState(checked) {
+    const totalNum = this.children.length;
+    const checkedNum = this.children.reduce((prevChild, nextChild) => {
+      const num = nextChild.checked ? 1 : nextChild.indeterminate ? 0.5 : 0;
+      return prevChild + num;
+    }, 0);
+    this.checked = checked;
+    this.indeterminate = checkedNum !== totalNum && checkedNum > 0;
+  }
+  doCheck(isChecked) {
+    if (this.checked !== isChecked) {
+      if (this.config.checkStrictly) {
+        this.checked = isChecked;
+      } else {
+        this.broadcast("check", isChecked);
+        this.setCheckState(isChecked);
+        this.emit("check");
+      }
+    }
+  }
+}
+export {
+  Node as default
+};