init: чистый старт Laravel + Vuexy
This commit is contained in:
167
resources/ts/@core/components/cards/AppCardActions.vue
Normal file
167
resources/ts/@core/components/cards/AppCardActions.vue
Normal file
@@ -0,0 +1,167 @@
|
||||
<script setup lang="ts">
|
||||
interface Props {
|
||||
collapsed?: boolean
|
||||
noActions?: boolean
|
||||
actionCollapsed?: boolean
|
||||
actionRefresh?: boolean
|
||||
actionRemove?: boolean
|
||||
loading?: boolean | undefined
|
||||
title?: string
|
||||
}
|
||||
|
||||
interface Emit {
|
||||
(e: 'collapsed', isContentCollapsed: boolean): void
|
||||
(e: 'refresh', stopLoading: () => void): void
|
||||
(e: 'trash'): void
|
||||
(e: 'initialLoad'): void
|
||||
(e: 'update:loading', loading: boolean): void
|
||||
}
|
||||
|
||||
defineOptions({
|
||||
inheritAttrs: false,
|
||||
})
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
collapsed: false,
|
||||
noActions: false,
|
||||
actionCollapsed: false,
|
||||
actionRefresh: false,
|
||||
actionRemove: false,
|
||||
loading: undefined,
|
||||
title: undefined,
|
||||
})
|
||||
|
||||
const emit = defineEmits<Emit>()
|
||||
|
||||
const _loading = ref(false)
|
||||
|
||||
const $loading = computed({
|
||||
get() {
|
||||
return props.loading !== undefined ? props.loading : _loading.value
|
||||
},
|
||||
|
||||
set(value: boolean) {
|
||||
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="tabler-chevron-up"
|
||||
: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="tabler-refresh"
|
||||
/>
|
||||
</IconBtn>
|
||||
|
||||
<!-- 👉 Close button -->
|
||||
<IconBtn
|
||||
v-if="(!(actionRefresh || actionCollapsed) || actionRemove) && !noActions"
|
||||
@click="triggeredRemove"
|
||||
>
|
||||
<VIcon
|
||||
size="20"
|
||||
icon="tabler-x"
|
||||
/>
|
||||
</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>
|
||||
154
resources/ts/@core/components/cards/AppCardCode.vue
Normal file
154
resources/ts/@core/components/cards/AppCardCode.vue
Normal file
@@ -0,0 +1,154 @@
|
||||
<script lang="ts" setup>
|
||||
import { getSingletonHighlighter } from 'shiki'
|
||||
import { PerfectScrollbar } from 'vue3-perfect-scrollbar'
|
||||
|
||||
type CodeLanguages = 'ts' | 'js'
|
||||
|
||||
interface Props {
|
||||
title: string
|
||||
code: CodeProp
|
||||
codeLanguage?: string
|
||||
noPadding?: boolean
|
||||
}
|
||||
|
||||
type CodeProp = Record<CodeLanguages, string>
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
codeLanguage: 'markup',
|
||||
noPadding: false,
|
||||
})
|
||||
|
||||
const preferredCodeLanguage = useCookie<CodeLanguages>('preferredCodeLanguage', {
|
||||
default: () => 'ts',
|
||||
maxAge: COOKIE_MAX_AGE_1_YEAR,
|
||||
})
|
||||
|
||||
const isCodeShown = ref(false)
|
||||
|
||||
const { copy, copied } = useClipboard({ source: computed(() => props.code[preferredCodeLanguage.value]) })
|
||||
|
||||
const highlighter = await getSingletonHighlighter({
|
||||
themes: ['dracula', 'dracula-soft'],
|
||||
langs: ['vue'],
|
||||
})
|
||||
|
||||
const codeSnippet = computed(() =>
|
||||
highlighter.codeToHtml(props.code[preferredCodeLanguage.value], {
|
||||
lang: 'vue',
|
||||
theme: 'dracula',
|
||||
}),
|
||||
)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- eslint-disable regex/invalid -->
|
||||
<VCard class="app-card-code">
|
||||
<VCardItem>
|
||||
<VCardTitle>{{ props.title }}</VCardTitle>
|
||||
<template #append>
|
||||
<IconBtn
|
||||
size="small"
|
||||
:color="isCodeShown ? 'primary' : 'default'"
|
||||
:class="isCodeShown ? '' : 'text-disabled'"
|
||||
@click="isCodeShown = !isCodeShown"
|
||||
>
|
||||
<VIcon
|
||||
size="20"
|
||||
icon="tabler-code"
|
||||
/>
|
||||
</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"
|
||||
icon
|
||||
:variant="preferredCodeLanguage === 'ts' ? 'tonal' : 'text'"
|
||||
:color="preferredCodeLanguage === 'ts' ? 'primary' : ''"
|
||||
>
|
||||
<VIcon
|
||||
icon="mdi-language-typescript"
|
||||
:color="preferredCodeLanguage === 'ts' ? 'primary' : 'secondary'"
|
||||
/>
|
||||
</VBtn>
|
||||
|
||||
<VBtn
|
||||
value="js"
|
||||
icon
|
||||
:variant="preferredCodeLanguage === 'js' ? 'tonal' : 'text'"
|
||||
:color="preferredCodeLanguage === 'js' ? 'primary' : ''"
|
||||
>
|
||||
<VIcon
|
||||
icon="mdi-language-javascript"
|
||||
:color="preferredCodeLanguage === 'js' ? 'primary' : 'secondary'"
|
||||
/>
|
||||
</VBtn>
|
||||
</VBtnToggle>
|
||||
</div>
|
||||
|
||||
<div class="position-relative">
|
||||
<PerfectScrollbar
|
||||
style="border-radius: 6px;max-block-size: 500px;"
|
||||
:options="{ wheelPropagation: false, suppressScrollX: false }"
|
||||
>
|
||||
<!-- eslint-disable-next-line vue/no-v-html -->
|
||||
<span v-html="codeSnippet" />
|
||||
</PerfectScrollbar>
|
||||
<IconBtn
|
||||
class="position-absolute app-card-code-copy-icon"
|
||||
color="white"
|
||||
@click="() => { copy() }"
|
||||
>
|
||||
<VIcon
|
||||
:icon="copied ? 'tabler-check' : 'tabler-copy'"
|
||||
size="20"
|
||||
/>
|
||||
</IconBtn>
|
||||
</div>
|
||||
</VCardText>
|
||||
</div>
|
||||
</VExpandTransition>
|
||||
</VCard>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@use "@styles/variables/vuetify";
|
||||
|
||||
code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
:not(pre) > code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
border-radius: vuetify.$card-border-radius;
|
||||
max-block-size: 500px;
|
||||
}
|
||||
|
||||
.app-card-code-copy-icon {
|
||||
inset-block-start: 1.2em;
|
||||
inset-inline-end: 0.8em;
|
||||
}
|
||||
|
||||
.app-card-code {
|
||||
.shiki {
|
||||
padding: 0.75rem;
|
||||
text-wrap: wrap;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,41 @@
|
||||
<script setup lang="ts">
|
||||
interface Props {
|
||||
title: string
|
||||
color?: string
|
||||
icon: string
|
||||
stats: string
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
color: 'primary',
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardText class="d-flex align-center justify-space-between">
|
||||
<div>
|
||||
<div class="d-flex align-center flex-wrap">
|
||||
<h5 class="text-h5">
|
||||
{{ props.stats }}
|
||||
</h5>
|
||||
</div>
|
||||
<div class="text-subtitle-1">
|
||||
{{ props.title }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<VAvatar
|
||||
:color="props.color"
|
||||
:size="42"
|
||||
rounded
|
||||
variant="tonal"
|
||||
>
|
||||
<VIcon
|
||||
:icon="props.icon"
|
||||
size="26"
|
||||
/>
|
||||
</VAvatar>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
@@ -0,0 +1,48 @@
|
||||
<script setup lang="ts">
|
||||
interface Props {
|
||||
title: string
|
||||
color?: string
|
||||
icon: string
|
||||
stats: string
|
||||
height: number
|
||||
series: unknown[]
|
||||
chartOptions: unknown
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
color: 'primary',
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardText class="d-flex flex-column pb-0">
|
||||
<VAvatar
|
||||
v-if="props.icon"
|
||||
size="42"
|
||||
variant="tonal"
|
||||
:color="props.color"
|
||||
rounded
|
||||
class="mb-2"
|
||||
>
|
||||
<VIcon
|
||||
:icon="props.icon"
|
||||
size="26"
|
||||
/>
|
||||
</VAvatar>
|
||||
|
||||
<h5 class="text-h5">
|
||||
{{ props.stats }}
|
||||
</h5>
|
||||
<div class="text-sm">
|
||||
{{ props.title }}
|
||||
</div>
|
||||
</VCardText>
|
||||
|
||||
<VueApexCharts
|
||||
:series="props.series"
|
||||
:options="props.chartOptions"
|
||||
:height="props.height"
|
||||
/>
|
||||
</VCard>
|
||||
</template>
|
||||
Reference in New Issue
Block a user