GithubBackup/MoviePilot-Frontend
1
0
Fork 0
mirror of https://github.com/jxxghp/MoviePilot-Frontend.git synced 2026-09-05 07:28:37 +08:00
Code Issues Packages Projects Releases Wiki Activity

es lint fix

Browse Source
This commit is contained in:
thofx
2023-07-22 16:09:07 +08:00
parent 48749b29fe
commit 018778488a
80 changed files with 3994 additions and 2981 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/@layouts/components/VerticalNav.vue
+9 -17
View File
@@ -28,12 +28,13 @@ watch(
() => route.path,
() => {
props.toggleIsOverlayNavActive(false)
})
},
)
const isVerticalNavScrolled = ref(false)
const updateIsVerticalNavScrolled = (val: boolean) => isVerticalNavScrolled.value = val
const updateIsVerticalNavScrolled = (val: boolean) => (isVerticalNavScrolled.value = val)
const handleNavScroll = (evt: Event) => {
function handleNavScroll(evt: Event) {
isVerticalNavScrolled.value = (evt.target as HTMLElement).scrollTop > 0
}
</script>
@@ -54,14 +55,8 @@ const handleNavScroll = (evt: Event) => {
<!-- 👉 Header -->
<div class="nav-header">
<slot name="nav-header">
<RouterLink
to="/"
class="app-logo d-flex align-center gap-x-3 app-title-wrapper"
>
<div
class="d-flex"
v-html="logo"
/>
<RouterLink to="/" class="app-logo d-flex align-center gap-x-3 app-title-wrapper">
<div class="d-flex" v-html="logo" />
<h1 class="font-weight-medium leading-normal text-xl">
MoviePilot
@@ -72,10 +67,7 @@ const handleNavScroll = (evt: Event) => {
<slot name="before-nav-items">
<div class="vertical-nav-items-shadow" />
</slot>
<slot
name="nav-items"
:update-is-vertical-nav-scrolled="updateIsVerticalNavScrolled"
>
<slot name="nav-items" :update-is-vertical-nav-scrolled="updateIsVerticalNavScrolled">
<PerfectScrollbar
tag="ul"
class="nav-items"
@@ -91,8 +83,8 @@ const handleNavScroll = (evt: Event) => {
</template>
<style lang="scss">
@use "@configured-variables" as variables;
@use "@layouts/styles/mixins";
@use '@configured-variables' as variables;
@use '@layouts/styles/mixins';
// 👉 Vertical Nav
.layout-vertical-nav {
src/@layouts/components/VerticalNavLayout.vue
+45 -45
View File
@@ -1,27 +1,27 @@
<script lang="ts">
import VerticalNav from "@layouts/components/VerticalNav.vue";
import { useDisplay } from "vuetify";
import { useDisplay } from 'vuetify'
import VerticalNav from '@layouts/components/VerticalNav.vue'
export default defineComponent({
setup(props, { slots }) {
const isOverlayNavActive = ref(false);
const isLayoutOverlayVisible = ref(false);
const toggleIsOverlayNavActive = useToggle(isOverlayNavActive);
const isOverlayNavActive = ref(false)
const isLayoutOverlayVisible = ref(false)
const toggleIsOverlayNavActive = useToggle(isOverlayNavActive)
const route = useRoute();
const { mdAndDown } = useDisplay();
const route = useRoute()
const { mdAndDown } = useDisplay()
// ℹ️ This is alternative to below two commented watcher
// We want to show overlay if overlay nav is visible and want to hide overlay if overlay is hidden and vice versa.
syncRef(isOverlayNavActive, isLayoutOverlayVisible);
syncRef(isOverlayNavActive, isLayoutOverlayVisible)
const scrollDistance = ref(window.scrollY);
const scrollDistance = ref(window.scrollY)
onMounted(() => {
window.addEventListener("scroll", () => {
scrollDistance.value = window.scrollY;
});
});
window.addEventListener('scroll', () => {
scrollDistance.value = window.scrollY
})
})
return () => {
// 👉 Vertical nav
@@ -29,63 +29,63 @@ export default defineComponent({
VerticalNav,
{ isOverlayNavActive: isOverlayNavActive.value, toggleIsOverlayNavActive },
{
"nav-header": () => slots["vertical-nav-header"]?.(),
"before-nav-items": () => slots["before-vertical-nav-items"]?.(),
default: () => slots["vertical-nav-content"]?.(),
"after-nav-items": () => slots["after-vertical-nav-items"]?.(),
}
);
'nav-header': () => slots['vertical-nav-header']?.(),
'before-nav-items': () => slots['before-vertical-nav-items']?.(),
'default': () => slots['vertical-nav-content']?.(),
'after-nav-items': () => slots['after-vertical-nav-items']?.(),
},
)
// 👉 Navbar
const navbar = h("header", { class: ["layout-navbar navbar-blur"] }, [
const navbar = h('header', { class: ['layout-navbar navbar-blur'] }, [
h(
"div",
{ class: "navbar-content-container" },
'div',
{ class: 'navbar-content-container' },
slots.navbar?.({
toggleVerticalOverlayNavActive: toggleIsOverlayNavActive,
})
}),
),
]);
])
const main = h(
"main",
{ class: "layout-page-content" },
h("div", { class: "page-content-container" }, slots.default?.())
);
'main',
{ class: 'layout-page-content' },
h('div', { class: 'page-content-container' }, slots.default?.()),
)
// 👉 Footer
const footer = h("footer", { class: "layout-footer" }, [
h("div", { class: "footer-content-container" }, slots.footer?.()),
]);
const footer = h('footer', { class: 'layout-footer' }, [
h('div', { class: 'footer-content-container' }, slots.footer?.()),
])
// 👉 Overlay
const layoutOverlay = h("div", {
class: ["layout-overlay", { visible: isLayoutOverlayVisible.value }],
const layoutOverlay = h('div', {
class: ['layout-overlay', { visible: isLayoutOverlayVisible.value }],
onClick: () => {
isLayoutOverlayVisible.value = !isLayoutOverlayVisible.value;
isLayoutOverlayVisible.value = !isLayoutOverlayVisible.value
},
});
})
return h(
"div",
'div',
{
class: [
"layout-wrapper layout-nav-type-vertical layout-navbar-static layout-footer-static layout-content-width-fluid",
"layout-navbar-fixed",
mdAndDown.value && "layout-overlay-nav",
'layout-wrapper layout-nav-type-vertical layout-navbar-static layout-footer-static layout-content-width-fluid',
'layout-navbar-fixed',
mdAndDown.value && 'layout-overlay-nav',
route.meta.layoutWrapperClasses,
scrollDistance.value && "window-scrolled",
scrollDistance.value && 'window-scrolled',
],
},
[
verticalNav,
h("div", { class: "layout-content-wrapper" }, [navbar, main, footer]),
h('div', { class: 'layout-content-wrapper' }, [navbar, main, footer]),
layoutOverlay,
]
);
};
],
)
}
},
});
})
</script>
<style lang="scss">