fix: Use "iconClass" instead of "icon" in MkDialog; remove "null" in input field

Co-authored-by: minneyar <speed@sakabatou.net>
This commit is contained in:
Minneyar 2023-11-07 14:01:24 +00:00 committed by naskya
parent c80b5d3512
commit c03c11c7aa

View File

@ -115,7 +115,7 @@
v-if="input && input.type === 'paragraph'"
v-model="inputValue"
autofocus
:type="paragraph"
type="paragraph"
:placeholder="input.placeholder || undefined"
>
</MkTextarea>
@ -191,7 +191,7 @@
@click="
() => {
action.callback();
modal?.close();
modal?.close(null);
}
"
>{{ action.text }}</MkButton
@ -318,7 +318,7 @@ const inputEl = ref<typeof MkInput>();
function done(canceled: boolean, result?) {
emit("done", { canceled, result });
modal.value?.close();
modal.value?.close(null);
}
async function ok() {
@ -359,106 +359,134 @@ function formatDateToYYYYMMDD(date) {
return `${year}-${month}-${day}`;
}
/**
* Appends a new search parameter to the value in the input field.
* Trims any extra whitespace before and after, then adds a space at the end so a user can immediately
* begin typing a new criteria.
* @param value The value to append.
*/
function appendFilter(value: string) {
return (
[
typeof inputValue.value === "string"
? inputValue.value.trim()
: inputValue.value,
value,
]
.join(" ")
.trim() + " "
);
}
async function openSearchFilters(ev) {
await os.popupMenu(
[
{
icon: `${icon("ph-user")}`,
icon: `${iconClass("ph-user")}`,
text: i18n.ts._filters.fromUser,
action: () => {
os.selectUser().then((user) => {
inputValue.value += " from:@" + Acct.toString(user);
inputValue.value = appendFilter(
"from:@" + Acct.toString(user),
);
});
},
},
{
type: "parent",
text: i18n.ts._filters.withFile,
icon: `${icon("ph-paperclip")}`,
icon: `${iconClass("ph-paperclip")}`,
children: [
{
text: i18n.ts.image,
icon: `${icon("ph-image-square")}`,
icon: `${iconClass("ph-image-square")}`,
action: () => {
inputValue.value += " has:image";
inputValue.value = appendFilter("has:image");
},
},
{
text: i18n.ts.video,
icon: `${icon("ph-video-camera")}`,
icon: `${iconClass("ph-video-camera")}`,
action: () => {
inputValue.value += " has:video";
inputValue.value = appendFilter("has:video");
},
},
{
text: i18n.ts.audio,
icon: `${icon("ph-music-note")}`,
icon: `${iconClass("ph-music-note")}`,
action: () => {
inputValue.value += " has:audio";
inputValue.value = appendFilter("has:audio");
},
},
{
text: i18n.ts.file,
icon: `${icon("ph-file")}`,
icon: `${iconClass("ph-file")}`,
action: () => {
inputValue.value += " has:file";
inputValue.value = appendFilter("has:file");
},
},
],
},
{
icon: `${icon("ph-link")}`,
icon: `${iconClass("ph-link")}`,
text: i18n.ts._filters.fromDomain,
action: () => {
inputValue.value += " domain:";
inputValue.value = appendFilter("domain:");
},
},
{
icon: `${icon("ph-calendar-blank")}`,
icon: `${iconClass("ph-calendar-blank")}`,
text: i18n.ts._filters.notesBefore,
action: () => {
os.inputDate({
title: i18n.ts._filters.notesBefore,
}).then((res) => {
if (res.canceled) return;
inputValue.value +=
" before:" + formatDateToYYYYMMDD(res.result);
inputValue.value = appendFilter(
"before:" + formatDateToYYYYMMDD(res.result),
);
});
},
},
{
icon: `${icon("ph-calendar-blank")}`,
icon: `${iconClass("ph-calendar-blank")}`,
text: i18n.ts._filters.notesAfter,
action: () => {
os.inputDate({
title: i18n.ts._filters.notesAfter,
}).then((res) => {
if (res.canceled) return;
inputValue.value +=
" after:" + formatDateToYYYYMMDD(res.result);
inputValue.value = appendFilter(
"after:" + formatDateToYYYYMMDD(res.result),
);
});
},
},
{
icon: `${icon("ph-eye")}`,
icon: `${iconClass("ph-eye")}`,
text: i18n.ts._filters.followingOnly,
action: () => {
inputValue.value += " filter:following ";
inputValue.value = appendFilter("filter:following");
},
},
{
icon: `${icon("ph-users-three")}`,
icon: `${iconClass("ph-users-three")}`,
text: i18n.ts._filters.followersOnly,
action: () => {
inputValue.value += " filter:followers ";
inputValue.value = appendFilter("filter:followers");
},
},
],
ev.target,
{ noReturnFocus: true },
);
inputEl.value.focus();
inputEl.value.selectRange(inputValue.value.length, inputValue.value.length); // cursor at end
inputEl.value?.focus();
if (typeof inputValue.value === "string") {
inputEl.value?.selectRange(
inputValue.value.length,
inputValue.value.length,
); // cursor at end
}
}
onMounted(() => {