@xwiki/cristal-dsvuetify 0.9.0 → 0.11.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"x-navigation-tree-DkVWsvlI.js","sources":["../../../node_modules/.pnpm/vuetify@3.7.2_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.2_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.2_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.2_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.2_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, shallowRef, 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      emit,\n      slots\n    } = _ref;\n    const isLoading = shallowRef(null);\n    const isClickOnOpen = computed(() => props.openOnClick != null ? props.openOnClick : props.selectable);\n    function checkChildren(item) {\n      return new Promise(resolve => {\n        if (!props.items?.length || !props.loadChildren) return resolve();\n        if (item?.children?.length === 0) {\n          isLoading.value = item.value;\n          props.loadChildren(item).then(resolve);\n          return;\n        }\n        resolve();\n      }).finally(() => {\n        isLoading.value = null;\n      });\n    }\n    function selectItem(select, isSelected) {\n      if (props.selectable) {\n        select(!isSelected);\n      }\n    }\n    return () => slots.default?.() ?? props.items?.map(_ref2 => {\n      let {\n        children,\n        props: itemProps,\n        raw: item\n      } = _ref2;\n      const loading = isLoading.value === 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\n        })]),\n        append: slots.append ? slotProps => slots.append?.({\n          ...slotProps,\n          item\n        }) : undefined,\n        title: slots.title ? slotProps => slots.title?.({\n          ...slotProps,\n          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 : treeviewGroupProps?.value\n      }), {\n        activator: _ref3 => {\n          let {\n            props: activatorProps\n          } = _ref3;\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) : 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      }) ?? _createVNode(VTreeviewItem, _mergeProps(itemProps, {\n        \"value\": props.returnObject ? toRaw(item) : 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        return [...getPath(item.props.value), ...getChildren(item.props.value)];\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 { Ref, onBeforeMount, ref, watch } from \"vue\";\nimport { VTreeview } from \"vuetify/labs/VTreeview\";\nimport { type PageData } from \"@xwiki/cristal-api\";\nimport type {\n  NavigationTreeSource,\n  NavigationTreeNode,\n} from \"@xwiki/cristal-navigation-tree-api\";\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 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  treeSource: NavigationTreeSource;\n  clickAction?: OnClickAction;\n  currentPage?: PageData;\n}>();\n\nonBeforeMount(async () => {\n  for (const node of await props.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\nwatch(\n  () => props.currentPage,\n  async () => {\n    if (props.currentPage) {\n      await expandTree();\n    }\n  },\n);\n\nasync function expandTree() {\n  const newExpandedNodes = props.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 props.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</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","shallowRef","isClickOnOpen","checkChildren","item","resolve","selectItem","select","isSelected","_ref2","children","itemProps","loading","slotsWithItem","VCheckboxBtn","withModifiers","treeviewGroupProps","treeviewChildrenProps","_ref3","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","getChildren","id","arr","queue","child","ids","i","provide","provideDefaults","listProps","VList","$event","rootNodes","tree","activatedNodes","expandedNodes","__props","onBeforeMount","node","expandTree","watch","newExpandedNodes","currentNodes","lazyLoadChildren","treeItem","childNodes","clearSelection"],"mappings":"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","x_google_ignoreList":[0,1,2,3,4]}

package/dist/x-tab-group-ngNByee3.js

@@ -0,0 +1,49 @@
+import { defineComponent as f, ref as i, resolveComponent as n, openBlock as V, createBlock as b, withCtx as a, createVNode as s, renderSlot as u } from "vue";
+const x = /* @__PURE__ */ f({
+  __name: "x-tab-group",
+  emits: ["change"],
+  setup(g, { emit: d }) {
+    const t = i(null), m = d;
+    function r(e) {
+      typeof e == "string" && m("change", e);
+    }
+    return (e, o) => {
+      const _ = n("v-tabs"), c = n("v-tabs-window"), p = n("v-card-text"), v = n("v-card");
+      return V(), b(v, { class: "mx-auto" }, {
+        default: a(() => [
+          s(_, {
+            modelValue: t.value,
+            "onUpdate:modelValue": [
+              o[0] || (o[0] = (l) => t.value = l),
+              r
+            ]
+          }, {
+            default: a(() => [
+              u(e.$slots, "tabs")
+            ]),
+            _: 3
+          }, 8, ["modelValue"]),
+          s(p, null, {
+            default: a(() => [
+              s(c, {
+                modelValue: t.value,
+                "onUpdate:modelValue": o[1] || (o[1] = (l) => t.value = l)
+              }, {
+                default: a(() => [
+                  u(e.$slots, "panels")
+                ]),
+                _: 3
+              }, 8, ["modelValue"])
+            ]),
+            _: 3
+          })
+        ]),
+        _: 3
+      });
+    };
+  }
+});
+export {
+  x as default
+};
+//# sourceMappingURL=x-tab-group-ngNByee3.js.map

package/dist/{x-tab-group-DTR-H8Sn.js.map → x-tab-group-ngNByee3.js.map}

@@ -1 +1 @@
-{"version":3,"file":"x-tab-group-DTR-H8Sn.js","sources":["../src/vue/x-tab-group.vue"],"sourcesContent":["<!--\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\">\nimport { ref } from \"vue\";\nconst tab = ref(null);\n\nconst emits = defineEmits([\"change\"]);\n\nfunction change(tabId: string) {\n  emits(\"change\", tabId);\n}\n</script>\n\n<template>\n  <v-card class=\"mx-auto\">\n    <v-tabs v-model=\"tab\" @update:model-value=\"change\">\n      <slot name=\"tabs\"></slot>\n    </v-tabs>\n    <v-card-text>\n      <v-tabs-window v-model=\"tab\">\n        <slot name=\"panels\"></slot>\n      </v-tabs-window>\n    </v-card-text>\n  </v-card>\n</template>\n\n<style scoped></style>\n"],"names":["tab","ref","emits","__emit","change","tabId"],"mappings":";;;;;AAqBM,UAAAA,IAAMC,EAAI,IAAI,GAEdC,IAAQC;AAEd,aAASC,EAAOC,GAAe;AAC7B,MAAAH,EAAM,UAAUG,CAAK;AAAA,IACvB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"x-tab-group-ngNByee3.js","sources":["../src/vue/x-tab-group.vue"],"sourcesContent":["<!--\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\">\nimport { ref } from \"vue\";\nconst tab = ref(null);\n\nconst emits = defineEmits([\"change\"]);\n\nfunction change(tabId: unknown) {\n  if (typeof tabId == \"string\") {\n    emits(\"change\", tabId);\n  }\n}\n</script>\n\n<template>\n  <v-card class=\"mx-auto\">\n    <v-tabs v-model=\"tab\" @update:model-value=\"change\">\n      <slot name=\"tabs\"></slot>\n    </v-tabs>\n    <v-card-text>\n      <v-tabs-window v-model=\"tab\">\n        <slot name=\"panels\"></slot>\n      </v-tabs-window>\n    </v-card-text>\n  </v-card>\n</template>\n\n<style scoped></style>\n"],"names":["tab","ref","emits","__emit","change","tabId"],"mappings":";;;;;AAqBM,UAAAA,IAAMC,EAAI,IAAI,GAEdC,IAAQC;AAEd,aAASC,EAAOC,GAAgB;AAC1B,MAAA,OAAOA,KAAS,YAClBH,EAAM,UAAUG,CAAK;AAAA,IAEzB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/{x-text-field-Ccv2SH00.js → x-text-field-uL1ePP_x.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-CkW0K4NP.js";
+import { a as c } from "./index-BMliq0dk.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-Ccv2SH00.js.map
+//# sourceMappingURL=x-text-field-uL1ePP_x.js.map

package/dist/{x-text-field-Ccv2SH00.js.map → x-text-field-uL1ePP_x.js.map}

@@ -1 +1 @@
-{"version":3,"file":"x-text-field-Ccv2SH00.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-uL1ePP_x.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,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/langs/translation-fr.json

@@ -0,0 +1 @@
+{}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xwiki/cristal-dsvuetify",
-  "version": "0.9.0",
+  "version": "0.11.0",
   "license": "LGPL 2.1",
   "author": "XWiki Org Community <contact@xwiki.org>",
   "homepage": "https://cristal.xwiki.org/",
@@ -23,22 +23,24 @@
   "main": "./dist/index.es.js",
   "dependencies": {
     "inversify": "6.0.2",
-    "vue": "3.4.29",
-    "vue-i18n": "9.13.1",
-    "vuetify": "3.6.10",
-    "@xwiki/cristal-api": "0.9.0",
-    "@xwiki/cristal-dsapi": "0.9.0"
+    "vue": "3.5.12",
+    "vue-i18n": "10.0.4",
+    "vuetify": "3.7.2",
+    "@xwiki/cristal-api": "0.11.0",
+    "@xwiki/cristal-dsapi": "0.11.0",
+    "@xwiki/cristal-navigation-tree-api": "0.11.0"
   },
   "devDependencies": {
-    "rimraf": "5.0.7",
-    "vue-tsc": "2.0.21"
+    "@vue/test-utils": "2.4.6",
+    "vue-tsc": "2.1.6",
+    "@xwiki/cristal-dev-config": "0.11.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/vuetifyDesignSystemLoader.ts

@@ -24,6 +24,7 @@ import { VCol, VContainer, VRow, VTextField } from "vuetify/components";
 import type { DesignSystemLoader } from "@xwiki/cristal-api";
 
 import { createVuetify } from "vuetify";
+import colors from "vuetify/util/colors";
 import { mdi } from "vuetify/iconsets/mdi";
 import * as directives from "vuetify/directives";
 import { injectable } from "inversify";
@@ -56,6 +57,18 @@ export class VuetifyDesignSystemLoader implements DesignSystemLoader {
           mdi,
         },
       },
+      theme: {
+        themes: {
+          light: {
+            dark: false,
+            colors: {
+              background: "#FFFFFF",
+              primary: colors.blue.darken4,
+              secondary: colors.blueGrey.darken4,
+            },
+          },
+        },
+      },
     });
     app.use(vuetify);
     // Native Vuetify components
@@ -83,6 +96,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",
@@ -115,5 +133,10 @@ export class VuetifyDesignSystemLoader implements DesignSystemLoader {
       "XFileInput",
       () => import("../vue/form/x-file-input.vue"),
     );
+    registerAsyncComponent(
+      app,
+      "XNavigationTree",
+      () => import("../vue/x-navigation-tree.vue"),
+    );
   }
 }

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

@@ -0,0 +1,42 @@
+/*
+ * 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";
+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,53 @@
+/*
+ * 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 { describe, expect, it } from "vitest";
+import { mount, VueWrapper } from "@vue/test-utils";
+import XBtn from "../x-btn.vue";
+import { addVuetifyOptions } from "./utils/vuetify";
+
+/**
+ * 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

@@ -26,10 +26,11 @@
 
 :root {
   --cr-sizes-max-page-width: 960px; /*This value controls the width of the main content. It should be 100% for spanning text along the whole width or an arbitraty value*/
-  --cr-sizes-left-sidebar-width: 15%; /*The default width of the sidebar*/
-  --cr-sizes-left-sidebar-min-width: 250px; /*The minimum width of the sidebar*/
-  --cr-sizes-collapsed-sidebar-width: 32px; /*The width of the bar that gets shown containing the menu button to reopen the standard left sidebar*/
+  --cr-sizes-main-sidebar-width: 15%; /*The default width of the main sidebar*/
+  --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/x-alert.vue

@@ -17,23 +17,20 @@ 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">
-    <slot />
+  <v-alert 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
+    >
   </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>