@nathapp/na-cli 1.0.1-rc.6 → 1.0.2

package/dist/templates/vuexy-portal/src/@layouts/components/TransitionExpand.vue

@@ -0,0 +1,92 @@
+<!-- Thanks: https://markus.oberlehner.net/blog/transition-to-height-auto-with-vue/ -->
+
+<script lang="ts">
+import { Transition } from 'vue'
+
+export default defineComponent({
+  name: 'TransitionExpand',
+  setup(_, { slots }) {
+    const onEnter = (element: HTMLElement) => {
+      const width = getComputedStyle(element).width
+
+      element.style.width = width
+      element.style.position = 'absolute'
+      element.style.visibility = 'hidden'
+      element.style.height = 'auto'
+
+      const height = getComputedStyle(element).height
+
+      element.style.width = ''
+      element.style.position = ''
+      element.style.visibility = ''
+      element.style.height = '0px'
+
+      // Force repaint to make sure the
+      // animation is triggered correctly.
+      // eslint-disable-next-line no-unused-expressions
+      getComputedStyle(element).height
+
+      // Trigger the animation.
+      // We use `requestAnimationFrame` because we need
+      // to make sure the browser has finished
+      // painting after setting the `height`
+      // to `0` in the line above.
+      requestAnimationFrame(() => {
+        element.style.height = height
+      })
+    }
+
+    const onAfterEnter = (element: HTMLElement) => {
+      element.style.height = 'auto'
+    }
+
+    const onLeave = (element: HTMLElement) => {
+      const height = getComputedStyle(element).height
+
+      element.style.height = height
+
+      // Force repaint to make sure the
+      // animation is triggered correctly.
+      // eslint-disable-next-line no-unused-expressions
+      getComputedStyle(element).height
+
+      requestAnimationFrame(() => {
+        element.style.height = '0px'
+      })
+    }
+
+    return () => h(
+      h(Transition),
+      {
+        name: 'expand',
+        onEnter,
+        onAfterEnter,
+        onLeave,
+      },
+      () => slots.default?.(),
+    )
+  },
+})
+</script>
+
+<style>
+.expand-enter-active,
+.expand-leave-active {
+  overflow: hidden;
+  transition: block-size var(--expand-transition-duration, 0.25s) ease;
+}
+
+.expand-enter-from,
+.expand-leave-to {
+  block-size: 0;
+}
+</style>
+
+<style scoped>
+* {
+  backface-visibility: hidden;
+  perspective: 1000px;
+  transform: translateZ(0);
+  will-change: block-size;
+}
+</style>

package/dist/templates/vuexy-portal/src/@layouts/components/VNodeRenderer.tsx

@@ -0,0 +1,17 @@
+import type { PropType, VNode } from 'vue'
+
+export const VNodeRenderer = defineComponent({
+  name: 'VNodeRenderer',
+  props: {
+    nodes: {
+      type: [Array, Object] as PropType<VNode | VNode[]>,
+      required: true,
+    },
+  },
+  setup(props) {
+    return () => props.nodes
+  },
+})
+
+// eslint-disable-next-line @typescript-eslint/no-redeclare
+export type VNodeRenderer = InstanceType<typeof VNodeRenderer>

package/dist/templates/vuexy-portal/src/@layouts/components/VerticalNav.vue

@@ -0,0 +1,236 @@
+<script lang="ts" setup>
+import type { Component } from 'vue'
+import { PerfectScrollbar } from 'vue3-perfect-scrollbar'
+import { VNodeRenderer } from './VNodeRenderer'
+import { layoutConfig } from '@layouts'
+import { VerticalNavGroup, VerticalNavLink, VerticalNavSectionTitle } from '@layouts/components'
+import { useLayoutConfigStore } from '@layouts/stores/config'
+import { injectionKeyIsVerticalNavHovered } from '@layouts/symbols'
+import type { NavGroup, NavLink, NavSectionTitle, VerticalNavItems } from '@layouts/types'
+
+interface Props {
+  tag?: string | Component
+  navItems: VerticalNavItems
+  isOverlayNavActive: boolean
+  toggleIsOverlayNavActive: (value: boolean) => void
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  tag: 'aside',
+})
+
+const refNav = ref()
+
+const isHovered = useElementHover(refNav)
+
+provide(injectionKeyIsVerticalNavHovered, isHovered)
+
+const configStore = useLayoutConfigStore()
+
+const resolveNavItemComponent = (item: NavLink | NavSectionTitle | NavGroup): unknown => {
+  if ('heading' in item)
+    return VerticalNavSectionTitle
+  if ('children' in item)
+    return VerticalNavGroup
+
+  return VerticalNavLink
+}
+
+/*
+  ℹ️ Close overlay side when route is changed
+  Close overlay vertical nav when link is clicked
+*/
+const route = useRoute()
+
+watch(() => route.name, () => {
+  props.toggleIsOverlayNavActive(false)
+})
+
+const isVerticalNavScrolled = ref(false)
+const updateIsVerticalNavScrolled = (val: boolean) => isVerticalNavScrolled.value = val
+
+const handleNavScroll = (evt: Event) => {
+  isVerticalNavScrolled.value = (evt.target as HTMLElement).scrollTop > 0
+}
+
+const hideTitleAndIcon = configStore.isVerticalNavMini(isHovered)
+</script>
+
+<template>
+  <Component
+    :is="props.tag"
+    ref="refNav"
+    class="layout-vertical-nav"
+    :class="[
+      {
+        'overlay-nav': configStore.isLessThanOverlayNavBreakpoint,
+        'hovered': isHovered,
+        'visible': isOverlayNavActive,
+        'scrolled': isVerticalNavScrolled,
+      },
+    ]"
+  >
+    <!-- 👉 Header -->
+    <div class="nav-header">
+      <slot name="nav-header">
+        <RouterLink
+          to="/"
+          class="app-logo app-title-wrapper"
+        >
+          <VNodeRenderer :nodes="layoutConfig.app.logo" />
+
+          <Transition name="vertical-nav-app-title">
+            <h1
+              v-show="!hideTitleAndIcon"
+              class="app-logo-title"
+            >
+              {{ layoutConfig.app.title }}
+            </h1>
+          </Transition>
+        </RouterLink>
+        <!-- 👉 Vertical nav actions -->
+        <!-- Show toggle collapsible in >md and close button in <md -->
+        <Component
+          :is="layoutConfig.app.iconRenderer || 'div'"
+          v-show="configStore.isVerticalNavCollapsed"
+          class="header-action d-none nav-unpin"
+          :class="configStore.isVerticalNavCollapsed && 'd-lg-block'"
+          v-bind="layoutConfig.icons.verticalNavUnPinned"
+          @click="configStore.isVerticalNavCollapsed = !configStore.isVerticalNavCollapsed"
+        />
+        <Component
+          :is="layoutConfig.app.iconRenderer || 'div'"
+          v-show="!configStore.isVerticalNavCollapsed"
+          class="header-action d-none nav-pin"
+          :class="!configStore.isVerticalNavCollapsed && 'd-lg-block'"
+          v-bind="layoutConfig.icons.verticalNavPinned"
+          @click="configStore.isVerticalNavCollapsed = !configStore.isVerticalNavCollapsed"
+        />
+        <Component
+          :is="layoutConfig.app.iconRenderer || 'div'"
+          class="header-action d-lg-none"
+          v-bind="layoutConfig.icons.close"
+          @click="toggleIsOverlayNavActive(false)"
+        />
+      </slot>
+    </div>
+    <slot name="before-nav-items">
+      <div class="vertical-nav-items-shadow" />
+    </slot>
+    <slot
+      name="nav-items"
+      :update-is-vertical-nav-scrolled="updateIsVerticalNavScrolled"
+    >
+      <PerfectScrollbar
+        :key="configStore.isAppRTL"
+        tag="ul"
+        class="nav-items"
+        :options="{ wheelPropagation: false }"
+        @ps-scroll-y="handleNavScroll"
+      >
+        <Component
+          :is="resolveNavItemComponent(item)"
+          v-for="(item, index) in navItems"
+          :key="index"
+          :item="item"
+        />
+      </PerfectScrollbar>
+    </slot>
+  </Component>
+</template>
+
+<style lang="scss" scoped>
+.app-logo {
+  display: flex;
+  align-items: center;
+  column-gap: 0.75rem;
+
+  .app-logo-title {
+    font-size: 1.375rem;
+    font-weight: 700;
+    letter-spacing: 0.25px;
+    line-height: 1.5rem;
+    text-transform: capitalize;
+  }
+}
+</style>
+
+<style lang="scss">
+@use "@configured-variables" as variables;
+@use "@layouts/styles/mixins";
+
+// 👉 Vertical Nav
+.layout-vertical-nav {
+  position: fixed;
+  z-index: variables.$layout-vertical-nav-z-index;
+  display: flex;
+  flex-direction: column;
+  block-size: 100%;
+  inline-size: variables.$layout-vertical-nav-width;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  transition: inline-size 0.25s ease-in-out, box-shadow 0.25s ease-in-out;
+  will-change: transform, inline-size;
+
+  .nav-header {
+    display: flex;
+    align-items: center;
+
+    .header-action {
+      cursor: pointer;
+
+      @at-root {
+        #{variables.$selector-vertical-nav-mini} .nav-header .header-action {
+          &.nav-pin,
+          &.nav-unpin {
+            display: none !important;
+          }
+        }
+      }
+    }
+  }
+
+  .app-title-wrapper {
+    margin-inline-end: auto;
+  }
+
+  .nav-items {
+    block-size: 100%;
+
+    // ℹ️ We no loner needs this overflow styles as perfect scrollbar applies it
+    // overflow-x: hidden;
+
+    // // ℹ️ We used `overflow-y` instead of `overflow` to mitigate overflow x. Revert back if any issue found.
+    // overflow-y: auto;
+  }
+
+  .nav-item-title {
+    overflow: hidden;
+    margin-inline-end: auto;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  // 👉 Collapsed
+  .layout-vertical-nav-collapsed & {
+    &:not(.hovered) {
+      inline-size: variables.$layout-vertical-nav-collapsed-width;
+    }
+  }
+}
+
+// Small screen vertical nav transition
+@media (max-width: 1279px) {
+  .layout-vertical-nav {
+    &:not(.visible) {
+      transform: translateX(-#{variables.$layout-vertical-nav-width});
+
+      @include mixins.rtl {
+        transform: translateX(variables.$layout-vertical-nav-width);
+      }
+    }
+
+    transition: transform 0.25s ease-in-out;
+  }
+}
+</style>

package/dist/templates/vuexy-portal/src/@layouts/components/VerticalNavGroup.vue

@@ -0,0 +1,267 @@
+<script lang="ts" setup>
+import { TransitionGroup } from 'vue'
+import { layoutConfig } from '@layouts'
+import { TransitionExpand, VerticalNavLink } from '@layouts/components'
+import { canViewNavMenuGroup } from '@layouts/plugins/casl'
+import { useLayoutConfigStore } from '@layouts/stores/config'
+import { injectionKeyIsVerticalNavHovered } from '@layouts/symbols'
+import type { NavGroup } from '@layouts/types'
+import { getDynamicI18nProps, isNavGroupActive, openGroups } from '@layouts/utils'
+
+defineOptions({
+  name: 'VerticalNavGroup',
+})
+
+const props = defineProps<{
+  item: NavGroup
+}>()
+
+const route = useRoute()
+const router = useRouter()
+const configStore = useLayoutConfigStore()
+const hideTitleAndBadge = configStore.isVerticalNavMini()
+
+/*
+  ℹ️ We provided default value `ref(false)` because inject will return `T | undefined`
+  Docs: https://vuejs.org/api/composition-api-dependency-injection.html#inject
+*/
+const isVerticalNavHovered = inject(injectionKeyIsVerticalNavHovered, ref(false))
+
+/*
+  ℹ️ We have to add watcher for `isVerticalNavCollapsed` to open & close the group when menu collapse state is changed
+  We can't rely on watcher for `isVerticalNavHovered` because nav menu can be collapsed via customizer (basically without entering mouse inside nav menu)
+  Hence, watcher for `isVerticalNavHovered` won't get triggered and there will no change in open state of nav group when menu is collapsed via customizer.
+*/
+// watch(isVerticalNavCollapsed, value => {
+//   // If mouse in nav menu `isVerticalNavHovered` watcher will take care of open/close group
+//   if (isVerticalNavHovered.value)
+//     return
+
+//   isGroupOpen.value = value ? false : isGroupActive.value
+// })
+
+const isGroupActive = ref(false)
+const isGroupOpen = ref(false)
+
+/**
+ * Checks if any of children group is open or not.
+ * This is helpful in preventing closing inactive parent group when inactive child group is opened. (i.e. Do not close "Nav Levels" group if child "Nav Level 2.2" is opened/clicked)
+ *
+ * @param {NavGroup['children']} children  - Nav group children
+ * @return {boolean} returns if any of children is open or not.
+ */
+const isAnyChildOpen = (children: NavGroup['children']): boolean => {
+  return children.some(child => {
+    let result = openGroups.value.includes(child.title)
+
+    if ('children' in child)
+      result = isAnyChildOpen(child.children) || result
+
+    return result
+  })
+}
+
+const collapseChildren = (children: NavGroup['children']) => {
+  children.forEach(child => {
+    if ('children' in child)
+      collapseChildren(child.children)
+
+    openGroups.value = openGroups.value.filter(group => group !== child.title)
+  })
+}
+
+/*
+  Watch for route changes, more specifically route path. Do note that this won't trigger if route's query is updated.
+
+  updates isActive & isOpen based on active state of group.
+*/
+watch(() => route.path, () => {
+  const isActive = isNavGroupActive(props.item.children, router)
+
+  // Don't open group if vertical nav is collapsed and window size is more than overlay nav breakpoint
+  isGroupOpen.value = isActive && !configStore.isVerticalNavMini(isVerticalNavHovered).value
+  isGroupActive.value = isActive
+}, { immediate: true })
+
+/*
+  Watch for isGroupOpen
+
+    1. Find group index for adding/removing group from openGroups array
+    2. update openGroups array for addition/removal of current group
+
+  We need `immediate: true` because without it initially opened group is not added in openGroups array
+*/
+watch(isGroupOpen, (val: boolean) => {
+  // Find group index for adding/removing group from openGroups array
+  const grpIndex = openGroups.value.indexOf(props.item.title)
+
+  // update openGroups array for addition/removal of current group
+
+  // If group is opened => Add it to `openGroups` array
+  if (val && grpIndex === -1) {
+    openGroups.value.push(props.item.title)
+  }
+
+  // If group is closed remove itself and its children from the `openGroups`
+  else if (!val && grpIndex !== -1) {
+    openGroups.value.splice(grpIndex, 1)
+    collapseChildren(props.item.children)
+  }
+}, { immediate: true })
+
+/*
+  Watch for openGroups
+
+  It will help in making vertical nav adapting the behavior of accordion.
+  If we open multiple groups without navigating to any route we must close the inactive or temporarily opened groups.
+
+  😵‍💫 Gotchas:
+    * If we open inactive group then it will auto close that group because we close groups based on active state.
+      Goal of this watcher is auto close groups which are not active when openGroups array is updated.
+      So, we have to find a way to do not close recently opened inactive group.
+      For this we will fetch recently added group in openGroups array and won't perform closing operation if recently added group is current group
+*/
+watch(openGroups, val => {
+  // Prevent closing recently opened inactive group.
+  const lastOpenedGroup = val.at(-1)
+  if (lastOpenedGroup === props.item.title)
+    return
+
+  const isActive = isNavGroupActive(props.item.children, router)
+
+  // Goal of this watcher is to close inactive groups. So don't do anything for active groups.
+  if (isActive)
+    return
+
+  // We won't close group if any of child group is open in current group
+  if (isAnyChildOpen(props.item.children))
+    return
+
+  isGroupOpen.value = isActive
+  isGroupActive.value = isActive
+}, { deep: true })
+
+// ℹ️ Previously instead of below watcher we were using two individual watcher for `isVerticalNavHovered`, `isVerticalNavCollapsed` & `isLessThanOverlayNavBreakpoint`
+watch(
+  configStore.isVerticalNavMini(isVerticalNavHovered),
+  val => {
+    isGroupOpen.value = val ? false : isGroupActive.value
+  },
+)
+
+// watch(isVerticalNavHovered, val => {
+//   // If menu is not collapsed ignore
+//   if (!(isVerticalNavCollapsed.value && !isLessThanOverlayNavBreakpoint.value(windowWidth.value)))
+//     return
+
+//   isGroupOpen.value = val ? isGroupActive.value : false
+// })
+
+/*
+  Update: We don't need this watcher any more because we have new watch isVerticalNavMini that includes this one
+  ℹ️ We need this watcher to
+    - Collapse the group when going to `lgAndUp` if vertical nav is collapsed (else block)
+    - Expand the group if it's active and screen is `mdAndDown`. Because in this screen vertical nav will be overlay nav
+*/
+// watch(() => isLessThanOverlayNavBreakpoint.value(windowWidth.value), isLessThanOverlayNavBreakpoint_ => {
+//   // If window size is more than overlay nav breakpoint => expand group if its active
+//   if (isLessThanOverlayNavBreakpoint_) { isGroupOpen.value = isGroupActive.value }
+
+//   else {
+//     if (isVerticalNavCollapsed.value)
+//       isGroupOpen.value = false
+//   }
+// })
+
+const isMounted = useMounted()
+</script>
+
+<template>
+  <li
+    v-if="canViewNavMenuGroup(item)"
+    class="nav-group"
+    :class="[
+      {
+        active: isGroupActive,
+        open: isGroupOpen,
+        disabled: item.disable,
+      },
+    ]"
+  >
+    <div
+      class="nav-group-label"
+      @click="isGroupOpen = !isGroupOpen"
+    >
+      <Component
+        :is="layoutConfig.app.iconRenderer || 'div'"
+        v-bind="item.icon || layoutConfig.verticalNav.defaultNavItemIconProps"
+        class="nav-item-icon"
+      />
+      <!--
+        ℹ️ isMounted is workaround of nuxt's hydration issue:
+        https://github.com/vuejs/core/issues/6715
+      -->
+      <Component
+        :is="isMounted ? TransitionGroup : 'div'"
+        name="transition-slide-x"
+        v-bind="!isMounted ? { class: 'd-flex align-center flex-grow-1' } : undefined"
+      >
+        <!-- 👉 Title -->
+        <Component
+          :is=" layoutConfig.app.i18n.enable ? 'i18n-t' : 'span'"
+          v-bind="getDynamicI18nProps(item.title, 'span')"
+          v-show="!hideTitleAndBadge"
+          key="title"
+          class="nav-item-title"
+        >
+          {{ item.title }}
+        </Component>
+
+        <!-- 👉 Badge -->
+        <Component
+          :is="layoutConfig.app.i18n.enable ? 'i18n-t' : 'span'"
+          v-bind="getDynamicI18nProps(item.badgeContent, 'span')"
+          v-show="!hideTitleAndBadge"
+          v-if="item.badgeContent"
+          key="badge"
+          class="nav-item-badge"
+          :class="item.badgeClass"
+        >
+          {{ item.badgeContent }}
+        </Component>
+        <Component
+          :is="layoutConfig.app.iconRenderer || 'div'"
+          v-show="!hideTitleAndBadge"
+          v-bind="layoutConfig.icons.chevronRight"
+          key="arrow"
+          class="nav-group-arrow"
+        />
+      </Component>
+    </div>
+    <TransitionExpand>
+      <ul
+        v-show="isGroupOpen"
+        class="nav-group-children"
+      >
+        <Component
+          :is="'children' in child ? 'VerticalNavGroup' : VerticalNavLink"
+          v-for="child in item.children"
+          :key="child.title"
+          :item="child"
+        />
+      </ul>
+    </TransitionExpand>
+  </li>
+</template>
+
+<style lang="scss">
+.layout-vertical-nav {
+  .nav-group {
+    &-label {
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+    }
+  }
+}
+</style>