first commit
This commit is contained in:
Inshal
183
resources/js/@core/components/cards/AppCardActions.vue
Normal file
183
resources/js/@core/components/cards/AppCardActions.vue
Normal file
@@ -0,0 +1,183 @@
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
collapsed: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false,
|
||||
},
|
||||
noActions: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false,
|
||||
},
|
||||
actionCollapsed: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false,
|
||||
},
|
||||
actionRefresh: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false,
|
||||
},
|
||||
actionRemove: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false,
|
||||
},
|
||||
loading: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
skipCheck: true,
|
||||
default: undefined,
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: undefined,
|
||||
},
|
||||
})
|
||||
|
||||
const emit = defineEmits([
|
||||
'collapsed',
|
||||
'refresh',
|
||||
'trash',
|
||||
'initialLoad',
|
||||
'update:loading',
|
||||
])
|
||||
|
||||
defineOptions({
|
||||
inheritAttrs: false,
|
||||
})
|
||||
|
||||
const _loading = ref(false)
|
||||
|
||||
const $loading = computed({
|
||||
get() {
|
||||
return props.loading !== undefined ? props.loading : _loading.value
|
||||
},
|
||||
set(value) {
|
||||
props.loading !== undefined ? emit('update:loading', value) : _loading.value = value
|
||||
},
|
||||
})
|
||||
|
||||
const isContentCollapsed = ref(props.collapsed)
|
||||
const isCardRemoved = ref(false)
|
||||
|
||||
// stop loading
|
||||
const stopLoading = () => {
|
||||
$loading.value = false
|
||||
}
|
||||
|
||||
// trigger collapse
|
||||
const triggerCollapse = () => {
|
||||
isContentCollapsed.value = !isContentCollapsed.value
|
||||
emit('collapsed', isContentCollapsed.value)
|
||||
}
|
||||
|
||||
// trigger refresh
|
||||
const triggerRefresh = () => {
|
||||
$loading.value = true
|
||||
emit('refresh', stopLoading)
|
||||
}
|
||||
|
||||
// trigger removal
|
||||
const triggeredRemove = () => {
|
||||
isCardRemoved.value = true
|
||||
emit('trash')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VExpandTransition>
|
||||
<!-- TODO remove div when transition work with v-card components: https://github.com/vuetifyjs/vuetify/issues/15111 -->
|
||||
<div v-if="!isCardRemoved">
|
||||
<VCard v-bind="$attrs">
|
||||
<VCardItem>
|
||||
<VCardTitle v-if="props.title || $slots.title">
|
||||
<!-- 👉 Title slot and prop -->
|
||||
<slot name="title">
|
||||
{{ props.title }}
|
||||
</slot>
|
||||
</VCardTitle>
|
||||
|
||||
<template #append>
|
||||
<!-- 👉 Before actions slot -->
|
||||
<div>
|
||||
<slot name="before-actions" />
|
||||
|
||||
<!-- SECTION Actions buttons -->
|
||||
|
||||
<!-- 👉 Collapse button -->
|
||||
<IconBtn
|
||||
v-if="(!(actionRemove || actionRefresh) || actionCollapsed) && !noActions"
|
||||
@click="triggerCollapse"
|
||||
>
|
||||
<VIcon
|
||||
size="20"
|
||||
icon="ri-arrow-up-s-line"
|
||||
:style="{ transform: isContentCollapsed ? 'rotate(-180deg)' : undefined }"
|
||||
style="transition-duration: 0.28s;"
|
||||
/>
|
||||
</IconBtn>
|
||||
|
||||
<!-- 👉 Overlay button -->
|
||||
<IconBtn
|
||||
v-if="(!(actionRemove || actionCollapsed) || actionRefresh) && !noActions"
|
||||
@click="triggerRefresh"
|
||||
>
|
||||
<VIcon
|
||||
size="20"
|
||||
icon="ri-refresh-line"
|
||||
/>
|
||||
</IconBtn>
|
||||
|
||||
<!-- 👉 Close button -->
|
||||
<IconBtn
|
||||
v-if="(!(actionRefresh || actionCollapsed) || actionRemove) && !noActions"
|
||||
@click="triggeredRemove"
|
||||
>
|
||||
<VIcon
|
||||
size="20"
|
||||
icon="ri-close-line"
|
||||
/>
|
||||
</IconBtn>
|
||||
</div>
|
||||
<!-- !SECTION -->
|
||||
</template>
|
||||
</VCardItem>
|
||||
|
||||
<!-- 👉 card content -->
|
||||
<VExpandTransition>
|
||||
<div
|
||||
v-show="!isContentCollapsed"
|
||||
class="v-card-content"
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
</VExpandTransition>
|
||||
|
||||
<!-- 👉 Overlay -->
|
||||
<VOverlay
|
||||
v-model="$loading"
|
||||
contained
|
||||
persistent
|
||||
scroll-strategy="none"
|
||||
class="align-center justify-center"
|
||||
>
|
||||
<VProgressCircular indeterminate />
|
||||
</VOverlay>
|
||||
</VCard>
|
||||
</div>
|
||||
</VExpandTransition>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.v-card-item {
|
||||
+.v-card-content {
|
||||
.v-card-text:first-child {
|
||||
padding-block-start: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
116
resources/js/@core/components/cards/AppCardCode.vue
Normal file
116
resources/js/@core/components/cards/AppCardCode.vue
Normal file
@@ -0,0 +1,116 @@
|
||||
<script setup>
|
||||
import 'prismjs'
|
||||
import 'prismjs/themes/prism-tomorrow.css'
|
||||
import Prism from 'vue-prism-component'
|
||||
|
||||
const props = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
code: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
codeLanguage: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: 'markup',
|
||||
},
|
||||
noPadding: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false,
|
||||
},
|
||||
})
|
||||
|
||||
const preferredCodeLanguage = useCookie('preferredCodeLanguage', {
|
||||
default: () => 'ts',
|
||||
maxAge: COOKIE_MAX_AGE_1_YEAR,
|
||||
})
|
||||
|
||||
const isCodeShown = ref(false)
|
||||
const { copy, copied } = useClipboard({ source: computed(() => props.code[preferredCodeLanguage.value]) })
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardItem>
|
||||
<VCardTitle>{{ props.title }}</VCardTitle>
|
||||
<template #append>
|
||||
<IconBtn
|
||||
:color="isCodeShown ? 'primary' : 'default'"
|
||||
:class="isCodeShown ? '' : 'text-disabled'"
|
||||
@click="isCodeShown = !isCodeShown"
|
||||
>
|
||||
<VIcon
|
||||
size="20"
|
||||
icon="ri-code-s-line"
|
||||
/>
|
||||
</IconBtn>
|
||||
</template>
|
||||
</VCardItem>
|
||||
<slot v-if="noPadding" />
|
||||
<VCardText v-else>
|
||||
<slot />
|
||||
</VCardText>
|
||||
<VExpandTransition>
|
||||
<div v-show="isCodeShown">
|
||||
<VDivider />
|
||||
|
||||
<VCardText class="d-flex gap-y-3 flex-column">
|
||||
<div class="d-flex justify-end">
|
||||
<VBtnToggle
|
||||
v-model="preferredCodeLanguage"
|
||||
mandatory
|
||||
density="compact"
|
||||
>
|
||||
<VBtn value="ts">
|
||||
<!-- eslint-disable-next-line regex/invalid -->
|
||||
<VIcon icon="mdi-language-typescript" />
|
||||
</VBtn>
|
||||
<VBtn value="js">
|
||||
<!-- eslint-disable-next-line regex/invalid -->
|
||||
<VIcon icon="mdi-language-javascript" />
|
||||
</VBtn>
|
||||
</VBtnToggle>
|
||||
</div>
|
||||
|
||||
<div class="position-relative">
|
||||
<Prism
|
||||
:key="props.code[preferredCodeLanguage]"
|
||||
:language="props.codeLanguage"
|
||||
:style="$vuetify.locale.isRtl ? 'text-align: right' : 'text-align: left'"
|
||||
>
|
||||
{{ props.code[preferredCodeLanguage] }}
|
||||
</Prism>
|
||||
<IconBtn
|
||||
class="position-absolute app-card-code-copy-icon"
|
||||
color="white"
|
||||
@click="() => { copy() }"
|
||||
>
|
||||
<VIcon
|
||||
:icon="copied ? 'ri-check-line' : 'ri-file-copy-line'"
|
||||
size="20"
|
||||
/>
|
||||
</IconBtn>
|
||||
</div>
|
||||
</VCardText>
|
||||
</div>
|
||||
</VExpandTransition>
|
||||
</VCard>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@use "@styles/variables/vuetify.scss";
|
||||
|
||||
:not(pre) > code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
border-radius: vuetify.$card-border-radius;
|
||||
}
|
||||
|
||||
.app-card-code-copy-icon {
|
||||
inset-block-start: 1.2em;
|
||||
inset-inline-end: 0.8em;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,84 @@
|
||||
<script setup>
|
||||
import { kFormatter } from '@core/utils/formatters'
|
||||
|
||||
const props = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: 'primary',
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
stats: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
change: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
|
||||
const isPositive = computed(() => Math.sign(props.change) === 1)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard
|
||||
variant="text"
|
||||
border
|
||||
>
|
||||
<VCardText class="d-flex align-center">
|
||||
<VAvatar
|
||||
size="40"
|
||||
rounded
|
||||
class="elevation-2 me-4"
|
||||
style="background-color: rgb(var(--v-theme-surface));"
|
||||
>
|
||||
<VIcon
|
||||
:color="props.color"
|
||||
:icon="props.icon"
|
||||
:size="24"
|
||||
/>
|
||||
</VAvatar>
|
||||
|
||||
<div>
|
||||
<div class="text-body-1">
|
||||
{{ props.title }}
|
||||
</div>
|
||||
<div class="d-flex align-center flex-wrap">
|
||||
<h5 class="text-h5">
|
||||
{{ kFormatter(props.stats) }}
|
||||
</h5>
|
||||
|
||||
<div
|
||||
v-if="props.change"
|
||||
:class="`${isPositive ? 'text-success' : 'text-error'} mt-1`"
|
||||
>
|
||||
<VIcon
|
||||
:icon="isPositive ? 'ri-arrow-up-s-line' : 'ri-arrow-down-s-line'"
|
||||
size="24"
|
||||
/>
|
||||
<span class="text-base">
|
||||
{{ Math.abs(props.change) }}%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.skin--bordered {
|
||||
.v-avatar {
|
||||
border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity)) !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,77 @@
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: 'primary',
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
stats: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
change: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
subtitle: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
|
||||
const isPositive = computed(() => Math.sign(props.change) === 1)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardText class="d-flex align-center">
|
||||
<VAvatar
|
||||
v-if="props.icon"
|
||||
size="40"
|
||||
:color="props.color"
|
||||
class="elevation-2"
|
||||
>
|
||||
<VIcon
|
||||
:icon="props.icon"
|
||||
size="24"
|
||||
/>
|
||||
</VAvatar>
|
||||
|
||||
<VSpacer />
|
||||
|
||||
<MoreBtn class="me-n3 mt-n1" />
|
||||
</VCardText>
|
||||
|
||||
<VCardText>
|
||||
<h6 class="text-h6 mb-1">
|
||||
{{ props.title }}
|
||||
</h6>
|
||||
|
||||
<div
|
||||
v-if="props.change"
|
||||
class="d-flex align-center mb-1 flex-wrap"
|
||||
>
|
||||
<h4 class="text-h4 me-2">
|
||||
{{ props.stats }}
|
||||
</h4>
|
||||
<div
|
||||
:class="isPositive ? 'text-success' : 'text-error'"
|
||||
class="text-body-1"
|
||||
>
|
||||
{{ isPositive ? `+${props.change}` : props.change }}%
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-body-2">
|
||||
{{ props.subtitle }}
|
||||
</div>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
@@ -0,0 +1,65 @@
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
value: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
change: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
desc: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
iconColor: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardText>
|
||||
<div class="d-flex justify-space-between">
|
||||
<div class="d-flex flex-column gap-y-1">
|
||||
<div class="text-body-1 text-high-emphasis">
|
||||
{{ title }}
|
||||
</div>
|
||||
<div>
|
||||
<h5 class="text-h5">
|
||||
{{ value }}
|
||||
<span
|
||||
class="text-base"
|
||||
:class="change > 0 ? 'text-success' : 'text-error'"
|
||||
>({{ prefixWithPlus(change) }}%)</span>
|
||||
</h5>
|
||||
</div>
|
||||
<div class="text-body-2">
|
||||
{{ desc }}
|
||||
</div>
|
||||
</div>
|
||||
<VAvatar
|
||||
:color="iconColor"
|
||||
variant="tonal"
|
||||
rounded
|
||||
size="42"
|
||||
>
|
||||
<VIcon
|
||||
:icon="icon"
|
||||
size="26"
|
||||
/>
|
||||
</VAvatar>
|
||||
</div>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
@@ -0,0 +1,89 @@
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
subtitle: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
stats: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
change: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
image: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: 'primary',
|
||||
},
|
||||
})
|
||||
|
||||
const isPositive = computed(() => Math.sign(props.change) === 1)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard class="overflow-visible position-relative">
|
||||
<div class="d-flex">
|
||||
<VCardText>
|
||||
<h6 class="text-h6 mb-5">
|
||||
{{ props.title }}
|
||||
</h6>
|
||||
<div class="d-flex align-center flex-wrap mb-3">
|
||||
<h4 class="text-h4 me-2">
|
||||
{{ props.stats }}
|
||||
</h4>
|
||||
<div
|
||||
class="text-body-1"
|
||||
:class="isPositive ? 'text-success' : 'text-error'"
|
||||
>
|
||||
{{ isPositive ? `+${props.change}` : props.change }}%
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<VChip
|
||||
v-if="props.subtitle"
|
||||
:color="props.color"
|
||||
size="small"
|
||||
>
|
||||
{{ props.subtitle }}
|
||||
</VChip>
|
||||
</VCardText>
|
||||
|
||||
<VSpacer />
|
||||
|
||||
<div class="illustrator-img">
|
||||
<VImg
|
||||
v-if="props.image"
|
||||
:src="props.image"
|
||||
:width="110"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</VCard>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.illustrator-img {
|
||||
position: absolute;
|
||||
inset-block-end: 0;
|
||||
inset-inline-end: 5%;
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) and (min-width: 960px) {
|
||||
.illustrator-img {
|
||||
inset-block-end: 0;
|
||||
inset-inline-end: 0;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user