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:41:07 +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

No files matched your search

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>