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

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

@@ -0,0 +1,198 @@
+<script setup lang="ts">
+import { Placeholder } from '@tiptap/extension-placeholder'
+import { TextAlign } from '@tiptap/extension-text-align'
+import { Underline } from '@tiptap/extension-underline'
+import { StarterKit } from '@tiptap/starter-kit'
+import { EditorContent, useEditor } from '@tiptap/vue-3'
+
+const props = defineProps<{
+  modelValue: string
+  placeholder?: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string): void
+}>()
+
+const editorRef = ref()
+
+const editor = useEditor({
+  content: props.modelValue,
+  extensions: [
+    StarterKit,
+    TextAlign.configure({
+      types: ['heading', 'paragraph'],
+    }),
+    Placeholder.configure({
+      placeholder: props.placeholder ?? 'Write something here...',
+    }),
+    Underline,
+  ],
+  onUpdate() {
+    if (!editor.value)
+      return
+
+    emit('update:modelValue', editor.value.getHTML())
+  },
+})
+
+watch(() => props.modelValue, () => {
+  const isSame = editor.value?.getHTML() === props.modelValue
+
+  if (isSame)
+    return
+
+  editor.value?.commands.setContent(props.modelValue)
+})
+</script>
+
+<template>
+  <div class="pa-6 productDescriptionEditor">
+    <!-- buttons -->
+    <div
+      v-if="editor"
+      class="d-flex gap-1 flex-wrap align-center"
+    >
+      <VBtn
+        size="small"
+        icon
+        rounded
+        :variant="editor.isActive('bold') ? 'tonal' : 'text'"
+        :color="editor.isActive('bold') ? 'primary' : 'default'"
+        @click="editor.chain().focus().toggleBold().run()"
+      >
+        <VIcon
+          icon="tabler-bold"
+          class="font-weight-medium"
+        />
+      </VBtn>
+
+      <VBtn
+        size="small"
+        icon
+        rounded
+        :variant="editor.isActive('underline') ? 'tonal' : 'text'"
+        :color="editor.isActive('underline') ? 'primary' : 'default'"
+        @click="editor.commands.toggleUnderline()"
+      >
+        <VIcon icon="tabler-underline" />
+      </VBtn>
+
+      <VBtn
+        size="small"
+        icon
+        rounded
+        :variant="editor.isActive('italic') ? 'tonal' : 'text'"
+        :color="editor.isActive('italic') ? 'primary' : 'default'"
+        @click="editor.chain().focus().toggleItalic().run()"
+      >
+        <VIcon
+          icon="tabler-italic"
+          class="font-weight-medium"
+        />
+      </VBtn>
+
+      <VBtn
+        size="small"
+        icon
+        rounded
+        :variant="editor.isActive('strike') ? 'tonal' : 'text'"
+        :color="editor.isActive('strike') ? 'primary' : 'default'"
+        @click="editor.chain().focus().toggleStrike().run()"
+      >
+        <VIcon
+          icon="tabler-strikethrough"
+          size="20"
+        />
+      </VBtn>
+
+      <VBtn
+        size="small"
+        icon
+        rounded
+        :variant="editor.isActive({ textAlign: 'left' }) ? 'tonal' : 'text'"
+        :color="editor.isActive({ textAlign: 'left' }) ? 'primary' : 'default'"
+        @click="editor.chain().focus().setTextAlign('left').run()"
+      >
+        <VIcon
+          icon="tabler-align-left"
+          size="20"
+        />
+      </VBtn>
+
+      <VBtn
+        size="small"
+        icon
+        rounded
+        :color="editor.isActive({ textAlign: 'center' }) ? 'primary' : 'default'"
+        :variant="editor.isActive({ textAlign: 'center' }) ? 'tonal' : 'text'"
+        @click="editor.chain().focus().setTextAlign('center').run()"
+      >
+        <VIcon
+          icon="tabler-align-center"
+          size="20"
+        />
+      </VBtn>
+
+      <VBtn
+        size="small"
+        icon
+        rounded
+        :variant="editor.isActive({ textAlign: 'right' }) ? 'tonal' : 'text'"
+        :color="editor.isActive({ textAlign: 'right' }) ? 'primary' : 'default'"
+        @click="editor.chain().focus().setTextAlign('right').run()"
+      >
+        <VIcon
+          icon="tabler-align-right"
+          size="20"
+        />
+      </VBtn>
+
+      <VBtn
+        size="small"
+        icon
+        rounded
+        :variant="editor.isActive({ textAlign: 'justify' }) ? 'tonal' : 'text'"
+        :color="editor.isActive({ textAlign: 'justify' }) ? 'primary' : 'default'"
+        @click="editor.chain().focus().setTextAlign('justify').run()"
+      >
+        <VIcon
+          icon="tabler-align-justified"
+          size="20"
+        />
+      </VBtn>
+    </div>
+
+    <VDivider class="my-4" />
+
+    <EditorContent
+      ref="editorRef"
+      :editor="editor"
+    />
+  </div>
+</template>
+
+<style lang="scss">
+.productDescriptionEditor {
+  .ProseMirror {
+    padding: 0 !important;
+    min-block-size: 12vh;
+
+    p {
+      margin-block-end: 0;
+    }
+
+    p.is-editor-empty:first-child::before {
+      block-size: 0;
+      color: #adb5bd;
+      content: attr(data-placeholder);
+      float: inline-start;
+      pointer-events: none;
+    }
+
+    &-focused {
+      outline: none;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+const { y } = useWindowScroll()
+
+const scrollToTop = () => {
+  window.scrollTo({
+    top: 0,
+    behavior: 'smooth',
+  })
+}
+</script>
+
+<template>
+  <Transition
+    name="app-transition-zoom-fade"
+    style="transform-origin: center;"
+  >
+    <VBtn
+      v-show="y > 200"
+      icon
+      density="comfortable"
+      class="scroll-to-top d-print-none"
+      @click="scrollToTop"
+    >
+      <VIcon
+        size="22"
+        icon="tabler-arrow-up"
+      />
+    </VBtn>
+  </Transition>
+</template>
+
+<style lang="scss">
+.scroll-to-top {
+  position: fixed !important;
+
+  // To keep button on top of v-layout. E.g. Email app
+  z-index: 999;
+  inset-block-end: 5%;
+  inset-inline-end: 25px;
+}
+</style>

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

@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import { PerfectScrollbar } from 'vue3-perfect-scrollbar'
+
+interface Shortcut {
+  icon: string
+  title: string
+  subtitle: string
+  to: object | string
+}
+
+interface Props {
+  togglerIcon?: string
+  shortcuts: Shortcut[]
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  togglerIcon: 'tabler-layout-grid-add',
+})
+
+const router = useRouter()
+</script>
+
+<template>
+  <IconBtn>
+    <VIcon
+      size="24"
+      :icon="props.togglerIcon"
+    />
+
+    <VMenu
+      activator="parent"
+      offset="12px"
+      location="bottom end"
+    >
+      <VCard
+        :width="$vuetify.display.smAndDown ? 330 : 380"
+        max-height="560"
+        class="d-flex flex-column"
+      >
+        <VCardItem class="py-3">
+          <h6 class="text-base font-weight-medium">
+            Shortcuts
+          </h6>
+
+          <template #append>
+            <IconBtn
+              size="small"
+              color="high-emphasis"
+            >
+              <VIcon
+                size="20"
+                icon="tabler-plus"
+              />
+            </IconBtn>
+          </template>
+        </VCardItem>
+
+        <VDivider />
+
+        <PerfectScrollbar :options="{ wheelPropagation: false }">
+          <VRow class="ma-0 mt-n1">
+            <VCol
+              v-for="(shortcut, index) in props.shortcuts"
+              :key="shortcut.title"
+              cols="6"
+              class="text-center border-t cursor-pointer pa-6 shortcut-icon"
+              :class="(index + 1) % 2 ? 'border-e' : ''"
+              @click="router.push(shortcut.to)"
+            >
+              <VAvatar
+                variant="tonal"
+                size="50"
+              >
+                <VIcon
+                  size="26"
+                  color="high-emphasis"
+                  :icon="shortcut.icon"
+                />
+              </VAvatar>
+
+              <h6 class="text-base font-weight-medium mt-3 mb-0">
+                {{ shortcut.title }}
+              </h6>
+              <p class="text-sm mb-0">
+                {{ shortcut.subtitle }}
+              </p>
+            </VCol>
+          </VRow>
+        </PerfectScrollbar>
+      </VCard>
+    </VMenu>
+  </IconBtn>
+</template>
+
+<style lang="scss">
+.shortcut-icon:hover {
+  background-color: rgba(var(--v-theme-on-surface), var(--v-hover-opacity));
+}
+</style>

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

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+interface Props {
+  page: number
+  itemsPerPage: number
+  totalItems: number
+}
+
+interface Emit {
+  (e: 'update:page', value: number): void
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<Emit>()
+
+const updatePage = (value: number) => {
+  emit('update:page', value)
+}
+</script>
+
+<template>
+  <div>
+    <VDivider />
+
+    <div class="d-flex align-center justify-sm-space-between justify-center flex-wrap gap-3 px-6 py-3">
+      <p class="text-disabled mb-0">
+        {{ paginationMeta({ page, itemsPerPage }, totalItems) }}
+      </p>
+
+      <VPagination
+        :model-value="page"
+        active-color="primary"
+        :length="Math.ceil(totalItems / itemsPerPage)"
+        :total-visible="$vuetify.display.xs ? 1 : Math.min(Math.ceil(totalItems / itemsPerPage), 5)"
+        @update:model-value="updatePage"
+      />
+    </div>
+  </div>
+</template>