refactor: remove NeoModalHead

app.config.ts

@@ -0,0 +1,16 @@
+export default defineAppConfig({
+  ui: {
+    modal: {
+      slots: {
+        header: 'border-black border-b',
+      },
+      variants: {
+        fullscreen: {
+          false: {
+            content: 'rounded-none border max-w-[23rem] shadow-primary ring-0',
+          },
+        },
+      },
+    },
+  },
+})

app.vue

@@ -0,0 +1,7 @@
+<template>
+  <UApp>
+    <NuxtLayout>
+      <NuxtPage />
+    </NuxtLayout>
+  </UApp>
+</template>

components/codeChecker/TestItem.vue

@@ -7,35 +7,32 @@
       />
       <span class="ml-[20px]">{{ description }}</span>
     </div>
-    <span
-      v-if="props.passed === false"
-      class="text-k-blue cursor-pointer hover:text-k-blue-hover"
-      @click="showResolveIssuesModal = true"
-    >
-      {{ $t('codeChecker.resolveIssue') }}
-    </span>
 
-    <NeoModal
-      append-to-body
-      :value="showResolveIssuesModal"
-      @close="showResolveIssuesModal = false"
+    <UModal
+      v-model:open="showResolveIssuesModal"
+      :title="$t('codeChecker.resolveIssue')"
     >
-      <NeoModalHead
-        :title="$t('codeChecker.resolveIssue')"
-        @close="showResolveIssuesModal = false"
-      />
-      <div class="max-w-[380px] px-6 pt-4 pb-5">
-        <p class="text-base font-bold mb-4">
-          {{ description }}
-        </p>
-        <slot name="modalContent" />
-      </div>
-    </NeoModal>
+      <span
+        v-if="props.passed === false"
+        class="text-k-blue cursor-pointer hover:text-k-blue-hover"
+        @click="showResolveIssuesModal = true"
+      >
+        {{ $t('codeChecker.resolveIssue') }}
+      </span>
+
+      <template #body>
+        <div>
+          <p class="text-base font-bold mb-4">
+            {{ description }}
+          </p>
+          <slot name="modalContent" />
+        </div>
+      </template>
+    </UModal>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { NeoModal, NeoModalHead } from '@kodadot1/brick'
 import type { Passed } from './types'
 
 const props = defineProps<{

components/collection/HeroButtons.vue

@@ -109,22 +109,22 @@
         </NeoDropdown>
       </div>
     </div>
-    <NeoModal
-      :value="QRModalActive"
-      header=""
-      @close="QRModalActive = false"
+    <UModal
+      v-model:open="QRModalActive"
+      :title="collection?.name"
     >
-      <NeoModalHead
-        :title="collection?.name"
-        @close="QRModalActive = false"
-      />
-      <div
-        class="card-content"
-        data-testid="hero-share-qrcode-modal"
-      >
-        <QRCode :text="currentCollectionUrl" />
-      </div>
-    </NeoModal>
+      <template #body>
+        <div
+          class="card-content"
+          data-testid="hero-share-qrcode-modal"
+        >
+          <QRCode
+            :text="currentCollectionUrl"
+            class="w-full h-full"
+          />
+        </div>
+      </template>
+    </UModal>
   </div>
 </template>
 
@@ -133,8 +133,6 @@ import {
   NeoButton,
   NeoDropdown,
   NeoDropdownItem,
-  NeoModal,
-  NeoModalHead,
 } from '@kodadot1/brick'
 import { useCollectionMinimal } from '@/components/collection/utils/useCollectionDetails'
 import { hasOperationsDisabled } from '@/utils/prefix'

components/common/ConnectWallet/ConnectWalletModal.vue

@@ -3,7 +3,7 @@
     class="wallet-modal-container flex flex-col"
     data-testid="wallet-connect-sidebar-modal"
   >
-    <NeoModalHead
+    <ModalHead
       :title="
         showAccount ? $t('profile.page') : $t('walletConnect.walletHeading')
       "
@@ -49,7 +49,6 @@
 </template>
 
 <script setup lang="ts">
-import { NeoModalHead } from '@kodadot1/brick'
 import { type ChainVM, type Prefix } from '@kodadot1/static'
 import { DEFAULT_VM_PREFIX } from '@kodadot1/static'
 import WalletAsset from '@/components/common/ConnectWallet/WalletAsset.vue'

libs/ui/src/components/NeoModalHead/NeoModalHead.vue → components/common/ModalHead.vue

@@ -12,15 +12,27 @@
       <span>{{ title }}</span>
     </button>
   </header>
-  <NeoCommonHead
-    class="hidden lg:flex"
-    :title="title"
-    @close="emit('close')"
-  />
+
+  <header
+    class="hidden lg:flex py-4 px-tw-8 justify-between items-center border-b border-border-color bg-background-color"
+  >
+    <span class="text-base font-bold">
+      {{ title }}
+    </span>
+    <NeoButton
+      class="py-1 px-2"
+      variant="text"
+      no-shadow
+      icon="xmark"
+      size="medium"
+      data-testid="modal-close-button"
+      @click="emit('close')"
+    />
+  </header>
 </template>
 
 <script lang="ts" setup>
-import NeoCommonHead from '../NeoCommonHead/NeoCommonHead.vue'
+import { NeoButton } from '@kodadot1/brick'
 
 defineProps<{
   title: string

components/common/shoppingCart/ShoppingCartModal.vue

@@ -4,7 +4,7 @@
       class="shopping-cart-modal-container bg-background-color border-l flex flex-col"
       data-testid="shopping-cart-modal-container"
     >
-      <NeoModalHead
+      <ModalHead
         :title="$t('shoppingCart.title')"
         @close="closeShoppingCart(ModalCloseType.BACK)"
       />
@@ -104,7 +104,7 @@
 </template>
 
 <script setup lang="ts">
-import { NeoButton, NeoModalHead } from '@kodadot1/brick'
+import { NeoButton } from '@kodadot1/brick'
 import ShoppingCartItemRow from './ShoppingCartItemRow.vue'
 import { totalPriceUsd } from './utils'
 import { usePreferencesStore } from '@/stores/preferences'
@@ -197,11 +197,12 @@ const onCompletePurchase = () => {
     position: fixed;
     top: 0;
     right: 0;
-    height: 100%;
     max-width: 360px;
     width: 100%;
 
-    @apply bulma-mobile:max-w-[100vw] pt-navbar-desktop bulma-mobile:pt-navbar-mobile;
+    @apply h-[calc(100%_-_var(--navbar-desktop))] mt-navbar-desktop;
+
+    @apply bulma-mobile:max-w-[100vw] bulma-mobile:pt-navbar-mobile;
   }
 }
 

components/create/EntryModal.vue

@@ -1,20 +1,17 @@
 <template>
-  <NeoModal
-    append-to-body
-    :value="isModalActive"
-    @close="isModalActive = false"
+  <UModal
+    v-model:open="isModalActive"
+    :title="$t('create')"
   >
-    <NeoModalHead
-      :title="$t('create')"
-      @close="isModalActive = false"
-    />
-    <div class="px-6 pt-6 pb-5">
+    <slot />
+
+    <template #body>
       <div class="space-y-4">
         <div
           v-for="item in createOptionsConfig"
           :key="item.path"
           :data-testid="item.testId"
-          class="cursor-pointer max-w-[316px] w-full bg-k-grey-light border border-k-grey-light hover:bg-blue-light-cards hover:border-k-blue-hover px-[20px] py-2 flex items-center group"
+          class="cursor-pointer w-full bg-k-grey-light border border-k-grey-light hover:bg-blue-light-cards hover:border-k-blue-hover px-[20px] py-2 flex items-center group"
           @click="onClickCreateOption(item.path)"
         >
           <KIcon
@@ -36,12 +33,11 @@
       <div class="text-center text-sm text-k-grey mt-[20px] capitalize">
         {{ $t('mint.modal.availableOn', enableCreateChains) }}
       </div>
-    </div>
-  </NeoModal>
+    </template>
+  </UModal>
 </template>
 
 <script setup lang="ts">
-import { NeoModal, NeoModalHead } from '@kodadot1/brick'
 import { enableCreateChains } from '@/utils/chain'
 
 type CreateConfig = {
@@ -52,7 +48,7 @@ type CreateConfig = {
   testId?: string
 }
 
-const isModalActive = defineModel({ type: Boolean, default: false })
+const isModalActive = ref(false)
 
 const { doAfterLogin } = useDoAfterlogin()
 const { urlPrefix } = usePrefix()

components/navbar/CreateDropdown.vue

@@ -1,16 +1,13 @@
 <template>
-  <div>
+  <CreateEntryModal>
     <div
       data-testid="classic"
       class="navbar-item"
       @click="handleButtonClick"
     >
       {{ $t('create') }}
     </div>
-    <CreateEntryModal
-      v-model="isModalActive"
-    />
-  </div>
+  </CreateEntryModal>
 </template>
 
 <script lang="ts" setup>
@@ -19,10 +16,7 @@ defineProps<{
 }>()
 const emit = defineEmits(['select'])
 
-const isModalActive = ref(false)
-
 const handleButtonClick = () => {
-  isModalActive.value = true
   emit('select')
 }
 </script>

libs/ui/src/index.ts

@@ -50,7 +50,6 @@ export { default as Neo } from '@oruga-ui/oruga-next'
 
 export { default as NeoModalExtend } from './components/NeoModalExtend/NeoModalExtend.vue'
 export { default as NeoModalExtendProgrammatic } from './components/NeoModalExtend/plugin'
-export { default as NeoModalHead } from './components/NeoModalHead/NeoModalHead.vue'
 export { default as NeoCommonHead } from './components/NeoCommonHead/NeoCommonHead.vue'
 
 export { default as NeoNotification } from './components/NeoNotification/NeoNotification.vue'