munawwirul_jamal/simrsx-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Andrian Roshandy
2025-09-28 07:08:44 +07:00
parent e7851f4dc2
commit 2426dcb979
5 changed files with 24 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/app.vue
-1
View File
@@ -20,7 +20,6 @@ useHead({
<NuxtPage />
</NuxtLayout>
</div>
<Toaster />
</ConfigProvider>
</template>
app/components/pub/custom-ui/doc-entry/block.vue
+1 -1
View File
@@ -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
+12 -10
View File
@@ -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">
<Icon :name="props.prep.icon!" class="mr-2 size-4 align-middle md:size-6" />
<div class="text-lg font-semibold text-gray-900">
<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">
<!-- <Input -->
<!-- type="text" placeholder="Search" -->
<!-- class="w-full rounded-md border bg-white px-4 py-2 text-gray-900 sm:text-sm" @click="emitSearchNavClick" -->
<!-- @input="onInput" -->
<!-- /> -->
<div v-if="props.refSearchNav" class="text-lg text-gray-900">
<Input
type="text"
placeholder="Search"
class="sm:text-sm"
@click="emitSearchNavClick"
@input="onInput"
/>
</div>
<div v-if="prep.addNav" class="m-2 flex items-center">
<Button size="md" class="rounded-md border border-gray-300 px-4 py-2 text-white sm:text-sm" @click="btnClick">
<div v-if="prep.addNav" class="flex items-center ms-2">
<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
+10 -89
View File
@@ -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 v-if="contentFrame !== 'cf-no-frame'" :class="`contentFrame ${contentContent} ${contentFrame}`">
<div :class="`w-full p-4 xl:p-5 2xl:p-6 flex justify-center ${contentFrameClass}`">
<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; */
/* 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); */
width: 100%;
}
.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
+1
View File
@@ -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,
},
},
{