@xwiki/cristal-dsvuetify 0.10.0 → 0.12.0

package/dist/x-navigation-tree-W6QDS4uh.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"x-navigation-tree-W6QDS4uh.js","sources":["../../../node_modules/.pnpm/vuetify@3.7.3_typescript@5.6.3_vite-plugin-vuetify@2.0.4_vue@3.5.12_typescript@5.6.3_/node_modules/vuetify/lib/labs/VTreeview/VTreeviewGroup.mjs","../../../node_modules/.pnpm/vuetify@3.7.3_typescript@5.6.3_vite-plugin-vuetify@2.0.4_vue@3.5.12_typescript@5.6.3_/node_modules/vuetify/lib/labs/VTreeview/shared.mjs","../../../node_modules/.pnpm/vuetify@3.7.3_typescript@5.6.3_vite-plugin-vuetify@2.0.4_vue@3.5.12_typescript@5.6.3_/node_modules/vuetify/lib/labs/VTreeview/VTreeviewItem.mjs","../../../node_modules/.pnpm/vuetify@3.7.3_typescript@5.6.3_vite-plugin-vuetify@2.0.4_vue@3.5.12_typescript@5.6.3_/node_modules/vuetify/lib/labs/VTreeview/VTreeviewChildren.mjs","../../../node_modules/.pnpm/vuetify@3.7.3_typescript@5.6.3_vite-plugin-vuetify@2.0.4_vue@3.5.12_typescript@5.6.3_/node_modules/vuetify/lib/labs/VTreeview/VTreeview.mjs","../src/vue/x-navigation-tree.vue"],"sourcesContent":["import { mergeProps as _mergeProps, createVNode as _createVNode, Fragment as _Fragment } from \"vue\";\n// Components\nimport { VDefaultsProvider } from \"../../components/VDefaultsProvider/index.mjs\";\nimport { makeVListGroupProps, VListGroup } from \"../../components/VList/VListGroup.mjs\"; // Utilities\nimport { computed, ref } from 'vue';\nimport { genericComponent, omit, propsFactory, useRender } from \"../../util/index.mjs\"; // Types\nexport const makeVTreeviewGroupProps = propsFactory({\n  ...omit(makeVListGroupProps({\n    collapseIcon: '$treeviewCollapse',\n    expandIcon: '$treeviewExpand'\n  }), ['subgroup'])\n}, 'VTreeviewGroup');\nexport const VTreeviewGroup = genericComponent()({\n  name: 'VTreeviewGroup',\n  props: makeVTreeviewGroupProps(),\n  setup(props, _ref) {\n    let {\n      slots\n    } = _ref;\n    const vListGroupRef = ref();\n    const toggleIcon = computed(() => vListGroupRef.value?.isOpen ? props.collapseIcon : props.expandIcon);\n    const activatorDefaults = computed(() => ({\n      VTreeviewItem: {\n        prependIcon: undefined,\n        appendIcon: undefined,\n        active: vListGroupRef.value?.isOpen,\n        toggleIcon: toggleIcon.value\n      }\n    }));\n    useRender(() => {\n      const listGroupProps = VListGroup.filterProps(props);\n      return _createVNode(VListGroup, _mergeProps(listGroupProps, {\n        \"ref\": vListGroupRef,\n        \"class\": ['v-treeview-group', props.class],\n        \"subgroup\": true\n      }), {\n        ...slots,\n        activator: slots.activator ? slotProps => _createVNode(_Fragment, null, [_createVNode(VDefaultsProvider, {\n          \"defaults\": activatorDefaults.value\n        }, {\n          default: () => [slots.activator?.(slotProps)]\n        })]) : undefined\n      });\n    });\n    return {};\n  }\n});\n//# sourceMappingURL=VTreeviewGroup.mjs.map","// Types\n\nexport const VTreeviewSymbol = Symbol.for('vuetify:v-treeview');\n//# sourceMappingURL=shared.mjs.map","import { mergeProps as _mergeProps, createVNode as _createVNode, Fragment as _Fragment } from \"vue\";\n// Styles\nimport \"./VTreeviewItem.css\";\n\n// Components\nimport { VBtn } from \"../../components/VBtn/index.mjs\";\nimport { VListItemAction } from \"../../components/VList/index.mjs\";\nimport { makeVListItemProps, VListItem } from \"../../components/VList/VListItem.mjs\";\nimport { VProgressCircular } from \"../../components/VProgressCircular/index.mjs\"; // Composables\nimport { IconValue } from \"../../composables/icons.mjs\";\nimport { useLink } from \"../../composables/router.mjs\"; // Utilities\nimport { computed, inject, ref } from 'vue';\nimport { EventProp, genericComponent, omit, propsFactory, useRender } from \"../../util/index.mjs\"; // Types\nimport { VTreeviewSymbol } from \"./shared.mjs\";\nexport const makeVTreeviewItemProps = propsFactory({\n  loading: Boolean,\n  onToggleExpand: EventProp(),\n  toggleIcon: IconValue,\n  ...makeVListItemProps({\n    slim: true\n  })\n}, 'VTreeviewItem');\nexport const VTreeviewItem = genericComponent()({\n  name: 'VTreeviewItem',\n  props: makeVTreeviewItemProps(),\n  setup(props, _ref) {\n    let {\n      attrs,\n      slots,\n      emit\n    } = _ref;\n    const link = useLink(props, attrs);\n    const vListItemRef = ref();\n    const isActivatableGroupActivator = computed(() => vListItemRef.value?.root.activatable.value && vListItemRef.value?.isGroupActivator);\n    const isClickable = computed(() => !props.disabled && props.link !== false && (props.link || link.isClickable.value || props.value != null && !!vListItemRef.value?.list || isActivatableGroupActivator.value));\n    function activateItem(e) {\n      if (!isClickable.value || !isActivatableGroupActivator.value && vListItemRef.value?.isGroupActivator) return;\n      if (vListItemRef.value?.root.activatable.value) {\n        vListItemRef.value?.activate(!vListItemRef.value?.isActivated, e);\n      }\n    }\n    const visibleIds = inject(VTreeviewSymbol, {\n      visibleIds: ref()\n    }).visibleIds;\n    useRender(() => {\n      const listItemProps = omit(VListItem.filterProps(props), ['onClick']);\n      const hasPrepend = slots.prepend || props.toggleIcon;\n      return _createVNode(VListItem, _mergeProps({\n        \"ref\": vListItemRef\n      }, listItemProps, {\n        \"active\": vListItemRef.value?.isActivated,\n        \"class\": ['v-treeview-item', {\n          'v-treeview-item--activatable-group-activator': isActivatableGroupActivator.value,\n          'v-treeview-item--filtered': visibleIds.value && !visibleIds.value.has(vListItemRef.value?.id)\n        }, props.class],\n        \"ripple\": false,\n        \"onClick\": props.onClick ?? activateItem\n      }), {\n        ...slots,\n        prepend: hasPrepend ? slotProps => {\n          return _createVNode(_Fragment, null, [props.toggleIcon && _createVNode(VListItemAction, {\n            \"start\": false\n          }, {\n            default: () => [_createVNode(VBtn, {\n              \"density\": \"compact\",\n              \"icon\": props.toggleIcon,\n              \"loading\": props.loading,\n              \"variant\": \"text\",\n              \"onClick\": props.onToggleExpand\n            }, {\n              loader() {\n                return _createVNode(VProgressCircular, {\n                  \"indeterminate\": \"disable-shrink\",\n                  \"size\": \"20\",\n                  \"width\": \"2\"\n                }, null);\n              }\n            })]\n          }), slots.prepend?.(slotProps)]);\n        } : undefined\n      });\n    });\n    return {};\n  }\n});\n//# sourceMappingURL=VTreeviewItem.mjs.map","import { mergeProps as _mergeProps, resolveDirective as _resolveDirective, createVNode as _createVNode, Fragment as _Fragment } from \"vue\";\n// Components\nimport { VTreeviewGroup } from \"./VTreeviewGroup.mjs\";\nimport { VTreeviewItem } from \"./VTreeviewItem.mjs\";\nimport { VCheckboxBtn } from \"../../components/VCheckbox/index.mjs\"; // Composables\nimport { IconValue } from \"../../composables/icons.mjs\"; // Utilities\nimport { computed, reactive, toRaw, withModifiers } from 'vue';\nimport { genericComponent, propsFactory } from \"../../util/index.mjs\"; // Types\nexport const makeVTreeviewChildrenProps = propsFactory({\n  loadChildren: Function,\n  loadingIcon: {\n    type: String,\n    default: '$loading'\n  },\n  items: Array,\n  openOnClick: {\n    type: Boolean,\n    default: undefined\n  },\n  indeterminateIcon: {\n    type: IconValue,\n    default: '$checkboxIndeterminate'\n  },\n  falseIcon: IconValue,\n  trueIcon: IconValue,\n  returnObject: Boolean,\n  selectable: Boolean,\n  selectedColor: String,\n  selectStrategy: [String, Function, Object]\n}, 'VTreeviewChildren');\nexport const VTreeviewChildren = genericComponent()({\n  name: 'VTreeviewChildren',\n  props: makeVTreeviewChildrenProps(),\n  setup(props, _ref) {\n    let {\n      slots\n    } = _ref;\n    const isLoading = reactive(new Set());\n    const isClickOnOpen = computed(() => props.openOnClick != null ? props.openOnClick : props.selectable);\n    async function checkChildren(item) {\n      try {\n        if (!props.items?.length || !props.loadChildren) return;\n        if (item?.children?.length === 0) {\n          isLoading.add(item.value);\n          await props.loadChildren(item.raw);\n        }\n      } finally {\n        isLoading.delete(item.value);\n      }\n    }\n    function selectItem(select, isSelected) {\n      if (props.selectable) {\n        select(!isSelected);\n      }\n    }\n    return () => slots.default?.() ?? props.items?.map(item => {\n      const {\n        children,\n        props: itemProps\n      } = item;\n      const loading = isLoading.has(item.value);\n      const slotsWithItem = {\n        prepend: slotProps => _createVNode(_Fragment, null, [props.selectable && (!children || children && !['leaf', 'single-leaf'].includes(props.selectStrategy)) && _createVNode(\"div\", null, [_createVNode(VCheckboxBtn, {\n          \"key\": item.value,\n          \"modelValue\": slotProps.isSelected,\n          \"loading\": loading,\n          \"color\": props.selectedColor,\n          \"indeterminate\": slotProps.isIndeterminate,\n          \"indeterminateIcon\": props.indeterminateIcon,\n          \"falseIcon\": props.falseIcon,\n          \"trueIcon\": props.trueIcon,\n          \"onClick\": withModifiers(() => selectItem(slotProps.select, slotProps.isSelected), ['stop']),\n          \"onKeydown\": e => {\n            if (!['Enter', 'Space'].includes(e.key)) return;\n            e.stopPropagation();\n            selectItem(slotProps.select, slotProps.isSelected);\n          }\n        }, null)]), slots.prepend?.({\n          ...slotProps,\n          item: item.raw,\n          internalItem: item\n        })]),\n        append: slots.append ? slotProps => slots.append?.({\n          ...slotProps,\n          item: item.raw,\n          internalItem: item\n        }) : undefined,\n        title: slots.title ? slotProps => slots.title?.({\n          ...slotProps,\n          item: item.raw,\n          internalItem: item\n        }) : undefined\n      };\n      const treeviewGroupProps = VTreeviewGroup.filterProps(itemProps);\n      const treeviewChildrenProps = VTreeviewChildren.filterProps(props);\n      return children ? _createVNode(VTreeviewGroup, _mergeProps(treeviewGroupProps, {\n        \"value\": props.returnObject ? item.raw : treeviewGroupProps?.value\n      }), {\n        activator: _ref2 => {\n          let {\n            props: activatorProps\n          } = _ref2;\n          const listItemProps = {\n            ...itemProps,\n            ...activatorProps,\n            value: itemProps?.value,\n            onToggleExpand: [() => checkChildren(item), activatorProps.onClick],\n            onClick: isClickOnOpen.value ? [() => checkChildren(item), activatorProps.onClick] : undefined\n          };\n          return _createVNode(VTreeviewItem, _mergeProps(listItemProps, {\n            \"value\": props.returnObject ? toRaw(item.raw) : itemProps.value,\n            \"loading\": loading\n          }), slotsWithItem);\n        },\n        default: () => _createVNode(VTreeviewChildren, _mergeProps(treeviewChildrenProps, {\n          \"items\": children,\n          \"returnObject\": props.returnObject\n        }), slots)\n      }) : slots.item?.({\n        props: itemProps,\n        item: item.raw,\n        internalItem: item\n      }) ?? _createVNode(VTreeviewItem, _mergeProps(itemProps, {\n        \"value\": props.returnObject ? toRaw(item.raw) : itemProps.value\n      }), slotsWithItem);\n    });\n  }\n});\n//# sourceMappingURL=VTreeviewChildren.mjs.map","import { createVNode as _createVNode, mergeProps as _mergeProps, resolveDirective as _resolveDirective } from \"vue\";\n// Components\nimport { makeVTreeviewChildrenProps, VTreeviewChildren } from \"./VTreeviewChildren.mjs\";\nimport { makeVListProps, useListItems, VList } from \"../../components/VList/VList.mjs\"; // Composables\nimport { provideDefaults } from \"../../composables/defaults.mjs\";\nimport { makeFilterProps, useFilter } from \"../../composables/filter.mjs\";\nimport { useProxiedModel } from \"../../composables/proxiedModel.mjs\"; // Utilities\nimport { computed, provide, ref, toRaw, toRef } from 'vue';\nimport { genericComponent, omit, propsFactory, useRender } from \"../../util/index.mjs\"; // Types\nimport { VTreeviewSymbol } from \"./shared.mjs\";\nfunction flatten(items) {\n  let flat = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];\n  for (const item of items) {\n    flat.push(item);\n    if (item.children) flatten(item.children, flat);\n  }\n  return flat;\n}\nexport const makeVTreeviewProps = propsFactory({\n  openAll: Boolean,\n  search: String,\n  ...makeFilterProps({\n    filterKeys: ['title']\n  }),\n  ...makeVTreeviewChildrenProps(),\n  ...omit(makeVListProps({\n    collapseIcon: '$treeviewCollapse',\n    expandIcon: '$treeviewExpand',\n    slim: true\n  }), ['itemType', 'nav', 'openStrategy']),\n  modelValue: {\n    type: Array,\n    default: () => []\n  }\n}, 'VTreeview');\nexport const VTreeview = genericComponent()({\n  name: 'VTreeview',\n  props: makeVTreeviewProps(),\n  emits: {\n    'update:opened': val => true,\n    'update:activated': val => true,\n    'update:selected': val => true,\n    'update:modelValue': val => true,\n    'click:open': value => true,\n    'click:select': value => true\n  },\n  setup(props, _ref) {\n    let {\n      slots\n    } = _ref;\n    const {\n      items\n    } = useListItems(props);\n    const activeColor = toRef(props, 'activeColor');\n    const baseColor = toRef(props, 'baseColor');\n    const color = toRef(props, 'color');\n    const activated = useProxiedModel(props, 'activated');\n    const model = useProxiedModel(props, 'modelValue');\n    const _selected = useProxiedModel(props, 'selected', props.modelValue);\n    const selected = computed({\n      get: () => _selected.value,\n      set(val) {\n        _selected.value = val;\n        model.value = val;\n      }\n    });\n    const vListRef = ref();\n    const opened = computed(() => props.openAll ? openAll(items.value) : props.opened);\n    const flatItems = computed(() => flatten(items.value));\n    const search = toRef(props, 'search');\n    const {\n      filteredItems\n    } = useFilter(props, flatItems, search);\n    const visibleIds = computed(() => {\n      if (!search.value) return null;\n      const getPath = vListRef.value?.getPath;\n      if (!getPath) return null;\n      return new Set(filteredItems.value.flatMap(item => {\n        const itemVal = props.returnObject ? item.raw : item.props.value;\n        return [...getPath(itemVal), ...getChildren(itemVal)].map(toRaw);\n      }));\n    });\n    function getChildren(id) {\n      const arr = [];\n      const queue = (vListRef.value?.children.get(id) ?? []).slice();\n      while (queue.length) {\n        const child = queue.shift();\n        if (!child) continue;\n        arr.push(child);\n        queue.push(...(vListRef.value?.children.get(child) ?? []).slice());\n      }\n      return arr;\n    }\n    function openAll(items) {\n      let ids = [];\n      for (const i of items) {\n        if (!i.children) continue;\n        ids.push(props.returnObject ? toRaw(i.raw) : i.value);\n        if (i.children) {\n          ids = ids.concat(openAll(i.children));\n        }\n      }\n      return ids;\n    }\n    provide(VTreeviewSymbol, {\n      visibleIds\n    });\n    provideDefaults({\n      VTreeviewGroup: {\n        activeColor,\n        baseColor,\n        color,\n        collapseIcon: toRef(props, 'collapseIcon'),\n        expandIcon: toRef(props, 'expandIcon')\n      },\n      VTreeviewItem: {\n        activeClass: toRef(props, 'activeClass'),\n        activeColor,\n        baseColor,\n        color,\n        density: toRef(props, 'density'),\n        disabled: toRef(props, 'disabled'),\n        lines: toRef(props, 'lines'),\n        variant: toRef(props, 'variant')\n      }\n    });\n    useRender(() => {\n      const listProps = VList.filterProps(props);\n      const treeviewChildrenProps = VTreeviewChildren.filterProps(props);\n      return _createVNode(VList, _mergeProps({\n        \"ref\": vListRef\n      }, listProps, {\n        \"class\": ['v-treeview', props.class],\n        \"open-strategy\": \"multiple\",\n        \"style\": props.style,\n        \"opened\": opened.value,\n        \"activated\": activated.value,\n        \"onUpdate:activated\": $event => activated.value = $event,\n        \"selected\": selected.value,\n        \"onUpdate:selected\": $event => selected.value = $event\n      }), {\n        default: () => [_createVNode(VTreeviewChildren, _mergeProps(treeviewChildrenProps, {\n          \"returnObject\": props.returnObject,\n          \"items\": items.value\n        }), slots)]\n      });\n    });\n    return {};\n  }\n});\n//# sourceMappingURL=VTreeview.mjs.map","<!--\nSee the LICENSE file distributed with this work for additional\ninformation regarding copyright ownership.\n\nThis is free software; you can redistribute it and/or modify it\nunder the terms of the GNU Lesser General Public License as\npublished by the Free Software Foundation; either version 2.1 of\nthe License, or (at your option) any later version.\n\nThis software is distributed in the hope that it will be useful,\nbut WITHOUT ANY WARRANTY; without even the implied warranty of\nMERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU\nLesser General Public License for more details.\n\nYou should have received a copy of the GNU Lesser General Public\nLicense along with this software; if not, write to the Free\nSoftware Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA\n02110-1301 USA, or see the FSF site: http://www.fsf.org.\n-->\n<script setup lang=\"ts\">\n/**\n * Navigation Tree implemented using Vuetify's VTreeView component.\n * In order to use the initial component as a proper Navigation Tree for\n * Cristal, a few changes were made:\n *   - The only node activated matches the current page, or the clicked link if\n *     the component has a custom clickAction. We want to use actual links so\n *     that the user can click them normally (to e.g., open them in a new tab).\n *     So the default behavior of activating a node by clicking anywhere on the\n *     item was disabled. Default hover effects, such as darkening or changing\n *     the cursor on items, were also disabled.\n */\nimport { inject, onBeforeMount, ref, watch } from \"vue\";\nimport { VTreeview } from \"vuetify/labs/VTreeview\";\nimport type { CristalApp, PageData } from \"@xwiki/cristal-api\";\nimport type { DocumentService } from \"@xwiki/cristal-document-api\";\nimport type {\n  NavigationTreeNode,\n  NavigationTreeSource,\n  NavigationTreeSourceProvider,\n} from \"@xwiki/cristal-navigation-tree-api\";\nimport type { Ref } from \"vue\";\n\ntype TreeItem = {\n  id: string;\n  title: string;\n  href: string;\n  children?: Array<TreeItem>;\n  _location: string;\n};\n\ntype OnClickAction = (node: NavigationTreeNode) => void;\n\nconst cristal: CristalApp = inject<CristalApp>(\"cristal\")!;\nconst documentService: DocumentService = cristal\n  .getContainer()\n  .get<DocumentService>(\"DocumentService\");\nconst treeSource: NavigationTreeSource = cristal\n  .getContainer()\n  .get<NavigationTreeSourceProvider>(\"NavigationTreeSourceProvider\")\n  .get();\n\nconst rootNodes: Ref<Array<TreeItem>> = ref([]);\nconst tree: Ref<VTreeview | undefined> = ref(undefined);\n\nconst activatedNodes: Ref<Array<string>> = ref(new Array<string>());\nconst expandedNodes: Ref<Array<string>> = ref(new Array<string>());\n\nconst props = defineProps<{\n  clickAction?: OnClickAction;\n  currentPage?: PageData;\n}>();\n\nonBeforeMount(async () => {\n  for (const node of await treeSource.getChildNodes(\"\")) {\n    rootNodes.value.push({\n      id: node.id,\n      title: node.label,\n      href: node.url,\n      children: node.has_children ? [] : undefined,\n      _location: node.location,\n    });\n  }\n  if (props.currentPage !== undefined) {\n    await expandTree();\n  }\n\n  documentService.registerDocumentChangeListener(\"delete\", onDocumentDelete);\n  documentService.registerDocumentChangeListener(\"update\", onDocumentUpdate);\n});\n\nwatch(\n  () => props.currentPage,\n  async () => {\n    if (props.currentPage) {\n      await expandTree();\n    }\n  },\n);\n\nasync function expandTree() {\n  const newExpandedNodes = treeSource.getParentNodesId(props.currentPage);\n  let i;\n  let currentNodes = rootNodes.value;\n  for (i = 0; i < newExpandedNodes.length - 1; i++) {\n    if (currentNodes) {\n      for (const node of currentNodes) {\n        if (node.id == newExpandedNodes[i]) {\n          if (node.children?.length == 0) {\n            await lazyLoadChildren(node);\n          }\n          if (!expandedNodes.value.includes(node.id)) {\n            expandedNodes.value.push(node.id);\n          }\n          currentNodes = node.children!;\n        }\n      }\n    }\n  }\n  if (currentNodes) {\n    for (const node of currentNodes) {\n      if (node.id == newExpandedNodes[i]) {\n        activatedNodes.value = [node.id];\n        // If we have a custom click action, we want to use it on dynamic\n        // selection.\n        if (props.clickAction) {\n          props.clickAction({\n            id: node.id,\n            label: node.title,\n            location: node._location,\n            url: node.href,\n            has_children: node.children !== undefined,\n          });\n        }\n      }\n    }\n  }\n}\n\nasync function lazyLoadChildren(item: unknown) {\n  const treeItem = item as TreeItem;\n  const childNodes = await treeSource.getChildNodes(treeItem.id);\n  for (const child of childNodes) {\n    treeItem.children?.push({\n      id: child.id,\n      title: child.label,\n      href: child.url,\n      children: child.has_children ? [] : undefined,\n      _location: child.location,\n    });\n  }\n  // If the node doesn't have any children, we update it.\n  if (childNodes.length == 0) {\n    treeItem.children = undefined;\n  }\n}\n\nfunction clearSelection() {\n  // Clicking on a node would activate it and this can't be disabled easily.\n  // With this listener, we ensure that only the first activated node stays\n  // active.\n  if (activatedNodes.value.length > 1) {\n    activatedNodes.value.pop();\n  }\n}\n\nasync function onDocumentDelete(page: PageData) {\n  const parents = treeSource.getParentNodesId(page);\n  let currentItems: TreeItem[] | undefined = rootNodes.value;\n  while (currentItems) {\n    for (const i of currentItems.keys()) {\n      if (currentItems[i].id == parents[0]) {\n        if (parents.length == 1) {\n          currentItems.splice(i, 1);\n          return;\n        } else {\n          currentItems = currentItems[i].children;\n          parents.shift();\n          break;\n        }\n      }\n    }\n  }\n}\n\nasync function onDocumentUpdate(page: PageData) {\n  const parents = treeSource.getParentNodesId(page);\n  let currentParent: string | undefined = undefined;\n  let currentItems: TreeItem[] | undefined = rootNodes.value;\n\n  while (currentItems) {\n    for (const i of currentItems.keys()) {\n      if (currentItems[i].id == parents[0]) {\n        if (parents.length == 1) {\n          // Page update\n          const newItems = await treeSource.getChildNodes(\n            currentParent ? currentParent : \"\",\n          );\n          for (const newItem of newItems) {\n            if (newItem.id == currentItems[i].id) {\n              currentItems[i].title = newItem.label;\n              return;\n            }\n          }\n        } else {\n          currentParent = currentItems[i].id;\n          currentItems = currentItems[i].children;\n          parents.shift();\n          break;\n        }\n      }\n    }\n\n    // New page\n    const newItems = await treeSource.getChildNodes(\n      currentParent ? currentParent : \"\",\n    );\n    newItemsLoop: for (const newItem of newItems) {\n      for (const i of currentItems!.keys()) {\n        if (newItem.id == currentItems![i].id) {\n          continue newItemsLoop;\n        }\n      }\n      currentItems!.push({\n        id: newItem.id,\n        title: newItem.label,\n        href: newItem.url,\n        children: newItem.has_children ? [] : undefined,\n        _location: newItem.location,\n      });\n    }\n  }\n}\n</script>\n\n<template>\n  <v-treeview\n    ref=\"tree\"\n    v-model:opened=\"expandedNodes\"\n    density=\"compact\"\n    :activated=\"activatedNodes\"\n    :items=\"rootNodes\"\n    :load-children=\"lazyLoadChildren\"\n    activatable\n    active-strategy=\"independent\"\n    item-value=\"id\"\n    open-strategy=\"multiple\"\n    @update:activated=\"clearSelection\"\n  >\n    <template #title=\"{ item }: { item: any }\">\n      <a\n        v-if=\"props.clickAction\"\n        :href=\"item.href\"\n        @click.prevent=\"\n          activatedNodes = [item.id];\n          clickAction!({\n            id: item.id,\n            label: item.title,\n            location: item._location,\n            url: item.href,\n            has_children: item.children !== undefined,\n          });\n        \"\n        >{{ item.title }}</a\n      >\n      <a v-else :href=\"item.href\">{{ item.title }}</a>\n    </template>\n  </v-treeview>\n</template>\n\n<style scoped>\n.v-list {\n  background: none;\n}\n:deep(a) {\n  text-decoration: none;\n  color: var(--cr-base-text-color);\n}\n/* Disable hover on items. */\n:deep(.v-list-item__overlay) {\n  --v-hover-opacity: 0;\n}\n/* Disable hand cursor on items, since we disable the default click action. */\n:deep(.v-list-item--link) {\n  cursor: default;\n}\n</style>\n"],"names":["makeVTreeviewGroupProps","propsFactory","omit","makeVListGroupProps","VTreeviewGroup","genericComponent","props","_ref","slots","vListGroupRef","ref","toggleIcon","computed","_a","activatorDefaults","useRender","listGroupProps","VListGroup","_createVNode","_mergeProps","slotProps","_Fragment","VDefaultsProvider","VTreeviewSymbol","makeVTreeviewItemProps","EventProp","IconValue","makeVListItemProps","VTreeviewItem","attrs","emit","link","useLink","vListItemRef","isActivatableGroupActivator","_b","isClickable","activateItem","e","_d","_c","visibleIds","inject","listItemProps","VListItem","hasPrepend","VListItemAction","VBtn","VProgressCircular","makeVTreeviewChildrenProps","VTreeviewChildren","isLoading","reactive","isClickOnOpen","checkChildren","item","selectItem","select","isSelected","children","itemProps","loading","slotsWithItem","VCheckboxBtn","withModifiers","treeviewGroupProps","treeviewChildrenProps","_ref2","activatorProps","toRaw","flatten","items","flat","makeVTreeviewProps","makeFilterProps","makeVListProps","VTreeview","val","value","useListItems","activeColor","toRef","baseColor","color","activated","useProxiedModel","model","_selected","selected","vListRef","opened","openAll","flatItems","search","filteredItems","useFilter","getPath","itemVal","getChildren","id","arr","queue","child","ids","i","provide","provideDefaults","listProps","VList","$event","cristal","documentService","treeSource","rootNodes","tree","activatedNodes","expandedNodes","__props","onBeforeMount","node","expandTree","onDocumentDelete","onDocumentUpdate","watch","newExpandedNodes","currentNodes","lazyLoadChildren","treeItem","childNodes","clearSelection","page","parents","currentItems","currentParent","newItems","newItem","newItemsLoop"],"mappings":"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","x_google_ignoreList":[0,1,2,3,4]}

package/dist/{x-text-field-B88odaud.js → x-text-field-CAVD3OjY.js}

@@ -1,7 +1,7 @@
-import { defineComponent as a, computed as l, openBlock as u, createBlock as m, unref as p } from "vue";
-import { m as i } from "./translations-CFfpgNrx.js";
+import { defineComponent as a, computed as l, openBlock as u, createBlock as m, unref as i } from "vue";
+import { t as p } from "./translations-BNEIsfPR.js";
 import { useI18n as f } from "vue-i18n";
-import { a as c } from "./index-BjjXwAdJ.js";
+import { a as c } from "./index-DCILSBLH.js";
 const y = /* @__PURE__ */ a({
   __name: "x-text-field",
   props: {
@@ -11,12 +11,12 @@ const y = /* @__PURE__ */ a({
   },
   setup(t) {
     const { t: n } = f({
-      messages: i
+      messages: p
     }), o = t, s = l(() => {
       const e = [];
       return o.required && e.push((r) => r ? !0 : n("vuetify.text.input.mandatory")), e;
     });
-    return (e, r) => (u(), m(p(c), {
+    return (e, r) => (u(), m(i(c), {
       label: e.label,
       name: e.name,
       rules: s.value
@@ -26,4 +26,4 @@ const y = /* @__PURE__ */ a({
 export {
   y as default
 };
-//# sourceMappingURL=x-text-field-B88odaud.js.map
+//# sourceMappingURL=x-text-field-CAVD3OjY.js.map

package/dist/{x-text-field-B88odaud.js.map → x-text-field-CAVD3OjY.js.map}

@@ -1 +1 @@
-{"version":3,"file":"x-text-field-B88odaud.js","sources":["../src/vue/form/x-text-field.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { type TextFieldProps } from \"@xwiki/cristal-dsapi\";\nimport { computed } from \"vue\";\nimport { VTextField } from \"vuetify/components/VTextField\";\nimport messages from \"../../translations\";\nimport { useI18n } from \"vue-i18n\";\n\nconst { t } = useI18n({\n  messages,\n});\nconst props = defineProps<TextFieldProps>();\n\nconst rules = computed(() => {\n  const rulesList = [];\n  if (props.required) {\n    rulesList.push((value: unknown) => {\n      if (value) {\n        return true;\n      } else {\n        return t(\"vuetify.text.input.mandatory\");\n      }\n    });\n  }\n  return rulesList;\n});\n</script>\n\n<template>\n  <v-text-field :label=\"label\" :name=\"name\" :rules=\"rules\"></v-text-field>\n</template>\n\n<style scoped></style>\n"],"names":["t","useI18n","messages","props","__props","rules","computed","rulesList","value"],"mappings":";;;;;;;;;;;;AAOM,UAAA,EAAE,GAAAA,EAAE,IAAIC,EAAQ;AAAA,MACpB,UAAAC;AAAA,IAAA,CACD,GACKC,IAAQC,GAERC,IAAQC,EAAS,MAAM;AAC3B,YAAMC,IAAY,CAAA;AAClB,aAAIJ,EAAM,YACEI,EAAA,KAAK,CAACC,MACVA,IACK,KAEAR,EAAE,8BAA8B,CAE1C,GAEIO;AAAA,IAAA,CACR;;;;;;;;"}
+{"version":3,"file":"x-text-field-CAVD3OjY.js","sources":["../src/vue/form/x-text-field.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport messages from \"../../translations\";\nimport { computed } from \"vue\";\nimport { useI18n } from \"vue-i18n\";\nimport { VTextField } from \"vuetify/components/VTextField\";\nimport type { TextFieldProps } from \"@xwiki/cristal-dsapi\";\n\nconst { t } = useI18n({\n  messages,\n});\nconst props = defineProps<TextFieldProps>();\n\nconst rules = computed(() => {\n  const rulesList = [];\n  if (props.required) {\n    rulesList.push((value: unknown) => {\n      if (value) {\n        return true;\n      } else {\n        return t(\"vuetify.text.input.mandatory\");\n      }\n    });\n  }\n  return rulesList;\n});\n</script>\n\n<template>\n  <v-text-field :label=\"label\" :name=\"name\" :rules=\"rules\"></v-text-field>\n</template>\n\n<style scoped></style>\n"],"names":["t","useI18n","messages","props","__props","rules","computed","rulesList","value"],"mappings":";;;;;;;;;;;;AAOM,UAAA,EAAE,GAAAA,EAAE,IAAIC,EAAQ;AAAA,MAAA,UACpBC;AAAAA,IAAA,CACD,GACKC,IAAQC,GAERC,IAAQC,EAAS,MAAM;AAC3B,YAAMC,IAAY,CAAA;AAClB,aAAIJ,EAAM,YACEI,EAAA,KAAK,CAACC,MACVA,IACK,KAEAR,EAAE,8BAA8B,CAE1C,GAEIO;AAAA,IAAA,CACR;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xwiki/cristal-dsvuetify",
-  "version": "0.10.0",
+  "version": "0.12.0",
   "license": "LGPL 2.1",
   "author": "XWiki Org Community <contact@xwiki.org>",
   "homepage": "https://cristal.xwiki.org/",
@@ -22,23 +22,26 @@
   },
   "main": "./dist/index.es.js",
   "dependencies": {
-    "inversify": "6.0.2",
-    "vue": "3.4.31",
-    "vue-i18n": "9.13.1",
-    "vuetify": "3.6.15",
-    "@xwiki/cristal-api": "0.10.0",
-    "@xwiki/cristal-dsapi": "0.10.0",
-    "@xwiki/cristal-navigation-tree-api": "0.10.0"
+    "inversify": "6.0.3",
+    "vue": "3.5.12",
+    "vue-i18n": "10.0.4",
+    "vuetify": "3.7.3",
+    "@xwiki/cristal-api": "0.12.0",
+    "@xwiki/cristal-dsapi": "0.12.0",
+    "@xwiki/cristal-navigation-tree-api": "0.12.0",
+    "@xwiki/cristal-document-api": "0.12.0"
   },
   "devDependencies": {
-    "vue-tsc": "2.0.22"
+    "@vue/test-utils": "2.4.6",
+    "vue-tsc": "2.1.10",
+    "@xwiki/cristal-dev-config": "0.12.0"
   },
   "scripts": {
     "build": "pnpm compile",
     "clean": "rimraf dist",
     "compile": "vue-tsc --project tsconfig.json && vite build",
     "lint": "eslint \"./src/**/*.{ts,tsx,vue}\" --max-warnings=0",
-    "test": "echo 'no test'"
+    "test": "vitest --run"
   },
   "types": "./dist/index.d.ts"
 }

package/src/components/componentsInit.ts

@@ -18,9 +18,9 @@
  * 02110-1301 USA, or see the FSF site: http://www.fsf.org.
  */
 
+import { VuetifyDesignSystemLoader } from "./vuetifyDesignSystemLoader";
 import type { DesignSystemLoader } from "@xwiki/cristal-api";
 import type { Container } from "inversify";
-import { VuetifyDesignSystemLoader } from "./vuetifyDesignSystemLoader";
 
 export default class ComponentInit {
   constructor(container: Container) {

package/src/components/vuetifyDesignSystemLoader.ts

@@ -18,16 +18,18 @@
  * 02110-1301 USA, or see the FSF site: http://www.fsf.org.
  */
 
-import type { App } from "vue";
+import { registerAsyncComponent } from "@xwiki/cristal-api";
+import { injectable } from "inversify";
+import { createVuetify } from "vuetify";
+// eslint-disable-next-line import/namespace
 import * as components from "vuetify/components";
 import { VCol, VContainer, VRow, VTextField } from "vuetify/components";
-import type { DesignSystemLoader } from "@xwiki/cristal-api";
 
-import { createVuetify } from "vuetify";
-import { mdi } from "vuetify/iconsets/mdi";
 import * as directives from "vuetify/directives";
-import { injectable } from "inversify";
-import { registerAsyncComponent } from "@xwiki/cristal-api";
+import { mdi } from "vuetify/iconsets/mdi";
+import { blue, blueGrey } from "vuetify/util/colors";
+import type { DesignSystemLoader } from "@xwiki/cristal-api";
+import type { App } from "vue";
 
 @injectable()
 export class VuetifyDesignSystemLoader implements DesignSystemLoader {
@@ -56,6 +58,18 @@ export class VuetifyDesignSystemLoader implements DesignSystemLoader {
           mdi,
         },
       },
+      theme: {
+        themes: {
+          light: {
+            dark: false,
+            colors: {
+              background: "#FFFFFF",
+              primary: blue.darken4,
+              secondary: blueGrey.darken4,
+            },
+          },
+        },
+      },
     });
     app.use(vuetify);
     // Native Vuetify components
@@ -83,6 +97,11 @@ export class VuetifyDesignSystemLoader implements DesignSystemLoader {
       "XMenuItem",
       () => import("../vue/x-menu-item.vue"),
     );
+    registerAsyncComponent(
+      app,
+      "XMenuLabel",
+      () => import("../vue/x-menu-label.vue"),
+    );
     registerAsyncComponent(
       app,
       "XBreadcrumb",

package/src/vue/__tests__/utils/vuetify.ts

@@ -0,0 +1,43 @@
+/*
+ * See the LICENSE file distributed with this work for additional
+ * information regarding copyright ownership.
+ *
+ * This is free software; you can redistribute it and/or modify it
+ * under the terms of the GNU Lesser General Public License as
+ * published by the Free Software Foundation; either version 2.1 of
+ * the License, or (at your option) any later version.
+ *
+ * This software is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public
+ * License along with this software; if not, write to the Free
+ * Software Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA
+ * 02110-1301 USA, or see the FSF site: http://www.fsf.org.
+ */
+
+import { createVuetify } from "vuetify";
+// eslint-disable-next-line import/namespace
+import * as components from "vuetify/components";
+import * as directives from "vuetify/directives";
+
+const vuetify = createVuetify({
+  components,
+  directives,
+});
+
+/**
+ * Provide the required options for testing vuetify, and merge them with existing
+ * @param options - the existing options to merge
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function addVuetifyOptions(options: any) {
+  return {
+    ...options,
+    global: {
+      plugins: [vuetify],
+    },
+  };
+}

package/src/vue/__tests__/x-btn.test.ts

@@ -0,0 +1,54 @@
+/*
+ * See the LICENSE file distributed with this work for additional
+ * information regarding copyright ownership.
+ *
+ * This is free software; you can redistribute it and/or modify it
+ * under the terms of the GNU Lesser General Public License as
+ * published by the Free Software Foundation; either version 2.1 of
+ * the License, or (at your option) any later version.
+ *
+ * This software is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public
+ * License along with this software; if not, write to the Free
+ * Software Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA
+ * 02110-1301 USA, or see the FSF site: http://www.fsf.org.
+ */
+
+import { addVuetifyOptions } from "./utils/vuetify";
+import XBtn from "../x-btn.vue";
+import { VueWrapper, mount } from "@vue/test-utils";
+import { describe, expect, it } from "vitest";
+
+/**
+ * Mount a XBtn component with the default configuration.
+ * @param options - additional wrapper options, overriding the default ones
+ */
+function mountXBtn(options: unknown): VueWrapper {
+  return mount(XBtn, addVuetifyOptions(options));
+}
+
+describe("x-btn", () => {
+  it("display the slot", () => {
+    const xBtn = mountXBtn({
+      slots: {
+        default: "Content",
+      },
+    });
+    expect(xBtn.text()).eq("Content");
+  });
+  it("uses the variant", () => {
+    const xBtn = mountXBtn({
+      props: {
+        variant: "danger",
+      },
+      slots: {
+        default: "Content",
+      },
+    });
+    expect(xBtn.classes()).toContain("text-error");
+  });
+});

package/src/vue/css/style.css

@@ -17,6 +17,7 @@
  * Software Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA
  * 02110-1301 USA, or see the FSF site: http://www.fsf.org.
  */
+
 .load-spinner {
   background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><circle fill="%23B9B9B9" stroke="%23B9B9B9" stroke-width="6" r="15" cx="40" cy="100"><animate attributeName="opacity" calcMode="spline" dur="2" values="1;0;1;" keySplines=".5 0 .5 1;.5 0 .5 1" repeatCount="indefinite" begin="-.4"></animate></circle><circle fill="%23B9B9B9" stroke="%23B9B9B9" stroke-width="6" r="15" cx="100" cy="100"><animate attributeName="opacity" calcMode="spline" dur="2" values="1;0;1;" keySplines=".5 0 .5 1;.5 0 .5 1" repeatCount="indefinite" begin="-.2"></animate></circle><circle fill="%23B9B9B9" stroke="%23B9B9B9" stroke-width="6" r="15" cx="160" cy="100"><animate attributeName="opacity" calcMode="spline" dur="2" values="1;0;1;" keySplines=".5 0 .5 1;.5 0 .5 1" repeatCount="indefinite" begin="0"></animate></circle></svg>');
   background-size: cover;
@@ -30,6 +31,7 @@
   --cr-sizes-main-sidebar-min-width: 250px; /*The minimum width of the main sidebar*/
   --cr-sizes-collapsed-main-sidebar-width: 32px; /*The width of the bar that gets shown containing the menu button to reopen the standard main main sidebar*/
   --cr-base-font-size: 16px;
+  --cr-base-text-color: var(--cr-color-gray-950);
 
 
   /*

package/src/vue/form/x-file-input.vue

@@ -1,10 +1,9 @@
 <script setup lang="ts">
-import type { TextFieldModel, TextFieldProps } from "@xwiki/cristal-dsapi";
-import { computed } from "vue";
-import { VFileInput } from "vuetify/components/VFileInput";
 import messages from "../../translations";
+import { computed, defineModel } from "vue";
 import { useI18n } from "vue-i18n";
-import { defineModel } from "vue";
+import { VFileInput } from "vuetify/components/VFileInput";
+import type { TextFieldModel, TextFieldProps } from "@xwiki/cristal-dsapi";
 
 const { t } = useI18n({
   messages,

package/src/vue/form/x-text-field.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { type TextFieldProps } from "@xwiki/cristal-dsapi";
-import { computed } from "vue";
-import { VTextField } from "vuetify/components/VTextField";
 import messages from "../../translations";
+import { computed } from "vue";
 import { useI18n } from "vue-i18n";
+import { VTextField } from "vuetify/components/VTextField";
+import type { TextFieldProps } from "@xwiki/cristal-dsapi";
 
 const { t } = useI18n({
   messages,

package/src/vue/x-alert.vue

@@ -17,23 +17,21 @@ License along with this software; if not, write to the Free
 Software Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA
 02110-1301 USA, or see the FSF site: http://www.fsf.org.
 -->
+<script setup lang="ts">
+import type { AlertProps } from "@xwiki/cristal-dsapi";
+
+defineProps<AlertProps>();
+</script>
 <template>
-  <v-alert :title="title" :type="type">
+  <v-alert :closable="closable" :title="title" :type="type" :text="description">
+    <x-btn
+      v-for="action of actions"
+      :key="action.name"
+      size="small"
+      variant="text"
+      @click="action.callback"
+      >{{ action.name }}</x-btn
+    >
     <slot />
   </v-alert>
 </template>
-<script lang="ts">
-import type { PropType } from "vue";
-import type { VAlert } from "vuetify/lib/components/VAlert/index.mjs";
-
-export default {
-  components: {},
-  props: {
-    title: { type: String, required: true },
-    type: {
-      type: Object as PropType<VAlert["type"] | undefined>,
-      required: true,
-    },
-  },
-};
-</script>

package/src/vue/x-breadcrumb.vue

@@ -37,4 +37,8 @@ const items = computed(() => {
   <v-breadcrumbs :items="items"></v-breadcrumbs>
 </template>
 
-<style scoped></style>
+<style scoped>
+.v-breadcrumbs {
+  padding: 0;
+}
+</style>

package/src/vue/x-btn.vue

@@ -17,8 +17,41 @@ License along with this software; if not, write to the Free
 Software Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA
 02110-1301 USA, or see the FSF site: http://www.fsf.org.
 -->
+<script lang="ts" setup>
+import { computed } from "vue";
+import type { BtnProps } from "@xwiki/cristal-dsapi";
+
+const { variant } = defineProps<BtnProps>();
+
+// Map the variants to corresponding vuetify colors.
+const color = computed(() => {
+  let color = undefined;
+  switch (variant) {
+    case "default":
+      break;
+    case "primary":
+      color = "primary";
+      break;
+    case "success":
+      color = "success";
+      break;
+    case "neutral":
+      color = "secondary";
+      break;
+    case "warning":
+      color = "warning";
+      break;
+    case "danger":
+      color = "error";
+      break;
+  }
+  return color;
+});
+
+const vVariant = computed(() => (variant == "text" ? "text" : "tonal"));
+</script>
 <template>
-  <v-btn>
+  <v-btn :color="color" :variant="vVariant">
     <slot />
   </v-btn>
 </template>

package/src/vue/x-divider.vue

@@ -18,5 +18,5 @@ Software Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA
 02110-1301 USA, or see the FSF site: http://www.fsf.org.
 -->
 <template>
-  <v-divider :thickness="2" class="border-opacity-100" color="info" />
+  <v-divider />
 </template>

package/src/vue/x-menu-item.vue

@@ -19,11 +19,11 @@ Software Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA
 -->
 <script lang="ts" setup>
 defineProps<{
-  title: string;
+  value: string;
 }>();
 </script>
 <template>
-  <v-list-item>
+  <v-list-item :value="value">
     <slot name="default" />
   </v-list-item>
 </template>

package/src/vue/x-menu-label.vue

@@ -0,0 +1,25 @@
+<!--
+See the LICENSE file distributed with this work for additional
+information regarding copyright ownership.
+
+This is free software; you can redistribute it and/or modify it
+under the terms of the GNU Lesser General Public License as
+published by the Free Software Foundation; either version 2.1 of
+the License, or (at your option) any later version.
+
+This software is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+Lesser General Public License for more details.
+
+You should have received a copy of the GNU Lesser General Public
+License along with this software; if not, write to the Free
+Software Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA
+02110-1301 USA, or see the FSF site: http://www.fsf.org.
+-->
+<script lang="ts" setup></script>
+<template>
+  <v-list-subheader>
+    <slot name="default" />
+  </v-list-subheader>
+</template>

package/src/vue/x-menu.vue

@@ -17,13 +17,15 @@ License along with this software; if not, write to the Free
 Software Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA
 02110-1301 USA, or see the FSF site: http://www.fsf.org.
 -->
-<script lang="ts" setup>
-defineProps<{
-  title: string;
-}>();
-</script>
+<script lang="ts" setup></script>
 <template>
-  <v-menu open-on-hover>
+  <!-- v-menu needs to be attached inside Cristal DOM to fix its z-index.
+       We also reset the default z-index to set it in the style section. -->
+  <v-menu
+    :close-on-content-click="false"
+    attach="#xwCristalApp"
+    z-index="initial"
+  >
     <template #activator="{ props }">
       <span v-bind="props">
         <slot name="activator" />
@@ -34,3 +36,8 @@ defineProps<{
     </v-list>
   </v-menu>
 </template>
+<style scoped>
+.v-overlay {
+  z-index: var(--cr-z-index-dropdown);
+}
+</style>