davila.erdianita.1005/coba-tampilan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

halaman view permission

Browse Source
This commit is contained in:
Davila Erdianita
2025-06-30 11:09:10 +07:00
parent be4de9f24a
commit 8176411cfe
84 changed files with 5572 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
pages/ui-components/UiChip.vue Normal file
View File

@@ -0,0 +1,84 @@
<script setup lang="ts">
import { ref } from 'vue';
// common components
import BaseBreadcrumb from '@/components/shared/BaseBreadcrumb.vue';
import UiParentCard from '@/components/shared/UiParentCard.vue';
import UiChildCard from '@/components/shared/UiChildCard.vue';
import FilledColor from '@/components/ui-components/chip/FilledColor.vue';
import Outlined from '@/components/ui-components/chip/Outlined.vue';
import CustomIcon from '@/components/ui-components/chip/CustomIcon.vue';
import CustomIconOutlined from '@/components/ui-components/chip/CustomIconOutlined.vue';
import Disabled from '@/components/ui-components/chip/Disabled.vue';
import Sizes from '@/components/ui-components/chip/Sizes.vue';
import Closable from '@/components/ui-components/chip/Closable.vue';
// template breadcrumb
const page = ref({ title: 'Chip' });
const breadcrumbs = ref([
{
text: 'Dashboard',
disabled: false,
href: '#'
},
{
text: 'Chip',
disabled: true,
href: '#'
}
]);
</script>
<template>
<BaseBreadcrumb :title="page.title" :breadcrumbs="breadcrumbs"></BaseBreadcrumb>
<v-row>
<v-col cols="12">
<UiParentCard title="Chip">
<v-row>
<!-- Filled Color -->
<v-col cols="12" >
<UiChildCard title="Filled">
<FilledColor/>
</UiChildCard>
</v-col>
<!-- Outlined -->
<v-col cols="12" >
<UiChildCard title="Outlined">
<Outlined/>
</UiChildCard>
</v-col>
<!-- Label with Icon -->
<v-col cols="12" lg="6">
<UiChildCard title="Custom Icon">
<CustomIcon/>
</UiChildCard>
</v-col>
<!-- Outlined Color -->
<v-col cols="12" lg="6">
<UiChildCard title="Custom Outlined Icon">
<CustomIconOutlined/>
</UiChildCard>
</v-col>
<!-- Disabled -->
<v-col cols="12" lg="6">
<UiChildCard title="Disabled">
<Disabled/>
</UiChildCard>
</v-col>
<!-- Sizes -->
<v-col cols="12" lg="6">
<UiChildCard title="Sizes">
<Sizes/>
</UiChildCard>
</v-col>
<!-- Closable -->
<v-col cols="12" >
<UiChildCard title="Closable">
<Closable/>
</UiChildCard>
</v-col>
</v-row>
</UiParentCard>
</v-col>
</v-row>
</template>

84
pages/ui-components/UiDialog.vue Normal file
View File

@@ -0,0 +1,84 @@
<script setup lang="ts">
import { ref } from 'vue';
// common components
import BaseBreadcrumb from '@/components/shared/BaseBreadcrumb.vue';
import UiParentCard from '@/components/shared/UiParentCard.vue';
import UiChildCard from '@/components/shared/UiChildCard.vue';
import DialogsActivator from '@/components/ui-components/dialogs/DialogsActivator.vue';
import DialogsModel from '@/components/ui-components/dialogs/DialogsModel.vue';
import DialogsFullscreen from '@/components/ui-components/dialogs/DialogsFullscreen.vue';
import DialogsTransitions from '@/components/ui-components/dialogs/DialogsTransitions.vue';
import DialogsPersistent from '@/components/ui-components/dialogs/DialogsPersistent.vue';
import DialogsScrollable from '@/components/ui-components/dialogs/DialogsScrollable.vue';
import DialogsForm from '@/components/ui-components/dialogs/DialogsForm.vue';
import DialogsNested from '@/components/ui-components/dialogs/DialogsNested.vue';
// template breadcrumb
const page = ref({ title: 'Dialog' });
const breadcrumbs = ref([
{
text: 'Dashboard',
disabled: false,
href: '#'
},
{
text: 'Dialog',
disabled: true,
href: '#'
}
]);
</script>
<template>
<BaseBreadcrumb :title="page.title" :breadcrumbs="breadcrumbs"></BaseBreadcrumb>
<v-row>
<v-col cols="12">
<UiParentCard title="Dialog">
<v-row>
<v-col cols="12" sm="12" lg="4">
<UiChildCard title="Simple">
<DialogsActivator />
</UiChildCard>
</v-col>
<v-col cols="12" sm="12" lg="4">
<UiChildCard title="V-model">
<DialogsModel />
</UiChildCard>
</v-col>
<v-col cols="12" sm="12" lg="4" class="d-flex align-items-stretch">
<UiChildCard title="Transition">
<DialogsTransitions />
</UiChildCard>
</v-col>
<v-col cols="12" sm="12" lg="4" class="d-flex align-items-stretch">
<UiChildCard title="Form">
<DialogsForm />
</UiChildCard>
</v-col>
<v-col cols="12" sm="12" lg="4" class="d-flex align-items-stretch">
<UiChildCard title="Full screen">
<DialogsFullscreen />
</UiChildCard>
</v-col>
<v-col cols="12" sm="12" lg="4" class="d-flex align-items-stretch">
<UiChildCard title="Persistent">
<DialogsPersistent />
</UiChildCard>
</v-col>
<v-col cols="12" sm="12" lg="4" class="d-flex align-items-stretch">
<UiChildCard title="Scrollable">
<DialogsScrollable />
</UiChildCard>
</v-col>
<v-col cols="12" sm="12" lg="4" class="d-flex align-items-stretch">
<UiChildCard title="Nested Dialog">
<DialogsNested />
</UiChildCard>
</v-col>
</v-row>
</UiParentCard>
</v-col>
</v-row>
</template>