style: FileListing.vue

This commit is contained in:
banbxio 2025-03-27 01:42:54 +08:00
parent 416d54db5c
commit d667d97f62

View File

@ -298,7 +298,15 @@ import HeaderBar from "@/components/header/HeaderBar.vue";
import Action from "@/components/header/Action.vue"; import Action from "@/components/header/Action.vue";
import Search from "@/components/Search.vue"; import Search from "@/components/Search.vue";
import Item from "@/components/files/ListingItem.vue"; import Item from "@/components/files/ListingItem.vue";
import { computed, inject, nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue"; import {
computed,
inject,
nextTick,
onBeforeUnmount,
onMounted,
ref,
watch,
} from "vue";
import { useRoute } from "vue-router"; import { useRoute } from "vue-router";
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
import { storeToRefs } from "pinia"; import { storeToRefs } from "pinia";
@ -325,19 +333,19 @@ const { t } = useI18n();
const listing = ref<HTMLElement | null>(null); const listing = ref<HTMLElement | null>(null);
const nameSorted = computed(() => const nameSorted = computed(() =>
fileStore.req ? fileStore.req.sorting.by === "name" : false, fileStore.req ? fileStore.req.sorting.by === "name" : false
); );
const sizeSorted = computed(() => const sizeSorted = computed(() =>
fileStore.req ? fileStore.req.sorting.by === "size" : false, fileStore.req ? fileStore.req.sorting.by === "size" : false
); );
const modifiedSorted = computed(() => const modifiedSorted = computed(() =>
fileStore.req ? fileStore.req.sorting.by === "modified" : false, fileStore.req ? fileStore.req.sorting.by === "modified" : false
); );
const ascOrdered = computed(() => const ascOrdered = computed(() =>
fileStore.req ? fileStore.req.sorting.asc : false, fileStore.req ? fileStore.req.sorting.asc : false
); );
const dirs = computed(() => items.value.dirs.slice(0, showLimit.value)); const dirs = computed(() => items.value.dirs.slice(0, showLimit.value));
@ -643,7 +651,7 @@ const colunmsResize = () => {
if (items_ === null) return; if (items_ === null) return;
let columns = Math.floor( let columns = Math.floor(
(document.querySelector("main")?.offsetWidth ?? 0) / columnWidth.value, (document.querySelector("main")?.offsetWidth ?? 0) / columnWidth.value
); );
if (columns === 0) columns = 1; if (columns === 0) columns = 1;
items_.style.width = `calc(${100 / columns}% - 1em)`; items_.style.width = `calc(${100 / columns}% - 1em)`;
@ -858,7 +866,6 @@ const fetch = () => {
prompt: "fetch", prompt: "fetch",
confirm: (format: any) => { confirm: (format: any) => {
layoutStore.closeHovers(); layoutStore.closeHovers();
}, },
}); });
}; };
@ -951,7 +958,7 @@ const fillWindow = (fit = false) => {
// Quantity of items needed to fill 2x of the window height // Quantity of items needed to fill 2x of the window height
const showQuantity = Math.ceil( const showQuantity = Math.ceil(
(windowHeight + windowHeight * 2) / itemWeight.value, (windowHeight + windowHeight * 2) / itemWeight.value
); );
// Less items to display than current // Less items to display than current