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

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

@@ -0,0 +1,123 @@
+<script setup lang="ts">
+import americanExDark from '@images/icons/payments/img/ae-dark.png'
+import americanExLight from '@images/icons/payments/img/american-express.png'
+import dcDark from '@images/icons/payments/img/dc-dark.png'
+import dcLight from '@images/icons/payments/img/dc-light.png'
+import jcbDark from '@images/icons/payments/img/jcb-dark.png'
+import jcbLight from '@images/icons/payments/img/jcb-light.png'
+import masterCardDark from '@images/icons/payments/img/master-dark.png'
+import masterCardLight from '@images/icons/payments/img/mastercard.png'
+import visaDark from '@images/icons/payments/img/visa-dark.png'
+import visaLight from '@images/icons/payments/img/visa-light.png'
+
+const props = defineProps<Props>()
+const emit = defineEmits<Emit>()
+const visa = useGenerateImageVariant(visaLight, visaDark)
+const masterCard = useGenerateImageVariant(masterCardLight, masterCardDark)
+const americanEx = useGenerateImageVariant(americanExLight, americanExDark)
+const jcb = useGenerateImageVariant(jcbLight, jcbDark)
+const dc = useGenerateImageVariant(dcLight, dcDark)
+
+interface Props {
+  isDialogVisible: boolean
+}
+
+interface Emit {
+  (e: 'update:isDialogVisible', val: boolean): void
+}
+
+const dialogVisibleUpdate = (val: boolean) => {
+  emit('update:isDialogVisible', val)
+}
+
+const paymentProvidersData = [
+  {
+    title: 'Adyen',
+    providers: [visa, masterCard, americanEx, jcb, dc],
+  },
+  {
+    title: '2Checkout',
+    providers: [visa, americanEx, jcb, dc],
+  },
+  {
+    title: 'Airpay',
+    providers: [visa, americanEx, masterCard, jcb],
+  },
+  {
+    title: 'Authorize.net',
+    providers: [americanEx, jcb, dc],
+  },
+  {
+    title: 'Bambora',
+    providers: [masterCard, americanEx, jcb],
+  },
+  {
+    title: 'Bambora',
+    providers: [visa, masterCard, americanEx, jcb, dc],
+  },
+  {
+    title: 'Chase Paymentech (Orbital)',
+    providers: [visa, americanEx, jcb, dc],
+  },
+  {
+    title: 'Checkout.com',
+    providers: [visa, masterCard],
+  },
+
+]
+</script>
+
+<template>
+  <VDialog
+    :model-value="props.isDialogVisible"
+    :width="$vuetify.display.smAndDown ? 'auto' : 900"
+    @update:model-value="dialogVisibleUpdate"
+  >
+    <DialogCloseBtn @click="emit('update:isDialogVisible', false)" />
+
+    <VCard class="pa-2 pa-sm-10">
+      <VCardText>
+        <!-- 👉 Title -->
+        <h4 class="text-h4 text-center mb-2">
+          Select Payment Providers
+        </h4>
+        <p class="text-body-1 text-center mb-6">
+          Third-party payment providers
+        </p>
+
+        <div
+          v-for="(item, index) in paymentProvidersData"
+          :key="index"
+        >
+          <div class="d-flex flex-column flex-sm-row justify-space-between gap-4 flex-wrap py-4">
+            <h6 class="text-h6">
+              {{ item.title }}
+            </h6>
+            <div class="d-flex gap-4 flex-wrap">
+              <img
+                v-for="(img, iterator) in item.providers"
+                :key="iterator"
+                :src="img.value"
+                height="30"
+                width="50"
+              >
+            </div>
+          </div>
+          <VDivider v-if="index !== paymentProvidersData.length - 1" />
+        </div>
+      </VCardText>
+    </VCard>
+  </VDialog>
+</template>
+
+<style lang="scss">
+.refer-link-input {
+  .v-field--appended {
+    padding-inline-end: 0;
+  }
+
+  .v-field__append-inner {
+    padding-block-start: 0.125rem;
+  }
+}
+</style>

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

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+interface Props {
+  isDialogVisible: boolean
+}
+
+interface Emit {
+  (e: 'update:isDialogVisible', val: boolean): void
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<Emit>()
+
+const dialogVisibleUpdate = (val: boolean) => {
+  emit('update:isDialogVisible', val)
+}
+</script>
+
+<template>
+  <VDialog
+    :model-value="props.isDialogVisible"
+    :width="$vuetify.display.smAndDown ? 'auto' : 1200"
+    @update:model-value="dialogVisibleUpdate"
+  >
+    <!-- 👉 Dialog close btn -->
+    <DialogCloseBtn @click="$emit('update:isDialogVisible', false)" />
+
+    <VCard class="pricing-dialog pa-2 pa-sm-10">
+      <VCardText>
+        <AppPricing md="4" />
+      </VCardText>
+    </VCard>
+  </VDialog>
+</template>

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

@@ -0,0 +1,181 @@
+<script setup lang="ts">
+import keyboard from '@images/svg/keyboard.svg'
+import paper from '@images/svg/paper-send.svg'
+import rocket from '@images/svg/rocket.svg'
+import { themeConfig } from '@themeConfig'
+
+interface Props {
+  isDialogVisible: boolean
+}
+
+interface Emit {
+  (e: 'update:isDialogVisible', val: boolean): void
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<Emit>()
+
+const dialogVisibleUpdate = (val: boolean) => {
+  emit('update:isDialogVisible', val)
+}
+
+const referAndEarnSteps = [
+  {
+    icon: paper,
+    title: 'Send Invitation 👍🏻',
+    subtitle: 'Send your referral link to your friend',
+  },
+  {
+    icon: keyboard,
+    title: 'Registration 😎',
+    subtitle: 'Let them register to our services',
+  },
+  {
+    icon: rocket,
+    title: 'Free Trial  🎉',
+    subtitle: 'Your friend will get 30 days free trial',
+  },
+]
+</script>
+
+<template>
+  <VDialog
+    :model-value="props.isDialogVisible"
+    :width="$vuetify.display.smAndDown ? 'auto' : 800"
+    @update:model-value="dialogVisibleUpdate"
+  >
+    <!-- 👉 Dialog close btn -->
+    <DialogCloseBtn @click="$emit('update:isDialogVisible', false)" />
+
+    <VCard class="pa-2 pa-sm-10">
+      <VCardText>
+        <h4 class="text-h4 text-center mb-2">
+          Refer & Earn
+        </h4>
+        <p class="text-body-1 mb-6 text-center">
+          Invite your friend to <span class="text-capitalize">{{ themeConfig.app.title }}</span>, if they sign up, you and your friend will get 30 days free trial
+        </p>
+
+        <VRow class="text-center mt-8">
+          <VCol
+            v-for="step in referAndEarnSteps"
+            :key="step.title"
+            cols="12"
+            sm="4"
+          >
+            <VAvatar
+              variant="tonal"
+              size="88"
+              color="primary"
+              rounded
+            >
+              <VIcon
+                size="40"
+                :icon="step.icon"
+              />
+            </VAvatar>
+
+            <h5 class="text-h5 mt-4 mb-2">
+              {{ step.title }}
+            </h5>
+            <div>{{ step.subtitle }}</div>
+          </VCol>
+        </VRow>
+
+        <VDivider class="mt-12 mb-6" />
+
+        <h5 class="text-h5 mb-6">
+          Invite your friends
+        </h5>
+
+        <VForm
+          class="d-flex align-center flex-wrap gap-4"
+          @submit.prevent="() => {}"
+        >
+          <AppTextField
+            placeholder="johnDoe@gmail.com"
+            label="Enter your friend's email address and invite them to join Vuexy 😍"
+          />
+
+          <VBtn
+            class="align-self-end"
+            type="submit"
+          >
+            Send
+          </VBtn>
+        </VForm>
+
+        <h5 class="text-h5 my-6">
+          Share the referral link
+        </h5>
+
+        <VForm
+          class="d-flex align-center flex-wrap gap-4"
+          @submit.prevent="() => {}"
+        >
+          <AppTextField
+            placeholder="http://pixinvent.link"
+            label="You can also copy and send it or share it on your social media. 🚀"
+            class="refer-link-input"
+          >
+            <template #append-inner>
+              <VBtn variant="text">
+                Copy link
+              </VBtn>
+            </template>
+          </AppTextField>
+
+          <div class="d-flex align-self-end gap-1">
+            <VBtn
+              icon
+              class="rounded"
+              color="#3B5998"
+              size="38"
+            >
+              <VIcon
+                color="white"
+                icon="tabler-brand-facebook"
+                size="22"
+              />
+            </VBtn>
+
+            <VBtn
+              icon
+              class="rounded"
+              color="#55ACEE"
+              size="38"
+            >
+              <VIcon
+                color="white"
+                icon="tabler-brand-twitter"
+                size="22"
+              />
+            </VBtn>
+
+            <VBtn
+              icon
+              class="rounded"
+              color="#007BB6"
+              size="38"
+            >
+              <VIcon
+                color="white"
+                icon="tabler-brand-linkedin"
+                size="22"
+              />
+            </VBtn>
+          </div>
+        </VForm>
+      </VCardText>
+    </VCard>
+  </VDialog>
+</template>
+
+<style lang="scss">
+.refer-link-input {
+  .v-field--appended {
+    padding-inline-end: 0;
+  }
+}
+</style>

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

@@ -0,0 +1,198 @@
+<script setup lang="ts">
+import avatar1 from '@images/avatars/avatar-1.png'
+import avatar2 from '@images/avatars/avatar-2.png'
+import avatar3 from '@images/avatars/avatar-3.png'
+import avatar4 from '@images/avatars/avatar-4.png'
+import avatar5 from '@images/avatars/avatar-5.png'
+import avatar6 from '@images/avatars/avatar-6.png'
+import avatar7 from '@images/avatars/avatar-7.png'
+import avatar8 from '@images/avatars/avatar-8.png'
+
+interface Props {
+  isDialogVisible: boolean
+}
+
+interface Emit {
+  (e: 'update:isDialogVisible', val: boolean): void
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<Emit>()
+
+const dialogVisibleUpdate = (val: boolean) => {
+  emit('update:isDialogVisible', val)
+}
+
+type Permission = 'Owner' | 'Can Edit' | 'Can Comment' | 'Can View'
+
+interface Member {
+  avatar: string
+  name: string
+  email: string
+  permission: Permission
+}
+
+const membersList: Member[] = [
+  {
+    avatar: avatar1,
+    name: 'Lester Palmer',
+    email: 'jerrod98@gmail.com',
+    permission: 'Can Edit',
+  },
+  {
+    avatar: avatar2,
+    name: 'Mattie Blair',
+    email: 'prudence.boehm@yahoo.com',
+    permission: 'Owner',
+  },
+  {
+    avatar: avatar3,
+    name: 'Marvin Wheeler',
+    email: 'rumet@jujpejah.net',
+    permission: 'Can Comment',
+  },
+  {
+    avatar: avatar4,
+    name: 'Nannie Ford',
+    email: 'negza@nuv.io',
+    permission: 'Can View',
+  },
+  {
+    avatar: avatar5,
+    name: 'Julian Murphy',
+    email: 'lunebame@umdomgu.net',
+    permission: 'Can Edit',
+  },
+  {
+    avatar: avatar6,
+    name: 'Sophie Gilbert',
+    email: 'ha@sugit.gov',
+    permission: 'Can View',
+  },
+  {
+    avatar: avatar7,
+    name: 'Chris Watkins',
+    email: 'zokap@mak.org',
+    permission: 'Can Comment',
+  },
+  {
+    avatar: avatar8,
+    name: 'Adelaide Nichols',
+    email: 'ujinomu@jigo.com',
+    permission: 'Can Edit',
+  },
+]
+</script>
+
+<template>
+  <VDialog
+    :model-value="props.isDialogVisible"
+    :width="$vuetify.display.smAndDown ? 'auto' : 900"
+    @update:model-value="dialogVisibleUpdate"
+  >
+    <!-- 👉 Dialog close btn -->
+    <DialogCloseBtn @click="$emit('update:isDialogVisible', false)" />
+
+    <VCard class="share-project-dialog pa-2 pa-sm-10">
+      <VCardText>
+        <h4 class="text-h4 text-center mb-2">
+          Share Project
+        </h4>
+        <p class="text-body-1 text-center mb-6">
+          Share project with a team members
+        </p>
+
+        <AppAutocomplete
+          label="Add Members"
+          :items="membersList"
+          item-title="name"
+          item-value="name"
+          placeholder="Add project members..."
+        >
+          <template #item="{ props: listItemProp, item }">
+            <VListItem v-bind="listItemProp">
+              <template #prepend>
+                <VAvatar
+                  :image="item.raw.avatar"
+                  size="30"
+                />
+              </template>
+            </VListItem>
+          </template>
+        </AppAutocomplete>
+
+        <h5 class="text-h5 mb-4 mt-6">
+          8 Members
+        </h5>
+
+        <VList class="card-list">
+          <VListItem
+            v-for="member in membersList"
+            :key="member.name"
+          >
+            <template #prepend>
+              <VAvatar :image="member.avatar" />
+            </template>
+
+            <VListItemTitle>
+              {{ member.name }}
+            </VListItemTitle>
+            <VListItemSubtitle>
+              {{ member.email }}
+            </VListItemSubtitle>
+
+            <template #append>
+              <VBtn
+                variant="text"
+                color="secondary"
+                :icon="$vuetify.display.xs"
+              >
+                <span class="d-none d-sm-block me-1">{{ member.permission }}</span>
+                <VIcon icon="tabler-chevron-down" />
+
+                <VMenu activator="parent">
+                  <VList :selected="[member.permission]">
+                    <VListItem
+                      v-for="(item, index) in ['Owner', 'Can Edit', 'Can Comment', 'Can View']"
+                      :key="index"
+                      :value="item"
+                    >
+                      <VListItemTitle>{{ item }}</VListItemTitle>
+                    </VListItem>
+                  </VList>
+                </VMenu>
+              </VBtn>
+            </template>
+          </VListItem>
+        </VList>
+
+        <div class="d-flex align-center justify-center justify-sm-space-between flex-wrap gap-3 mt-6">
+          <h6 class="text-h6 font-weight-medium d-flex align-start">
+            <VIcon
+              icon="tabler-users"
+              class="me-2"
+              size="20"
+            />
+            <div>Public to Vuexy - Pixinvent</div>
+          </h6>
+
+          <VBtn
+            class="text-capitalize"
+            prepend-icon="tabler-link"
+          >
+            Copy Project Link
+          </VBtn>
+        </div>
+      </VCardText>
+    </VCard>
+  </VDialog>
+</template>
+
+<style lang="scss">
+.share-project-dialog {
+  .card-list {
+    --v-card-list-gap: 1rem;
+  }
+}
+</style>

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

@@ -0,0 +1,120 @@
+<script setup lang="ts">
+interface Emit {
+  (e: 'update:isDialogVisible', value: boolean): void
+}
+interface Props {
+  isDialogVisible: boolean
+  smsCode?: string
+  authAppCode?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  isDialogVisible: false,
+  smsCode: '',
+  authAppCode: '',
+})
+
+const emit = defineEmits<Emit>()
+
+const authMethods = [
+  {
+    icon: 'tabler-settings',
+    title: 'Authenticator Apps',
+    desc: 'Get code from an app like Google Authenticator or Microsoft Authenticator.',
+    value: 'authApp',
+  },
+  {
+    icon: 'tabler-message',
+    title: 'SMS',
+    desc: 'We will send a code via SMS if you need to use your backup login method.',
+    value: 'sms',
+  },
+]
+
+const selectedMethod = ref('authApp')
+const isAuthAppDialogVisible = ref(false)
+const isSmsDialogVisible = ref(false)
+
+const openSelectedMethodDialog = () => {
+  if (selectedMethod.value === 'authApp') {
+    isAuthAppDialogVisible.value = true
+    isSmsDialogVisible.value = false
+    emit('update:isDialogVisible', false)
+  }
+  if (selectedMethod.value === 'sms') {
+    isAuthAppDialogVisible.value = false
+    isSmsDialogVisible.value = true
+    emit('update:isDialogVisible', false)
+  }
+}
+</script>
+
+<template>
+  <VDialog
+    :width="$vuetify.display.smAndDown ? 'auto' : 800"
+    :model-value="props.isDialogVisible"
+    @update:model-value="(val) => $emit('update:isDialogVisible', val)"
+  >
+    <!-- Dialog close btn -->
+    <DialogCloseBtn @click="$emit('update:isDialogVisible', false)" />
+
+    <VCard class="pa-2 pa-sm-10">
+      <VCardText>
+        <!-- 👉 Title -->
+        <div class="mb-6">
+          <h4 class="text-h4 text-center mb-2">
+            Select Authentication Method
+          </h4>
+          <p class="text-body-1 text-center mb-6">
+            You also need to select a method by which the proxy authenticates to the directory serve.
+          </p>
+          <CustomRadios
+            v-model:selected-radio="selectedMethod"
+            :radio-content="authMethods"
+            :grid-column="{ cols: '12' }"
+          >
+            <template #default="items">
+              <div class="d-flex flex-column">
+                <div class="d-flex gap-1 mb-2">
+                  <VIcon
+                    :icon="items.item.icon"
+                    size="20"
+                    class="text-high-emphasis"
+                  />
+                  <h6 class="text-h6">
+                    {{ items.item.title }}
+                  </h6>
+                </div>
+                <p class="text-body-2 mb-0">
+                  {{ items.item.desc }}
+                </p>
+              </div>
+            </template>
+          </CustomRadios>
+        </div>
+
+        <div class="d-flex gap-4 justify-center">
+          <VBtn @click="openSelectedMethodDialog">
+            submit
+          </VBtn>
+          <VBtn
+            color="secondary"
+            variant="tonal"
+            @click="$emit('update:isDialogVisible', false)"
+          >
+            Cancel
+          </VBtn>
+        </div>
+      </VCardText>
+    </VCard>
+  </VDialog>
+
+  <AddAuthenticatorAppDialog
+    v-model:isDialogVisible="isAuthAppDialogVisible"
+    :auth-code="props.authAppCode"
+  />
+  <EnableOneTimePasswordDialog
+    v-model:isDialogVisible="isSmsDialogVisible"
+    :mobile-number="props.smsCode"
+  />
+</template>