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

package/dist/templates/vuexy-portal/src/@core/components/app-form-elements/CustomCheckboxes.vue

@@ -0,0 +1,81 @@
+<script lang="ts" setup>
+import type { CustomInputContent, GridColumn } from '@core/types'
+
+interface Props {
+  selectedCheckbox: string[]
+  checkboxContent: CustomInputContent[]
+  gridColumn?: GridColumn
+}
+
+interface Emit {
+  (e: 'update:selectedCheckbox', value: string[]): void
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<Emit>()
+
+const updateSelectedOption = (value: string[] | null) => {
+  if (typeof value !== 'boolean' && value !== null)
+    emit('update:selectedCheckbox', value)
+}
+</script>
+
+<template>
+  <VRow
+    v-if="props.checkboxContent && props.selectedCheckbox"
+    class="custom-input-wrapper"
+  >
+    <VCol
+      v-for="item in props.checkboxContent"
+      :key="item.title"
+      v-bind="gridColumn"
+    >
+      <VLabel
+        class="custom-input custom-checkbox rounded cursor-pointer"
+        :class="props.selectedCheckbox.includes(item.value) ? 'active' : ''"
+      >
+        <div>
+          <VCheckbox
+            :model-value="props.selectedCheckbox"
+            :value="item.value"
+            @update:model-value="updateSelectedOption"
+          />
+        </div>
+        <slot :item="item">
+          <div class="flex-grow-1">
+            <div class="d-flex align-center mb-2">
+              <h6 class="cr-title text-base">
+                {{ item.title }}
+              </h6>
+              <VSpacer />
+              <span
+                v-if="item.subtitle"
+                class="text-disabled text-body-2"
+              >{{ item.subtitle }}</span>
+            </div>
+            <p class="text-sm mb-0">
+              {{ item.desc }}
+            </p>
+          </div>
+        </slot>
+      </VLabel>
+    </VCol>
+  </VRow>
+</template>
+
+<style lang="scss" scoped>
+.custom-checkbox {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.5rem;
+
+  .v-checkbox {
+    margin-block-start: -0.375rem;
+  }
+
+  .cr-title {
+    font-weight: 500;
+    line-height: 1.375rem;
+  }
+}
+</style>

package/dist/templates/vuexy-portal/src/@core/components/app-form-elements/CustomCheckboxesWithIcon.vue

@@ -0,0 +1,95 @@
+<script lang="ts" setup>
+import type { CustomInputContent, GridColumn } from '@core/types'
+
+interface Props {
+  selectedCheckbox: string[]
+  checkboxContent: CustomInputContent[]
+  gridColumn?: GridColumn
+}
+
+interface Emit {
+  (e: 'update:selectedCheckbox', value: string[]): void
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<Emit>()
+
+const updateSelectedOption = (value: string[] | null) => {
+  if (typeof value !== 'boolean' && value !== null)
+    emit('update:selectedCheckbox', value)
+}
+</script>
+
+<template>
+  <VRow
+    v-if="props.checkboxContent && props.selectedCheckbox"
+    class="custom-input-wrapper"
+  >
+    <VCol
+      v-for="item in props.checkboxContent"
+      :key="item.title"
+      v-bind="gridColumn"
+    >
+      <VLabel
+        class="custom-input custom-checkbox-icon rounded cursor-pointer"
+        :class="props.selectedCheckbox.includes(item.value) ? 'active' : ''"
+      >
+        <slot :item="item">
+          <div class="d-flex flex-column align-center text-center gap-2">
+            <VIcon
+              v-bind="item.icon"
+              class="text-high-emphasis"
+            />
+
+            <h6 class="cr-title text-base">
+              {{ item.title }}
+            </h6>
+            <p class="text-sm clamp-text mb-0">
+              {{ item.desc }}
+            </p>
+          </div>
+        </slot>
+        <div>
+          <VCheckbox
+            :model-value="props.selectedCheckbox"
+            :value="item.value"
+            @update:model-value="updateSelectedOption"
+          />
+        </div>
+      </VLabel>
+    </VCol>
+  </VRow>
+</template>
+
+<style lang="scss" scoped>
+.custom-checkbox-icon {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+
+  .v-checkbox {
+    margin-block-end: -0.375rem;
+
+    .v-selection-control__wrapper {
+      margin-inline-start: 0;
+    }
+  }
+
+  .cr-title {
+    font-weight: 500;
+    line-height: 1.375rem;
+  }
+}
+</style>
+
+<style lang="scss">
+.custom-checkbox-icon {
+  .v-checkbox {
+    margin-block-end: -0.375rem;
+
+    .v-selection-control__wrapper {
+      margin-inline-start: 0;
+    }
+  }
+}
+</style>

package/dist/templates/vuexy-portal/src/@core/components/app-form-elements/CustomCheckboxesWithImage.vue

@@ -0,0 +1,93 @@
+<script lang="ts" setup>
+import type { GridColumn } from '@core/types'
+
+interface Props {
+  selectedCheckbox: string[]
+  checkboxContent: { bgImage: string; value: string; label?: string }[]
+  gridColumn?: GridColumn
+}
+
+interface Emit {
+  (e: 'update:selectedCheckbox', value: string[]): void
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<Emit>()
+
+const updateSelectedOption = (value: string[] | null) => {
+  if (typeof value !== 'boolean' && value !== null)
+    emit('update:selectedCheckbox', value)
+}
+</script>
+
+<template>
+  <VRow
+    v-if="props.checkboxContent && props.selectedCheckbox"
+    class="custom-input-wrapper"
+  >
+    <VCol
+      v-for="item in props.checkboxContent"
+      :key="item.value"
+      v-bind="gridColumn"
+    >
+      <VLabel
+        class="custom-input custom-checkbox rounded cursor-pointer w-100"
+        :class="props.selectedCheckbox.includes(item.value) ? 'active' : ''"
+      >
+        <div>
+          <VCheckbox
+            :id="`custom-checkbox-with-img-${item.value}`"
+            :model-value="props.selectedCheckbox"
+            :value="item.value"
+            @update:model-value="updateSelectedOption"
+          />
+        </div>
+        <img
+          :src="item.bgImage"
+          alt="bg-img"
+          class="custom-checkbox-image"
+        >
+      </VLabel>
+
+      <VLabel
+        v-if="item.label || $slots.label"
+        :for="`custom-checkbox-with-img-${item.value}`"
+        class="cursor-pointer"
+      >
+        <slot
+          name="label"
+          :label="item.label"
+        >
+          {{ item.label }}
+        </slot>
+      </VLabel>
+    </VCol>
+  </VRow>
+</template>
+
+<style lang="scss" scoped>
+.custom-checkbox {
+  position: relative;
+  padding: 0;
+
+  .custom-checkbox-image {
+    block-size: 100%;
+    inline-size: 100%;
+    min-inline-size: 100%;
+  }
+
+  .v-checkbox {
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-end: 0;
+    visibility: hidden;
+  }
+
+  &:hover,
+  &.active {
+    .v-checkbox {
+      visibility: visible;
+    }
+  }
+}
+</style>

package/dist/templates/vuexy-portal/src/@core/components/app-form-elements/CustomRadios.vue

@@ -0,0 +1,81 @@
+<script lang="ts" setup>
+import type { CustomInputContent, GridColumn } from '@core/types'
+
+interface Props {
+  selectedRadio: string
+  radioContent: CustomInputContent[]
+  gridColumn?: GridColumn
+}
+
+interface Emit {
+  (e: 'update:selectedRadio', value: string): void
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<Emit>()
+
+const updateSelectedOption = (value: string | null) => {
+  if (value !== null)
+    emit('update:selectedRadio', value)
+}
+</script>
+
+<template>
+  <VRadioGroup
+    v-if="props.radioContent"
+    :model-value="props.selectedRadio"
+    class="custom-input-wrapper"
+    @update:model-value="updateSelectedOption"
+  >
+    <VRow>
+      <VCol
+        v-for="item in props.radioContent"
+        :key="item.title"
+        v-bind="gridColumn"
+      >
+        <VLabel
+          class="custom-input custom-radio rounded cursor-pointer"
+          :class="props.selectedRadio === item.value ? 'active' : ''"
+        >
+          <div>
+            <VRadio :value="item.value" />
+          </div>
+          <slot :item="item">
+            <div class="flex-grow-1">
+              <div class="d-flex align-center mb-2">
+                <h6 class="cr-title text-base">
+                  {{ item.title }}
+                </h6>
+                <VSpacer />
+                <span
+                  v-if="item.subtitle"
+                  class="text-disabled text-body-2"
+                >{{ item.subtitle }}</span>
+              </div>
+              <p class="text-body-2 mb-0">
+                {{ item.desc }}
+              </p>
+            </div>
+          </slot>
+        </VLabel>
+      </VCol>
+    </VRow>
+  </VRadioGroup>
+</template>
+
+<style lang="scss" scoped>
+.custom-radio {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.25rem;
+
+  .v-radio {
+    margin-block-start: -0.45rem;
+  }
+
+  .cr-title {
+    font-weight: 500;
+    line-height: 1.375rem;
+  }
+}
+</style>

package/dist/templates/vuexy-portal/src/@core/components/app-form-elements/CustomRadiosWithIcon.vue

@@ -0,0 +1,88 @@
+<script lang="ts" setup>
+import type { CustomInputContent, GridColumn } from '@core/types'
+
+interface Props {
+  selectedRadio: string
+  radioContent: CustomInputContent[]
+  gridColumn?: GridColumn
+}
+
+interface Emit {
+  (e: 'update:selectedRadio', value: string): void
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<Emit>()
+
+const updateSelectedOption = (value: string | null) => {
+  if (value !== null)
+    emit('update:selectedRadio', value)
+}
+</script>
+
+<template>
+  <VRadioGroup
+    v-if="props.radioContent"
+    :model-value="props.selectedRadio"
+    class="custom-input-wrapper"
+    @update:model-value="updateSelectedOption"
+  >
+    <VRow>
+      <VCol
+        v-for="item in props.radioContent"
+        :key="item.title"
+        v-bind="gridColumn"
+      >
+        <VLabel
+          class="custom-input custom-radio-icon rounded cursor-pointer"
+          :class="props.selectedRadio === item.value ? 'active' : ''"
+        >
+          <slot :item="item">
+            <div class="d-flex flex-column align-center text-center gap-2">
+              <VIcon
+                v-bind="item.icon"
+                class="text-high-emphasis"
+              />
+              <h6 class="text-h6">
+                {{ item.title }}
+              </h6>
+
+              <p class="text-body-2 mb-0">
+                {{ item.desc }}
+              </p>
+            </div>
+          </slot>
+
+          <div>
+            <VRadio :value="item.value" />
+          </div>
+        </VLabel>
+      </VCol>
+    </VRow>
+  </VRadioGroup>
+</template>
+
+<style lang="scss" scoped>
+.custom-radio-icon {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+
+  .v-radio {
+    margin-block-end: -0.5rem;
+  }
+}
+</style>
+
+<style lang="scss">
+.custom-radio-icon {
+  .v-radio {
+    margin-block-end: -0.25rem;
+
+    .v-selection-control__wrapper {
+      margin-inline-start: 0;
+    }
+  }
+}
+</style>

package/dist/templates/vuexy-portal/src/@core/components/app-form-elements/CustomRadiosWithImage.vue

@@ -0,0 +1,99 @@
+<script lang="ts" setup>
+import type { GridColumn } from '@core/types'
+
+interface Props {
+  selectedRadio: string
+  radioContent: { bgImage: string | undefined; value: string; label?: string }[]
+  gridColumn?: GridColumn
+}
+
+interface Emit {
+  (e: 'update:selectedRadio', value: string): void
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<Emit>()
+
+const updateSelectedOption = (value: string | null) => {
+  if (value !== null)
+    emit('update:selectedRadio', value)
+}
+</script>
+
+<template>
+  <VRadioGroup
+    v-if="props.radioContent"
+    :model-value="props.selectedRadio"
+    class="custom-input-wrapper"
+    @update:model-value="updateSelectedOption"
+  >
+    <VRow>
+      <VCol
+        v-for="item in props.radioContent"
+        :key="item.bgImage"
+        v-bind="gridColumn"
+      >
+        <VLabel
+          class="custom-input custom-radio rounded cursor-pointer w-100"
+          :class="props.selectedRadio === item.value ? 'active' : ''"
+        >
+          <slot
+            name="content"
+            :item="item"
+          >
+            <template v-if="typeof item.bgImage === 'object'">
+              <Component
+                :is="item.bgImage"
+                class="custom-radio-image"
+              />
+            </template>
+            <img
+              v-else
+              :src="item.bgImage"
+              alt="bg-img"
+              class="custom-radio-image"
+            >
+          </slot>
+
+          <VRadio
+            :id="`custom-radio-with-img-${item.value}`"
+            :value="item.value"
+          />
+        </VLabel>
+
+        <VLabel
+          v-if="item.label || $slots.label"
+          :for="`custom-radio-with-img-${item.value}`"
+          class="cursor-pointer"
+        >
+          <slot
+            name="label"
+            :label="item.label"
+          >
+            {{ item.label }}
+          </slot>
+        </VLabel>
+      </VCol>
+    </VRow>
+  </VRadioGroup>
+</template>
+
+<style lang="scss" scoped>
+.custom-radio {
+  padding: 0 !important;
+
+  &.active {
+    border-width: 1px;
+  }
+
+  .custom-radio-image {
+    block-size: 100%;
+    inline-size: 100%;
+    min-inline-size: 100%;
+  }
+
+  .v-radio {
+    visibility: hidden;
+  }
+}
+</style>

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

@@ -0,0 +1,167 @@
+<script setup lang="ts">
+interface Props {
+  collapsed?: boolean
+  noActions?: boolean
+  actionCollapsed?: boolean
+  actionRefresh?: boolean
+  actionRemove?: boolean
+  loading?: boolean | undefined
+  title?: string
+}
+
+interface Emit {
+  (e: 'collapsed', isContentCollapsed: boolean): void
+  (e: 'refresh', stopLoading: () => void): void
+  (e: 'trash'): void
+  (e: 'initialLoad'): void
+  (e: 'update:loading', loading: boolean): void
+}
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<Props>(), {
+  collapsed: false,
+  noActions: false,
+  actionCollapsed: false,
+  actionRefresh: false,
+  actionRemove: false,
+  loading: undefined,
+  title: undefined,
+})
+
+const emit = defineEmits<Emit>()
+
+const _loading = ref(false)
+
+const $loading = computed({
+  get() {
+    return props.loading !== undefined ? props.loading : _loading.value
+  },
+
+  set(value: boolean) {
+    props.loading !== undefined ? emit('update:loading', value) : _loading.value = value
+  },
+})
+
+const isContentCollapsed = ref(props.collapsed)
+const isCardRemoved = ref(false)
+
+// stop loading
+const stopLoading = () => {
+  $loading.value = false
+}
+
+// trigger collapse
+const triggerCollapse = () => {
+  isContentCollapsed.value = !isContentCollapsed.value
+  emit('collapsed', isContentCollapsed.value)
+}
+
+// trigger refresh
+const triggerRefresh = () => {
+  $loading.value = true
+  emit('refresh', stopLoading)
+}
+
+// trigger removal
+const triggeredRemove = () => {
+  isCardRemoved.value = true
+  emit('trash')
+}
+</script>
+
+<template>
+  <VExpandTransition>
+    <!-- TODO remove div when transition work with v-card components: https://github.com/vuetifyjs/vuetify/issues/15111 -->
+    <div v-if="!isCardRemoved">
+      <VCard v-bind="$attrs">
+        <VCardItem>
+          <VCardTitle v-if="props.title || $slots.title">
+            <!-- 👉 Title slot and prop -->
+            <slot name="title">
+              {{ props.title }}
+            </slot>
+          </VCardTitle>
+
+          <template #append>
+            <!-- 👉 Before actions slot -->
+            <div>
+              <slot name="before-actions" />
+
+              <!-- SECTION Actions buttons -->
+
+              <!-- 👉 Collapse button -->
+              <IconBtn
+                v-if="(!(actionRemove || actionRefresh) || actionCollapsed) && !noActions"
+                @click="triggerCollapse"
+              >
+                <VIcon
+                  size="20"
+                  icon="tabler-chevron-up"
+                  :style="{ transform: isContentCollapsed ? 'rotate(-180deg)' : undefined }"
+                  style="transition-duration: 0.28s;"
+                />
+              </IconBtn>
+
+              <!-- 👉 Overlay button -->
+              <IconBtn
+                v-if="(!(actionRemove || actionCollapsed) || actionRefresh) && !noActions"
+                @click="triggerRefresh"
+              >
+                <VIcon
+                  size="20"
+                  icon="tabler-refresh"
+                />
+              </IconBtn>
+
+              <!-- 👉 Close button -->
+              <IconBtn
+                v-if="(!(actionRefresh || actionCollapsed) || actionRemove) && !noActions"
+                @click="triggeredRemove"
+              >
+                <VIcon
+                  size="20"
+                  icon="tabler-x"
+                />
+              </IconBtn>
+            </div>
+          <!-- !SECTION -->
+          </template>
+        </VCardItem>
+
+        <!-- 👉 card content -->
+        <VExpandTransition>
+          <div
+            v-show="!isContentCollapsed"
+            class="v-card-content"
+          >
+            <slot />
+          </div>
+        </VExpandTransition>
+
+        <!-- 👉 Overlay -->
+        <VOverlay
+          v-model="$loading"
+          contained
+          persistent
+          scroll-strategy="none"
+          class="align-center justify-center"
+        >
+          <VProgressCircular indeterminate />
+        </VOverlay>
+      </VCard>
+    </div>
+  </VExpandTransition>
+</template>
+
+<style lang="scss">
+.v-card-item {
+  +.v-card-content {
+    .v-card-text:first-child {
+      padding-block-start: 0;
+    }
+  }
+}
+</style>