Merge pull request #6 from ionivetech/release/1.3.0

Release/1.3.0
ionivetech · Jul 31, 2024 · fdc9af3 · fdc9af3
2 parents 80193e9 + 2fb48cb
commit fdc9af3
Show file tree

Hide file tree

Showing 67 changed files with 9,962 additions and 7,134 deletions.
diff --git a/.eslintrc b/.eslintrc
diff --git a/.gitignore b/.gitignore
@@ -1,29 +1,29 @@
-# Nuxt dev/build outputs
-.output
-.data
-.nuxt
-.nitro
-.cache
-dist
-
-# Node dependencies
-node_modules
-
-# Lock
-package-lock.json
-yarn-lock.yaml
-pnpm-lock.yaml
-
-# Logs
-logs
-*.log
-
-# Misc
-.DS_Store
-.fleet
-.idea
-
-# Local env files
-.env
-.env.*
-!.env.example
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Lock
+package-lock.json
+yarn-lock.yaml
+pnpm-lock.yaml
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example
diff --git a/.prettierignore b/.prettierignore
diff --git a/.prettierrc.json b/.prettierrc.json
diff --git a/app.config.ts → app/app.config.ts b/app.config.ts → app/app.config.ts
diff --git a/app.vue → app/app.vue b/app.vue → app/app.vue
diff --git a/assets/css/components.scss → app/assets/css/components.scss b/assets/css/components.scss → app/assets/css/components.scss
diff --git a/assets/css/main.scss → app/assets/css/main.scss b/assets/css/main.scss → app/assets/css/main.scss
diff --git a/assets/css/transition.scss → app/assets/css/transition.scss b/assets/css/transition.scss → app/assets/css/transition.scss
diff --git a/assets/file/doa-harian.json → app/assets/file/doa-harian.json b/assets/file/doa-harian.json → app/assets/file/doa-harian.json
diff --git a/components/AudioPlayer.vue → app/components/AudioPlayer.vue b/components/AudioPlayer.vue → app/components/AudioPlayer.vue
@@ -27,11 +27,13 @@ watch(
         setTimeout(() => {
           initAudioPlayer()
         }, 250)
-      } else {
+      }
+      else {
         playerSourceRef.value = val.source
         playerRef.value.load()
       }
-    } else {
+    }
+    else {
       showAudioPlayer.value = false
     }
   },
@@ -139,7 +141,8 @@ const initial = () => {
 const initAudioPlayer = () => {
   if (playerRef.value.readyState > 0) {
     initial()
-  } else {
+  }
+  else {
     playerRef.value.addEventListener('loadedmetadata', () => {
       initial()
     })
@@ -167,7 +170,7 @@ const initAudioPlayer = () => {
               ref="playerSourceRef"
               :src="alQuranStore.getPlayingAudio?.source"
               type="audio/mpeg"
-            />
+            >
           </audio>
 
           <div class="p-2.5 md:p-4">
@@ -183,9 +186,7 @@ const initAudioPlayer = () => {
               </div>
 
               <div>
-                <p
-                  class="text-sm font-semibold tracking-wide text-yami dark:text-slate-200 md:text-base"
-                >
+                <p class="text-sm font-semibold tracking-wide text-yami dark:text-slate-200 md:text-base">
                   {{ alQuranStore.getPlayingAudio?.surah }}
                 </p>
                 <p class="text-xs font-medium text-smoke-1 dark:text-smoke-2 md:text-sm">
@@ -215,11 +216,13 @@ const initAudioPlayer = () => {
               type="range"
               @input="onInputSlider"
               @change="onChangeProgressPosition"
-            />
+            >
 
             <!-- Current time & duration -->
             <div class="mt-1 flex items-center justify-between">
-              <p class="text-xs text-yami dark:text-slate-200">{{ labelCurrentTime }}</p>
+              <p class="text-xs text-yami dark:text-slate-200">
+                {{ labelCurrentTime }}
+              </p>
 
               <p class="text-xs text-smoke-1 dark:text-smoke-2">
                 {{ labelAudioDuration }}

diff --git a/components/BottomNavigation.vue → app/components/BottomNavigation.vue b/components/BottomNavigation.vue → app/components/BottomNavigation.vue
diff --git a/components/Footer.vue → app/components/Footer.vue b/components/Footer.vue → app/components/Footer.vue
@@ -2,7 +2,9 @@
   <footer class="border-t border-gray-300/70 py-4 dark:border-gray-700">
     <div class="container flex flex-col items-center space-y-3 sm:space-y-5">
       <div class="flex items-center space-x-2">
-        <p class="text-sm text-gray-600 dark:text-smoke-2">Made with</p>
+        <p class="text-sm text-gray-600 dark:text-smoke-2">
+          Made with
+        </p>
         <Icon
           name="logos:nuxt-icon"
           class="text-xl"
@@ -32,7 +34,9 @@
           </NuxtLink>
         </div>
 
-        <p class="pl-3 text-sm text-gray-600 dark:text-smoke-2">© 2023 All rights reserved.</p>
+        <p class="pl-3 text-sm text-gray-600 dark:text-smoke-2">
+          © 2023 All rights reserved.
+        </p>
       </div>
     </div>
   </footer>

diff --git a/components/Input.vue → app/components/Input.vue b/components/Input.vue → app/components/Input.vue
diff --git a/app/components/InputSearch.vue b/app/components/InputSearch.vue
@@ -0,0 +1,27 @@
+<script lang="ts" setup>
+const search = defineModel<string>()
+
+defineProps<{
+  placeholder: string
+}>()
+</script>
+
+<template>
+  <div class="relative w-full md:w-8/12 lg:w-6/12">
+    <input
+      v-model="search"
+      type="text"
+      :placeholder="placeholder"
+      class="input-search"
+    >
+
+    <div
+      class="absolute inset-y-2/4 right-1 flex size-8 -translate-y-2/4 items-center justify-center rounded-full bg-teal-600 dark:bg-slate-700 md:right-2 md:size-9"
+    >
+      <Icon
+        name="radix-icons:magnifying-glass"
+        class="text-xl text-white"
+      />
+    </div>
+  </div>
+</template>
diff --git a/components/PopupPwa.vue → app/components/PopupPwa.vue b/components/PopupPwa.vue → app/components/PopupPwa.vue
diff --git a/components/hadith/Card.vue → app/components/hadith/Card.vue b/components/hadith/Card.vue → app/components/hadith/Card.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 // Interface
-import type { IHadithItems } from 'models/IHadith'
+import type { IHadithItems } from '@models/IHadith';
 
 // Props
 withDefaults(
@@ -16,7 +16,7 @@ withDefaults(
 
 <template>
   <div
-    class="rounded-lg border border-gray-300/70 p-4 transition-all duration-150 ease-linear hover:!border-teal-600 hover:shadow-[0px_0px_20px_#f0f0f0] dark:border-gray-700 hover:dark:shadow-[0px_0px_20px_#2f2f2f] md:p-6"
+    class="rounded-lg border border-gray-300/70 p-4 transition-all duration-200 ease-linear hover:border-teal-600 hover:shadow-hadith-card dark:border-gray-700 hover:dark:shadow-hadith-card-dark md:p-6"
   >
     <p class="mb-6 text-sm font-semibold text-yami dark:text-slate-200 md:text-base">
       Hadits {{ hadithHistoryName }} Nomor {{ hadith.number }}
@@ -25,12 +25,12 @@ withDefaults(
     <p
       dir="rtl"
       lang="ar"
-      class="mb-3 text-right font-mono text-3xl leading-[65px] text-slate-800 dark:text-slate-200 md:!leading-[70px] lg:text-4xl lg:!leading-[80px]"
+      class="mb-3 text-right font-mono text-3xl leading-[65px] text-slate-800 dark:text-slate-200 md:leading-[70px] lg:text-4xl lg:leading-[80px]"
     >
       {{ hadith.arab }}
     </p>
 
-    <p class="text-sm !leading-7 text-smoke-1 dark:text-smoke-2 md:text-base">
+    <p class="text-sm leading-7 text-smoke-1 dark:text-smoke-2 md:text-base">
       {{ hadith.id }}
     </p>
   </div>

diff --git a/app/components/hadith/HeaderList.vue b/app/components/hadith/HeaderList.vue
@@ -0,0 +1,35 @@
+<script lang="ts" setup>
+const search = defineModel<string>()
+
+// Props
+withDefaults(
+  defineProps<{ hadithHistorySelected: string }>(),
+  { hadithHistorySelected: '' },
+)
+
+const emits = defineEmits<{
+  (e: 'change-hadith-history', value: string): void
+}>()
+</script>
+
+<template>
+  <div class="search-section-wrapper">
+    <!-- Icon -->
+    <Icon
+      name="fa6-solid:book-open"
+      class="text-[70px] text-white sm:text-[95px]"
+    />
+
+    <!-- Search field -->
+    <InputSearch
+      v-model="search"
+      placeholder="Cari nomor hadits"
+    />
+
+    <!-- List name of history -->
+    <HadithHistoryList
+      :selected="hadithHistorySelected"
+      @change-hadith-history="emits('change-hadith-history', $event)"
+    />
+  </div>
+</template>
diff --git a/components/hadith/HistoryList.vue → app/components/hadith/HistoryList.vue b/components/hadith/HistoryList.vue → app/components/hadith/HistoryList.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { IHadithHistory } from 'models/IHadith'
+import type { IHadithHistory } from '@models/IHadith';
 
 // Props
 defineProps<{

diff --git a/components/header/DetailSurah.vue → app/components/header/DetailSurah.vue b/components/header/DetailSurah.vue → app/components/header/DetailSurah.vue
@@ -1,14 +1,13 @@
 <script setup lang="ts">
 // Interfaces
-import type { ISurah } from 'models/ISurah'
+import type { ISurah } from '@models/ISurah';
 
 // Store
 const alQuranStore = useAlQuranStore()
 
 // Emits
 const emits = defineEmits<{
-  (e: 'show-detail'): void
-  (e: 'show-list'): void
+  (e: 'show-detail' | 'show-list'): void
 }>()
 
 // Surah detail

diff --git a/components/header/index.vue → app/components/header/index.vue b/components/header/index.vue → app/components/header/index.vue
@@ -37,7 +37,7 @@ const isDark = computed<boolean>({
             alt="logo-app"
             width="121"
             height="24"
-          />
+          >
         </NuxtLink>
 
         <!-- Menu -->

diff --git a/components/modal/DetailSurah.vue → app/components/modal/DetailSurah.vue b/components/modal/DetailSurah.vue → app/components/modal/DetailSurah.vue
@@ -33,7 +33,9 @@ const emits = defineEmits<{
     >
       <div class="p-6">
         <div class="mb-6 flex items-center justify-between">
-          <h4 class="text-xl font-semibold text-yami dark:text-white">Detail Surah</h4>
+          <h4 class="text-xl font-semibold text-yami dark:text-white">
+            Detail Surah
+          </h4>
           <Icon
             name="heroicons:x-mark"
             class="cursor-pointer text-xl"

diff --git a/components/modal/Locations.vue → app/components/modal/Locations.vue b/components/modal/Locations.vue → app/components/modal/Locations.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { ILocations } from '@/models/ILocation'
+import type { ILocations } from '@models/ILocation';
 
 // Show modal
 const showModal = defineModel<boolean>()
@@ -61,7 +61,9 @@ const closeModal = () => (showModal.value = false)
       >
         <template #header>
           <div class="mb-4 flex items-center justify-between">
-            <h4 class="text-xl font-semibold text-yami dark:text-white">Pilih Lokasi</h4>
+            <h4 class="text-xl font-semibold text-yami dark:text-white">
+              Pilih Lokasi
+            </h4>
             <Icon
               name="heroicons:x-mark"
               class="cursor-pointer text-xl"

diff --git a/components/modal/Tafsir.vue → app/components/modal/Tafsir.vue b/components/modal/Tafsir.vue → app/components/modal/Tafsir.vue
@@ -34,7 +34,9 @@ const emits = defineEmits<{
     >
       <div class="py-6">
         <div class="mb-6 flex items-center justify-between px-6">
-          <h4 class="text-xl font-semibold text-yami dark:text-white">Tafsir</h4>
+          <h4 class="text-xl font-semibold text-yami dark:text-white">
+            Tafsir
+          </h4>
           <Icon
             name="heroicons:x-mark"
             class="cursor-pointer text-xl"

diff --git a/components/prayer/HeaderList.vue → app/components/prayer/HeaderList.vue b/components/prayer/HeaderList.vue → app/components/prayer/HeaderList.vue
@@ -17,7 +17,7 @@ const search = defineModel<string>()
         type="text"
         placeholder="Cari Do'a"
         class="input-search"
-      />
+      >
 
       <div
         class="absolute inset-y-2/4 right-2 flex size-8 -translate-y-2/4 items-center justify-center rounded-full bg-teal-600 dark:bg-slate-700 md:size-9"