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

package/dist/templates/vuexy-portal/src/components/AppPricing.vue

@@ -0,0 +1,247 @@
+<script setup lang="ts">
+import safeBoxWithGoldenCoin from '@images/misc/3d-safe-box-with-golden-dollar-coins.png'
+import spaceRocket from '@images/misc/3d-space-rocket-with-smoke.png'
+import dollarCoinPiggyBank from '@images/misc/dollar-coins-flying-pink-piggy-bank.png'
+
+interface Pricing {
+  title?: string
+  xs?: number | string
+  sm?: number | string
+  md?: string | number
+  lg?: string | number
+  xl?: string | number
+}
+
+const props = defineProps<Pricing>()
+
+const annualMonthlyPlanPriceToggler = ref(true)
+
+const pricingPlans = [
+  {
+    name: 'Basic',
+    tagLine: 'A simple start for everyone',
+    logo: dollarCoinPiggyBank,
+    monthlyPrice: 0,
+    yearlyPrice: 0,
+    isPopular: false,
+    current: true,
+    features: [
+      '100 responses a month',
+      'Unlimited forms and surveys',
+      'Unlimited fields',
+      'Basic form creation tools',
+      'Up to 2 subdomains',
+    ],
+  },
+  {
+    name: 'Standard',
+    tagLine: 'For small to medium businesses',
+    logo: safeBoxWithGoldenCoin,
+    monthlyPrice: 49,
+    yearlyPrice: 499,
+    isPopular: true,
+    current: false,
+    features: [
+      'Unlimited responses',
+      'Unlimited forms and surveys',
+      'Instagram profile page',
+      'Google Docs integration',
+      'Custom “Thank you” page',
+    ],
+  },
+  {
+    name: 'Enterprise',
+    tagLine: 'Solution for big organizations',
+    logo: spaceRocket,
+    monthlyPrice: 99,
+    yearlyPrice: 999,
+    isPopular: false,
+    current: false,
+    features: [
+      'PayPal payments',
+      'Logic Jumps',
+      'File upload with 5GB storage',
+      'Custom domain support',
+      'Stripe integration',
+    ],
+  },
+]
+</script>
+
+<template>
+  <!-- 👉 Title and subtitle -->
+  <div class="text-center">
+    <h3 class="text-h3 pricing-title mb-2">
+      {{ props.title ? props.title : 'Pricing Plans' }}
+    </h3>
+    <p class="mb-0">
+      All plans include 40+ advanced tools and features to boost your product.
+    </p>
+    <p class="mb-2">
+      Choose the best plan to fit your needs.
+    </p>
+  </div>
+
+  <!-- 👉 Annual and monthly price toggler -->
+
+  <div class="d-flex font-weight-medium text-body-1 align-center justify-center mx-auto mt-12 mb-6">
+    <VLabel
+      for="pricing-plan-toggle"
+      class="me-3"
+    >
+      Monthly
+    </VLabel>
+
+    <div class="position-relative">
+      <VSwitch
+        id="pricing-plan-toggle"
+        v-model="annualMonthlyPlanPriceToggler"
+      >
+        <template #label>
+          <div class="text-body-1 font-weight-medium">
+            Annually
+          </div>
+        </template>
+      </VSwitch>
+
+      <div class="save-upto-chip position-absolute align-center d-none d-md-flex gap-1">
+        <VIcon
+          icon="tabler-corner-left-down"
+          size="24"
+          class="flip-in-rtl mt-2 text-disabled"
+        />
+        <VChip
+          label
+          color="primary"
+          size="small"
+        >
+          Save up to 10%
+        </VChip>
+      </div>
+    </div>
+  </div>
+
+  <!-- SECTION pricing plans -->
+  <VRow>
+    <VCol
+      v-for="plan in pricingPlans"
+      :key="plan.logo"
+      v-bind="props"
+      cols="12"
+    >
+      <!-- 👉  Card -->
+      <VCard
+        flat
+        border
+        :class="plan.isPopular ? 'border-primary border-opacity-100' : ''"
+      >
+        <VCardText
+          style="block-size: 3.75rem;"
+          class="text-end"
+        >
+          <!-- 👉 Popular -->
+          <VChip
+            v-show="plan.isPopular"
+            label
+            color="primary"
+            size="small"
+          >
+            Popular
+          </VChip>
+        </VCardText>
+
+        <!-- 👉 Plan logo -->
+        <VCardText>
+          <VImg
+            :height="120"
+            :width="120"
+            :src="plan.logo"
+            class="mx-auto mb-5"
+          />
+
+          <!-- 👉 Plan name -->
+          <h4 class="text-h4 mb-1 text-center">
+            {{ plan.name }}
+          </h4>
+          <p class="mb-0 text-body-1 text-center">
+            {{ plan.tagLine }}
+          </p>
+
+          <!-- 👉 Plan price  -->
+
+          <div class="position-relative">
+            <div class="d-flex justify-center pt-5 pb-10">
+              <div class="text-body-1 align-self-start font-weight-medium">
+                $
+              </div>
+              <h1 class="text-h1 font-weight-medium text-primary">
+                {{ annualMonthlyPlanPriceToggler ? Math.floor(Number(plan.yearlyPrice) / 12) : plan.monthlyPrice }}
+              </h1>
+              <div class="text-body-1 font-weight-medium align-self-end">
+                /month
+              </div>
+            </div>
+
+            <!-- 👉 Annual Price -->
+            <span
+              v-show="annualMonthlyPlanPriceToggler"
+              class="annual-price-text position-absolute text-caption text-disabled pb-4"
+            >
+              {{ plan.yearlyPrice === 0 ? 'free' : `USD ${plan.yearlyPrice}/Year` }}
+            </span>
+          </div>
+
+          <!-- 👉 Plan features -->
+
+          <VList class="card-list mb-4">
+            <VListItem
+              v-for="feature in plan.features"
+              :key="feature"
+            >
+              <template #prepend>
+                <VIcon
+                  size="8"
+                  icon="tabler-circle-filled"
+                  color="rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity))"
+                />
+              </template>
+
+              <VListItemTitle class="text-body-1">
+                {{ feature }}
+              </VListItemTitle>
+            </VListItem>
+          </VList>
+
+          <!-- 👉 Plan actions -->
+          <VBtn
+            block
+            :color="plan.current ? 'success' : 'primary'"
+            :variant="plan.isPopular ? 'elevated' : 'tonal'"
+            :to="{ name: 'front-pages-payment' }"
+            :active="false"
+          >
+            {{ plan.yearlyPrice === 0 ? 'Your Current Plan' : 'Upgrade' }}
+          </VBtn>
+        </VCardText>
+      </VCard>
+    </VCol>
+  </VRow>
+  <!-- !SECTION  -->
+</template>
+
+<style lang="scss" scoped>
+.card-list {
+  --v-card-list-gap: 1rem;
+}
+
+.save-upto-chip {
+  inset-block-start: -2.4rem;
+  inset-inline-end: -6rem;
+}
+
+.annual-price-text {
+  inset-block-end: 3%;
+  inset-inline-start: 50%;
+  transform: translateX(-50%);
+}
+</style>

package/dist/templates/vuexy-portal/src/components/AppSearchHeader.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import AppSearchHeaderBg from '@images/pages/app-search-header-bg.png'
+
+interface Props {
+  title?: string
+  subtitle?: string
+  customClass?: string
+  placeholder?: string
+  density?: 'comfortable' | 'compact' | 'default'
+  isReverse?: boolean
+}
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<Props>(), {
+  density: 'comfortable',
+  isReverse: false,
+})
+</script>
+
+<template>
+  <!-- 👉 Search Banner  -->
+  <VCard
+    flat
+    class="text-center search-header"
+    :class="props.customClass"
+    :style="`background: url(${AppSearchHeaderBg});`"
+  >
+    <VCardText>
+      <slot name="title">
+        <h4 class="text-h4 mb-2 font-weight-medium">
+          {{ props.title }}
+        </h4>
+      </slot>
+      <div
+        class="d-flex"
+        :class="isReverse ? 'flex-column' : 'flex-column-reverse' "
+      >
+        <p class="mb-0">
+          {{ props.subtitle }}
+        </p>
+        <!-- 👉 Search Input -->
+        <div>
+          <AppTextField
+            v-bind="$attrs"
+            class="search-header-input mx-auto my-4"
+            :placeholder="props.placeholder"
+            :density="props.density"
+            prepend-inner-icon="tabler-search"
+          />
+        </div>
+      </div>
+    </VCardText>
+  </VCard>
+</template>
+
+<style lang="scss">
+.search-header {
+  padding: 4rem !important;
+  background-size: cover !important;
+}
+
+// search input
+.search-header-input {
+  border-radius: 0.375rem !important;
+  background-color: rgb(var(--v-theme-surface));
+  max-inline-size: 28.125rem !important;
+}
+
+@media (max-width: 37.5rem) {
+  .search-header {
+    padding: 1.5rem !important;
+  }
+}
+</style>

package/dist/templates/vuexy-portal/src/components/ErrorHeader.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+interface Props {
+  statusCode?: string | number
+  title?: string
+  description?: string
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <div class="text-center">
+    <!-- 👉 Title and subtitle -->
+    <h1
+      v-if="props.statusCode"
+      class="header-title font-weight-medium mb-2"
+    >
+      {{ props.statusCode }}
+    </h1>
+    <h4
+      v-if="props.title"
+      class="text-h4 font-weight-medium mb-2"
+    >
+      {{ props.title }}
+    </h4>
+    <p
+      v-if="props.description"
+      class="text-body-1 mb-6"
+    >
+      {{ props.description }}
+    </p>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.header-title {
+  font-size: clamp(3rem, 5vw, 6rem);
+  line-height: clamp(3rem, 5vw, 6rem);
+}
+</style>

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

@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import themeselectionQr from '@images/pages/themeselection-qr.png'
+
+interface Emit {
+  (e: 'update:isDialogVisible', value: boolean): void
+  (e: 'submit', value: string): void
+}
+interface Props {
+  authCode?: string
+  isDialogVisible: boolean
+}
+const props = defineProps<Props>()
+const emit = defineEmits<Emit>()
+
+const authCode = ref(structuredClone(toRaw(props.authCode)))
+
+const formSubmit = () => {
+  if (authCode.value) {
+    emit('submit', authCode.value)
+    emit('update:isDialogVisible', false)
+  }
+}
+
+const resetAuthCode = () => {
+  authCode.value = structuredClone(toRaw(props.authCode))
+  emit('update:isDialogVisible', false)
+}
+</script>
+
+<template>
+  <VDialog
+    :width="$vuetify.display.smAndDown ? 'auto' : 900"
+    :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 -->
+        <h4 class="text-h4 text-center mb-6">
+          Add Authenticator App
+        </h4>
+        <h5 class="text-h5 mb-2">
+          Authenticator Apps
+        </h5>
+
+        <p class="text-body-1 mb-6">
+          Using an authenticator app like Google Authenticator, Microsoft Authenticator, Authy, or 1Password, scan the QR code. It will generate a 6 digit code for you to enter below.
+        </p>
+
+        <div class="mb-6">
+          <VImg
+            width="150"
+            :src="themeselectionQr"
+            class="mx-auto"
+          />
+        </div>
+
+        <VAlert
+          title="ASDLKNASDA9AHS678dGhASD78AB"
+          text="If you are unable to scan the QR code, you can manually enter the secret key below."
+          variant="tonal"
+          color="warning"
+        />
+        <VForm @submit.prevent="() => {}">
+          <AppTextField
+            v-model="authCode"
+            name="auth-code"
+            label="Enter Authentication Code"
+            placeholder="123 456"
+            class="mt-4 mb-6"
+          />
+
+          <div class="d-flex justify-end flex-wrap gap-4">
+            <VBtn
+              color="secondary"
+              variant="tonal"
+              @click="resetAuthCode"
+            >
+              Cancel
+            </VBtn>
+
+            <VBtn
+              type="submit"
+              @click="formSubmit"
+            >
+              Continue
+              <VIcon
+                end
+                icon="tabler-arrow-right"
+                class="flip-in-rtl"
+              />
+            </VBtn>
+          </div>
+        </VForm>
+      </VCardText>
+    </VCard>
+  </VDialog>
+</template>

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

@@ -0,0 +1,238 @@
+<script setup lang="ts">
+import home from '@images/svg/home.svg'
+import office from '@images/svg/office.svg'
+
+interface BillingAddress {
+  firstName: string
+  lastName: string
+  selectedCountry: string | null
+  addressLine1: string
+  addressLine2: string
+  landmark: string
+  contact: string
+  country: string | null
+  city: string
+  state: string
+  zipCode: number | null
+}
+interface Props {
+  billingAddress?: BillingAddress
+  isDialogVisible: boolean
+}
+interface Emit {
+  (e: 'update:isDialogVisible', value: boolean): void
+  (e: 'submit', value: BillingAddress): void
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  billingAddress: () => ({
+    firstName: '',
+    lastName: '',
+    selectedCountry: null,
+    addressLine1: '',
+    addressLine2: '',
+    landmark: '',
+    contact: '',
+    country: null,
+    city: '',
+    state: '',
+    zipCode: null,
+  }),
+})
+
+const emit = defineEmits<Emit>()
+
+const billingAddress = ref<BillingAddress>(structuredClone(toRaw(props.billingAddress)))
+
+const resetForm = () => {
+  emit('update:isDialogVisible', false)
+  billingAddress.value = structuredClone(toRaw(props.billingAddress))
+}
+
+const onFormSubmit = () => {
+  emit('update:isDialogVisible', false)
+  emit('submit', billingAddress.value)
+}
+
+const selectedAddress = ref('Home')
+
+const addressTypes = [
+  {
+    icon: { icon: home, size: '28' },
+    title: 'Home',
+    desc: 'Delivery Time (9am - 9pm)',
+    value: 'Home',
+  },
+  {
+    icon: { icon: office, size: '28' },
+    title: 'Office',
+    desc: 'Delivery Time (9am - 5pm)',
+    value: 'Office',
+  },
+]
+</script>
+
+<template>
+  <VDialog
+    :width="$vuetify.display.smAndDown ? 'auto' : 900 "
+    :model-value="props.isDialogVisible"
+    @update:model-value="val => $emit('update:isDialogVisible', val)"
+  >
+    <!-- 👉 Dialog close btn -->
+    <DialogCloseBtn @click="$emit('update:isDialogVisible', false)" />
+
+    <VCard
+      v-if="props.billingAddress"
+      class="pa-sm-10 pa-2"
+    >
+      <VCardText>
+        <!-- 👉 Title -->
+        <h4 class="text-h4 text-center mb-2">
+          {{ (props.billingAddress.addressLine1 || props.billingAddress.addressLine2) ? 'Edit' : 'Add New' }} Address
+        </h4>
+        <p class="text-body-1 text-center mb-6">
+          Add new address for express delivery
+        </p>
+
+        <div class="d-flex mb-6">
+          <CustomRadiosWithIcon
+            v-model:selected-radio="selectedAddress"
+            :radio-content="addressTypes"
+            :grid-column="{ sm: '6', cols: '12' }"
+          />
+        </div>
+
+        <!-- 👉 Form -->
+        <VForm @submit.prevent="onFormSubmit">
+          <VRow>
+            <!-- 👉 First Name -->
+            <VCol
+              cols="12"
+              md="6"
+            >
+              <AppTextField
+                v-model="billingAddress.firstName"
+                label="First Name"
+                placeholder="John"
+              />
+            </VCol>
+
+            <!-- 👉 Last Name -->
+            <VCol
+              cols="12"
+              md="6"
+            >
+              <AppTextField
+                v-model="billingAddress.lastName"
+                label="Last Name"
+                placeholder="Doe"
+              />
+            </VCol>
+
+            <!-- 👉 Select Country -->
+            <VCol cols="12">
+              <AppSelect
+                v-model="billingAddress.selectedCountry"
+                label="Select Country"
+                placeholder="Select Country"
+                :items="['USA', 'Aus', 'Canada', 'NZ']"
+              />
+            </VCol>
+
+            <!-- 👉 Address Line 1 -->
+            <VCol cols="12">
+              <AppTextField
+                v-model="billingAddress.addressLine1"
+                label="Address Line 1"
+                placeholder="12, Business Park"
+              />
+            </VCol>
+
+            <!-- 👉 Address Line 2 -->
+            <VCol cols="12">
+              <AppTextField
+                v-model="billingAddress.addressLine2"
+                label="Address Line 2"
+                placeholder="Mall Road"
+              />
+            </VCol>
+
+            <!-- 👉 Landmark -->
+            <VCol
+              cols="12"
+              md="6"
+            >
+              <AppTextField
+                v-model="billingAddress.landmark"
+                label="Landmark"
+                placeholder="Nr. Hard Rock Cafe"
+              />
+            </VCol>
+
+            <!-- 👉 City -->
+            <VCol
+              cols="12"
+              md="6"
+            >
+              <AppTextField
+                v-model="billingAddress.city"
+                label="City"
+                placeholder="Los Angeles"
+              />
+            </VCol>
+
+            <!-- 👉 State -->
+            <VCol
+              cols="12"
+              md="6"
+            >
+              <AppTextField
+                v-model="billingAddress.state"
+                label="State"
+                placeholder="California"
+              />
+            </VCol>
+
+            <!-- 👉 Zip Code -->
+            <VCol
+              cols="12"
+              md="6"
+            >
+              <AppTextField
+                v-model="billingAddress.zipCode"
+                label="Zip Code"
+                placeholder="99950"
+                type="number"
+              />
+            </VCol>
+
+            <VCol cols="12">
+              <VSwitch label="Use as a billing address?" />
+            </VCol>
+
+            <!-- 👉 Submit and Cancel button -->
+            <VCol
+              cols="12"
+              class="text-center"
+            >
+              <VBtn
+                type="submit"
+                class="me-3"
+              >
+                submit
+              </VBtn>
+
+              <VBtn
+                variant="tonal"
+                color="secondary"
+                @click="resetForm"
+              >
+                Cancel
+              </VBtn>
+            </VCol>
+          </VRow>
+        </VForm>
+      </VCardText>
+    </VCard>
+  </VDialog>
+</template>