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

package/dist/templates/vuexy-portal/src/@custom/components/ConfirmationDialog.vue

@@ -0,0 +1,155 @@
+<script setup lang="ts">
+interface Props {
+  confirmationQuestion: string
+  isDialogVisible: boolean
+  confirmTitle?: string
+  confirmMsg?: string
+  cancelTitle?: string
+  cancelMsg?: string
+}
+
+interface Emit {
+  (e: 'update:isDialogVisible', value: boolean): void
+  (e: 'confirm', value: boolean): void
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<Emit>()
+
+const confirmed = ref(false)
+const cancelled = ref(false)
+
+const updateModelValue = (val: boolean) => {
+  emit('update:isDialogVisible', val)
+}
+
+const onConfirmation = () => {
+  emit('confirm', true)
+  updateModelValue(false)
+  confirmed.value = true
+}
+
+const onCancel = () => {
+  emit('confirm', false)
+  emit('update:isDialogVisible', false)
+  cancelled.value = true
+}
+</script>
+
+<template>
+  <!-- 👉 Confirm Dialog -->
+  <VDialog
+    max-width="500"
+    :model-value="props.isDialogVisible"
+    @update:model-value="updateModelValue"
+  >
+    <VCard class="text-center px-10 py-6">
+      <VCardText>
+        <VBtn
+          icon
+          variant="outlined"
+          color="warning"
+          class="my-4"
+          style=" block-size: 88px;inline-size: 88px; pointer-events: none;"
+        >
+          <span class="text-5xl">!</span>
+        </VBtn>
+
+        <h6 class="text-lg font-weight-medium">
+          {{ props.confirmationQuestion }}
+        </h6>
+      </VCardText>
+
+      <VCardText class="d-flex align-center justify-center gap-2">
+        <VBtn
+          variant="elevated"
+          @click="onConfirmation"
+        >
+          {{ $t('common.confirm') }}
+        </VBtn>
+
+        <VBtn
+          color="secondary"
+          variant="tonal"
+          @click="onCancel"
+        >
+          {{ $t('common.cancel') }}
+        </VBtn>
+      </VCardText>
+    </VCard>
+  </VDialog>
+
+  <!-- Unsubscribed -->
+  <!--
+    <VDialog
+    v-model="unsubscribed"
+    max-width="500"
+    >
+    <VCard>
+    <VCardText class="text-center px-10 py-6">
+    <VBtn
+    icon
+    variant="outlined"
+    color="success"
+    class="my-4"
+    style=" block-size: 88px;inline-size: 88px; pointer-events: none;"
+    >
+    <VIcon
+    icon="tabler-check"
+    size="38"
+    />
+    </VBtn>
+
+    <h1 class="text-h4 mb-4">
+    {{ props.confirmTitle }}
+    </h1>
+
+    <p>{{ props.confirmMsg }}</p>
+
+    <VBtn
+    color="success"
+    @click="unsubscribed = false"
+    >
+    {{ $t('common.ok') }}
+    </VBtn>
+    </VCardText>
+    </VCard>
+    </VDialog>
+  -->
+
+  <!-- Cancelled -->
+  <!--
+    <VDialog
+    v-model="cancelled"
+    max-width="500"
+    >
+    <VCard>
+    <VCardText class="text-center px-10 py-6">
+    <VBtn
+    icon
+    variant="outlined"
+    color="error"
+    class="my-4"
+    style=" block-size: 88px;inline-size: 88px; pointer-events: none;"
+    >
+    <span class="text-5xl font-weight-light">X</span>
+    </VBtn>
+
+    <h1 class="text-h4 mb-4">
+    {{ props.cancelTitle }}
+    </h1>
+
+    <p>{{ props.cancelMsg }}</p>
+
+    <VBtn
+    color="success"
+    @click="cancelled = false"
+    >
+    {{ $t('common.ok') }}
+    </VBtn>
+    </VCardText>
+    </VCard>
+    </VDialog>
+  -->
+</template>

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

@@ -0,0 +1,35 @@
+<script lang="ts" setup>
+import { HorizontalNavGroup, HorizontalNavLink } from '@layouts/components'
+import type { HorizontalNavItems, NavGroup, NavLink } from '@layouts/types'
+
+defineProps<{
+  navItems: HorizontalNavItems
+}>()
+
+const resolveNavItemComponent = (item: NavLink | NavGroup) => {
+  if ('children' in item)
+    return HorizontalNavGroup
+
+  return HorizontalNavLink
+}
+</script>
+
+<template>
+  <ul class="nav-items">
+    <Component
+      :is="resolveNavItemComponent(item)"
+      v-for="(item, index) in navItems"
+      :key="index"
+      :item="item"
+    />
+  </ul>
+</template>
+
+<style lang="scss">
+.layout-wrapper.layout-nav-type-horizontal {
+  .nav-items {
+    display: flex;
+    flex-wrap: wrap;
+  }
+}
+</style>

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

@@ -0,0 +1,110 @@
+<script lang="ts" setup>
+import { layoutConfig } from '@layouts'
+import { HorizontalNavLink, HorizontalNavPopper } from '@layouts/components'
+import { canViewNavMenuGroup } from '@layouts/plugins/casl'
+import { useLayoutConfigStore } from '@layouts/stores/config'
+import type { NavGroup } from '@layouts/types'
+import { getDynamicI18nProps, isNavGroupActive } from '@layouts/utils'
+
+interface Props {
+  item: NavGroup
+  childrenAtEnd?: boolean
+
+  // ℹ️ We haven't added this prop in vertical nav because we don't need such differentiation in vertical nav for styling
+  isSubItem?: boolean
+}
+
+defineOptions({
+  name: 'HorizontalNavGroup',
+})
+
+const props = withDefaults(defineProps<Props>(), {
+  childrenAtEnd: false,
+  isSubItem: false,
+})
+
+const route = useRoute()
+const router = useRouter()
+const configStore = useLayoutConfigStore()
+
+const isGroupActive = ref(false)
+
+/*
+  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)
+
+  isGroupActive.value = isActive
+}, { immediate: true })
+</script>
+
+<template>
+  <HorizontalNavPopper
+    v-if="canViewNavMenuGroup(item)"
+    :is-rtl="configStore.isAppRTL"
+    class="nav-group"
+    tag="li"
+    content-container-tag="ul"
+    :class="[{
+      'active': isGroupActive,
+      'children-at-end': childrenAtEnd,
+      'sub-item': isSubItem,
+      'disabled': item.disable,
+    }]"
+    :popper-inline-end="childrenAtEnd"
+  >
+    <div class="nav-group-label">
+      <Component
+        :is="layoutConfig.app.iconRenderer || 'div'"
+        class="nav-item-icon"
+        v-bind="item.icon || layoutConfig.verticalNav.defaultNavItemIconProps"
+      />
+      <Component
+        :is="layoutConfig.app.i18n.enable ? 'i18n-t' : 'span'"
+        v-bind="getDynamicI18nProps(item.title, 'span')"
+        class="nav-item-title"
+      >
+        {{ item.title }}
+      </Component>
+      <Component
+        v-bind="layoutConfig.icons.chevronDown"
+        :is="layoutConfig.app.iconRenderer || 'div'"
+        class="nav-group-arrow"
+      />
+    </div>
+
+    <template #content>
+      <Component
+        :is="'children' in child ? 'HorizontalNavGroup' : HorizontalNavLink"
+        v-for="child in item.children"
+        :key="child.title"
+        :item="child"
+        children-at-end
+        is-sub-item
+      />
+    </template>
+  </HorizontalNavPopper>
+</template>
+
+<style lang="scss">
+.layout-horizontal-nav {
+  .nav-group {
+    .nav-group-label {
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+    }
+
+    .popper-content {
+      z-index: 1;
+
+      > div {
+        overflow: hidden auto;
+      }
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,150 @@
+<script lang="ts" setup>
+import { HorizontalNav } from '@layouts/components'
+import type { HorizontalNavItems } from '@layouts/types'
+
+// ℹ️ Using import from `@layouts` causing build to hangup
+// import { useLayouts } from '@layouts'
+import { useLayoutConfigStore } from '@layouts/stores/config'
+
+defineProps<{
+  navItems: HorizontalNavItems
+}>()
+
+const configStore = useLayoutConfigStore()
+</script>
+
+<template>
+  <div
+    class="layout-wrapper"
+    :class="configStore._layoutClasses"
+  >
+    <div
+      class="layout-navbar-and-nav-container"
+      :class="configStore.isNavbarBlurEnabled && 'header-blur'"
+    >
+      <!-- 👉 Navbar -->
+      <div class="layout-navbar">
+        <div class="navbar-content-container">
+          <slot name="navbar" />
+        </div>
+      </div>
+      <!-- 👉 Navigation -->
+      <div class="layout-horizontal-nav">
+        <div class="horizontal-nav-content-container">
+          <HorizontalNav :nav-items="navItems" />
+        </div>
+      </div>
+    </div>
+
+    <main class="layout-page-content">
+      <slot />
+    </main>
+
+    <!-- 👉 Footer -->
+    <footer class="layout-footer">
+      <div class="footer-content-container">
+        <slot name="footer" />
+      </div>
+    </footer>
+  </div>
+</template>
+
+<style lang="scss">
+@use "@configured-variables" as variables;
+@use "@layouts/styles/placeholders";
+@use "@layouts/styles/mixins";
+
+.layout-wrapper {
+  &.layout-nav-type-horizontal {
+    display: flex;
+    flex-direction: column;
+
+    // // TODO(v2): Check why we need height in vertical nav & min-height in horizontal nav
+    // min-height: 100%;
+    min-block-size: 100dvh;
+
+    .layout-navbar-and-nav-container {
+      z-index: 1;
+    }
+
+    .layout-navbar {
+      z-index: variables.$layout-horizontal-nav-layout-navbar-z-index;
+      block-size: variables.$layout-horizontal-nav-navbar-height;
+
+      // ℹ️ For now we are not independently managing navbar and horizontal nav so we won't use below style to avoid conflicting with combo style of navbar and horizontal nav
+      // If we add independent style of navbar & horizontal nav then we have to add :not for avoiding conflict with combo styles
+      // .layout-navbar-sticky & {
+      //   @extend %layout-navbar-sticky;
+      // }
+
+      // ℹ️ For now we are not independently managing navbar and horizontal nav so we won't use below style to avoid conflicting with combo style of navbar and horizontal nav
+      // If we add independent style of navbar & horizontal nav then we have to add :not for avoiding conflict with combo styles
+      // .layout-navbar-hidden & {
+      //   @extend %layout-navbar-hidden;
+      // }
+    }
+
+    // 👉 Navbar
+    .navbar-content-container {
+      @include mixins.boxed-content;
+    }
+
+    // 👉   Content height fixed
+    &.layout-content-height-fixed {
+      max-block-size: 100dvh;
+
+      .layout-page-content {
+        overflow: hidden;
+
+        > :first-child {
+          max-block-size: 100%;
+          overflow-y: auto;
+        }
+      }
+    }
+
+    // 👉 Footer
+    // Boxed content
+    .layout-footer {
+      .footer-content-container {
+        @include mixins.boxed-content;
+      }
+    }
+  }
+
+  // If both navbar & horizontal nav sticky
+  &.layout-navbar-sticky.horizontal-nav-sticky {
+    .layout-navbar-and-nav-container {
+      position: sticky;
+      inset-block-start: 0;
+      will-change: transform;
+    }
+  }
+
+  &.layout-navbar-hidden.horizontal-nav-hidden {
+    .layout-navbar-and-nav-container {
+      display: none;
+    }
+  }
+}
+
+// 👉 Horizontal nav nav
+.layout-horizontal-nav {
+  z-index: variables.$layout-horizontal-nav-z-index;
+
+  // .horizontal-nav-sticky & {
+  //   width: 100%;
+  //   will-change: transform;
+  //   position: sticky;
+  //   top: 0;
+  // }
+
+  // .horizontal-nav-hidden & {
+  //   display: none;
+  // }
+
+  .horizontal-nav-content-container {
+    @include mixins.boxed-content(true);
+  }
+}
+</style>

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

@@ -0,0 +1,56 @@
+<script lang="ts" setup>
+import { layoutConfig } from '@layouts'
+import { can } from '@layouts/plugins/casl'
+import type { NavLink } from '@layouts/types'
+import { getComputedNavLinkToProp, getDynamicI18nProps, isNavLinkActive } from '@layouts/utils'
+
+interface Props {
+  item: NavLink
+
+  // ℹ️ We haven't added this prop in vertical nav because we don't need such differentiation in vertical nav for styling
+  isSubItem?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  isSubItem: false,
+})
+</script>
+
+<template>
+  <li
+    v-if="can(item.action, item.subject)"
+    class="nav-link"
+    :class="[{
+      'sub-item': props.isSubItem,
+      'disabled': item.disable,
+    }]"
+  >
+    <Component
+      :is="item.to ? 'RouterLink' : 'a'"
+      v-bind="getComputedNavLinkToProp(item)"
+      :class="{ 'router-link-active router-link-exact-active': isNavLinkActive(item, $router) }"
+    >
+      <Component
+        :is="layoutConfig.app.iconRenderer || 'div'"
+        class="nav-item-icon"
+        v-bind="item.icon || layoutConfig.verticalNav.defaultNavItemIconProps"
+      />
+      <Component
+        :is="layoutConfig.app.i18n.enable ? 'i18n-t' : 'span'"
+        class="nav-item-title"
+        v-bind="getDynamicI18nProps(item.title, 'span')"
+      >
+        {{ item.title }}
+      </Component>
+    </Component>
+  </li>
+</template>
+
+<style lang="scss">
+.layout-horizontal-nav {
+  .nav-link a {
+    display: flex;
+    align-items: center;
+  }
+}
+</style>

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

@@ -0,0 +1,175 @@
+<script lang="ts" setup>
+import type { ReferenceElement } from '@floating-ui/dom'
+import { computePosition, flip, offset, shift } from '@floating-ui/dom'
+import { useLayoutConfigStore } from '@layouts/stores/config'
+import { themeConfig } from '@themeConfig'
+
+interface Props {
+  popperInlineEnd?: boolean
+  tag?: string
+  contentContainerTag?: string
+  isRtl?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  popperInlineEnd: false,
+  tag: 'div',
+  contentContainerTag: 'div',
+  isRTL: false,
+})
+
+const configStore = useLayoutConfigStore()
+const refPopperContainer = ref<ReferenceElement>()
+const refPopper = ref<HTMLElement>()
+
+const popperContentStyles = ref({
+  left: '0px',
+  top: '0px',
+})
+
+const updatePopper = async () => {
+  if (refPopperContainer.value !== undefined && refPopper.value !== undefined) {
+    const { x, y } = await computePosition(refPopperContainer.value,
+      refPopper.value, {
+        placement: props.popperInlineEnd ? (props.isRtl ? 'left-start' : 'right-start') : 'bottom-start',
+        middleware: [
+          ...(configStore.horizontalNavPopoverOffset ? [offset(configStore.horizontalNavPopoverOffset)] : []),
+          flip({ boundary: document.querySelector('body')!, padding: { bottom: 16 } }),
+
+          shift({ boundary: document.querySelector('body')!, padding: { bottom: 16 } }),
+        ],
+
+        /*
+      ℹ️ Why we are not using fixed positioning?
+
+      `position: fixed` doesn't work as expected when some CSS properties like `transform` is applied on its parent element.
+      Docs: https://developer.mozilla.org/en-US/docs/Web/CSS/position#values <= See `fixed` value description
+
+      Hence, when we use transitions where transition apply `transform` on its parent element, fixed positioning will not work.
+      (Popper content moves away from the element when parent element transition)
+
+      To avoid this, we use `position: absolute` instead of `position: fixed`.
+
+      NOTE: This issue starts from third level children (Top Level > Sub item > Sub item).
+    */
+        // strategy: 'fixed',
+      })
+
+    popperContentStyles.value.left = `${x}px`
+    popperContentStyles.value.top = `${y}px`
+  }
+}
+
+/*
+ 💡 Only add scroll event listener for updating position once horizontal nav is made static.
+  We don't want to update position every time user scrolls when horizontal nav is sticky
+*/
+until(() => configStore.horizontalNavType)
+  .toMatch(type => type === 'static')
+  .then(() => { useEventListener('scroll', updatePopper) })
+
+const isContentShown = ref(false)
+
+const showContent = () => {
+  isContentShown.value = true
+  updatePopper()
+}
+
+const hideContent = () => {
+  isContentShown.value = false
+}
+
+onMounted(updatePopper)
+
+// ℹ️ Recalculate popper position when it's triggerer changes its position
+watch(
+  [
+    () => configStore.isAppRTL,
+    () => configStore.appContentWidth,
+  ],
+  updatePopper,
+)
+
+// Watch for route changes and close popper content if route is changed
+const route = useRoute()
+
+watch(() => route.fullPath, hideContent)
+</script>
+
+<template>
+  <div
+    class="nav-popper"
+    :class="[{
+      'popper-inline-end': popperInlineEnd,
+      'show-content': isContentShown,
+    }]"
+  >
+    <div
+      ref="refPopperContainer"
+      class="popper-triggerer"
+      @mouseenter="showContent"
+      @mouseleave="hideContent"
+    >
+      <slot />
+    </div>
+
+    <!-- SECTION Popper Content -->
+    <!-- 👉 Without transition -->
+    <template v-if="!themeConfig.horizontalNav.transition">
+      <div
+        ref="refPopper"
+        class="popper-content"
+        :style="popperContentStyles"
+        @mouseenter="showContent"
+        @mouseleave="hideContent"
+      >
+        <div>
+          <slot name="content" />
+        </div>
+      </div>
+    </template>
+
+    <!-- 👉 CSS Transition -->
+    <template v-else-if="typeof themeConfig.horizontalNav.transition === 'string'">
+      <Transition :name="themeConfig.horizontalNav.transition">
+        <div
+          v-show="isContentShown"
+          ref="refPopper"
+          class="popper-content"
+          :style="popperContentStyles"
+          @mouseenter="showContent"
+          @mouseleave="hideContent"
+        >
+          <div>
+            <slot name="content" />
+          </div>
+        </div>
+      </Transition>
+    </template>
+
+    <!-- 👉 Transition Component -->
+    <template v-else>
+      <Component :is="themeConfig.horizontalNav.transition">
+        <div
+          v-show="isContentShown"
+          ref="refPopper"
+          class="popper-content"
+          :style="popperContentStyles"
+          @mouseenter="showContent"
+          @mouseleave="hideContent"
+        >
+          <div>
+            <slot name="content" />
+          </div>
+        </div>
+      </Component>
+    </template>
+    <!-- !SECTION -->
+  </div>
+</template>
+
+<style lang="scss">
+.popper-content {
+  position: absolute;
+}
+</style>