HoovesSocial/hippofish
2
0
Fork 0
Code Issues 3 Pull requests 1 Projects Releases Packages Wiki Activity Actions

fix types of component

Browse source
This commit is contained in:
Lhcfl 2024-04-12 11:16:26 +08:00
parent f3b189a70c
commit 5da03666b2
12 changed files with 68 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
biome.json
View file

@ -21,7 +21,8 @@
"useImportType": "warn",
"useShorthandFunctionType": "warn",
"useTemplate": "warn",
"noNonNullAssertion": "off"
"noNonNullAssertion": "off",
"useNodejsImportProtocol": "off"
}
}
}

7
packages/client/src/components/MkDrive.file.vue
View file

@ -181,12 +181,15 @@ function describe() {
image: props.file,
},
{
done: (result) => {
done: (result: {
canceled: boolean,
result?: string | null,
}) => {
if (!result || result.canceled) return;
const comment = result.result;
os.api("drive/files/update", {
fileId: props.file.id,
comment: comment.length === 0 ? null : comment,
comment: comment || null,
});
},
},

5
packages/client/src/components/MkLaunchPad.vue
View file

@ -73,7 +73,10 @@ import { deviceKind } from "@/scripts/device-kind";
const props = withDefaults(
defineProps<{
src?: HTMLElement;
anchor?: { x: string; y: string };
anchor?: {
x: "left" | "center" | "right";
y: "top" | "center" | "bottom";
};
}>(),
{
anchor: () => ({ x: "right", y: "center" }),

2
packages/client/src/components/MkMediaCaption.vue
View file

@ -100,7 +100,7 @@ const props = withDefaults(
);
const emit = defineEmits<{
done: [v: { canceled: boolean; result?: string | null }];
done: [result: { canceled: boolean; result?: string | null }];
closed: [];
}>();

32
packages/client/src/components/MkMediaList.vue
View file

@ -22,7 +22,7 @@
media.type.startsWith('video') ||
media.type.startsWith('image')
"
:key="media.id"
:key="`m-${media.id}`"
:class="{ image: media.type.startsWith('image') }"
:data-id="media.id"
:media="media"
@ -30,7 +30,7 @@
/>
<XModPlayer
v-else-if="isModule(media)"
:key="media.id"
:key="`p-${media.id}`"
:module="media"
/>
</template>
@ -48,7 +48,7 @@ import "photoswipe/style.css";
import XBanner from "@/components/MkMediaBanner.vue";
import XMedia from "@/components/MkMedia.vue";
import XModPlayer from "@/components/MkModPlayer.vue";
import * as os from "@/os";
// import * as os from "@/os";
import {
FILE_EXT_TRACKER_MODULES,
FILE_TYPE_BROWSERSAFE,
@ -61,8 +61,8 @@ const props = defineProps<{
inDm?: boolean;
}>();
const gallery = ref(null);
const pswpZIndex = os.claimZIndex("middle");
const gallery = ref<HTMLElement | null>(null);
// const pswpZIndex = os.claimZIndex("middle");
onMounted(() => {
const lightbox = new PhotoSwipeLightbox({
@ -79,7 +79,7 @@ onMounted(() => {
src: media.url,
w: media.properties.width,
h: media.properties.height,
alt: media.comment,
alt: media.comment || undefined,
};
if (
media.properties.orientation != null &&
@ -89,7 +89,7 @@ onMounted(() => {
}
return item;
}),
gallery: gallery.value,
gallery: gallery.value || undefined,
children: ".image",
thumbSelector: ".image img",
loop: false,
@ -119,9 +119,13 @@ onMounted(() => {
// element is children
const { element } = itemData;
if (element == null) return;
const id = element.dataset.id;
const file = props.mediaList.find((media) => media.id === id);
if (file == null) return;
itemData.src = file.url;
itemData.w = Number(file.properties.width);
itemData.h = Number(file.properties.height);
@ -132,12 +136,12 @@ onMounted(() => {
[itemData.w, itemData.h] = [itemData.h, itemData.w];
}
itemData.msrc = file.thumbnailUrl;
itemData.alt = file.comment;
itemData.alt = file.comment || undefined;
itemData.thumbCropped = true;
});
lightbox.on("uiRegister", () => {
lightbox.pswp.ui.registerElement({
lightbox.pswp?.ui?.registerElement({
name: "altText",
className: "pwsp__alt-text-container",
appendTo: "wrapper",
@ -146,7 +150,7 @@ onMounted(() => {
textBox.className = "pwsp__alt-text";
el.appendChild(textBox);
const preventProp = function (ev: Event): void {
const preventProp = (ev: Event): void => {
ev.stopPropagation();
};
@ -158,7 +162,7 @@ onMounted(() => {
el.onpointermove = preventProp;
pwsp.on("change", () => {
textBox.textContent = pwsp.currSlide.data.alt?.trim();
textBox.textContent = pwsp.currSlide?.data.alt?.trim() ?? null;
});
},
});
@ -168,7 +172,7 @@ onMounted(() => {
history.pushState(null, "", location.href);
addEventListener("popstate", close);
// This is a workaround. Not sure why, but when clicking to open, it doesn't move focus to the photoswipe. Preventing using esc to close. However when using keyboard to open it already focuses the lightbox fine.
lightbox.pswp.element.focus();
lightbox.pswp?.element?.focus();
});
lightbox.on("close", () => {
removeEventListener("popstate", close);
@ -180,7 +184,7 @@ onMounted(() => {
function close() {
removeEventListener("popstate", close);
history.forward();
lightbox.pswp.close();
lightbox.pswp?.close();
}
});
@ -198,7 +202,7 @@ const isModule = (file: entities.DriveFile): boolean => {
return (
FILE_TYPE_TRACKER_MODULES.includes(file.type) ||
FILE_EXT_TRACKER_MODULES.some((ext) => {
return file.name.toLowerCase().endsWith("." + ext);
return file.name.toLowerCase().endsWith(`.${ext}`);
})
);
};

3
packages/client/src/components/MkMention.vue
View file

@ -23,7 +23,6 @@
:href="url"
target="_blank"
rel="noopener"
:style="{ background: bgCss }"
@click.stop
>
<span class="main">
@ -54,7 +53,7 @@ const url = `/${canonical}`;
const isMe =
isSignedIn &&
`@${props.username}@${toUnicode(props.host)}`.toLowerCase() ===
`@${me.username}@${toUnicode(localHost)}`.toLowerCase();
`@${me!.username}@${toUnicode(localHost)}`.toLowerCase();
</script>
<style lang="scss" scoped>

6
packages/client/src/components/MkMenu.child.vue
View file

@ -37,8 +37,8 @@ function setPosition() {
const rect = props.targetElement.getBoundingClientRect();
const left = props.targetElement.offsetWidth;
const top = rect.top - rootRect.top - 8;
el.value.style.left = left + "px";
el.value.style.top = top + "px";
el.value!.style.left = `${left}px`;
el.value!.style.top = `${top}px`;
}
function onChildClosed(actioned?: boolean) {
@ -58,7 +58,7 @@ onMounted(() => {
defineExpose({
checkHit: (ev: MouseEvent) => {
return ev.target === el.value || el.value.contains(ev.target);
return ev.target === el.value || el.value?.contains(ev.target as Node);
},
});
</script>

27
packages/client/src/components/MkMenu.vue
View file

@ -89,7 +89,8 @@
></span>
</a>
<button
v-else-if="item.type === 'user' && !items.hidden"
v-else-if="item.type === 'user'"
v-show="!item.hidden"
class="_button item"
:class="{ active: item.active }"
:disabled="item.active"
@ -206,6 +207,7 @@ import {
onMounted,
ref,
watch,
shallowRef,
} from "vue";
import { FocusTrap } from "focus-trap-vue";
import FormSwitch from "@/components/form/switch.vue";
@ -213,6 +215,7 @@ import type {
InnerMenuItem,
MenuAction,
MenuItem,
MenuParent,
MenuPending,
} from "@/types/menu";
import * as os from "@/os";
@ -234,20 +237,24 @@ const props = defineProps<{
}>();
const emit = defineEmits<{
(ev: "close", actioned?: boolean): void;
close: [actioned?: boolean];
}>();
const itemsEl = ref<HTMLDivElement>();
const items2: InnerMenuItem[] = ref([]);
const items2 = shallowRef<InnerMenuItem[]>([]);
const child = ref<InstanceType<typeof XChild>>();
const childShowingItem = ref<MenuItem | null>();
// FIXME: this is not used
const isActive = ref();
watch(
() => props.items,
() => {
// FIXME: what's this?
const items: (MenuItem | MenuPending)[] = [...props.items].filter(
(item) => item !== undefined,
);
@ -288,29 +295,29 @@ function onGlobalMousedown(event: MouseEvent) {
if (
childTarget.value &&
(event.target === childTarget.value ||
childTarget.value.contains(event.target))
childTarget.value.contains(event.target as Node))
)
return;
if (child.value && child.value.checkHit(event)) return;
if (child.value?.checkHit(event)) return;
closeChild();
}
let childCloseTimer: null | number = null;
function onItemMouseEnter(item) {
function onItemMouseEnter(_item) {
childCloseTimer = window.setTimeout(() => {
closeChild();
}, 300);
}
function onItemMouseLeave(item) {
function onItemMouseLeave(_item) {
if (childCloseTimer) window.clearTimeout(childCloseTimer);
}
async function showChildren(item: MenuItem, ev: MouseEvent) {
async function showChildren(item: MenuParent, ev: MouseEvent) {
if (props.asDrawer) {
os.popupMenu(item.children, ev.currentTarget ?? ev.target);
os.popupMenu(item.children, (ev.currentTarget ?? ev.target) as HTMLElement);
close();
} else {
childTarget.value = ev.currentTarget ?? ev.target;
childTarget.value = (ev.currentTarget ?? ev.target) as HTMLElement;
childMenu.value = item.children;
childShowingItem.value = item;
}

2
packages/client/src/components/MkMiniChart.vue
View file

@ -20,7 +20,7 @@
:stroke="color"
stroke-width="2"
/>
<circle :cx="headX" :cy="headY" r="3" :fill="color" />
<circle :cx="headX ?? undefined" :cy="headY ?? undefined" r="3" :fill="color" />
</svg>
</template>

20
packages/client/src/components/MkModal.vue
View file

@ -108,8 +108,11 @@ type ModalTypes = "popup" | "dialog" | "dialog:top" | "drawer";
const props = withDefaults(
defineProps<{
manualShowing?: boolean | null;
anchor?: { x: string; y: string };
src?: HTMLElement;
anchor?: {
x: "left" | "center" | "right";
y: "top" | "center" | "bottom";
};
src?: HTMLElement | null;
preferType?: ModalTypes | "auto";
zPriority?: "low" | "middle" | "high";
noOverlap?: boolean;
@ -118,7 +121,7 @@ const props = withDefaults(
}>(),
{
manualShowing: null,
src: undefined,
src: null,
anchor: () => ({ x: "center", y: "bottom" }),
preferType: "auto",
zPriority: "low",
@ -139,6 +142,9 @@ const emit = defineEmits<{
provide("modal", true);
// FIXME: this may not used
const isActive = ref();
const maxHeight = ref<number>();
const fixed = ref(false);
const transformOrigin = ref("center");
@ -189,7 +195,7 @@ const transitionDuration = computed(() =>
let contentClicking = false;
const focusedElement = document.activeElement;
const focusedElement = document.activeElement as HTMLElement;
function close(_ev?, opts: { useSendAnimation?: boolean } = {}) {
// removeEventListener("popstate", close);
// if (props.preferType == "dialog") {
@ -204,7 +210,7 @@ function close(_ev?, opts: { useSendAnimation?: boolean } = {}) {
showing.value = false;
emit("close");
if (!props.noReturnFocus) {
focusedElement.focus();
focusedElement?.focus();
}
}
@ -235,8 +241,8 @@ const align = () => {
const width = content.value!.offsetWidth;
const height = content.value!.offsetHeight;
let left: number;
let top: number;
let left = 0;
let top = MARGIN;
const x = srcRect.left + (fixed.value ? 0 : window.scrollX);
const y = srcRect.top + (fixed.value ? 0 : window.scrollY);

2
packages/client/src/components/MkPopupMenu.vue
View file

@ -35,7 +35,7 @@ defineProps<{
align?: "center" | string;
width?: number;
viaKeyboard?: boolean;
src?: any;
src?: HTMLElement | null;
noReturnFocus?;
}>();

4
packages/client/src/os.ts
View file

@ -213,7 +213,7 @@ interface VueComponentConstructor<P, E> {
export async function popup<Props, Emits>(
component: VueComponentConstructor<Props, Emits>,
props: Props & Record<string, unknown>,
events: Partial<NonNullable<Emits>> | Record<string, never> = {},
events: Partial<Emits> = {},
disposeEvent?: string,
) {
markRaw(component);
@ -858,7 +858,7 @@ export async function openEmojiPicker(
export function popupMenu(
items: MenuItem[] | Ref<MenuItem[]>,
src?: HTMLElement,
src?: HTMLElement | null,
options?: {
align?: string;
width?: number;