vue-devui 1.0.0-beta.9 → 1.0.0-pre.0

package/accordion/index.es.js

@@ -1,4 +1,6 @@
 var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
@@ -14,7 +16,9 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
-import { defineComponent, toRefs, computed, createVNode, Fragment, mergeProps, resolveComponent, onMounted, watch } from "vue";
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { createVNode, getCurrentInstance, defineComponent, toRefs, inject, computed, Fragment, mergeProps, resolveComponent, isVNode, createTextVNode, provide, onMounted, watch } from "vue";
+import { useRoute } from "vue-router";
 const accordionProps = {
   data: {
     type: Array,
@@ -26,8 +30,8 @@ const accordionProps = {
   disabledKey: { type: String, default: "disabled" },
   activeKey: { type: String, default: "active" },
   openKey: { type: String, default: "open" },
-  menuItemTemplate: { type: String, default: "" },
-  itemTemplate: { type: String, default: "" },
+  menuItemTemplate: { type: Boolean, default: true },
+  itemTemplate: { type: Boolean, default: true },
   menuToggle: {
     type: Function,
     default: null
@@ -43,9 +47,9 @@ const accordionProps = {
   restrictOneOpen: { type: Boolean, default: false },
   autoOpenActiveMenu: { type: Boolean, default: false },
   showNoContent: { type: Boolean, default: true },
-  noContentTemplate: { type: String, default: "" },
-  loadingTemplate: { type: String, default: "" },
-  innerListTemplate: { type: String, default: "" },
+  noContentTemplate: { type: Boolean, default: true },
+  loadingTemplate: { type: Boolean, default: true },
+  innerListTemplate: { type: Boolean, default: true },
   linkType: {
     type: String,
     default: ""
@@ -59,8 +63,43 @@ const accordionProps = {
     default: "normal"
   }
 };
+const OpenIcon = () => {
+  return createVNode("svg", {
+    "width": "1em",
+    "height": "1em",
+    "viewBox": "0 0 16 16",
+    "version": "1.1",
+    "xmlns": "http://www.w3.org/2000/svg",
+    "xmlns:xlink": "http://www.w3.org/1999/xlink"
+  }, [createVNode("g", {
+    "stroke": "none",
+    "stroke-width": "1",
+    "fill": "none",
+    "fill-rule": "evenodd"
+  }, [createVNode("path", {
+    "d": "M12.1464466,6.85355339 L8.35355339,10.6464466 C8.15829124,10.8417088 7.84170876,10.8417088 7.64644661,10.6464466 L3.85355339,6.85355339 C3.65829124,6.65829124 3.65829124,6.34170876 3.85355339,6.14644661 C3.94732158,6.05267842 4.07449854,6 4.20710678,6 L11.7928932,6 C12.0690356,6 12.2928932,6.22385763 12.2928932,6.5 C12.2928932,6.63260824 12.2402148,6.7597852 12.1464466,6.85355339 Z",
+    "fill-rule": "nonzero"
+  }, null)])]);
+};
+const getRootSlots = () => {
+  const rootComponentName = "DAccordion";
+  const getRootComponent = (component) => {
+    if (component && component.type.name === rootComponentName) {
+      return component;
+    }
+    if (component && component.parent) {
+      const parent = component.parent;
+      return getRootComponent(parent);
+    }
+  };
+  const rootComponent = getRootComponent(getCurrentInstance());
+  return rootComponent == null ? void 0 : rootComponent.slots;
+};
 var DAccordionMenu = defineComponent({
   name: "DAccordionMenu",
+  components: {
+    OpenIcon
+  },
   props: __spreadValues({
     item: Object,
     deepth: {
@@ -75,36 +114,367 @@ var DAccordionMenu = defineComponent({
   setup(props) {
     const {
       item,
-      deepth
+      deepth,
+      parent,
+      openKey,
+      activeKey,
+      autoOpenActiveMenu,
+      disabledKey,
+      childrenKey,
+      titleKey,
+      menuItemTemplate
     } = toRefs(props);
-    computed(() => {
-      return keyOpen === void 0 && props.autoOpenActiveMenu ? childActived : keyOpen;
-    });
+    const rootSlots = getRootSlots();
+    const accordionCtx = inject("accordionContext");
+    const parentValue = parent.value;
+    const deepValue = deepth.value;
+    const toggle = (itemEvent) => {
+      accordionCtx.menuToggleFn(itemEvent);
+    };
+    const hasActiveChildren = (item2) => {
+      if (item2[activeKey.value] === true)
+        return true;
+      if (item2[childrenKey.value]) {
+        return hasChildActive(item2[childrenKey.value]);
+      }
+    };
+    const hasChildActive = (arr) => {
+      let flag = false;
+      if (!arr.length)
+        return false;
+      for (let i = 0; i < arr.length; i++) {
+        if (arr[i][activeKey.value] === true) {
+          flag = true;
+          break;
+        }
+        if (arr[i][childrenKey.value]) {
+          flag = hasChildActive(arr[i][childrenKey.value]);
+          if (flag)
+            break;
+        }
+      }
+      return flag;
+    };
     const keyOpen = computed(() => {
-      return item == null ? void 0 : item.value[props.openKey];
+      return item.value && item.value[openKey.value];
+    });
+    const disabled = computed(() => {
+      return item.value && item.value[disabledKey.value];
+    });
+    const title = computed(() => {
+      return item.value && item.value[titleKey.value];
+    });
+    const children = computed(() => {
+      return item.value && item.value[childrenKey.value];
     });
     const childActived = computed(() => {
+      return hasActiveChildren(item.value);
+    });
+    const open = computed(() => {
+      return keyOpen.value === void 0 && autoOpenActiveMenu.value ? childActived.value : keyOpen.value;
     });
     return () => {
+      var _a;
       return createVNode(Fragment, null, [createVNode("div", {
-        "class": ["devui-accordion-item-title", "devui-over-flow-ellipsis", item.value.children ? "open active" : ""],
-        "title": item.value.title
-      }, [item.value.title]), createVNode(AccordionList, {
-        "class": "devui-accordion-submenu devui-accordion-show-animate",
-        "style": "opacity: 1; overflow: hidden;",
-        "deepth": deepth.value + 1,
-        "data": item.value.children || [],
+        "class": ["devui-accordion-item-title", "devui-over-flow-ellipsis", open.value && "open", childActived.value && "active", disabled.value && "disabled"],
+        "title": title.value,
+        "style": {
+          textIndent: deepValue * 20 + "px"
+        },
+        "onClick": (e) => !disabled.value && toggle({
+          item: item.value,
+          open: !open.value,
+          parent: parentValue,
+          event: e
+        })
+      }, [createVNode("div", {
+        "class": ["devui-accordion-splitter", deepValue === 0 && "devui-parent-list"],
+        "style": {
+          left: deepValue * 20 + 10 + "px"
+        }
+      }, null), (!rootSlots.menuItemTemplate || menuItemTemplate.value === false) && createVNode(Fragment, null, [title.value]), rootSlots.menuItemTemplate && menuItemTemplate.value !== false && ((_a = rootSlots.menuItemTemplate) == null ? void 0 : _a.call(rootSlots, {
+        parent: parentValue,
+        deepth: deepValue,
+        item: item.value
+      })), createVNode("span", {
+        "class": "devui-accordion-open-icon"
+      }, [createVNode(OpenIcon, null, null)])]), createVNode("div", {
+        "class": [!open.value && "devui-accordion-menu-hidden", "devui-accordion-submenu", "devui-accordion-show-animate"]
+      }, [createVNode(AccordionList, mergeProps(props, {
+        "deepth": deepValue + 1,
+        "data": children.value || [],
         "parent": item.value
-      }, null)]);
+      }), null)])]);
+    };
+  }
+});
+var DAccordionItem = defineComponent({
+  name: "DAccordionItem",
+  props: __spreadValues({
+    item: Object,
+    deepth: {
+      type: Number,
+      default: 0
+    },
+    parent: {
+      type: Object,
+      default: null
+    }
+  }, accordionProps),
+  setup(props) {
+    const {
+      item,
+      deepth,
+      parent,
+      titleKey,
+      activeKey,
+      disabledKey,
+      itemTemplate
+    } = toRefs(props);
+    const rootSlots = getRootSlots();
+    const accordionCtx = inject("accordionContext");
+    const parentValue = parent.value;
+    const deepValue = deepth.value;
+    const disabled = computed(() => {
+      return item.value && item.value[disabledKey.value];
+    });
+    const title = computed(() => {
+      return item.value && item.value[titleKey.value];
+    });
+    const active = computed(() => {
+      return item.value && item.value[activeKey.value];
+    });
+    const childActived = computed(() => {
+      return active.value;
+    });
+    const itemClick = (itemEvent) => {
+      if (item.value && !disabled.value) {
+        accordionCtx.itemClickFn(itemEvent);
+      }
+    };
+    return () => {
+      var _a;
+      return createVNode(Fragment, null, [createVNode("div", {
+        "class": ["devui-accordion-item-title", "devui-over-flow-ellipsis", childActived.value && "active", disabled.value && "disabled"],
+        "title": title.value,
+        "style": {
+          textIndent: deepValue * 20 + "px"
+        },
+        "onClick": (e) => itemClick({
+          item: item.value,
+          parent: parentValue,
+          event: e
+        })
+      }, [createVNode("div", {
+        "class": ["devui-accordion-splitter", deepValue === 0 && "devui-parent-list"],
+        "style": {
+          left: deepValue * 20 + 10 + "px"
+        }
+      }, null), (!rootSlots.itemTemplate || itemTemplate.value === false) && createVNode(Fragment, null, [title.value]), rootSlots.itemTemplate && itemTemplate.value !== false && ((_a = rootSlots.itemTemplate) == null ? void 0 : _a.call(rootSlots, {
+        parent: parentValue,
+        deepth: deepValue,
+        item: item.value
+      }))])]);
+    };
+  }
+});
+var DAccordionItemHreflink = defineComponent({
+  name: "DAccordionItemHreflink",
+  component: {
+    DAccordionItem
+  },
+  props: __spreadValues({
+    item: Object,
+    deepth: {
+      type: Number,
+      default: 0
+    },
+    parent: {
+      type: Object,
+      default: null
+    }
+  }, accordionProps),
+  setup(props) {
+    const {
+      item,
+      deepth,
+      parent,
+      titleKey,
+      linkKey,
+      linkTargetKey,
+      linkDefaultTarget,
+      disabledKey,
+      itemTemplate
+    } = toRefs(props);
+    const rootSlots = getRootSlots();
+    const accordionCtx = inject("accordionContext");
+    const title = computed(() => {
+      return item.value && item.value[titleKey.value];
+    });
+    const link = computed(() => {
+      return item.value && item.value[linkKey.value];
+    });
+    const target = computed(() => {
+      return item.value && (item.value[linkTargetKey.value] || linkDefaultTarget.value);
+    });
+    const disabled = computed(() => {
+      return item.value && item.value[disabledKey.value];
+    });
+    const parentValue = parent.value;
+    const deepValue = deepth.value;
+    const linkItemClickFn = (itemEvent) => {
+      if (item.value && !disabled.value) {
+        accordionCtx.itemClickFn(itemEvent);
+      }
+    };
+    const renderContent = () => {
+      var _a;
+      return createVNode(Fragment, null, [createVNode("div", {
+        "class": ["devui-accordion-splitter", deepValue === 0 && "devui-parent-list"],
+        "style": {
+          left: deepValue * 20 + 10 + "px"
+        }
+      }, null), (!rootSlots.itemTemplate || itemTemplate.value === false) && createVNode(Fragment, null, [title.value]), rootSlots.itemTemplate && itemTemplate.value !== false && ((_a = rootSlots.itemTemplate) == null ? void 0 : _a.call(rootSlots, {
+        parent: parentValue,
+        deepth: deepValue,
+        item: item.value
+      }))]);
+    };
+    return () => {
+      return createVNode(Fragment, null, [createVNode("div", {
+        "class": ["devui-accordion-item-title", disabled.value && "disabled"],
+        "style": {
+          textIndent: deepValue * 20 + "px"
+        }
+      }, [!disabled.value && createVNode("a", {
+        "href": link.value,
+        "target": target.value,
+        "class": "devui-over-flow-ellipsis",
+        "title": title.value,
+        "onClick": (e) => linkItemClickFn({
+          item: item.value,
+          parent: parentValue,
+          event: e
+        })
+      }, [renderContent()]), disabled.value && createVNode("a", {
+        "class": "devui-over-flow-ellipsis",
+        "title": title.value
+      }, [renderContent()])])]);
+    };
+  }
+});
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+var DAccordionItemRouterlink = defineComponent({
+  name: "DAccordionItemRouterlink",
+  component: {
+    DAccordionItem
+  },
+  props: __spreadValues({
+    item: Object,
+    deepth: {
+      type: Number,
+      default: 0
+    },
+    parent: {
+      type: Object,
+      default: null
+    }
+  }, accordionProps),
+  setup(props) {
+    const {
+      item,
+      deepth,
+      parent,
+      titleKey,
+      linkKey,
+      linkDefaultTarget,
+      disabledKey,
+      itemTemplate
+    } = toRefs(props);
+    const route = useRoute();
+    const rootSlots = getRootSlots();
+    const accordionCtx = inject("accordionContext");
+    console.log(useRoute());
+    const title = computed(() => {
+      return item.value && item.value[titleKey.value];
+    });
+    const link = computed(() => {
+      return item.value && item.value[linkKey.value];
+    });
+    const isUsedVueRouter = computed(() => route !== void 0);
+    const routerLinkActive = computed(() => {
+      return route === link.value;
+    });
+    const disabled = computed(() => {
+      return item.value && item.value[disabledKey.value];
+    });
+    const parentValue = parent.value;
+    const deepValue = deepth.value;
+    const linkItemClickFn = (itemEvent) => {
+      if (item.value && !disabled.value) {
+        accordionCtx.itemClickFn(itemEvent);
+      }
+    };
+    const renderContent = () => {
+      var _a;
+      return createVNode(Fragment, null, [createVNode("div", {
+        "class": ["devui-accordion-splitter", deepValue === 0 && "devui-parent-list"],
+        "style": {
+          left: deepValue * 20 + 10 + "px"
+        }
+      }, null), (!rootSlots.itemTemplate || itemTemplate.value === false) && createVNode(Fragment, null, [title.value]), rootSlots.itemTemplate && itemTemplate.value !== false && ((_a = rootSlots.itemTemplate) == null ? void 0 : _a.call(rootSlots, {
+        parent: parentValue,
+        deepth: deepValue,
+        item: item.value
+      }))]);
+    };
+    return () => {
+      let _slot;
+      return createVNode(Fragment, null, [createVNode("div", {
+        "class": ["devui-accordion-item-title", disabled.value && "disabled"],
+        "style": {
+          textIndent: deepValue * 20 + "px"
+        }
+      }, [!disabled.value && createVNode(Fragment, null, [isUsedVueRouter.value && createVNode(resolveComponent("router-link"), {
+        "to": link.value,
+        "class": ["devui-over-flow-ellipsis", routerLinkActive.value && ".devui-router-active"],
+        "custom": true,
+        "title": title.value,
+        "onClick": (e) => linkItemClickFn({
+          item: item.value,
+          parent: parentValue,
+          event: e
+        })
+      }, _isSlot(_slot = renderContent()) ? _slot : {
+        default: () => [_slot]
+      }), !isUsedVueRouter.value && createVNode("a", {
+        "href": link.value,
+        "target": linkDefaultTarget.value,
+        "class": "devui-over-flow-ellipsis",
+        "title": title.value,
+        "onClick": (e) => linkItemClickFn({
+          item: item.value,
+          parent: parentValue,
+          event: e
+        })
+      }, [renderContent()])]), disabled.value && createVNode("a", {
+        "class": "devui-over-flow-ellipsis",
+        "title": title.value
+      }, [renderContent()])])]);
     };
   }
 });
 var AccordionList = defineComponent({
   name: "DAccordionList",
-  inheritAttrs: false,
   components: {
-    DAccordionMenu
+    DAccordionMenu,
+    DAccordionItem,
+    DAccordionItemHreflink,
+    DAccordionItemRouterlink
   },
+  inheritAttrs: false,
   props: __spreadValues({
     data: {
       type: Array,
@@ -121,27 +491,105 @@ var AccordionList = defineComponent({
     innerListTemplate: Boolean
   }, accordionProps),
   setup(props, {
-    attrs,
-    slots
+    attrs
   }) {
     const {
       childrenKey,
-      innerListTemplate,
-      deepth
+      deepth,
+      parent,
+      data,
+      linkType,
+      showNoContent,
+      loadingKey,
+      titleKey,
+      linkTypeKey,
+      loadingTemplate,
+      noContentTemplate,
+      innerListTemplate
     } = toRefs(props);
+    const parentValue = parent.value;
+    const deepValue = deepth.value;
+    const rootSlots = getRootSlots();
+    const accordionCtx = inject("accordionContext");
+    const loading = computed(() => {
+      return parentValue && parentValue[loadingKey.value];
+    });
+    const noContent = computed(() => {
+      const dataValue = data.value;
+      return dataValue === void 0 || dataValue === null || dataValue.length === 0;
+    });
     return () => {
-      return createVNode(Fragment, null, [!innerListTemplate.value && createVNode("ul", mergeProps({
-        "class": "devui-accordion-list"
-      }, attrs), [props.data.map((item) => {
+      var _a, _b, _c;
+      return createVNode(Fragment, null, [(!rootSlots.innerListTemplate || deepth.value === 0 || innerListTemplate.value === false) && createVNode("ul", mergeProps({
+        "class": ["devui-accordion-list"]
+      }, attrs), [data.value.map((item) => {
         return createVNode("li", {
           "class": "devui-accordion-item",
-          "key": item.title
-        }, [childrenKey !== void 0 && createVNode(resolveComponent("d-accordion-menu"), mergeProps({
+          "key": item[titleKey.value]
+        }, [item[childrenKey.value] !== void 0 && createVNode("div", {
+          "class": "devui-accordion-menu-item"
+        }, [createVNode(resolveComponent("d-accordion-menu"), mergeProps(props, {
+          "item": item,
+          "deepth": deepValue,
+          "parent": parentValue
+        }), null)]), item[childrenKey.value] === void 0 && createVNode(Fragment, null, [(!linkType.value || linkType.value === "") && createVNode(resolveComponent("d-accordion-item"), mergeProps(props, {
+          "item": item,
+          "deepth": deepValue,
+          "parent": parentValue
+        }), null), linkType.value === "routerLink" && createVNode(resolveComponent("d-accordion-item-routerlink"), mergeProps(props, {
+          "item": item,
+          "deepth": deepValue,
+          "parent": parentValue
+        }), null), linkType.value === "hrefLink" && createVNode(resolveComponent("d-accordion-item-hreflink"), mergeProps(props, {
           "item": item,
-          "deepth": props.deepth,
-          "parent": props.parent
-        }, accordionProps), null)]);
-      })]), innerListTemplate.value && deepth.value !== 0 && createVNode("div", null, [slots.default ? slots.innerListTemplate() : ""])]);
+          "deepth": deepValue,
+          "parent": parentValue
+        }), null), linkType.value === "dependOnLinkTypeKey" && createVNode(Fragment, null, [item[linkTypeKey.value] === "routerLink" && createVNode(resolveComponent("d-accordion-item-routerlink"), mergeProps(props, {
+          "item": item,
+          "deepth": deepValue,
+          "parent": parentValue
+        }), null), item[linkTypeKey.value] === "hrefLink" && createVNode(resolveComponent("d-accordion-item-hreflink"), mergeProps(props, {
+          "item": item,
+          "deepth": deepValue,
+          "parent": parentValue
+        }), null), item[linkTypeKey.value] !== "routerLink" && item[linkTypeKey.value] !== "hrefLink" && createVNode(resolveComponent("d-accordion-item"), mergeProps(props, {
+          "item": item,
+          "deepth": deepValue,
+          "parent": parentValue
+        }), null)])])]);
+      })]), rootSlots.innerListTemplate && innerListTemplate.value !== false && deepValue !== 0 && ((_a = rootSlots.innerListTemplate) == null ? void 0 : _a.call(rootSlots, {
+        item: parentValue,
+        deepth: deepValue,
+        itemClickFn: accordionCtx.itemClickFn,
+        menuToggleFn: accordionCtx.menuToggleFn
+      })), (!rootSlots.innerListTemplate || innerListTemplate.value === false) && (loading.value || noContent.value && showNoContent.value) && createVNode("ul", mergeProps({
+        "class": ["devui-accordion-list"]
+      }, attrs), [
+        loading.value && (!rootSlots.loadingTemplate || loadingTemplate.value === false) && createVNode("li", {
+          "class": "devui-accordion-item"
+        }, [createVNode("div", {
+          "class": ["devui-accordion-item-title", "devui-over-flow-ellipsis"],
+          "style": {
+            textIndent: deepValue * 20 + "px"
+          }
+        }, [createTextVNode("\u52A0\u8F7D\u4E2D...")])]),
+        loading.value && rootSlots.loadingTemplate && loadingTemplate.value !== false && ((_b = rootSlots.loadingTemplate) == null ? void 0 : _b.call(rootSlots, {
+          item: parentValue,
+          deepth: deepValue
+        })),
+        showNoContent.value && !loading.value && noContent.value && (!rootSlots.noContentTemplate || noContentTemplate.value === false) && createVNode("li", {
+          "class": "devui-accordion-item"
+        }, [createVNode("div", {
+          "class": ["devui-accordion-item-title", "devui-over-flow-ellipsis disabled"],
+          "style": {
+            textIndent: deepValue * 20 + "px"
+          }
+        }, [createTextVNode("\u6CA1\u6709\u6570\u636E")])]),
+        showNoContent.value && !loading.value && noContent.value && rootSlots.noContentTemplate && noContentTemplate.value !== false && ((_c = rootSlots.noContentTemplate) == null ? void 0 : _c.call(rootSlots, {
+          item: parentValue,
+          deepth: deepValue
+        }))
+      ])]);
     };
   }
 });
@@ -198,28 +646,63 @@ var Accordion = defineComponent({
       clickActiveItem = item;
       emit("activeItemChange", clickActiveItem);
     };
+    const openMenuFn = (item, open) => {
+      if (open && restrictOneOpen.value) {
+        data.value.forEach((itemtemp) => {
+          itemtemp[openKey.value] = false;
+        });
+      }
+      item[openKey.value] = open;
+    };
+    const itemClickFn = (itemEvent) => {
+      const prevActiveItem = clickActiveItem;
+      activeItemFn(itemEvent.item);
+      emit("itemClick", __spreadProps(__spreadValues({}, itemEvent), {
+        prevActiveItem
+      }));
+    };
+    const linkItemClickFn = (itemEvent) => {
+      const prevActiveItem = clickActiveItem;
+      clickActiveItem = itemEvent.item;
+      emit("linkItemClick", __spreadProps(__spreadValues({}, itemEvent), {
+        prevActiveItem
+      }));
+    };
+    const menuToggleFn = (menuEvent) => {
+      openMenuFn(menuEvent.item, menuEvent.open);
+      emit("menuToggle", menuEvent);
+    };
     const cleanOpenData = () => {
       flatten(data.value, childrenKey.value, true, false).forEach((item) => item[openKey.value] = void 0);
     };
+    provide("accordionContext", {
+      itemClickFn,
+      linkItemClickFn,
+      menuToggleFn
+    });
     onMounted(() => {
       if (data.value) {
         initActiveItem();
       }
     });
     watch(() => autoOpenActiveMenu.value, (current, preV) => {
-      console.log("cur, new", current, preV);
       if (current && preV === false) {
         cleanOpenData();
       }
     });
+    watch(data.value, (current, preV) => {
+      initActiveItem();
+    }, {
+      deep: true
+    });
     return () => {
       return createVNode("div", {
-        "class": `devui-accordion-menu devui-scrollbar ${accordionType.value === "normal" ? "devui-accordion-menu-normal" : ""}`
-      }, [createVNode(AccordionList, mergeProps({
-        "data": data,
+        "class": ["devui-accordion-menu", "devui-scrollbar", "devui-accordion-show-animate", accordionType.value === "normal" && "devui-accordion-menu-normal"]
+      }, [createVNode(AccordionList, mergeProps(props, {
+        "data": data.value,
         "deepth": 0,
         "parent": null
-      }, props), null)]);
+      }), null)]);
     };
   }
 });