Merge pull request #122 from SzymCode/dev

Dev
SzymCode · Sep 1, 2024 · 8092ddb · 8092ddb
2 parents 1254a13 + f4cfcd4
commit 8092ddb
Show file tree

Hide file tree

Showing 33 changed files with 286 additions and 79 deletions.
diff --git a/atomic/_old_structure/ts/components/Activity/ActivityDashboard.vue b/atomic/_old_structure/ts/components/Activity/ActivityDashboard.vue
@@ -11,7 +11,7 @@
             :loading="loading"
         />
         <card-data-table
-            :data="results"
+            :value="results"
             :loading="loading"
             :open-dialog="openDialog"
             :styles="activityStyle"

diff --git a/atomic/_old_structure/ts/components/Admin/AdminPanel.vue b/atomic/_old_structure/ts/components/Admin/AdminPanel.vue
@@ -6,51 +6,55 @@
                 <anchor-molecule href="#articles" class="grid-item">
                     <div class="adminBricksCircle" :style="articleCircleStyle">
                         <div>
-                            <p class="adminBricksCircleNumber">
-                                {{ articles?.length }}
-                            </p>
+                            <paragraph-atom
+                                class="adminBricksCircleNumber"
+                                :text="articles?.length"
+                            />
                             <i class="pi pi-comment adminBricksIcon" />
                         </div>
                     </div>
-                    <p
+                    <paragraph-atom
                         class="articlesBricksText"
                         :style="articleBricksTextStyle"
-                    >
-                        Articles
-                    </p>
+                        text="Articles"
+                    />
                 </anchor-molecule>
             </div>
             <div class="grid-item-container col-6 lg:col-4">
                 <anchor-molecule href="#contacts" class="grid-item">
                     <div class="adminBricksCircle" :style="contactCircleStyle">
                         <div>
-                            <p class="adminBricksCircleNumber">
-                                {{ contacts?.length }}
-                            </p>
+                            <paragraph-atom
+                                class="adminBricksCircleNumber"
+                                :text="contacts?.length"
+                            />
                             <i class="pi pi-users adminBricksIcon" />
                         </div>
                     </div>
-                    <p
+                    <paragraph-atom
                         class="contactsBricksText"
                         :style="contactBricksTextStyle"
-                    >
-                        Contacts
-                    </p>
+                        text="Contacts"
+                    />
                 </anchor-molecule>
             </div>
             <div class="grid-item-container col-6 lg:col-4">
                 <anchor-molecule href="#users" class="grid-item">
                     <div class="adminBricksCircle" :style="userCircleStyle">
                         <div>
-                            <p class="adminBricksCircleNumber">
-                                {{ users?.length }}
-                            </p>
+                            <paragraph-atom
+                                class="adminBricksCircleNumber"
+                                :text="users?.length"
+                            />
+
                             <i class="pi pi-users adminBricksIcon" />
                         </div>
                     </div>
-                    <p class="usersBricksText" :style="userBricksTextStyle">
-                        Users
-                    </p>
+                    <paragraph-atom
+                        class="usersBricksText"
+                        :style="userBricksTextStyle"
+                        text="Users"
+                    />
                 </anchor-molecule>
             </div>
 
@@ -84,17 +88,17 @@
         <article-dashboard
             :data="articles"
             :getData="getAllArticles"
-            :loading="articlesLoading"
+            :loading="!allLoaded"
         />
         <contact-dashboard
             :data="contacts"
             :getData="getAllContacts"
-            :loading="contactsLoading"
+            :loading="!allLoaded"
         />
         <user-dashboard
             :data="users"
             :getData="getAllUsers"
-            :loading="usersLoading"
+            :loading="!allLoaded"
         />
     </div>
 </template>

diff --git a/atomic/_old_structure/ts/components/Admin/ArticleDashboard.vue b/atomic/_old_structure/ts/components/Admin/ArticleDashboard.vue
@@ -1,7 +1,7 @@
 <template>
     <section id="articles">
         <card-data-table
-            :data="data"
+            :value="data"
             :loading="loading"
             :open-dialog="openDialog"
             :styles="articleStyle"

diff --git a/atomic/_old_structure/ts/components/Admin/ContactDashboard.vue b/atomic/_old_structure/ts/components/Admin/ContactDashboard.vue
@@ -1,7 +1,7 @@
 <template>
     <section id="contacts">
         <card-data-table
-            :data="data"
+            :value="data"
             :loading="loading"
             :open-dialog="openDialog"
             :styles="contactStyle"

diff --git a/atomic/_old_structure/ts/components/Admin/UserDashboard.vue b/atomic/_old_structure/ts/components/Admin/UserDashboard.vue
@@ -1,7 +1,7 @@
 <template>
     <section id="users">
         <card-data-table
-            :data="data"
+            :value="data"
             :loading="loading"
             :open-dialog="openDialog"
             :styles="userStyle"

diff --git a/atomic/_old_structure/ts/components/Article/ArticleDashboard.vue b/atomic/_old_structure/ts/components/Article/ArticleDashboard.vue
@@ -11,7 +11,7 @@
             :loading="loading"
         />
         <card-data-table
-            :data="results"
+            :value="results"
             :loading="loading"
             :open-dialog="openDialog"
             :styles="articleStyle"

diff --git a/atomic/_old_structure/ts/components/Auth/Login.vue b/atomic/_old_structure/ts/components/Auth/Login.vue
@@ -8,13 +8,12 @@
                         <image-atom src="logo.svg" width="50" />
                         <heading-atom :tag="1" text="Welcome Back" />
 
-                        <p class="mb-2">
-                            Don't have an account?
+                        <paragraph-atom class="mb-2" text="Don't have an account?">
                             <anchor-molecule
                                 href="/register"
                                 :label="'Create today!'"
                             />
-                        </p>
+                        </paragraph-atom>
                     </div>
                 </div>
             </template>

diff --git a/atomic/_old_structure/ts/components/Auth/Register.vue b/atomic/_old_structure/ts/components/Auth/Register.vue
@@ -7,10 +7,9 @@
                     <div class="authCardHeader">
                         <heading-atom :tag="1" text="Register" />
 
-                        <p class="mb-2">
-                            Already have an account?
+                        <paragraph-atom class="mb-2" text="Already have an account?">
                             <anchor-molecule href="/login" :label="'Log in!'" />
-                        </p>
+                        </paragraph-atom>
                     </div>
                 </div>
             </template>

diff --git a/atomic/_old_structure/ts/components/Contact/ContactDashboard.vue b/atomic/_old_structure/ts/components/Contact/ContactDashboard.vue
@@ -11,7 +11,7 @@
             :loading="loading"
         />
         <card-data-table
-            :data="results"
+            :value="results"
             :loading="loading"
             :open-dialog="openDialog"
             :styles="contactStyle"

diff --git a/atomic/_old_structure/ts/components/Home/Features/Access.vue b/atomic/_old_structure/ts/components/Home/Features/Access.vue
@@ -28,11 +28,12 @@
                         />
                     </div>
                     <div class="flip-card-back">
-                        <p class="mt-2">
-                            Responsive web design was coined in 2010 by Ethan
+                        <paragraph-atom
+                            class="mt-2"
+                            text="Responsive web design was coined in 2010 by Ethan
                             Marcotte, optimizing layouts for desktops with
-                            flexible grids and layouts.
-                        </p>
+                            flexible grids and layouts."
+                        />
                     </div>
                 </div>
             </div>
@@ -51,11 +52,11 @@
                         />
                     </div>
                     <div class="flip-card-back">
-                        <p>
-                            Over 53% of internet users worldwide access the web
+                        <paragraph-atom
+                            text="Over 53% of internet users worldwide access the web
                             through mobile devices, highlighting the significant
-                            shift towards mobile browsing in recent years.
-                        </p>
+                            shift towards mobile browsing in recent years."
+                        />
                     </div>
                 </div>
             </div>
@@ -74,12 +75,12 @@
                         />
                     </div>
                     <div class="flip-card-back">
-                        <p class="flip-card-back-text">
-                            Google's implementation of mobile-first indexing in
-                            2018 underscored the importance of mobile-responsive
-                            design, prioritizing mobile versions for indexing
-                            and ranking.
-                        </p>
+                        <paragraph-atom
+                            class="flip-card-back-text"
+                            text="Google's implementation of mobile-first indexing in
+                            2018 underscored the importance of mobile-responsive design,
+                            prioritizing mobile versions for indexing and ranking."
+                        />
                     </div>
                 </div>
             </div>

diff --git a/atomic/_old_structure/ts/components/Home/WhyUs.vue b/atomic/_old_structure/ts/components/Home/WhyUs.vue
@@ -38,7 +38,10 @@
             </div>
         </template>
         <template #default>
-            <p class="m-0 text-sm">{{ dialogData.description }}</p>
+            <paragraph-atom
+                class="m-0 text-sm"
+                :text="dialogData.description"
+            />
         </template>
     </Dialog>
 </template>

diff --git a/atomic/atoms/Paragraph.vue b/atomic/atoms/Paragraph.vue
@@ -0,0 +1,12 @@
+<template>
+    <p>
+        {{ text }}
+        <slot />
+    </p>
+</template>
+
+<script setup lang="ts">
+import { ParagraphInterface } from 'atomic/bosons/types'
+
+defineProps<ParagraphInterface>()
+</script>
diff --git a/atomic/atoms/Skeleton.vue b/atomic/atoms/Skeleton.vue
@@ -0,0 +1,17 @@
+<template>
+    <Skeleton
+        :shape="shape"
+        :size="size"
+        :width="width"
+        :height="height"
+        :border-radius="borderRadius"
+        :animation="animation"
+        :unstyled="unstyled"
+    />
+</template>
+
+<script setup lang="ts">
+import { SkeletonInterface } from 'atomic/bosons/types'
+
+defineProps<SkeletonInterface>()
+</script>
diff --git a/atomic/atoms/atoms.ts b/atomic/atoms/atoms.ts
@@ -9,9 +9,11 @@ import {
     InputText,
     Item,
     Label,
+    Paragraph,
     ProgressBar,
     ProgressSpinner,
     RadioButton,
+    Skeleton,
     Toast,
 } from './'
 
@@ -24,8 +26,10 @@ export default function registerAtoms(app: App<Element>): void {
         .component('input-text-atom', InputText)
         .component('item-atom', Item)
         .component('label-atom', Label)
+        .component('paragraph-atom', Paragraph)
         .component('progress-bar-atom', ProgressBar)
         .component('progress-spinner-atom', ProgressSpinner)
         .component('radio-button-atom', RadioButton)
+        .component('skeleton-atom', Skeleton)
         .component('toast-atom', Toast)
 }
diff --git a/atomic/atoms/index.ts b/atomic/atoms/index.ts
@@ -8,7 +8,9 @@ export { default as Image } from './Image.vue'
 export { default as InputText } from './InputText.vue'
 export { default as Item } from './Item.vue'
 export { default as Label } from './Label.vue'
+export { default as Paragraph } from './Paragraph.vue'
 export { default as ProgressBar } from './ProgressBar.vue'
 export { default as ProgressSpinner } from './ProgressSpinner.vue'
 export { default as RadioButton } from './RadioButton.vue'
+export { default as Skeleton } from './Skeleton.vue'
 export { default as Toast } from './Toast.vue'