@nathapp/na-cli 1.0.1-rc.1 → 1.0.1

package/dist/templates/vuexy-portal/src/@core/components/BuyNow.vue

@@ -0,0 +1,92 @@
+<script lang="ts" setup>
+const vm = getCurrentInstance()
+
+const buyNowUrl = ref(vm?.appContext.config.globalProperties.buyNowUrl || 'https://1.envato.market/vuexy_admin')
+
+watch(buyNowUrl, val => {
+  if (vm)
+    vm.appContext.config.globalProperties.buyNowUrl = val
+})
+</script>
+
+<template>
+  <a
+    class="buy-now-button d-print-none"
+    role="button"
+    rel="noopener noreferrer"
+    :href="buyNowUrl"
+    target="_blank"
+  >
+    Buy Now
+    <span class="button-inner" />
+  </a>
+</template>
+
+<style lang="scss" scoped>
+.buy-now-button,
+.button-inner {
+  display: inline-flex;
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  border-radius: 6px;
+  margin: 0;
+  animation: anime 12s linear infinite;
+  appearance: none;
+  background: linear-gradient(-45deg, #ffa63d, #ff3d77, #338aff, #3cf0c5);
+  background-size: 600%;
+  color: rgba(255, 255, 255, 90%);
+  cursor: pointer;
+  font-size: 0.9375rem;
+  font-weight: 500;
+  letter-spacing: 0.43px;
+  line-height: 1.2;
+  min-inline-size: 50px;
+  outline: 0;
+  padding-block: 0.625rem;
+  padding-inline: 1.25rem;
+  text-decoration: none;
+  text-transform: none;
+  vertical-align: middle;
+}
+
+.buy-now-button {
+  position: fixed;
+  z-index: 999;
+  inset-block-end: 5%;
+  inset-inline-end: 87px;
+
+  &:hover {
+    color: white;
+    text-decoration: none;
+  }
+
+  .button-inner {
+    position: absolute;
+    z-index: -1;
+    filter: blur(12px);
+    inset: 0;
+    opacity: 0;
+    transition: opacity 200ms ease-in-out;
+  }
+
+  &:not(:hover) .button-inner {
+    opacity: 0.8;
+  }
+}
+
+@keyframes anime {
+  0% {
+    background-position: 0% 50%;
+  }
+
+  50% {
+    background-position: 100% 50%;
+  }
+
+  100% {
+    background-position: 0% 50%;
+  }
+}
+</style>

package/dist/templates/vuexy-portal/src/@core/components/CardStatisticsVerticalSimple.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+interface Props {
+  title: string
+  color?: string
+  icon: string
+  stats: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  color: 'primary',
+})
+</script>
+
+<template>
+  <VCard>
+    <VCardText class="d-flex flex-column align-center justify-center">
+      <VAvatar
+        v-if="props.icon"
+        size="40"
+        variant="tonal"
+        rounded
+        :color="props.color"
+      >
+        <VIcon :icon="props.icon" />
+      </VAvatar>
+
+      <h5 class="text-h5 pt-2 mb-1">
+        {{ props.stats }}
+      </h5>
+      <div class="text-body-1">
+        {{ props.title }}
+      </div>
+    </VCardText>
+  </VCard>
+</template>

package/dist/templates/vuexy-portal/src/@core/components/CustomizerSection.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+interface Props {
+  title: string
+  divider?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  divider: true,
+})
+</script>
+
+<template>
+  <VDivider v-if="props.divider" />
+
+  <div class="customizer-section">
+    <div>
+      <VChip
+        size="small"
+        color="primary"
+      >
+        <span class="font-weight-medium">{{ props.title }}</span>
+      </VChip>
+    </div>
+
+    <slot />
+  </div>
+</template>

package/dist/templates/vuexy-portal/src/@core/components/DialogCloseBtn.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+interface Props {
+  icon?: string
+  iconSize?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  icon: 'tabler-x',
+  iconSize: '20',
+})
+</script>
+
+<template>
+  <IconBtn
+    variant="elevated"
+    size="30"
+    :ripple="false"
+    class="v-dialog-close-btn"
+  >
+    <VIcon
+      :icon="props.icon"
+      :size="props.iconSize"
+    />
+  </IconBtn>
+</template>

package/dist/templates/vuexy-portal/src/@core/components/DropZone.vue

@@ -0,0 +1,135 @@
+<script setup lang="ts">
+import { useDropZone, useFileDialog, useObjectUrl } from '@vueuse/core'
+
+const dropZoneRef = ref<HTMLDivElement>()
+interface FileData {
+  file: File
+  url: string
+}
+
+const fileData = ref<FileData[]>([])
+const { open, onChange } = useFileDialog({ accept: 'image/*' })
+
+function onDrop(DroppedFiles: File[] | null) {
+  DroppedFiles?.forEach(file => {
+    if (file.type.slice(0, 6) !== 'image/') {
+      // eslint-disable-next-line no-alert
+      alert('Only image files are allowed')
+
+      return
+    }
+
+    fileData.value.push({
+      file,
+      url: useObjectUrl(file).value ?? '',
+    })
+  },
+  )
+}
+
+onChange((selectedFiles: any) => {
+  if (!selectedFiles)
+    return
+
+  for (const file of selectedFiles) {
+    fileData.value.push({
+      file,
+      url: useObjectUrl(file).value ?? '',
+    })
+  }
+})
+
+useDropZone(dropZoneRef, onDrop)
+</script>
+
+<template>
+  <div class="flex">
+    <div class="w-full h-auto relative">
+      <div
+        ref="dropZoneRef"
+        class="cursor-pointer"
+        @click="() => open()"
+      >
+        <div
+          v-if="fileData.length === 0"
+          class="d-flex flex-column justify-center align-center gap-y-2 pa-12 drop-zone rounded"
+        >
+          <IconBtn
+            variant="tonal"
+            class="rounded-sm"
+          >
+            <VIcon icon="tabler-upload" />
+          </IconBtn>
+          <h4 class="text-h4">
+            Drag and drop your image here.
+          </h4>
+          <span class="text-disabled">or</span>
+
+          <VBtn
+            variant="tonal"
+            size="small"
+          >
+            Browse Images
+          </VBtn>
+        </div>
+
+        <div
+          v-else
+          class="d-flex justify-center align-center gap-3 pa-8 drop-zone flex-wrap"
+        >
+          <VRow class="match-height w-100">
+            <template
+              v-for="(item, index) in fileData"
+              :key="index"
+            >
+              <VCol
+                cols="12"
+                sm="4"
+              >
+                <VCard
+                  :ripple="false"
+                  border
+                >
+                  <VCardText
+                    class="d-flex flex-column"
+                    @click.stop
+                  >
+                    <VImg
+                      :src="item.url"
+                      width="200px"
+                      height="150px"
+                      class="w-100 mx-auto"
+                    />
+                    <div class="mt-2">
+                      <span class="clamp-text text-wrap">
+                        {{ item.file.name }}
+                      </span>
+                      <span>
+                        {{ item.file.size / 1000 }} KB
+                      </span>
+                    </div>
+                  </VCardText>
+                  <VCardActions>
+                    <VBtn
+                      variant="text"
+                      block
+                      @click.stop="fileData.splice(index, 1)"
+                    >
+                      Remove File
+                    </VBtn>
+                  </VCardActions>
+                </VCard>
+              </VCol>
+            </template>
+          </VRow>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.drop-zone {
+  border: 1px dashed rgba(var(--v-theme-on-surface), var(--v-border-opacity));
+}
+</style>

package/dist/templates/vuexy-portal/src/@core/components/I18n.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import type { I18nLanguage } from '@layouts/types'
+
+interface Props {
+  languages: I18nLanguage[]
+  location?: any
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  location: 'bottom end',
+})
+
+const { locale } = useI18n({ useScope: 'global' })
+</script>
+
+<template>
+  <IconBtn>
+    <VIcon
+      size="24"
+      icon="tabler-language"
+    />
+
+    <!-- Menu -->
+    <VMenu
+      activator="parent"
+      :location="props.location"
+      offset="12px"
+    >
+      <!-- List -->
+      <VList
+        :selected="[locale]"
+        color="primary"
+        min-width="175px"
+      >
+        <!-- List item -->
+        <VListItem
+          v-for="lang in props.languages"
+          :key="lang.i18nLang"
+          :value="lang.i18nLang"
+          @click="locale = lang.i18nLang"
+        >
+          <!-- Language label -->
+          <VListItemTitle>{{ lang.label }}</VListItemTitle>
+        </VListItem>
+      </VList>
+    </VMenu>
+  </IconBtn>
+</template>

package/dist/templates/vuexy-portal/src/@core/components/MoreBtn.vue

@@ -0,0 +1,24 @@
+<script lang="ts" setup>
+interface Props {
+  menuList?: unknown[]
+  itemProps?: boolean
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <IconBtn color="disabled">
+    <VIcon icon="tabler-dots-vertical" />
+
+    <VMenu
+      v-if="props.menuList"
+      activator="parent"
+    >
+      <VList
+        :items="props.menuList"
+        :item-props="props.itemProps"
+      />
+    </VMenu>
+  </IconBtn>
+</template>

package/dist/templates/vuexy-portal/src/@core/components/Notifications.vue

@@ -0,0 +1,245 @@
+<script lang="ts" setup>
+import { PerfectScrollbar } from 'vue3-perfect-scrollbar'
+import type { Notification } from '@layouts/types'
+
+interface Props {
+  notifications: Notification[]
+  badgeProps?: object
+  location?: any
+}
+interface Emit {
+  (e: 'read', value: number[]): void
+  (e: 'unread', value: number[]): void
+  (e: 'remove', value: number): void
+  (e: 'click:notification', value: Notification): void
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  location: 'bottom end',
+  badgeProps: undefined,
+})
+
+const emit = defineEmits<Emit>()
+
+const isAllMarkRead = computed(() => props.notifications.some(item => item.isSeen === false),
+)
+
+const markAllReadOrUnread = () => {
+  const allNotificationsIds = props.notifications.map(item => item.id)
+
+  if (!isAllMarkRead.value)
+    emit('unread', allNotificationsIds)
+  else
+    emit('read', allNotificationsIds)
+}
+
+const totalUnseenNotifications = computed(() => {
+  return props.notifications.filter(item => item.isSeen === false).length
+})
+
+const toggleReadUnread = (isSeen: boolean, Id: number) => {
+  if (isSeen)
+    emit('unread', [Id])
+  else
+    emit('read', [Id])
+}
+</script>
+
+<template>
+  <IconBtn id="notification-btn">
+    <VBadge
+      v-bind="props.badgeProps"
+      :model-value="props.notifications.some(n => !n.isSeen)"
+      color="error"
+      dot
+      offset-x="2"
+      offset-y="3"
+    >
+      <VIcon
+        size="24"
+        icon="tabler-bell"
+      />
+    </VBadge>
+
+    <VMenu
+      activator="parent"
+      width="380px"
+      :location="props.location"
+      offset="12px"
+      :close-on-content-click="false"
+    >
+      <VCard class="d-flex flex-column">
+        <!-- 👉 Header -->
+        <VCardItem class="notification-section">
+          <VCardTitle class="text-h6">
+            Notifications
+          </VCardTitle>
+
+          <template #append>
+            <VChip
+              v-show="props.notifications.some(n => !n.isSeen)"
+              size="small"
+              color="primary"
+              class="me-2"
+            >
+              {{ totalUnseenNotifications }} New
+            </VChip>
+            <IconBtn
+              v-show="props.notifications.length"
+              size="34"
+              @click="markAllReadOrUnread"
+            >
+              <VIcon
+                size="20"
+                color="high-emphasis"
+                :icon="!isAllMarkRead ? 'tabler-mail' : 'tabler-mail-opened' "
+              />
+
+              <VTooltip
+                activator="parent"
+                location="start"
+              >
+                {{ !isAllMarkRead ? 'Mark all as unread' : 'Mark all as read' }}
+              </VTooltip>
+            </IconBtn>
+          </template>
+        </VCardItem>
+
+        <VDivider />
+
+        <!-- 👉 Notifications list -->
+        <PerfectScrollbar
+          :options="{ wheelPropagation: false }"
+          style="max-block-size: 23.75rem;"
+        >
+          <VList class="notification-list rounded-0 py-0">
+            <template
+              v-for="(notification, index) in props.notifications"
+              :key="notification.title"
+            >
+              <VDivider v-if="index > 0" />
+              <VListItem
+                link
+                lines="one"
+                min-height="66px"
+                class="list-item-hover-class"
+                @click="$emit('click:notification', notification)"
+              >
+                <!-- Slot: Prepend -->
+                <!-- Handles Avatar: Image, Icon, Text -->
+                <div class="d-flex align-start gap-3">
+                  <VAvatar
+                    size="40"
+                    :color="notification.color && notification.icon ? notification.color : undefined"
+                    :image="notification.img || undefined"
+                    :icon="notification.icon || undefined"
+                    :variant="notification.img ? undefined : 'tonal' "
+                  >
+                    <span v-if="notification.text">{{ avatarText(notification.text) }}</span>
+                  </VAvatar>
+
+                  <div>
+                    <p class="text-sm font-weight-medium mb-1">
+                      {{ notification.title }}
+                    </p>
+                    <p
+                      class="text-body-2 mb-2"
+                      style=" letter-spacing: 0.4px !important; line-height: 18px;"
+                    >
+                      {{ notification.subtitle }}
+                    </p>
+                    <p
+                      class="text-sm text-disabled mb-0"
+                      style=" letter-spacing: 0.4px !important; line-height: 18px;"
+                    >
+                      {{ notification.time }}
+                    </p>
+                  </div>
+                  <VSpacer />
+
+                  <div class="d-flex flex-column align-end">
+                    <VIcon
+                      size="10"
+                      icon="tabler-circle-filled"
+                      :color="!notification.isSeen ? 'primary' : '#a8aaae'"
+                      :class="`${notification.isSeen ? 'visible-in-hover' : ''}`"
+                      class="mb-2"
+                      @click.stop="toggleReadUnread(notification.isSeen, notification.id)"
+                    />
+
+                    <VIcon
+                      size="20"
+                      icon="tabler-x"
+                      class="visible-in-hover"
+                      @click="$emit('remove', notification.id)"
+                    />
+                  </div>
+                </div>
+              </VListItem>
+            </template>
+
+            <VListItem
+              v-show="!props.notifications.length"
+              class="text-center text-medium-emphasis"
+              style="block-size: 56px;"
+            >
+              <VListItemTitle>No Notification Found!</VListItemTitle>
+            </VListItem>
+          </VList>
+        </PerfectScrollbar>
+
+        <VDivider />
+
+        <!-- 👉 Footer -->
+        <VCardText
+          v-show="props.notifications.length"
+          class="pa-4"
+        >
+          <VBtn
+            block
+            size="small"
+          >
+            View All Notifications
+          </VBtn>
+        </VCardText>
+      </VCard>
+    </VMenu>
+  </IconBtn>
+</template>
+
+<style lang="scss">
+.notification-section {
+  padding-block: 0.75rem;
+  padding-inline: 1rem;
+}
+
+.list-item-hover-class {
+  .visible-in-hover {
+    display: none;
+  }
+
+  &:hover {
+    .visible-in-hover {
+      display: block;
+    }
+  }
+}
+
+.notification-list.v-list {
+  .v-list-item {
+    border-radius: 0 !important;
+    margin: 0 !important;
+    padding-block: 0.75rem !important;
+  }
+}
+
+// Badge Style Override for Notification Badge
+.notification-badge {
+  .v-badge__badge {
+    /* stylelint-disable-next-line liberty/use-logical-spec */
+    min-width: 18px;
+    padding: 0;
+    block-size: 18px;
+  }
+}
+</style>