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

package/dist/templates/vuexy-portal/src/components/dialogs/UserInfoEditDialog.vue

@@ -0,0 +1,246 @@
+<script setup lang="ts">
+interface UserData {
+  id: number | null
+  fullName: string
+  firstName: string
+  lastName: string
+  company: string
+  username: string
+  role: string
+  country: string
+  contact: string
+  email: string
+  currentPlan: string
+  status: string
+  avatar: string
+  taskDone: number | null
+  projectDone: number | null
+  taxId: string
+  language: string
+}
+
+interface Props {
+  userData?: UserData
+  isDialogVisible: boolean
+}
+
+interface Emit {
+  (e: 'submit', value: UserData): void
+  (e: 'update:isDialogVisible', val: boolean): void
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  userData: () => ({
+    id: 0,
+    fullName: '',
+    firstName: '',
+    lastName: '',
+    company: '',
+    role: '',
+    username: '',
+    country: '',
+    contact: '',
+    email: '',
+    currentPlan: '',
+    status: '',
+    avatar: '',
+    taskDone: null,
+    projectDone: null,
+    taxId: '',
+    language: '',
+  }),
+})
+
+const emit = defineEmits<Emit>()
+
+const userData = ref<UserData>(structuredClone(toRaw(props.userData)))
+const isUseAsBillingAddress = ref(false)
+
+watch(props, () => {
+  userData.value = structuredClone(toRaw(props.userData))
+})
+
+const onFormSubmit = () => {
+  emit('update:isDialogVisible', false)
+  emit('submit', userData.value)
+}
+
+const onFormReset = () => {
+  userData.value = structuredClone(toRaw(props.userData))
+
+  emit('update:isDialogVisible', false)
+}
+
+const dialogModelValueUpdate = (val: boolean) => {
+  emit('update:isDialogVisible', val)
+}
+</script>
+
+<template>
+  <VDialog
+    :width="$vuetify.display.smAndDown ? 'auto' : 900"
+    :model-value="props.isDialogVisible"
+    @update:model-value="dialogModelValueUpdate"
+  >
+    <!-- Dialog close btn -->
+    <DialogCloseBtn @click="dialogModelValueUpdate(false)" />
+
+    <VCard class="pa-sm-10 pa-2">
+      <VCardText>
+        <!-- 👉 Title -->
+        <h4 class="text-h4 text-center mb-2">
+          Edit User Information
+        </h4>
+        <p class="text-body-1 text-center mb-6">
+          Updating user details will receive a privacy audit.
+        </p>
+
+        <!-- 👉 Form -->
+        <VForm
+          class="mt-6"
+          @submit.prevent="onFormSubmit"
+        >
+          <VRow>
+            <!-- 👉 First Name -->
+            <VCol
+              cols="12"
+              md="6"
+            >
+              <AppTextField
+                v-model="userData.firstName"
+                label="First Name"
+                placeholder="John"
+              />
+            </VCol>
+
+            <!-- 👉 Last Name -->
+            <VCol
+              cols="12"
+              md="6"
+            >
+              <AppTextField
+                v-model="userData.lastName"
+                label="Last Name"
+                placeholder="Doe"
+              />
+            </VCol>
+
+            <!-- 👉 Username -->
+            <VCol cols="12">
+              <AppTextField
+                v-model="userData.username"
+                label="Username"
+                placeholder="john.doe.007"
+              />
+            </VCol>
+
+            <!-- 👉 Billing Email -->
+            <VCol
+              cols="12"
+              md="6"
+            >
+              <AppTextField
+                v-model="userData.email"
+                label="Email"
+                placeholder="johndoe@email.com"
+              />
+            </VCol>
+
+            <!-- 👉 Status -->
+            <VCol
+              cols="12"
+              md="6"
+            >
+              <AppSelect
+                v-model="userData.status"
+                label="Status"
+                placeholder="Active"
+                :items="['Active', 'Inactive', 'Pending']"
+              />
+            </VCol>
+
+            <!-- 👉 Tax Id -->
+            <VCol
+              cols="12"
+              md="6"
+            >
+              <AppTextField
+                v-model="userData.taxId"
+                label="Tax ID"
+                placeholder="123456789"
+              />
+            </VCol>
+
+            <!-- 👉 Contact -->
+            <VCol
+              cols="12"
+              md="6"
+            >
+              <AppTextField
+                v-model="userData.contact"
+                label="Phone Number"
+                placeholder="+1 9876543210"
+              />
+            </VCol>
+
+            <!-- 👉 Language -->
+            <VCol
+              cols="12"
+              md="6"
+            >
+              <AppSelect
+                v-model="userData.language"
+                closable-chips
+                chips
+                multiple
+                label="Language"
+                placeholder="English"
+                :items="['English', 'Spanish', 'French']"
+              />
+            </VCol>
+
+            <!-- 👉 Country -->
+            <VCol
+              cols="12"
+              md="6"
+            >
+              <AppSelect
+                v-model="userData.country"
+                label="Country"
+                placeholder="United States"
+                :items="['United States', 'United Kingdom', 'France']"
+              />
+            </VCol>
+
+            <!-- 👉 Switch -->
+            <VCol cols="12">
+              <VSwitch
+                v-model="isUseAsBillingAddress"
+                density="compact"
+                label="Use as a billing address?"
+              />
+            </VCol>
+
+            <!-- 👉 Submit and Cancel -->
+            <VCol
+              cols="12"
+              class="d-flex flex-wrap justify-center gap-4"
+            >
+              <VBtn type="submit">
+                Submit
+              </VBtn>
+
+              <VBtn
+                color="secondary"
+                variant="tonal"
+                @click="onFormReset"
+              >
+                Cancel
+              </VBtn>
+            </VCol>
+          </VRow>
+        </VForm>
+      </VCardText>
+    </VCard>
+  </VDialog>
+</template>

package/dist/templates/vuexy-portal/src/components/dialogs/UserUpgradePlanDialog.vue

@@ -0,0 +1,101 @@
+<script setup lang="ts">
+interface Emit {
+  (e: 'update:isDialogVisible', val: boolean): void
+}
+
+interface Prop {
+  isDialogVisible: boolean
+}
+
+const props = defineProps<Prop>()
+
+const emit = defineEmits<Emit>()
+
+const selectedPlan = ref('standard')
+
+const plansList = [
+  { desc: 'Standard - $99/month', title: 'Standard', value: 'standard' },
+  { desc: 'Basic - $0/month', title: 'Basic', value: 'basic' },
+  { desc: 'Enterprise - $499/month', title: 'Enterprise', value: 'enterprice' },
+  { desc: 'Company - $999/month', title: 'Company', value: 'company' },
+]
+
+const isConfirmDialogVisible = ref(false)
+
+const dialogModelValueUpdate = (val: boolean) => {
+  emit('update:isDialogVisible', val)
+}
+</script>
+
+<template>
+  <!-- 👉 upgrade plan -->
+  <VDialog
+    :width="$vuetify.display.smAndDown ? 'auto' : 650"
+    :model-value="props.isDialogVisible"
+    @update:model-value="dialogModelValueUpdate"
+  >
+    <!-- Dialog close btn -->
+    <DialogCloseBtn @click="dialogModelValueUpdate(false)" />
+
+    <VCard class="pa-2 pa-sm-10">
+      <VCardText>
+        <!-- 👉 Title -->
+        <h4 class="text-h4 text-center mb-2">
+          Upgrade Plan
+        </h4>
+        <p class="text-body-1 text-center mb-6">
+          Choose the best plan for user.
+        </p>
+
+        <div class="d-flex justify-space-between flex-column flex-sm-row gap-4">
+          <AppSelect
+            v-model="selectedPlan"
+            :items="plansList"
+            label="Choose a plan"
+            placeholder="Basic"
+          />
+          <VBtn
+            class="align-self-end"
+            :block="$vuetify.display.xs"
+          >
+            Upgrade
+          </VBtn>
+        </div>
+
+        <VDivider class="my-6" />
+
+        <p class="text-body-1 mb-1">
+          User current plan is standard plan
+        </p>
+        <div class="d-flex justify-space-between align-center flex-wrap">
+          <div class="d-flex align-center gap-1 me-3">
+            <sup class="text-body-1 text-primary">$</sup>
+            <h1 class="text-h1 text-primary">
+              99
+            </h1>
+            <sub class="text-body-2 mt-5">
+              / month
+            </sub>
+          </div>
+          <VBtn
+            color="error"
+            variant="tonal"
+            @click="isConfirmDialogVisible = true"
+          >
+            Cancel Subscription
+          </VBtn>
+        </div>
+      </VCardText>
+
+      <!-- 👉 Confirm Dialog -->
+      <ConfirmDialog
+        v-model:isDialogVisible="isConfirmDialogVisible"
+        cancel-title="Cancelled"
+        confirm-title="Unsubscribed!"
+        confirm-msg="Your subscription cancelled successfully."
+        confirmation-question="Are you sure to cancel your subscription?"
+        cancel-msg="Unsubscription Cancelled!!"
+      />
+    </VCard>
+  </VDialog>
+</template>

package/dist/templates/vuexy-portal/src/layouts/blank.vue

@@ -0,0 +1,42 @@
+<script lang="ts" setup>
+const { injectSkinClasses } = useSkins()
+
+// ℹ️ This will inject classes in body tag for accurate styling
+injectSkinClasses()
+
+// SECTION: Loading Indicator
+const isFallbackStateActive = ref(false)
+const refLoadingIndicator = ref<any>(null)
+
+// watching if the fallback state is active and the refLoadingIndicator component is available
+watch([isFallbackStateActive, refLoadingIndicator], () => {
+  if (isFallbackStateActive.value && refLoadingIndicator.value)
+    refLoadingIndicator.value.fallbackHandle()
+
+  if (!isFallbackStateActive.value && refLoadingIndicator.value)
+    refLoadingIndicator.value.resolveHandle()
+}, { immediate: true })
+// !SECTION
+</script>
+
+<template>
+  <AppLoadingIndicator ref="refLoadingIndicator" />
+
+  <div class="layout-wrapper layout-blank">
+    <RouterView #="{Component}">
+      <Suspense
+        :timeout="0"
+        @fallback="isFallbackStateActive = true"
+        @resolve="isFallbackStateActive = false"
+      >
+        <Component :is="Component" />
+      </Suspense>
+    </RouterView>
+  </div>
+</template>
+
+<style>
+.layout-wrapper.layout-blank {
+  flex-direction: column;
+}
+</style>

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

@@ -0,0 +1,75 @@
+<script lang="ts" setup>
+import navItems from '@/navigation/horizontal'
+
+import { themeConfig } from '@themeConfig'
+
+// Components
+import Footer from '@/layouts/components/Footer.vue'
+import NavbarThemeSwitcher from '@/layouts/components/NavbarThemeSwitcher.vue'
+import UserProfile from '@/layouts/components/UserProfile.vue'
+import NavBarI18n from '@core/components/I18n.vue'
+import { HorizontalNavLayout } from '@layouts'
+import { VNodeRenderer } from '@layouts/components/VNodeRenderer'
+
+// SECTION: Loading Indicator
+const isFallbackStateActive = ref(false)
+const refLoadingIndicator = ref<any>(null)
+
+// watching if the fallback state is active and the refLoadingIndicator component is available
+watch([isFallbackStateActive, refLoadingIndicator], () => {
+  if (isFallbackStateActive.value && refLoadingIndicator.value)
+    refLoadingIndicator.value.fallbackHandle()
+
+  if (!isFallbackStateActive.value && refLoadingIndicator.value)
+    refLoadingIndicator.value.resolveHandle()
+}, { immediate: true })
+// !SECTION
+</script>
+
+<template>
+  <HorizontalNavLayout :nav-items="navItems">
+    <!-- 👉 navbar -->
+    <template #navbar>
+      <RouterLink
+        to="/"
+        class="app-logo d-flex align-center gap-x-3"
+      >
+        <VNodeRenderer :nodes="themeConfig.app.logo" />
+
+        <h1 class="app-title font-weight-bold leading-normal text-xl text-capitalize">
+          {{ themeConfig.app.title }}
+        </h1>
+      </RouterLink>
+      <VSpacer />
+
+      <NavBarI18n
+        v-if="themeConfig.app.i18n.enable && themeConfig.app.i18n.langConfig?.length"
+        :languages="themeConfig.app.i18n.langConfig"
+      />
+
+      <NavbarThemeSwitcher class="me-2" />
+      <UserProfile />
+    </template>
+
+    <AppLoadingIndicator ref="refLoadingIndicator" />
+
+    <!-- 👉 Pages -->
+    <RouterView v-slot="{ Component }">
+      <Suspense
+        :timeout="0"
+        @fallback="isFallbackStateActive = true"
+        @resolve="isFallbackStateActive = false"
+      >
+        <Component :is="Component" />
+      </Suspense>
+    </RouterView>
+
+    <!-- 👉 Footer -->
+    <template #footer>
+      <Footer />
+    </template>
+
+    <!-- 👉 Customizer -->
+    <!-- <TheCustomizer /> -->
+  </HorizontalNavLayout>
+</template>

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

@@ -0,0 +1,79 @@
+<script lang="ts" setup>
+import navItems from '@/navigation/vertical'
+import { themeConfig } from '@themeConfig'
+
+// Components
+import Footer from '@/layouts/components/Footer.vue'
+import NavbarThemeSwitcher from '@/layouts/components/NavbarThemeSwitcher.vue'
+import UserProfile from '@/layouts/components/UserProfile.vue'
+import NavBarI18n from '@core/components/I18n.vue'
+
+// @layouts plugin
+import { VerticalNavLayout } from '@layouts'
+
+// SECTION: Loading Indicator
+const isFallbackStateActive = ref(false)
+const refLoadingIndicator = ref<any>(null)
+
+// watching if the fallback state is active and the refLoadingIndicator component is available
+watch([isFallbackStateActive, refLoadingIndicator], () => {
+  if (isFallbackStateActive.value && refLoadingIndicator.value)
+    refLoadingIndicator.value.fallbackHandle()
+
+  if (!isFallbackStateActive.value && refLoadingIndicator.value)
+    refLoadingIndicator.value.resolveHandle()
+}, { immediate: true })
+// !SECTION
+</script>
+
+<template>
+  <VerticalNavLayout :nav-items="navItems">
+    <!-- 👉 navbar -->
+    <template #navbar="{ toggleVerticalOverlayNavActive }">
+      <div class="d-flex h-100 align-center">
+        <IconBtn
+          id="vertical-nav-toggle-btn"
+          class="ms-n3 d-lg-none"
+          @click="toggleVerticalOverlayNavActive(true)"
+        >
+          <VIcon
+            size="26"
+            icon="tabler-menu-2"
+          />
+        </IconBtn>
+
+        
+        <VSpacer />
+        
+        <NavbarThemeSwitcher />
+        
+        <NavBarI18n
+          v-if="themeConfig.app.i18n.enable && themeConfig.app.i18n.langConfig?.length"
+          :languages="themeConfig.app.i18n.langConfig"
+        />
+        <UserProfile />
+      </div>
+    </template>
+
+    <AppLoadingIndicator ref="refLoadingIndicator" />
+
+    <!-- 👉 Pages -->
+    <RouterView v-slot="{ Component }">
+      <Suspense
+        :timeout="0"
+        @fallback="isFallbackStateActive = true"
+        @resolve="isFallbackStateActive = false"
+      >
+        <Component :is="Component" />
+      </Suspense>
+    </RouterView>
+
+    <!-- 👉 Footer -->
+    <template #footer>
+      <Footer />
+    </template>
+
+    <!-- 👉 Customizer -->
+    <!-- <TheCustomizer /> -->
+  </VerticalNavLayout>
+</template>

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

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { themeConfig } from '@themeConfig';
+</script>
+<template>
+  <div class="h-100 d-flex align-center justify-md-space-between justify-center">
+    <!-- 👉 Footer: left content -->
+    <span class="d-flex align-center text-medium-emphasis">
+      &copy;
+      {{ new Date().getFullYear() }}
+      {{themeConfig.app.title}} All Right Reserved.
+    </span>
+    <!-- 👉 Footer: right content -->
+    <span class="d-md-flex gap-x-4 text-primary d-none">
+
+    </span>
+  </div>
+</template>