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

10
components/ui-components/chip/Closable.vue Normal file
View File

@@ -0,0 +1,10 @@
<template>
<div class="d-flex flex-wrap align-center gap-3">
<v-chip closable color="primary"> Primary Deletable</v-chip>
<v-chip closable color="secondary"> Secondary Deletable</v-chip>
<v-chip closable color="warning"> Warning Deletable</v-chip>
<v-chip closable color="success"> Success Deletable</v-chip>
<v-chip closable color="error"> Error Deletable</v-chip>
<v-chip closable color="info"> Info Deletable</v-chip>
</div>
</template>

18
components/ui-components/chip/CustomIcon.vue Normal file
View File

@@ -0,0 +1,18 @@
<script setup lang="ts">
import { ref } from 'vue';
import { MoodSmileIcon,ChecksIcon,UserCircleIcon } from 'vue-tabler-icons';
</script>
<template>
<div class="d-flex flex-column flex-sm-row flex-wrap flex-xl-nowrap align-center gap-3">
<v-chip color="primary">
<MoodSmileIcon class="mr-2" start size="20" />
Custom Icon
<ChecksIcon class="ml-2" start size="20" />
</v-chip>
<v-chip color="secondary">
<UserCircleIcon class="mr-2" start size="20" />
Custom Icon
<ChecksIcon class="ml-2" start size="20" />
</v-chip>
</div>
</template>

18
components/ui-components/chip/CustomIconOutlined.vue Normal file
View File

@@ -0,0 +1,18 @@
<script setup lang="ts">
import { ref } from 'vue';
import { MoodSmileIcon,ChecksIcon,UserCircleIcon } from 'vue-tabler-icons';
</script>
<template>
<div class="d-flex flex-column flex-sm-row flex-wrap flex-xl-nowrap align-center gap-3">
<v-chip color="primary" variant="outlined">
<MoodSmileIcon class="mr-2" start size="20" />
Custom Icon
<ChecksIcon class="ml-2" start size="20" />
</v-chip>
<v-chip color="secondary" variant="outlined">
<UserCircleIcon class="mr-2" start size="20" />
Custom Icon
<ChecksIcon class="ml-2" start size="20" />
</v-chip>
</div>
</template>

18
components/ui-components/chip/Disabled.vue Normal file
View File

@@ -0,0 +1,18 @@
<script setup lang="ts">
import { ref } from 'vue';
import { MoodSmileIcon,ChecksIcon,UserCircleIcon } from 'vue-tabler-icons';
</script>
<template>
<div class="d-flex flex-column flex-sm-row flex-wrap flex-xl-nowrap align-center gap-3">
<v-chip disabled variant="outlined">
<MoodSmileIcon class="mr-2" start size="20" />
Custom Icon
<ChecksIcon class="ml-2" start size="20" />
</v-chip>
<v-chip color="secondary" disabled variant="outlined">
<UserCircleIcon class="mr-2" start size="20" />
Custom Icon
<ChecksIcon class="ml-2" start size="20" />
</v-chip>
</div>
</template>

62
components/ui-components/chip/FilledColor.vue Normal file
View File

@@ -0,0 +1,62 @@
<script setup lang="ts">
import { ref } from 'vue';
import { MoodSmileIcon, CircleXIcon } from 'vue-tabler-icons';
</script>
<template>
<div class="d-flex flex-wrap align-center gap-3">
<v-chip class="text-body-2">
<MoodSmileIcon class="mr-2" start size="20" /> Default Filled
</v-chip>
<v-chip class="text-body-2">
<MoodSmileIcon class="mr-2" start size="20" /> Default Deletable
<CircleXIcon class="ml-2" start size="20" />
</v-chip>
<v-chip color="primary" class="text-body-2">
<v-avatar start size="25">
<img src="@/assets/images/profile/user-6.jpg" width="25" />
</v-avatar> Primary Filled
</v-chip>
<v-chip color="primary" class="text-body-2">
<v-avatar start size="25">
<img src="@/assets/images/profile/user-6.jpg" width="25" />
</v-avatar> Primary Deletable
<CircleXIcon class="ml-2" start size="20" />
</v-chip>
<v-chip color="secondary" class="text-body-2">
<MoodSmileIcon class="mr-2" start size="20" /> Secondary Filled
</v-chip>
<v-chip color="secondary" class="text-body-2">
<MoodSmileIcon class="mr-2" start size="20" /> Secondary Deletable
<CircleXIcon class="ml-2" start size="20" />
</v-chip>
<v-chip color="success" class="text-body-2">
<v-avatar start size="25">
<img src="@/assets/images/profile/user-2.jpg" width="25" />
</v-avatar> Default Filled
</v-chip>
<v-chip color="success" class="text-body-2">
<v-avatar start size="25">
<img src="@/assets/images/profile/user-2.jpg" width="25" />
</v-avatar> Default Deletable
<CircleXIcon class="ml-2" start size="20" />
</v-chip>
<v-chip color="warning" class="text-body-2">
<MoodSmileIcon class="mr-2" start size="20" /> Default Filled
</v-chip>
<v-chip color="warning" class="text-body-2">
<MoodSmileIcon class="mr-2" start size="20" /> Default Deletable
<CircleXIcon class="ml-2" start size="20" />
</v-chip>
<v-chip color="error" class="text-body-2">
<v-avatar start size="25">
<img src="@/assets/images/profile/user-5.jpg" width="25" />
</v-avatar> Default Filled
</v-chip>
<v-chip color="error" class="text-body-2">
<v-avatar start size="25">
<img src="@/assets/images/profile/user-5.jpg" width="25" />
</v-avatar> Default Deletable
<CircleXIcon class="ml-2" start size="20" />
</v-chip>
</div>
</template>

9
components/ui-components/chip/LabelChip.vue Normal file
View File

@@ -0,0 +1,9 @@
<template>
<div class="d-flex flex-column flex-sm-row flex-wrap flex-xl-nowrap align-center gap-3">
<v-chip label closable color="primary"> Primary </v-chip>
<v-chip label closable color="secondary"> Secondary </v-chip>
<v-chip label closable color="warning"> Warning </v-chip>
<v-chip label closable color="success"> Success </v-chip>
<v-chip label closable color="error"> Error </v-chip>
</div>
</template>

62
components/ui-components/chip/Outlined.vue Normal file
View File

@@ -0,0 +1,62 @@
<script setup lang="ts">
import { ref } from 'vue';
import { MoodSmileIcon, CircleXIcon } from 'vue-tabler-icons';
</script>
<template>
<div class="d-flex flex-wrap align-center gap-3">
<v-chip variant="outlined" class="text-body-2">
<MoodSmileIcon class="mr-2" start size="20" /> Default Filled
</v-chip>
<v-chip variant="outlined" class="text-body-2">
<MoodSmileIcon class="mr-2" start size="20" /> Default Deletable
<CircleXIcon class="ml-2" start size="20" />
</v-chip>
<v-chip variant="outlined" color="primary" class="text-body-2">
<v-avatar start size="25">
<img src="@/assets/images/profile/user-3.jpg" width="25" />
</v-avatar> Primary Filled
</v-chip>
<v-chip variant="outlined" color="primary" class="text-body-2">
<v-avatar start size="25">
<img src="@/assets/images/profile/user-3.jpg" width="25" />
</v-avatar> Primary Deletable
<CircleXIcon class="ml-2" start size="20" />
</v-chip>
<v-chip variant="outlined" color="secondary" class="text-body-2">
<MoodSmileIcon class="mr-2" start size="20" /> Secondary Filled
</v-chip>
<v-chip variant="outlined" color="secondary" class="text-body-2">
<MoodSmileIcon class="mr-2" start size="20" /> Secondary Deletable
<CircleXIcon class="ml-2" start size="20" />
</v-chip>
<v-chip variant="outlined" color="success" class="text-body-2">
<v-avatar start size="25">
<img src="@/assets/images/profile/user-2.jpg" width="25" />
</v-avatar> Default Filled
</v-chip>
<v-chip variant="outlined" color="success" class="text-body-2">
<v-avatar start size="25">
<img src="@/assets/images/profile/user-2.jpg" width="25" />
</v-avatar> Default Deletable
<CircleXIcon class="ml-2" start size="20" />
</v-chip>
<v-chip variant="outlined" color="warning" class="text-body-2">
<MoodSmileIcon class="mr-2" start size="20" /> Default Filled
</v-chip>
<v-chip variant="outlined" color="warning" class="text-body-2">
<MoodSmileIcon class="mr-2" start size="20" /> Default Deletable
<CircleXIcon class="ml-2" start size="20" />
</v-chip>
<v-chip variant="outlined" color="error" class="text-body-2">
<v-avatar start size="25">
<img src="@/assets/images/profile/user-5.jpg" width="25" />
</v-avatar> Default Filled
</v-chip>
<v-chip variant="outlined" color="error" class="text-body-2">
<v-avatar start size="25">
<img src="@/assets/images/profile/user-5.jpg" width="25" />
</v-avatar> Default Deletable
<CircleXIcon class="ml-2" start size="20" />
</v-chip>
</div>
</template>

9
components/ui-components/chip/Sizes.vue Normal file
View File

@@ -0,0 +1,9 @@
<template>
<div class="d-flex flex-column flex-sm-row flex-wrap flex-xl-nowrap align-center gap-3">
<v-chip color="primary" size="x-small"> x-small </v-chip>
<v-chip color="primary" size="small"> small </v-chip>
<v-chip color="primary"> Default </v-chip>
<v-chip color="primary" size="large"> large </v-chip>
<v-chip color="primary" size="x-large"> x-large </v-chip>
</div>
</template>