feat/layout-cleaning: merapikan style pada layout + custom ui

app/app.vue

@@ -20,7 +20,6 @@ useHead({
         <NuxtPage />
       </NuxtLayout>
     </div>
-
     <Toaster />
   </ConfigProvider>
 </template>

app/components/pub/custom-ui/doc-entry/block.vue

@@ -30,7 +30,7 @@ const getLabelSizeIdx = (size: string) => {
 const settingClass = computed(() => {
   const breakPointIdx = getBreakpointIdx(props.gridPoint)
   let cls = breakpoints[breakPointIdx]
-  cls += ' gap-4 xl:gap-5 ' + [
+  cls += ' gap-x-4 xl:gap-x-5 gap-y-2 xl:gap-y-3 ' + [
     'grid-cols-1', 'grid-cols-2', 'grid-cols-3', 'grid-cols-4', 'grid-cols-5',
     'grid-cols-6', 'grid-cols-7', 'grid-cols-8', 'grid-cols-9', 'grid-cols-10',
   ][props.colCount - 1]

app/components/pub/custom-ui/nav-header/prep.vue

@@ -23,21 +23,23 @@ function btnClick() {
   <header>
     <div class="flex items-center justify-between">
       <div class="flex items-center">
-        <div class="ml-3 text-lg font-bold text-gray-900">
+        <div class="text-lg font-semibold text-gray-900">
-          <Icon :name="props.prep.icon!" class="mr-2 size-4 align-middle md:size-6" />
+          <Icon :name="props.prep.icon!" class="mr-2 size-4 md:size-6 align-middle" />
           {{ props.prep.title }}
         </div>
       </div>
       <div class="flex items-center">
-        <div v-if="props.refSearchNav" class="ml-3 text-lg text-gray-900">
+        <div v-if="props.refSearchNav" class="text-lg text-gray-900">
-          <!--           <Input -->
+          <Input
-          <!-- type="text" placeholder="Search" -->
+            type="text"
-          <!--             class="w-full rounded-md border bg-white px-4 py-2 text-gray-900 sm:text-sm" @click="emitSearchNavClick" -->
+            placeholder="Search"
-          <!--             @input="onInput" -->
+            class="sm:text-sm"
-          <!-- /> -->
+            @click="emitSearchNavClick"
+            @input="onInput"
+          />
         </div>
-        <div v-if="prep.addNav" class="m-2 flex items-center">
+        <div v-if="prep.addNav" class="flex items-center ms-2">
-          <Button size="md" class="rounded-md border border-gray-300 px-4 py-2 text-white sm:text-sm" @click="btnClick">
+          <Button class="rounded-md border border-gray-300 px-4 py-2 text-white sm:text-sm" @click="btnClick">
             <Icon name="i-lucide-plus" class="mr-2 h-4 w-4 align-middle" />
             {{ prep.addNav.label }}
           </Button>

app/layouts/default.vue

@@ -3,18 +3,18 @@ import CardContent from '~/components/pub/ui/card/CardContent.vue'
 
 const route = useRoute()
 const contentFrame = computed(() => route.meta.contentFrame)
-const contentContent = computed(() => {
+const contentFrameClass = computed(() => {
   switch (contentFrame.value) {
     case 'cf-container-lg':
-      return 'cf-frame cf-container-lg-content'
+      return 'cf-container-lg'
     case 'cf-container-md':
-      return 'cf-frame cf-container-md-content'
+      return 'cf-container-md'
     case 'cf-container-sm':
-      return 'cf-frame cf-container-sm-content'
+      return 'cf-container-sm'
     case 'cf-full-width':
-      return 'cf-frame-width'
+      return 'cf-full-width'
     default:
-      return 'cf-frame'
+      return 'cf-container-lg'
   }
 })
 </script>
@@ -24,8 +24,8 @@ const contentContent = computed(() => {
     <LayoutAppSidebar />
     <SidebarInset>
       <LayoutHeader />
-      <div class="w-full min-w-0 flex-1 overflow-x-auto p-4 xl:p-5 2xl:p-6">
+      <div :class="`w-full p-4 xl:p-5 2xl:p-6 flex justify-center ${contentFrameClass}`">
-        <div v-if="contentFrame !== 'cf-no-frame'" :class="`contentFrame ${contentContent} ${contentFrame}`">
+        <div v-if="contentFrame !== 'cf-no-frame'">
           <Card>
             <CardContent>
               <slot />
@@ -39,34 +39,13 @@ const contentContent = computed(() => {
 </template>
 
 <style scoped>
-.cf-container,
-.cf-container-lg,
-.cf-container-md,
-.cf-container-sm {
-  /* container-type: inline-size;
-  max-width: 100%;
-  margin-left: auto;
-  margin-right: auto;
-  border-radius: 0.375rem;
-  padding-bottom: 5rem; */
-  /* padding-left: 1rem;
-  padding-right: 1rem; */
-}
-
 .cf-container > *,
 .cf-container-lg > *,
 .cf-container-md > *,
 .cf-container-sm > *,
 .cf-full-width {
-  /* margin-left: auto;
+
-  margin-right: auto; */
+  width: 100%;
-  /* padding: 0.75rem;
-  padding-bottom: 5rem; */
-  /* background-color: hsl(var(--background));
-  border-radius: 0.375rem;
-  border: 1px solid hsl(var(--border));
-  border-color: rgb(226 232 240);
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); */
 }
 
 .cf-container-lg > * {
@@ -80,62 +59,4 @@ const contentContent = computed(() => {
 .cf-container-sm > * {
   max-width: 576px;
 }
-
-.cf-frame-width {
-  /* margin-left: auto;
-  margin-right: auto;
-  background-color: hsl(var(--background));
-  border-radius: 0.375rem;
-  border: 1px solid hsl(var(--border));
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  max-width: 100%; */
-  /* padding: 1rem; */
-}
-
-.cf-frame {
-  /* margin-left: auto;
-  margin-right: auto;
-  padding: 1rem;
-  background-color: hsl(var(--background));
-  border-radius: 0.375rem;
-  border: 1px solid hsl(var(--border));
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  max-width: 100%; */
-}
-
-@media (min-width: 640px) {
-  .cf-container,
-  .cf-container-lg,
-  .cf-container-md,
-  .cf-container-sm {
-    /* padding-left: 2rem;
-    padding-right: 2rem; */
-  }
-
-  .cf-frame {
-    /* padding: 2rem; */
-  }
-
-  .cf-frame-width {
-    /* padding: 2rem; */
-  }
-}
-
-@media (min-width: 1024px) {
-  .cf-container,
-  .cf-container-lg,
-  .cf-container-md,
-  .cf-container-sm {
-    /* padding-left: 3rem;
-    padding-right: 3rem; */
-  }
-
-  .cf-frame {
-    /* padding: 3rem; */
-  }
-
-  .cf-frame-width {
-    /* padding: 3rem; */
-  }
-}
 </style>

eslint.config.js

@@ -42,6 +42,7 @@ export default withNuxt(
         // Allow more flexible code style
         'style/max-statements-per-line': ['error', { max: 3 }],
         'antfu/if-newline': 'off', // Disable newline after if requirement
+        'antfu/top-level-function': false,
       },
     },
     {