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

dev: hotfix, nav-footer, button, dialog

Browse Source
This commit is contained in:
Munawwirul Jamal
2025-10-28 15:40:41 +07:00
parent 0504712559
commit 3e7e735ae4
19 changed files with 493 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/pub/my-ui/nav-footer/ba-de-dr-su.vue
+50
View File
@@ -0,0 +1,50 @@
<script setup lang="ts">
const props = defineProps<{
smallMode?: boolean
defaultClass?: string
class?: string
}>()
const defaultClass = props.defaultClass ?? 'm-2 flex gap-2 px-2'
const additionalClass = props.class ?? ''
const btnClass = props.smallMode ? '[&_button]:w-7 [&_button]:h-7 [&_button]:2xl:w-8 [&_button]:2xl:h-9 [&_button]:!p-0' : ''
type ClickType = 'back' | 'delete' | 'draft' | 'submit'
const emit = defineEmits<{
(e: 'click', type: ClickType): void
}>()
function onClick(type: ClickType) {
emit('click', type)
}
</script>
<template>
<div :class="`${defaultClass} ${additionalClass} ${btnClass}`">
<div>
<Button variant="ghost" type="button" @click="onClick('back')">
<Icon name="i-lucide-arrow-left" />
Kembali
</Button>
</div>
<div>
<Button variant="destructive" type="button" @click="onClick('delete')">
<Icon name="i-lucide-x" />
Hapus
</Button>
</div>
<div>
<Button variant="secondary" type="button" @click="onClick('draft')">
<Icon name="i-lucide-file" />
Draft
</Button>
</div>
<div>
<Button class="bg-primary" type="button" @click="onClick('submit')">
<Icon name="i-lucide-check" />
Submit
</Button>
</div>
</div>
</template>
app/components/pub/my-ui/nav-footer/ba-de-ed-pri.vue
+50
View File
@@ -0,0 +1,50 @@
<script setup lang="ts">
const props = defineProps<{
smallMode?: boolean
defaultClass?: string
class?: string
}>()
const defaultClass = props.defaultClass ?? 'm-2 flex gap-2 px-2'
const additionalClass = props.class ?? ''
const btnClass = props.smallMode ? '[&_button]:w-7 [&_button]:h-7 [&_button]:2xl:w-8 [&_button]:2xl:h-9 [&_button]:!p-0' : ''
type ClickType = 'back' | 'draft' | 'delete' | 'print'
const emit = defineEmits<{
(e: 'click', type: ClickType): void
}>()
function onClick(type: ClickType) {
emit('click', type)
}
</script>
<template>
<div :class="`${defaultClass} ${additionalClass} ${btnClass}`">
<div>
<Button variant="ghost" type="button" @click="onClick('back')">
<Icon name="i-lucide-arrow-left" class="me-2 align-middle" />
Back
</Button>
</div>
<div>
<Button type="button" @click="onClick('draft')">
<Icon name="i-lucide-file" class="me-2" />
Edit
</Button>
</div>
<div>
<Button variant="destructive" type="button" @click="onClick('delete')">
<Icon name="i-lucide-trash" class="me-2 align-middle" />
Delete
</Button>
</div>
<div>
<Button class="bg-teal-500" type="button" @click="onClick('print')">
<Icon name="i-lucide-printer" class="me-2 align-middle" />
Print
</Button>
</div>
</div>
</template>
app/components/pub/my-ui/nav-footer/ba-de-su.vue
+44
View File
@@ -0,0 +1,44 @@
<script setup lang="ts">
const props = defineProps<{
smallMode?: boolean
defaultClass?: string
class?: string
}>()
const defaultClass = props.defaultClass ?? 'm-2 flex gap-2 px-2'
const additionalClass = props.class ?? ''
const btnClass = props.smallMode ? '[&_button]:w-7 [&_button]:h-7 [&_button]:2xl:w-8 [&_button]:2xl:h-9 [&_button]:!p-0' : ''
type ClickType = 'back' | 'delete' | 'submit'
const emit = defineEmits<{
(e: 'click', type: ClickType): void
}>()
function onClick(type: ClickType) {
emit('click', type)
}
</script>
<template>
<div :class="`${defaultClass} ${additionalClass} ${btnClass}`">
<div>
<Button variant="ghost" type="button" @click="onClick('back')">
<Icon name="i-lucide-arrow-left" />
Kembali
</Button>
</div>
<div>
<Button variant="destructive" type="button" @click="onClick('delete')">
<Icon name="i-lucide-trash" />
Hapus
</Button>
</div>
<div>
<Button type="button" @click="onClick('submit')">
<Icon name="i-lucide-check" />
Submit
</Button>
</div>
</div>
</template>
app/components/pub/my-ui/nav-footer/ba-dr-su-pr.vue
+36 -18
View File
@@ -1,5 +1,15 @@
<script setup lang="ts">
type ClickType = 'cancel' | 'draft' | 'submit' | 'print'
const props = defineProps<{
smallMode?: boolean
defaultClass?: string
class?: string
}>()
const defaultClass = props.defaultClass ?? 'm-2 flex gap-2 px-2'
const additionalClass = props.class ?? ''
const btnClass = props.smallMode ? '[&_button]:w-7 [&_button]:h-7 [&_button]:2xl:w-8 [&_button]:2xl:h-9 [&_button]:!p-0' : ''
type ClickType = 'back' | 'draft' | 'submit' | 'print'
const emit = defineEmits<{
(e: 'click', type: ClickType): void
@@ -11,22 +21,30 @@ function onClick(type: ClickType) {
</script>
<template>
<div class="m-2 flex gap-2 px-2">
<Button class="bg-gray-400" type="button" @click="onClick('cancel')">
<Icon name="i-lucide-arrow-left" class="me-2 align-middle" />
Back
</Button>
<Button class="bg-orange-500" variant="outline" type="button" @click="onClick('draft')">
<Icon name="i-lucide-file" class="me-2" />
Draf
</Button>
<Button class="bg-primary" type="button" @click="onClick('submit')">
<Icon name="i-lucide-check" class="me-2 align-middle" />
Submit
</Button>
<Button class="bg-primary" type="button" @click="onClick('print')">
<Icon name="i-lucide-printer" class="me-2 align-middle" />
Print
</Button>
<div :class="`${defaultClass} ${additionalClass} ${btnClass}`">
<div>
<Button variant="ghost" type="button" @click="onClick('back')">``
<Icon name="i-lucide-arrow-left" class="me-2 align-middle" />
Back
</Button>
</div>
<div>
<Button variant="secondary" type="button" @click="onClick('draft')">
<Icon name="i-lucide-file" class="me-2" />
Draf
</Button>
</div>
<div>
<Button type="button" @click="onClick('submit')">
<Icon name="i-lucide-check" class="me-2 align-middle" />
Submit
</Button>
</div>
<div>
<Button class="bg-teal-500" type="button" @click="onClick('print')">
<Icon name="i-lucide-printer" class="me-2 align-middle" />
Print
</Button>
</div>
</div>
</template>
app/components/pub/my-ui/nav-footer/ba-dr-su.vue
+30 -14
View File
@@ -1,5 +1,15 @@
<script setup lang="ts">
type ClickType = 'cancel' | 'draft' | 'submit'
const props = defineProps<{
smallMode?: boolean
defaultClass?: string
class?: string
}>()
const defaultClass = props.defaultClass ?? 'm-2 flex gap-2 px-2'
const additionalClass = props.class ?? ''
const btnClass = props.smallMode ? '[&_button]:w-7 [&_button]:h-7 [&_button]:2xl:w-8 [&_button]:2xl:h-9 [&_button]:!p-0' : ''
type ClickType = 'back' | 'draft' | 'submit'
const emit = defineEmits<{
(e: 'click', type: ClickType): void
@@ -11,18 +21,24 @@ function onClick(type: ClickType) {
</script>
<template>
<div class="m-2 flex gap-2 px-2">
<Button class="bg-gray-400" type="button" @click="onClick('cancel')">
<Icon name="i-lucide-arrow-left" class="me-2 align-middle" />
Back
</Button>
<Button class="bg-orange-500" variant="outline" type="button" @click="onClick('draft')">
<Icon name="i-lucide-file" class="me-2" />
Draft
</Button>
<Button class="bg-primary" type="button" @click="onClick('submit')">
<Icon name="i-lucide-check" class="me-2 align-middle" />
Submit
</Button>
<div :class="`${defaultClass} ${additionalClass} ${btnClass}`">
<div>
<Button variant="ghost" type="button" @click="onClick('back')">
<Icon name="i-lucide-arrow-left" />
Back
</Button>
</div>
<div>
<Button variant="secondary" type="button" @click="onClick('draft')">
<Icon name="i-lucide-file" />
Draft
</Button>
</div>
<div>
<Button type="button" @click="onClick('submit')">
<Icon name="i-lucide-check" />
Submit
</Button>
</div>
</div>
</template>
app/components/pub/my-ui/nav-footer/ba-ed-de-pri.vue
-32
View File
@@ -1,32 +0,0 @@
<script setup lang="ts">
type ClickType = 'cancel' | 'draft' | 'delete' | 'print'
const emit = defineEmits<{
(e: 'click', type: ClickType): void
}>()
function onClick(type: ClickType) {
emit('click', type)
}
</script>
<template>
<div class="m-2 flex gap-2 px-2">
<Button class="bg-gray-400" type="button" @click="onClick('cancel')">
<Icon name="i-lucide-arrow-left" class="me-2 align-middle" />
Back
</Button>
<Button class="bg-orange-500" variant="outline" type="button" @click="onClick('draft')">
<Icon name="i-lucide-file" class="me-2" />
Edit
</Button>
<Button class="bg-red-500" type="button" @click="onClick('delete')">
<Icon name="i-lucide-trash" class="me-2 align-middle" />
Delete
</Button>
<Button class="bg-primary" type="button" @click="onClick('print')">
<Icon name="i-lucide-printer" class="me-2 align-middle" />
Print
</Button>
</div>
</template>
app/components/pub/my-ui/nav-footer/ba-ed-de.vue
+30 -14
View File
@@ -1,5 +1,15 @@
<script setup lang="ts">
type ClickType = 'cancel' | 'draft' | 'delete'
const props = defineProps<{
smallMode?: boolean
defaultClass?: string
class?: string
}>()
const defaultClass = props.defaultClass ?? 'm-2 flex gap-2 px-2'
const additionalClass = props.class ?? ''
const btnClass = props.smallMode ? '[&_button]:w-7 [&_button]:h-7 [&_button]:2xl:w-8 [&_button]:2xl:h-9 [&_button]:!p-0' : ''
type ClickType = 'back' | 'draft' | 'delete'
const emit = defineEmits<{
(e: 'click', type: ClickType): void
@@ -11,18 +21,24 @@ function onClick(type: ClickType) {
</script>
<template>
<div class="m-2 flex gap-2 px-2">
<Button class="bg-gray-400" type="button" @click="onClick('cancel')">
<Icon name="i-lucide-arrow-left" class="me-2 align-middle" />
Back
</Button>
<Button class="bg-orange-500" variant="outline" type="button" @click="onClick('draft')">
<Icon name="i-lucide-file" class="me-2" />
Edit
</Button>
<Button class="bg-red-500" type="button" @click="onClick('delete')">
<Icon name="i-lucide-trash" class="me-2 align-middle" />
Delete
</Button>
<div :class="`${defaultClass} ${additionalClass} ${btnClass}`">
<div>
<Button class="bg-gray-400" type="button" @click="onClick('back')">
<Icon name="i-lucide-arrow-left" class="me-2 align-middle" />
Back
</Button>
</div>
<div>
<Button class="bg-orange-500" variant="outline" type="button" @click="onClick('draft')">
<Icon name="i-lucide-file" class="me-2" />
Edit
</Button>
</div>
<div>
<Button class="bg-red-500" type="button" @click="onClick('delete')">
<Icon name="i-lucide-trash" class="me-2 align-middle" />
Delete
</Button>
</div>
</div>
</template>
app/components/pub/my-ui/nav-footer/ba-ed-pri.vue
+30 -14
View File
@@ -1,5 +1,15 @@
<script setup lang="ts">
type ClickType = 'cancel' | 'draft' | 'print'
const props = defineProps<{
smallMode?: boolean
defaultClass?: string
class?: string
}>()
const defaultClass = props.defaultClass ?? 'm-2 flex gap-2 px-2'
const additionalClass = props.class ?? ''
const btnClass = props.smallMode ? '[&_button]:w-7 [&_button]:h-7 [&_button]:2xl:w-8 [&_button]:2xl:h-9 [&_button]:!p-0' : ''
type ClickType = 'back' | 'draft' | 'print'
const emit = defineEmits<{
(e: 'click', type: ClickType): void
@@ -11,18 +21,24 @@ function onClick(type: ClickType) {
</script>
<template>
<div class="m-2 flex gap-2 px-2">
<Button class="bg-gray-400" type="button" @click="onClick('cancel')">
<Icon name="i-lucide-arrow-left" class="me-2 align-middle" />
Back
</Button>
<Button class="bg-orange-500" variant="outline" type="button" @click="onClick('draft')">
<Icon name="i-lucide-file" class="me-2" />
Edit
</Button>
<Button class="bg-primary" type="button" @click="onClick('print')">
<Icon name="i-lucide-printer" class="me-2 align-middle" />
Print
</Button>
<div :class="`${defaultClass} ${additionalClass} ${btnClass}`">
<div>
<Button class="bg-gray-400" type="button" @click="onClick('back')">
<Icon name="i-lucide-arrow-left" class="me-2 align-middle" />
Back
</Button>
</div>
<div>
<Button class="bg-orange-500" variant="outline" type="button" @click="onClick('draft')">
<Icon name="i-lucide-file" class="me-2" />
Edit
</Button>
</div>
<div>
<Button class="bg-primary" type="button" @click="onClick('print')">
<Icon name="i-lucide-printer" class="me-2 align-middle" />
Print
</Button>
</div>
</div>
</template>
app/components/pub/my-ui/nav-footer/ba-ed.vue
+24 -25
View File
@@ -1,5 +1,15 @@
<script setup lang="ts">
type ClickType = 'cancel' | 'edit'
const props = defineProps<{
smallMode?: boolean
defaultClass?: string
class?: string
}>()
const defaultClass = props.defaultClass ?? 'm-2 flex gap-2 px-2'
const additionalClass = props.class ?? ''
const btnClass = props.smallMode ? '[&_button]:w-7 [&_button]:h-7 [&_button]:2xl:w-8 [&_button]:2xl:h-9 [&_button]:!p-0' : ''
type ClickType = 'back' | 'edit'
const emit = defineEmits<{
(e: 'click', type: ClickType): void
@@ -11,29 +21,18 @@ function onClick(type: ClickType) {
</script>
<template>
<div class="m-2 flex gap-2 px-2">
<Button
class="bg-gray-400"
type="button"
@click="onClick('cancel')"
>
<Icon
name="i-lucide-arrow-left"
class="me-2 align-middle"
/>
Back
</Button>
<Button
class="bg-orange-500"
variant="outline"
type="button"
@click="onClick('edit')"
>
<Icon
name="i-lucide-file"
class="me-2 align-middle"
/>
Edit
</Button>
<div :class="`${defaultClass} ${additionalClass} ${btnClass}`">
<div>
<Button variant="ghost" type="button" @click="onClick('back')">
<Icon name="i-lucide-arrow-left" class="me-2 align-middle" />
Back
</Button>
</div>
<div>
<Button @click="onClick('edit')">
<Icon name="i-lucide-file" class="me-2 align-middle" />
Edit
</Button>
</div>
</div>
</template>
app/components/pub/my-ui/nav-footer/ba-su.vue
+24 -22
View File
@@ -1,5 +1,15 @@
<script setup lang="ts">
type ClickType = 'cancel' | 'submit'
const props = defineProps<{
smallMode?: boolean
defaultClass?: string
class?: string
}>()
const defaultClass = props.defaultClass ?? 'm-2 flex gap-2 px-2'
const additionalClass = props.class ?? ''
const btnClass = props.smallMode ? '[&_button]:w-7 [&_button]:h-7 [&_button]:2xl:w-8 [&_button]:2xl:h-9 [&_button]:!p-0' : ''
type ClickType = 'back' | 'submit'
const emit = defineEmits<{
(e: 'click', type: ClickType): void
@@ -11,26 +21,18 @@ function onClick(type: ClickType) {
</script>
<template>
<div class="m-2 flex gap-2 px-2">
<Button
class="bg-gray-400"
@click="onClick('cancel')"
>
<Icon
name="i-lucide-arrow-left"
class="me-2 align-middle"
/>
Back
</Button>
<Button
class="bg-primary"
@click="onClick('submit')"
>
<Icon
name="i-lucide-check"
class="me-2 align-middle"
/>
Submit
</Button>
<div :class="`${defaultClass} ${additionalClass} ${btnClass}`">
<div>
<Button variant="ghost"@click="onClick('back')" >
<Icon name="i-lucide-arrow-left" class="" />
Back
</Button>
</div>
<div>
<Button @click="onClick('submit')">
<Icon name="i-lucide-check" class="" />
Submit
</Button>
</div>
</div>
</template>
app/components/pub/my-ui/nav-footer/ca-ed-su.vue
+55
View File
@@ -0,0 +1,55 @@
<script setup lang="ts">
const props = defineProps<{
smallMode?: boolean
defaultClass?: string
class?: string
}>()
const defaultClass = props.defaultClass ?? 'm-2 flex gap-2 px-2'
const additionalClass = props.class ?? ''
const btnClass = props.smallMode ? '[&_button]:w-7 [&_button]:h-7 [&_button]:2xl:w-8 [&_button]:2xl:h-9 [&_button]:!p-0' : ''
type ClickType = 'cancel' | 'edit' | 'submit'
const emit = defineEmits<{
(e: 'click', type: ClickType): void
}>()
function onClick(type: ClickType) {
emit('click', type)
}
</script>
<template>
<div :class="`${defaultClass} ${additionalClass} ${btnClass}`">
<div>
<Button
variant="destructive"
type="button"
@click="onClick('cancel')"
>
<Icon name="i-lucide-x" />
{{ smallMode ? '' : 'Batal' }}
</Button>
</div>
<div>
<Button
variant="secondary"
type="button"
@click="onClick('edit')"
>
<Icon name="i-lucide-pencil" />
{{ smallMode ? '' : 'Edit' }}
</Button>
</div>
<div>
<Button
type="button"
@click="onClick('submit')"
>
<Icon name="i-lucide-check" />
{{ smallMode ? '' : 'Submit' }}
</Button>
</div>
</div>
</template>
app/components/pub/my-ui/nav-footer/ca-sa.vue
+38
View File
@@ -0,0 +1,38 @@
<script setup lang="ts">
const props = defineProps<{
smallMode?: boolean
defaultClass?: string
class?: string
}>()
const defaultClass = props.defaultClass ?? 'm-2 flex gap-2 px-2'
const additionalClass = props.class ?? ''
const btnClass = props.smallMode ? '[&_button]:w-7 [&_button]:h-7 [&_button]:2xl:w-8 [&_button]:2xl:h-9 [&_button]:!p-0' : ''
type ClickType = 'cancel' | 'save'
const emit = defineEmits<{
(e: 'click', type: ClickType): void
}>()
function onClick(type: ClickType) {
emit('click', type)
}
</script>
<template>
<div :class="`${defaultClass} ${additionalClass} ${btnClass}`">
<div>
<Button variant="ghost" type="button" @click="onClick('cancel')">
<Icon name="i-lucide-x" />
Batal
</Button>
</div>
<div>
<Button type="button" @click="onClick('save')">
<Icon name="i-lucide-check" />
Simpan
</Button>
</div>
</div>
</template>
app/components/pub/my-ui/nav-footer/cl-sa.vue
+38
View File
@@ -0,0 +1,38 @@
<script setup lang="ts">
const props = defineProps<{
smallMode?: boolean
defaultClass?: string
class?: string
}>()
const defaultClass = props.defaultClass ?? 'm-2 flex gap-2 px-2'
const additionalClass = props.class ?? ''
const btnClass = props.smallMode ? '[&_button]:w-7 [&_button]:h-7 [&_button]:2xl:w-8 [&_button]:2xl:h-9 [&_button]:!p-0' : ''
type ClickType = 'close' | 'save'
const emit = defineEmits<{
(e: 'click', type: ClickType): void
}>()
function onClick(type: ClickType) {
emit('click', type)
}
</script>
<template>
<div :class="`${defaultClass} ${additionalClass} ${btnClass}`">
<div>
<Button variant="ghost" type="button" @click="onClick('close')">
<Icon name="i-lucide-x" />
Tutup
</Button>
</div>
<div>
<Button type="button" @click="onClick('save')">
<Icon name="i-lucide-check" />
Simpan
</Button>
</div>
</div>
</template>
app/components/pub/ui/button/index.ts
+1 -1
View File
@@ -12,7 +12,7 @@ export const buttonVariants = cva(
destructive:
'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
outline:
'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
'border border-slate-300 dark:border-slate-600 bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
secondary:
'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
ghost: 'hover:bg-accent hover:text-accent-foreground',
app/components/pub/ui/dialog/DialogContent.vue
+1 -1
View File
@@ -34,7 +34,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
v-bind="forwarded"
:class="
cn(
'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-5 2xl:p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-2 2x:gap-3 border bg-background p-5 2xl:p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
props.class,
)"
>
app/components/pub/ui/dialog/DialogDescription.vue
+1 -1
View File
@@ -19,7 +19,7 @@ const forwardedProps = useForwardProps(delegatedProps)
<template>
<DialogDescription
v-bind="forwardedProps"
:class="cn('text-sm text-muted-foreground', props.class)"
:class="cn('text-sm', props.class)"
>
<slot />
</DialogDescription>