mirrors/dozzle
1
0
Fork 0
mirror of https://github.com/amir20/dozzle.git synced 2025-12-21 21:33:18 +01:00
Code Issues Projects Releases Wiki Activity

Uses v-bind instead for css variables

Browse Source
This commit is contained in:
Amir Raminfar
2022-01-17 13:43:46 -08:00
parent 57c53e43db
commit d80dc105ee
3 changed files with 8 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
assets/components.d.ts vendored
View File

@@ -4,8 +4,6 @@
declare module 'vue' { declare module 'vue' {
export interface GlobalComponents { export interface GlobalComponents {
CarbonCaretDown: typeof import('~icons/carbon/caret-down')['default']
CilColumns: typeof import('~icons/cil/columns')['default']
ContainerStat: typeof import('./components/ContainerStat.vue')['default'] ContainerStat: typeof import('./components/ContainerStat.vue')['default']
ContainerTitle: typeof import('./components/ContainerTitle.vue')['default'] ContainerTitle: typeof import('./components/ContainerTitle.vue')['default']
FuzzySearchModal: typeof import('./components/FuzzySearchModal.vue')['default'] FuzzySearchModal: typeof import('./components/FuzzySearchModal.vue')['default']
@@ -15,16 +13,7 @@ declare module 'vue' {
LogEventSource: typeof import('./components/LogEventSource.vue')['default'] LogEventSource: typeof import('./components/LogEventSource.vue')['default']
LogViewer: typeof import('./components/LogViewer.vue')['default'] LogViewer: typeof import('./components/LogViewer.vue')['default']
LogViewerWithSource: typeof import('./components/LogViewerWithSource.vue')['default'] LogViewerWithSource: typeof import('./components/LogViewerWithSource.vue')['default']
MdiDotsVertical: typeof import('~icons/mdi/dots-vertical')['default']
MdiLightChevronDoubleDown: typeof import('~icons/mdi-light/chevron-double-down')['default']
MdiLightChevronLeft: typeof import('~icons/mdi-light/chevron-left')['default']
MdiLightChevronRight: typeof import('~icons/mdi-light/chevron-right')['default']
MdiLightCog: typeof import('~icons/mdi-light/cog')['default']
MdiLightMagnify: typeof import('~icons/mdi-light/magnify')['default']
MobileMenu: typeof import('./components/MobileMenu.vue')['default'] MobileMenu: typeof import('./components/MobileMenu.vue')['default']
OcticonContainer24: typeof import('~icons/octicon/container24')['default']
OcticonDownload24: typeof import('~icons/octicon/download24')['default']
OcticonTrash24: typeof import('~icons/octicon/trash24')['default']
PastTime: typeof import('./components/PastTime.vue')['default'] PastTime: typeof import('./components/PastTime.vue')['default']
RelativeTime: typeof import('./components/RelativeTime.vue')['default'] RelativeTime: typeof import('./components/RelativeTime.vue')['default']
ScrollableView: typeof import('./components/ScrollableView.vue')['default'] ScrollableView: typeof import('./components/ScrollableView.vue')['default']

7
assets/components/ContainerTitle.vue
View File

@@ -8,8 +8,13 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { Container } from "@/types/Container";
import { PropType } from "vue";
defineProps({ defineProps({
container: Object, container: {
type: Object as PropType<Container>,
required: true,
},
}); });
</script> </script>

4
assets/components/ScrollProgress.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<div class="scroll-progress" ref="root"> <div class="scroll-progress" ref="root">
<svg width="100" height="100" viewBox="0 0 100 100" :class="{ indeterminate }"> <svg width="100" height="100" viewBox="0 0 100 100" :class="{ indeterminate }">
<circle r="44" cx="50" cy="50" :style="{ '--progress': scrollProgress }" /> <circle r="44" cx="50" cy="50" />
</svg> </svg>
<div class="is-overlay columns is-vcentered is-centered has-text-weight-light"> <div class="is-overlay columns is-vcentered is-centered has-text-weight-light">
<template v-if="indeterminate"> <template v-if="indeterminate">
@@ -105,7 +105,7 @@ watchPostEffect(() => {
transform: rotate(-90deg); transform: rotate(-90deg);
transform-origin: 50% 50%; transform-origin: 50% 50%;
stroke: var(--primary-color); stroke: var(--primary-color);
stroke-dashoffset: calc(276.32px - var(--progress) * 276.32px); stroke-dashoffset: calc(276.32px - v-bind(scrollProgress) * 276.32px);
stroke-dasharray: 276.32px 276.32px; stroke-dasharray: 276.32px 276.32px;
stroke-linecap: round; stroke-linecap: round;
stroke-width: 3; stroke-width: 3;