Refactor: rebase the UI on top of nuxt/ui
This commit is contained in:
arabcoders
parent
980f39d52c
commit
295c74b985
85 changed files with 15750 additions and 56368 deletions
11
ui/app/app.config.ts
Normal file
11
ui/app/app.config.ts
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
export default defineAppConfig({
|
||||
ui: {
|
||||
primary: 'indigo',
|
||||
colors: {
|
||||
primary: 'indigo',
|
||||
secondary: 'amber',
|
||||
success: 'emerald',
|
||||
neutral: 'stone',
|
||||
},
|
||||
},
|
||||
});
|
||||
File diff suppressed because it is too large
Load diff
File diff suppressed because it is too large
Load diff
31052
ui/app/assets/css/bulma.css
vendored
31052
ui/app/assets/css/bulma.css
vendored
File diff suppressed because it is too large
Load diff
|
|
@ -1,374 +0,0 @@
|
|||
* {
|
||||
unicode-bidi: plaintext;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 1em;
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
.container,
|
||||
.card,
|
||||
.box,
|
||||
.navbar {
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.is-bordered-danger {
|
||||
border: 1px solid red;
|
||||
}
|
||||
|
||||
.is-bordered-info {
|
||||
border: 1px solid #3e8ed0;
|
||||
}
|
||||
|
||||
html {
|
||||
background-color: #eaeaea;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
hr {
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.is-unselectable {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.is-text-overflow {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.has-tooltip {
|
||||
cursor: help;
|
||||
border-bottom: 1px dotted;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
.has-tooltip {
|
||||
border-bottom-color: #000;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
* {
|
||||
unicode-bidi: plaintext;
|
||||
}
|
||||
|
||||
.has-tooltip {
|
||||
border-bottom-color: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 1em;
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
.container,
|
||||
.card,
|
||||
.box,
|
||||
.navbar {
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.is-bordered-danger {
|
||||
border: 1px solid red;
|
||||
}
|
||||
|
||||
.is-bordered-info {
|
||||
border: 1px solid #3e8ed0;
|
||||
}
|
||||
|
||||
hr {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
html {
|
||||
background-color: #000000;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: #0f1010;
|
||||
}
|
||||
|
||||
.is-unselectable {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.is-text-overflow {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.is-borderless {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.is-marginless {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.is-paddingless {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.section {
|
||||
padding: 3rem 3rem;
|
||||
}
|
||||
|
||||
.section.is-medium {
|
||||
padding: 9rem 4.5rem;
|
||||
}
|
||||
|
||||
.section.is-large {
|
||||
padding: 18rem 6rem;
|
||||
}
|
||||
|
||||
.footer {
|
||||
background-color: #fafafa;
|
||||
padding: 3rem 1.5rem 6rem;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.progress,
|
||||
.progress-percentage {
|
||||
border-radius: 15px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.progress-percentage {
|
||||
text-align: center;
|
||||
z-index: 2;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
.progress {
|
||||
z-index: 1;
|
||||
background-color: #00d1b2;
|
||||
}
|
||||
|
||||
.button.is-purple {
|
||||
background-color: #5f00d1;
|
||||
border-color: transparent;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.has-text-purple {
|
||||
color: #5f00d1;
|
||||
}
|
||||
|
||||
.progress,
|
||||
.progress-percentage {
|
||||
border-radius: unset !important;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.footer {
|
||||
background-color: #121212;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
border-radius: 15px;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
background-color: #383636;
|
||||
}
|
||||
|
||||
.progress,
|
||||
.progress-percentage {
|
||||
border-radius: 15px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.progress-percentage {
|
||||
text-align: center;
|
||||
z-index: 2;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
.progress {
|
||||
z-index: 1;
|
||||
background-color: #087363;
|
||||
}
|
||||
}
|
||||
|
||||
.vue-notification {
|
||||
background: unset;
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
.notification-title {
|
||||
font-size: 1.5em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.notification-content {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
.vue-notification-wrapper {
|
||||
cursor: pointer;
|
||||
padding-top: 0.5em;
|
||||
}
|
||||
|
||||
.play-overlay,
|
||||
.is-pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.play-icon,
|
||||
.embed-icon {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
|
||||
background-image: url(/images/play-icon.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
cursor: pointer;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.embed-icon {
|
||||
background-image: url(/images/embed-icon.png);
|
||||
}
|
||||
|
||||
.play-icon:hover,
|
||||
.play-icon:focus,
|
||||
.play-active {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.image-portrait {
|
||||
object-fit: cover;
|
||||
object-position: top;
|
||||
}
|
||||
|
||||
.is-pre {
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
.is-pre-wrap {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.is-pre-wrap-force {
|
||||
white-space: pre-wrap !important;
|
||||
}
|
||||
|
||||
.has-text-bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.transparent-bg {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.bg-fanart {
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-attachment: fixed;
|
||||
background-repeat: no-repeat;
|
||||
background-blend-mode: darken;
|
||||
}
|
||||
|
||||
.is-unbounded-model {
|
||||
max-height: unset !important;
|
||||
width: unset !important;
|
||||
}
|
||||
|
||||
.is-auto {
|
||||
unicode-bidi: embed;
|
||||
}
|
||||
|
||||
.is-justify-self-end {
|
||||
justify-self: end;
|
||||
}
|
||||
|
||||
.is-full-height {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.is-ellipsis {
|
||||
max-width: calc(100% - 10px);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.is-max-width {
|
||||
max-width: calc(100% - 10px);
|
||||
}
|
||||
|
||||
.is-bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.fa-spin-10 {
|
||||
--fa-animation-iteration-count: 10;
|
||||
}
|
||||
|
||||
.Vue-Toastification__toast-body {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.is-word-break {
|
||||
word-break: break-word;
|
||||
text-wrap: auto;
|
||||
}
|
||||
|
||||
table.is-fixed {
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
div.is-centered {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.is-overflow-visible {
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
.modal-content-max {
|
||||
width: calc(100% - 20px);
|
||||
max-width: 1344px;
|
||||
min-width: 320px;
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.is-rounded-less {
|
||||
border-radius: 0px !important;
|
||||
}
|
||||
121
ui/app/assets/css/tailwind.css
Normal file
121
ui/app/assets/css/tailwind.css
Normal file
|
|
@ -0,0 +1,121 @@
|
|||
@import 'tailwindcss';
|
||||
@import '@nuxt/ui';
|
||||
|
||||
@layer base {
|
||||
html,
|
||||
body,
|
||||
#__nuxt {
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
min-height: 100dvh;
|
||||
}
|
||||
|
||||
html.bg-fanart {
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
html.simple-mode.bg-fanart,
|
||||
html.simple-mode.bg-fanart body,
|
||||
html.simple-mode.bg-fanart #__nuxt {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
html.simple-mode.bg-fanart body,
|
||||
html.simple-mode.bg-fanart #__nuxt {
|
||||
background-image: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@layer components {
|
||||
.play-overlay {
|
||||
position: relative;
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
background: rgb(0 0 0 / 0.04);
|
||||
}
|
||||
|
||||
.play-overlay img {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform 0.22s ease;
|
||||
}
|
||||
|
||||
.play-overlay::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: rgb(0 0 0 / 0.18);
|
||||
transition: background-color 0.22s ease;
|
||||
}
|
||||
|
||||
.play-overlay:hover::after {
|
||||
background: rgb(0 0 0 / 0.34);
|
||||
}
|
||||
|
||||
.play-overlay:hover img {
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
.play-icon {
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
height: 3.5rem;
|
||||
width: 3.5rem;
|
||||
transform: translate(-50%, -50%);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid rgb(255 255 255 / 0.62);
|
||||
border-radius: 9999px;
|
||||
background: rgb(0 0 0 / 0.24);
|
||||
box-shadow: 0 0.5rem 1.25rem rgb(0 0 0 / 0.16);
|
||||
backdrop-filter: blur(2px);
|
||||
transition:
|
||||
transform 0.22s ease,
|
||||
background-color 0.22s ease,
|
||||
border-color 0.22s ease,
|
||||
box-shadow 0.22s ease;
|
||||
}
|
||||
|
||||
.play-overlay:hover .play-icon {
|
||||
transform: translate(-50%, -50%) scale(1.05);
|
||||
background: rgb(0 0 0 / 0.55);
|
||||
border-color: rgb(255 255 255 / 0.82);
|
||||
box-shadow: 0 0.75rem 1.75rem rgb(0 0 0 / 0.22);
|
||||
}
|
||||
|
||||
.play-icon.embed-icon {
|
||||
border-color: rgb(239 68 68 / 0.68);
|
||||
background: rgb(127 29 29 / 0.3);
|
||||
box-shadow:
|
||||
0 0 0 1px rgb(239 68 68 / 0.2),
|
||||
0 0.5rem 1.25rem rgb(0 0 0 / 0.16);
|
||||
}
|
||||
|
||||
.play-overlay:hover .play-icon.embed-icon {
|
||||
background: rgb(127 29 29 / 0.74);
|
||||
border-color: rgb(239 68 68 / 0.95);
|
||||
box-shadow:
|
||||
0 0 0 1px rgb(239 68 68 / 0.3),
|
||||
0 0.75rem 1.75rem rgb(0 0 0 / 0.22);
|
||||
}
|
||||
}
|
||||
|
||||
:root {
|
||||
--ui-radius: 0.5rem;
|
||||
--ui-container: 96rem;
|
||||
--ui-header-height: 4.25rem;
|
||||
}
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
File diff suppressed because it is too large
Load diff
|
|
@ -1,133 +0,0 @@
|
|||
<template>
|
||||
<div v-if="visible" class="modal is-active">
|
||||
<div class="modal-background" @click="cancel" />
|
||||
<div class="modal-card">
|
||||
<header class="modal-card-head">
|
||||
<p class="modal-card-title">{{ title }}</p>
|
||||
<button class="delete" aria-label="close" @click="cancel" />
|
||||
</header>
|
||||
|
||||
<section class="modal-card-body">
|
||||
<p class="mb-3 title is-5" v-if="!html_message">{{ message }}</p>
|
||||
<div
|
||||
class="content"
|
||||
v-if="html_message"
|
||||
v-html="html_message"
|
||||
style="max-height: 40vh; overflow: auto"
|
||||
/>
|
||||
|
||||
<div v-if="options?.length">
|
||||
<hr class="" />
|
||||
<label
|
||||
v-for="opt in options"
|
||||
:key="opt.key"
|
||||
class="checkbox is-block mb-2 is-unselectable"
|
||||
>
|
||||
<input type="checkbox" v-model="selected[opt.key]" class="mr-2" />
|
||||
{{ opt.label }}
|
||||
</label>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="modal-card-foot p-5">
|
||||
<div class="field is-grouped" style="width: 100%">
|
||||
<div class="control is-expanded">
|
||||
<button
|
||||
ref="confirmBtn"
|
||||
class="button is-fullwidth"
|
||||
:class="confirm_button_color"
|
||||
@click="handleConfirm"
|
||||
>
|
||||
{{ confirm_button_label }}
|
||||
</button>
|
||||
</div>
|
||||
<div class="control is-expanded">
|
||||
<button
|
||||
class="button is-success is-fullwidth"
|
||||
:class="cancel_button_color"
|
||||
@click="cancel"
|
||||
>
|
||||
{{ cancel_button_label }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { disableOpacity, enableOpacity } from '~/utils';
|
||||
|
||||
const props = defineProps({
|
||||
visible: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: 'Confirm',
|
||||
},
|
||||
message: {
|
||||
type: String,
|
||||
default: 'Are you sure?',
|
||||
},
|
||||
html_message: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
options: {
|
||||
type: Array as () => Array<{ key: string; label: string; checked?: boolean }>,
|
||||
default: () => [],
|
||||
},
|
||||
confirm_button_label: {
|
||||
type: String,
|
||||
default: 'Confirm',
|
||||
},
|
||||
cancel_button_label: {
|
||||
type: String,
|
||||
default: 'Cancel',
|
||||
},
|
||||
confirm_button_color: {
|
||||
type: String,
|
||||
default: 'is-danger',
|
||||
},
|
||||
cancel_button_color: {
|
||||
type: String,
|
||||
default: 'is-success',
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'confirm', options: Record<string, boolean>): void;
|
||||
(e: 'cancel'): void;
|
||||
}>();
|
||||
|
||||
const confirmBtn = ref<HTMLButtonElement | null>(null);
|
||||
const selected = reactive<Record<string, boolean>>({});
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
async (visible) => {
|
||||
if (!visible) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (props.options) {
|
||||
for (const opt of props.options) {
|
||||
selected[opt.key] ??= false;
|
||||
}
|
||||
}
|
||||
|
||||
await nextTick();
|
||||
confirmBtn.value?.focus();
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
|
||||
const handleConfirm = () => emit('confirm', { ...selected });
|
||||
const cancel = () => emit('cancel');
|
||||
|
||||
onMounted(() => disableOpacity());
|
||||
onBeforeUnmount(() => enableOpacity());
|
||||
</script>
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
<template>
|
||||
<div class="message is-warning" v-if="status !== 'connected'">
|
||||
<div class="message-body">
|
||||
<span class="icon"
|
||||
><i
|
||||
class="fas"
|
||||
:class="{
|
||||
'fa-info-circle': status === 'disconnected',
|
||||
'fa-spinner fa-pulse': status === 'connecting',
|
||||
}"
|
||||
/></span>
|
||||
<span v-if="status === 'disconnected'">
|
||||
Websocket connection lost,
|
||||
<NuxtLink class="is-bold" @click.prevent="() => $emit('reconnect')">Click here </NuxtLink>
|
||||
to reconnect.
|
||||
</span>
|
||||
<span v-else-if="status === 'connecting'"> Connecting to websocket server... </span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { connectionStatus } from '~/stores/SocketStore';
|
||||
defineProps<{ status: connectionStatus }>();
|
||||
defineEmits<{ (e: 'reconnect'): void }>();
|
||||
</script>
|
||||
|
|
@ -1,128 +1,140 @@
|
|||
<template>
|
||||
<main class="columns mt-2 is-multiline">
|
||||
<div class="column is-12">
|
||||
<form autocomplete="off" id="dlFieldForm" @submit.prevent="checkInfo">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-header-title is-text-overflow is-block">
|
||||
<span class="icon-text">
|
||||
<span class="icon"
|
||||
><i class="fa-solid" :class="reference ? 'fa-cog' : 'fa-plus'"
|
||||
/></span>
|
||||
<span>{{ reference ? 'Edit' : 'Add' }}</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="card-header-icon" v-if="reference">
|
||||
<button type="button" @click="showImport = !showImport">
|
||||
<span class="icon"
|
||||
><i
|
||||
class="fa-solid"
|
||||
:class="{
|
||||
'fa-arrow-down': !showImport,
|
||||
'fa-arrow-up': showImport,
|
||||
}"
|
||||
/></span>
|
||||
<span>{{ showImport ? 'Hide' : 'Show' }} import</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-content">
|
||||
<div class="columns is-multiline">
|
||||
<div class="column is-12" v-if="showImport || !reference">
|
||||
<label class="label is-inline" for="import_string">
|
||||
<span class="icon"><i class="fa-solid fa-file-import" /></span>
|
||||
Import string
|
||||
</label>
|
||||
|
||||
<div class="field has-addons">
|
||||
<div class="control is-expanded">
|
||||
<input
|
||||
type="text"
|
||||
class="input"
|
||||
id="import_string"
|
||||
v-model="import_string"
|
||||
autocomplete="off"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="control">
|
||||
<button
|
||||
class="button is-primary"
|
||||
:disabled="!import_string"
|
||||
<form id="dlFieldForm" autocomplete="off" class="space-y-6" @submit.prevent="checkInfo">
|
||||
<div class="grid gap-4 md:grid-cols-2">
|
||||
<div v-if="reference" class="md:col-span-2 flex justify-end">
|
||||
<UButton
|
||||
type="button"
|
||||
@click="importItem"
|
||||
color="neutral"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
:icon="showImport ? 'i-lucide-chevron-up' : 'i-lucide-chevron-down'"
|
||||
@click="showImport = !showImport"
|
||||
>
|
||||
<span class="icon"><i class="fa-solid fa-add" /></span>
|
||||
<span>Import</span>
|
||||
</button>
|
||||
{{ showImport ? 'Hide' : 'Show' }} import
|
||||
</UButton>
|
||||
</div>
|
||||
|
||||
<template v-if="showImport || !reference">
|
||||
<UFormField class="w-full md:col-span-2" :ui="fieldUi">
|
||||
<template #label>
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<UIcon name="i-lucide-import" class="size-4 text-toned" />
|
||||
<span class="font-semibold text-default">Import string</span>
|
||||
</div>
|
||||
<span class="help">
|
||||
<span class="icon"><i class="fa-solid fa-info" /></span>
|
||||
</template>
|
||||
|
||||
<template #description>
|
||||
<span>You can use this field to populate the data, using shared string.</span>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="column is-6 is-12-mobile">
|
||||
<div class="field">
|
||||
<label class="label">
|
||||
<span class="icon"><i class="fas fa-font" /></span>
|
||||
<span>Field Name</span>
|
||||
</label>
|
||||
<input type="text" v-model="form.name" class="input" :disabled="addInProgress" />
|
||||
<span class="help is-bold">
|
||||
The name of the field, it will be shown in the UI.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-6 is-12-mobile">
|
||||
<div class="field">
|
||||
<label class="label">
|
||||
<span class="icon"><i class="fas fa-info-circle" /></span>
|
||||
<span>Field Description</span>
|
||||
</label>
|
||||
<input
|
||||
<div class="flex flex-col gap-2 sm:flex-row">
|
||||
<UInput
|
||||
id="import_string"
|
||||
v-model="importString"
|
||||
type="text"
|
||||
v-model="form.description"
|
||||
class="input"
|
||||
autocomplete="off"
|
||||
size="lg"
|
||||
class="w-full"
|
||||
:ui="inputUi"
|
||||
/>
|
||||
|
||||
<UButton
|
||||
type="button"
|
||||
color="primary"
|
||||
icon="i-lucide-import"
|
||||
size="lg"
|
||||
class="justify-center sm:min-w-28"
|
||||
:disabled="!importString"
|
||||
@click="() => void importItem()"
|
||||
>
|
||||
Import
|
||||
</UButton>
|
||||
</div>
|
||||
</UFormField>
|
||||
</template>
|
||||
|
||||
<UFormField class="w-full" :ui="fieldUi">
|
||||
<template #label>
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<UIcon name="i-lucide-type" class="size-4 text-toned" />
|
||||
<span class="font-semibold text-default">Field Name</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #description>
|
||||
<span>The name of the field, it will be shown in the UI.</span>
|
||||
</template>
|
||||
|
||||
<UInput
|
||||
v-model="form.name"
|
||||
type="text"
|
||||
size="lg"
|
||||
:disabled="addInProgress"
|
||||
class="w-full"
|
||||
:ui="inputUi"
|
||||
/>
|
||||
<span class="help is-bold">
|
||||
A short description of the field, it will be shown in the UI.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</UFormField>
|
||||
|
||||
<div class="column is-6 is-12-mobile">
|
||||
<div class="field">
|
||||
<label class="label">
|
||||
<span class="icon"><i class="fas fa-cog" /></span>
|
||||
<span>Field Type</span>
|
||||
</label>
|
||||
<div class="select is-fullwidth" :class="{ 'is-loading': addInProgress }">
|
||||
<select v-model="form.kind" :disabled="addInProgress" class="is-capitalized">
|
||||
<option
|
||||
v-for="kind in fieldTypes"
|
||||
:key="`kind-${kind}`"
|
||||
:value="kind"
|
||||
v-text="kind"
|
||||
<UFormField class="w-full" :ui="fieldUi">
|
||||
<template #label>
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<UIcon name="i-lucide-message-square-text" class="size-4 text-toned" />
|
||||
<span class="font-semibold text-default">Field Description</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #description>
|
||||
<span>A short description of the field, it will be shown in the UI.</span>
|
||||
</template>
|
||||
|
||||
<UInput
|
||||
v-model="form.description"
|
||||
type="text"
|
||||
size="lg"
|
||||
:disabled="addInProgress"
|
||||
class="w-full"
|
||||
:ui="inputUi"
|
||||
/>
|
||||
</select>
|
||||
</div>
|
||||
<span class="help is-bold">
|
||||
Field Type. String is a single line input, Text is a multi-line input, Bool is a
|
||||
checkbox.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</UFormField>
|
||||
|
||||
<UFormField class="w-full" :ui="fieldUi">
|
||||
<template #label>
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<UIcon name="i-lucide-shapes" class="size-4 text-toned" />
|
||||
<span class="font-semibold text-default">Field Type</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #description>
|
||||
<span>
|
||||
Field Type. String is a single line, Text is a multi-line, Bool is a checkbox.
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<USelect
|
||||
v-model="form.kind"
|
||||
:items="fieldTypeItems"
|
||||
size="lg"
|
||||
class="w-full"
|
||||
:disabled="addInProgress"
|
||||
:ui="selectUi"
|
||||
/>
|
||||
</UFormField>
|
||||
|
||||
<UFormField class="w-full" :ui="fieldUi">
|
||||
<template #label>
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<UIcon name="i-lucide-terminal" class="size-4 text-toned" />
|
||||
<span class="font-semibold text-default">Associated yt-dlp option</span>
|
||||
</div>
|
||||
</template>
|
||||
<template #description>
|
||||
<span>
|
||||
The long form of yt-dlp option name, e.g. <code>--no-overwrites</code> not
|
||||
<code>-w</code>.
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<div class="column is-6 is-12-mobile">
|
||||
<div class="field">
|
||||
<label class="label">
|
||||
<span class="icon"><i class="fas fa-terminal" /></span>
|
||||
<span>Associated yt-dlp option</span>
|
||||
</label>
|
||||
<InputAutocomplete
|
||||
v-model="form.field"
|
||||
:options="ytDlpOptions"
|
||||
|
|
@ -131,92 +143,107 @@
|
|||
:multiple="false"
|
||||
:openOnFocus="true"
|
||||
/>
|
||||
<span class="help is-bold">
|
||||
The long form of yt-dlp option name, e.g. <code>--no-overwrites</code> not
|
||||
<code>-w</code>.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</UFormField>
|
||||
|
||||
<div class="column is-6 is-12-mobile">
|
||||
<div class="field">
|
||||
<label class="label">
|
||||
<span class="icon"><i class="fas fa-sort-numeric-up" /></span>
|
||||
<span>Field Order</span>
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
<UFormField class="w-full" :ui="fieldUi">
|
||||
<template #label>
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<UIcon name="i-lucide-list-ordered" class="size-4 text-toned" />
|
||||
<span class="font-semibold text-default">Field Order</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #description>
|
||||
<span>
|
||||
The order of the field, used to sort the fields in the UI. Lower numbers will appear
|
||||
first.
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<UInput
|
||||
v-model.number="form.order"
|
||||
class="input"
|
||||
type="number"
|
||||
min="1"
|
||||
size="lg"
|
||||
:disabled="addInProgress"
|
||||
class="w-full"
|
||||
:ui="inputUi"
|
||||
/>
|
||||
<span class="help is-bold">
|
||||
The order of the field, used to sort the fields in the UI. Lower numbers will
|
||||
appear first.
|
||||
</span>
|
||||
</UFormField>
|
||||
|
||||
<UFormField class="w-full" :ui="fieldUi">
|
||||
<template #label>
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<UIcon name="i-lucide-image" class="size-4 text-toned" />
|
||||
<span class="font-semibold text-default">Field Icon</span>
|
||||
</div>
|
||||
</template>
|
||||
<template #description>
|
||||
<span>
|
||||
The icon of the field must use a
|
||||
<a
|
||||
href="https://icones.js.org/collection/lucide"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
class="text-primary hover:underline"
|
||||
>
|
||||
Lucide icon
|
||||
</a>
|
||||
name in the <code>i-lucide-*</code> format, e.g. <code>i-lucide-image</code>. Leave
|
||||
empty for no icon.
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<UInput
|
||||
v-model="form.icon"
|
||||
type="text"
|
||||
size="lg"
|
||||
:disabled="addInProgress"
|
||||
class="w-full"
|
||||
:ui="inputUi"
|
||||
/>
|
||||
</UFormField>
|
||||
</div>
|
||||
|
||||
<div class="column is-6 is-12-mobile">
|
||||
<div class="field">
|
||||
<label class="label">
|
||||
<span class="icon"><i class="fas fa-image" /></span>
|
||||
<span>Field Icon</span>
|
||||
</label>
|
||||
<input type="text" v-model="form.icon" class="input" :disabled="addInProgress" />
|
||||
<span class="help is-bold">
|
||||
The icon of the field, must be from
|
||||
<NuxtLink href="https://fontawesome.com/search?ic=free&o=r" target="_blank">
|
||||
font-awesome</NuxtLink
|
||||
<div
|
||||
class="flex flex-col-reverse gap-2 border-t border-default pt-5 sm:flex-row sm:justify-end"
|
||||
>
|
||||
icon. e.g. <code>fa-solid fa-image</code>. Leave empty for no icon.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-footer mt-auto">
|
||||
<div class="card-footer-item">
|
||||
<div class="card-footer-item">
|
||||
<button
|
||||
class="button is-fullwidth is-primary"
|
||||
:disabled="addInProgress"
|
||||
type="submit"
|
||||
:class="{ 'is-loading': addInProgress }"
|
||||
form="dlFieldForm"
|
||||
>
|
||||
<span class="icon"><i class="fa-solid fa-save" /></span>
|
||||
<span>Save</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="card-footer-item">
|
||||
<button
|
||||
class="button is-fullwidth is-danger"
|
||||
@click="emitter('cancel')"
|
||||
:disabled="addInProgress"
|
||||
<UButton
|
||||
type="button"
|
||||
color="neutral"
|
||||
variant="outline"
|
||||
size="lg"
|
||||
icon="i-lucide-x"
|
||||
:disabled="addInProgress"
|
||||
class="justify-center"
|
||||
@click="emitter('cancel')"
|
||||
>
|
||||
<span class="icon"><i class="fa-solid fa-times" /></span>
|
||||
<span>Cancel</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Cancel
|
||||
</UButton>
|
||||
|
||||
<UButton
|
||||
type="submit"
|
||||
color="primary"
|
||||
size="lg"
|
||||
icon="i-lucide-save"
|
||||
:disabled="addInProgress"
|
||||
:loading="addInProgress"
|
||||
class="justify-center"
|
||||
>
|
||||
Save
|
||||
</UButton>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useStorage } from '@vueuse/core';
|
||||
import InputAutocomplete from '~/components/InputAutocomplete.vue';
|
||||
import { useConfirm } from '~/composables/useConfirm';
|
||||
import type { ImportedItem } from '~/types';
|
||||
import type { AutoCompleteOptions } from '~/types/autocomplete';
|
||||
import type { DLField } from '~/types/dl_fields';
|
||||
import type { ImportedItem } from '~/types';
|
||||
import { decode } from '~/utils';
|
||||
import { useConfirm } from '~/composables/useConfirm';
|
||||
|
||||
const emitter = defineEmits<{
|
||||
(e: 'cancel'): void;
|
||||
|
|
@ -234,35 +261,35 @@ const box = useConfirm();
|
|||
const config = useConfigStore();
|
||||
|
||||
const fieldTypes = ['string', 'text', 'bool'] as const;
|
||||
|
||||
const form = reactive<DLField>(JSON.parse(JSON.stringify(props.item)));
|
||||
const fieldTypeItems = [...fieldTypes];
|
||||
const form = reactive<DLField>(normalizeField(props.item));
|
||||
const ytDlpOptions = ref<AutoCompleteOptions>([]);
|
||||
const showImport = useStorage('showDlFieldsImport', false);
|
||||
const import_string = ref('');
|
||||
const importString = ref('');
|
||||
|
||||
if (!form.extras) {
|
||||
form.extras = {};
|
||||
}
|
||||
const fieldUi = {
|
||||
label: 'font-semibold text-default',
|
||||
container: 'space-y-2',
|
||||
description: 'text-sm text-toned',
|
||||
hint: 'text-sm text-toned',
|
||||
};
|
||||
|
||||
if (!form.kind) {
|
||||
form.kind = 'string';
|
||||
}
|
||||
const inputUi = {
|
||||
root: 'w-full',
|
||||
base: 'w-full bg-elevated/60 ring-default focus-visible:ring-primary',
|
||||
};
|
||||
|
||||
if (!form.description) {
|
||||
form.description = '';
|
||||
}
|
||||
const selectUi = {
|
||||
base: 'w-full bg-elevated/60 ring-default focus-visible:ring-primary',
|
||||
};
|
||||
|
||||
if (!form.value) {
|
||||
form.value = '';
|
||||
}
|
||||
|
||||
if (!form.icon) {
|
||||
form.icon = '';
|
||||
}
|
||||
|
||||
if (!form.order) {
|
||||
form.order = 1;
|
||||
}
|
||||
watch(
|
||||
() => props.item,
|
||||
(value) => {
|
||||
Object.assign(form, normalizeField(value));
|
||||
},
|
||||
{ deep: true },
|
||||
);
|
||||
|
||||
watch(
|
||||
() => config.ytdlp_options,
|
||||
|
|
@ -277,15 +304,42 @@ watch(
|
|||
{ immediate: true },
|
||||
);
|
||||
|
||||
function normalizeField(value?: Partial<DLField> | null): DLField {
|
||||
const item = JSON.parse(JSON.stringify(value || {})) as Partial<DLField>;
|
||||
const normalized: Partial<DLField> = {
|
||||
...item,
|
||||
description: item.description ?? '',
|
||||
kind: item.kind ?? 'string',
|
||||
value: item.value ?? '',
|
||||
icon: item.icon ?? '',
|
||||
order: item.order ?? 1,
|
||||
extras: item.extras ? { ...item.extras } : {},
|
||||
};
|
||||
|
||||
return Object.assign(
|
||||
{
|
||||
name: '',
|
||||
description: '',
|
||||
kind: 'string',
|
||||
field: '',
|
||||
value: '',
|
||||
icon: '',
|
||||
order: 1,
|
||||
extras: {},
|
||||
},
|
||||
normalized,
|
||||
) as DLField;
|
||||
}
|
||||
|
||||
const importItem = async (): Promise<void> => {
|
||||
const val = import_string.value.trim();
|
||||
if (!val) {
|
||||
const value = importString.value.trim();
|
||||
if (!value) {
|
||||
toast.error('The import string is required.');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const item = decode(val) as DLField & ImportedItem;
|
||||
const item = decode(value) as DLField & ImportedItem;
|
||||
|
||||
if (!item._type || item._type !== 'dl_field') {
|
||||
toast.error(
|
||||
|
|
@ -301,50 +355,16 @@ const importItem = async (): Promise<void> => {
|
|||
return;
|
||||
}
|
||||
|
||||
if (item.name) {
|
||||
form.name = item.name;
|
||||
}
|
||||
|
||||
if (item.field) {
|
||||
form.field = item.field;
|
||||
}
|
||||
|
||||
if (item.description !== undefined) {
|
||||
form.description = item.description;
|
||||
}
|
||||
|
||||
if (item.kind) {
|
||||
form.kind = item.kind;
|
||||
}
|
||||
|
||||
if (item.icon !== undefined) {
|
||||
form.icon = item.icon;
|
||||
}
|
||||
|
||||
if (item.order !== undefined) {
|
||||
form.order = item.order;
|
||||
}
|
||||
|
||||
if (item.value !== undefined) {
|
||||
form.value = item.value;
|
||||
}
|
||||
|
||||
if (item.extras) {
|
||||
form.extras = { ...item.extras };
|
||||
}
|
||||
|
||||
import_string.value = '';
|
||||
Object.assign(form, normalizeField(item));
|
||||
importString.value = '';
|
||||
showImport.value = false;
|
||||
} catch (e: any) {
|
||||
console.error(e);
|
||||
toast.error(`Failed to parse import string. ${e.message}`);
|
||||
} catch (error: any) {
|
||||
toast.error(`Failed to parse import string. ${error.message}`);
|
||||
}
|
||||
};
|
||||
|
||||
const checkInfo = (): void => {
|
||||
const required: (keyof DLField)[] = ['name', 'field', 'kind', 'description'];
|
||||
|
||||
for (const key of required) {
|
||||
for (const key of ['name', 'field', 'kind', 'description'] as const) {
|
||||
if (!form[key]) {
|
||||
toast.error(`The ${key} field is required.`);
|
||||
return;
|
||||
|
|
@ -367,13 +387,14 @@ const checkInfo = (): void => {
|
|||
}
|
||||
|
||||
const copy: DLField = JSON.parse(JSON.stringify(form));
|
||||
const entries = copy as Record<string, unknown>;
|
||||
|
||||
const entries = copy as unknown as Record<string, unknown>;
|
||||
for (const key in entries) {
|
||||
if ('string' !== typeof entries[key]) {
|
||||
continue;
|
||||
}
|
||||
entries[key] = entries[key].trim();
|
||||
|
||||
entries[key] = String(entries[key]).trim();
|
||||
}
|
||||
|
||||
emitter('submit', { reference: toRaw(props.reference), item: toRaw(copy) });
|
||||
|
|
|
|||
|
|
@ -1,339 +0,0 @@
|
|||
<template>
|
||||
<form class="modal is-active" @submit.prevent="updateItems">
|
||||
<div class="modal-background" @click="cancel" />
|
||||
<div class="modal-card" style="min-width: calc(100vw - 30vw)">
|
||||
<header class="modal-card-head">
|
||||
<p class="modal-card-title">Manage Custom Fields</p>
|
||||
<button type="button" class="delete" aria-label="close" @click="cancel" />
|
||||
</header>
|
||||
<section class="modal-card-body">
|
||||
<div class="columns is-multiline">
|
||||
<div class="column is-12 is-clearfix is-unselectable">
|
||||
<span class="title is-4">
|
||||
<span class="icon-text">
|
||||
<span class="icon"><i class="fas fa-plus" /></span>
|
||||
<span>Custom Fields</span>
|
||||
</span>
|
||||
</span>
|
||||
<div class="is-pulled-right">
|
||||
<div class="field is-grouped">
|
||||
<p class="control">
|
||||
<button
|
||||
type="button"
|
||||
class="button is-primary"
|
||||
@click="addNewField"
|
||||
:disabled="isLoading"
|
||||
>
|
||||
<span class="icon"><i class="fas fa-add" /></span>
|
||||
</button>
|
||||
</p>
|
||||
<p class="control">
|
||||
<button
|
||||
type="button"
|
||||
class="button is-info"
|
||||
@click="loadContent()"
|
||||
:class="{ 'is-loading': isLoading }"
|
||||
:disabled="isLoading"
|
||||
>
|
||||
<span class="icon"><i class="fas fa-refresh" /></span>
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="is-hidden-mobile">
|
||||
<span class="subtitle"
|
||||
>The idea behind the custom fields is to allow you to add new fields to the download
|
||||
form to automate some of the yt-dlp options.</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column is-12" v-for="(item, index) in sortedDLFields" :key="item.id || index">
|
||||
<div class="box">
|
||||
<div class="columns is-multiline">
|
||||
<div class="column is-12 is-12-mobile">
|
||||
<NuxtLink
|
||||
@click="deleteField(index)"
|
||||
:disabled="isLoading"
|
||||
class="has-text-danger"
|
||||
>
|
||||
<span class="icon"><i class="fas fa-trash" /></span>
|
||||
<span>Delete Field</span>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
|
||||
<div class="column is-6 is-12-mobile">
|
||||
<div class="field">
|
||||
<label class="label">
|
||||
<span class="icon"><i class="fas fa-cog" /></span>
|
||||
<span>Field Type</span>
|
||||
</label>
|
||||
<div class="select is-fullwidth" :class="{ 'is-loading': isLoading }">
|
||||
<select v-model="item.kind" :disabled="isLoading" class="is-capitalized">
|
||||
<option
|
||||
v-for="kind in Object.values(FieldTypes)"
|
||||
:key="`kind-${kind}`"
|
||||
:value="kind"
|
||||
v-text="kind"
|
||||
/>
|
||||
</select>
|
||||
</div>
|
||||
<span class="help is-bold">
|
||||
Field Type. String is a single line input, Text is a multi-line input, Bool is
|
||||
a checkbox.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-6 is-12-mobile">
|
||||
<div class="field">
|
||||
<label class="label">
|
||||
<span class="icon"><i class="fas fa-font" /></span>
|
||||
<span>Field Name</span>
|
||||
</label>
|
||||
<input type="text" v-model="item.name" class="input" :disabled="isLoading" />
|
||||
<span class="help is-bold">
|
||||
The name of the field, it will be shown in the UI.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-6 is-12-mobile">
|
||||
<div class="field">
|
||||
<label class="label">
|
||||
<span class="icon"><i class="fas fa-terminal" /></span>
|
||||
<span>Associated yt-dlp option</span>
|
||||
</label>
|
||||
<InputAutocomplete
|
||||
v-model="item.field"
|
||||
:options="ytDlpOptions"
|
||||
:disabled="isLoading"
|
||||
placeholder="Type or select a yt-dlp option"
|
||||
:multiple="false"
|
||||
:openOnFocus="true"
|
||||
/>
|
||||
<span class="help is-bold">
|
||||
The long form of yt-dlp option name, e.g. <code>--no-overwrites</code> not
|
||||
<code>-w</code>.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-6 is-12-mobile">
|
||||
<div class="field">
|
||||
<label class="label">
|
||||
<span class="icon"><i class="fas fa-info-circle" /></span>
|
||||
<span>Field Description</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
v-model="item.description"
|
||||
class="input"
|
||||
:disabled="isLoading"
|
||||
/>
|
||||
<span class="help is-bold">
|
||||
A short description of the field, it will be shown in the UI.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column is-6 is-12-mobile">
|
||||
<div class="field">
|
||||
<label class="label">
|
||||
<span class="icon"><i class="fas fa-sort-numeric-up" /></span>
|
||||
<span>Field Order</span>
|
||||
</label>
|
||||
<input type="number" v-model="item.order" class="input" :disabled="isLoading" />
|
||||
<span class="help is-bold">
|
||||
The order of the field, used to sort the fields in the UI. Lower numbers will
|
||||
appear first.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column is-6 is-12-mobile">
|
||||
<div class="field">
|
||||
<label class="label">
|
||||
<span class="icon"><i class="fas fa-image" /></span>
|
||||
<span>Field Icon</span>
|
||||
</label>
|
||||
<input type="text" v-model="item.icon" class="input" :disabled="isLoading" />
|
||||
<span class="help is-bold">
|
||||
The icon of the field, must be from
|
||||
<NuxtLink href="https://fontawesome.com/search?ic=free&o=r" target="_blank">
|
||||
font-awesome</NuxtLink
|
||||
>
|
||||
icon. e.g. <code>fa-solid fa-image</code>. Leave empty for no icon.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-12">
|
||||
<Message class="is-warning" v-if="items.length === 0">
|
||||
<span class="icon"><i class="fas fa-exclamation-circle" /></span>
|
||||
<span>No custom fields found, you can add new fields using the button above.</span>
|
||||
</Message>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<footer class="modal-card-foot p-5">
|
||||
<div class="field is-grouped" style="width: 100%">
|
||||
<div class="control is-expanded">
|
||||
<button type="submit" class="button is-fullwidth is-primary" :disabled="isLoading">
|
||||
<span class="icon"><i class="fas fa-save" /></span>
|
||||
<span>Save</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="control is-expanded">
|
||||
<button
|
||||
type="button"
|
||||
class="button is-fullwidth is-danger"
|
||||
@click="cancel"
|
||||
:disabled="isLoading"
|
||||
>
|
||||
<span class="icon"><i class="fas fa-times" /></span>
|
||||
<span>Cancel</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import InputAutocomplete from '~/components/InputAutocomplete.vue';
|
||||
import { disableOpacity, enableOpacity } from '~/utils';
|
||||
|
||||
import type { DLField } from '~/types/dl_fields';
|
||||
import type { AutoCompleteOptions } from '~/types/autocomplete';
|
||||
|
||||
const emitter = defineEmits<{ (e: 'cancel'): void }>();
|
||||
|
||||
const toast = useNotification();
|
||||
|
||||
const isLoading = ref<boolean>(false);
|
||||
const items = ref<DLField[]>([]);
|
||||
const config = useConfigStore();
|
||||
const ytDlpOptions = ref<AutoCompleteOptions>([]);
|
||||
|
||||
const FieldTypes = {
|
||||
STRING: 'string',
|
||||
TEXT: 'text',
|
||||
BOOL: 'bool',
|
||||
};
|
||||
|
||||
const cancel = () => emitter('cancel');
|
||||
|
||||
const loadContent = async () => {
|
||||
try {
|
||||
isLoading.value = true;
|
||||
const response = await request('/api/dl_fields');
|
||||
|
||||
const data = await response.json();
|
||||
if (0 === data.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
items.value = data;
|
||||
} catch (e: any) {
|
||||
console.error(e);
|
||||
toast.error('Failed to fetch page content.');
|
||||
} finally {
|
||||
isLoading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const updateItems = async () => {
|
||||
for (const item of items.value) {
|
||||
if (validateItem(item, items.value.indexOf(item) + 1)) {
|
||||
continue;
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
isLoading.value = true;
|
||||
const resp = await request('/api/dl_fields', {
|
||||
method: 'PUT',
|
||||
body: JSON.stringify(items.value),
|
||||
});
|
||||
|
||||
if (!resp.ok) {
|
||||
const error = await resp.json();
|
||||
toast.error(`Failed to update fields: ${error.error || 'Unknown error'}`);
|
||||
return;
|
||||
}
|
||||
|
||||
toast.success('Fields updated successfully.');
|
||||
emitter('cancel');
|
||||
} finally {
|
||||
isLoading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const addNewField = () =>
|
||||
items.value.push({
|
||||
name: '',
|
||||
description: '',
|
||||
kind: 'string',
|
||||
field: '',
|
||||
value: '',
|
||||
icon: '',
|
||||
order: items.value.reduce((max, item) => Math.max(max, item.order || 1), 0) + 1,
|
||||
extras: {},
|
||||
});
|
||||
|
||||
const deleteField = (index: number) => items.value.splice(index, 1);
|
||||
|
||||
const validateItem = (item: DLField, index: number): boolean => {
|
||||
const requiredFields = ['name', 'field', 'kind', 'description'];
|
||||
|
||||
for (const field of requiredFields) {
|
||||
if (!item[field as keyof DLField]) {
|
||||
toast.error(`${item.name || index}: Field ${field} is required.`);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
if (!item.order || item.order < 1) {
|
||||
toast.error(`${item.name || index}: Order must be a positive number.`);
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!Object.values(FieldTypes).includes(item.kind)) {
|
||||
toast.error(`${item.name || index}: Invalid field type: ${item.kind}`);
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!/^--[a-zA-Z0-9-]+$/.test(item.field)) {
|
||||
toast.error(
|
||||
`${item.name || index}: Invalid field format, it must start with '--' and contain no spaces.`,
|
||||
);
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
};
|
||||
|
||||
// eslint-disable-next-line vue/no-side-effects-in-computed-properties
|
||||
const sortedDLFields = computed(() => items.value.sort((a, b) => (a.order || 0) - (b.order || 0)));
|
||||
|
||||
watch(
|
||||
() => config.ytdlp_options,
|
||||
(newOptions) =>
|
||||
(ytDlpOptions.value = newOptions
|
||||
.filter((opt) => !opt.ignored)
|
||||
.flatMap((opt) =>
|
||||
opt.flags
|
||||
.filter((flag) => flag.startsWith('--'))
|
||||
.map((flag) => ({ value: flag, description: opt.description || '' })),
|
||||
)),
|
||||
{ immediate: true },
|
||||
);
|
||||
onMounted(async () => {
|
||||
disableOpacity();
|
||||
await loadContent();
|
||||
});
|
||||
onBeforeUnmount(() => enableOpacity());
|
||||
</script>
|
||||
|
|
@ -1,65 +1,120 @@
|
|||
<template>
|
||||
<div class="field">
|
||||
<label :for="`dlf-${id}`" class="label is-unselectable">
|
||||
<div v-if="'bool' === type && compact" class="w-full space-y-1.5">
|
||||
<div
|
||||
class="flex min-h-11 items-start justify-between gap-3 rounded-md border border-default bg-default/80 px-3 py-2"
|
||||
>
|
||||
<div class="min-w-0 flex-1">
|
||||
<div class="inline-flex min-w-0 items-center gap-2 text-sm font-semibold text-default">
|
||||
<UIcon v-if="resolvedIcon" :name="resolvedIcon" class="size-4 shrink-0 text-toned" />
|
||||
<UTooltip :text="field ? `yt-dlp option: ${field}` : undefined">
|
||||
<span class="truncate" :class="{ 'has-tooltip': field }">
|
||||
{{ label }}
|
||||
</span>
|
||||
</UTooltip>
|
||||
</div>
|
||||
|
||||
<div v-if="$slots.description" class="mt-0.5 text-xs text-toned">
|
||||
<slot name="description" />
|
||||
</div>
|
||||
|
||||
<p v-else-if="description" class="mt-0.5 text-xs text-toned">
|
||||
{{ description }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<USwitch
|
||||
:id="`dlf-${id}`"
|
||||
v-model="boolModel"
|
||||
:disabled="disabled"
|
||||
color="success"
|
||||
:label="boolModel ? 'Yes' : 'No'"
|
||||
size="lg"
|
||||
class="shrink-0"
|
||||
:ui="{ root: 'items-center gap-2', wrapper: 'ms-0 text-sm' }"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div v-if="$slots.help" class="text-xs text-toned">
|
||||
<slot name="help" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<UFormField
|
||||
v-else
|
||||
:name="String(id)"
|
||||
:description="$slots.description ? undefined : description"
|
||||
class="w-full"
|
||||
:ui="fieldUi"
|
||||
>
|
||||
<template #label>
|
||||
<template v-if="$slots.title">
|
||||
<slot name="title"></slot>
|
||||
<slot name="title" />
|
||||
</template>
|
||||
<template v-else>
|
||||
<span v-if="icon" class="icon"><i :class="icon" /></span>
|
||||
<span
|
||||
v-tooltip="field ? `yt-dlp option: ${field}` : null"
|
||||
:class="{ 'has-tooltip': field }"
|
||||
>{{ label }}</span
|
||||
>
|
||||
</template>
|
||||
</label>
|
||||
<div class="control is-expanded" v-if="'string' === type">
|
||||
<input
|
||||
:id="`dlf-${id}`"
|
||||
:type="type"
|
||||
class="input"
|
||||
v-model="model"
|
||||
:placeholder="placeholder"
|
||||
:disabled="disabled"
|
||||
/>
|
||||
</div>
|
||||
<div class="control is-expanded" v-if="'text' === type">
|
||||
<textarea
|
||||
class="textarea is-pre"
|
||||
:id="`dlf-${id}`"
|
||||
v-model="model"
|
||||
:placeholder="placeholder"
|
||||
:disabled="disabled"
|
||||
></textarea>
|
||||
</div>
|
||||
<div class="control is-expanded" v-if="'bool' === type">
|
||||
<input
|
||||
type="checkbox"
|
||||
:id="`dlf-${id}`"
|
||||
v-model="model"
|
||||
class="switch is-success"
|
||||
:disabled="disabled"
|
||||
/>
|
||||
<label :for="`dlf-${id}`" class="label is-unselectable">
|
||||
{{ model ? 'Yes' : 'No' }}
|
||||
</label>
|
||||
</div>
|
||||
<span class="help is-bold is-unselectable">
|
||||
<template v-if="description">
|
||||
<span class="icon"><i class="fa-solid fa-info" /></span>
|
||||
<span v-text="description" />
|
||||
</template>
|
||||
<template v-if="$slots.help">
|
||||
<slot name="help"></slot>
|
||||
</template>
|
||||
<span class="inline-flex items-center gap-2 font-semibold">
|
||||
<UIcon v-if="resolvedIcon" :name="resolvedIcon" class="size-4 text-toned" />
|
||||
<UTooltip :text="field ? `yt-dlp option: ${field}` : undefined">
|
||||
<span :class="{ 'has-tooltip': field }">
|
||||
{{ label }}
|
||||
</span>
|
||||
</div>
|
||||
</UTooltip>
|
||||
</span>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<UInput
|
||||
v-if="'string' === type"
|
||||
:id="`dlf-${id}`"
|
||||
v-model="stringModel"
|
||||
:placeholder="placeholder"
|
||||
:disabled="disabled"
|
||||
size="lg"
|
||||
class="w-full"
|
||||
:ui="{ root: 'w-full', base: 'w-full bg-default/90' }"
|
||||
/>
|
||||
|
||||
<UTextarea
|
||||
v-else-if="'text' === type"
|
||||
:id="`dlf-${id}`"
|
||||
v-model="stringModel"
|
||||
:placeholder="placeholder"
|
||||
:disabled="disabled"
|
||||
autoresize
|
||||
:rows="4"
|
||||
size="lg"
|
||||
class="w-full"
|
||||
:ui="{
|
||||
root: 'w-full',
|
||||
base: 'w-full bg-elevated/60 font-mono text-sm whitespace-pre-wrap ring-default',
|
||||
}"
|
||||
/>
|
||||
|
||||
<USwitch
|
||||
v-else-if="'bool' === type"
|
||||
:id="`dlf-${id}`"
|
||||
v-model="boolModel"
|
||||
:disabled="disabled"
|
||||
color="success"
|
||||
:label="boolModel ? 'Yes' : 'No'"
|
||||
size="lg"
|
||||
class="w-full"
|
||||
:ui="{ root: 'w-full items-start justify-between gap-4', wrapper: 'ms-0 flex-1 text-sm' }"
|
||||
/>
|
||||
|
||||
<template v-if="$slots.description" #description>
|
||||
<slot name="description" />
|
||||
</template>
|
||||
|
||||
<template v-if="$slots.help" #help>
|
||||
<slot name="help" />
|
||||
</template>
|
||||
</UFormField>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { ModelRef } from 'vue';
|
||||
import type { DLFieldType } from '~/types/dl_fields';
|
||||
defineProps<{
|
||||
|
||||
const props = defineProps<{
|
||||
id: number | string;
|
||||
label: string;
|
||||
field?: string;
|
||||
|
|
@ -68,6 +123,36 @@ defineProps<{
|
|||
icon?: string;
|
||||
placeholder?: string;
|
||||
disabled?: boolean;
|
||||
compact?: boolean;
|
||||
}>();
|
||||
const model = defineModel() as ModelRef<string>;
|
||||
|
||||
const model = defineModel<string | boolean>();
|
||||
|
||||
const stringModel = computed({
|
||||
get: () => (typeof model.value === 'string' ? model.value : ''),
|
||||
set: (value: string) => {
|
||||
model.value = value;
|
||||
},
|
||||
});
|
||||
|
||||
const boolModel = computed({
|
||||
get: () => Boolean(model.value),
|
||||
set: (value: boolean) => {
|
||||
model.value = value;
|
||||
},
|
||||
});
|
||||
|
||||
const resolvedIcon = computed(() => {
|
||||
if (!props.icon) {
|
||||
return '';
|
||||
}
|
||||
|
||||
return props.icon;
|
||||
});
|
||||
|
||||
const fieldUi = computed(() => ({
|
||||
container: props.compact ? 'space-y-1.5' : 'space-y-2',
|
||||
description: props.compact ? 'text-xs text-toned' : 'text-sm text-toned',
|
||||
help: props.compact ? 'mt-1 text-xs text-toned' : 'mt-2 text-sm text-toned',
|
||||
}));
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,136 +1,94 @@
|
|||
<style scoped>
|
||||
/* container fades */
|
||||
.dialog-enter-active,
|
||||
.dialog-leave-active {
|
||||
transition: opacity 0.18s ease;
|
||||
}
|
||||
|
||||
.dialog-enter-from,
|
||||
.dialog-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* animate the card itself */
|
||||
.dialog-enter-active .modal-card,
|
||||
.dialog-leave-active .modal-card {
|
||||
transition:
|
||||
transform 0.18s ease,
|
||||
opacity 0.18s ease;
|
||||
}
|
||||
|
||||
.dialog-enter-from .modal-card {
|
||||
transform: translateY(-8px);
|
||||
opacity: 0.98;
|
||||
}
|
||||
|
||||
.dialog-leave-to .modal-card {
|
||||
transform: translateY(-8px);
|
||||
opacity: 0.98;
|
||||
}
|
||||
</style>
|
||||
|
||||
<template>
|
||||
<Teleport to="body">
|
||||
<transition name="dialog" @after-enter="focusInput">
|
||||
<div
|
||||
id="app-dialog-host"
|
||||
<UModal
|
||||
v-if="state.current"
|
||||
class="modal is-active"
|
||||
@keydown.esc="onCancel"
|
||||
:open="true"
|
||||
:title="state.current?.opts.title ?? defaultTitle"
|
||||
:dismissible="true"
|
||||
:ui="{ content: 'max-w-lg', body: 'space-y-4', footer: 'justify-end gap-2' }"
|
||||
@update:open="(open) => !open && onCancel()"
|
||||
@after:enter="focusInput"
|
||||
>
|
||||
<div class="modal-background" @click="onCancel" />
|
||||
<div class="modal-card" @keydown.enter.stop.prevent="onEnter">
|
||||
<header class="modal-card-head p-4">
|
||||
<p class="modal-card-title">{{ state.current?.opts.title ?? defaultTitle }}</p>
|
||||
<button class="delete" aria-label="close" @click="onCancel" />
|
||||
</header>
|
||||
|
||||
<section class="modal-card-body">
|
||||
<p v-if="state.current?.opts.message" class="mb-3">
|
||||
<template #body>
|
||||
<p v-if="state.current?.opts.message">
|
||||
{{ state.current?.opts.message }}
|
||||
</p>
|
||||
|
||||
<!-- prompt input -->
|
||||
<div v-if="'prompt' === state.current?.type" class="field">
|
||||
<div class="control">
|
||||
<input
|
||||
<UFormField v-if="'prompt' === state.current?.type" :error="state.errorMsg || undefined">
|
||||
<UInput
|
||||
ref="inputEl"
|
||||
class="input"
|
||||
type="text"
|
||||
v-model="localInput"
|
||||
:placeholder="(state.current?.opts as any)?.placeholder ?? ''"
|
||||
@keyup.stop
|
||||
:placeholder="(state.current?.opts as PromptOptions)?.placeholder ?? ''"
|
||||
class="w-full"
|
||||
@keydown.enter.stop.prevent="onEnter"
|
||||
/>
|
||||
</div>
|
||||
<p v-if="state.errorMsg" class="help is-danger is-bold is-unselectable">
|
||||
<span class="icon-text">
|
||||
<span class="icon"><i class="fas fa-exclamation-triangle" /></span>
|
||||
<span>{{ state.errorMsg }}</span>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</UFormField>
|
||||
|
||||
<div
|
||||
v-else-if="
|
||||
'confirm' === state.current?.type &&
|
||||
(state.current?.opts as ConfirmOptions)?.rawHTML
|
||||
'confirm' === state.current?.type && (state.current?.opts as ConfirmOptions)?.rawHTML
|
||||
"
|
||||
class="content"
|
||||
class="max-h-[40vh] overflow-auto text-sm text-default"
|
||||
v-html="(state.current?.opts as ConfirmOptions)?.rawHTML"
|
||||
/>
|
||||
</section>
|
||||
|
||||
<footer class="modal-card-foot p-4 is-justify-content-flex-end">
|
||||
<div
|
||||
v-if="
|
||||
'confirm' === state.current?.type &&
|
||||
(state.current?.opts as ConfirmOptions)?.options?.length
|
||||
"
|
||||
class="space-y-3 border-t border-default pt-4"
|
||||
>
|
||||
<UCheckbox
|
||||
v-for="opt in (state.current?.opts as ConfirmOptions).options"
|
||||
:key="opt.key"
|
||||
v-model="selected[opt.key]"
|
||||
:label="opt.label"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #footer>
|
||||
<template v-if="'alert' === state.current?.type">
|
||||
<button id="primaryButton" class="button is-danger" @click="onEnter">
|
||||
<span class="icon-text">
|
||||
<span class="icon"><i class="fas fa-check" /></span>
|
||||
<span>{{ (state.current?.opts as any)?.confirmText ?? 'OK' }}</span>
|
||||
</span>
|
||||
</button>
|
||||
<UButton
|
||||
id="primaryButton"
|
||||
:color="resolveConfirmColor(state.current?.opts.confirmColor)"
|
||||
@click="onEnter"
|
||||
>
|
||||
{{ state.current?.opts.confirmText ?? 'OK' }}
|
||||
</UButton>
|
||||
</template>
|
||||
|
||||
<template
|
||||
v-else-if="'confirm' === state.current?.type || 'prompt' === state.current?.type"
|
||||
>
|
||||
<div class="field is-grouped">
|
||||
<div class="control">
|
||||
<button
|
||||
<template v-else-if="'confirm' === state.current?.type || 'prompt' === state.current?.type">
|
||||
<UButton
|
||||
id="primaryButton"
|
||||
class="button"
|
||||
:color="resolveConfirmColor(state.current?.opts.confirmColor)"
|
||||
:disabled="
|
||||
'prompt' === state.current?.type &&
|
||||
localInput === (state.current?.opts as PromptOptions)?.initial
|
||||
"
|
||||
@click="onEnter"
|
||||
:class="state.current?.opts.confirmColor ?? 'is-primary'"
|
||||
:disabled="localInput === (state.current?.opts as PromptOptions)?.initial"
|
||||
>
|
||||
<span class="icon-text">
|
||||
<span class="icon"><i class="fas fa-check" /></span>
|
||||
<span>{{ (state.current?.opts as any)?.confirmText ?? 'OK' }}</span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="control">
|
||||
<button class="button is-info" @click="onCancel">
|
||||
<span class="icon-text">
|
||||
<span class="icon"><i class="fas fa-times" /></span>
|
||||
<span>{{ (state.current?.opts as any)?.cancelText ?? 'Cancel' }}</span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{{ state.current?.opts.confirmText ?? 'OK' }}
|
||||
</UButton>
|
||||
|
||||
<UButton color="neutral" variant="outline" @click="onCancel">
|
||||
{{ (state.current?.opts as PromptOptions | ConfirmOptions)?.cancelText ?? 'Cancel' }}
|
||||
</UButton>
|
||||
</template>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</Teleport>
|
||||
</template>
|
||||
</UModal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, watch, nextTick, computed } from 'vue';
|
||||
import { UButton, UCheckbox, UInput } from '#components';
|
||||
import { disableOpacity, enableOpacity } from '~/utils';
|
||||
import { useDialog, type ConfirmOptions, type PromptOptions } from '~/composables/useDialog';
|
||||
|
||||
const { state, confirm, cancel } = useDialog();
|
||||
|
||||
const localInput = ref('');
|
||||
const selected = ref<Record<string, boolean>>({});
|
||||
|
||||
watch(
|
||||
() => state.current,
|
||||
|
|
@ -141,31 +99,41 @@ watch(
|
|||
enableOpacity();
|
||||
}
|
||||
|
||||
localInput.value = 'prompt' === cur?.type ? ((cur.opts as any).initial ?? '') : '';
|
||||
localInput.value = 'prompt' === cur?.type ? ((cur.opts as PromptOptions).initial ?? '') : '';
|
||||
|
||||
if ('confirm' === cur?.type) {
|
||||
selected.value = Object.fromEntries(
|
||||
((cur.opts as ConfirmOptions).options ?? []).map((opt) => [opt.key, Boolean(opt.checked)]),
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
selected.value = {};
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
|
||||
const inputEl = ref<HTMLInputElement>();
|
||||
const inputEl = ref<{ inputRef?: { value?: HTMLInputElement | null } } | null>(null);
|
||||
|
||||
const focusPrimary = () => {
|
||||
const root = document.getElementById('app-dialog-host');
|
||||
if (!root) {
|
||||
return;
|
||||
}
|
||||
const btn = root.querySelector<HTMLButtonElement>('#primaryButton');
|
||||
btn?.focus();
|
||||
const root = document.getElementById('primaryButton');
|
||||
root?.focus();
|
||||
};
|
||||
|
||||
const focusInput = async () => {
|
||||
await nextTick();
|
||||
if ('prompt' === state.current?.type) {
|
||||
requestAnimationFrame(() => inputEl.value?.focus({ preventScroll: true }));
|
||||
requestAnimationFrame(() => inputEl.value?.inputRef?.value?.focus?.({ preventScroll: true }));
|
||||
return;
|
||||
}
|
||||
requestAnimationFrame(focusPrimary);
|
||||
};
|
||||
|
||||
const resolveConfirmColor = (color?: ConfirmOptions['confirmColor']) => color ?? 'primary';
|
||||
|
||||
const onCancel = () => cancel();
|
||||
const onEnter = () => confirm(localInput.value);
|
||||
const onEnter = () =>
|
||||
confirm('confirm' === state.current?.type ? selected.value : localInput.value);
|
||||
|
||||
const defaultTitle = computed(() => {
|
||||
if (!state.current) {
|
||||
|
|
|
|||
|
|
@ -1,218 +0,0 @@
|
|||
<template>
|
||||
<div class="dropdown" :class="{ 'is-active': isOpen, 'drop-up': dropUp }" ref="dropdown">
|
||||
<div class="dropdown-trigger">
|
||||
<button
|
||||
class="button is-fullwidth is-justify-content-space-between"
|
||||
aria-haspopup="true"
|
||||
type="button"
|
||||
aria-controls="dropdown-menu"
|
||||
@click="toggle"
|
||||
:class="button_classes"
|
||||
>
|
||||
<span class="icon" v-if="icons"><i :class="icons" /></span>
|
||||
<span :class="{ 'is-sr-only': hideLabel }">{{ label }}</span>
|
||||
<div class="is-pulled-right">
|
||||
<span class="icon"><i class="fas fa-angle-down" aria-hidden="true" /></span>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<Teleport to="body">
|
||||
<div v-if="isOpen" class="dropdown is-active dropdown-portal" ref="menu" :style="menuStyle">
|
||||
<div class="dropdown-menu" role="menu">
|
||||
<div class="dropdown-content is-unselectable" @click="handle_slot_click">
|
||||
<template v-if="hideLabel">
|
||||
<div class="dropdown-label">
|
||||
<span class="icon-text">
|
||||
<span class="icon" v-if="icons"><i :class="icons" /></span>
|
||||
<span>{{ label }}</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="dropdown-divider"></div>
|
||||
</template>
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Teleport>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onBeforeUnmount, nextTick, watchEffect, useTemplateRef } from 'vue';
|
||||
|
||||
const emitter = defineEmits(['open_state']);
|
||||
const props = defineProps({
|
||||
label: {
|
||||
type: String,
|
||||
default: 'Select',
|
||||
},
|
||||
icons: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
button_classes: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
hide_label_on_mobile: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
|
||||
const isOpen = ref(false);
|
||||
const dropUp = ref(false);
|
||||
const dropdown = useTemplateRef<HTMLDivElement>('dropdown');
|
||||
const menu = useTemplateRef<HTMLDivElement>('menu');
|
||||
const menuStyle = ref<Record<string, string>>({});
|
||||
const isMobile = useMediaQuery({ maxWidth: 1024 });
|
||||
|
||||
const hideLabel = computed(() => isMobile.value && props.hide_label_on_mobile);
|
||||
|
||||
const updatePosition = () => {
|
||||
if (!dropdown.value || !isOpen.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
const triggerRect = dropdown.value.getBoundingClientRect();
|
||||
const menuHeight = menu.value?.offsetHeight || 300;
|
||||
const spaceBelow = window.innerHeight - triggerRect.bottom;
|
||||
const spaceAbove = triggerRect.top;
|
||||
|
||||
// Determine if dropdown should appear above or below
|
||||
const shouldDropUp = spaceBelow < menuHeight + 24 && spaceAbove > spaceBelow;
|
||||
dropUp.value = shouldDropUp;
|
||||
|
||||
// Calculate position
|
||||
const left = triggerRect.left;
|
||||
const width = triggerRect.width;
|
||||
|
||||
if (shouldDropUp) {
|
||||
// Position above the trigger
|
||||
const bottom = window.innerHeight - triggerRect.top;
|
||||
menuStyle.value = {
|
||||
position: 'fixed',
|
||||
left: `${left}px`,
|
||||
bottom: `${bottom}px`,
|
||||
width: `${width}px`,
|
||||
top: 'auto',
|
||||
};
|
||||
} else {
|
||||
// Position below the trigger
|
||||
const top = triggerRect.bottom;
|
||||
menuStyle.value = {
|
||||
position: 'fixed',
|
||||
left: `${left}px`,
|
||||
top: `${top}px`,
|
||||
width: `${width}px`,
|
||||
bottom: 'auto',
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
const toggle = async () => {
|
||||
isOpen.value = !isOpen.value;
|
||||
|
||||
if (isOpen.value) {
|
||||
await nextTick();
|
||||
updatePosition();
|
||||
}
|
||||
};
|
||||
|
||||
const handle_slot_click = (event: MouseEvent) => {
|
||||
const target = event.target as HTMLElement;
|
||||
if (target.closest('.dropdown-item')) {
|
||||
isOpen.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const handle_event = (event: MouseEvent) => {
|
||||
if (!dropdown.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
const target = event.target as HTMLElement;
|
||||
|
||||
if (!dropdown.value.contains(target) && !menu.value?.contains(target)) {
|
||||
isOpen.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const handleScroll = () => {
|
||||
if (isOpen.value) {
|
||||
updatePosition();
|
||||
}
|
||||
};
|
||||
|
||||
const handleResize = () => {
|
||||
if (isOpen.value) {
|
||||
updatePosition();
|
||||
}
|
||||
};
|
||||
|
||||
watchEffect(() => emitter('open_state', isOpen.value));
|
||||
|
||||
onMounted(() => {
|
||||
document.addEventListener('click', handle_event);
|
||||
window.addEventListener('scroll', handleScroll, true); // Use capture to catch all scroll events
|
||||
window.addEventListener('resize', handleResize);
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
document.removeEventListener('click', handle_event);
|
||||
window.removeEventListener('scroll', handleScroll, true);
|
||||
window.removeEventListener('resize', handleResize);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.dropdown {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dropdown-trigger {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.dropdown.dropdown-portal {
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.dropdown.dropdown-portal .dropdown-menu {
|
||||
display: block !important;
|
||||
/* Override Bulma's display: none */
|
||||
position: static;
|
||||
/* Don't use absolute positioning inside fixed container */
|
||||
max-height: 350px;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
min-width: max-content;
|
||||
padding-top: 4px;
|
||||
}
|
||||
|
||||
.dropdown.dropdown-portal .dropdown-content {
|
||||
background-color: var(--bulma-dropdown-content-background-color, var(--bulma-scheme-main, #fff));
|
||||
border-radius: var(--bulma-dropdown-content-radius, var(--bulma-radius, 4px));
|
||||
box-shadow: var(
|
||||
--bulma-dropdown-content-shadow,
|
||||
var(
|
||||
--bulma-shadow,
|
||||
0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1),
|
||||
0 0px 0 1px rgba(10, 10, 10, 0.02)
|
||||
)
|
||||
);
|
||||
padding-top: var(--bulma-dropdown-content-padding-top, 0.5rem);
|
||||
padding-bottom: var(--bulma-dropdown-content-padding-bottom, 0.5rem);
|
||||
}
|
||||
|
||||
.dropdown-label {
|
||||
font-weight: 600;
|
||||
padding: 0.5rem 0.75rem;
|
||||
color: var(--bulma-dropdown-label-color, var(--bulma-text-color, #4a4a4a));
|
||||
}
|
||||
</style>
|
||||
|
|
@ -4,7 +4,7 @@
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 80vh;
|
||||
width: 80vw;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,58 +1,405 @@
|
|||
<template>
|
||||
<ModalText
|
||||
:isLoading="isLoading"
|
||||
:data="data"
|
||||
:externalModel="externalModel"
|
||||
@closeModel="() => emitter('closeModel')"
|
||||
:code_classes="code_classes"
|
||||
<UModal
|
||||
v-if="!externalModel"
|
||||
:open="true"
|
||||
:title="resolvedTitle"
|
||||
:dismissible="true"
|
||||
:ui="{ content: 'w-full sm:max-w-5xl', body: 'p-0 overflow-hidden' }"
|
||||
@update:open="(open) => !open && emitter('closeModel')"
|
||||
>
|
||||
<template #description>
|
||||
<span class="sr-only">{{ modalDescription }}</span>
|
||||
</template>
|
||||
|
||||
<template #body>
|
||||
<div class="flex h-[75vh] min-h-96 min-w-0 flex-col">
|
||||
<div
|
||||
class="flex flex-wrap items-center justify-between gap-3 border-b border-default bg-muted/20 px-4 py-3"
|
||||
>
|
||||
<div class="min-w-0 space-y-1">
|
||||
<div class="flex items-center gap-2 text-sm font-semibold text-highlighted">
|
||||
<UIcon :name="contentIcon" class="size-4 text-toned" />
|
||||
<span>{{ contentLabel }}</span>
|
||||
<UBadge color="neutral" variant="soft" size="sm">
|
||||
{{ isStructuredData ? 'JSON' : 'Text' }}
|
||||
</UBadge>
|
||||
</div>
|
||||
<p class="truncate text-xs text-toned">{{ sourceSummary }}</p>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-2">
|
||||
<UButton
|
||||
type="button"
|
||||
color="neutral"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
:disabled="isLoading || !hasDisplayText"
|
||||
@click="wrapText = !wrapText"
|
||||
>
|
||||
{{ wrapText ? 'No wrap' : 'Wrap text' }}
|
||||
</UButton>
|
||||
|
||||
<UButton
|
||||
type="button"
|
||||
color="neutral"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
icon="i-lucide-copy"
|
||||
:disabled="isLoading || !hasDisplayText"
|
||||
@click="copyData"
|
||||
>
|
||||
Copy
|
||||
</UButton>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-1 min-h-0 p-4 sm:p-5">
|
||||
<div v-if="isLoading" class="flex h-full min-h-64 items-center justify-center">
|
||||
<div class="flex flex-col items-center gap-3 text-center text-toned">
|
||||
<UIcon name="i-lucide-loader-circle" class="size-10 animate-spin text-info" />
|
||||
<span class="text-sm">Loading information...</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else-if="errorMessage" class="flex h-full min-h-64 items-center justify-center">
|
||||
<div class="w-full max-w-2xl space-y-4">
|
||||
<UAlert
|
||||
color="error"
|
||||
variant="soft"
|
||||
icon="i-lucide-triangle-alert"
|
||||
title="Unable to load information"
|
||||
:description="errorMessage"
|
||||
/>
|
||||
|
||||
<div class="flex justify-end">
|
||||
<UButton
|
||||
type="button"
|
||||
color="neutral"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
icon="i-lucide-rotate-ccw"
|
||||
@click="() => void loadInfo()"
|
||||
>
|
||||
Retry
|
||||
</UButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else-if="!hasDisplayText" class="flex h-full min-h-64 items-center justify-center">
|
||||
<UAlert
|
||||
color="neutral"
|
||||
variant="soft"
|
||||
icon="i-lucide-info"
|
||||
title="No content returned"
|
||||
description="The request completed successfully but did not return any visible content."
|
||||
class="w-full max-w-2xl"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<pre :class="preClasses"><code class="block min-w-full" v-text="displayText" /></pre>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</UModal>
|
||||
|
||||
<div v-else class="flex h-[75vh] min-h-96 min-w-0 flex-col">
|
||||
<div
|
||||
class="flex flex-wrap items-center justify-between gap-3 border-b border-default bg-muted/20 px-4 py-3"
|
||||
>
|
||||
<div class="min-w-0 space-y-1">
|
||||
<div class="flex items-center gap-2 text-sm font-semibold text-highlighted">
|
||||
<UIcon :name="contentIcon" class="size-4 text-toned" />
|
||||
<span>{{ contentLabel }}</span>
|
||||
<UBadge color="neutral" variant="soft" size="sm">
|
||||
{{ isStructuredData ? 'JSON' : 'Text' }}
|
||||
</UBadge>
|
||||
</div>
|
||||
<p class="truncate text-xs text-toned">{{ sourceSummary }}</p>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-2">
|
||||
<UButton
|
||||
type="button"
|
||||
color="neutral"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
:disabled="isLoading || !hasDisplayText"
|
||||
@click="wrapText = !wrapText"
|
||||
>
|
||||
{{ wrapText ? 'No wrap' : 'Wrap text' }}
|
||||
</UButton>
|
||||
|
||||
<UButton
|
||||
type="button"
|
||||
color="neutral"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
icon="i-lucide-copy"
|
||||
:disabled="isLoading || !hasDisplayText"
|
||||
@click="copyData"
|
||||
>
|
||||
Copy
|
||||
</UButton>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-1 min-h-0 p-4 sm:p-5">
|
||||
<div v-if="isLoading" class="flex h-full min-h-64 items-center justify-center">
|
||||
<div class="flex flex-col items-center gap-3 text-center text-toned">
|
||||
<UIcon name="i-lucide-loader-circle" class="size-10 animate-spin text-info" />
|
||||
<span class="text-sm">Loading information...</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else-if="errorMessage" class="flex h-full min-h-64 items-center justify-center">
|
||||
<div class="w-full max-w-2xl space-y-4">
|
||||
<UAlert
|
||||
color="error"
|
||||
variant="soft"
|
||||
icon="i-lucide-triangle-alert"
|
||||
title="Unable to load information"
|
||||
:description="errorMessage"
|
||||
/>
|
||||
|
||||
<div class="flex justify-end">
|
||||
<UButton
|
||||
type="button"
|
||||
color="neutral"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
icon="i-lucide-rotate-ccw"
|
||||
@click="() => void loadInfo()"
|
||||
>
|
||||
Retry
|
||||
</UButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else-if="!hasDisplayText" class="flex h-full min-h-64 items-center justify-center">
|
||||
<UAlert
|
||||
color="neutral"
|
||||
variant="soft"
|
||||
icon="i-lucide-info"
|
||||
title="No content returned"
|
||||
description="The request completed successfully but did not return any visible content."
|
||||
class="w-full max-w-2xl"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<pre :class="preClasses"><code class="block min-w-full" v-text="displayText" /></pre>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useStorage } from '@vueuse/core';
|
||||
|
||||
const toast = useNotification();
|
||||
const emitter = defineEmits<{ (e: 'closeModel'): void }>();
|
||||
|
||||
const props = defineProps<{
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
link?: string;
|
||||
preset?: string;
|
||||
cli?: string;
|
||||
useUrl?: boolean;
|
||||
externalModel?: boolean;
|
||||
code_classes?: string;
|
||||
}>();
|
||||
}>(),
|
||||
{
|
||||
link: '',
|
||||
preset: '',
|
||||
cli: '',
|
||||
useUrl: false,
|
||||
externalModel: false,
|
||||
code_classes: '',
|
||||
},
|
||||
);
|
||||
|
||||
const isLoading = ref<boolean>(true);
|
||||
const data = ref<any>({});
|
||||
const isLoading = ref(true);
|
||||
const data = ref<unknown>(null);
|
||||
const errorMessage = ref('');
|
||||
const wrapText = useStorage<boolean>('get_info_wrap_text', false);
|
||||
let latestRequestId = 0;
|
||||
|
||||
onMounted(async (): Promise<void> => {
|
||||
let url = props.useUrl ? props.link || '' : '/api/yt-dlp/url/info';
|
||||
const resolvedTitle = computed(() => {
|
||||
if (props.useUrl && props.link.startsWith('/api/history/')) {
|
||||
return 'Local Information';
|
||||
}
|
||||
|
||||
if (props.useUrl) {
|
||||
return 'File Contents';
|
||||
}
|
||||
|
||||
return 'yt-dlp Information';
|
||||
});
|
||||
|
||||
const modalDescription = computed(() => {
|
||||
if (props.useUrl && props.link.startsWith('/api/history/')) {
|
||||
return 'View the stored local information payload for this item.';
|
||||
}
|
||||
|
||||
if (props.useUrl) {
|
||||
return 'Preview the fetched text response.';
|
||||
}
|
||||
|
||||
return 'View the yt-dlp information payload for this URL.';
|
||||
});
|
||||
|
||||
const displayText = computed(() => {
|
||||
if (typeof data.value === 'string') {
|
||||
return data.value;
|
||||
}
|
||||
|
||||
if (data.value === null || data.value === undefined) {
|
||||
return '';
|
||||
}
|
||||
|
||||
try {
|
||||
return JSON.stringify(data.value, null, 2) ?? '';
|
||||
} catch {
|
||||
return String(data.value ?? '');
|
||||
}
|
||||
});
|
||||
|
||||
const hasDisplayText = computed(() => displayText.value.length > 0);
|
||||
|
||||
const isStructuredData = computed(() => {
|
||||
return data.value !== null && data.value !== undefined && typeof data.value !== 'string';
|
||||
});
|
||||
|
||||
const contentIcon = computed(() => {
|
||||
return isStructuredData.value ? 'i-lucide-braces' : 'i-lucide-file-text';
|
||||
});
|
||||
|
||||
const contentLabel = computed(() => {
|
||||
return isStructuredData.value ? 'Structured output' : 'Plain text output';
|
||||
});
|
||||
|
||||
const sourceSummary = computed(() => {
|
||||
if (props.useUrl) {
|
||||
return props.link || 'Direct response source';
|
||||
}
|
||||
|
||||
const details = [];
|
||||
|
||||
if (props.preset) {
|
||||
details.push(`Preset: ${props.preset}`);
|
||||
}
|
||||
|
||||
if (props.cli) {
|
||||
details.push('Custom yt-dlp args applied');
|
||||
}
|
||||
|
||||
return details.join(' | ') || 'yt-dlp response payload';
|
||||
});
|
||||
|
||||
const preClasses = computed(() => [
|
||||
'h-full max-h-full overflow-auto rounded-xl border border-default bg-elevated/40 p-4 text-sm text-default',
|
||||
'font-mono leading-6',
|
||||
wrapText.value ? 'whitespace-pre-wrap break-words' : 'whitespace-pre',
|
||||
props.code_classes,
|
||||
]);
|
||||
|
||||
const buildRequestUrl = (): string => {
|
||||
if (props.useUrl) {
|
||||
return props.link;
|
||||
}
|
||||
|
||||
if (!props.useUrl) {
|
||||
const params = new URLSearchParams();
|
||||
|
||||
if (props.preset) {
|
||||
params.append('preset', props.preset);
|
||||
}
|
||||
|
||||
if (props.cli) {
|
||||
params.append('args', props.cli);
|
||||
}
|
||||
params.append('url', props.link || '');
|
||||
url += '?' + params.toString();
|
||||
|
||||
params.append('url', props.link);
|
||||
|
||||
return `/api/yt-dlp/url/info?${params.toString()}`;
|
||||
};
|
||||
|
||||
const parseResponseBody = (body: string): unknown => {
|
||||
try {
|
||||
return JSON.parse(body);
|
||||
} catch {
|
||||
return body;
|
||||
}
|
||||
};
|
||||
|
||||
const getErrorMessage = (body: string, status: number): string => {
|
||||
if (!body) {
|
||||
return `Request failed with status ${status}.`;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await request(url);
|
||||
const parsed = JSON.parse(body) as { message?: string; error?: string };
|
||||
return parsed.message || parsed.error || body;
|
||||
} catch {
|
||||
return body;
|
||||
}
|
||||
};
|
||||
|
||||
const loadInfo = async (): Promise<void> => {
|
||||
latestRequestId += 1;
|
||||
const requestId = latestRequestId;
|
||||
|
||||
isLoading.value = true;
|
||||
errorMessage.value = '';
|
||||
data.value = null;
|
||||
|
||||
if (!props.link) {
|
||||
errorMessage.value = 'No source URL was provided.';
|
||||
isLoading.value = false;
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await request(buildRequestUrl());
|
||||
const body = await response.text();
|
||||
|
||||
try {
|
||||
data.value = JSON.parse(body);
|
||||
} catch {
|
||||
data.value = body;
|
||||
if (requestId !== latestRequestId) {
|
||||
return;
|
||||
}
|
||||
} catch (e: any) {
|
||||
console.error(e);
|
||||
toast.error(`Error: ${e.message}`);
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(getErrorMessage(body, response.status));
|
||||
}
|
||||
|
||||
data.value = parseResponseBody(body);
|
||||
} catch (error: unknown) {
|
||||
if (requestId !== latestRequestId) {
|
||||
return;
|
||||
}
|
||||
|
||||
console.error(error);
|
||||
const message = error instanceof Error ? error.message : 'Failed to load information.';
|
||||
errorMessage.value = message;
|
||||
toast.error(`Error: ${message}`);
|
||||
} finally {
|
||||
if (requestId === latestRequestId) {
|
||||
isLoading.value = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const copyData = (): void => {
|
||||
if (!displayText.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
copyText(displayText.value);
|
||||
};
|
||||
|
||||
watch(
|
||||
() => [props.link, props.preset, props.cli, props.useUrl],
|
||||
() => {
|
||||
void loadInfo();
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
</script>
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -9,8 +9,8 @@ img {
|
|||
|
||||
<template>
|
||||
<div>
|
||||
<div style="font-size: 30vh; width: 99%" class="has-text-centered" v-if="isLoading">
|
||||
<i class="fas fa-circle-notch fa-spin"></i>
|
||||
<div v-if="isLoading" class="flex min-h-[50vh] items-center justify-center">
|
||||
<UIcon name="i-lucide-loader-circle" class="size-20 animate-spin text-toned sm:size-24" />
|
||||
</div>
|
||||
<div v-else>
|
||||
<img :src="image" />
|
||||
|
|
|
|||
|
|
@ -1,50 +1,60 @@
|
|||
<template>
|
||||
<div
|
||||
class="dropdown"
|
||||
:class="{ 'is-active': showList && filteredOptions.length }"
|
||||
style="width: 100%"
|
||||
>
|
||||
<div class="control" style="width: 100%">
|
||||
<input
|
||||
<div class="relative w-full">
|
||||
<UInput
|
||||
:id="id"
|
||||
ref="inputRef"
|
||||
v-model="model"
|
||||
@focus="onFocus"
|
||||
@blur="hideList"
|
||||
@keydown="handleKeydown"
|
||||
@input="onInput"
|
||||
class="input"
|
||||
:placeholder="placeholder"
|
||||
autocomplete="new-password"
|
||||
style="width: 100%; position: relative; z-index: 2"
|
||||
:disabled="disabled"
|
||||
:id="id"
|
||||
size="lg"
|
||||
variant="outline"
|
||||
color="neutral"
|
||||
class="w-full"
|
||||
:ui="{ root: 'w-full', base: 'w-full bg-default/90' }"
|
||||
@focus="onFocus"
|
||||
@blur="hideList"
|
||||
@input="onInput"
|
||||
@keydown="handleKeydown"
|
||||
@keyup="updateCaretFromInput"
|
||||
@click="updateCaretFromInput"
|
||||
@mouseup="updateCaretFromInput"
|
||||
/>
|
||||
</div>
|
||||
<div class="dropdown-menu" role="menu" style="width: 100%; z-index: 3">
|
||||
<div class="dropdown-content" style="width: 100%; max-height: 10em; overflow-y: auto">
|
||||
<a
|
||||
|
||||
<div
|
||||
v-if="showList && filteredOptions.length"
|
||||
ref="dropdownRef"
|
||||
class="absolute inset-x-0 top-full z-20 mt-1 max-h-40 overflow-y-auto rounded-md border border-default bg-default shadow-lg"
|
||||
role="menu"
|
||||
>
|
||||
<button
|
||||
v-for="(option, idx) in filteredOptions"
|
||||
:key="option.value"
|
||||
type="button"
|
||||
class="flex w-full items-start justify-between gap-4 px-3 py-2 text-left text-sm transition-colors"
|
||||
:class="
|
||||
idx === highlightedIndex
|
||||
? 'bg-elevated text-highlighted'
|
||||
: 'text-default hover:bg-elevated/60'
|
||||
"
|
||||
@mousedown.prevent="selectOption(option.value)"
|
||||
:class="['dropdown-item', { 'is-active': idx === highlightedIndex }]"
|
||||
style="display: flex; justify-content: space-between"
|
||||
:ref="(el) => setDropdownItemRef(el, idx)"
|
||||
>
|
||||
<span class="has-text-weight-bold">{{ option.value }}</span>
|
||||
<span class="shrink-0 font-semibold text-highlighted">{{ option.value }}</span>
|
||||
<abbr
|
||||
class="has-text-grey-light is-text-overflow"
|
||||
class="min-w-0 flex-1 truncate text-xs text-toned no-underline"
|
||||
:title="option.description"
|
||||
style="margin-left: 1em"
|
||||
>
|
||||
{{ option.description }}
|
||||
</abbr>
|
||||
</a>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, watch, computed, nextTick } from 'vue';
|
||||
import { ref, watch, computed, nextTick, toRefs } from 'vue';
|
||||
import type { ComponentPublicInstance } from 'vue';
|
||||
import type { AutoCompleteOptions } from '~/types/autocomplete';
|
||||
|
||||
const props = withDefaults(
|
||||
|
|
@ -67,21 +77,31 @@ const props = withDefaults(
|
|||
},
|
||||
);
|
||||
|
||||
const model = defineModel<string>();
|
||||
const { placeholder, disabled, id, multiple, openOnFocus, allowShortFlags } = toRefs(props);
|
||||
|
||||
const onInput = () => {
|
||||
showList.value = isFlagTrigger.value && filteredOptions.value.length > 0;
|
||||
highlightedIndex.value = showList.value ? 0 : -1;
|
||||
};
|
||||
const model = defineModel<string>();
|
||||
|
||||
const showList = ref(false);
|
||||
const highlightedIndex = ref(-1);
|
||||
const dropdownItemRefs = ref<(HTMLElement | null)[]>([]);
|
||||
const dropdownRef = ref<HTMLElement | null>(null);
|
||||
const inputRef = ref<{
|
||||
inputRef?: { value?: HTMLInputElement | null };
|
||||
$el?: Element | null;
|
||||
} | null>(null);
|
||||
const caretIndex = ref(0);
|
||||
|
||||
// Extract the last non-space token and its bounds
|
||||
const getLastToken = (value: string) => {
|
||||
// If multiple is disabled, treat the entire input as a single token
|
||||
if (!props.multiple) {
|
||||
const getNativeInput = () => {
|
||||
const direct = inputRef.value?.inputRef?.value;
|
||||
if (direct) {
|
||||
return direct;
|
||||
}
|
||||
const fallback = inputRef.value?.$el?.querySelector('input');
|
||||
return fallback instanceof HTMLInputElement ? fallback : null;
|
||||
};
|
||||
|
||||
const getCurrentToken = (value: string) => {
|
||||
if (!multiple.value) {
|
||||
return {
|
||||
token: value,
|
||||
start: 0,
|
||||
|
|
@ -89,40 +109,44 @@ const getLastToken = (value: string) => {
|
|||
};
|
||||
}
|
||||
|
||||
// Multiple enabled: extract last token for multi-flag support
|
||||
const m = (value || '').match(/(\S+)$/);
|
||||
const token: string = m?.[1] ?? '';
|
||||
const start = m ? (m.index as number) : value.length;
|
||||
const end = m ? start + token.length : value.length;
|
||||
const caret = Math.min(caretIndex.value, value.length);
|
||||
const left = value.slice(0, caret);
|
||||
const right = value.slice(caret);
|
||||
const leftMatch = left.match(/(\S+)$/);
|
||||
const rightMatch = right.match(/^(\S+)/);
|
||||
const leftToken = leftMatch?.[1] ?? '';
|
||||
const rightToken = rightMatch?.[1] ?? '';
|
||||
const token = leftToken + rightToken;
|
||||
const start = leftMatch ? caret - leftToken.length : caret;
|
||||
const end = rightMatch ? caret + rightToken.length : caret;
|
||||
return { token, start, end };
|
||||
};
|
||||
|
||||
const updateCaretFromInput = () => {
|
||||
const input = getNativeInput();
|
||||
caretIndex.value = input?.selectionStart ?? (model.value || '').length;
|
||||
};
|
||||
|
||||
const filteredOptions = computed(() => {
|
||||
const value = model.value || '';
|
||||
if (!value) {
|
||||
return props.options;
|
||||
}
|
||||
const { token } = getLastToken(value);
|
||||
|
||||
// If openOnFocus is enabled and token is empty/just whitespace, show all options
|
||||
if (props.openOnFocus && !token) {
|
||||
const { token } = getCurrentToken(value);
|
||||
if (openOnFocus.value && !token) {
|
||||
return props.options;
|
||||
}
|
||||
|
||||
// Hide suggestions when token has '='
|
||||
if (!token || token.includes('=')) {
|
||||
return [];
|
||||
}
|
||||
|
||||
// Check if token is a valid flag format
|
||||
const isLongFlag = token.startsWith('--');
|
||||
const isShortFlag = props.allowShortFlags && token.startsWith('-') && !token.startsWith('--');
|
||||
|
||||
const isShortFlag = allowShortFlags.value && token.startsWith('-') && !token.startsWith('--');
|
||||
if (!isLongFlag && !isShortFlag) {
|
||||
return [];
|
||||
}
|
||||
|
||||
// Check for exact match first - if found, only show that
|
||||
const exactMatch = props.options.find((opt) => opt.value === token);
|
||||
if (exactMatch) {
|
||||
return [exactMatch];
|
||||
|
|
@ -137,7 +161,6 @@ const filteredOptions = computed(() => {
|
|||
const desc = opt.description.toLowerCase();
|
||||
|
||||
if (isShortFlag) {
|
||||
// Short flags: case-sensitive matching for flag, case-insensitive for description
|
||||
if (flag === token) {
|
||||
startsWithFlag.push(opt);
|
||||
} else if (flag.includes(token)) {
|
||||
|
|
@ -145,48 +168,78 @@ const filteredOptions = computed(() => {
|
|||
} else if (desc.includes(token.toLowerCase())) {
|
||||
includesDesc.push(opt);
|
||||
}
|
||||
} else {
|
||||
// Long flags: case-insensitive matching
|
||||
const val = token.toLowerCase();
|
||||
const flagLower = flag.toLowerCase();
|
||||
|
||||
if (flagLower.startsWith(val)) {
|
||||
startsWithFlag.push(opt);
|
||||
} else if (flagLower.includes(val)) {
|
||||
includesFlag.push(opt);
|
||||
} else if (desc.includes(val)) {
|
||||
includesDesc.push(opt);
|
||||
continue;
|
||||
}
|
||||
|
||||
const normalizedToken = token.toLowerCase();
|
||||
const flagLower = flag.toLowerCase();
|
||||
if (flagLower.startsWith(normalizedToken)) {
|
||||
startsWithFlag.push(opt);
|
||||
} else if (flagLower.includes(normalizedToken)) {
|
||||
includesFlag.push(opt);
|
||||
} else if (desc.includes(normalizedToken)) {
|
||||
includesDesc.push(opt);
|
||||
}
|
||||
}
|
||||
|
||||
return [...startsWithFlag, ...includesFlag, ...includesDesc];
|
||||
});
|
||||
|
||||
const isFlagTrigger = computed(() => {
|
||||
const { token } = getCurrentToken(model.value || '');
|
||||
if (openOnFocus.value && !token) {
|
||||
return true;
|
||||
}
|
||||
if (!token || token.includes('=')) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const isLongFlag = token.startsWith('--');
|
||||
const isShortFlag = allowShortFlags.value && token.startsWith('-') && !token.startsWith('--');
|
||||
return isLongFlag || isShortFlag;
|
||||
});
|
||||
|
||||
const onInput = () => {
|
||||
updateCaretFromInput();
|
||||
showList.value = isFlagTrigger.value && filteredOptions.value.length > 0;
|
||||
highlightedIndex.value = showList.value ? 0 : -1;
|
||||
};
|
||||
|
||||
const selectOption = (val: string) => {
|
||||
const value = model.value || '';
|
||||
const { token, start, end } = getLastToken(value);
|
||||
const { token, start, end } = getCurrentToken(value);
|
||||
|
||||
// If multiple is disabled, replace entire value
|
||||
if (!props.multiple) {
|
||||
// Preserve any '=value' suffix already typed
|
||||
if (!multiple.value) {
|
||||
const eqPos = token.indexOf('=');
|
||||
const after = eqPos !== -1 ? token.slice(eqPos) : '';
|
||||
model.value = val + after;
|
||||
showList.value = false;
|
||||
highlightedIndex.value = -1;
|
||||
nextTick(() => getNativeInput()?.focus());
|
||||
return;
|
||||
}
|
||||
|
||||
// Multiple enabled: replace only the last token
|
||||
if (token) {
|
||||
// Preserve any '=value' suffix already typed for this token
|
||||
const eqPos = token.indexOf('=');
|
||||
const after = eqPos !== -1 ? token.slice(eqPos) : '';
|
||||
model.value = value.slice(0, start) + val + after + value.slice(end);
|
||||
nextTick(() => {
|
||||
const input = getNativeInput();
|
||||
const nextPos = start + val.length + after.length;
|
||||
input?.focus();
|
||||
input?.setSelectionRange(nextPos, nextPos);
|
||||
caretIndex.value = nextPos;
|
||||
});
|
||||
} else {
|
||||
model.value = val;
|
||||
nextTick(() => {
|
||||
const input = getNativeInput();
|
||||
input?.focus();
|
||||
input?.setSelectionRange(val.length, val.length);
|
||||
caretIndex.value = val.length;
|
||||
});
|
||||
}
|
||||
|
||||
showList.value = false;
|
||||
highlightedIndex.value = -1;
|
||||
};
|
||||
|
|
@ -200,10 +253,10 @@ const hideList = () => {
|
|||
};
|
||||
|
||||
const onFocus = () => {
|
||||
if (!props.openOnFocus) {
|
||||
updateCaretFromInput();
|
||||
if (!openOnFocus.value) {
|
||||
return;
|
||||
}
|
||||
// When openOnFocus is enabled, show dropdown if there are options
|
||||
const hasOptions = filteredOptions.value.length > 0;
|
||||
showList.value = hasOptions;
|
||||
highlightedIndex.value = hasOptions ? 0 : -1;
|
||||
|
|
@ -217,37 +270,23 @@ watch(filteredOptions, () => {
|
|||
highlightedIndex.value = filteredOptions.value.length ? 0 : -1;
|
||||
dropdownItemRefs.value = Array(filteredOptions.value.length).fill(null);
|
||||
nextTick(() => {
|
||||
const dropdown = document.querySelector('.dropdown-content');
|
||||
if (dropdown) {
|
||||
dropdown.scrollTop = 0;
|
||||
if (dropdownRef.value) {
|
||||
dropdownRef.value.scrollTop = 0;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
const isFlagTrigger = computed(() => {
|
||||
const { token } = getLastToken(model.value || '');
|
||||
|
||||
// If openOnFocus is enabled and input is empty, allow trigger
|
||||
if (props.openOnFocus && !token) {
|
||||
return true;
|
||||
const scrollHighlightedIntoView = () => {
|
||||
const el = dropdownItemRefs.value[highlightedIndex.value];
|
||||
if (!el) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!token || token.includes('=')) return false;
|
||||
|
||||
// Check if token is a valid flag format
|
||||
const isLongFlag = token.startsWith('--');
|
||||
const isShortFlag = props.allowShortFlags && token.startsWith('-') && !token.startsWith('--');
|
||||
|
||||
if (!isLongFlag && !isShortFlag) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// Allow trigger even for exact matches so users can see descriptions
|
||||
return true;
|
||||
});
|
||||
el.scrollIntoView({ block: 'nearest' });
|
||||
};
|
||||
|
||||
const handleKeydown = (e: KeyboardEvent) => {
|
||||
// Escape closes dropdown and lets arrows navigate the input
|
||||
updateCaretFromInput();
|
||||
|
||||
if (e.key === 'Escape') {
|
||||
showList.value = false;
|
||||
highlightedIndex.value = -1;
|
||||
|
|
@ -262,22 +301,22 @@ const handleKeydown = (e: KeyboardEvent) => {
|
|||
if (e.key === 'ArrowDown') {
|
||||
e.preventDefault();
|
||||
highlightedIndex.value = Math.min(highlightedIndex.value + 1, filteredOptions.value.length - 1);
|
||||
nextTick(() => scrollHighlightedIntoView());
|
||||
nextTick(scrollHighlightedIntoView);
|
||||
} else if (e.key === 'ArrowUp') {
|
||||
e.preventDefault();
|
||||
highlightedIndex.value = Math.max(highlightedIndex.value - 1, 0);
|
||||
nextTick(() => scrollHighlightedIntoView());
|
||||
nextTick(scrollHighlightedIntoView);
|
||||
} else if (e.key === 'PageDown') {
|
||||
e.preventDefault();
|
||||
highlightedIndex.value = Math.min(
|
||||
highlightedIndex.value + pageSize,
|
||||
filteredOptions.value.length - 1,
|
||||
);
|
||||
nextTick(() => scrollHighlightedIntoView());
|
||||
nextTick(scrollHighlightedIntoView);
|
||||
} else if (e.key === 'PageUp') {
|
||||
e.preventDefault();
|
||||
highlightedIndex.value = Math.max(highlightedIndex.value - pageSize, 0);
|
||||
nextTick(() => scrollHighlightedIntoView());
|
||||
nextTick(scrollHighlightedIntoView);
|
||||
} else if (e.key === 'Enter' || e.key === 'Tab') {
|
||||
const selected =
|
||||
highlightedIndex.value >= 0 && highlightedIndex.value < filteredOptions.value.length
|
||||
|
|
@ -289,12 +328,4 @@ const handleKeydown = (e: KeyboardEvent) => {
|
|||
}
|
||||
}
|
||||
};
|
||||
|
||||
function scrollHighlightedIntoView() {
|
||||
const el = dropdownItemRefs.value[highlightedIndex.value];
|
||||
if (!el) {
|
||||
return;
|
||||
}
|
||||
el.scrollIntoView({ block: 'nearest' });
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,159 +1,306 @@
|
|||
<style>
|
||||
.markdown-alert {
|
||||
padding: 0 1em;
|
||||
margin-bottom: 16px;
|
||||
.docs-markdown {
|
||||
min-width: 0;
|
||||
color: var(--ui-text);
|
||||
font-size: 0.975rem;
|
||||
line-height: 1.75;
|
||||
}
|
||||
|
||||
.docs-markdown > :first-child {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
.docs-markdown > :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.docs-markdown :where(h1, h2, h3, h4, h5, h6) {
|
||||
margin-top: 1.75em;
|
||||
color: var(--ui-text-highlighted);
|
||||
font-weight: 700;
|
||||
line-height: 1.25;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.docs-markdown h1 {
|
||||
font-size: clamp(1.85rem, 1.55rem + 1vw, 2.4rem);
|
||||
}
|
||||
|
||||
.docs-markdown h2 {
|
||||
font-size: clamp(1.5rem, 1.3rem + 0.7vw, 1.95rem);
|
||||
padding-top: 0.35rem;
|
||||
border-top: 1px solid color-mix(in oklab, var(--ui-border) 80%, transparent);
|
||||
}
|
||||
|
||||
.docs-markdown h3 {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.docs-markdown h4 {
|
||||
font-size: 1.15rem;
|
||||
}
|
||||
|
||||
.docs-markdown h5,
|
||||
.docs-markdown h6 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.docs-markdown :where(p, ul, ol, pre, blockquote, .markdown-alert, .docs-markdown__table-wrap, hr) {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.docs-markdown :where(p, li, blockquote, th, td) {
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.docs-markdown :where(strong) {
|
||||
color: var(--ui-text-highlighted);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.docs-markdown :where(ul, ol) {
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
|
||||
.docs-markdown ul {
|
||||
list-style: disc;
|
||||
}
|
||||
|
||||
.docs-markdown ol {
|
||||
list-style: decimal;
|
||||
}
|
||||
|
||||
.docs-markdown li + li {
|
||||
margin-top: 0.35rem;
|
||||
}
|
||||
|
||||
.docs-markdown li > :where(ul, ol) {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.docs-markdown a {
|
||||
color: color-mix(in oklab, var(--ui-info) 60%, var(--ui-text-highlighted) 40%);
|
||||
text-decoration: underline;
|
||||
text-decoration-thickness: 1px;
|
||||
text-underline-offset: 0.18em;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.docs-markdown a:hover {
|
||||
color: var(--ui-text-highlighted);
|
||||
}
|
||||
|
||||
.docs-markdown :not(pre) > code {
|
||||
display: inline;
|
||||
border: 1px solid color-mix(in oklab, var(--ui-border) 80%, transparent);
|
||||
border-radius: 0.45rem;
|
||||
background: color-mix(in oklab, var(--ui-bg-muted) 60%, var(--ui-bg) 40%);
|
||||
padding: 0.125rem 0.375rem;
|
||||
font-size: 0.875em;
|
||||
white-space: normal;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.docs-markdown pre {
|
||||
max-width: 100%;
|
||||
overflow-x: auto;
|
||||
border: 1px solid color-mix(in oklab, var(--ui-border) 80%, transparent);
|
||||
border-radius: 0.9rem;
|
||||
background: color-mix(in oklab, var(--ui-bg-muted) 40%, var(--ui-bg) 60%);
|
||||
padding: 0.9rem 1rem;
|
||||
}
|
||||
|
||||
.docs-markdown pre code {
|
||||
display: block;
|
||||
min-width: 0;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
color: inherit;
|
||||
white-space: pre-wrap;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.docs-markdown blockquote {
|
||||
border-left: 0.3rem solid color-mix(in oklab, var(--ui-info) 60%, var(--ui-border) 40%);
|
||||
border-radius: 0.85rem;
|
||||
background: color-mix(in oklab, var(--ui-info) 7%, var(--ui-bg) 93%);
|
||||
padding: 0.95rem 1rem;
|
||||
color: var(--ui-text-toned);
|
||||
}
|
||||
|
||||
.docs-markdown blockquote > :first-child,
|
||||
.docs-markdown blockquote > :first-child > :first-child,
|
||||
.markdown-alert > :first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.docs-markdown blockquote > :last-child,
|
||||
.markdown-alert > :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.docs-markdown hr {
|
||||
border: 0;
|
||||
border-top: 1px solid color-mix(in oklab, var(--ui-border) 85%, transparent);
|
||||
}
|
||||
|
||||
.docs-markdown__table-wrap {
|
||||
max-width: 100%;
|
||||
overflow-x: auto;
|
||||
border: 1px solid color-mix(in oklab, var(--ui-border) 85%, transparent);
|
||||
border-radius: 0.95rem;
|
||||
background: var(--ui-bg);
|
||||
}
|
||||
|
||||
.docs-markdown__table {
|
||||
width: max-content;
|
||||
min-width: 100%;
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
.docs-markdown__table :where(th, td) {
|
||||
min-width: 0;
|
||||
padding: 0.75rem 0.9rem;
|
||||
border-right: 1px solid color-mix(in oklab, var(--ui-border) 70%, transparent);
|
||||
border-bottom: 1px solid color-mix(in oklab, var(--ui-border) 70%, transparent);
|
||||
text-align: left;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.docs-markdown__table :where(th:last-child, td:last-child) {
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
.docs-markdown__table thead th {
|
||||
background: color-mix(in oklab, var(--ui-bg-muted) 60%, var(--ui-bg) 40%);
|
||||
color: var(--ui-text-toned);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.docs-markdown__table tbody tr:nth-child(odd) {
|
||||
background: color-mix(in oklab, var(--ui-bg-muted) 24%, var(--ui-bg) 76%);
|
||||
}
|
||||
|
||||
.docs-markdown__table tbody tr:hover {
|
||||
background: color-mix(in oklab, var(--ui-bg-elevated) 65%, var(--ui-bg-muted) 35%);
|
||||
}
|
||||
|
||||
.docs-markdown__table tbody tr:last-child td {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.docs-markdown img {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border: 1px solid color-mix(in oklab, var(--ui-border) 75%, transparent);
|
||||
border-radius: 0.9rem;
|
||||
}
|
||||
|
||||
.markdown-alert {
|
||||
--markdown-alert-accent: color-mix(in oklab, var(--ui-border-accented) 70%, transparent);
|
||||
margin-top: 1rem;
|
||||
border: 1px solid color-mix(in oklab, var(--markdown-alert-accent) 35%, var(--ui-border) 65%);
|
||||
border-left-width: 0.35rem;
|
||||
border-left-color: var(--markdown-alert-accent);
|
||||
border-radius: 0.9rem;
|
||||
background: color-mix(in oklab, var(--markdown-alert-accent) 9%, var(--ui-bg) 91%);
|
||||
padding: 0.9rem 1rem;
|
||||
color: inherit;
|
||||
border-left: 0.25em solid #444c56;
|
||||
}
|
||||
|
||||
.markdown-alert-title {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
font-weight: 500;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.45rem;
|
||||
color: color-mix(in oklab, var(--markdown-alert-accent) 70%, var(--ui-text-highlighted) 30%);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.markdown-alert-note {
|
||||
border-left-color: #539bf5;
|
||||
--markdown-alert-accent: var(--ui-info);
|
||||
}
|
||||
|
||||
.markdown-alert-tip {
|
||||
border-left-color: #57ab5a;
|
||||
--markdown-alert-accent: var(--ui-success);
|
||||
}
|
||||
|
||||
.markdown-alert-important {
|
||||
border-left-color: #986ee2;
|
||||
--markdown-alert-accent: color-mix(in oklab, var(--ui-primary) 60%, var(--ui-info) 40%);
|
||||
}
|
||||
|
||||
.markdown-alert-warning {
|
||||
border-left-color: #c69026;
|
||||
--markdown-alert-accent: var(--ui-warning);
|
||||
}
|
||||
|
||||
.markdown-alert-caution {
|
||||
border-left-color: #e5534b;
|
||||
}
|
||||
|
||||
.markdown-alert-note > .markdown-alert-title {
|
||||
color: #539bf5;
|
||||
}
|
||||
|
||||
.markdown-alert-tip > .markdown-alert-title {
|
||||
color: #57ab5a;
|
||||
}
|
||||
|
||||
.markdown-alert-important > .markdown-alert-title {
|
||||
color: #986ee2;
|
||||
}
|
||||
|
||||
.markdown-alert-warning > .markdown-alert-title {
|
||||
color: #c69026;
|
||||
}
|
||||
|
||||
.markdown-alert-caution > .markdown-alert-title {
|
||||
color: #e5534b;
|
||||
}
|
||||
|
||||
code {
|
||||
word-break: break-word !important;
|
||||
--markdown-alert-accent: var(--ui-error);
|
||||
}
|
||||
</style>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="modal is-active">
|
||||
<div class="modal-background" @click="emitter('closeModel')"></div>
|
||||
|
||||
<div class="modal-content modal-content-max">
|
||||
<div style="font-size: 30vh; width: 99%" class="has-text-centered" v-if="isLoading">
|
||||
<i class="fas fa-circle-notch fa-spin" />
|
||||
<div class="relative min-h-64 min-w-0">
|
||||
<div v-if="isLoading" class="flex min-h-64 items-center justify-center text-toned">
|
||||
<UIcon name="i-lucide-loader-circle" class="size-10 animate-spin" />
|
||||
</div>
|
||||
|
||||
<div style="position: relative" v-if="!isLoading">
|
||||
<Message v-if="error" class="is-warning" title="Error" icon="fas fa-exclamation">
|
||||
{{ error }}
|
||||
</Message>
|
||||
<div class="card" v-else>
|
||||
<div class="card-body p-4">
|
||||
<div class="content" v-html="content" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<UAlert
|
||||
v-else-if="error"
|
||||
color="warning"
|
||||
variant="soft"
|
||||
icon="i-lucide-triangle-alert"
|
||||
title="Error"
|
||||
:description="error"
|
||||
/>
|
||||
|
||||
<div v-else class="docs-markdown min-w-0 max-w-none" v-html="content" @click="handleClick" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onBeforeUnmount, onUpdated } from 'vue';
|
||||
import { marked } from 'marked';
|
||||
import { Marked } from 'marked';
|
||||
import { baseUrl } from 'marked-base-url';
|
||||
import markedAlert from 'marked-alert';
|
||||
import { gfmHeadingId } from 'marked-gfm-heading-id';
|
||||
import Message from '~/components/Message.vue';
|
||||
import { resolveDocsImageSrc, resolveDocsLink } from '~/composables/useDocs';
|
||||
import { parse_api_error, request } from '~/utils';
|
||||
|
||||
type MarkdownToken = {
|
||||
type: string;
|
||||
href?: string;
|
||||
title?: string | null;
|
||||
text?: string;
|
||||
tokens?: Array<unknown>;
|
||||
header?: Array<{ tokens: Array<unknown> }>;
|
||||
rows?: Array<Array<{ tokens: Array<unknown> }>>;
|
||||
_external?: boolean;
|
||||
_docRoute?: string;
|
||||
_isExternalImage?: boolean;
|
||||
};
|
||||
|
||||
const props = defineProps<{ file: string }>();
|
||||
const emitter = defineEmits<{ (e: 'closeModel'): void }>();
|
||||
|
||||
const urls = ['FAQ.md', 'README.md', 'API.md', 'sc_short.jpg', 'sc_simple.jpg'];
|
||||
const content = ref('');
|
||||
const error = ref('');
|
||||
const isLoading = ref(true);
|
||||
|
||||
const content = ref<string>('');
|
||||
const error = ref<string>('');
|
||||
const isLoading = ref<boolean>(true);
|
||||
const createMarkdownParser = () => {
|
||||
const parser = new Marked();
|
||||
|
||||
const handleClick = async (e: MouseEvent) => {
|
||||
const target = (e.target as HTMLElement)?.closest('a') as HTMLAnchorElement | null;
|
||||
if (!target) {
|
||||
return;
|
||||
}
|
||||
const href = target.getAttribute('data-url');
|
||||
if (!href) {
|
||||
return;
|
||||
}
|
||||
|
||||
e.preventDefault();
|
||||
await loader(href);
|
||||
};
|
||||
|
||||
const addListeners = (): void => {
|
||||
removeListeners();
|
||||
document.querySelectorAll('.content a').forEach((l: Element): void => {
|
||||
const href = l.getAttribute('data-url');
|
||||
if (!href) {
|
||||
return;
|
||||
}
|
||||
|
||||
(l as HTMLElement).addEventListener('click', handleClick);
|
||||
});
|
||||
};
|
||||
|
||||
const removeListeners = (): void => {
|
||||
document.querySelectorAll('.content a').forEach((l: Element): void => {
|
||||
const href = l.getAttribute('data-url');
|
||||
if (!href) {
|
||||
return;
|
||||
}
|
||||
|
||||
(l as HTMLElement).removeEventListener('click', handleClick);
|
||||
});
|
||||
};
|
||||
|
||||
const loader = async (file: string) => {
|
||||
try {
|
||||
isLoading.value = true;
|
||||
const response = await fetch(`${file}?_=${Date.now()}`);
|
||||
if (true !== response.ok) {
|
||||
const err = await response.json();
|
||||
error.value = err.error.message;
|
||||
return;
|
||||
}
|
||||
|
||||
const text = await response.text();
|
||||
|
||||
marked.use(gfmHeadingId());
|
||||
marked.use(baseUrl(window.origin));
|
||||
marked.use(markedAlert());
|
||||
marked.use({
|
||||
parser.use(gfmHeadingId());
|
||||
parser.use(baseUrl(window.origin));
|
||||
parser.use(markedAlert());
|
||||
parser.use({
|
||||
gfm: true,
|
||||
hooks: {
|
||||
postprocess: (text: string) =>
|
||||
|
|
@ -162,81 +309,143 @@ const loader = async (file: string) => {
|
|||
(_, list) =>
|
||||
`<span class="icon"><i class="fas ${list
|
||||
.split('.')
|
||||
.map((n: string) => n.trim())
|
||||
.map((name: string) => name.trim())
|
||||
.join(' ')}"></i></span>`,
|
||||
),
|
||||
},
|
||||
walkTokens: (token: any) => {
|
||||
if (token.type !== 'link') {
|
||||
return;
|
||||
}
|
||||
if (token.href.startsWith('#')) {
|
||||
walkTokens: (token: MarkdownToken) => {
|
||||
if (token.type === 'link' && token.href) {
|
||||
const resolved = resolveDocsLink(token.href);
|
||||
token.href = resolved.href;
|
||||
token._external = resolved.external;
|
||||
token._docRoute = resolved.docRoute;
|
||||
return;
|
||||
}
|
||||
|
||||
if (urls.some((l) => token.href.includes(l))) {
|
||||
const name = urls.find((l) => token.href.includes(l)) || '';
|
||||
token._external = false;
|
||||
token.href = `/${name}`;
|
||||
} else {
|
||||
token._external = true;
|
||||
if (token.type === 'image' && token.href) {
|
||||
const resolvedHref = resolveDocsImageSrc(token.href);
|
||||
token._isExternalImage = /^https?:\/\//i.test(resolvedHref);
|
||||
token.href = resolvedHref;
|
||||
}
|
||||
},
|
||||
renderer: {
|
||||
link(token: any) {
|
||||
const text = this.parser.parseInline(token.tokens);
|
||||
link(token: MarkdownToken) {
|
||||
const inlineTokens = Array.isArray(token.tokens) ? (token.tokens as any[]) : [];
|
||||
const text = this.parser.parseInline(inlineTokens as any);
|
||||
const title = token.title ? ` title="${token.title}"` : '';
|
||||
const attrs = token._external ? ' target="_blank" rel="noopener noreferrer"' : '';
|
||||
let local = '';
|
||||
const name = urls.find((l) => token.href.includes(l)) || '';
|
||||
if (name) {
|
||||
local = ` data-url="/api/docs/${name}"`;
|
||||
}
|
||||
|
||||
return `<a href="${token.href}"${local}${title}${attrs}>${text}</a>`;
|
||||
const docRoute = token._docRoute ? ` data-doc-route="${token._docRoute}"` : '';
|
||||
return `<a href="${token.href || ''}"${docRoute}${title}${attrs}>${text}</a>`;
|
||||
},
|
||||
table(token: any) {
|
||||
// `token.header` and `token.rows` are available
|
||||
// Use default table output from built-in renderer to get header + body markup
|
||||
// Then wrap with classed <table>
|
||||
|
||||
// We need to generate the inner HTML parts first
|
||||
const headerHtml = `<thead><tr>${token.header.map((cell: any) => `<th>${this.parser.parseInline(cell.tokens)}</th>`).join('')}</tr></thead>`;
|
||||
table(token: MarkdownToken) {
|
||||
const headerHtml = `<thead><tr>${(token.header || [])
|
||||
.map((cell) => {
|
||||
const inlineTokens = Array.isArray((cell as any).tokens)
|
||||
? ((cell as any).tokens as any[])
|
||||
: [];
|
||||
return `<th>${this.parser.parseInline(inlineTokens as any)}</th>`;
|
||||
})
|
||||
.join('')}</tr></thead>`;
|
||||
|
||||
const bodyHtml = (token.rows || [])
|
||||
.map((row: any[]) => {
|
||||
const tr = row
|
||||
.map((cell: any) => {
|
||||
return `<td>${this.parser.parseInline(cell.tokens)}</td>`;
|
||||
})
|
||||
.join('');
|
||||
return `<tr>${tr}</tr>`;
|
||||
.map((row) => {
|
||||
const columns = row
|
||||
.map((cell) => {
|
||||
const inlineTokens = Array.isArray((cell as any).tokens)
|
||||
? ((cell as any).tokens as any[])
|
||||
: [];
|
||||
return `<td>${this.parser.parseInline(inlineTokens as any)}</td>`;
|
||||
})
|
||||
.join('');
|
||||
|
||||
return `<div class="table-container"><table class="table is-striped is-hoverable is-fullwidth is-bordered">\n${headerHtml}\n<tbody>\n${bodyHtml}\n</tbody>\n</table></div>`;
|
||||
return `<tr>${columns}</tr>`;
|
||||
})
|
||||
.join('');
|
||||
|
||||
return `<div class="docs-markdown__table-wrap"><table class="docs-markdown__table">\n${headerHtml}\n<tbody>\n${bodyHtml}\n</tbody>\n</table></div>`;
|
||||
},
|
||||
image(token: any) {
|
||||
image(token: MarkdownToken) {
|
||||
const alt = token.text ? ` alt="${token.text}"` : ' alt=""';
|
||||
const title = token.title ? ` title="${token.title}"` : '';
|
||||
const refPolicy = ' referrerpolicy="no-referrer"';
|
||||
const crossorigin = token._isExternalImage ? ' crossorigin="anonymous"' : '';
|
||||
const loading = ' loading="lazy"';
|
||||
return `<img src="${token.href}"${alt}${title}${refPolicy}${crossorigin}${loading} />`;
|
||||
return `<img src="${token.href || ''}"${alt}${title}${refPolicy}${crossorigin}${loading} />`;
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
content.value = String(marked.parse(text));
|
||||
} catch (e: any) {
|
||||
return parser;
|
||||
};
|
||||
|
||||
const loader = async (file: string) => {
|
||||
if (!file) {
|
||||
content.value = '';
|
||||
error.value = '';
|
||||
isLoading.value = false;
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
isLoading.value = true;
|
||||
error.value = '';
|
||||
content.value = '';
|
||||
const markdownParser = createMarkdownParser();
|
||||
|
||||
const response = await request(`${file}?_=${Date.now()}`, {
|
||||
headers: {
|
||||
Accept: 'text/plain',
|
||||
},
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
let message = response.statusText || 'Failed to load documentation';
|
||||
|
||||
try {
|
||||
message = await parse_api_error(response.json());
|
||||
} catch {}
|
||||
|
||||
error.value = message;
|
||||
return;
|
||||
}
|
||||
|
||||
const text = await response.text();
|
||||
content.value = String(markdownParser.parse(text));
|
||||
} catch (e: unknown) {
|
||||
console.error(e);
|
||||
error.value = e.message;
|
||||
error.value = e instanceof Error ? e.message : String(e);
|
||||
} finally {
|
||||
isLoading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(async () => loader(props.file));
|
||||
onUpdated(() => addListeners());
|
||||
onBeforeUnmount(() => removeListeners());
|
||||
const handleClick = async (event: MouseEvent) => {
|
||||
const target = (event.target as HTMLElement | null)?.closest(
|
||||
'a[data-doc-route]',
|
||||
) as HTMLAnchorElement | null;
|
||||
|
||||
if (!target) {
|
||||
return;
|
||||
}
|
||||
|
||||
const href = target.getAttribute('data-doc-route');
|
||||
if (!href) {
|
||||
return;
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
await navigateTo(href);
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.file,
|
||||
async (file) => {
|
||||
if (import.meta.server) {
|
||||
return;
|
||||
}
|
||||
|
||||
await loader(file);
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,73 +0,0 @@
|
|||
<template>
|
||||
<div class="message">
|
||||
<div
|
||||
@click="$emit('toggle')"
|
||||
class="is-clickable is-pulled-right is-unselectable"
|
||||
v-if="useToggle"
|
||||
>
|
||||
<span class="icon">
|
||||
<i class="fas" :class="{ 'fa-arrow-up': toggle, 'fa-arrow-down': !toggle }"></i>
|
||||
</span>
|
||||
<span>{{ toggle ? 'Close' : 'Open' }}</span>
|
||||
</div>
|
||||
<div
|
||||
class="is-unselectable message-header"
|
||||
:class="{ 'is-clickable': useToggle }"
|
||||
v-if="title || icon"
|
||||
@click="true === useToggle ? $emit('toggle', toggle) : null"
|
||||
>
|
||||
<template v-if="icon">
|
||||
<span class="icon-text">
|
||||
<span class="icon"><i :class="icon"></i></span>
|
||||
<span>{{ title }}</span>
|
||||
</span>
|
||||
</template>
|
||||
<template v-else>{{ title }}</template>
|
||||
<button class="delete" @click="$emit('close')" v-if="!useToggle && useClose" />
|
||||
</div>
|
||||
<div
|
||||
class="content message-body is-text-break"
|
||||
v-if="false === useToggle || toggle"
|
||||
:class="body_class"
|
||||
>
|
||||
<template v-if="message">{{ message }}</template>
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
withDefaults(
|
||||
defineProps<{
|
||||
/** Title text for the notification */
|
||||
title?: string | null;
|
||||
/** Icon class for the notification */
|
||||
icon?: string | null;
|
||||
/** Main message content */
|
||||
message?: string | null;
|
||||
/** If true, show toggle button */
|
||||
useToggle?: boolean;
|
||||
/** Current toggle state */
|
||||
toggle?: boolean;
|
||||
/** If true, show close button */
|
||||
useClose?: boolean;
|
||||
body_class?: string | null;
|
||||
}>(),
|
||||
{
|
||||
title: null,
|
||||
icon: null,
|
||||
message: null,
|
||||
useToggle: false,
|
||||
toggle: false,
|
||||
useClose: false,
|
||||
body_class: null,
|
||||
},
|
||||
);
|
||||
|
||||
defineEmits<{
|
||||
/** Emitted when the toggle button is clicked */
|
||||
(e: 'toggle', value?: boolean): void;
|
||||
/** Emitted when the close button is clicked */
|
||||
(e: 'close'): void;
|
||||
}>();
|
||||
</script>
|
||||
|
|
@ -1,53 +0,0 @@
|
|||
<style>
|
||||
.model-content {
|
||||
width: 70vw;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div>
|
||||
<div class="modal is-active">
|
||||
<div class="model-title" v-if="title" />
|
||||
<div class="modal-background" @click="emitter('close')"></div>
|
||||
<div class="modal-content" :class="contentClass">
|
||||
<slot />
|
||||
</div>
|
||||
<button class="modal-close is-large" aria-label="close" @click="emitter('close')"></button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { disableOpacity, enableOpacity } from '~/utils';
|
||||
|
||||
const emitter = defineEmits(['close']);
|
||||
|
||||
defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
default: '',
|
||||
required: false,
|
||||
},
|
||||
contentClass: {
|
||||
type: String,
|
||||
default: '',
|
||||
required: false,
|
||||
},
|
||||
});
|
||||
|
||||
const handle_event = (e: KeyboardEvent) => {
|
||||
if (e.key !== 'Escape') {
|
||||
return;
|
||||
}
|
||||
emitter('close');
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
document.addEventListener('keydown', handle_event);
|
||||
disableOpacity();
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
document.removeEventListener('keydown', handle_event);
|
||||
enableOpacity();
|
||||
});
|
||||
</script>
|
||||
|
|
@ -1,105 +0,0 @@
|
|||
<style scoped>
|
||||
code {
|
||||
color: var(--bulma-code) !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="modal is-active" v-if="false === externalModel">
|
||||
<div class="modal-background" @click="emitter('closeModel')"></div>
|
||||
<div class="modal-content modal-content-max">
|
||||
<div style="font-size: 30vh; width: 99%" class="has-text-centered" v-if="isLoading">
|
||||
<i class="fas fa-circle-notch fa-spin" />
|
||||
</div>
|
||||
<div v-else>
|
||||
<div class="content p-0 m-0" style="position: relative">
|
||||
<pre :class="[code_classes, custom_classes]"><code class="p-4 is-block" v-text="data" />
|
||||
<div class="m-4 is-flex" style="position: absolute; top:0; right:0;">
|
||||
<button class="button is-small is-purple mr-3" @click="() => toggleClass('is-pre-wrap-force')">
|
||||
<span class="icon"><i class="fas fa-text-width" /></span>
|
||||
</button>
|
||||
<button class="button is-info is-small" @click="() => copyText(JSON.stringify(data, null, 2))" >
|
||||
<span class="icon"><i class="fas fa-copy" /></span>
|
||||
</button>
|
||||
</div>
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="modal-close is-large"
|
||||
aria-label="close"
|
||||
@click="emitter('closeModel')"
|
||||
></button>
|
||||
</div>
|
||||
<div class="modal-content-max" style="height: 80vh" v-else>
|
||||
<div class="content p-0 m-0" style="position: relative">
|
||||
<div style="font-size: 30vh; width: 99%" class="has-text-centered" v-if="isLoading">
|
||||
<i class="fas fa-circle-notch fa-spin" />
|
||||
</div>
|
||||
<div v-else>
|
||||
<pre
|
||||
:class="[code_classes, custom_classes]"
|
||||
><code class="p-4 is-block" v-text="data" /></pre>
|
||||
<div class="m-4 is-flex" style="position: absolute; top: 0; right: 0">
|
||||
<button
|
||||
class="button is-small is-purple mr-3"
|
||||
@click="() => toggleClass('is-pre-wrap-force')"
|
||||
>
|
||||
<span class="icon"><i class="fas fa-text-width" /></span>
|
||||
</button>
|
||||
<button
|
||||
class="button is-info is-small"
|
||||
@click="() => copyText(JSON.stringify(data, null, 2))"
|
||||
>
|
||||
<span class="icon"><i class="fas fa-copy" /></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useStorage } from '@vueuse/core';
|
||||
import { disableOpacity, enableOpacity } from '~/utils';
|
||||
|
||||
const emitter = defineEmits<{ (e: 'closeModel'): void }>();
|
||||
|
||||
withDefaults(
|
||||
defineProps<{ externalModel?: boolean; data: any; code_classes?: string; isLoading?: boolean }>(),
|
||||
{
|
||||
code_classes: '',
|
||||
isLoading: false,
|
||||
externalModel: false,
|
||||
},
|
||||
);
|
||||
|
||||
const custom_classes = useStorage<string>('modal_text_classes', '');
|
||||
|
||||
const handle_event = (e: KeyboardEvent): void => {
|
||||
if (e.key === 'Escape') {
|
||||
emitter('closeModel');
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(async (): Promise<void> => {
|
||||
disableOpacity();
|
||||
document.addEventListener('keydown', handle_event);
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
enableOpacity();
|
||||
document.removeEventListener('keydown', handle_event);
|
||||
});
|
||||
|
||||
const toggleClass = (className: string) => {
|
||||
if (custom_classes.value.includes(className)) {
|
||||
custom_classes.value = custom_classes.value.replace(className, '').trim();
|
||||
} else {
|
||||
custom_classes.value += ` ${className}`;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
File diff suppressed because it is too large
Load diff
|
|
@ -1,16 +0,0 @@
|
|||
<template>
|
||||
<Message class="is-success">
|
||||
<span class="icon"><i class="fas fa-info-circle" /></span>
|
||||
<span>
|
||||
A New WebUI Version installed, please
|
||||
<NuxtLink class="is-bold" @click="reloadPage">click here</NuxtLink>
|
||||
to reload the app.
|
||||
</span>
|
||||
</Message>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import Message from '~/components/Message.vue';
|
||||
|
||||
const reloadPage = () => window.location.reload();
|
||||
</script>
|
||||
File diff suppressed because it is too large
Load diff
|
|
@ -1,143 +1,202 @@
|
|||
<style scoped>
|
||||
.notification-item {
|
||||
border-left: 4px solid transparent;
|
||||
padding-left: 0.75rem;
|
||||
border-bottom: 1px solid #f5f5f5;
|
||||
}
|
||||
|
||||
.notification-info {
|
||||
border-color: var(--bulma-info);
|
||||
}
|
||||
|
||||
.notification-success {
|
||||
border-color: var(--bulma-primary);
|
||||
}
|
||||
|
||||
.notification-warning {
|
||||
border-color: var(--bulma-warning);
|
||||
}
|
||||
|
||||
.notification-error {
|
||||
border-color: var(--bulma-danger);
|
||||
}
|
||||
|
||||
.notification-list {
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.notification-message {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
cursor: pointer;
|
||||
max-width: 280px;
|
||||
}
|
||||
|
||||
.notification-message.expanded {
|
||||
white-space: normal;
|
||||
word-break: break-word;
|
||||
max-width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<template>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link">
|
||||
<span class="icon"><i class="fas fa-bell" /></span>
|
||||
<span class="tag ml-2" :class="store.severityColor">
|
||||
<span :class="{ 'is-bold': store.unreadCount }">{{ store.unreadCount }}</span>
|
||||
<span> / </span>
|
||||
<span class="is-underlined">{{ store.notifications.length }}</span>
|
||||
</span>
|
||||
<span class="icon ml-2" v-if="store.severityIcon"><i :class="store.severityIcon" /></span>
|
||||
</a>
|
||||
<div class="navbar-dropdown is-right" style="width: 400px">
|
||||
<template v-if="store.notifications.length > 0">
|
||||
<div class="px-3 py-2 is-flex is-justify-content-space-between is-align-items-center">
|
||||
<span class="has-text-grey"></span>
|
||||
|
||||
<div class="field is-grouped">
|
||||
<div class="control" v-if="store.unreadCount > 0">
|
||||
<button class="button is-small is-light mr-1" @click="store.markAllRead">
|
||||
<span class="icon"><i class="fas fa-check" /></span>
|
||||
<span>Mark all read</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="control">
|
||||
<button class="button is-small is-danger is-light" @click="store.clear">
|
||||
<span class="icon"><i class="fas fa-trash" /></span>
|
||||
<span>Clear all</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="navbar-divider" />
|
||||
<UPopover :content="{ align: 'end', side: 'bottom', sideOffset: 8 }">
|
||||
<UButton color="neutral" variant="ghost" size="sm">
|
||||
<template #leading>
|
||||
<UIcon name="i-lucide-bell" class="size-4" />
|
||||
</template>
|
||||
<div class="notification-list">
|
||||
<div
|
||||
v-for="n in store.notifications"
|
||||
:key="n.id"
|
||||
class="pr-1 pl-1 navbar-item is-flex is-align-items-start"
|
||||
:class="['notification-item', 'notification-' + n.level]"
|
||||
<span class="hidden sm:inline">Notifications</span>
|
||||
<template #trailing>
|
||||
<UBadge :color="severityTone" variant="soft" size="sm"
|
||||
>{{ store.unreadCount }}/{{ store.notifications.length }}</UBadge
|
||||
>
|
||||
<div class="is-flex-grow-1">
|
||||
<p
|
||||
class="is-size-7 mb-1 notification-message"
|
||||
:class="{ expanded: expandedId === n.id }"
|
||||
@click="toggleExpand(n.id)"
|
||||
</template>
|
||||
</UButton>
|
||||
|
||||
<template #content>
|
||||
<UCard
|
||||
class="w-md max-w-[calc(100vw-1rem)]"
|
||||
:ui="{
|
||||
header: 'flex items-center justify-between gap-3',
|
||||
body: 'sm:p-2 p-0',
|
||||
footer: 'flex justify-end gap-2',
|
||||
}"
|
||||
>
|
||||
{{ n.message }}
|
||||
</p>
|
||||
<p class="is-size-7 has-text-grey">
|
||||
<span
|
||||
:date-datetime="n.created"
|
||||
v-tooltip="moment(n.created).format('YYYY-M-DD H:mm Z')"
|
||||
v-rtime="n.created"
|
||||
/>
|
||||
-
|
||||
<NuxtLink @click="copy_text(n.id, n.message)">
|
||||
<span v-if="copiedId === n.id" class="has-text-success">Copied!</span>
|
||||
<template #header>
|
||||
<div>
|
||||
<p class="text-sm font-semibold text-highlighted">Notifications</p>
|
||||
<p class="text-xs text-toned">Recent activity and errors.</p>
|
||||
</div>
|
||||
|
||||
<UBadge :color="severityTone" variant="soft" size="sm">
|
||||
{{ store.unreadCount }} unread
|
||||
</UBadge>
|
||||
</template>
|
||||
|
||||
<template #default>
|
||||
<div v-if="store.sortedNotifications.length > 0" class="max-h-104 overflow-y-auto p-0">
|
||||
<div class="space-y-2">
|
||||
<UAlert
|
||||
v-for="item in store.sortedNotifications"
|
||||
:key="item.id"
|
||||
orientation="horizontal"
|
||||
variant="outline"
|
||||
color="neutral"
|
||||
:icon="notificationIcon(item.level)"
|
||||
:title="item.message"
|
||||
:description="moment(item.created).fromNow()"
|
||||
:ui="{
|
||||
root: 'rounded-md border border-default border-l-4 bg-default px-3 py-2 transition-colors hover:bg-muted/40',
|
||||
icon: 'size-4 mt-0.5',
|
||||
title:
|
||||
expandedId === item.id
|
||||
? 'whitespace-normal break-words text-sm'
|
||||
: 'truncate text-sm',
|
||||
description: 'mt-1 text-xs text-toned',
|
||||
actions: 'items-center gap-1 ml-2',
|
||||
}"
|
||||
:class="notificationAlertClass(item.level, item.id)"
|
||||
@click="handleNotificationClick(item.id)"
|
||||
>
|
||||
<template #description>
|
||||
<span class="flex items-center gap-1 text-xs text-toned">
|
||||
<UTooltip :text="moment(item.created).format('YYYY-M-DD H:mm Z')">
|
||||
<span :date-datetime="item.created" v-rtime="item.created" />
|
||||
</UTooltip>
|
||||
<span>-</span>
|
||||
<button
|
||||
type="button"
|
||||
class="underline underline-offset-2"
|
||||
@click.stop="copy_text(item.id, item.message)"
|
||||
>
|
||||
<span v-if="copiedId === item.id" class="text-success">Copied!</span>
|
||||
<span v-else>Copy</span>
|
||||
</NuxtLink>
|
||||
</p>
|
||||
</div>
|
||||
<div class="ml-3 is-flex is-flex-direction-column is-justify-content-center">
|
||||
<div class="field is-grouped">
|
||||
<div class="control" v-if="!n.seen">
|
||||
<button class="button is-small is-light" @click="store.markRead(n.id)">
|
||||
<span class="icon"><i class="fas fa-check" /></span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="control">
|
||||
<button class="button is-danger is-small" @click="store.remove(n.id)">
|
||||
<span class="icon"><i class="fas fa-trash" /></span>
|
||||
</button>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<template #actions>
|
||||
<UButton
|
||||
v-if="!item.seen"
|
||||
color="neutral"
|
||||
variant="ghost"
|
||||
size="xs"
|
||||
square
|
||||
@click.stop="store.markRead(item.id)"
|
||||
>
|
||||
<UIcon name="i-lucide-check" class="size-3.5" />
|
||||
</UButton>
|
||||
<UButton
|
||||
color="error"
|
||||
variant="ghost"
|
||||
size="xs"
|
||||
square
|
||||
@click.stop="store.remove(item.id)"
|
||||
>
|
||||
<UIcon name="i-lucide-trash" class="size-3.5" />
|
||||
</UButton>
|
||||
</template>
|
||||
</UAlert>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="store.notifications.length < 1" class="navbar-item is-flex is-align-items-start">
|
||||
<div class="is-flex-grow-1 has-text-centered has-text-grey">
|
||||
<p class="is-size-7">No notifications</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<UEmpty
|
||||
v-else
|
||||
icon="i-lucide-inbox"
|
||||
title="No notifications"
|
||||
description="You do not have any stored notifications yet."
|
||||
class="px-4 py-8"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template #footer>
|
||||
<UButton
|
||||
color="neutral"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
icon="i-lucide-check"
|
||||
:disabled="store.unreadCount === 0"
|
||||
@click="store.markAllRead()"
|
||||
>
|
||||
Mark all read
|
||||
</UButton>
|
||||
|
||||
<UButton
|
||||
color="error"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
icon="i-lucide-trash"
|
||||
:disabled="store.notifications.length === 0"
|
||||
@click="store.clear()"
|
||||
>
|
||||
Clear all
|
||||
</UButton>
|
||||
</template>
|
||||
</UCard>
|
||||
</template>
|
||||
</UPopover>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import moment from 'moment';
|
||||
import type { notificationType } from '~/composables/useNotification';
|
||||
|
||||
const store = useNotificationStore();
|
||||
|
||||
const copiedId = ref<string | null>(null);
|
||||
const expandedId = ref<string | null>(null);
|
||||
|
||||
const severityTone = computed(() => {
|
||||
switch (store.severityLevel) {
|
||||
case 'error':
|
||||
return 'error' as const;
|
||||
case 'warning':
|
||||
return 'warning' as const;
|
||||
case 'success':
|
||||
return 'success' as const;
|
||||
case 'info':
|
||||
return 'info' as const;
|
||||
default:
|
||||
return 'neutral' as const;
|
||||
}
|
||||
});
|
||||
|
||||
const notificationIcon = (level: notificationType): string => {
|
||||
switch (level) {
|
||||
case 'error':
|
||||
return 'i-lucide-triangle-alert';
|
||||
case 'warning':
|
||||
return 'i-lucide-circle-alert';
|
||||
case 'success':
|
||||
return 'i-lucide-badge-check';
|
||||
case 'info':
|
||||
default:
|
||||
return 'i-lucide-info';
|
||||
}
|
||||
};
|
||||
|
||||
const notificationAlertClass = (level: notificationType, id: string): string => {
|
||||
const selectedClass = expandedId.value === id ? 'bg-muted/55 ring-1 ring-inset ring-default' : '';
|
||||
|
||||
switch (level) {
|
||||
case 'error':
|
||||
return `border-l-error text-default ${selectedClass}`.trim();
|
||||
case 'warning':
|
||||
return `border-l-warning text-default ${selectedClass}`.trim();
|
||||
case 'success':
|
||||
return `border-l-success text-default ${selectedClass}`.trim();
|
||||
case 'info':
|
||||
default:
|
||||
return `border-l-info text-default ${selectedClass}`.trim();
|
||||
}
|
||||
};
|
||||
|
||||
const toggleExpand = (id: string) => (expandedId.value = expandedId.value === id ? null : id);
|
||||
|
||||
const handleNotificationClick = (id: string) => {
|
||||
toggleExpand(id);
|
||||
store.markRead(id);
|
||||
};
|
||||
|
||||
const copy_text = (id: string, text: string): void => {
|
||||
copiedId.value = id;
|
||||
copyText(text, false, false);
|
||||
|
|
|
|||
|
|
@ -1,103 +1,115 @@
|
|||
<template>
|
||||
<div class="field is-grouped">
|
||||
<div class="control">
|
||||
<button
|
||||
rel="first"
|
||||
class="button"
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<UButton
|
||||
v-if="page !== 1"
|
||||
rel="first"
|
||||
aria-label="Go to first page"
|
||||
color="neutral"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
icon="i-lucide-chevrons-left"
|
||||
:disabled="isLoading"
|
||||
:loading="isLoading"
|
||||
square
|
||||
@click="changePage(1)"
|
||||
:disabled="isLoading"
|
||||
:class="{ 'is-loading': isLoading }"
|
||||
>
|
||||
<span class="icon"><i class="fas fa-angle-double-left"></i></span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="control">
|
||||
<button
|
||||
rel="prev"
|
||||
class="button"
|
||||
/>
|
||||
|
||||
<UButton
|
||||
v-if="page > 1 && page - 1 !== 1"
|
||||
@click="changePage(page - 1)"
|
||||
rel="prev"
|
||||
aria-label="Go to previous page"
|
||||
color="neutral"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
icon="i-lucide-chevron-left"
|
||||
:disabled="isLoading"
|
||||
:class="{ 'is-loading': isLoading }"
|
||||
>
|
||||
<span class="icon"><i class="fas fa-angle-left"></i></span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="control">
|
||||
<div class="select">
|
||||
<select
|
||||
:loading="isLoading"
|
||||
square
|
||||
@click="changePage(page - 1)"
|
||||
/>
|
||||
|
||||
<USelect
|
||||
id="pager_list"
|
||||
v-model="currentPage"
|
||||
@change="changePage(currentPage)"
|
||||
:items="paginationItems"
|
||||
value-key="page"
|
||||
label-key="text"
|
||||
color="neutral"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
class="min-w-52"
|
||||
:disabled="isLoading"
|
||||
>
|
||||
<option
|
||||
v-for="(item, index) in makePagination(page, last_page)"
|
||||
:key="`pager-${index}`"
|
||||
:value="item.page"
|
||||
:disabled="0 === item.page"
|
||||
>
|
||||
{{ item.text }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control">
|
||||
<button
|
||||
rel="next"
|
||||
class="button"
|
||||
:ui="{ base: 'w-full' }"
|
||||
@update:model-value="changePage"
|
||||
/>
|
||||
|
||||
<UButton
|
||||
v-if="page !== last_page && page + 1 !== last_page"
|
||||
rel="next"
|
||||
aria-label="Go to next page"
|
||||
color="neutral"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
icon="i-lucide-chevron-right"
|
||||
:disabled="isLoading"
|
||||
:loading="isLoading"
|
||||
square
|
||||
@click="changePage(page + 1)"
|
||||
:disabled="isLoading"
|
||||
:class="{ 'is-loading': isLoading }"
|
||||
>
|
||||
<span class="icon"><i class="fas fa-angle-right"></i></span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="control">
|
||||
<button
|
||||
rel="last"
|
||||
class="button"
|
||||
/>
|
||||
|
||||
<UButton
|
||||
v-if="page !== last_page"
|
||||
@click="changePage(last_page)"
|
||||
rel="last"
|
||||
aria-label="Go to last page"
|
||||
color="neutral"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
icon="i-lucide-chevrons-right"
|
||||
:disabled="isLoading"
|
||||
:class="{ 'is-loading': isLoading }"
|
||||
>
|
||||
<span class="icon"><i class="fas fa-angle-double-right"></i></span>
|
||||
</button>
|
||||
</div>
|
||||
:loading="isLoading"
|
||||
square
|
||||
@click="changePage(last_page)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
<script setup lang="ts">
|
||||
import { makePagination } from '~/utils/index';
|
||||
|
||||
const emitter = defineEmits(['navigate']);
|
||||
const emitter = defineEmits<{
|
||||
(e: 'navigate', page: number): void;
|
||||
}>();
|
||||
|
||||
const props = defineProps({
|
||||
page: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
last_page: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
isLoading: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
|
||||
const changePage = (p) => {
|
||||
if (p < 1 || p > props.last_page) {
|
||||
return;
|
||||
}
|
||||
emitter('navigate', p);
|
||||
currentPage.value = p;
|
||||
};
|
||||
const props = defineProps<{
|
||||
page: number;
|
||||
last_page: number;
|
||||
isLoading?: boolean;
|
||||
}>();
|
||||
|
||||
const currentPage = ref(props.page);
|
||||
|
||||
const paginationItems = computed(() =>
|
||||
makePagination(props.page, props.last_page).map((item) => ({
|
||||
...item,
|
||||
disabled: item.page === 0,
|
||||
})),
|
||||
);
|
||||
|
||||
watch(
|
||||
() => props.page,
|
||||
(value) => {
|
||||
currentPage.value = value;
|
||||
},
|
||||
);
|
||||
|
||||
const changePage = (page: number | string): void => {
|
||||
const nextPage = Number(page);
|
||||
if (Number.isNaN(nextPage) || nextPage < 1 || nextPage > props.last_page) {
|
||||
currentPage.value = props.page;
|
||||
return;
|
||||
}
|
||||
|
||||
emitter('navigate', nextPage);
|
||||
currentPage.value = nextPage;
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,413 +0,0 @@
|
|||
<template>
|
||||
<div
|
||||
class="popover-wrapper"
|
||||
ref="triggerElm"
|
||||
:tabindex="triggerTabIndex"
|
||||
@mouseenter="handleHoverEnter"
|
||||
@mouseleave="handleHoverLeave"
|
||||
@focusin="handleFocusIn"
|
||||
@focusout="handleFocusOut"
|
||||
@click="handleClick"
|
||||
>
|
||||
<div class="popover-trigger">
|
||||
<slot name="trigger">
|
||||
<button type="button" class="button is-small is-rounded" aria-label="More information">
|
||||
<span class="icon is-small">
|
||||
<i class="fas fa-info-circle" aria-hidden="true" />
|
||||
</span>
|
||||
</button>
|
||||
</slot>
|
||||
</div>
|
||||
|
||||
<Teleport to="body">
|
||||
<div v-if="isOpen" class="popover-portal" ref="portal">
|
||||
<div
|
||||
ref="popover"
|
||||
class="popover-card box"
|
||||
:class="placementClass"
|
||||
role="tooltip"
|
||||
:style="portalStyle"
|
||||
@mouseenter="handleHoverEnter"
|
||||
@mouseleave="handleHoverLeave"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="button is-bold is-fullwidth is-hidden-tablet"
|
||||
@click="closePopover"
|
||||
>
|
||||
<span class="icon"><i class="fas fa-times" /></span>
|
||||
<span>Close</span>
|
||||
</button>
|
||||
|
||||
<header v-if="hasTitleContent" class="popover-title mb-2">
|
||||
<slot name="title">
|
||||
<p class="title is-6 mb-1">{{ title }}</p>
|
||||
</slot>
|
||||
</header>
|
||||
|
||||
<section v-if="hasBodyContent" class="popover-body">
|
||||
<slot>
|
||||
<p class="is-size-7 mb-0">{{ description }}</p>
|
||||
</slot>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</Teleport>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { PopoverProps } from '~/types/popover';
|
||||
import {
|
||||
computed,
|
||||
nextTick,
|
||||
onBeforeUnmount,
|
||||
onMounted,
|
||||
ref,
|
||||
useSlots,
|
||||
watch,
|
||||
useTemplateRef,
|
||||
} from 'vue';
|
||||
|
||||
const emit = defineEmits<{ (event: 'shown' | 'hidden'): void }>();
|
||||
|
||||
const props = withDefaults(defineProps<PopoverProps>(), {
|
||||
placement: 'top',
|
||||
trigger: 'hover',
|
||||
offset: 10,
|
||||
disabled: false,
|
||||
closeOnClickOutside: true,
|
||||
title: '',
|
||||
description: '',
|
||||
minWidth: 220,
|
||||
maxWidth: 340,
|
||||
maxHeight: 360,
|
||||
showDelay: 0,
|
||||
});
|
||||
|
||||
const slots = useSlots();
|
||||
const isOpen = ref(false);
|
||||
const triggerRef = useTemplateRef<HTMLElement>('triggerElm');
|
||||
const popover = useTemplateRef<HTMLDivElement>('popover');
|
||||
const portalStyle = ref<Record<string, string>>({});
|
||||
const hoverTimeout = ref<number | null>(null);
|
||||
const openTimeout = ref<number | null>(null);
|
||||
|
||||
const placementClass = computed(() => `is-${props.placement}`);
|
||||
const triggerTabIndex = computed(() => (props.trigger === 'hover' ? -1 : 0));
|
||||
|
||||
const hasTitleContent = computed(() => Boolean(props.title) || Boolean(slots.title));
|
||||
const hasBodyContent = computed(() => Boolean(props.description) || Boolean(slots.default));
|
||||
|
||||
const clearHoverTimeout = () => {
|
||||
if (null !== hoverTimeout.value) {
|
||||
window.clearTimeout(hoverTimeout.value);
|
||||
hoverTimeout.value = null;
|
||||
}
|
||||
};
|
||||
|
||||
const clearOpenTimeout = () => {
|
||||
if (null !== openTimeout.value) {
|
||||
window.clearTimeout(openTimeout.value);
|
||||
openTimeout.value = null;
|
||||
}
|
||||
};
|
||||
|
||||
const scheduleClose = () => {
|
||||
clearHoverTimeout();
|
||||
clearOpenTimeout();
|
||||
hoverTimeout.value = window.setTimeout(() => {
|
||||
isOpen.value = false;
|
||||
}, 120);
|
||||
};
|
||||
|
||||
const openPopoverImmediate = async () => {
|
||||
if (props.disabled || isOpen.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
isOpen.value = true;
|
||||
await nextTick();
|
||||
updatePosition();
|
||||
};
|
||||
|
||||
const openPopover = () => {
|
||||
clearOpenTimeout();
|
||||
if (props.showDelay && 0 < props.showDelay) {
|
||||
openTimeout.value = window.setTimeout(() => {
|
||||
openTimeout.value = null;
|
||||
void openPopoverImmediate();
|
||||
}, props.showDelay);
|
||||
return;
|
||||
}
|
||||
|
||||
void openPopoverImmediate();
|
||||
};
|
||||
|
||||
const closePopover = () => {
|
||||
if (!isOpen.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
isOpen.value = false;
|
||||
};
|
||||
|
||||
const togglePopover = async () => {
|
||||
if (isOpen.value) {
|
||||
closePopover();
|
||||
return;
|
||||
}
|
||||
|
||||
openPopover();
|
||||
};
|
||||
|
||||
const handleHoverEnter = () => {
|
||||
if ('hover' !== props.trigger || props.disabled) {
|
||||
return;
|
||||
}
|
||||
|
||||
clearHoverTimeout();
|
||||
openPopover();
|
||||
};
|
||||
|
||||
const handleHoverLeave = () => {
|
||||
if ('hover' !== props.trigger) {
|
||||
return;
|
||||
}
|
||||
|
||||
clearOpenTimeout();
|
||||
scheduleClose();
|
||||
};
|
||||
|
||||
const handleFocusIn = () => {
|
||||
if ('focus' !== props.trigger || props.disabled) {
|
||||
return;
|
||||
}
|
||||
|
||||
openPopover();
|
||||
};
|
||||
|
||||
const handleFocusOut = () => {
|
||||
if ('focus' !== props.trigger) {
|
||||
return;
|
||||
}
|
||||
|
||||
clearOpenTimeout();
|
||||
scheduleClose();
|
||||
};
|
||||
|
||||
const handleClick = (event: MouseEvent) => {
|
||||
if ('click' !== props.trigger || props.disabled) {
|
||||
return;
|
||||
}
|
||||
|
||||
event.stopPropagation();
|
||||
void togglePopover();
|
||||
};
|
||||
|
||||
const handleDocumentClick = (event: MouseEvent) => {
|
||||
if (!props.closeOnClickOutside || 'click' !== props.trigger) {
|
||||
return;
|
||||
}
|
||||
|
||||
const target = event.target as Node | null;
|
||||
const isInsideTrigger = Boolean(triggerRef.value && triggerRef.value.contains(target));
|
||||
const isInsidePopover = Boolean(popover.value && popover.value.contains(target));
|
||||
|
||||
if (!isInsideTrigger && !isInsidePopover) {
|
||||
clearOpenTimeout();
|
||||
closePopover();
|
||||
}
|
||||
};
|
||||
|
||||
const handleEscape = (event: KeyboardEvent) => {
|
||||
if ('Escape' === event.key && isOpen.value) {
|
||||
closePopover();
|
||||
}
|
||||
};
|
||||
|
||||
const updatePosition = () => {
|
||||
if (!triggerRef.value || !popover.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
const viewportWidth = window.innerWidth;
|
||||
const viewportHeight = window.innerHeight;
|
||||
const constrainedMaxWidth = Math.min(props.maxWidth, viewportWidth * 0.96);
|
||||
|
||||
popover.value.style.minWidth = `${props.minWidth}px`;
|
||||
popover.value.style.maxWidth = `${constrainedMaxWidth}px`;
|
||||
popover.value.style.maxHeight = `${props.maxHeight}px`;
|
||||
popover.value.style.overflowY = 'auto';
|
||||
|
||||
const triggerRect = triggerRef.value.getBoundingClientRect();
|
||||
const popoverRect = popover.value.getBoundingClientRect();
|
||||
const offset = props.offset;
|
||||
|
||||
let effectivePlacement = props.placement;
|
||||
|
||||
if ('top' === props.placement) {
|
||||
const spaceAbove = triggerRect.top - offset;
|
||||
if (spaceAbove < popoverRect.height) {
|
||||
effectivePlacement = 'bottom';
|
||||
}
|
||||
} else if ('bottom' === props.placement) {
|
||||
const spaceBelow = viewportHeight - triggerRect.bottom - offset;
|
||||
if (spaceBelow < popoverRect.height) {
|
||||
effectivePlacement = 'top';
|
||||
}
|
||||
} else if ('left' === props.placement) {
|
||||
const spaceLeft = triggerRect.left - offset;
|
||||
if (spaceLeft < popoverRect.width) {
|
||||
effectivePlacement = 'right';
|
||||
}
|
||||
} else if ('right' === props.placement) {
|
||||
const spaceRight = viewportWidth - triggerRect.right - offset;
|
||||
if (spaceRight < popoverRect.width) {
|
||||
effectivePlacement = 'left';
|
||||
}
|
||||
}
|
||||
|
||||
let top = triggerRect.bottom + offset;
|
||||
let left = triggerRect.left + (triggerRect.width - popoverRect.width) / 2;
|
||||
|
||||
if ('top' === effectivePlacement) {
|
||||
top = triggerRect.top - popoverRect.height - offset;
|
||||
} else if ('left' === effectivePlacement) {
|
||||
top = triggerRect.top + (triggerRect.height - popoverRect.height) / 2;
|
||||
left = triggerRect.left - popoverRect.width - offset;
|
||||
} else if ('right' === effectivePlacement) {
|
||||
top = triggerRect.top + (triggerRect.height - popoverRect.height) / 2;
|
||||
left = triggerRect.right + offset;
|
||||
}
|
||||
|
||||
const clamp = (value: number, min: number, max: number) => Math.min(Math.max(value, min), max);
|
||||
const maxLeft = viewportWidth - popoverRect.width - 8;
|
||||
const maxTop = viewportHeight - popoverRect.height - 8;
|
||||
|
||||
const clampedTop = clamp(Math.round(top), 8, maxTop);
|
||||
const clampedLeft = clamp(Math.round(left), 8, maxLeft);
|
||||
|
||||
portalStyle.value = {
|
||||
position: 'fixed',
|
||||
top: `${clampedTop}px`,
|
||||
left: `${clampedLeft}px`,
|
||||
minWidth: `${props.minWidth}px`,
|
||||
maxWidth: `${constrainedMaxWidth}px`,
|
||||
maxHeight: `${props.maxHeight}px`,
|
||||
overflowY: 'auto',
|
||||
};
|
||||
};
|
||||
|
||||
watch(isOpen, async (value) => {
|
||||
if (value) {
|
||||
await nextTick();
|
||||
updatePosition();
|
||||
await nextTick();
|
||||
emit('shown');
|
||||
return;
|
||||
}
|
||||
|
||||
emit('hidden');
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
document.addEventListener('click', handleDocumentClick, true);
|
||||
document.addEventListener('keydown', handleEscape);
|
||||
window.addEventListener('resize', updatePosition);
|
||||
window.addEventListener('scroll', updatePosition, true);
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
document.removeEventListener('click', handleDocumentClick, true);
|
||||
document.removeEventListener('keydown', handleEscape);
|
||||
window.removeEventListener('resize', updatePosition);
|
||||
window.removeEventListener('scroll', updatePosition, true);
|
||||
clearHoverTimeout();
|
||||
clearOpenTimeout();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.popover-wrapper {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
max-width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.popover-trigger {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
max-width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.popover-trigger > * {
|
||||
max-width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.popover-portal {
|
||||
position: fixed;
|
||||
z-index: 1050;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.popover-card {
|
||||
position: fixed;
|
||||
background-color: var(--bulma-scheme-main, #fff);
|
||||
color: var(--bulma-text, #363636);
|
||||
border: 1px solid var(--bulma-border, rgba(0, 0, 0, 0.08));
|
||||
box-shadow: var(
|
||||
--bulma-shadow,
|
||||
0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1),
|
||||
0 0px 0 1px rgba(10, 10, 10, 0.02)
|
||||
);
|
||||
border-radius: var(--bulma-radius-large, 0.5rem);
|
||||
pointer-events: auto;
|
||||
padding: 0.9rem 1rem;
|
||||
overflow-wrap: anywhere;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.popover-title {
|
||||
color: var(--bulma-text-strong, #1f1f1f);
|
||||
}
|
||||
|
||||
.popover-card::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: inherit;
|
||||
border-left: inherit;
|
||||
border-top: inherit;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.popover-card.is-top::after {
|
||||
bottom: -6px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) rotate(45deg);
|
||||
}
|
||||
|
||||
.popover-card.is-bottom::after {
|
||||
top: -6px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) rotate(45deg);
|
||||
}
|
||||
|
||||
.popover-card.is-left::after {
|
||||
right: -6px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%) rotate(45deg);
|
||||
}
|
||||
|
||||
.popover-card.is-right::after {
|
||||
left: -6px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%) rotate(45deg);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,354 +1,350 @@
|
|||
<template>
|
||||
<main class="columns mt-2 is-multiline">
|
||||
<div class="column is-12">
|
||||
<form autocomplete="off" id="presetForm" @submit.prevent="checkInfo">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-header-title is-text-overflow is-block">
|
||||
<span class="icon-text">
|
||||
<span class="icon"
|
||||
><i class="fa-solid" :class="reference ? 'fa-cog' : 'fa-plus'"
|
||||
/></span>
|
||||
<span>{{ reference ? 'Edit' : 'Add' }}</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="card-header-icon" v-if="reference">
|
||||
<button type="button" @click="showImport = !showImport">
|
||||
<span class="icon"
|
||||
><i
|
||||
class="fa-solid"
|
||||
:class="{
|
||||
'fa-arrow-down': !showImport,
|
||||
'fa-arrow-up': showImport,
|
||||
}"
|
||||
/></span>
|
||||
<span>{{ showImport ? 'Hide' : 'Show' }} import</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-content">
|
||||
<div class="columns is-multiline is-mobile">
|
||||
<template v-if="showImport || !reference">
|
||||
<div class="column is-6-tablet is-12-mobile">
|
||||
<div class="field">
|
||||
<label class="label is-inline" for="import_string">
|
||||
<span class="icon"><i class="fa-solid fa-file-import" /></span>
|
||||
Import from pre-existing preset
|
||||
</label>
|
||||
<div class="control is-expanded">
|
||||
<div class="select is-fullwidth">
|
||||
<select
|
||||
class="is-fullwidth"
|
||||
v-model="selected_preset"
|
||||
@change="import_existing_preset"
|
||||
>
|
||||
<option value="" disabled>Select a preset</option>
|
||||
<optgroup
|
||||
label="Custom presets"
|
||||
v-if="config?.presets.filter((p) => !p?.default).length > 0"
|
||||
>
|
||||
<option
|
||||
v-for="item in filter_presets(false)"
|
||||
:key="item.name"
|
||||
:value="item.name"
|
||||
>
|
||||
{{ prettyName(item.name) }}
|
||||
</option>
|
||||
</optgroup>
|
||||
<optgroup label="Default presets">
|
||||
<option
|
||||
v-for="item in filter_presets(true)"
|
||||
:key="item.name"
|
||||
:value="item.name"
|
||||
>
|
||||
{{ prettyName(item.name) }}
|
||||
</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<span class="help is-bold">
|
||||
<span class="icon"><i class="fa-solid fa-info" /></span>
|
||||
<span
|
||||
>Select a preset to import its data.
|
||||
<span class="has-text-danger"
|
||||
>Warning: This will overwrite the current form data.</span
|
||||
></span
|
||||
>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column is-6-tablet is-12-mobile">
|
||||
<div class="field">
|
||||
<label class="label is-inline" for="import_string">
|
||||
<span class="icon"><i class="fa-solid fa-file-import" /></span>
|
||||
Import string
|
||||
</label>
|
||||
<div class="field-body">
|
||||
<div class="field has-addons">
|
||||
<div class="control is-expanded">
|
||||
<input
|
||||
type="text"
|
||||
class="input"
|
||||
id="import_string"
|
||||
v-model="import_string"
|
||||
autocomplete="off"
|
||||
/>
|
||||
</div>
|
||||
<div class="control">
|
||||
<button
|
||||
class="button is-primary"
|
||||
:disabled="!import_string"
|
||||
<form id="presetForm" autocomplete="off" class="space-y-6" @submit.prevent="checkInfo">
|
||||
<div class="grid gap-4 md:grid-cols-2">
|
||||
<div v-if="reference" class="md:col-span-2 flex justify-end">
|
||||
<UButton
|
||||
type="button"
|
||||
@click="importItem"
|
||||
color="neutral"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
:icon="showImport ? 'i-lucide-chevron-up' : 'i-lucide-chevron-down'"
|
||||
@click="showImport = !showImport"
|
||||
>
|
||||
<span class="icon"><i class="fa-solid fa-add" /></span>
|
||||
<span>Import</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="help is-bold">
|
||||
<span class="icon"><i class="fa-solid fa-info" /></span>
|
||||
<span
|
||||
>Paste shared preset string here to import it.
|
||||
<span class="has-text-danger"
|
||||
>Warning: This will overwrite the current form data.</span
|
||||
></span
|
||||
>
|
||||
</span>
|
||||
{{ showImport ? 'Hide' : 'Show' }} import
|
||||
</UButton>
|
||||
</div>
|
||||
|
||||
<template v-if="showImport || !reference">
|
||||
<UFormField class="w-full" :ui="fieldUi">
|
||||
<template #label>
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<UIcon name="i-lucide-copy" class="size-4 text-toned" />
|
||||
<span class="font-semibold text-default">Import from pre-existing preset</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="column is-6-tablet is-12-mobile">
|
||||
<div class="field">
|
||||
<label class="label is-inline" for="name">
|
||||
<span class="icon"><i class="fa-solid fa-tag" /></span>
|
||||
Name
|
||||
</label>
|
||||
<div class="control">
|
||||
<input
|
||||
<template #description>
|
||||
<span>
|
||||
Select a preset to import its data. Warning: This will overwrite the current form
|
||||
data.
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<USelect
|
||||
v-model="selectedPreset"
|
||||
:items="importPresetItems"
|
||||
placeholder="Select a preset"
|
||||
value-key="value"
|
||||
label-key="label"
|
||||
size="lg"
|
||||
class="w-full"
|
||||
:ui="{ base: 'w-full' }"
|
||||
@update:model-value="() => void importExistingPreset()"
|
||||
/>
|
||||
</UFormField>
|
||||
|
||||
<UFormField class="w-full" :ui="fieldUi">
|
||||
<template #label>
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<UIcon name="i-lucide-import" class="size-4 text-toned" />
|
||||
<span class="font-semibold text-default">Import string</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #description>
|
||||
<span>
|
||||
Paste shared preset string here to import it. Warning: This will overwrite the current
|
||||
form data.
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<div class="flex flex-col gap-2 sm:flex-row">
|
||||
<UInput
|
||||
id="import_string"
|
||||
v-model="importString"
|
||||
type="text"
|
||||
class="input"
|
||||
autocomplete="off"
|
||||
size="lg"
|
||||
class="w-full"
|
||||
:ui="inputUi"
|
||||
/>
|
||||
|
||||
<UButton
|
||||
type="button"
|
||||
color="primary"
|
||||
icon="i-lucide-import"
|
||||
size="lg"
|
||||
:disabled="!importString"
|
||||
class="justify-center sm:min-w-28"
|
||||
@click="() => void importItem()"
|
||||
>
|
||||
Import
|
||||
</UButton>
|
||||
</div>
|
||||
</UFormField>
|
||||
</template>
|
||||
|
||||
<UFormField class="w-full" :ui="fieldUi">
|
||||
<template #label>
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<UIcon name="i-lucide-type" class="size-4 text-toned" />
|
||||
<span class="font-semibold text-default">Name</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #description>
|
||||
<span>Names are stored in lowercase with underscores (no spaces).</span>
|
||||
</template>
|
||||
|
||||
<UInput
|
||||
id="name"
|
||||
v-model="form.name"
|
||||
type="text"
|
||||
size="lg"
|
||||
:disabled="addInProgress"
|
||||
class="w-full"
|
||||
:ui="inputUi"
|
||||
/>
|
||||
</div>
|
||||
<span class="help is-bold">
|
||||
<span class="icon"><i class="fa-solid fa-info" /></span>
|
||||
<span>Names are stored in lowercase with underscores (no spaces).</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</UFormField>
|
||||
|
||||
<div class="column is-6-tablet is-12-mobile">
|
||||
<div class="field">
|
||||
<label class="label is-inline" for="priority">
|
||||
<span class="icon"><i class="fa-solid fa-sort-numeric-down" /></span>
|
||||
Priority
|
||||
</label>
|
||||
<div class="control">
|
||||
<input
|
||||
type="number"
|
||||
class="input"
|
||||
<UFormField class="w-full" :ui="fieldUi">
|
||||
<template #label>
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<UIcon name="i-lucide-list-ordered" class="size-4 text-toned" />
|
||||
<span class="font-semibold text-default">Priority</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #description>
|
||||
<span>Higher priority presets appear first in the list.</span>
|
||||
</template>
|
||||
|
||||
<UInput
|
||||
id="priority"
|
||||
v-model.number="form.priority"
|
||||
:disabled="addInProgress"
|
||||
type="number"
|
||||
min="0"
|
||||
placeholder="0"
|
||||
size="lg"
|
||||
:disabled="addInProgress"
|
||||
class="w-full"
|
||||
:ui="inputUi"
|
||||
/>
|
||||
</div>
|
||||
<span class="help">
|
||||
<span class="icon"><i class="fa-solid fa-info" /></span>
|
||||
<span class="is-bold">Higher priority presets appear first in the list.</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</UFormField>
|
||||
|
||||
<div class="column is-6-tablet is-12-mobile">
|
||||
<label class="label is-inline" for="folder">
|
||||
<span class="icon"><i class="fa-solid fa-save" /></span>
|
||||
download path
|
||||
</label>
|
||||
<div class="field has-addons">
|
||||
<div class="control" v-tooltip="`Full Path: ${config.app.download_path}`">
|
||||
<span class="button is-static">
|
||||
<span>{{ shortPath(config.app.download_path) }}</span>
|
||||
</span>
|
||||
<UFormField
|
||||
class="w-full"
|
||||
:ui="fieldUi"
|
||||
description="Use this defined path if none are given with the URL."
|
||||
>
|
||||
<template #label>
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<UIcon name="i-lucide-folder-output" class="size-4 text-toned" />
|
||||
<span class="font-semibold text-default">Download path</span>
|
||||
</div>
|
||||
<div class="control is-expanded">
|
||||
<input
|
||||
type="text"
|
||||
class="input"
|
||||
</template>
|
||||
|
||||
<div class="flex flex-col gap-2 sm:flex-row">
|
||||
<UTooltip :text="`Full Path: ${config.app.download_path}`">
|
||||
<div
|
||||
class="inline-flex min-h-11 items-center rounded-md border border-default bg-muted/30 px-3 text-sm text-toned"
|
||||
>
|
||||
{{ shortPath(config.app.download_path) }}
|
||||
</div>
|
||||
</UTooltip>
|
||||
|
||||
<UInput
|
||||
id="folder"
|
||||
placeholder="Leave empty to use default download path"
|
||||
v-model="form.folder"
|
||||
:disabled="addInProgress"
|
||||
list="folders"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<span class="help is-bold">
|
||||
<span class="icon"><i class="fa-solid fa-info" /></span>
|
||||
<span>Use this defined path if non are given with the URL.</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="column is-6-tablet is-12-mobile">
|
||||
<div class="field">
|
||||
<label class="label is-inline" for="output_template">
|
||||
<span class="icon"><i class="fa-solid fa-file" /></span>
|
||||
Output template
|
||||
</label>
|
||||
<div class="control">
|
||||
<input
|
||||
type="text"
|
||||
class="input"
|
||||
id="output_template"
|
||||
list="folders"
|
||||
placeholder="Leave empty to use default download path"
|
||||
size="lg"
|
||||
:disabled="addInProgress"
|
||||
placeholder="Leave empty to use default template."
|
||||
v-model="form.template"
|
||||
class="w-full"
|
||||
:ui="inputUi"
|
||||
/>
|
||||
</div>
|
||||
<span class="help is-bold">
|
||||
<span class="icon"><i class="fa-solid fa-info" /></span>
|
||||
<span>Use this output template if non are given with URL.</span>
|
||||
</span>
|
||||
</UFormField>
|
||||
|
||||
<UFormField
|
||||
class="w-full"
|
||||
:ui="fieldUi"
|
||||
description="Use this output template if none are given with URL."
|
||||
>
|
||||
<template #label>
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<UIcon name="i-lucide-file-code-2" class="size-4 text-toned" />
|
||||
<span class="font-semibold text-default">Output template</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<UInput
|
||||
id="output_template"
|
||||
v-model="form.template"
|
||||
type="text"
|
||||
placeholder="Leave empty to use default template."
|
||||
size="lg"
|
||||
:disabled="addInProgress"
|
||||
class="w-full"
|
||||
:ui="inputUi"
|
||||
/>
|
||||
</UFormField>
|
||||
</div>
|
||||
|
||||
<div class="column is-12">
|
||||
<div class="field">
|
||||
<label class="label is-unselectable" for="cli_options">
|
||||
<span class="icon"><i class="fa-solid fa-terminal" /></span>
|
||||
<span>Command options for yt-dlp</span>
|
||||
</label>
|
||||
<div class="space-y-5 border-t border-default pt-5">
|
||||
<UFormField class="w-full" :ui="editorFieldUi">
|
||||
<template #label>
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<UIcon name="i-lucide-terminal" class="size-4 text-toned" />
|
||||
<span class="font-semibold text-default">Command options for yt-dlp</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #description>
|
||||
<p class="text-sm text-toned">
|
||||
<button type="button" class="text-primary hover:underline" @click="showOptions = true">
|
||||
View all options</button
|
||||
>. Not all options are supported;
|
||||
<a
|
||||
target="_blank"
|
||||
class="text-primary hover:underline"
|
||||
href="https://github.com/arabcoders/ytptube/blob/master/app/features/ytdlp/utils.py#L29"
|
||||
>
|
||||
some are ignored.
|
||||
</a>
|
||||
</p>
|
||||
</template>
|
||||
<TextareaAutocomplete
|
||||
id="cli_options"
|
||||
v-model="form.cli"
|
||||
:options="ytDlpOpt"
|
||||
:disabled="addInProgress"
|
||||
/>
|
||||
<span class="help is-bold">
|
||||
<span class="icon"><i class="fa-solid fa-info" /></span>
|
||||
<span>
|
||||
<NuxtLink @click="showOptions = true">View all options</NuxtLink>. Not all
|
||||
options are supported
|
||||
<NuxtLink
|
||||
target="_blank"
|
||||
to="https://github.com/arabcoders/ytptube/blob/master/app/library/Utils.py#L26"
|
||||
>some are ignored</NuxtLink
|
||||
>. Use with caution.
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</UFormField>
|
||||
</div>
|
||||
|
||||
<div class="column is-6-tablet is-12-mobile">
|
||||
<div class="field">
|
||||
<label
|
||||
class="label is-inline"
|
||||
for="cookies"
|
||||
v-tooltip="'Netscape HTTP Cookie format.'"
|
||||
<div class="grid gap-5 border-t border-default pt-5 md:grid-cols-2">
|
||||
<div class="space-y-3">
|
||||
<UFormField class="h-full w-full" :ui="editorFieldUi">
|
||||
<template #label>
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<UIcon name="i-lucide-cookie" class="size-4 text-toned" />
|
||||
<span>Cookies</span>
|
||||
</div>
|
||||
</template>
|
||||
<template #description>
|
||||
<p class="text-sm text-toned">
|
||||
Use this cookies if none are given with the URL.
|
||||
<NuxtLink
|
||||
target="_blank"
|
||||
to="https://github.com/yt-dlp/yt-dlp/wiki/FAQ#how-do-i-pass-cookies-to-yt-dlp"
|
||||
class="text-sm text-primary hover:underline"
|
||||
>Recommended addon</NuxtLink
|
||||
>
|
||||
<span class="icon"><i class="fa-solid fa-cookie" /></span>
|
||||
Cookies -
|
||||
<NuxtLink @click="cookiesDropzoneRef?.triggerFileSelect()"
|
||||
>Upload file</NuxtLink
|
||||
</p>
|
||||
</template>
|
||||
<template #hint>
|
||||
<button
|
||||
type="button"
|
||||
class="text-sm font-medium text-primary hover:underline"
|
||||
@click="triggerCookieUpload"
|
||||
>
|
||||
</label>
|
||||
<div class="control">
|
||||
Upload file
|
||||
</button>
|
||||
</template>
|
||||
<TextDropzone
|
||||
ref="cookiesDropzoneRef"
|
||||
id="cookies"
|
||||
:rows="7"
|
||||
v-model="form.cookies"
|
||||
:disabled="addInProgress"
|
||||
@error="(msg: string) => toast.error(msg)"
|
||||
placeholder="Leave empty to use default cookies. Or drag & drop a cookie file here."
|
||||
/>
|
||||
</div>
|
||||
<span class="help is-bold">
|
||||
<span class="icon"><i class="fa-solid fa-info" /></span>
|
||||
<span
|
||||
>Use this cookies if non are given with the URL. Use the
|
||||
<NuxtLink
|
||||
target="_blank"
|
||||
to="https://github.com/yt-dlp/yt-dlp/wiki/FAQ#how-do-i-pass-cookies-to-yt-dlp"
|
||||
>
|
||||
Recommended addon</NuxtLink
|
||||
>
|
||||
by yt-dlp to export cookies. The cookies MUST be in Netscape HTTP Cookie
|
||||
format.
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</UFormField>
|
||||
</div>
|
||||
|
||||
<div class="column is-6-tablet is-12-mobile">
|
||||
<div class="field">
|
||||
<label class="label is-inline" for="description">
|
||||
<span class="icon"><i class="fa-solid fa-comment" /></span>
|
||||
Description
|
||||
</label>
|
||||
<div class="control">
|
||||
<textarea
|
||||
class="textarea"
|
||||
<div class="space-y-3">
|
||||
<UFormField class="h-full w-full" :ui="editorFieldUi">
|
||||
<template #label>
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<UIcon name="i-lucide-message-square-text" class="size-4 text-toned" />
|
||||
<span class="font-semibold text-default">Description</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #description>
|
||||
<p class="text-sm text-toned">
|
||||
Use this field to help users to understand how to use this preset.
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<UTextarea
|
||||
id="description"
|
||||
v-model="form.description"
|
||||
:disabled="addInProgress"
|
||||
placeholder="Extras instructions for users to follow"
|
||||
:rows="7"
|
||||
size="lg"
|
||||
variant="outline"
|
||||
color="neutral"
|
||||
class="w-full"
|
||||
:ui="textareaUi"
|
||||
/>
|
||||
</div>
|
||||
<span class="help is-bold">
|
||||
<span class="icon"><i class="fa-solid fa-info" /></span>
|
||||
<span>Use this field to help users to understand how to use this preset.</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</UFormField>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-footer">
|
||||
<div class="card-footer-item">
|
||||
<button
|
||||
class="button is-fullwidth is-primary"
|
||||
:disabled="addInProgress"
|
||||
type="submit"
|
||||
:class="{ 'is-loading': addInProgress }"
|
||||
form="presetForm"
|
||||
<div
|
||||
class="flex flex-col-reverse gap-2 border-t border-default pt-5 sm:flex-row sm:justify-end"
|
||||
>
|
||||
<span class="icon"><i class="fa-solid fa-save" /></span>
|
||||
<span>Save</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="card-footer-item">
|
||||
<button
|
||||
class="button is-fullwidth is-danger"
|
||||
@click="emitter('cancel')"
|
||||
:disabled="addInProgress"
|
||||
<UButton
|
||||
type="button"
|
||||
color="neutral"
|
||||
variant="outline"
|
||||
size="lg"
|
||||
icon="i-lucide-x"
|
||||
:disabled="addInProgress"
|
||||
class="justify-center"
|
||||
@click="emitter('cancel')"
|
||||
>
|
||||
<span class="icon"><i class="fa-solid fa-times" /></span>
|
||||
<span>Cancel</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
Cancel
|
||||
</UButton>
|
||||
|
||||
<UButton
|
||||
type="submit"
|
||||
color="primary"
|
||||
size="lg"
|
||||
icon="i-lucide-save"
|
||||
:disabled="addInProgress"
|
||||
:loading="addInProgress"
|
||||
class="justify-center"
|
||||
>
|
||||
Save
|
||||
</UButton>
|
||||
</div>
|
||||
|
||||
<datalist id="folders" v-if="config?.folders">
|
||||
<datalist v-if="config?.folders" id="folders">
|
||||
<option v-for="dir in config.folders" :key="dir" :value="dir" />
|
||||
</datalist>
|
||||
|
||||
<Modal v-if="showOptions" @close="showOptions = false" :contentClass="'modal-content-max'">
|
||||
<UModal
|
||||
v-if="showOptions"
|
||||
v-model:open="showOptions"
|
||||
title="yt-dlp options"
|
||||
:dismissible="true"
|
||||
:ui="{ content: 'sm:max-w-6xl', body: 'p-0' }"
|
||||
>
|
||||
<template #description>
|
||||
<span class="sr-only">Browse available yt-dlp flags and descriptions.</span>
|
||||
</template>
|
||||
|
||||
<template #body>
|
||||
<YTDLPOptions />
|
||||
</Modal>
|
||||
</main>
|
||||
</template>
|
||||
</UModal>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
|
@ -358,7 +354,7 @@ import TextDropzone from '~/components/TextDropzone.vue';
|
|||
import type { ImportedItem } from '~/types';
|
||||
import type { AutoCompleteOptions } from '~/types/autocomplete';
|
||||
import type { Preset } from '~/types/presets';
|
||||
import { normalizePresetName, prettyName } from '~/utils';
|
||||
import { normalizePresetName } from '~/utils';
|
||||
|
||||
const emitter = defineEmits<{
|
||||
(event: 'cancel'): void;
|
||||
|
|
@ -374,17 +370,72 @@ const props = defineProps<{
|
|||
|
||||
const config = useConfigStore();
|
||||
const toast = useNotification();
|
||||
const form = reactive<Preset>(JSON.parse(JSON.stringify(props.preset)));
|
||||
const import_string = ref<string>('');
|
||||
const dialog = useDialog();
|
||||
const { presets, findPreset, selectItems } = usePresetOptions(() => props.presets);
|
||||
|
||||
const form = reactive<Preset>({
|
||||
name: '',
|
||||
description: '',
|
||||
folder: '',
|
||||
template: '',
|
||||
cookies: '',
|
||||
cli: '',
|
||||
default: false,
|
||||
priority: 0,
|
||||
...JSON.parse(JSON.stringify(props.preset || {})),
|
||||
});
|
||||
|
||||
const importString = ref('');
|
||||
const showImport = useStorage<boolean>('showImport', false);
|
||||
const selected_preset = ref<string>('');
|
||||
const showOptions = ref<boolean>(false);
|
||||
const selectedPreset = ref<string>('');
|
||||
const showOptions = ref(false);
|
||||
const ytDlpOpt = ref<AutoCompleteOptions>([]);
|
||||
const cookiesDropzoneRef = ref<InstanceType<typeof TextDropzone> | null>(null);
|
||||
|
||||
if (form.priority === undefined) {
|
||||
form.priority = 0;
|
||||
}
|
||||
const fieldUi = {
|
||||
label: 'font-semibold text-default',
|
||||
container: 'space-y-2',
|
||||
description: 'text-sm text-toned',
|
||||
hint: 'text-sm text-toned',
|
||||
};
|
||||
|
||||
const editorFieldUi = {
|
||||
root: 'w-full',
|
||||
label: 'font-semibold text-default',
|
||||
container: 'flex flex-col space-y-2',
|
||||
description: 'text-sm text-toned',
|
||||
hint: 'text-sm text-toned',
|
||||
};
|
||||
|
||||
const inputUi = {
|
||||
root: 'w-full',
|
||||
base: 'w-full bg-elevated/60 ring-default focus-visible:ring-primary',
|
||||
};
|
||||
|
||||
const textareaUi = {
|
||||
root: 'w-full',
|
||||
base: 'min-h-[10rem] w-full bg-elevated/60 ring-default focus-visible:ring-primary',
|
||||
};
|
||||
|
||||
const importPresetItems = computed(() => selectItems.value);
|
||||
|
||||
watch(
|
||||
() => props.preset,
|
||||
(value) => {
|
||||
Object.assign(form, {
|
||||
name: '',
|
||||
description: '',
|
||||
folder: '',
|
||||
template: '',
|
||||
cookies: '',
|
||||
cli: '',
|
||||
default: false,
|
||||
priority: 0,
|
||||
...JSON.parse(JSON.stringify(value || {})),
|
||||
});
|
||||
},
|
||||
{ deep: true },
|
||||
);
|
||||
|
||||
watch(
|
||||
() => config.ytdlp_options,
|
||||
|
|
@ -399,6 +450,57 @@ watch(
|
|||
{ immediate: true },
|
||||
);
|
||||
|
||||
const triggerCookieUpload = (): void => {
|
||||
cookiesDropzoneRef.value?.triggerFileSelect();
|
||||
};
|
||||
|
||||
const hasFormContent = computed(() => {
|
||||
return Boolean(
|
||||
form.name ||
|
||||
form.cli ||
|
||||
form.template ||
|
||||
form.folder ||
|
||||
form.cookies ||
|
||||
form.description ||
|
||||
(form.priority ?? 0) > 0,
|
||||
);
|
||||
});
|
||||
|
||||
const confirmImportOverwrite = async (): Promise<boolean> => {
|
||||
if (!hasFormContent.value) {
|
||||
return true;
|
||||
}
|
||||
|
||||
const { status } = await dialog.confirmDialog({
|
||||
title: 'Overwrite current form?',
|
||||
message: 'Importing will overwrite the current preset form fields.',
|
||||
confirmText: 'Overwrite',
|
||||
cancelText: 'Cancel',
|
||||
confirmColor: 'warning',
|
||||
});
|
||||
|
||||
return status === true;
|
||||
};
|
||||
|
||||
const convertOptions = async (args: string): Promise<Record<string, any> | null> => {
|
||||
try {
|
||||
const response = await convertCliOptions(args);
|
||||
|
||||
if (response.output_template) {
|
||||
form.template = response.output_template;
|
||||
}
|
||||
|
||||
if (response.download_path) {
|
||||
form.folder = response.download_path;
|
||||
}
|
||||
|
||||
return response.opts as Record<string, any>;
|
||||
} catch (error: any) {
|
||||
toast.error(error.message);
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
const checkInfo = async (): Promise<void> => {
|
||||
for (const key of ['name']) {
|
||||
if (!form[key as keyof Preset]) {
|
||||
|
|
@ -412,6 +514,7 @@ const checkInfo = async (): Promise<void> => {
|
|||
toast.error('The name field is required.');
|
||||
return;
|
||||
}
|
||||
|
||||
form.name = normalizedName;
|
||||
|
||||
if (form.folder) {
|
||||
|
|
@ -428,17 +531,9 @@ const checkInfo = async (): Promise<void> => {
|
|||
}
|
||||
|
||||
const copy: Preset = JSON.parse(JSON.stringify(form));
|
||||
let usedName = false;
|
||||
const name = normalizedName;
|
||||
|
||||
props.presets?.forEach((p) => {
|
||||
if (p.id === props.reference) {
|
||||
return;
|
||||
}
|
||||
if (p.name === name) {
|
||||
usedName = true;
|
||||
}
|
||||
});
|
||||
const usedName = presets.value.some(
|
||||
(item) => item.id !== props.reference && item.name === normalizedName,
|
||||
);
|
||||
|
||||
if (usedName) {
|
||||
toast.error('The preset name is already in use.');
|
||||
|
|
@ -446,43 +541,28 @@ const checkInfo = async (): Promise<void> => {
|
|||
}
|
||||
|
||||
for (const key in copy) {
|
||||
const val = copy[key as keyof Preset];
|
||||
if ('string' === typeof val) {
|
||||
(copy as any)[key] = val.trim();
|
||||
const value = copy[key as keyof Preset];
|
||||
if (typeof value === 'string') {
|
||||
(copy as any)[key] = value.trim();
|
||||
}
|
||||
}
|
||||
|
||||
emitter('submit', { reference: toRaw(props.reference ?? null), preset: toRaw(copy) });
|
||||
};
|
||||
|
||||
const convertOptions = async (args: string): Promise<Record<string, any> | null> => {
|
||||
try {
|
||||
const response = await convertCliOptions(args);
|
||||
|
||||
if (response.output_template) {
|
||||
form.template = response.output_template;
|
||||
}
|
||||
|
||||
if (response.download_path) {
|
||||
form.folder = response.download_path;
|
||||
}
|
||||
|
||||
return response.opts as Record<string, any>;
|
||||
} catch (e: any) {
|
||||
toast.error(e.message);
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
const importItem = async (): Promise<void> => {
|
||||
const val = import_string.value.trim();
|
||||
if (!val) {
|
||||
const value = importString.value.trim();
|
||||
if (!value) {
|
||||
toast.error('The import string is required.');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!(await confirmImportOverwrite())) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const item = decode(val) as Preset & ImportedItem;
|
||||
const item = decode(value) as Preset & ImportedItem;
|
||||
|
||||
if (!item?._type || 'preset' !== item._type) {
|
||||
toast.error(
|
||||
|
|
@ -494,44 +574,41 @@ const importItem = async (): Promise<void> => {
|
|||
if (item.name) {
|
||||
form.name = item.name;
|
||||
}
|
||||
|
||||
if (item.cli) {
|
||||
form.cli = item.cli;
|
||||
}
|
||||
|
||||
if (item.template) {
|
||||
form.template = item.template;
|
||||
}
|
||||
|
||||
if (item.folder) {
|
||||
form.folder = item.folder;
|
||||
}
|
||||
|
||||
if (item.description) {
|
||||
form.description = item.description;
|
||||
}
|
||||
|
||||
if (item.priority !== undefined) {
|
||||
form.priority = item.priority;
|
||||
}
|
||||
|
||||
import_string.value = '';
|
||||
importString.value = '';
|
||||
showImport.value = false;
|
||||
} catch (e: any) {
|
||||
console.error(e);
|
||||
toast.error(`Failed to parse. ${e.message}`);
|
||||
} catch (error: any) {
|
||||
console.error(error);
|
||||
toast.error(`Failed to parse. ${error.message}`);
|
||||
}
|
||||
};
|
||||
|
||||
const filter_presets = (flag = true): Preset[] =>
|
||||
config.presets.filter((item) => item.default === flag);
|
||||
|
||||
const import_existing_preset = async (): Promise<void> => {
|
||||
if (!selected_preset.value) {
|
||||
const importExistingPreset = async (): Promise<void> => {
|
||||
if (!selectedPreset.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
const preset = config.presets.find((p) => p.name === selected_preset.value);
|
||||
if (!(await confirmImportOverwrite())) {
|
||||
selectedPreset.value = '';
|
||||
return;
|
||||
}
|
||||
|
||||
const preset = findPreset(selectedPreset.value);
|
||||
if (!preset) {
|
||||
toast.error('Preset not found.');
|
||||
return;
|
||||
|
|
@ -545,6 +622,6 @@ const import_existing_preset = async (): Promise<void> => {
|
|||
form.priority = preset.priority ?? 0;
|
||||
|
||||
await nextTick();
|
||||
selected_preset.value = '';
|
||||
selectedPreset.value = '';
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -1,286 +1,228 @@
|
|||
<template>
|
||||
<div class="modal" :class="{ 'is-active': isOpen }">
|
||||
<div class="modal-background" @click="emitter('close')" />
|
||||
<div
|
||||
class="modal-card"
|
||||
:class="{
|
||||
'slide-from-right': direction === 'right',
|
||||
'slide-from-left': direction === 'left',
|
||||
}"
|
||||
<USlideover
|
||||
:open="isOpen"
|
||||
:side="direction"
|
||||
:dismissible="true"
|
||||
:overlay="true"
|
||||
:ui="{ content: 'w-full sm:max-w-xl' }"
|
||||
@update:open="(open) => !open && emitter('close')"
|
||||
>
|
||||
<header class="modal-card-head is-rounded-less">
|
||||
<p class="modal-card-title">WebUI Settings</p>
|
||||
<button class="delete" @click="emitter('close')" aria-label="close" />
|
||||
</header>
|
||||
<section class="modal-card-body">
|
||||
<div class="box">
|
||||
<div class="field">
|
||||
<label class="label">Page View</label>
|
||||
<div class="control">
|
||||
<input
|
||||
id="view_mode"
|
||||
type="checkbox"
|
||||
class="switch is-success"
|
||||
<template #header>
|
||||
<div class="flex items-center justify-between gap-3">
|
||||
<div>
|
||||
<p class="text-base font-semibold text-highlighted">WebUI Settings</p>
|
||||
<p class="text-sm text-toned">Adjust interface behavior and download defaults.</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #body>
|
||||
<div class="w-full space-y-6">
|
||||
<UPageCard variant="subtle" class="w-full" :ui="settingsCardUi">
|
||||
<template #header>
|
||||
<div class="flex items-center gap-2">
|
||||
<UIcon name="i-lucide-layout-dashboard" class="size-4 text-toned" />
|
||||
<span class="text-sm font-semibold text-highlighted">Page View</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #body>
|
||||
<USwitch
|
||||
v-model="simpleMode"
|
||||
class="w-full"
|
||||
size="lg"
|
||||
:ui="settingsSwitchUi"
|
||||
:label="simpleMode ? 'Simple View' : 'Regular View'"
|
||||
description="The simple view is ideal for non-technical users and mobile devices."
|
||||
/>
|
||||
<label for="view_mode" class="is-unselectable">
|
||||
{{ simpleMode ? 'Simple View' : 'Regular View' }}
|
||||
</label>
|
||||
</div>
|
||||
<p class="help">
|
||||
<span class="icon"><i class="fa-solid fa-info-circle" /></span>
|
||||
The simple view is ideal for non-technical users and mobile devices.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</UPageCard>
|
||||
|
||||
<div class="box">
|
||||
<p class="title is-5 mb-4">
|
||||
<span class="icon-text">
|
||||
<span class="icon"><i class="fas fa-palette" /></span>
|
||||
<span>Theming</span>
|
||||
</span>
|
||||
</p>
|
||||
<UPageCard variant="subtle" class="w-full" :ui="settingsCardUi">
|
||||
<template #header>
|
||||
<div class="flex items-center gap-2">
|
||||
<UIcon name="i-lucide-image" class="size-4 text-toned" />
|
||||
<span class="text-sm font-semibold text-highlighted">Background</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="field">
|
||||
<label class="label">Color scheme</label>
|
||||
<div class="control">
|
||||
<label for="auto" class="radio">
|
||||
<input id="auto" type="radio" v-model="selectedTheme" value="auto" />
|
||||
<span class="icon"><i class="fa-solid fa-circle-half-stroke" /></span>
|
||||
<span>Auto</span>
|
||||
</label>
|
||||
<label for="light" class="radio">
|
||||
<input id="light" type="radio" v-model="selectedTheme" value="light" />
|
||||
<span class="icon has-text-warning"><i class="fa-solid fa-sun" /></span>
|
||||
<span>Light</span>
|
||||
</label>
|
||||
<label for="dark" class="radio">
|
||||
<input id="dark" type="radio" v-model="selectedTheme" value="dark" />
|
||||
<span class="icon"><i class="fa-solid fa-moon" /></span>
|
||||
<span>Dark</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<template #body>
|
||||
<USwitch
|
||||
v-model="bg_enable"
|
||||
class="w-full"
|
||||
size="lg"
|
||||
:ui="settingsSwitchUi"
|
||||
:label="bg_enable ? 'Shown' : 'Hidden'"
|
||||
/>
|
||||
|
||||
<div class="field">
|
||||
<label class="label">Show Background</label>
|
||||
<div class="control">
|
||||
<input id="random_bg" type="checkbox" class="switch is-success" v-model="bg_enable" />
|
||||
<label for="random_bg" class="is-unselectable">
|
||||
{{ bg_enable ? 'Yes' : 'No' }}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field" v-if="bg_enable">
|
||||
<div class="control">
|
||||
<button
|
||||
@click="$emit('reload_bg')"
|
||||
class="button is-link is-light is-fullwidth"
|
||||
<UButton
|
||||
v-if="bg_enable"
|
||||
color="info"
|
||||
variant="outline"
|
||||
icon="i-lucide-image-up"
|
||||
class="w-full justify-center"
|
||||
:disabled="isLoading"
|
||||
:loading="isLoading"
|
||||
@click="$emit('reload_bg')"
|
||||
>
|
||||
<span class="icon"
|
||||
><i
|
||||
class="fa"
|
||||
:class="{ 'fa-spin fa-spinner': isLoading, 'fa-file-image': !isLoading }"
|
||||
/></span>
|
||||
<span>Reload Background</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
Reload Background
|
||||
</UButton>
|
||||
|
||||
<div class="field" v-if="bg_enable">
|
||||
<label class="label">Background visibility</label>
|
||||
<div class="field has-addons">
|
||||
<div class="control">
|
||||
<a class="button is-static">
|
||||
<code>{{ parseFloat(String(1.0 - bg_opacity)).toFixed(2) }}</code>
|
||||
</a>
|
||||
</div>
|
||||
<div class="control is-expanded">
|
||||
<input
|
||||
class="input"
|
||||
type="range"
|
||||
v-model="bg_opacity"
|
||||
min="0.50"
|
||||
max="1.00"
|
||||
step="0.05"
|
||||
<UFormField
|
||||
class="w-full"
|
||||
v-if="bg_enable"
|
||||
label="Background visibility"
|
||||
:hint="String(parseFloat(String(1.0 - bg_opacity)).toFixed(2))"
|
||||
>
|
||||
<USlider
|
||||
v-model="bgOpacityModel"
|
||||
:min="0.5"
|
||||
:max="1"
|
||||
:step="0.05"
|
||||
size="lg"
|
||||
class="w-full"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</UFormField>
|
||||
</template>
|
||||
</UPageCard>
|
||||
|
||||
<div class="box">
|
||||
<p class="title is-5 mb-4">
|
||||
<span class="icon-text">
|
||||
<span class="icon"><i class="fas fa-home" /></span>
|
||||
<span>Dashboard</span>
|
||||
</span>
|
||||
</p>
|
||||
<UPageCard variant="subtle" class="w-full" :ui="settingsCardUi">
|
||||
<template #header>
|
||||
<div class="flex items-center gap-2">
|
||||
<UIcon name="i-lucide-monitor" class="size-4 text-toned" />
|
||||
<span class="text-sm font-semibold text-highlighted">Downloads</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="field" v-if="!simpleMode">
|
||||
<label class="label">URL Separator</label>
|
||||
<div class="control">
|
||||
<div class="select is-fullwidth">
|
||||
<select v-model="separator">
|
||||
<option
|
||||
v-for="(sep, index) in separators"
|
||||
:key="`sep-${index}`"
|
||||
:value="sep.value"
|
||||
<template #body>
|
||||
<UFormField
|
||||
v-if="!simpleMode"
|
||||
label="URL Separator"
|
||||
class="w-full"
|
||||
:ui="settingsFieldUi"
|
||||
>
|
||||
{{ sep.name }} ({{ sep.value }})
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<USelect
|
||||
v-model="separator"
|
||||
:items="separatorItems"
|
||||
value-key="value"
|
||||
label-key="label"
|
||||
size="lg"
|
||||
class="w-full"
|
||||
:ui="{ base: 'w-full' }"
|
||||
/>
|
||||
</UFormField>
|
||||
|
||||
<div class="field">
|
||||
<label class="label">Show Thumbnails</label>
|
||||
<div class="control">
|
||||
<input
|
||||
id="show_thumbnail"
|
||||
type="checkbox"
|
||||
class="switch is-success"
|
||||
<USwitch
|
||||
v-model="show_thumbnail"
|
||||
class="w-full"
|
||||
size="lg"
|
||||
:ui="settingsSwitchUi"
|
||||
:label="show_thumbnail ? 'Show Thumbnails' : 'Hide Thumbnails'"
|
||||
description="Show videos thumbnail if available"
|
||||
/>
|
||||
<label for="show_thumbnail" class="is-unselectable">
|
||||
{{ show_thumbnail ? 'Yes' : 'No' }}
|
||||
</label>
|
||||
</div>
|
||||
<p class="help">
|
||||
<span class="icon"><i class="fa-solid fa-info-circle" /></span>
|
||||
Show videos thumbnail if available
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="field" v-if="show_thumbnail">
|
||||
<label class="label">Aspect Ratio</label>
|
||||
<div class="control">
|
||||
<label for="ratio_16by9" class="radio">
|
||||
<input id="ratio_16by9" type="radio" v-model="thumbnail_ratio" value="is-16by9" />
|
||||
<span> 16:9</span>
|
||||
</label>
|
||||
<label for="ratio_3by1" class="radio">
|
||||
<input id="ratio_3by1" type="radio" v-model="thumbnail_ratio" value="is-3by1" />
|
||||
<span> 3:1</span>
|
||||
</label>
|
||||
</div>
|
||||
<p class="help">
|
||||
<span class="icon"><i class="fa-solid fa-info-circle" /></span>
|
||||
Choose the aspect ratio for thumbnail display.
|
||||
</p>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label">Popover</label>
|
||||
<div class="control">
|
||||
<input
|
||||
id="show_popover"
|
||||
type="checkbox"
|
||||
class="switch is-success"
|
||||
<UFormField
|
||||
v-if="show_thumbnail"
|
||||
label="Aspect Ratio"
|
||||
class="w-full"
|
||||
:ui="settingsFieldUi"
|
||||
>
|
||||
<USelect
|
||||
v-model="thumbnail_ratio"
|
||||
:items="thumbnailRatioItems"
|
||||
value-key="value"
|
||||
label-key="label"
|
||||
size="lg"
|
||||
class="w-full"
|
||||
:ui="{ base: 'w-full' }"
|
||||
/>
|
||||
</UFormField>
|
||||
|
||||
<USwitch
|
||||
v-model="show_popover"
|
||||
class="w-full"
|
||||
size="lg"
|
||||
:ui="settingsSwitchUi"
|
||||
:label="show_popover ? 'Popover On' : 'Popover Off'"
|
||||
description="Show additional information over certain elements."
|
||||
/>
|
||||
<label for="show_popover" class="is-unselectable">
|
||||
{{ show_popover ? 'Yes' : 'No' }}
|
||||
</label>
|
||||
</div>
|
||||
<p class="help">
|
||||
<span class="icon"><i class="fa-solid fa-info-circle" /></span>
|
||||
Show additional information over certain elements.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</UPageCard>
|
||||
|
||||
<div class="box">
|
||||
<p class="title is-5 mb-4">
|
||||
<span class="icon-text">
|
||||
<span class="icon"><i class="fas fa-download" /></span>
|
||||
<span>Queue</span>
|
||||
</span>
|
||||
</p>
|
||||
<UPageCard variant="subtle" class="w-full" :ui="settingsCardUi">
|
||||
<template #header>
|
||||
<div class="flex items-center gap-2">
|
||||
<UIcon name="i-lucide-download" class="size-4 text-toned" />
|
||||
<span class="text-sm font-semibold text-highlighted">Queue</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="field">
|
||||
<label class="label">Auto-refresh queue when disconnected</label>
|
||||
<div class="control">
|
||||
<input
|
||||
id="queue_auto_refresh"
|
||||
type="checkbox"
|
||||
class="switch is-success"
|
||||
<template #body>
|
||||
<USwitch
|
||||
v-model="queue_auto_refresh"
|
||||
class="w-full"
|
||||
size="lg"
|
||||
:ui="settingsSwitchUi"
|
||||
:label="queue_auto_refresh ? 'Auto-refresh Enabled' : 'Auto-refresh Disabled'"
|
||||
description="Automatically refresh queue data when WebSocket connection is unavailable."
|
||||
/>
|
||||
<label for="queue_auto_refresh" class="is-unselectable">
|
||||
{{ queue_auto_refresh ? 'Enabled' : 'Disabled' }}
|
||||
</label>
|
||||
</div>
|
||||
<p class="help">
|
||||
<span class="icon"><i class="fa-solid fa-info-circle" /></span>
|
||||
Automatically refresh queue data when WebSocket connection is unavailable.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="field" v-if="queue_auto_refresh">
|
||||
<label class="label">Auto-refresh interval (seconds)</label>
|
||||
<div class="field has-addons">
|
||||
<div class="control">
|
||||
<a class="button is-static">
|
||||
<code>{{ queue_auto_refresh_delay / 1000 }}s</code>
|
||||
</a>
|
||||
</div>
|
||||
<div class="control is-expanded">
|
||||
<input
|
||||
class="input"
|
||||
type="range"
|
||||
v-model.number="queue_auto_refresh_delay"
|
||||
min="5000"
|
||||
max="60000"
|
||||
step="5000"
|
||||
<UFormField
|
||||
class="w-full"
|
||||
v-if="queue_auto_refresh"
|
||||
label="Auto-refresh interval"
|
||||
:hint="`${queue_auto_refresh_delay / 1000}s`"
|
||||
:ui="settingsFieldUi"
|
||||
>
|
||||
<USlider
|
||||
v-model="queueRefreshDelayModel"
|
||||
:min="5000"
|
||||
:max="60000"
|
||||
:step="5000"
|
||||
size="lg"
|
||||
class="w-full"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<p class="help">
|
||||
<span class="icon"><i class="fa-solid fa-info-circle" /></span>
|
||||
<p class="mt-2 text-sm text-toned">
|
||||
How often to refresh the queue (5-60 seconds). Lower values increase server load.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</UFormField>
|
||||
</template>
|
||||
</UPageCard>
|
||||
|
||||
<div class="box">
|
||||
<p class="title is-5 mb-4">
|
||||
<span class="icon-text">
|
||||
<span class="icon"><i class="fas fa-bell" /></span>
|
||||
<span>Notifications</span>
|
||||
</span>
|
||||
</p>
|
||||
<UPageCard variant="subtle" class="w-full" :ui="settingsCardUi">
|
||||
<template #header>
|
||||
<div class="flex items-center gap-2">
|
||||
<UIcon name="i-lucide-bell" class="size-4 text-toned" />
|
||||
<span class="text-sm font-semibold text-highlighted">Notifications</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="field">
|
||||
<label class="label">Show notifications</label>
|
||||
<div class="control">
|
||||
<input
|
||||
id="allow_toasts"
|
||||
type="checkbox"
|
||||
class="switch is-success"
|
||||
<template #body>
|
||||
<USwitch
|
||||
v-model="allow_toasts"
|
||||
class="w-full"
|
||||
size="lg"
|
||||
:ui="settingsSwitchUi"
|
||||
:label="allow_toasts ? 'Shown' : 'Hidden'"
|
||||
/>
|
||||
<label for="allow_toasts" class="is-unselectable">
|
||||
{{ allow_toasts ? 'Yes' : 'No' }}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field" v-if="allow_toasts">
|
||||
<label class="label">Notification target</label>
|
||||
<div class="control">
|
||||
<div class="select is-fullwidth">
|
||||
<select v-model="toast_target" @change="onNotificationTargetChange">
|
||||
<option value="toast">Toast</option>
|
||||
<option value="browser" :disabled="!isSecureContext">Browser</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<p class="help">
|
||||
<span class="icon"><i class="fa-solid fa-info-circle" /></span>
|
||||
<UFormField
|
||||
v-if="allow_toasts"
|
||||
label="Notification target"
|
||||
class="w-full"
|
||||
:ui="settingsFieldUi"
|
||||
>
|
||||
<USelect
|
||||
v-model="toast_target"
|
||||
:items="notificationTargetItems"
|
||||
value-key="value"
|
||||
label-key="label"
|
||||
size="lg"
|
||||
class="w-full"
|
||||
:ui="{ base: 'w-full' }"
|
||||
@update:model-value="() => void onNotificationTargetChange()"
|
||||
/>
|
||||
<p class="mt-2 text-sm text-toned">
|
||||
<template v-if="!isSecureContext">
|
||||
Browser notifications require HTTPS connection.
|
||||
</template>
|
||||
|
|
@ -288,52 +230,44 @@
|
|||
Choose where to display notifications. Browser requires permission.
|
||||
</template>
|
||||
</p>
|
||||
</div>
|
||||
</UFormField>
|
||||
|
||||
<div class="field" v-if="allow_toasts && toast_target === 'toast'">
|
||||
<label class="label">Notifications position</label>
|
||||
<div class="control">
|
||||
<div class="select is-fullwidth">
|
||||
<select v-model="toast_position">
|
||||
<option :value="POSITION.TOP_RIGHT">{{ POSITION.TOP_RIGHT }}</option>
|
||||
<option :value="POSITION.TOP_CENTER">{{ POSITION.TOP_CENTER }}</option>
|
||||
<option :value="POSITION.TOP_LEFT">{{ POSITION.TOP_LEFT }}</option>
|
||||
<option :value="POSITION.BOTTOM_RIGHT">{{ POSITION.BOTTOM_RIGHT }}</option>
|
||||
<option :value="POSITION.BOTTOM_CENTER">{{ POSITION.BOTTOM_CENTER }}</option>
|
||||
<option :value="POSITION.BOTTOM_LEFT">{{ POSITION.BOTTOM_LEFT }}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field" v-if="allow_toasts && toast_target === 'toast'">
|
||||
<label class="label">Dismiss notification on click</label>
|
||||
<div class="control">
|
||||
<input
|
||||
id="dismiss_on_click"
|
||||
type="checkbox"
|
||||
class="switch is-success"
|
||||
v-model="toast_dismiss_on_click"
|
||||
<UFormField
|
||||
v-if="allow_toasts && toast_target === 'toast'"
|
||||
label="Notifications position"
|
||||
class="w-full"
|
||||
:ui="settingsFieldUi"
|
||||
>
|
||||
<USelect
|
||||
v-model="toast_position"
|
||||
:items="toastPositionItems"
|
||||
size="lg"
|
||||
class="w-full"
|
||||
:ui="{ base: 'w-full' }"
|
||||
/>
|
||||
<label for="dismiss_on_click" class="is-unselectable">
|
||||
{{ toast_dismiss_on_click ? 'Yes' : 'No' }}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</UFormField>
|
||||
|
||||
<USwitch
|
||||
v-if="allow_toasts && toast_target === 'toast'"
|
||||
v-model="toast_dismiss_on_click"
|
||||
class="w-full"
|
||||
size="lg"
|
||||
:ui="settingsSwitchUi"
|
||||
:label="toast_dismiss_on_click ? 'Dismiss on click' : 'Keep on click'"
|
||||
/>
|
||||
</template>
|
||||
</UPageCard>
|
||||
</div>
|
||||
</template>
|
||||
</USlideover>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import 'assets/css/bulma-switch.css';
|
||||
import { watch, onMounted, onBeforeUnmount, ref } from 'vue';
|
||||
import { watch, onMounted, onBeforeUnmount, ref, computed } from 'vue';
|
||||
import { useStorage } from '@vueuse/core';
|
||||
import { POSITION } from 'vue-toastification';
|
||||
import { useConfigStore } from '~/stores/ConfigStore';
|
||||
import { useNotification } from '~/composables/useNotification';
|
||||
import type { notificationTarget } from '~/composables/useNotification';
|
||||
import type { notificationTarget, toastPosition } from '~/composables/useNotification';
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
|
|
@ -355,9 +289,8 @@ const notification = useNotification();
|
|||
|
||||
const bg_enable = useStorage<boolean>('random_bg', true);
|
||||
const bg_opacity = useStorage<number>('random_bg_opacity', 0.95);
|
||||
const selectedTheme = useStorage<'auto' | 'light' | 'dark'>('theme', 'auto');
|
||||
const allow_toasts = useStorage<boolean>('allow_toasts', true);
|
||||
const toast_position = useStorage<POSITION>('toast_position', POSITION.TOP_RIGHT);
|
||||
const toast_position = useStorage<toastPosition>('toast_position', 'top-right');
|
||||
const toast_dismiss_on_click = useStorage<boolean>('toast_dismiss_on_click', true);
|
||||
const toast_target = useStorage<notificationTarget>('toast_target', 'toast');
|
||||
const show_thumbnail = useStorage<boolean>('show_thumbnail', true);
|
||||
|
|
@ -369,6 +302,60 @@ const queue_auto_refresh = useStorage<boolean>('queue_auto_refresh', true);
|
|||
const queue_auto_refresh_delay = useStorage<number>('queue_auto_refresh_delay', 10000);
|
||||
const isSecureContext = ref<boolean>(false);
|
||||
|
||||
const settingsCardUi = {
|
||||
root: 'w-full',
|
||||
container: 'w-full p-4 sm:p-5',
|
||||
wrapper: 'w-full items-stretch',
|
||||
body: 'w-full space-y-4',
|
||||
};
|
||||
|
||||
const settingsFieldUi = {
|
||||
root: 'w-full',
|
||||
container: 'mt-2 w-full',
|
||||
};
|
||||
|
||||
const settingsSwitchUi = {
|
||||
root: 'w-full items-start justify-between gap-4',
|
||||
wrapper: 'ms-0 flex-1 text-sm',
|
||||
};
|
||||
|
||||
const bgOpacityModel = computed<number>({
|
||||
get: () => Number(bg_opacity.value),
|
||||
set: (value) => {
|
||||
bg_opacity.value = Number(value);
|
||||
},
|
||||
});
|
||||
|
||||
const queueRefreshDelayModel = computed<number>({
|
||||
get: () => Number(queue_auto_refresh_delay.value),
|
||||
set: (value) => {
|
||||
queue_auto_refresh_delay.value = Number(value);
|
||||
},
|
||||
});
|
||||
|
||||
const separatorItems = computed(() =>
|
||||
separators.map((sep) => ({ label: `${sep.name} (${sep.value})`, value: sep.value })),
|
||||
);
|
||||
|
||||
const thumbnailRatioItems = [
|
||||
{ label: '16:9', value: 'is-16by9' },
|
||||
{ label: '3:1', value: 'is-3by1' },
|
||||
];
|
||||
|
||||
const notificationTargetItems = computed(() => [
|
||||
{ label: 'Toast', value: 'toast' },
|
||||
{ label: 'Browser', value: 'browser', disabled: !isSecureContext.value },
|
||||
]);
|
||||
|
||||
const toastPositionItems: Array<{ label: string; value: toastPosition }> = [
|
||||
{ label: 'top-left', value: 'top-left' },
|
||||
{ label: 'top-center', value: 'top-center' },
|
||||
{ label: 'top-right', value: 'top-right' },
|
||||
{ label: 'bottom-left', value: 'bottom-left' },
|
||||
{ label: 'bottom-center', value: 'bottom-center' },
|
||||
{ label: 'bottom-right', value: 'bottom-right' },
|
||||
];
|
||||
|
||||
const handleKeydown = (e: KeyboardEvent) => {
|
||||
if ('Escape' === e.key && props.isOpen) {
|
||||
e.preventDefault();
|
||||
|
|
@ -415,63 +402,7 @@ watch(
|
|||
</script>
|
||||
|
||||
<style scoped>
|
||||
.modal-card.slide-from-right {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 0;
|
||||
height: 100vh;
|
||||
max-height: 100vh;
|
||||
margin: 0;
|
||||
width: 600px;
|
||||
max-width: 90vw;
|
||||
transition: transform 0.3s ease;
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
.modal.is-active .modal-card.slide-from-right {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.modal-card.slide-from-left {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100vh;
|
||||
max-height: 100vh;
|
||||
margin: 0;
|
||||
width: 600px;
|
||||
max-width: 90vw;
|
||||
transition: transform 0.3s ease;
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
.modal.is-active .modal-card.slide-from-left {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.modal-card-body {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.modal-card.slide-from-right,
|
||||
.modal-card.slide-from-left {
|
||||
width: 100vw;
|
||||
max-width: 100vw;
|
||||
}
|
||||
}
|
||||
|
||||
:global(body.settings-panel-open) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#main_container {
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 769px) {
|
||||
:global(.settings-open #main_container) {
|
||||
transform: translateX(-300px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
File diff suppressed because it is too large
Load diff
File diff suppressed because it is too large
Load diff
|
|
@ -1,142 +1,131 @@
|
|||
<style scoped>
|
||||
code {
|
||||
color: var(--bulma-code) !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
<template>
|
||||
<div class="box">
|
||||
<h2 class="title is-5">Inspect Task Handler</h2>
|
||||
<form @submit.prevent="onSubmit">
|
||||
<div class="field">
|
||||
<label class="label" for="url">
|
||||
<span class="icon-text">
|
||||
<span class="icon"><i class="fas fa-link" /></span>
|
||||
<span>URL</span>
|
||||
</span>
|
||||
</label>
|
||||
<div class="control has-icons-left">
|
||||
<input
|
||||
<div class="space-y-5">
|
||||
<form class="space-y-5" @submit.prevent="onSubmit">
|
||||
<div class="grid gap-4 lg:grid-cols-2">
|
||||
<UFormField
|
||||
label="URL"
|
||||
:ui="fieldUi"
|
||||
:error="urlError || undefined"
|
||||
description="Enter the URL of the resource you want to inspect."
|
||||
class="lg:col-span-2"
|
||||
>
|
||||
<UInput
|
||||
id="url"
|
||||
v-model="url"
|
||||
type="url"
|
||||
class="input"
|
||||
:class="{ 'is-danger': urlError }"
|
||||
placeholder="https://..."
|
||||
required
|
||||
class="w-full"
|
||||
:ui="inputUi"
|
||||
:disabled="loading"
|
||||
>
|
||||
<template #leading>
|
||||
<UIcon name="i-lucide-link" class="size-4 text-toned" />
|
||||
</template>
|
||||
</UInput>
|
||||
</UFormField>
|
||||
|
||||
<UFormField
|
||||
label="Preset"
|
||||
:ui="fieldUi"
|
||||
description="Select a preset to apply its settings during inspection. In real scenario, the preset will be based on what is selected when creating the task."
|
||||
>
|
||||
<USelect
|
||||
id="preset"
|
||||
v-model="preset"
|
||||
:items="presetItems"
|
||||
placeholder="Select a preset"
|
||||
value-key="value"
|
||||
label-key="label"
|
||||
class="w-full"
|
||||
:ui="inputUi"
|
||||
:disabled="loading"
|
||||
/>
|
||||
<span class="icon is-small is-left"><i class="fa-solid fa-link" /></span>
|
||||
</div>
|
||||
<p v-if="urlError" class="help is-danger">{{ urlError }}</p>
|
||||
<p v-else class="help is-bold">Enter the URL of the resource you want to inspect.</p>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label" for="preset">
|
||||
<span class="icon-text">
|
||||
<span class="icon"> <i class="fa-solid fa-list" /> </span>
|
||||
<span>Preset</span>
|
||||
</span>
|
||||
</label>
|
||||
<div class="control has-icons-left">
|
||||
<div class="select is-fullwidth">
|
||||
<select id="preset" class="is-fullwidth" v-model="preset">
|
||||
<optgroup
|
||||
label="Custom presets"
|
||||
v-if="config?.presets.filter((p) => !p?.default).length > 0"
|
||||
</UFormField>
|
||||
|
||||
<UFormField
|
||||
label="Handler (For testing)"
|
||||
:ui="fieldUi"
|
||||
description="In real scenario, the system auto-detects the appropriate handler based on the URL. This field is for testing purposes only."
|
||||
>
|
||||
<option
|
||||
v-for="cPreset in filter_presets(false)"
|
||||
:key="cPreset.name"
|
||||
:value="cPreset.name"
|
||||
>
|
||||
{{ cPreset.name }}
|
||||
</option>
|
||||
</optgroup>
|
||||
<optgroup label="Default presets">
|
||||
<option
|
||||
v-for="dPreset in filter_presets(true)"
|
||||
:key="dPreset.name"
|
||||
:value="dPreset.name"
|
||||
>
|
||||
{{ dPreset.name }}
|
||||
</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
</div>
|
||||
<span class="icon is-small is-left"><i class="fa-solid fa-list" /></span>
|
||||
</div>
|
||||
<p class="help is-bold">
|
||||
Select a preset to apply its settings during inspection. In real scenario, the preset will
|
||||
be based on what is selected when creating the task.
|
||||
</p>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label" for="handler">
|
||||
<span class="icon-text">
|
||||
<span class="icon"><i class="fa-solid fa-cogs" /></span>
|
||||
<span>Handler (For testing)</span>
|
||||
</span>
|
||||
</label>
|
||||
<div class="control has-icons-left">
|
||||
<input
|
||||
<UInput
|
||||
id="handler"
|
||||
v-model="handler"
|
||||
type="text"
|
||||
class="input"
|
||||
placeholder="Handler class name"
|
||||
/>
|
||||
<span class="icon is-small is-left"><i class="fa-solid fa-cogs" /></span>
|
||||
</div>
|
||||
<p class="help is-bold">
|
||||
In real scenario, the system auto-detects the appropriate handler based on the URL. This
|
||||
field is for testing purposes only.
|
||||
</p>
|
||||
</div>
|
||||
<div class="field is-grouped is-grouped-right">
|
||||
<div class="control">
|
||||
<button class="button is-primary" type="submit" :disabled="loading">
|
||||
<span class="icon"> <i class="fas fa-search" /></span>
|
||||
<span>Inspect</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="control">
|
||||
<button class="button is-warning" type="button" @click="onReset" :disabled="loading">
|
||||
<span class="icon"> <i class="fas fa-undo" /> </span>
|
||||
<span>Reset</span>
|
||||
</button>
|
||||
class="w-full"
|
||||
:ui="inputUi"
|
||||
:disabled="loading"
|
||||
>
|
||||
<template #leading>
|
||||
<UIcon name="i-lucide-rss" class="size-4 text-toned" />
|
||||
</template>
|
||||
</UInput>
|
||||
</UFormField>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col-reverse gap-2 sm:flex-row sm:justify-end">
|
||||
<UButton
|
||||
type="button"
|
||||
color="warning"
|
||||
variant="outline"
|
||||
icon="i-lucide-rotate-ccw"
|
||||
:disabled="loading"
|
||||
class="justify-center"
|
||||
@click="onReset"
|
||||
>
|
||||
Reset
|
||||
</UButton>
|
||||
|
||||
<UButton
|
||||
type="submit"
|
||||
color="primary"
|
||||
icon="i-lucide-search"
|
||||
:loading="loading"
|
||||
:disabled="loading"
|
||||
class="justify-center"
|
||||
>
|
||||
Inspect
|
||||
</UButton>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<Message v-if="loading" class="is-info">
|
||||
<p>
|
||||
<span class="icon-text">
|
||||
<span class="icon"><i class="fas fa-spinner fa-spin" /></span>
|
||||
<span>Inspecting.. please wait.</span>
|
||||
</span>
|
||||
</p>
|
||||
</Message>
|
||||
<UAlert
|
||||
v-if="loading"
|
||||
color="info"
|
||||
variant="soft"
|
||||
icon="i-lucide-loader-circle"
|
||||
title="Inspecting"
|
||||
description="Inspecting.. please wait."
|
||||
/>
|
||||
|
||||
<div v-if="response" class="mt-4">
|
||||
<Message
|
||||
v-if="response.error"
|
||||
class="is-danger"
|
||||
<UAlert
|
||||
v-else-if="response && 'error' in response"
|
||||
color="error"
|
||||
variant="soft"
|
||||
icon="i-lucide-triangle-alert"
|
||||
title="Error"
|
||||
icon="fas fa-exclamation-triangle"
|
||||
>
|
||||
<p>{{ response.error }}</p>
|
||||
<p v-if="response.message">{{ response.message }}</p>
|
||||
</Message>
|
||||
<div class="content" v-else>
|
||||
<h4>Result:</h4>
|
||||
<pre><code>{{ response }}</code></pre>
|
||||
:description="errorDescription"
|
||||
/>
|
||||
|
||||
<div v-else-if="response" class="space-y-3">
|
||||
<div class="flex items-center gap-2 text-sm font-semibold text-highlighted">
|
||||
<UIcon name="i-lucide-braces" class="size-4 text-toned" />
|
||||
<span>Result:</span>
|
||||
</div>
|
||||
|
||||
<div class="overflow-hidden rounded-lg border border-default bg-default">
|
||||
<div class="w-full max-w-full overflow-x-auto overscroll-x-contain">
|
||||
<pre
|
||||
class="min-w-0 max-w-full overflow-x-auto p-4 text-xs leading-6 text-default"
|
||||
><code>{{ formattedResponse }}</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, watch } from 'vue';
|
||||
import { computed, ref, watch } from 'vue';
|
||||
import { request } from '~/utils';
|
||||
import { useConfigStore } from '~/stores/ConfigStore';
|
||||
import type { TaskInspectRequest, TaskInspectResponse } from '~/types/task_inspect';
|
||||
|
|
@ -147,38 +136,84 @@ const props = defineProps<{
|
|||
handler?: string;
|
||||
}>();
|
||||
|
||||
const config = useConfigStore();
|
||||
const url = ref<string>(props.url ?? '');
|
||||
const preset = ref<string>(props.preset || config.app.default_preset || '');
|
||||
const handler = ref<string>(props.handler ?? '');
|
||||
const loading = ref<boolean>(false);
|
||||
const response = ref<TaskInspectResponse | null>(null);
|
||||
const urlError = ref<string>('');
|
||||
const { selectItems } = usePresetOptions();
|
||||
|
||||
const config = useConfigStore();
|
||||
const url = ref(props.url ?? '');
|
||||
const preset = ref(props.preset || config.app.default_preset || '');
|
||||
const handler = ref(props.handler ?? '');
|
||||
const loading = ref(false);
|
||||
const response = ref<TaskInspectResponse | null>(null);
|
||||
const urlError = ref('');
|
||||
|
||||
const fieldUi = {
|
||||
label: 'font-semibold text-default',
|
||||
container: 'space-y-2',
|
||||
description: 'text-sm text-toned',
|
||||
error: 'text-sm text-error',
|
||||
};
|
||||
|
||||
const inputUi = {
|
||||
root: 'w-full',
|
||||
base: 'w-full bg-elevated/60 ring-default focus-visible:ring-primary',
|
||||
};
|
||||
|
||||
const presetItems = computed(
|
||||
() => selectItems.value as Array<{ type?: 'label' | 'item'; label: string; value?: string }>,
|
||||
);
|
||||
|
||||
const formattedResponse = computed(() => {
|
||||
return response.value ? JSON.stringify(response.value, null, 2) : '';
|
||||
});
|
||||
|
||||
const errorDescription = computed(() => {
|
||||
if (!response.value || !('error' in response.value)) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
const error =
|
||||
typeof response.value.error === 'string'
|
||||
? response.value.error
|
||||
: String(response.value.error ?? '');
|
||||
const message =
|
||||
typeof response.value.message === 'string'
|
||||
? response.value.message
|
||||
: String(response.value.message ?? '');
|
||||
|
||||
return message ? `${error} ${message}` : error;
|
||||
});
|
||||
|
||||
// Watch for prop changes and update fields
|
||||
watch(
|
||||
() => props.url,
|
||||
(val) => {
|
||||
if (val !== undefined) url.value = val;
|
||||
if (val !== undefined) {
|
||||
url.value = val;
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
watch(
|
||||
() => props.preset,
|
||||
(val) => {
|
||||
if (val !== undefined) preset.value = val;
|
||||
if (val !== undefined) {
|
||||
preset.value = val;
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
watch(
|
||||
() => props.handler,
|
||||
(val) => {
|
||||
if (val !== undefined) handler.value = val;
|
||||
if (val !== undefined) {
|
||||
handler.value = val;
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
const validateUrl = (val: string): boolean => {
|
||||
try {
|
||||
const u = new URL(val);
|
||||
return u.protocol === 'http:' || u.protocol === 'https:';
|
||||
const parsed = new URL(val);
|
||||
return parsed.protocol === 'http:' || parsed.protocol === 'https:';
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
|
|
@ -222,6 +257,4 @@ const onReset = () => {
|
|||
response.value = null;
|
||||
urlError.value = '';
|
||||
};
|
||||
const filter_presets = (flag: boolean = true) =>
|
||||
config.presets.filter((item) => item.default === flag);
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div
|
||||
class="file-dropzone is-relative"
|
||||
class="relative flex h-full w-full cursor-text flex-col"
|
||||
:class="{ 'is-dragging': isDragging }"
|
||||
@drop.prevent="handleDrop"
|
||||
@dragover.prevent="handleDragOver"
|
||||
|
|
@ -8,24 +8,34 @@
|
|||
@dragleave.prevent="handleDragLeave"
|
||||
@click="handleClick"
|
||||
>
|
||||
<textarea
|
||||
<UTextarea
|
||||
:id="id"
|
||||
ref="textareaRef"
|
||||
class="control textarea is-fullwidth"
|
||||
:class="{ 'is-focused': isDragging }"
|
||||
:value="model"
|
||||
@input="handleInput"
|
||||
v-model="model"
|
||||
:disabled="disabled"
|
||||
:placeholder="placeholder"
|
||||
:id="id"
|
||||
:rows="rows"
|
||||
size="lg"
|
||||
variant="outline"
|
||||
color="neutral"
|
||||
class="h-full w-full"
|
||||
:ui="{
|
||||
root: 'w-full',
|
||||
base: 'min-h-[10rem] w-full bg-elevated/60 font-mono text-sm ring-default focus-visible:ring-primary',
|
||||
}"
|
||||
/>
|
||||
|
||||
<div
|
||||
v-if="isDragging"
|
||||
class="dropzone-overlay has-background-success-90 is-flex is-align-items-center is-justify-content-center"
|
||||
class="pointer-events-none absolute inset-0 z-10 flex items-center justify-center rounded-md border border-dashed border-success bg-success/15"
|
||||
>
|
||||
<div class="has-text-centered has-text-dark">
|
||||
<span class="icon is-large"><i class="fa-solid fa-file-arrow-down fa-3x" /></span>
|
||||
<p class="mt-3 is-size-5 has-text-weight-bold">Drop file here</p>
|
||||
<div class="text-center text-success">
|
||||
<span
|
||||
class="mb-3 inline-flex size-12 items-center justify-center rounded-full bg-success/15"
|
||||
>
|
||||
<UIcon name="i-lucide-file-down" class="size-5" />
|
||||
</span>
|
||||
<p class="text-sm font-semibold">Drop file here</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -33,8 +43,8 @@
|
|||
ref="fileInputRef"
|
||||
type="file"
|
||||
:accept="accept"
|
||||
class="hidden"
|
||||
@change="handleFileSelect"
|
||||
style="display: none"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -42,36 +52,34 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
|
||||
interface Props {
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
disabled?: boolean;
|
||||
placeholder?: string;
|
||||
id?: string;
|
||||
accept?: string;
|
||||
maxSize?: number;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
rows?: number;
|
||||
}>(),
|
||||
{
|
||||
disabled: false,
|
||||
placeholder: '',
|
||||
id: '',
|
||||
accept: '',
|
||||
maxSize: 2 * 1024 * 1024,
|
||||
});
|
||||
rows: 5,
|
||||
},
|
||||
);
|
||||
|
||||
const model = defineModel<string>({ default: '' });
|
||||
|
||||
const emit = defineEmits<{ error: [message: string] }>();
|
||||
|
||||
const textareaRef = ref<HTMLTextAreaElement | null>(null);
|
||||
const textareaRef = ref<{ textareaRef?: HTMLTextAreaElement | null } | null>(null);
|
||||
const fileInputRef = ref<HTMLInputElement | null>(null);
|
||||
const isDragging = ref<boolean>(false);
|
||||
const dragCounter = ref<number>(0);
|
||||
|
||||
const handleInput = (event: Event): void => {
|
||||
const target = event.target as HTMLTextAreaElement;
|
||||
model.value = target.value;
|
||||
};
|
||||
|
||||
const handleDragEnter = (event: DragEvent): void => {
|
||||
if (props.disabled) {
|
||||
return;
|
||||
|
|
@ -83,14 +91,15 @@ const handleDragEnter = (event: DragEvent): void => {
|
|||
}
|
||||
};
|
||||
|
||||
const handleDragLeave = (_event: DragEvent): void => {
|
||||
const handleDragLeave = (): void => {
|
||||
if (props.disabled) {
|
||||
return;
|
||||
}
|
||||
|
||||
dragCounter.value--;
|
||||
if (0 === dragCounter.value) {
|
||||
if (dragCounter.value <= 0) {
|
||||
isDragging.value = false;
|
||||
dragCounter.value = 0;
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -133,7 +142,7 @@ const handleClick = (event: MouseEvent): void => {
|
|||
return;
|
||||
}
|
||||
|
||||
if (event && event.target === textareaRef.value) {
|
||||
if (event.target === textareaRef.value?.textareaRef) {
|
||||
return;
|
||||
}
|
||||
};
|
||||
|
|
@ -161,26 +170,19 @@ const processFile = async (file: File): Promise<void> => {
|
|||
if (file.size > props.maxSize) {
|
||||
const sizeMB = (file.size / 1024 / 1024).toFixed(2);
|
||||
const maxSizeMB = (props.maxSize / 1024 / 1024).toFixed(2);
|
||||
const errorMsg = `File too large: ${sizeMB}MB. Maximum allowed size is ${maxSizeMB}MB.`;
|
||||
emit('error', errorMsg);
|
||||
console.error(errorMsg);
|
||||
emit('error', `File too large: ${sizeMB}MB. Maximum allowed size is ${maxSizeMB}MB.`);
|
||||
return;
|
||||
}
|
||||
|
||||
const isBinary = await checkIfBinary(file);
|
||||
if (isBinary) {
|
||||
const errorMsg = 'File appears to be binary. Please provide a text file.';
|
||||
emit('error', errorMsg);
|
||||
console.error(errorMsg);
|
||||
emit('error', 'File appears to be binary. Please provide a text file.');
|
||||
return;
|
||||
}
|
||||
|
||||
const text = await readFileAsText(file);
|
||||
model.value = text;
|
||||
model.value = await readFileAsText(file);
|
||||
} catch (error) {
|
||||
const errorMsg = error instanceof Error ? error.message : 'Failed to read file';
|
||||
emit('error', errorMsg);
|
||||
console.error('Failed to read file:', error);
|
||||
emit('error', error instanceof Error ? error.message : 'Failed to read file');
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -198,21 +200,13 @@ const checkIfBinary = async (file: File): Promise<boolean> => {
|
|||
}
|
||||
|
||||
const bytes = new Uint8Array(e.target.result as ArrayBuffer);
|
||||
|
||||
let nullBytes = 0;
|
||||
let nonPrintable = 0;
|
||||
|
||||
for (let i = 0; i < bytes.length; i++) {
|
||||
const byte = bytes[i];
|
||||
|
||||
if (undefined === byte) {
|
||||
continue;
|
||||
}
|
||||
|
||||
for (const byte of bytes) {
|
||||
if (0 === byte) {
|
||||
nullBytes++;
|
||||
}
|
||||
|
||||
if (9 !== byte && 10 !== byte && 13 !== byte && (byte < 32 || byte > 126)) {
|
||||
nonPrintable++;
|
||||
}
|
||||
|
|
@ -226,8 +220,8 @@ const checkIfBinary = async (file: File): Promise<boolean> => {
|
|||
});
|
||||
};
|
||||
|
||||
const readFileAsText = (file: File): Promise<string> => {
|
||||
return new Promise((resolve, reject) => {
|
||||
const readFileAsText = (file: File): Promise<string> =>
|
||||
new Promise((resolve, reject) => {
|
||||
const reader = new FileReader();
|
||||
|
||||
reader.onload = (e: ProgressEvent<FileReader>) => {
|
||||
|
|
@ -241,7 +235,6 @@ const readFileAsText = (file: File): Promise<string> => {
|
|||
reader.onerror = () => reject(new Error('File reading error'));
|
||||
reader.readAsText(file);
|
||||
});
|
||||
};
|
||||
|
||||
const triggerFileSelect = (): void => {
|
||||
if (props.disabled) {
|
||||
|
|
@ -250,27 +243,5 @@ const triggerFileSelect = (): void => {
|
|||
fileInputRef.value?.click();
|
||||
};
|
||||
|
||||
defineExpose({ triggerFileSelect });
|
||||
defineExpose({ triggerFileSelect, textareaRef });
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.file-dropzone {
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
.dropzone-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border-radius: 4px;
|
||||
pointer-events: none;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.file-dropzone.is-dragging textarea {
|
||||
box-shadow: --var(--bulma-card-shadow) !important;
|
||||
border-color: --var(--bulma-success);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,21 @@
|
|||
<template>
|
||||
<div
|
||||
class="dropdown"
|
||||
:class="{ 'is-active': showList && filteredOptions.length }"
|
||||
style="width: 100%"
|
||||
>
|
||||
<div class="control" style="width: 100%">
|
||||
<textarea
|
||||
<div class="relative flex h-full w-full flex-col">
|
||||
<UTextarea
|
||||
:id="id"
|
||||
ref="textareaRef"
|
||||
v-model="localValue"
|
||||
:placeholder="placeholder"
|
||||
autocomplete="off"
|
||||
:rows="rows ?? 4"
|
||||
:disabled="disabled"
|
||||
size="lg"
|
||||
variant="outline"
|
||||
color="neutral"
|
||||
class="h-full w-full"
|
||||
:ui="{
|
||||
root: 'w-full',
|
||||
base: 'min-h-[10rem] w-full bg-elevated/60 font-mono text-sm ring-default focus-visible:ring-primary',
|
||||
}"
|
||||
@input="onInput"
|
||||
@focus="onFocus"
|
||||
@blur="hideList"
|
||||
|
|
@ -16,30 +23,30 @@
|
|||
@keyup="updateCaret"
|
||||
@click="updateCaret"
|
||||
@mouseup="updateCaret"
|
||||
class="control is-fullwidth textarea"
|
||||
:placeholder="placeholder"
|
||||
autocomplete="off"
|
||||
style="width: 100%; position: relative; z-index: 2"
|
||||
rows="4"
|
||||
:disabled="disabled"
|
||||
/>
|
||||
</div>
|
||||
<div class="dropdown-menu" role="menu" style="width: 100%; z-index: 3">
|
||||
<div class="dropdown-content" style="width: 100%; max-height: 11em; overflow-y: auto">
|
||||
<a
|
||||
|
||||
<div
|
||||
v-if="showList && filteredOptions.length"
|
||||
class="absolute inset-x-0 top-full z-20 mt-1 overflow-hidden rounded-md border border-default bg-default shadow-lg"
|
||||
role="menu"
|
||||
>
|
||||
<button
|
||||
v-for="(option, idx) in filteredOptions"
|
||||
:key="option.value"
|
||||
@mousedown.prevent="appendFlag(option.value)"
|
||||
:class="['dropdown-item', { 'is-active': idx === highlightedIndex }]"
|
||||
style="display: flex; justify-content: space-between"
|
||||
ref="dropdownItems"
|
||||
data-autocomplete-item
|
||||
type="button"
|
||||
class="flex w-full items-start justify-between gap-4 px-3 py-2 text-left text-sm transition-colors"
|
||||
:class="
|
||||
idx === highlightedIndex
|
||||
? 'bg-elevated text-highlighted'
|
||||
: 'text-default hover:bg-elevated/60'
|
||||
"
|
||||
@mousedown.prevent="appendFlag(option.value)"
|
||||
>
|
||||
<span class="has-text-weight-bold">{{ option.value }}</span>
|
||||
<span class="has-text-grey-light is-text-overflow" style="margin-left: 1em">{{
|
||||
option.description
|
||||
}}</span>
|
||||
</a>
|
||||
</div>
|
||||
<span class="shrink-0 font-semibold text-highlighted">{{ option.value }}</span>
|
||||
<span class="min-w-0 flex-1 truncate text-xs text-toned">{{ option.description }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -53,11 +60,12 @@ const props = defineProps<{
|
|||
placeholder?: string;
|
||||
disabled?: boolean;
|
||||
id?: string;
|
||||
rows?: number;
|
||||
}>();
|
||||
|
||||
const model = defineModel<string>();
|
||||
const localValue = ref(model.value || '');
|
||||
const textareaRef = ref<HTMLTextAreaElement | null>(null);
|
||||
const textareaRef = ref<{ textareaRef?: HTMLTextAreaElement | null } | null>(null);
|
||||
const caretIndex = ref(0);
|
||||
const showList = ref(false);
|
||||
const highlightedIndex = ref(-1);
|
||||
|
|
@ -66,7 +74,6 @@ const dropdownItems = ref<HTMLElement[]>([]);
|
|||
watch(model, (val) => (localValue.value = val || ''));
|
||||
watch(localValue, (val) => (model.value = val));
|
||||
|
||||
// Compute token at caret position
|
||||
const getCurrentToken = (value: string, caret: number) => {
|
||||
const left = value.slice(0, caret);
|
||||
const right = value.slice(caret);
|
||||
|
|
@ -82,15 +89,12 @@ const getCurrentToken = (value: string, caret: number) => {
|
|||
|
||||
const filteredOptions = computed(() => {
|
||||
const { token } = getCurrentToken(localValue.value, caretIndex.value);
|
||||
// Hide suggestions once '=' is present in the current token
|
||||
if (!token || token.includes('=')) {
|
||||
return [];
|
||||
}
|
||||
// Only suggest when typing a long flag starting with `--`
|
||||
if (!token.startsWith('--')) {
|
||||
return [];
|
||||
}
|
||||
// Hide suggestions if token exactly matches an option value
|
||||
if (props.options.some((opt) => opt.value === token)) {
|
||||
return [];
|
||||
}
|
||||
|
|
@ -117,25 +121,25 @@ const appendFlag = (flag: string) => {
|
|||
const caret = caretIndex.value;
|
||||
const { token, start, end } = getCurrentToken(value, caret);
|
||||
if (token) {
|
||||
// Replace only the flag part of the token, preserving any '=value' suffix in the same token
|
||||
const eqPos = token.indexOf('=');
|
||||
const after = eqPos !== -1 ? token.slice(eqPos) : '';
|
||||
localValue.value = value.slice(0, start) + flag + after + value.slice(end);
|
||||
nextTick(() => {
|
||||
const pos = start + flag.length + after.length;
|
||||
if (textareaRef.value) {
|
||||
textareaRef.value.selectionStart = textareaRef.value.selectionEnd = pos;
|
||||
if (textareaRef.value?.textareaRef) {
|
||||
textareaRef.value.textareaRef.selectionStart = textareaRef.value.textareaRef.selectionEnd =
|
||||
pos;
|
||||
caretIndex.value = pos;
|
||||
}
|
||||
});
|
||||
} else {
|
||||
// No token at caret: append at caret position
|
||||
const needsSpace = caret > 0 && value[caret - 1] !== ' ';
|
||||
localValue.value = value.slice(0, caret) + (needsSpace ? ' ' : '') + flag + value.slice(caret);
|
||||
nextTick(() => {
|
||||
const pos = caret + (needsSpace ? 1 : 0) + flag.length;
|
||||
if (textareaRef.value) {
|
||||
textareaRef.value.selectionStart = textareaRef.value.selectionEnd = pos;
|
||||
if (textareaRef.value?.textareaRef) {
|
||||
textareaRef.value.textareaRef.selectionStart = textareaRef.value.textareaRef.selectionEnd =
|
||||
pos;
|
||||
caretIndex.value = pos;
|
||||
}
|
||||
});
|
||||
|
|
@ -145,8 +149,8 @@ const appendFlag = (flag: string) => {
|
|||
};
|
||||
|
||||
const updateCaret = () => {
|
||||
caretIndex.value = textareaRef.value
|
||||
? (textareaRef.value.selectionStart ?? localValue.value.length)
|
||||
caretIndex.value = textareaRef.value?.textareaRef
|
||||
? (textareaRef.value.textareaRef.selectionStart ?? localValue.value.length)
|
||||
: localValue.value.length;
|
||||
};
|
||||
|
||||
|
|
@ -164,16 +168,12 @@ const onInput = () => {
|
|||
highlightedIndex.value = showList.value ? 0 : -1;
|
||||
};
|
||||
|
||||
// Reset scroll position when filtered options change
|
||||
watch(filteredOptions, () => {
|
||||
highlightedIndex.value = filteredOptions.value.length > 0 && showList.value ? 0 : -1;
|
||||
nextTick(() => {
|
||||
const dropdown = document.querySelector('.dropdown-content');
|
||||
if (dropdown) {
|
||||
dropdown.scrollTop = 0;
|
||||
}
|
||||
const items = document.querySelectorAll('.dropdown-item');
|
||||
dropdownItems.value = Array.from(items) as HTMLElement[];
|
||||
dropdownItems.value = Array.from(
|
||||
document.querySelectorAll('[data-autocomplete-item]'),
|
||||
) as HTMLElement[];
|
||||
});
|
||||
});
|
||||
|
||||
|
|
@ -184,7 +184,6 @@ const hideList = () =>
|
|||
}, 100);
|
||||
|
||||
const onKeydown = (e: KeyboardEvent) => {
|
||||
// Track caret and allow ESC to immediately close suggestions and restore normal keys
|
||||
updateCaret();
|
||||
if (e.key === 'Escape') {
|
||||
showList.value = false;
|
||||
|
|
@ -200,34 +199,30 @@ const onKeydown = (e: KeyboardEvent) => {
|
|||
if (e.key === 'ArrowDown') {
|
||||
e.preventDefault();
|
||||
highlightedIndex.value = Math.min(highlightedIndex.value + 1, filteredOptions.value.length - 1);
|
||||
nextTick(() => {
|
||||
const el = dropdownItems.value[highlightedIndex.value];
|
||||
if (el) el.scrollIntoView({ block: 'nearest' });
|
||||
});
|
||||
nextTick(() =>
|
||||
dropdownItems.value[highlightedIndex.value]?.scrollIntoView({ block: 'nearest' }),
|
||||
);
|
||||
} else if (e.key === 'ArrowUp') {
|
||||
e.preventDefault();
|
||||
highlightedIndex.value = Math.max(highlightedIndex.value - 1, 0);
|
||||
nextTick(() => {
|
||||
const el = dropdownItems.value[highlightedIndex.value];
|
||||
if (el) el.scrollIntoView({ block: 'nearest' });
|
||||
});
|
||||
nextTick(() =>
|
||||
dropdownItems.value[highlightedIndex.value]?.scrollIntoView({ block: 'nearest' }),
|
||||
);
|
||||
} else if (e.key === 'PageDown') {
|
||||
e.preventDefault();
|
||||
highlightedIndex.value = Math.min(
|
||||
highlightedIndex.value + pageSize,
|
||||
filteredOptions.value.length - 1,
|
||||
);
|
||||
nextTick(() => {
|
||||
const el = dropdownItems.value[highlightedIndex.value];
|
||||
if (el) el.scrollIntoView({ block: 'nearest' });
|
||||
});
|
||||
nextTick(() =>
|
||||
dropdownItems.value[highlightedIndex.value]?.scrollIntoView({ block: 'nearest' }),
|
||||
);
|
||||
} else if (e.key === 'PageUp') {
|
||||
e.preventDefault();
|
||||
highlightedIndex.value = Math.max(highlightedIndex.value - pageSize, 0);
|
||||
nextTick(() => {
|
||||
const el = dropdownItems.value[highlightedIndex.value];
|
||||
if (el) el.scrollIntoView({ block: 'nearest' });
|
||||
});
|
||||
nextTick(() =>
|
||||
dropdownItems.value[highlightedIndex.value]?.scrollIntoView({ block: 'nearest' }),
|
||||
);
|
||||
} else if (e.key === 'Enter' || e.key === 'Tab') {
|
||||
const { token } = getCurrentToken(localValue.value, caretIndex.value);
|
||||
const hasEqual = token.includes('=');
|
||||
|
|
@ -236,13 +231,10 @@ const onKeydown = (e: KeyboardEvent) => {
|
|||
highlightedIndex.value >= 0 && highlightedIndex.value < filteredOptions.value.length
|
||||
? filteredOptions.value[highlightedIndex.value]
|
||||
: undefined;
|
||||
// Only autocomplete if there's a partial word being typed
|
||||
if (selected && isFlagTrigger) {
|
||||
e.preventDefault();
|
||||
appendFlag(selected.value);
|
||||
}
|
||||
}
|
||||
|
||||
// dropdownItems is updated via a single top-level watch(filteredOptions)
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
align-items: center;
|
||||
height: auto;
|
||||
max-height: 80vh;
|
||||
max-width: 80vw;
|
||||
max-width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
|
@ -112,25 +112,27 @@
|
|||
/>
|
||||
</video>
|
||||
|
||||
<div class="is-flex is-justify-content-space-between">
|
||||
<div class="flex items-center justify-between gap-3">
|
||||
<div>
|
||||
<span
|
||||
<button
|
||||
v-if="infoLoaded && !usingHls && hasVideoStream"
|
||||
class="is-hidden-mobile has-text-info is-pointer"
|
||||
type="button"
|
||||
class="hidden items-center gap-2 text-info transition-colors hover:text-info/80 md:inline-flex"
|
||||
@click.prevent="forceSwitchToHls"
|
||||
>
|
||||
<span class="icon"><i class="fa-solid fa-arrows-rotate" /></span>
|
||||
<UIcon name="i-lucide-refresh-cw" class="size-4" />
|
||||
<span>Trouble playing? switch to HLS stream.</span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div>
|
||||
<span
|
||||
class="is-hidden-mobile has-text-grey-lighter is-pointer"
|
||||
<button
|
||||
type="button"
|
||||
class="hidden items-center gap-2 text-toned transition-colors hover:text-default md:inline-flex"
|
||||
@click="showHelp = !showHelp"
|
||||
>
|
||||
<span class="icon"><i class="fa-solid fa-question" /></span>
|
||||
<UIcon name="i-lucide-circle-help" class="size-4" />
|
||||
<span>Show keyboard shortcuts with <kbd>?</kbd> or <kbd>/</kbd></span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -270,10 +272,8 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="text-align: center" v-else>
|
||||
<div class="icon">
|
||||
<i class="fa-solid fa-spinner fa-spin fa-4x" />
|
||||
</div>
|
||||
<div v-else class="flex justify-center py-10">
|
||||
<UIcon name="i-lucide-loader-circle" class="size-16 animate-spin text-toned" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,189 +1,259 @@
|
|||
<!-- ui/app/pages/options.vue -->
|
||||
<template>
|
||||
<div class="p-1 container" style="border-radius: 0; padding: 0">
|
||||
<div class="box m-2">
|
||||
<div class="columns is-multiline is-vcentered">
|
||||
<div class="column is-12 is-6-desktop">
|
||||
<label class="label is-small">Search</label>
|
||||
<div class="control has-icons-left">
|
||||
<input
|
||||
<div class="w-full min-w-0 max-w-full space-y-4 p-1 sm:p-2">
|
||||
<div class="grid gap-4 rounded-lg border border-default bg-muted/10 p-4 lg:grid-cols-12">
|
||||
<UFormField label="Search" class="lg:col-span-4" :ui="fieldUi">
|
||||
<UInput
|
||||
v-model.trim="filters.query"
|
||||
type="text"
|
||||
class="input"
|
||||
placeholder="Filter by flag or description..."
|
||||
autocomplete="off"
|
||||
class="w-full"
|
||||
:ui="inputUi"
|
||||
>
|
||||
<template #leading>
|
||||
<UIcon name="i-lucide-search" class="size-4 text-toned" />
|
||||
</template>
|
||||
</UInput>
|
||||
</UFormField>
|
||||
|
||||
<UFormField label="Group Filter" class="sm:col-span-6 lg:col-span-2" :ui="fieldUi">
|
||||
<USelect
|
||||
v-model="filters.group"
|
||||
:items="groupItems"
|
||||
value-key="value"
|
||||
label-key="label"
|
||||
class="w-full"
|
||||
:ui="inputUi"
|
||||
/>
|
||||
<span class="icon is-left"><i class="fa-solid fa-magnifying-glass" /></span>
|
||||
</div>
|
||||
</div>
|
||||
</UFormField>
|
||||
|
||||
<div class="column is-6-tablet is-3-desktop">
|
||||
<label class="label is-small">Group Filter</label>
|
||||
<div class="select is-fullwidth">
|
||||
<select v-model="filters.group">
|
||||
<option value="">All</option>
|
||||
<option v-for="g in groupNames" :key="g" :value="g">{{ g }}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<UFormField label="Display" class="sm:col-span-6 lg:col-span-2" :ui="fieldUi">
|
||||
<USelect
|
||||
v-model="displayMode"
|
||||
:items="displayItems"
|
||||
value-key="value"
|
||||
label-key="label"
|
||||
class="w-full"
|
||||
:ui="inputUi"
|
||||
/>
|
||||
</UFormField>
|
||||
|
||||
<div class="column is-6-tablet is-3-desktop">
|
||||
<label class="label is-small">Display</label>
|
||||
<div class="control">
|
||||
<div class="select is-fullwidth">
|
||||
<select v-model="displayMode">
|
||||
<option value="grouped">Grouped</option>
|
||||
<option value="list">List</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<UFormField label="Sort By" class="sm:col-span-6 lg:col-span-2" :ui="fieldUi">
|
||||
<USelect
|
||||
v-model="sortBy"
|
||||
:items="sortItems"
|
||||
value-key="value"
|
||||
label-key="label"
|
||||
class="w-full"
|
||||
:ui="inputUi"
|
||||
/>
|
||||
</UFormField>
|
||||
|
||||
<div class="column is-6-tablet is-3-desktop">
|
||||
<label class="label is-small">Sort By</label>
|
||||
<div class="select is-fullwidth">
|
||||
<select v-model="sortBy">
|
||||
<option value="flag">Flag</option>
|
||||
<option value="group">Group</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<UFormField label="Order" class="sm:col-span-6 lg:col-span-2" :ui="fieldUi">
|
||||
<USelect
|
||||
v-model="sortDir"
|
||||
:items="orderItems"
|
||||
value-key="value"
|
||||
label-key="label"
|
||||
class="w-full"
|
||||
:ui="inputUi"
|
||||
/>
|
||||
</UFormField>
|
||||
|
||||
<div class="column is-6-tablet is-3-desktop">
|
||||
<label class="label is-small">Order</label>
|
||||
<div class="select is-fullwidth">
|
||||
<select v-model="sortDir">
|
||||
<option value="asc">Asc</option>
|
||||
<option value="desc">Desc</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column is-12 is-6-desktop">
|
||||
<label class="label is-small">Flags</label>
|
||||
<div class="buttons are-small">
|
||||
<button
|
||||
class="button"
|
||||
:class="{ 'is-link': filters.flagKind === 'any' }"
|
||||
@click="filters.flagKind = 'any'"
|
||||
<UFormField label="Flags" class="lg:col-span-12" :ui="fieldUi">
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<UButton
|
||||
v-for="item in flagFilterItems"
|
||||
:key="item.value"
|
||||
type="button"
|
||||
size="xs"
|
||||
:color="filters.flagKind === item.value ? 'primary' : 'neutral'"
|
||||
:variant="filters.flagKind === item.value ? 'solid' : 'outline'"
|
||||
@click="filters.flagKind = item.value"
|
||||
>
|
||||
Any
|
||||
</button>
|
||||
<button
|
||||
class="button"
|
||||
:class="{ 'is-link': filters.flagKind === 'short' }"
|
||||
@click="filters.flagKind = 'short'"
|
||||
{{ item.label }}
|
||||
</UButton>
|
||||
|
||||
<UButton
|
||||
type="button"
|
||||
color="neutral"
|
||||
variant="ghost"
|
||||
size="xs"
|
||||
icon="i-lucide-refresh-cw"
|
||||
:loading="isLoading"
|
||||
:disabled="isLoading"
|
||||
@click="() => void reload()"
|
||||
>
|
||||
Short Only (-x)
|
||||
</button>
|
||||
<button
|
||||
class="button"
|
||||
:class="{ 'is-link': filters.flagKind === 'long' }"
|
||||
@click="filters.flagKind = 'long'"
|
||||
>
|
||||
Long Only (--xyz)
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
Reload
|
||||
</UButton>
|
||||
</div>
|
||||
</UFormField>
|
||||
</div>
|
||||
|
||||
<div v-if="0 === visible.length" class="has-text-centered has-text-grey">
|
||||
<p>No options match your criteria.</p>
|
||||
<UAlert
|
||||
v-if="isLoading"
|
||||
color="info"
|
||||
variant="soft"
|
||||
icon="i-lucide-loader-circle"
|
||||
title="Loading"
|
||||
description="Loading yt-dlp options. Please wait..."
|
||||
/>
|
||||
|
||||
<UAlert
|
||||
v-else-if="visible.length === 0"
|
||||
color="warning"
|
||||
variant="soft"
|
||||
icon="i-lucide-search-x"
|
||||
title="No options match your criteria."
|
||||
/>
|
||||
|
||||
<template v-else-if="displayMode === 'grouped' && grouped.length !== 0">
|
||||
<section v-for="group in grouped" :key="group.name" class="space-y-3">
|
||||
<div class="flex items-center gap-2 text-sm font-semibold text-highlighted">
|
||||
<UIcon name="i-lucide-folder-open" class="size-4 text-toned" />
|
||||
<span>{{ group.name }}</span>
|
||||
<UBadge color="neutral" variant="soft" size="sm">{{ group.items.length }}</UBadge>
|
||||
</div>
|
||||
|
||||
<template v-if="'grouped' === displayMode && 0 !== grouped.length">
|
||||
<section v-for="group in grouped" :key="group.name" class="m-2 mb-5">
|
||||
<h2 class="title is-6 mb-3">
|
||||
<span class="icon-text">
|
||||
<span class="icon"><i class="fa-regular fa-folder-open" /></span>
|
||||
<span
|
||||
>{{ group.name }}
|
||||
<small class="has-text-grey">({{ group.items.length }})</small></span
|
||||
<div
|
||||
class="w-full min-w-0 max-w-full overflow-hidden rounded-lg border border-default bg-default"
|
||||
>
|
||||
</span>
|
||||
</h2>
|
||||
<div class="table-container">
|
||||
<table class="table is-fullwidth is-striped is-hoverable is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 30%">Flags</th>
|
||||
<div class="w-full max-w-full overflow-x-auto overscroll-x-contain">
|
||||
<table class="min-w-180 w-full table-auto text-sm">
|
||||
<thead class="bg-muted/40 text-xs uppercase tracking-wide text-toned">
|
||||
<tr class="text-left [&>th]:px-3 [&>th]:py-3 [&>th]:font-semibold">
|
||||
<th class="w-[1%] whitespace-nowrap">Flags</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<template v-for="opt in group.items" :key="opt.flags.join('|')">
|
||||
<tr v-if="!opt.ignored">
|
||||
<td>
|
||||
<i
|
||||
class="has-text-primary is-pointer is-pulled-right fa-regular fa-copy is-unselectable"
|
||||
@click="copyFlag(opt.flags)"
|
||||
/>
|
||||
<div class="is-flex is-align-items-center">
|
||||
<div class="tags">
|
||||
<span v-for="f in opt.flags" :key="f" class="tag is-info">{{ f }}</span>
|
||||
<tbody class="divide-y divide-default">
|
||||
<tr
|
||||
v-for="opt in group.items"
|
||||
:key="opt.flags.join('|')"
|
||||
class="align-top hover:bg-muted/20"
|
||||
>
|
||||
<td class="w-[1%] px-3 py-3 align-top whitespace-nowrap">
|
||||
<div class="flex items-start gap-2">
|
||||
<div class="flex flex-wrap gap-1.5">
|
||||
<UBadge
|
||||
v-for="flag in opt.flags"
|
||||
:key="flag"
|
||||
color="info"
|
||||
variant="soft"
|
||||
size="sm"
|
||||
class="max-w-full whitespace-nowrap font-mono"
|
||||
>
|
||||
{{ flag }}
|
||||
</UBadge>
|
||||
</div>
|
||||
|
||||
<UTooltip text="Copy long flag">
|
||||
<UButton
|
||||
type="button"
|
||||
color="neutral"
|
||||
variant="ghost"
|
||||
size="xs"
|
||||
icon="i-lucide-copy"
|
||||
square
|
||||
class="shrink-0"
|
||||
:disabled="!hasLongFlag(opt.flags)"
|
||||
@click="() => void copyFlag(opt.flags)"
|
||||
/>
|
||||
</UTooltip>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<span v-if="opt.description && 0 !== opt.description.length">{{
|
||||
<td class="px-3 py-3 align-top text-default">
|
||||
<div class="min-w-0 wrap-break-word whitespace-normal">
|
||||
<span v-if="opt.description && opt.description.length !== 0">{{
|
||||
opt.description
|
||||
}}</span>
|
||||
<span v-else class="has-text-grey">—</span>
|
||||
<span v-else class="text-toned">-</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<div class="table-container">
|
||||
<table class="table is-fullwidth is-striped is-hoverable is-bordered m-2">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 30%">Flags</th>
|
||||
<th style="width: 20%">Group</th>
|
||||
<div
|
||||
v-else
|
||||
class="w-full min-w-0 max-w-full overflow-hidden rounded-lg border border-default bg-default"
|
||||
>
|
||||
<div class="w-full max-w-full overflow-x-auto overscroll-x-contain">
|
||||
<table class="min-w-215 w-full table-auto text-sm">
|
||||
<thead class="bg-muted/40 text-xs uppercase tracking-wide text-toned">
|
||||
<tr class="text-left [&>th]:px-3 [&>th]:py-3 [&>th]:font-semibold">
|
||||
<th class="w-[1%] whitespace-nowrap">Flags</th>
|
||||
<th class="w-[1%] whitespace-nowrap">Group</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<template v-for="opt in visible" :key="opt.flags.join('|')">
|
||||
<tr v-if="!opt.ignored">
|
||||
<td>
|
||||
<i
|
||||
class="has-text-primary is-pointer is-pulled-right fa-regular fa-copy is-unselectable"
|
||||
@click="copyFlag(opt.flags)"
|
||||
/>
|
||||
<div class="is-flex is-align-items-center">
|
||||
<div class="tags">
|
||||
<span v-for="f in opt.flags" :key="f" class="tag is-info">{{ f }}</span>
|
||||
<tbody class="divide-y divide-default">
|
||||
<tr
|
||||
v-for="opt in visible"
|
||||
:key="opt.flags.join('|')"
|
||||
class="align-top hover:bg-muted/20"
|
||||
>
|
||||
<td class="w-[1%] px-3 py-3 align-top">
|
||||
<div class="flex items-start gap-2">
|
||||
<div class="flex flex-wrap gap-1.5">
|
||||
<UBadge
|
||||
v-for="flag in opt.flags"
|
||||
:key="flag"
|
||||
color="info"
|
||||
variant="soft"
|
||||
size="sm"
|
||||
class="max-w-full whitespace-nowrap font-mono"
|
||||
>
|
||||
{{ flag }}
|
||||
</UBadge>
|
||||
</div>
|
||||
|
||||
<UTooltip text="Copy long flag">
|
||||
<UButton
|
||||
type="button"
|
||||
color="neutral"
|
||||
variant="ghost"
|
||||
size="xs"
|
||||
icon="i-lucide-copy"
|
||||
square
|
||||
class="shrink-0"
|
||||
:disabled="!hasLongFlag(opt.flags)"
|
||||
@click="() => void copyFlag(opt.flags)"
|
||||
/>
|
||||
</UTooltip>
|
||||
</div>
|
||||
</td>
|
||||
<td class="is-bold">
|
||||
<td class="w-[1%] px-3 py-3 align-top font-medium text-default whitespace-nowrap">
|
||||
{{ opt.group || 'root' }}
|
||||
</td>
|
||||
<td>
|
||||
<span v-if="opt.description && 0 !== opt.description.length">{{
|
||||
<td class="px-3 py-3 align-top text-default">
|
||||
<div class="min-w-0 wrap-break-word whitespace-normal">
|
||||
<span v-if="opt.description && opt.description.length !== 0">{{
|
||||
opt.description
|
||||
}}</span>
|
||||
<span v-else class="has-text-grey">—</span>
|
||||
<span v-else class="text-toned">-</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useStorage } from '@vueuse/core';
|
||||
import type { YTDLPOption } from '~/types/ytdlp';
|
||||
import {
|
||||
buildYtdlpGroupItems,
|
||||
normalizeYtdlpGroupFilter,
|
||||
YTDLP_ALL_GROUPS,
|
||||
} from '~/utils/ytdlpOptions';
|
||||
|
||||
const isLoading = ref(false);
|
||||
const options = ref<YTDLPOption[]>([]);
|
||||
|
|
@ -193,10 +263,42 @@ const sortDir = useStorage<'asc' | 'desc'>('opts_sort_dir', 'asc');
|
|||
|
||||
const filters = reactive({
|
||||
query: '',
|
||||
group: '',
|
||||
group: YTDLP_ALL_GROUPS,
|
||||
flagKind: 'any' as 'any' | 'short' | 'long',
|
||||
});
|
||||
|
||||
const fieldUi = {
|
||||
label: 'font-semibold text-default',
|
||||
container: 'space-y-2',
|
||||
description: 'text-sm text-toned',
|
||||
};
|
||||
|
||||
const inputUi = {
|
||||
root: 'w-full',
|
||||
base: 'w-full bg-elevated/60 ring-default focus-visible:ring-primary',
|
||||
};
|
||||
|
||||
const displayItems = [
|
||||
{ label: 'Grouped', value: 'grouped' },
|
||||
{ label: 'List', value: 'list' },
|
||||
];
|
||||
|
||||
const sortItems = [
|
||||
{ label: 'Flag', value: 'flag' },
|
||||
{ label: 'Group', value: 'group' },
|
||||
];
|
||||
|
||||
const orderItems = [
|
||||
{ label: 'Asc', value: 'asc' },
|
||||
{ label: 'Desc', value: 'desc' },
|
||||
];
|
||||
|
||||
const flagFilterItems = [
|
||||
{ label: 'Any', value: 'any' as const },
|
||||
{ label: 'Short Only (-x)', value: 'short' as const },
|
||||
{ label: 'Long Only (--xyz)', value: 'long' as const },
|
||||
];
|
||||
|
||||
const reload = async (): Promise<void> => {
|
||||
try {
|
||||
isLoading.value = true;
|
||||
|
|
@ -213,8 +315,12 @@ const reload = async (): Promise<void> => {
|
|||
}
|
||||
};
|
||||
|
||||
const hasLongFlag = (flags: string[]): boolean => {
|
||||
return flags.some((flag) => flag.startsWith('--'));
|
||||
};
|
||||
|
||||
const copyFlag = async (flags: string[]): Promise<void> => {
|
||||
const longFlag = flags.find((f) => f.startsWith('--'));
|
||||
const longFlag = flags.find((flag) => flag.startsWith('--'));
|
||||
if (!longFlag) {
|
||||
return;
|
||||
}
|
||||
|
|
@ -224,35 +330,49 @@ const copyFlag = async (flags: string[]): Promise<void> => {
|
|||
onMounted(async () => await reload());
|
||||
|
||||
const groupNames = computed<string[]>(() => {
|
||||
const s = new Set<string>();
|
||||
for (const o of options.value) {
|
||||
s.add(o.group || 'root');
|
||||
const names = new Set<string>();
|
||||
for (const option of options.value) {
|
||||
names.add(option.group || 'root');
|
||||
}
|
||||
return Array.from(s).sort((a, b) => a.localeCompare(b));
|
||||
return Array.from(names).sort((a, b) => a.localeCompare(b));
|
||||
});
|
||||
|
||||
const groupItems = computed(() => {
|
||||
return buildYtdlpGroupItems(groupNames.value);
|
||||
});
|
||||
|
||||
const filtered = computed<YTDLPOption[]>(() => {
|
||||
const q = filters.query.toLowerCase();
|
||||
const g = filters.group;
|
||||
const g = normalizeYtdlpGroupFilter(filters.group);
|
||||
|
||||
return options.value.filter((o) => {
|
||||
if (g && (o.group || 'root') !== g) {
|
||||
return options.value.filter((option) => {
|
||||
if (option.ignored) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if ('short' === filters.flagKind && !o.flags.some((f) => /^-\w(,|$)|^-\w$/.test(f))) {
|
||||
if (g && (option.group || 'root') !== g) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if ('long' === filters.flagKind && !o.flags.some((f) => /^--[a-zA-Z0-9][\w-]*/.test(f))) {
|
||||
if (
|
||||
filters.flagKind === 'short' &&
|
||||
!option.flags.some((flag) => /^-\w(,|$)|^-\w$/.test(flag))
|
||||
) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (0 !== q.length) {
|
||||
const hay = [o.flags.join(' '), o.description || '', o.group || 'root']
|
||||
if (
|
||||
filters.flagKind === 'long' &&
|
||||
!option.flags.some((flag) => /^--[a-zA-Z0-9][\w-]*/.test(flag))
|
||||
) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (q.length !== 0) {
|
||||
const haystack = [option.flags.join(' '), option.description || '', option.group || 'root']
|
||||
.join(' ')
|
||||
.toLowerCase();
|
||||
if (-1 === hay.indexOf(q)) {
|
||||
if (!haystack.includes(q)) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
|
@ -262,54 +382,45 @@ const filtered = computed<YTDLPOption[]>(() => {
|
|||
});
|
||||
|
||||
const sorted = computed<YTDLPOption[]>(() => {
|
||||
const dir = 'asc' === sortDir.value ? 1 : -1;
|
||||
const arr = [...filtered.value];
|
||||
const dir = sortDir.value === 'asc' ? 1 : -1;
|
||||
const list = [...filtered.value];
|
||||
|
||||
arr.sort((a, b) => {
|
||||
if ('group' === sortBy.value) {
|
||||
const ga = (a.group || 'root').localeCompare(b.group || 'root');
|
||||
if (0 !== ga) {
|
||||
return ga * dir;
|
||||
list.sort((a, b) => {
|
||||
if (sortBy.value === 'group') {
|
||||
const groupCompare = (a.group || 'root').localeCompare(b.group || 'root');
|
||||
if (groupCompare !== 0) {
|
||||
return groupCompare * dir;
|
||||
}
|
||||
}
|
||||
|
||||
const fa = (a.flags[0] || '').localeCompare(b.flags[0] || '');
|
||||
return fa * dir;
|
||||
return (a.flags[0] || '').localeCompare(b.flags[0] || '') * dir;
|
||||
});
|
||||
|
||||
return arr;
|
||||
return list;
|
||||
});
|
||||
|
||||
const visible = computed<YTDLPOption[]>(() => sorted.value);
|
||||
const visible = computed(() => sorted.value);
|
||||
|
||||
const grouped = computed<{ name: string; items: YTDLPOption[] }[]>(() => {
|
||||
const map = new Map<string, YTDLPOption[]>();
|
||||
|
||||
for (const o of visible.value) {
|
||||
const key = o.group || 'root';
|
||||
for (const option of visible.value) {
|
||||
const key = option.group || 'root';
|
||||
if (!map.has(key)) {
|
||||
map.set(key, []);
|
||||
}
|
||||
map.get(key)!.push(o);
|
||||
map.get(key)?.push(option);
|
||||
}
|
||||
|
||||
const dir = 'asc' === sortDir.value ? 1 : -1;
|
||||
const out = Array.from(map.entries()).map(([name, items]) => ({ name, items }));
|
||||
const dir = sortDir.value === 'asc' ? 1 : -1;
|
||||
const list = Array.from(map.entries()).map(([name, items]) => ({ name, items }));
|
||||
|
||||
if ('group' === sortBy.value) {
|
||||
out.sort((a, b) => a.name.localeCompare(b.name) * dir);
|
||||
if (sortBy.value === 'group') {
|
||||
list.sort((a, b) => a.name.localeCompare(b.name) * dir);
|
||||
} else {
|
||||
// When sorting by flag, groups should still be in alphabetical order
|
||||
out.sort((a, b) => a.name.localeCompare(b.name));
|
||||
list.sort((a, b) => a.name.localeCompare(b.name));
|
||||
}
|
||||
|
||||
return out;
|
||||
return list;
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.table td,
|
||||
.table th {
|
||||
vertical-align: top;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -2,6 +2,12 @@ import { reactive, readonly } from 'vue';
|
|||
|
||||
export type DialogResult<T = string | null> = { status: boolean; value: T };
|
||||
|
||||
export type DialogOption = {
|
||||
key: string;
|
||||
label: string;
|
||||
checked?: boolean;
|
||||
};
|
||||
|
||||
type BaseOptions = {
|
||||
/**
|
||||
* Title of the dialog
|
||||
|
|
@ -16,9 +22,9 @@ type BaseOptions = {
|
|||
*/
|
||||
confirmText?: string;
|
||||
/**
|
||||
* Color class for the confirm button (e.g., 'is-primary', 'is-danger')
|
||||
* Color for the confirm button.
|
||||
*/
|
||||
confirmColor?: string;
|
||||
confirmColor?: 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error' | 'neutral';
|
||||
};
|
||||
|
||||
export type PromptOptions = BaseOptions & {
|
||||
|
|
@ -50,6 +56,10 @@ export type ConfirmOptions = BaseOptions & {
|
|||
* Raw HTML content to include in the dialog message.
|
||||
*/
|
||||
rawHTML?: string;
|
||||
/**
|
||||
* Optional checkbox-style options to return with the confirmation result.
|
||||
*/
|
||||
options?: DialogOption[];
|
||||
};
|
||||
|
||||
export type AlertOptions = BaseOptions & {};
|
||||
|
|
@ -97,7 +107,7 @@ export const useDialog = () => {
|
|||
});
|
||||
|
||||
const confirmDialog = (opts: ConfirmOptions) =>
|
||||
new Promise<DialogResult<null>>((resolve) => {
|
||||
new Promise<DialogResult<Record<string, boolean> | null>>((resolve) => {
|
||||
state.queue.push({ type: 'confirm', opts, resolve });
|
||||
_dequeue();
|
||||
});
|
||||
|
|
@ -108,16 +118,21 @@ export const useDialog = () => {
|
|||
_dequeue();
|
||||
});
|
||||
|
||||
const confirm = (value?: string) => {
|
||||
const confirm = (value?: string | Record<string, boolean>) => {
|
||||
if (!state.current) return;
|
||||
if (state.current.type === 'prompt') {
|
||||
const val = value ?? state.input;
|
||||
const val = 'string' === typeof value ? value : state.input;
|
||||
const v = (state.current.opts as PromptOptions).validate?.(val);
|
||||
if (v && v !== true) {
|
||||
state.errorMsg = v;
|
||||
return;
|
||||
}
|
||||
state.current.resolve({ status: true, value: val });
|
||||
} else if (state.current.type === 'confirm') {
|
||||
state.current.resolve({
|
||||
status: true,
|
||||
value: 'object' === typeof value && null !== value ? value : null,
|
||||
});
|
||||
} else {
|
||||
state.current.resolve({ status: true, value: null });
|
||||
}
|
||||
|
|
|
|||
170
ui/app/composables/useDocs.ts
Normal file
170
ui/app/composables/useDocs.ts
Normal file
|
|
@ -0,0 +1,170 @@
|
|||
export type DocsFile = 'README.md' | 'FAQ.md' | 'API.md';
|
||||
|
||||
export type DocsEntry = {
|
||||
id: string;
|
||||
title: string;
|
||||
description: string;
|
||||
file: DocsFile;
|
||||
route: string;
|
||||
slug: string[];
|
||||
icon: string;
|
||||
navLabel: string;
|
||||
};
|
||||
|
||||
const DOCS_ASSETS = ['sc_short.jpg', 'sc_simple.jpg'] as const;
|
||||
|
||||
const DOCS_ENTRIES: DocsEntry[] = [
|
||||
{
|
||||
id: 'readme',
|
||||
title: 'README',
|
||||
description: 'Project overview',
|
||||
file: 'README.md',
|
||||
route: '/docs/readme',
|
||||
slug: ['readme'],
|
||||
icon: 'i-lucide-book-open',
|
||||
navLabel: 'README',
|
||||
},
|
||||
{
|
||||
id: 'faq',
|
||||
title: 'FAQ',
|
||||
description: 'Answers for setup details, task handlers, and common issues.',
|
||||
file: 'FAQ.md',
|
||||
route: '/docs/faq',
|
||||
slug: ['faq'],
|
||||
icon: 'i-lucide-circle-help',
|
||||
navLabel: 'FAQ',
|
||||
},
|
||||
{
|
||||
id: 'docs-api',
|
||||
title: 'API',
|
||||
description: 'HTTP API reference and endpoint behavior.',
|
||||
file: 'API.md',
|
||||
route: '/docs/api',
|
||||
slug: ['api'],
|
||||
icon: 'i-lucide-code-xml',
|
||||
navLabel: 'API',
|
||||
},
|
||||
];
|
||||
|
||||
const DOCS_ROUTE_BY_FILE = new Map(DOCS_ENTRIES.map((entry) => [entry.file, entry.route]));
|
||||
const normalizeSlugParts = (slug?: string | string[]): string[] => {
|
||||
if (!slug) {
|
||||
return [];
|
||||
}
|
||||
|
||||
return (Array.isArray(slug) ? slug : [slug])
|
||||
.map((part) => part.trim().toLowerCase())
|
||||
.filter(Boolean);
|
||||
};
|
||||
|
||||
const getDocsEntryBySlug = (slug?: string | string[]): DocsEntry | undefined => {
|
||||
const parts = normalizeSlugParts(slug);
|
||||
|
||||
if (parts.length === 0) {
|
||||
return DOCS_ENTRIES[0];
|
||||
}
|
||||
|
||||
const key = parts.join('/');
|
||||
|
||||
if (key === 'readme') {
|
||||
return DOCS_ENTRIES[0];
|
||||
}
|
||||
|
||||
return DOCS_ENTRIES.find((entry) => entry.slug.join('/') === key);
|
||||
};
|
||||
|
||||
const getDocsNavigationEntries = () =>
|
||||
DOCS_ENTRIES.map((entry) => ({
|
||||
id: entry.id,
|
||||
label: entry.navLabel,
|
||||
icon: entry.icon,
|
||||
to: entry.route,
|
||||
}));
|
||||
|
||||
const extractKnownDocsTarget = (href: string): { name: string; hash: string } | undefined => {
|
||||
if (!href || href.startsWith('#')) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
try {
|
||||
const parsed = new URL(href, window?.origin || 'http://localhost');
|
||||
const segments = parsed.pathname.split('/').filter(Boolean);
|
||||
const name = segments.at(-1) || '';
|
||||
|
||||
if (
|
||||
DOCS_ROUTE_BY_FILE.has(name as DocsFile) ||
|
||||
DOCS_ASSETS.includes(name as (typeof DOCS_ASSETS)[number])
|
||||
) {
|
||||
return { name, hash: parsed.hash || '' };
|
||||
}
|
||||
} catch {}
|
||||
|
||||
return undefined;
|
||||
};
|
||||
|
||||
const resolveDocsLink = (href: string): { href: string; external: boolean; docRoute?: string } => {
|
||||
if (!href) {
|
||||
return { href, external: false };
|
||||
}
|
||||
|
||||
if (href.startsWith('#')) {
|
||||
const route = window?.location?.pathname || '';
|
||||
const currentRoute = `${route}${href}`;
|
||||
return { href: currentRoute, external: false, docRoute: currentRoute };
|
||||
}
|
||||
|
||||
try {
|
||||
const parsed = new URL(href, window?.origin || 'http://localhost');
|
||||
const currentPath = window?.location?.pathname || '';
|
||||
|
||||
if (
|
||||
parsed.origin === (window?.origin || parsed.origin) &&
|
||||
parsed.hash &&
|
||||
parsed.pathname === currentPath
|
||||
) {
|
||||
const currentRoute = `${parsed.pathname}${parsed.hash}`;
|
||||
return { href: currentRoute, external: false, docRoute: currentRoute };
|
||||
}
|
||||
} catch {}
|
||||
|
||||
const match = extractKnownDocsTarget(href);
|
||||
if (!match) {
|
||||
return { href, external: true };
|
||||
}
|
||||
|
||||
const docsRoute = DOCS_ROUTE_BY_FILE.get(match.name as DocsFile);
|
||||
if (docsRoute) {
|
||||
const route = `${docsRoute}${match.hash}`;
|
||||
return {
|
||||
href: route,
|
||||
external: false,
|
||||
docRoute: route,
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
href: `/api/docs/${match.name}`,
|
||||
external: false,
|
||||
};
|
||||
};
|
||||
|
||||
const resolveDocsImageSrc = (href: string): string => {
|
||||
const match = extractKnownDocsTarget(href);
|
||||
if (!match) {
|
||||
return href;
|
||||
}
|
||||
|
||||
if (DOCS_ASSETS.includes(match.name as (typeof DOCS_ASSETS)[number])) {
|
||||
return `/api/docs/${match.name}`;
|
||||
}
|
||||
|
||||
return href;
|
||||
};
|
||||
|
||||
export {
|
||||
DOCS_ENTRIES,
|
||||
getDocsEntryBySlug,
|
||||
getDocsNavigationEntries,
|
||||
resolveDocsImageSrc,
|
||||
resolveDocsLink,
|
||||
};
|
||||
|
|
@ -1,8 +1,15 @@
|
|||
import { useStorage } from '@vueuse/core';
|
||||
import { POSITION, useToast } from 'vue-toastification';
|
||||
import { getNuxtToastManager } from '~/utils/nuxtToastManager';
|
||||
|
||||
export type notificationType = 'info' | 'success' | 'warning' | 'error';
|
||||
export type notificationTarget = 'toast' | 'browser';
|
||||
export type toastPosition =
|
||||
| 'top-left'
|
||||
| 'top-center'
|
||||
| 'top-right'
|
||||
| 'bottom-left'
|
||||
| 'bottom-center'
|
||||
| 'bottom-right';
|
||||
|
||||
export interface notification {
|
||||
id: string;
|
||||
|
|
@ -16,18 +23,30 @@ export interface notificationOptions {
|
|||
timeout?: number;
|
||||
force?: boolean;
|
||||
closeOnClick?: boolean;
|
||||
position?: POSITION;
|
||||
// eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
|
||||
onClick?: (closeToast: Function) => void;
|
||||
position?: toastPosition;
|
||||
onClick?: (toast: { id: string | number }) => void;
|
||||
store?: boolean;
|
||||
lowPriority?: boolean;
|
||||
}
|
||||
|
||||
const allowToast = useStorage<boolean>('allow_toasts', true);
|
||||
const toastPosition = useStorage<POSITION>('toast_position', POSITION.TOP_RIGHT);
|
||||
const toastPosition = useStorage<toastPosition>('toast_position', 'top-right');
|
||||
const toastDismissOnClick = useStorage<boolean>('toast_dismiss_on_click', true);
|
||||
const toastTarget = useStorage<notificationTarget>('toast_target', 'toast');
|
||||
const toast = useToast();
|
||||
|
||||
const toastMeta = (type: notificationType) => {
|
||||
switch (type) {
|
||||
case 'success':
|
||||
return { color: 'success' as const, icon: 'i-lucide-badge-check' };
|
||||
case 'warning':
|
||||
return { color: 'warning' as const, icon: 'i-lucide-circle-alert' };
|
||||
case 'error':
|
||||
return { color: 'error' as const, icon: 'i-lucide-triangle-alert' };
|
||||
case 'info':
|
||||
default:
|
||||
return { color: 'info' as const, icon: 'i-lucide-info' };
|
||||
}
|
||||
};
|
||||
|
||||
const requestBrowserPermission = async (): Promise<NotificationPermission> => {
|
||||
if (!('Notification' in window)) {
|
||||
|
|
@ -60,23 +79,21 @@ const sendMessage = (
|
|||
'granted' !== Notification.permission;
|
||||
|
||||
if (useToastNotification) {
|
||||
switch (type) {
|
||||
case 'info':
|
||||
toast.info(message, opts);
|
||||
break;
|
||||
case 'success':
|
||||
toast.success(message, opts);
|
||||
break;
|
||||
case 'warning':
|
||||
toast.warning(message, opts);
|
||||
break;
|
||||
case 'error':
|
||||
toast.error(message, opts);
|
||||
break;
|
||||
default:
|
||||
toast.error(`Unknown notification type: ${type}. ${message}`, opts);
|
||||
break;
|
||||
const toast = getNuxtToastManager();
|
||||
if (!toast) {
|
||||
console.warn('Nuxt toast manager is not ready yet; skipping toast notification.');
|
||||
return;
|
||||
}
|
||||
|
||||
const meta = toastMeta(type);
|
||||
toast.add({
|
||||
title: message,
|
||||
color: meta.color,
|
||||
icon: meta.icon,
|
||||
duration: opts?.timeout,
|
||||
close: true,
|
||||
onClick: opts?.onClick,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -122,15 +139,18 @@ const notify = (type: notificationType, message: string, opts?: notificationOpti
|
|||
}
|
||||
|
||||
opts.closeOnClick = toastDismissOnClick.value;
|
||||
opts.position = toastPosition.value ?? POSITION.TOP_RIGHT;
|
||||
// eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
|
||||
opts.onClick = (closeToast: Function) => {
|
||||
if (opts?.closeOnClick !== false) {
|
||||
closeToast();
|
||||
}
|
||||
opts.position = toastPosition.value ?? 'top-right';
|
||||
opts.onClick = (toastInstance: { id: string | number }) => {
|
||||
if (notificationStore) {
|
||||
notificationStore.markRead(id);
|
||||
}
|
||||
if (opts?.closeOnClick !== false) {
|
||||
const toast = getNuxtToastManager();
|
||||
if (!toast) {
|
||||
return;
|
||||
}
|
||||
toast.remove(toastInstance.id);
|
||||
}
|
||||
};
|
||||
|
||||
sendMessage(type, id, message, opts);
|
||||
|
|
|
|||
155
ui/app/composables/usePresetEditor.ts
Normal file
155
ui/app/composables/usePresetEditor.ts
Normal file
|
|
@ -0,0 +1,155 @@
|
|||
import { computed, ref } from 'vue';
|
||||
|
||||
import type { Preset } from '~/types/presets';
|
||||
import { cleanObject, prettyName } from '~/utils';
|
||||
|
||||
type EditablePreset = Partial<Preset> & {
|
||||
raw?: boolean;
|
||||
toggle_description?: boolean;
|
||||
};
|
||||
|
||||
const REMOVE_KEYS = ['raw', 'toggle_description'];
|
||||
|
||||
const makeEmptyPreset = (): Partial<Preset> => ({
|
||||
name: '',
|
||||
description: '',
|
||||
folder: '',
|
||||
template: '',
|
||||
cookies: '',
|
||||
cli: '',
|
||||
priority: 0,
|
||||
});
|
||||
|
||||
const sanitizePreset = (item: Preset | EditablePreset): Partial<Preset> => {
|
||||
const cleaned = cleanObject(JSON.parse(JSON.stringify(item)), REMOVE_KEYS) as Partial<Preset> & {
|
||||
default?: boolean;
|
||||
};
|
||||
|
||||
if ('default' in cleaned) {
|
||||
delete cleaned.default;
|
||||
}
|
||||
|
||||
return cleaned;
|
||||
};
|
||||
|
||||
export const usePresetEditor = () => {
|
||||
const presetsStore = usePresets();
|
||||
const dialog = useDialog();
|
||||
|
||||
const isOpen = ref(false);
|
||||
const reference = ref<number | null>(null);
|
||||
const preset = ref<Partial<Preset>>(makeEmptyPreset());
|
||||
const initialSnapshot = ref('');
|
||||
const sessionId = ref(0);
|
||||
|
||||
const modalTitle = computed(() => {
|
||||
return reference.value ? `Edit - ${prettyName(preset.value.name || '')}` : 'Add';
|
||||
});
|
||||
|
||||
const modalDescription = computed(() => {
|
||||
return reference.value ? 'Update an existing preset.' : 'Create a preset.';
|
||||
});
|
||||
|
||||
const modalKey = computed(() => `${reference.value ?? 'create'}:${sessionId.value}`);
|
||||
|
||||
const reset = (): void => {
|
||||
reference.value = null;
|
||||
preset.value = makeEmptyPreset();
|
||||
initialSnapshot.value = '';
|
||||
};
|
||||
|
||||
const close = (): void => {
|
||||
isOpen.value = false;
|
||||
reset();
|
||||
};
|
||||
|
||||
const snapshot = (item: Partial<Preset>): string =>
|
||||
JSON.stringify(sanitizePreset(item as Preset));
|
||||
|
||||
const isDirty = computed(() => {
|
||||
if (!isOpen.value) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return snapshot(preset.value) !== initialSnapshot.value;
|
||||
});
|
||||
|
||||
const openCreate = (): void => {
|
||||
reset();
|
||||
sessionId.value += 1;
|
||||
initialSnapshot.value = snapshot(preset.value);
|
||||
isOpen.value = true;
|
||||
};
|
||||
|
||||
const openEdit = (item: Preset | EditablePreset): void => {
|
||||
reference.value = item.id ?? null;
|
||||
preset.value = sanitizePreset(item);
|
||||
sessionId.value += 1;
|
||||
initialSnapshot.value = snapshot(preset.value);
|
||||
isOpen.value = true;
|
||||
};
|
||||
|
||||
const requestClose = async (): Promise<void> => {
|
||||
if (presetsStore.addInProgress.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!isDirty.value) {
|
||||
close();
|
||||
return;
|
||||
}
|
||||
|
||||
const { status } = await dialog.confirmDialog({
|
||||
title: 'Discard changes?',
|
||||
message: 'You have unsaved changes. Close the preset editor and discard them?',
|
||||
confirmText: 'Discard',
|
||||
cancelText: 'Keep editing',
|
||||
confirmColor: 'warning',
|
||||
});
|
||||
|
||||
if (status === true) {
|
||||
close();
|
||||
}
|
||||
};
|
||||
|
||||
const submit = async ({
|
||||
reference: currentReference,
|
||||
preset: currentPreset,
|
||||
}: {
|
||||
reference: number | null;
|
||||
preset: Preset;
|
||||
}) => {
|
||||
const cleaned = sanitizePreset(currentPreset) as Preset;
|
||||
|
||||
if (currentReference) {
|
||||
const updated = await presetsStore.updatePreset(currentReference, cleaned);
|
||||
if (updated) {
|
||||
close();
|
||||
}
|
||||
return updated;
|
||||
}
|
||||
|
||||
const created = await presetsStore.createPreset(cleaned);
|
||||
if (created) {
|
||||
close();
|
||||
}
|
||||
return created;
|
||||
};
|
||||
|
||||
return {
|
||||
isOpen,
|
||||
reference,
|
||||
preset,
|
||||
modalKey,
|
||||
modalTitle,
|
||||
modalDescription,
|
||||
isDirty,
|
||||
addInProgress: presetsStore.addInProgress,
|
||||
openCreate,
|
||||
openEdit,
|
||||
close,
|
||||
requestClose,
|
||||
reset,
|
||||
submit,
|
||||
};
|
||||
};
|
||||
96
ui/app/composables/usePresetOptions.ts
Normal file
96
ui/app/composables/usePresetOptions.ts
Normal file
|
|
@ -0,0 +1,96 @@
|
|||
import { computed, toValue, type MaybeRefOrGetter } from 'vue';
|
||||
|
||||
import type { Preset } from '~/types/presets';
|
||||
import { prettyName } from '~/utils';
|
||||
|
||||
type PresetSelectItem = {
|
||||
type?: 'label' | 'item';
|
||||
label: string;
|
||||
value?: string;
|
||||
};
|
||||
|
||||
type PresetDefaultField = 'cookies' | 'cli' | 'template' | 'folder';
|
||||
|
||||
type UsePresetOptionsOptions = {
|
||||
order?: 'custom-first' | 'default-first';
|
||||
};
|
||||
|
||||
export const usePresetOptions = (
|
||||
source?: MaybeRefOrGetter<Preset[] | readonly Preset[] | undefined>,
|
||||
options: UsePresetOptionsOptions = {},
|
||||
) => {
|
||||
const config = useConfigStore();
|
||||
|
||||
const presets = computed<Preset[]>(() => {
|
||||
const items = source ? toValue(source) : config.presets;
|
||||
return Array.isArray(items) ? [...items] : [];
|
||||
});
|
||||
|
||||
const defaultPresets = computed(() => presets.value.filter((item) => item.default));
|
||||
const customPresets = computed(() => presets.value.filter((item) => !item.default));
|
||||
|
||||
const filterPresets = (flag: boolean = true): Preset[] =>
|
||||
presets.value.filter((item) => item.default === flag);
|
||||
|
||||
const findPreset = (name?: string | null): Preset | undefined =>
|
||||
presets.value.find((item) => item.name === name);
|
||||
|
||||
const hasPreset = (name?: string | null): boolean => Boolean(findPreset(name));
|
||||
|
||||
const selectItems = computed<PresetSelectItem[]>(() => {
|
||||
const items: PresetSelectItem[] = [];
|
||||
|
||||
const groups =
|
||||
options.order === 'default-first'
|
||||
? [
|
||||
{ label: 'Default presets', list: defaultPresets.value },
|
||||
{ label: 'Custom presets', list: customPresets.value },
|
||||
]
|
||||
: [
|
||||
{ label: 'Custom presets', list: customPresets.value },
|
||||
{ label: 'Default presets', list: defaultPresets.value },
|
||||
];
|
||||
|
||||
groups.forEach((group) => {
|
||||
if (group.list.length < 1) {
|
||||
return;
|
||||
}
|
||||
|
||||
items.push({ type: 'label', label: group.label });
|
||||
group.list.forEach((preset) => {
|
||||
items.push({ label: prettyName(preset.name), value: preset.name });
|
||||
});
|
||||
});
|
||||
|
||||
return items;
|
||||
});
|
||||
|
||||
const getPresetDefault = (
|
||||
presetName: string | undefined,
|
||||
type: PresetDefaultField,
|
||||
fallback: string = '',
|
||||
downloadPath: string = config.app.download_path || '',
|
||||
): string => {
|
||||
const preset = findPreset(presetName);
|
||||
if (!preset) {
|
||||
return fallback;
|
||||
}
|
||||
|
||||
if (type === 'folder' && preset.folder) {
|
||||
return preset.folder.replace(downloadPath, '') || fallback;
|
||||
}
|
||||
|
||||
return preset[type] || fallback;
|
||||
};
|
||||
|
||||
return {
|
||||
presets,
|
||||
defaultPresets,
|
||||
customPresets,
|
||||
filterPresets,
|
||||
findPreset,
|
||||
hasPreset,
|
||||
selectItems,
|
||||
getPresetDefault,
|
||||
};
|
||||
};
|
||||
113
ui/app/error.vue
113
ui/app/error.vue
|
|
@ -1,56 +1,95 @@
|
|||
<template>
|
||||
<NuxtLayout name="error-layout">
|
||||
<div>
|
||||
<div class="columns is-multiline">
|
||||
<div class="column is-12">
|
||||
<h1 class="title is-4">
|
||||
{{ error.statusCode
|
||||
}}<span v-if="error.statusMessage"> - {{ error.statusMessage }}</span>
|
||||
<div class="flex min-h-full flex-1 items-start justify-center py-4 sm:py-8">
|
||||
<UPageCard variant="outline" :ui="pageCardUi" class="w-full">
|
||||
<template #body>
|
||||
<div class="space-y-6 px-4 py-5 sm:px-6 sm:py-6 lg:px-7">
|
||||
<div class="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
|
||||
<div class="min-w-0 space-y-2">
|
||||
<div class="flex flex-wrap items-center gap-2 text-sm text-toned">
|
||||
<UIcon name="i-lucide-triangle-alert" class="size-4 text-warning" />
|
||||
<span>Application error</span>
|
||||
</div>
|
||||
|
||||
<h1 class="text-2xl font-semibold text-highlighted sm:text-3xl">
|
||||
{{ error.status || 'Unknown Error' }}
|
||||
<span v-if="error.statusText"> - {{ error.statusText }}</span>
|
||||
</h1>
|
||||
|
||||
<p class="max-w-3xl text-sm leading-6 text-toned">
|
||||
An unexpected error interrupted this view. You can go back home or retry the
|
||||
current route.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-12" v-if="error.message">
|
||||
<div class="notification has-background-warning-90 has-text-dark">
|
||||
<p>{{ error.message }}</p>
|
||||
|
||||
<div class="flex flex-wrap items-center gap-2 lg:justify-end">
|
||||
<UButton color="neutral" variant="outline" size="sm" icon="i-lucide-house" to="/">
|
||||
Back to Home
|
||||
</UButton>
|
||||
|
||||
<UButton color="primary" size="sm" icon="i-lucide-rotate-cw" @click="handleRetry">
|
||||
Retry
|
||||
</UButton>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column is-12" v-if="error.stack">
|
||||
<h2 class="title is-5 is-clickable" @click="showStacks = !showStacks">
|
||||
<span class="icon-text">
|
||||
<span class="icon">
|
||||
<i v-if="showStacks" class="fas fa-arrow-up"></i>
|
||||
<i v-else class="fas fa-arrow-down"></i>
|
||||
</span>
|
||||
<UAlert
|
||||
v-if="error.message"
|
||||
color="warning"
|
||||
variant="soft"
|
||||
icon="i-lucide-circle-alert"
|
||||
title="Details"
|
||||
:description="error.message"
|
||||
/>
|
||||
|
||||
<section v-if="error.stack" class="space-y-3 border-t border-default pt-5">
|
||||
<button
|
||||
type="button"
|
||||
class="inline-flex items-center gap-2 text-sm font-semibold text-highlighted transition hover:text-primary"
|
||||
@click="showStacks = !showStacks"
|
||||
>
|
||||
<UIcon
|
||||
:name="showStacks ? 'i-lucide-chevron-up' : 'i-lucide-chevron-down'"
|
||||
class="size-4"
|
||||
/>
|
||||
<span>Stack trace</span>
|
||||
</span>
|
||||
</h2>
|
||||
</button>
|
||||
|
||||
<pre v-if="showStacks"><code>{{ error.stack }}</code></pre>
|
||||
<div
|
||||
v-if="showStacks"
|
||||
class="overflow-x-auto rounded-lg border border-default bg-elevated/60"
|
||||
>
|
||||
<pre
|
||||
class="min-w-0 p-4 text-xs leading-6 whitespace-pre-wrap text-default"
|
||||
><code>{{ error.stack }}</code></pre>
|
||||
</div>
|
||||
|
||||
<div class="column is-12">
|
||||
<h2 class="title is-5">
|
||||
<NuxtLink to="/">
|
||||
<span class="icon-text">
|
||||
<span class="icon"><i class="fas fa-home"></i></span>
|
||||
<span>Back to Home</span>
|
||||
</span>
|
||||
</NuxtLink>
|
||||
</h2>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
</UPageCard>
|
||||
</div>
|
||||
</NuxtLayout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
error: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
<script setup lang="ts">
|
||||
import type { NuxtError } from '#app';
|
||||
|
||||
const props = defineProps<{
|
||||
error: NuxtError;
|
||||
}>();
|
||||
|
||||
const showStacks = ref(false);
|
||||
|
||||
const pageCardUi = {
|
||||
root: 'w-full bg-default',
|
||||
container: 'w-full p-0',
|
||||
wrapper: 'w-full items-stretch',
|
||||
body: 'w-full p-0',
|
||||
};
|
||||
|
||||
const handleRetry = async (): Promise<void> => {
|
||||
await clearError({ redirect: useRoute().fullPath });
|
||||
};
|
||||
|
||||
onMounted(() => console.error(props.error));
|
||||
</script>
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -1,21 +1,25 @@
|
|||
<template>
|
||||
<div class="container">
|
||||
<nav class="navbar is-dark mb-5">
|
||||
<div class="navbar-brand pl-5">
|
||||
<NuxtLink class="navbar-item" to="/">
|
||||
<span class="icon-text">
|
||||
<span class="icon"><i class="fas fa-home"></i></span>
|
||||
<UApp>
|
||||
<div class="min-h-screen bg-default text-default">
|
||||
<div
|
||||
class="mx-auto flex min-h-screen w-full max-w-5xl flex-col px-4 py-4 sm:px-6 sm:py-6 lg:px-8"
|
||||
>
|
||||
<header class="mb-6 flex items-center justify-between border-b border-default pb-4">
|
||||
<NuxtLink
|
||||
to="/"
|
||||
class="inline-flex items-center gap-2 text-sm font-semibold text-highlighted"
|
||||
>
|
||||
<UIcon name="i-lucide-house" class="size-4" />
|
||||
<span>Home</span>
|
||||
</span>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</nav>
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import 'assets/css/bulma.css';
|
||||
import 'assets/css/style.css';
|
||||
import 'assets/css/all.css';
|
||||
</script>
|
||||
<span class="text-xs tracking-[0.22em] text-toned uppercase">Error</span>
|
||||
</header>
|
||||
|
||||
<main class="flex min-w-0 flex-1 flex-col">
|
||||
<slot />
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</UApp>
|
||||
</template>
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -1,128 +1,162 @@
|
|||
<style scoped>
|
||||
.logs-container {
|
||||
padding: 1rem;
|
||||
min-width: 100%;
|
||||
max-height: 73vh;
|
||||
overflow-y: auto;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
hr {
|
||||
background-color: unset;
|
||||
border-bottom: 1px solid var(--bulma-grey-light) !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
<template>
|
||||
<main>
|
||||
<div class="mt-1 columns is-multiline">
|
||||
<div class="column is-12 is-clearfix is-unselectable">
|
||||
<span class="title is-4">
|
||||
<span class="icon"><i class="fas fa-cogs" /></span>
|
||||
CHANGELOG
|
||||
<main class="w-full min-w-0 max-w-full space-y-4">
|
||||
<div class="flex flex-col gap-3 xl:flex-row xl:items-start xl:justify-between">
|
||||
<div class="min-w-0 space-y-1">
|
||||
<div class="flex items-center gap-2 text-lg font-semibold text-highlighted">
|
||||
<UIcon name="i-lucide-git-commit-horizontal" class="size-5 text-toned" />
|
||||
<span>CHANGELOG</span>
|
||||
</div>
|
||||
|
||||
<p class="text-sm text-toned">
|
||||
Latest project changes, loaded remotely when available and falling back to the bundled
|
||||
changelog file.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap items-center justify-end gap-2">
|
||||
<div v-if="toggleFilter && logs.length > 0" class="relative w-full sm:w-80">
|
||||
<span
|
||||
class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-toned"
|
||||
>
|
||||
<UIcon name="i-lucide-filter" class="size-4" />
|
||||
</span>
|
||||
|
||||
<div class="is-pulled-right">
|
||||
<div class="field is-grouped">
|
||||
<p class="control has-icons-left" v-if="toggleFilter && logs && logs.length > 0">
|
||||
<input
|
||||
type="search"
|
||||
v-model.lazy="query"
|
||||
class="input"
|
||||
id="filter"
|
||||
v-model.lazy="query"
|
||||
type="search"
|
||||
placeholder="Filter changelog entries"
|
||||
class="w-full rounded-md border border-default bg-elevated py-2 pr-3 pl-9 text-sm text-default outline-none transition focus:border-primary"
|
||||
/>
|
||||
<span class="icon is-left"><i class="fas fa-filter" /></span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p class="control" v-if="logs && logs.length > 0">
|
||||
<button class="button is-danger is-light" @click="toggleFilter = !toggleFilter">
|
||||
<span class="icon"><i class="fas fa-filter" /></span>
|
||||
<UButton
|
||||
v-if="logs.length > 0"
|
||||
color="neutral"
|
||||
:variant="toggleFilter ? 'soft' : 'outline'"
|
||||
size="sm"
|
||||
icon="i-lucide-filter"
|
||||
@click="toggleFilter = !toggleFilter"
|
||||
>
|
||||
<span v-if="!isMobile">Filter</span>
|
||||
</button>
|
||||
</UButton>
|
||||
|
||||
<USwitch
|
||||
v-model="latestOnly"
|
||||
color="primary"
|
||||
size="sm"
|
||||
:label="latestOnly ? 'Latest Only' : 'All Loaded'"
|
||||
:ui="{ root: 'items-center gap-2', wrapper: 'ms-0 text-xs text-toned' }"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<UAlert
|
||||
v-if="isLoading"
|
||||
color="info"
|
||||
variant="soft"
|
||||
icon="i-lucide-loader-circle"
|
||||
title="Loading"
|
||||
description="Loading data. Please wait..."
|
||||
/>
|
||||
|
||||
<template v-else>
|
||||
<div v-if="filteredLogs.length > 0" class="space-y-4">
|
||||
<UPageCard v-for="log in filteredLogs" :key="log.tag" variant="outline" :ui="pageCardUi">
|
||||
<template #body>
|
||||
<div class="space-y-4">
|
||||
<div class="flex flex-wrap items-start justify-between gap-3">
|
||||
<div class="min-w-0 space-y-2">
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<div
|
||||
class="inline-flex items-center gap-2 text-base font-semibold text-highlighted"
|
||||
>
|
||||
<UIcon name="i-lucide-git-branch" class="size-4 text-toned" />
|
||||
<span>{{ log.tag }}</span>
|
||||
</div>
|
||||
|
||||
<UBadge v-if="isInstalled(log)" color="success" variant="soft" size="sm">
|
||||
Installed
|
||||
</UBadge>
|
||||
</div>
|
||||
|
||||
<p v-if="log.date" class="text-xs text-toned">
|
||||
<UTooltip :text="`Release Date: ${log.date}`">
|
||||
<span>{{ moment(log.date).fromNow() }}</span>
|
||||
</UTooltip>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<UBadge color="neutral" variant="soft" size="sm">
|
||||
{{ log.commits?.length || 0 }} commits
|
||||
</UBadge>
|
||||
</div>
|
||||
|
||||
<div class="is-hidden-mobile">
|
||||
<span class="subtitle"
|
||||
>This page display the latest changes and updates from the project.</span
|
||||
<div class="space-y-3 border-t border-default pt-4">
|
||||
<article
|
||||
v-for="commit in log.commits"
|
||||
:key="commit.sha"
|
||||
class="flex flex-col gap-2 rounded-md border border-default bg-muted/20 px-3 py-3"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns is-multiline" v-if="isLoading">
|
||||
<div class="column is-12">
|
||||
<Message class="is-info" title="Loading" icon="fas fa-spinner fa-spin">
|
||||
Loading data. Please wait...
|
||||
</Message>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template v-if="!isLoading">
|
||||
<div class="logs-container" v-if="filteredLogs && filteredLogs.length > 0">
|
||||
<div class="columns is-multiline">
|
||||
<div class="column p-0 m-0 is-12" v-for="(log, index) in filteredLogs" :key="log.tag">
|
||||
<div class="content p-0 m-0">
|
||||
<h1 class="is-4">
|
||||
<span class="icon"><i class="fas fa-code-branch" /></span>
|
||||
{{ log.tag }}
|
||||
<span class="tag has-text-success" v-if="isInstalled(log)">Installed</span>
|
||||
<template v-if="log.date">
|
||||
<span style="font-size: 0.5em">
|
||||
-
|
||||
<span class="has-tooltip" v-tooltip="`Release Date: ${log.date}`">
|
||||
{{ moment(log.date).fromNow() }}
|
||||
</span></span
|
||||
>
|
||||
</template>
|
||||
</h1>
|
||||
<hr />
|
||||
<ul>
|
||||
<li v-for="commit in log.commits" :key="commit.sha">
|
||||
<strong> {{ ucFirst(commit.message).replace(/\.$/, '') }}. </strong> -
|
||||
<small>
|
||||
<NuxtLink :to="`${REPO}/commit/${commit.full_sha}`" target="_blank">
|
||||
<span
|
||||
class="has-tooltip"
|
||||
v-tooltip="`SHA: ${commit.full_sha} - Date: ${commit.date}`"
|
||||
>
|
||||
{{ moment(commit.date).fromNow() }}
|
||||
<div class="flex flex-wrap items-start justify-between gap-3">
|
||||
<p class="min-w-0 flex-1 text-sm text-default">
|
||||
<span class="font-semibold text-highlighted">
|
||||
{{ ucFirst(commit.message).replace(/\.$/, '') }}.
|
||||
</span>
|
||||
</p>
|
||||
|
||||
<div class="flex shrink-0 items-center gap-2">
|
||||
<NuxtLink
|
||||
:to="`${REPO}/commit/${commit.full_sha}`"
|
||||
target="_blank"
|
||||
class="text-xs font-medium text-primary hover:underline"
|
||||
>
|
||||
{{ commit.sha }}
|
||||
</NuxtLink>
|
||||
<span
|
||||
v-tooltip="'Code is at this commit.'"
|
||||
|
||||
<UIcon
|
||||
v-if="commit.full_sha === app_sha"
|
||||
class="icon has-text-success"
|
||||
><i class="fas fa-check"
|
||||
/></span>
|
||||
</small>
|
||||
</li>
|
||||
</ul>
|
||||
<hr v-if="index < logs.length - 1" />
|
||||
</div>
|
||||
</div>
|
||||
name="i-lucide-check"
|
||||
class="size-4 text-success"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns is-multiline" v-if="!filteredLogs || filteredLogs.length < 1">
|
||||
<div class="column is-12">
|
||||
<Message
|
||||
title="No Results"
|
||||
class="is-warning"
|
||||
icon="fas fa-search"
|
||||
v-if="query"
|
||||
:useClose="true"
|
||||
@close="query = ''"
|
||||
>
|
||||
<p>
|
||||
No changelog entries found for the query: <strong>{{ query }}</strong
|
||||
>.
|
||||
</p>
|
||||
<p>Please try a different search term.</p>
|
||||
</Message>
|
||||
<div class="flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-toned">
|
||||
<span>{{ commit.author }}</span>
|
||||
<UTooltip :text="`SHA: ${commit.full_sha} - Date: ${commit.date}`">
|
||||
<span>{{ moment(commit.date).fromNow() }}</span>
|
||||
</UTooltip>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</UPageCard>
|
||||
</div>
|
||||
|
||||
<div v-else class="space-y-3">
|
||||
<UAlert
|
||||
v-if="query"
|
||||
color="warning"
|
||||
variant="soft"
|
||||
icon="i-lucide-search"
|
||||
title="No Results"
|
||||
:description="`No changelog entries found for the query: ${query}.`"
|
||||
/>
|
||||
|
||||
<UButton v-if="query" color="neutral" variant="outline" size="sm" @click="query = ''">
|
||||
Clear filter
|
||||
</UButton>
|
||||
|
||||
<UAlert
|
||||
v-else
|
||||
color="warning"
|
||||
variant="soft"
|
||||
icon="i-lucide-circle-alert"
|
||||
title="No changelog entries"
|
||||
description="No changelog data is available right now."
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</main>
|
||||
|
|
@ -130,7 +164,9 @@ hr {
|
|||
|
||||
<script setup lang="ts">
|
||||
import moment from 'moment';
|
||||
import { useStorage } from '@vueuse/core';
|
||||
import type { changelogs, changeset } from '~/types/changelogs';
|
||||
import { request, ucFirst, uri } from '~/utils';
|
||||
|
||||
const toast = useNotification();
|
||||
const config = useConfigStore();
|
||||
|
|
@ -141,14 +177,23 @@ useHead({ title: 'CHANGELOG' });
|
|||
const PROJECT = 'ytptube';
|
||||
const REPO = `https://github.com/arabcoders/${PROJECT}`;
|
||||
const REPO_URL = `https://arabcoders.github.io/${PROJECT}/CHANGELOG.json?version={version}`;
|
||||
const DEFAULT_LIMIT = 10;
|
||||
|
||||
const logs = ref<changelogs>([]);
|
||||
const app_version = ref('');
|
||||
const app_branch = ref('');
|
||||
const app_sha = ref('');
|
||||
const isLoading = ref(true);
|
||||
const query = ref<string>('');
|
||||
const toggleFilter = ref<boolean>(false);
|
||||
const query = ref('');
|
||||
const toggleFilter = ref(false);
|
||||
const latestOnly = useStorage<boolean>('changelog_latest_only', true);
|
||||
|
||||
const pageCardUi = {
|
||||
root: 'w-full bg-default',
|
||||
container: 'w-full p-4 sm:p-5',
|
||||
wrapper: 'w-full items-stretch',
|
||||
body: 'w-full',
|
||||
};
|
||||
|
||||
watch(toggleFilter, () => {
|
||||
if (!toggleFilter.value) {
|
||||
|
|
@ -156,14 +201,19 @@ watch(toggleFilter, () => {
|
|||
}
|
||||
});
|
||||
|
||||
const visibleLogs = computed<changelogs>(() =>
|
||||
latestOnly.value ? logs.value.slice(0, DEFAULT_LIMIT) : logs.value,
|
||||
);
|
||||
|
||||
const filteredLogs = computed<changelogs>(() => {
|
||||
const q = query.value?.toLowerCase();
|
||||
if (!q) return logs.value;
|
||||
if (!q) {
|
||||
return visibleLogs.value;
|
||||
}
|
||||
|
||||
return logs.value
|
||||
return visibleLogs.value
|
||||
.map((log) => {
|
||||
const tagMatches = log.tag.toLowerCase().includes(q);
|
||||
|
||||
const filteredCommits =
|
||||
log.commits?.filter(
|
||||
(commit) =>
|
||||
|
|
@ -181,8 +231,8 @@ const filteredLogs = computed<changelogs>(() => {
|
|||
.filter((log): log is changeset => log !== null);
|
||||
});
|
||||
|
||||
const loadContent = async () => {
|
||||
if ('' === app_version.value || logs.value.length > 0) {
|
||||
const loadContent = async (): Promise<void> => {
|
||||
if (app_version.value === '' || logs.value.length > 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -192,22 +242,19 @@ const loadContent = async () => {
|
|||
REPO_URL.replace('{branch}', app_branch.value).replace('{version}', app_version.value),
|
||||
);
|
||||
logs.value = await changes.json();
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
logs.value = await (await request(uri('/CHANGELOG.json'), { method: 'GET' })).json();
|
||||
}
|
||||
|
||||
await nextTick();
|
||||
logs.value = logs.value.slice(0, 10);
|
||||
} catch (e: any) {
|
||||
console.error(e);
|
||||
toast.error(`Failed to fetch changelog. ${e.message}`);
|
||||
} catch (error: any) {
|
||||
console.error(error);
|
||||
toast.error(`Failed to fetch changelog. ${error.message}`);
|
||||
} finally {
|
||||
isLoading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const isInstalled = (log: changeset) => {
|
||||
const isInstalled = (log: changeset): boolean => {
|
||||
const installed = String(app_sha.value);
|
||||
|
||||
if (log.full_sha.startsWith(installed)) {
|
||||
|
|
@ -228,6 +275,6 @@ onMounted(async () => {
|
|||
app_branch.value = config.app.app_branch;
|
||||
app_version.value = config.app.app_version;
|
||||
app_sha.value = config.app.app_commit_sha;
|
||||
loadContent();
|
||||
await loadContent();
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,233 +1,182 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="mt-1 columns is-multiline">
|
||||
<div class="column is-12 is-clearfix is-unselectable">
|
||||
<span class="title is-4">
|
||||
<span class="icon-text">
|
||||
<template v-if="toggleForm">
|
||||
<span class="icon"
|
||||
><i class="fa-solid" :class="{ 'fa-edit': itemRef, 'fa-plus': !itemRef }"
|
||||
/></span>
|
||||
<span>{{ itemRef ? `Edit - ${item.name}` : 'Add new condition' }}</span>
|
||||
</template>
|
||||
<template v-else>
|
||||
<span class="icon"><i class="fa-solid fa-filter" /></span>
|
||||
<main class="w-full min-w-0 max-w-full space-y-4">
|
||||
<div class="flex flex-col gap-3 xl:flex-row xl:items-start xl:justify-between">
|
||||
<div class="min-w-0 space-y-1">
|
||||
<div class="flex items-center gap-2 text-lg font-semibold text-highlighted">
|
||||
<UIcon name="i-lucide-filter" class="size-5 text-toned" />
|
||||
<span>Conditions</span>
|
||||
</template>
|
||||
</span>
|
||||
</span>
|
||||
<div class="is-pulled-right" v-if="!toggleForm">
|
||||
<div class="field is-grouped">
|
||||
<p class="control has-icons-left" v-if="toggleFilter && items && items.length > 0">
|
||||
<input
|
||||
type="search"
|
||||
v-model.lazy="query"
|
||||
class="input"
|
||||
id="filter"
|
||||
placeholder="Filter displayed content"
|
||||
/>
|
||||
<span class="icon is-left"><i class="fas fa-filter" /></span>
|
||||
</p>
|
||||
|
||||
<p class="control" v-if="items && items.length > 0">
|
||||
<button class="button is-danger is-light" @click="toggleFilter = !toggleFilter">
|
||||
<span class="icon"><i class="fas fa-filter" /></span>
|
||||
<span v-if="!isMobile">Filter</span>
|
||||
</button>
|
||||
</p>
|
||||
|
||||
<p class="control">
|
||||
<button
|
||||
class="button is-primary"
|
||||
@click="
|
||||
resetForm(false);
|
||||
toggleForm = !toggleForm;
|
||||
"
|
||||
>
|
||||
<span class="icon"><i class="fas fa-add" /></span>
|
||||
<span v-if="!isMobile">New Condition</span>
|
||||
</button>
|
||||
</p>
|
||||
<p class="control">
|
||||
<button
|
||||
v-tooltip.bottom="'Change display style'"
|
||||
class="button has-tooltip-bottom"
|
||||
@click="() => (display_style = display_style === 'list' ? 'grid' : 'list')"
|
||||
>
|
||||
<span class="icon">
|
||||
<i
|
||||
class="fa-solid"
|
||||
:class="{
|
||||
'fa-table': display_style !== 'list',
|
||||
'fa-table-list': display_style === 'list',
|
||||
}"
|
||||
/></span>
|
||||
<span v-if="!isMobile">
|
||||
{{ display_style === 'list' ? 'List' : 'Grid' }}
|
||||
</span>
|
||||
</button>
|
||||
</p>
|
||||
<p class="control">
|
||||
<button
|
||||
class="button is-info"
|
||||
@click="async () => await loadContent(page)"
|
||||
:class="{ 'is-loading': isLoading }"
|
||||
:disabled="isLoading"
|
||||
v-if="items && items.length > 0"
|
||||
>
|
||||
<span class="icon"><i class="fas fa-refresh" /></span>
|
||||
<span v-if="!isMobile">Reload</span>
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="is-hidden-mobile" v-if="!toggleForm">
|
||||
<span class="subtitle">
|
||||
|
||||
<p class="text-sm text-toned">
|
||||
Run yt-dlp custom match filter on returned info. and apply options.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap items-center justify-end gap-2">
|
||||
<div v-if="showFilter && items.length > 0" class="relative w-full sm:w-80">
|
||||
<span
|
||||
class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-toned"
|
||||
>
|
||||
<UIcon name="i-lucide-filter" class="size-4" />
|
||||
</span>
|
||||
<input
|
||||
id="filter"
|
||||
ref="filterInput"
|
||||
v-model="query"
|
||||
type="search"
|
||||
placeholder="Filter displayed content"
|
||||
class="w-full rounded-md border border-default bg-elevated py-2 pr-3 pl-9 text-sm text-default outline-none transition focus:border-primary"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<UButton
|
||||
v-if="items.length > 0"
|
||||
color="neutral"
|
||||
:variant="showFilter ? 'soft' : 'outline'"
|
||||
size="sm"
|
||||
icon="i-lucide-filter"
|
||||
@click="toggleFilterPanel"
|
||||
>
|
||||
<span v-if="!isMobile">Filter</span>
|
||||
</UButton>
|
||||
|
||||
<UButton
|
||||
color="neutral"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
icon="i-lucide-plus"
|
||||
@click="openCreate"
|
||||
>
|
||||
<span v-if="!isMobile">New Condition</span>
|
||||
</UButton>
|
||||
|
||||
<UButton
|
||||
v-if="items.length > 0"
|
||||
color="neutral"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
:icon="displayStyle === 'list' ? 'i-lucide-list' : 'i-lucide-grid-2x2'"
|
||||
@click="toggleDisplayStyle"
|
||||
>
|
||||
<span v-if="!isMobile">{{ displayStyle === 'list' ? 'List' : 'Grid' }}</span>
|
||||
</UButton>
|
||||
|
||||
<UButton
|
||||
v-if="items.length > 0"
|
||||
color="neutral"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
icon="i-lucide-refresh-cw"
|
||||
:loading="isLoading"
|
||||
:disabled="isLoading"
|
||||
@click="() => void reloadContent()"
|
||||
>
|
||||
<span v-if="!isMobile">Reload</span>
|
||||
</UButton>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column is-12" v-if="!toggleForm && paging?.total_pages > 1">
|
||||
<Pager
|
||||
v-if="paging?.total_pages > 1"
|
||||
:page="paging.page"
|
||||
:last_page="paging.total_pages"
|
||||
:isLoading="isLoading"
|
||||
@navigate="
|
||||
async (newPage) => {
|
||||
page = newPage;
|
||||
await loadContent(newPage);
|
||||
}
|
||||
"
|
||||
@navigate="navigatePage"
|
||||
/>
|
||||
|
||||
<div
|
||||
v-if="displayStyle === 'list' && filteredItems.length > 0"
|
||||
class="w-full min-w-0 max-w-full overflow-hidden rounded-lg border border-default bg-default"
|
||||
>
|
||||
<div class="w-full max-w-full overflow-x-auto overscroll-x-contain">
|
||||
<table class="min-w-225 w-full text-sm">
|
||||
<thead class="bg-muted/40 text-xs uppercase tracking-wide text-toned">
|
||||
<tr class="text-center [&>th]:px-3 [&>th]:py-3 [&>th]:font-semibold">
|
||||
<th class="w-full text-left">Condition</th>
|
||||
<th class="w-[1%]">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody class="divide-y divide-default">
|
||||
<tr v-for="cond in filteredItems" :key="cond.id" class="hover:bg-muted/20">
|
||||
<td class="px-3 py-3 align-middle">
|
||||
<div class="space-y-2">
|
||||
<div class="font-semibold text-highlighted">{{ cond.name }}</div>
|
||||
|
||||
<div class="flex flex-wrap items-center gap-3 text-xs text-toned">
|
||||
<div class="inline-flex items-center gap-2">
|
||||
<UTooltip
|
||||
:text="`Click to ${cond.enabled !== false ? 'disable' : 'enable'} condition`"
|
||||
>
|
||||
<USwitch
|
||||
:model-value="cond.enabled !== false"
|
||||
:disabled="conditions.addInProgress.value"
|
||||
@update:model-value="() => void toggleEnabled(cond)"
|
||||
/>
|
||||
</UTooltip>
|
||||
<span>{{ cond.enabled !== false ? 'Enabled' : 'Disabled' }}</span>
|
||||
</div>
|
||||
|
||||
<div class="column is-12" v-if="toggleForm">
|
||||
<ConditionForm
|
||||
:addInProgress="conditions.addInProgress.value"
|
||||
:reference="itemRef"
|
||||
:item="item as Condition"
|
||||
@cancel="resetForm(true)"
|
||||
@submit="updateItem"
|
||||
/>
|
||||
<span v-if="cond.priority > 0" class="inline-flex items-center gap-1">
|
||||
<UIcon name="i-lucide-list-ordered" class="size-3.5" />
|
||||
<span>Priority: {{ cond.priority }}</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="space-y-1 text-xs text-toned">
|
||||
<div class="flex items-start gap-2">
|
||||
<UIcon name="i-lucide-filter" class="mt-0.5 size-3.5 shrink-0" />
|
||||
<code class="wrap-break-word">{{ cond.filter }}</code>
|
||||
</div>
|
||||
|
||||
<div v-if="cond.cli" class="flex items-start gap-2">
|
||||
<UIcon name="i-lucide-terminal" class="mt-0.5 size-3.5 shrink-0" />
|
||||
<code class="wrap-break-word">{{ cond.cli }}</code>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="columns is-multiline"
|
||||
v-if="!isLoading && !toggleForm && filteredItems && filteredItems.length > 0"
|
||||
v-for="([key, value], index) in extrasEntries(cond.extras)"
|
||||
:key="`${cond.id}-${key}-${index}`"
|
||||
class="flex items-start gap-2"
|
||||
>
|
||||
<div class="column is-12" v-if="'list' === display_style">
|
||||
<div class="table-container">
|
||||
<table
|
||||
class="table is-striped is-hoverable is-fullwidth is-bordered"
|
||||
style="min-width: 850px; table-layout: fixed"
|
||||
>
|
||||
<thead>
|
||||
<tr class="has-text-centered is-unselectable">
|
||||
<th width="80%">
|
||||
<span class="icon"><i class="fa-solid fa-filter" /></span>
|
||||
<span>Condition</span>
|
||||
</th>
|
||||
<th width="20%">
|
||||
<span class="icon"><i class="fa-solid fa-gear" /></span>
|
||||
<span>Actions</span>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="cond in filteredItems" :key="cond.id">
|
||||
<td class="is-vcentered">
|
||||
<div class="is-text-overflow is-bold">
|
||||
{{ cond.name }}
|
||||
<UIcon name="i-lucide-list" class="mt-0.5 size-3.5 shrink-0" />
|
||||
<code class="wrap-break-word">{{ key }}: {{ value }}</code>
|
||||
</div>
|
||||
<div class="is-unselectable">
|
||||
<span
|
||||
class="icon-text is-clickable"
|
||||
@click="toggleEnabled(cond)"
|
||||
v-tooltip="
|
||||
'Click to ' + (cond.enabled !== false ? 'disable' : 'enable') + ' condition'
|
||||
"
|
||||
>
|
||||
<span class="icon">
|
||||
<i
|
||||
class="fa-solid fa-power-off"
|
||||
:class="{
|
||||
'has-text-success': cond.enabled !== false,
|
||||
'has-text-danger': cond.enabled === false,
|
||||
}"
|
||||
/>
|
||||
</span>
|
||||
<span>{{ cond.enabled !== false ? 'Enabled' : 'Disabled' }}</span>
|
||||
</span>
|
||||
|
||||
<Popover :maxWidth="450">
|
||||
<template #trigger>
|
||||
<span class="is-clickable">
|
||||
<span class="icon"> <i class="fa-solid fa-info-circle" /></span>
|
||||
<span>Show Details</span>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<template #title><strong>Condition Details</strong></template>
|
||||
|
||||
<div v-if="cond.filter">
|
||||
<span class="icon"><i class="fa-solid fa-filter" /></span>
|
||||
<code>{{ cond.filter }}</code>
|
||||
</div>
|
||||
|
||||
<div v-if="cond.cli">
|
||||
<span class="icon"><i class="fa-solid fa-terminal" /></span>
|
||||
<code>{{ cond.cli }}</code>
|
||||
</div>
|
||||
|
||||
<span v-if="cond.extras && Object.keys(cond.extras).length > 0">
|
||||
<template v-for="(value, key) in cond.extras" :key="key">
|
||||
<div>
|
||||
<span class="icon"><i class="fa-solid fa-list" /></span>
|
||||
<code>{{ key }}: {{ value }}</code>
|
||||
</div>
|
||||
</template>
|
||||
</span>
|
||||
</Popover>
|
||||
<template v-if="cond.priority > 0">
|
||||
|
||||
<span class="icon-text">
|
||||
<span class="icon"><i class="fa-solid fa-sort-numeric-down" /></span>
|
||||
<span>Priority: {{ cond.priority }}</span>
|
||||
</span>
|
||||
</template>
|
||||
</div>
|
||||
</td>
|
||||
<td class="is-vcentered is-items-center">
|
||||
<div class="field is-grouped is-grouped-centered">
|
||||
<div class="control">
|
||||
<button
|
||||
class="button is-info is-small is-fullwidth"
|
||||
|
||||
<td class="w-[1%] px-3 py-3 align-middle whitespace-nowrap">
|
||||
<div class="flex items-center justify-end gap-2">
|
||||
<UButton
|
||||
color="info"
|
||||
variant="outline"
|
||||
size="xs"
|
||||
icon="i-lucide-file-up"
|
||||
@click="exportItem(cond)"
|
||||
>
|
||||
<span class="icon"><i class="fa-solid fa-file-export" /></span>
|
||||
<span v-if="!isMobile">Export</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="control">
|
||||
<button
|
||||
class="button is-warning is-small is-fullwidth"
|
||||
</UButton>
|
||||
|
||||
<UButton
|
||||
color="warning"
|
||||
variant="outline"
|
||||
size="xs"
|
||||
icon="i-lucide-pencil"
|
||||
@click="editItem(cond)"
|
||||
>
|
||||
<span class="icon"><i class="fa-solid fa-edit" /></span>
|
||||
<span v-if="!isMobile">Edit</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="control">
|
||||
<button
|
||||
class="button is-danger is-small is-fullwidth"
|
||||
@click="deleteItem(cond)"
|
||||
</UButton>
|
||||
|
||||
<UButton
|
||||
color="error"
|
||||
variant="outline"
|
||||
size="xs"
|
||||
icon="i-lucide-trash"
|
||||
@click="() => void deleteItem(cond)"
|
||||
>
|
||||
<span class="icon"><i class="fa-solid fa-trash" /></span>
|
||||
<span v-if="!isMobile">Delete</span>
|
||||
</button>
|
||||
</div>
|
||||
</UButton>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
|
@ -235,149 +184,191 @@
|
|||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<template v-else>
|
||||
<div class="column is-6" v-for="cond in filteredItems" :key="cond.id">
|
||||
<div class="card is-flex is-full-height is-flex-direction-column">
|
||||
<header class="card-header">
|
||||
<div class="card-header-title is-text-overflow is-block" v-text="cond.name" />
|
||||
<div class="card-header-icon">
|
||||
<div class="field is-grouped">
|
||||
<div class="control" v-if="cond.priority > 0">
|
||||
<span class="tag is-dark">
|
||||
<span class="icon"><i class="fa-solid fa-sort-numeric-down" /></span>
|
||||
<span v-text="cond.priority" />
|
||||
</span>
|
||||
</div>
|
||||
<div class="control" @click="toggleEnabled(cond)">
|
||||
<span
|
||||
class="icon"
|
||||
:class="cond.enabled ? 'has-text-success' : 'has-text-danger'"
|
||||
v-tooltip="
|
||||
`Condition is ${cond.enabled !== false ? 'enabled' : 'disabled'}. Click to toggle.`
|
||||
"
|
||||
|
||||
<div v-else-if="filteredItems.length > 0" class="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
|
||||
<UCard
|
||||
v-for="cond in filteredItems"
|
||||
:key="cond.id"
|
||||
class="flex h-full flex-col border bg-default"
|
||||
:ui="{ header: 'p-4 pb-3', body: 'flex flex-1 flex-col gap-4 p-4 pt-0' }"
|
||||
>
|
||||
<i class="fa-solid fa-power-off" />
|
||||
</span>
|
||||
</div>
|
||||
<div class="control">
|
||||
<a
|
||||
class="has-text-info"
|
||||
v-tooltip="'Export item'"
|
||||
@click.prevent="exportItem(cond)"
|
||||
<template #header>
|
||||
<div class="flex items-start justify-between gap-3">
|
||||
<div class="min-w-0 flex-1 space-y-2">
|
||||
<button
|
||||
type="button"
|
||||
class="min-w-0 w-full text-left text-sm font-semibold text-highlighted"
|
||||
@click="toggleExpand(cond.id, 'name')"
|
||||
>
|
||||
<span class="icon"><i class="fa-solid fa-file-export" /></span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="card-content is-flex-grow-1">
|
||||
<div class="content">
|
||||
<p class="is-text-overflow">
|
||||
<span class="icon"><i class="fa-solid fa-filter" /></span>
|
||||
<span v-text="cond.filter" />
|
||||
</p>
|
||||
<p class="is-text-overflow" v-if="cond.cli">
|
||||
<span class="icon"><i class="fa-solid fa-terminal" /></span>
|
||||
<span>{{ cond.cli }}</span>
|
||||
</p>
|
||||
<p
|
||||
class="is-text-overflow"
|
||||
v-if="cond.extras && Object.keys(cond.extras).length > 0"
|
||||
>
|
||||
<span class="icon"><i class="fa-solid fa-list" /></span>
|
||||
<span
|
||||
>Extras:
|
||||
<span v-for="(value, key) in cond.extras" :key="key" class="tag is-info mr-2">
|
||||
<b>{{ key }}</b
|
||||
>: {{ value }}
|
||||
</span>
|
||||
</span>
|
||||
</p>
|
||||
<p
|
||||
class="is-clickable"
|
||||
:class="{ 'is-text-overflow': !isExpanded(cond.id, 'description') }"
|
||||
v-if="cond.description"
|
||||
@click="toggleExpand(cond.id, 'description')"
|
||||
>
|
||||
<span class="icon"><i class="fa-solid fa-comment" /></span>
|
||||
<span>{{ cond.description }}</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer mt-auto">
|
||||
<div class="card-footer-item">
|
||||
<button class="button is-warning is-fullwidth" @click="editItem(cond)">
|
||||
<span class="icon"><i class="fa-solid fa-edit" /></span>
|
||||
<span>Edit</span>
|
||||
<span :class="expandClass(cond.id, 'name')">{{ cond.name }}</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="card-footer-item">
|
||||
<button class="button is-danger is-fullwidth" @click="deleteItem(cond)">
|
||||
<span class="icon"><i class="fa-solid fa-trash" /></span>
|
||||
<span>Delete</span>
|
||||
|
||||
<div class="flex flex-wrap items-center gap-2 text-xs text-toned">
|
||||
<button
|
||||
type="button"
|
||||
class="inline-flex items-center gap-1 rounded-md border border-default px-2 py-1 transition hover:border-primary hover:text-default"
|
||||
:disabled="conditions.addInProgress.value"
|
||||
@click="() => void toggleEnabled(cond)"
|
||||
>
|
||||
<UIcon
|
||||
name="i-lucide-power"
|
||||
class="size-3.5"
|
||||
:class="cond.enabled !== false ? 'text-success' : 'text-error'"
|
||||
/>
|
||||
<span>{{ cond.enabled !== false ? 'Enabled' : 'Disabled' }}</span>
|
||||
</button>
|
||||
|
||||
<span
|
||||
v-if="cond.priority > 0"
|
||||
class="inline-flex items-center gap-1 rounded-md border border-default px-2 py-1"
|
||||
>
|
||||
<UIcon name="i-lucide-list-ordered" class="size-3.5" />
|
||||
<span>Priority {{ cond.priority }}</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<UButton
|
||||
color="info"
|
||||
variant="ghost"
|
||||
size="xs"
|
||||
icon="i-lucide-file-up"
|
||||
square
|
||||
@click="exportItem(cond)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2 text-sm text-default">
|
||||
<button
|
||||
type="button"
|
||||
class="flex w-full items-start gap-2 rounded-md border border-default bg-muted/20 px-3 py-2 text-left"
|
||||
@click="toggleExpand(cond.id, 'filter')"
|
||||
>
|
||||
<UIcon name="i-lucide-filter" class="mt-0.5 size-4 shrink-0 text-toned" />
|
||||
<span :class="expandClass(cond.id, 'filter')">{{ cond.filter }}</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
v-if="cond.cli"
|
||||
type="button"
|
||||
class="flex w-full items-start gap-2 rounded-md border border-default bg-muted/20 px-3 py-2 text-left"
|
||||
@click="toggleExpand(cond.id, 'cli')"
|
||||
>
|
||||
<UIcon name="i-lucide-terminal" class="mt-0.5 size-4 shrink-0 text-toned" />
|
||||
<span :class="expandClass(cond.id, 'cli')">{{ cond.cli }}</span>
|
||||
</button>
|
||||
|
||||
<div
|
||||
class="columns is-multiline"
|
||||
v-if="!toggleForm && (isLoading || !filteredItems || filteredItems.length < 1)"
|
||||
v-if="extrasEntries(cond.extras).length > 0"
|
||||
class="rounded-md border border-default bg-muted/20 px-3 py-2"
|
||||
>
|
||||
<div class="column is-12">
|
||||
<Message v-if="isLoading" class="is-info" title="Loading" icon="fas fa-spinner fa-spin">
|
||||
Loading data. Please wait...
|
||||
</Message>
|
||||
<Message
|
||||
<div class="mb-2 flex items-center gap-2 text-toned">
|
||||
<UIcon name="i-lucide-list" class="size-4" />
|
||||
<span class="text-sm font-medium">Extras</span>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<UBadge
|
||||
v-for="([key, value], index) in extrasEntries(cond.extras)"
|
||||
:key="`${cond.id}-${key}-${index}`"
|
||||
color="info"
|
||||
variant="soft"
|
||||
size="sm"
|
||||
>
|
||||
<span class="font-semibold">{{ key }}</span
|
||||
>: {{ value }}
|
||||
</UBadge>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
v-if="cond.description"
|
||||
type="button"
|
||||
class="flex w-full items-start gap-2 rounded-md border border-default bg-muted/20 px-3 py-2 text-left"
|
||||
@click="toggleExpand(cond.id, 'description')"
|
||||
>
|
||||
<UIcon name="i-lucide-message-square-text" class="mt-0.5 size-4 shrink-0 text-toned" />
|
||||
<span :class="expandClass(cond.id, 'description')">{{ cond.description }}</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="mt-auto grid gap-2 pt-2 sm:grid-cols-2">
|
||||
<UButton
|
||||
color="warning"
|
||||
variant="outline"
|
||||
icon="i-lucide-pencil"
|
||||
class="w-full justify-center"
|
||||
@click="editItem(cond)"
|
||||
>
|
||||
Edit
|
||||
</UButton>
|
||||
|
||||
<UButton
|
||||
color="error"
|
||||
variant="outline"
|
||||
icon="i-lucide-trash"
|
||||
class="w-full justify-center"
|
||||
@click="() => void deleteItem(cond)"
|
||||
>
|
||||
Delete
|
||||
</UButton>
|
||||
</div>
|
||||
</UCard>
|
||||
</div>
|
||||
|
||||
<UAlert
|
||||
v-if="isLoading"
|
||||
color="info"
|
||||
variant="soft"
|
||||
icon="i-lucide-loader-circle"
|
||||
title="Loading"
|
||||
description="Loading data. Please wait..."
|
||||
/>
|
||||
|
||||
<div v-else-if="query && filteredItems.length < 1" class="space-y-3">
|
||||
<UAlert
|
||||
color="warning"
|
||||
variant="soft"
|
||||
icon="i-lucide-search"
|
||||
title="No Results"
|
||||
class="is-warning"
|
||||
icon="fas fa-search"
|
||||
v-else-if="query"
|
||||
:useClose="true"
|
||||
@close="query = ''"
|
||||
>
|
||||
<p>
|
||||
No results found for the query: <code>{{ query }}</code
|
||||
>.
|
||||
</p>
|
||||
<p>Please try a different search term.</p>
|
||||
</Message>
|
||||
<Message v-else title="No items" class="is-warning" icon="fas fa-exclamation-circle">
|
||||
There are no custom defined conditions yet. Click the
|
||||
<span class="icon"><i class="fas fa-add" /></span> <strong>New Condition</strong> button
|
||||
to add your first condition.
|
||||
</Message>
|
||||
</div>
|
||||
:description="`No results found for the query: ${query}. Please try a different search term.`"
|
||||
/>
|
||||
|
||||
<UButton color="neutral" variant="outline" size="sm" @click="query = ''">
|
||||
Clear filter
|
||||
</UButton>
|
||||
</div>
|
||||
|
||||
<UAlert
|
||||
v-else-if="!filteredItems.length"
|
||||
color="warning"
|
||||
variant="soft"
|
||||
icon="i-lucide-circle-alert"
|
||||
title="No items"
|
||||
description="There are no custom defined conditions yet. Click the New Condition button to add your first condition."
|
||||
/>
|
||||
|
||||
<div
|
||||
class="columns is-multiline"
|
||||
v-if="filteredItems && filteredItems.length > 0 && !toggleForm"
|
||||
v-if="filteredItems.length > 0 && !query"
|
||||
class="rounded-lg border border-info/30 bg-info/10 p-4 text-sm text-default"
|
||||
>
|
||||
<div class="column is-12">
|
||||
<Message class="is-info" :body_class="'pl-0'">
|
||||
<ul>
|
||||
<ul class="list-disc space-y-2 pl-5 text-sm text-default">
|
||||
<li>
|
||||
Filtering is based on yt-dlp’s <code>--match-filter</code> logic. Any expression that
|
||||
Filtering is based on yt-dlp's <code>--match-filter</code> logic. Any expression that
|
||||
works with yt-dlp will also work here, including the same boolean operators. We added
|
||||
extended support for the <code>OR</code> ( <code>||</code> ) operator, which yt-dlp
|
||||
does not natively support. This allows you to combine multiple conditions more
|
||||
flexibly.
|
||||
extended support for the <code>OR</code> ( <code>||</code> ) operator, which yt-dlp does
|
||||
not natively support. This allows you to combine multiple conditions more flexibly.
|
||||
</li>
|
||||
<li>
|
||||
The primary use case for this feature is to apply custom cli arguments to specific
|
||||
returned info.
|
||||
</li>
|
||||
<li>
|
||||
For example, i follow specific channel that sometimes region lock some videos, by
|
||||
using the following filter i am able to bypass it
|
||||
<code>availability = 'needs_auth' & channel_id = 'channel_id'</code>. and set proxy
|
||||
for that specific video, while leaving the rest of the videos to be downloaded
|
||||
normally.
|
||||
For example, i follow specific channel that sometimes region lock some videos, by using
|
||||
the following filter i am able to bypass it
|
||||
<code>availability = 'needs_auth' & channel_id = 'channel_id'</code>. and set proxy
|
||||
for that specific video, while leaving the rest of the videos to be downloaded normally.
|
||||
</li>
|
||||
<li>
|
||||
The data which the filter is applied on is the same data that yt-dlp returns, simply,
|
||||
|
|
@ -385,26 +376,47 @@
|
|||
instant feedback if the filter matches or not.
|
||||
</li>
|
||||
</ul>
|
||||
</Message>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<UModal
|
||||
v-if="editorOpen"
|
||||
:open="editorOpen"
|
||||
:title="modalTitle"
|
||||
:description="modalDescription"
|
||||
:dismissible="!conditions.addInProgress.value"
|
||||
:ui="{ content: 'w-full sm:max-w-6xl', body: 'max-h-[85vh] overflow-y-auto p-4 sm:p-6' }"
|
||||
@update:open="(open) => !open && closeEditor()"
|
||||
>
|
||||
<template #body>
|
||||
<ConditionForm
|
||||
:key="modalKey"
|
||||
:addInProgress="conditions.addInProgress.value"
|
||||
:reference="itemRef"
|
||||
:item="item as Condition"
|
||||
@cancel="closeEditor()"
|
||||
@submit="updateItem"
|
||||
/>
|
||||
</template>
|
||||
</UModal>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useStorage } from '@vueuse/core';
|
||||
import type { Condition } from '~/types/conditions';
|
||||
import { useConfirm } from '~/composables/useConfirm';
|
||||
import { useConditions } from '~/composables/useConditions';
|
||||
import type { Condition } from '~/types/conditions';
|
||||
import type { APIResponse } from '~/types/responses';
|
||||
import { cleanObject, copyText, encode } from '~/utils';
|
||||
|
||||
type ConditionItemWithUI = Condition & { raw?: boolean };
|
||||
|
||||
const box = useConfirm();
|
||||
const isMobile = useMediaQuery({ maxWidth: 1024 });
|
||||
const display_style = useStorage<'list' | 'grid'>('conditions_display_style', 'grid');
|
||||
const displayStyle = useStorage<'list' | 'grid'>('conditions_display_style', 'grid');
|
||||
const conditions = useConditions();
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
const items = conditions.conditions as Ref<ConditionItemWithUI[]>;
|
||||
const paging = conditions.pagination;
|
||||
|
|
@ -412,29 +424,101 @@ const isLoading = conditions.isLoading;
|
|||
const page = ref<number>(route.query.page ? parseInt(route.query.page as string, 10) : 1);
|
||||
const item = ref<Partial<Condition>>({});
|
||||
const itemRef = ref<number | null | undefined>(null);
|
||||
const toggleForm = ref(false);
|
||||
const query = ref<string>('');
|
||||
const toggleFilter = ref(false);
|
||||
const editorOpen = ref(false);
|
||||
const query = ref('');
|
||||
const showFilter = ref(false);
|
||||
const filterInput = ref<HTMLInputElement | null>(null);
|
||||
|
||||
const remove_keys = ['raw', 'toggle_description'];
|
||||
const removeKeys = ['raw', 'toggle_description'];
|
||||
const expandedItems = reactive<Record<number, Set<string>>>({});
|
||||
|
||||
const filteredItems = computed<ConditionItemWithUI[]>(() => {
|
||||
const q = query.value?.toLowerCase();
|
||||
if (!q) return items.value;
|
||||
return items.value.filter((item: ConditionItemWithUI) => deepIncludes(item, q, new WeakSet()));
|
||||
const normalizedQuery = query.value?.toLowerCase();
|
||||
if (!normalizedQuery) {
|
||||
return items.value;
|
||||
}
|
||||
|
||||
return items.value.filter((entry) => deepIncludes(entry, normalizedQuery, new WeakSet()));
|
||||
});
|
||||
|
||||
const loadContent = async (page: number = 1): Promise<void> => {
|
||||
await conditions.loadConditions(page);
|
||||
await nextTick();
|
||||
if (conditions.pagination.value.total_pages > 1) {
|
||||
useRouter().replace({ query: { ...route.query, page: page.toString() } });
|
||||
const modalTitle = computed(() =>
|
||||
itemRef.value ? `Edit - ${item.value.name}` : 'Add new condition',
|
||||
);
|
||||
const modalDescription = computed(
|
||||
() => 'Run yt-dlp custom match filter on returned info. and apply options.',
|
||||
);
|
||||
const modalKey = computed(
|
||||
() => `${itemRef.value ?? 'new'}-${editorOpen.value ? 'open' : 'closed'}`,
|
||||
);
|
||||
|
||||
watch(showFilter, (value) => {
|
||||
if (!value) {
|
||||
query.value = '';
|
||||
}
|
||||
});
|
||||
|
||||
const syncPageQuery = async (pageNumber: number): Promise<void> => {
|
||||
const totalPages = conditions.pagination.value.total_pages;
|
||||
const nextQuery = { ...route.query };
|
||||
|
||||
if (totalPages > 1) {
|
||||
nextQuery.page = String(pageNumber);
|
||||
} else {
|
||||
delete nextQuery.page;
|
||||
}
|
||||
|
||||
await router.replace({ query: nextQuery });
|
||||
};
|
||||
|
||||
const toggleExpand = (itemId: number | undefined, field: string) => {
|
||||
if (!itemId) return;
|
||||
const toggleFilterPanel = async (): Promise<void> => {
|
||||
showFilter.value = !showFilter.value;
|
||||
if (!showFilter.value) {
|
||||
query.value = '';
|
||||
return;
|
||||
}
|
||||
|
||||
await nextTick();
|
||||
filterInput.value?.focus();
|
||||
};
|
||||
|
||||
const loadContent = async (pageNumber = 1): Promise<void> => {
|
||||
page.value = pageNumber;
|
||||
await conditions.loadConditions(pageNumber);
|
||||
await nextTick();
|
||||
await syncPageQuery(pageNumber);
|
||||
};
|
||||
|
||||
const reloadContent = async (): Promise<void> => {
|
||||
await loadContent(page.value);
|
||||
};
|
||||
|
||||
const navigatePage = async (newPage: number): Promise<void> => {
|
||||
await loadContent(newPage);
|
||||
};
|
||||
|
||||
const resetEditor = (): void => {
|
||||
item.value = {};
|
||||
itemRef.value = null;
|
||||
};
|
||||
|
||||
const closeEditor = (): void => {
|
||||
editorOpen.value = false;
|
||||
resetEditor();
|
||||
};
|
||||
|
||||
const openCreate = (): void => {
|
||||
resetEditor();
|
||||
editorOpen.value = true;
|
||||
};
|
||||
|
||||
const toggleDisplayStyle = (): void => {
|
||||
displayStyle.value = displayStyle.value === 'list' ? 'grid' : 'list';
|
||||
};
|
||||
|
||||
const toggleExpand = (itemId: number | undefined, field: string): void => {
|
||||
if (!itemId) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!expandedItems[itemId]) {
|
||||
expandedItems[itemId] = new Set();
|
||||
|
|
@ -448,28 +532,30 @@ const toggleExpand = (itemId: number | undefined, field: string) => {
|
|||
};
|
||||
|
||||
const isExpanded = (itemId: number | undefined, field: string): boolean => {
|
||||
if (!itemId) return false;
|
||||
if (!itemId) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return expandedItems[itemId]?.has(field) ?? false;
|
||||
};
|
||||
|
||||
watch(toggleFilter, (val) => {
|
||||
if (!val) {
|
||||
query.value = '';
|
||||
}
|
||||
});
|
||||
const expandClass = (itemId: number | undefined, field: string): string => {
|
||||
return isExpanded(itemId, field) ? 'whitespace-pre-wrap break-words' : 'truncate';
|
||||
};
|
||||
|
||||
const resetForm = (closeForm = false): void => {
|
||||
item.value = {};
|
||||
itemRef.value = null;
|
||||
if (closeForm) {
|
||||
toggleForm.value = false;
|
||||
const extrasEntries = (extras?: Record<string, unknown>): Array<[string, unknown]> => {
|
||||
if (!extras) {
|
||||
return [];
|
||||
}
|
||||
|
||||
return Object.entries(extras).filter(([, value]) => value !== undefined && value !== '');
|
||||
};
|
||||
|
||||
const deleteItem = async (cond: Condition): Promise<void> => {
|
||||
if (true !== (await box.confirm(`Delete '${cond.name}'?`))) {
|
||||
return;
|
||||
}
|
||||
|
||||
await conditions.deleteCondition(cond.id!);
|
||||
};
|
||||
|
||||
|
|
@ -480,41 +566,43 @@ const updateItem = async ({
|
|||
reference: number | null | undefined;
|
||||
item: Condition;
|
||||
}): Promise<void> => {
|
||||
updatedItem = cleanObject(updatedItem, remove_keys) as Condition;
|
||||
const cb = (resp: APIResponse) => {
|
||||
if (resp.success) {
|
||||
resetForm(true);
|
||||
updatedItem = cleanObject(updatedItem, removeKeys) as Condition;
|
||||
const callback = (response: APIResponse) => {
|
||||
if (response.success) {
|
||||
closeEditor();
|
||||
}
|
||||
};
|
||||
|
||||
if (reference) {
|
||||
await conditions.patchCondition(reference, updatedItem, cb);
|
||||
await conditions.patchCondition(reference, updatedItem, callback);
|
||||
} else {
|
||||
await conditions.createCondition(updatedItem, cb);
|
||||
await conditions.createCondition(updatedItem, callback);
|
||||
}
|
||||
};
|
||||
|
||||
const editItem = (_item: Condition): void => {
|
||||
item.value = JSON.parse(JSON.stringify(_item)) as Condition;
|
||||
itemRef.value = _item.id;
|
||||
toggleForm.value = true;
|
||||
const editItem = (value: Condition): void => {
|
||||
item.value = JSON.parse(JSON.stringify(value)) as Condition;
|
||||
itemRef.value = value.id;
|
||||
editorOpen.value = true;
|
||||
};
|
||||
|
||||
const toggleEnabled = async (cond: Condition): Promise<void> => {
|
||||
const new_state = !cond.enabled;
|
||||
await conditions.patchCondition(cond.id!, { enabled: new_state });
|
||||
await conditions.patchCondition(cond.id!, { enabled: !cond.enabled });
|
||||
};
|
||||
|
||||
const exportItem = (cond: Condition): void =>
|
||||
const exportItem = (cond: Condition): void => {
|
||||
copyText(
|
||||
encode({
|
||||
...Object.fromEntries(
|
||||
Object.entries(cond).filter(([k, v]) => !!v && !['id', ...remove_keys].includes(k)),
|
||||
Object.entries(cond).filter(
|
||||
([key, value]) => !!value && !['id', ...removeKeys].includes(key),
|
||||
),
|
||||
),
|
||||
_type: 'condition',
|
||||
_version: '1.2',
|
||||
}),
|
||||
);
|
||||
};
|
||||
|
||||
onMounted(async () => await loadContent(page.value));
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,53 +1,67 @@
|
|||
<style>
|
||||
.terminal {
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.history-item {
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.history-item:hover {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
</style>
|
||||
|
||||
<template>
|
||||
<div class="mt-1 columns is-multiline">
|
||||
<div class="column is-12 is-clearfix">
|
||||
<h1 class="title is-4">
|
||||
<span class="icon-text">
|
||||
<span class="icon"><i class="fa-solid fa-terminal" /></span>
|
||||
<main class="w-full min-w-0 max-w-full space-y-4">
|
||||
<div class="flex flex-col gap-3 xl:flex-row xl:items-start xl:justify-between">
|
||||
<div class="min-w-0 space-y-1">
|
||||
<div class="flex flex-wrap items-center gap-2 text-lg font-semibold text-highlighted">
|
||||
<UIcon name="i-lucide-terminal" class="size-5 text-toned" />
|
||||
<span>Console</span>
|
||||
</span>
|
||||
</h1>
|
||||
<div class="subtitle is-6 is-unselectable">
|
||||
You can use this page to run yt-dlp commands directly in a non-interactive way, bypassing
|
||||
the web interface and it's settings.
|
||||
|
||||
<UBadge :color="isLoading ? 'info' : 'neutral'" variant="soft" size="sm">
|
||||
{{ isLoading ? 'Streaming output' : 'Idle' }}
|
||||
</UBadge>
|
||||
|
||||
<UBadge v-if="commandHistory.length > 0" color="neutral" variant="outline" size="sm">
|
||||
{{ commandHistory.length }} saved
|
||||
</UBadge>
|
||||
</div>
|
||||
|
||||
<p class="text-sm text-toned">Run yt-dlp commands directly in a non-interactive session.</p>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap items-center justify-end gap-2">
|
||||
<UButton
|
||||
color="neutral"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
icon="i-lucide-eraser"
|
||||
@click="() => void clearOutput()"
|
||||
>
|
||||
Clear output
|
||||
</UButton>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-12">
|
||||
<div class="card">
|
||||
<header class="card-header">
|
||||
<p class="card-header-title">
|
||||
<span class="icon">
|
||||
<i class="fa-solid fa-desktop" />
|
||||
</span>
|
||||
<span class="ml-2">Output</span>
|
||||
|
||||
<UPageCard variant="naked" :ui="pageCardUi">
|
||||
<template #body>
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<div>
|
||||
<div
|
||||
ref="terminal_window"
|
||||
class="terminal-host min-h-[55vh] max-h-[55vh] overflow-hidden rounded-xl scroll-none"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rounded-xl border border-default bg-default">
|
||||
<div
|
||||
class="flex flex-col gap-3 border-b border-default bg-muted/10 px-4 py-3 lg:flex-row lg:items-start lg:justify-between"
|
||||
>
|
||||
<div class="min-w-0 space-y-1">
|
||||
<div class="flex items-center gap-2 text-sm font-semibold text-highlighted">
|
||||
<UIcon name="i-lucide-send" class="size-4 text-toned" />
|
||||
<span>Command</span>
|
||||
</div>
|
||||
|
||||
<p class="text-xs text-toned">
|
||||
Press <code>Enter</code> to run single-line input, <code>Shift+Enter</code> to
|
||||
switch to multi-line, and <code>Ctrl+Enter</code> to run multi-line input.
|
||||
</p>
|
||||
<p class="card-header-icon">
|
||||
<span v-tooltip.top="'Clear console window'" class="icon" @click="clearOutput()">
|
||||
<i class="fa-solid fa-broom" />
|
||||
</span>
|
||||
</p>
|
||||
</header>
|
||||
<section class="card-content p-0 m-0">
|
||||
<div ref="terminal_window" style="min-height: 60vh; max-height: 70vh" />
|
||||
</section>
|
||||
<section class="card-content p-1 m-1">
|
||||
<div class="field is-grouped">
|
||||
<div class="control is-expanded">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-3 px-4 py-4 xl:grid-cols-[minmax(0,1fr)_auto] xl:items-end">
|
||||
<div class="space-y-3">
|
||||
<TextareaAutocomplete
|
||||
v-if="isMultiLineInput"
|
||||
ref="commandTextarea"
|
||||
|
|
@ -55,111 +69,140 @@
|
|||
:options="ytDlpOptions"
|
||||
:disabled="isLoading"
|
||||
placeholder="--help"
|
||||
:rows="5"
|
||||
@keydown="handleKeyDown"
|
||||
/>
|
||||
|
||||
<InputAutocomplete
|
||||
v-else
|
||||
v-model="command"
|
||||
ref="commandInput"
|
||||
v-model="command"
|
||||
:options="ytDlpOptions"
|
||||
:disabled="isLoading"
|
||||
placeholder="--help"
|
||||
@keydown="handleKeyDown"
|
||||
@paste="handlePaste"
|
||||
:multiple="true"
|
||||
:allowShortFlags="true"
|
||||
@keydown="handleKeyDown"
|
||||
@paste="handlePaste"
|
||||
/>
|
||||
</div>
|
||||
<p class="control">
|
||||
<button
|
||||
class="button is-primary"
|
||||
type="button"
|
||||
:disabled="isLoading || !hasValidCommand"
|
||||
@click="runCommand"
|
||||
>
|
||||
<span class="icon">
|
||||
<i
|
||||
class="fa-solid"
|
||||
:class="isLoading ? 'fa-spinner fa-spin' : 'fa-paper-plane'"
|
||||
/>
|
||||
</span>
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column is-12">
|
||||
<div class="card">
|
||||
<header class="card-header">
|
||||
<p
|
||||
class="card-header-title is-pointer is-unselectable"
|
||||
@click="isHistoryCollapsed = !isHistoryCollapsed"
|
||||
<div class="flex flex-wrap items-center justify-end gap-2 xl:self-end">
|
||||
<UPopover :content="{ side: 'top', align: 'end', sideOffset: 8 }">
|
||||
<UButton
|
||||
color="neutral"
|
||||
variant="outline"
|
||||
size="lg"
|
||||
icon="i-lucide-history"
|
||||
trailing-icon="i-lucide-chevron-up"
|
||||
class="flex-1 justify-center sm:flex-none sm:min-w-36"
|
||||
>
|
||||
<span class="icon"><i class="fa-solid fa-clock-rotate-left" /></span>
|
||||
<span class="ml-2">Commands History</span>
|
||||
</p>
|
||||
<p class="card-header-icon">
|
||||
<span v-tooltip.top="'Clear command history'" class="icon" @click="clearHistory()">
|
||||
<i class="fa-solid fa-trash" />
|
||||
</span>
|
||||
<span
|
||||
v-tooltip.top="isHistoryCollapsed ? 'Expand' : 'Collapse'"
|
||||
class="icon ml-2"
|
||||
@click="isHistoryCollapsed = !isHistoryCollapsed"
|
||||
History
|
||||
</UButton>
|
||||
|
||||
<template #content>
|
||||
<UCard class="w-[min(92vw,42rem)]" :ui="{ body: 'space-y-3 p-4' }">
|
||||
<div class="flex flex-wrap items-center justify-between gap-3">
|
||||
<div class="flex items-center gap-2 text-sm font-semibold text-highlighted">
|
||||
<UIcon name="i-lucide-history" class="size-4 text-toned" />
|
||||
<span>Command history</span>
|
||||
</div>
|
||||
|
||||
<UButton
|
||||
color="error"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
icon="i-lucide-trash"
|
||||
:disabled="commandHistory.length < 1"
|
||||
@click="() => void clearHistory()"
|
||||
>
|
||||
<i
|
||||
class="fa-solid"
|
||||
:class="isHistoryCollapsed ? 'fa-chevron-down' : 'fa-chevron-up'"
|
||||
Clear history
|
||||
</UButton>
|
||||
</div>
|
||||
|
||||
<UAlert
|
||||
v-if="commandHistory.length < 1"
|
||||
color="info"
|
||||
variant="soft"
|
||||
icon="i-lucide-clock-3"
|
||||
title="Commands history is empty"
|
||||
/>
|
||||
</span>
|
||||
</p>
|
||||
</header>
|
||||
<div v-show="!isHistoryCollapsed" class="card-content p-2">
|
||||
<Message class="is-info" v-if="commandHistory.length < 1">
|
||||
Commands history is empty.
|
||||
</Message>
|
||||
<div class="table-container" v-if="commandHistory.length > 0">
|
||||
<table
|
||||
class="table is-striped is-hoverable is-fullwidth is-bordered"
|
||||
style="min-width: 850px; table-layout: fixed"
|
||||
|
||||
<div
|
||||
v-else
|
||||
class="max-h-96 w-full min-w-0 max-w-full overflow-hidden rounded-lg border border-default bg-default"
|
||||
>
|
||||
<tbody>
|
||||
<tr v-for="(cmd, index) in commandHistory" :key="index">
|
||||
<td>
|
||||
<code
|
||||
class="is-family-monospace is-text-overflow is-pointer is-block"
|
||||
@click="loadCommand(cmd)"
|
||||
<div class="w-full max-w-full overflow-auto overscroll-contain">
|
||||
<table class="min-w-155 w-full text-sm">
|
||||
<tbody class="divide-y divide-default">
|
||||
<tr
|
||||
v-for="(cmd, index) in commandHistory"
|
||||
:key="`${index}-${cmd}`"
|
||||
class="hover:bg-muted/20"
|
||||
>
|
||||
<td class="px-3 py-3 align-middle">
|
||||
<button
|
||||
type="button"
|
||||
class="block w-full text-left font-mono text-xs text-default hover:text-highlighted"
|
||||
@click="() => void loadCommand(cmd)"
|
||||
>
|
||||
{{ cmd.replace(/\n/g, ' ') }}
|
||||
</code>
|
||||
</button>
|
||||
</td>
|
||||
<td style="width: 40px; text-align: center">
|
||||
<button class="delete" @click="removeFromHistory(index)" />
|
||||
|
||||
<td
|
||||
class="w-[2%] px-3 py-3 text-center align-middle whitespace-nowrap"
|
||||
>
|
||||
<UButton
|
||||
color="error"
|
||||
variant="ghost"
|
||||
size="xs"
|
||||
icon="i-lucide-x"
|
||||
square
|
||||
@click="removeFromHistory(index)"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</UCard>
|
||||
</template>
|
||||
</UPopover>
|
||||
|
||||
<UButton
|
||||
color="primary"
|
||||
size="lg"
|
||||
:icon="isLoading ? 'i-lucide-loader-circle' : 'i-lucide-send'"
|
||||
:loading="isLoading"
|
||||
:disabled="isLoading || !hasValidCommand"
|
||||
class="flex-1 justify-center sm:flex-none sm:min-w-36"
|
||||
@click="() => void runCommand()"
|
||||
>
|
||||
Run command
|
||||
</UButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</UPageCard>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { fetchEventSource } from '@microsoft/fetch-event-source';
|
||||
import type { EventSourceMessage } from '@microsoft/fetch-event-source';
|
||||
import { useStorage } from '@vueuse/core';
|
||||
import { FitAddon } from '@xterm/addon-fit';
|
||||
import '@xterm/xterm/css/xterm.css';
|
||||
import { Terminal } from '@xterm/xterm';
|
||||
import { FitAddon } from '@xterm/addon-fit';
|
||||
import { useStorage } from '@vueuse/core';
|
||||
import { disableOpacity, enableOpacity, parse_api_error, uri } from '~/utils';
|
||||
import InputAutocomplete from '~/components/InputAutocomplete.vue';
|
||||
import TextareaAutocomplete from '~/components/TextareaAutocomplete.vue';
|
||||
import { useDialog } from '~/composables/useDialog';
|
||||
import type { AutoCompleteOptions } from '~/types/autocomplete';
|
||||
import { disableOpacity, enableOpacity, parse_api_error, uri } from '~/utils';
|
||||
|
||||
const config = useConfigStore();
|
||||
const toast = useNotification();
|
||||
|
|
@ -167,25 +210,36 @@ const dialog = useDialog();
|
|||
|
||||
const terminal = ref<Terminal>();
|
||||
const terminalFit = ref<FitAddon>();
|
||||
const command = ref<string>('');
|
||||
const command = ref('');
|
||||
const terminal_window = useTemplateRef<HTMLDivElement>('terminal_window');
|
||||
const commandInput = ref<InstanceType<typeof InputAutocomplete> | null>(null);
|
||||
const commandTextarea = ref<InstanceType<typeof TextareaAutocomplete> | null>(null);
|
||||
const isLoading = ref<boolean>(false);
|
||||
const isLoading = ref(false);
|
||||
const storedCommand = useStorage<string>('console_command', '');
|
||||
const commandHistory = useStorage<string[]>('console_command_history', []);
|
||||
const isHistoryCollapsed = useStorage<boolean>('console_history_collapsed', false);
|
||||
const sseController = ref<AbortController | null>(null);
|
||||
|
||||
const MAX_HISTORY_ITEMS = 50;
|
||||
|
||||
const pageCardUi = {
|
||||
root: 'w-full bg-transparent',
|
||||
container: 'w-full p-0 sm:p-0',
|
||||
wrapper: 'w-full items-stretch',
|
||||
body: 'w-full',
|
||||
};
|
||||
|
||||
const ytDlpOptions = computed<AutoCompleteOptions>(() =>
|
||||
config.ytdlp_options.flatMap((opt) =>
|
||||
opt.flags.map((flag) => ({ value: flag, description: opt.description || '' })),
|
||||
),
|
||||
);
|
||||
|
||||
const hasValidCommand = computed(() => command.value && command.value.trim().length > 0);
|
||||
const isMultiLineInput = computed(() => !!command.value && command.value.includes('\n'));
|
||||
const hasValidCommand = computed(() => Boolean(command.value && command.value.trim().length > 0));
|
||||
const isMultiLineInput = computed(() => Boolean(command.value && command.value.includes('\n')));
|
||||
|
||||
watch(command, (value) => {
|
||||
storedCommand.value = value;
|
||||
});
|
||||
|
||||
watch(
|
||||
() => isLoading.value,
|
||||
|
|
@ -193,12 +247,14 @@ watch(
|
|||
if (value) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (command.value.trim()) {
|
||||
addToHistory(command.value.trim());
|
||||
}
|
||||
|
||||
command.value = '';
|
||||
await nextTick();
|
||||
focusInput();
|
||||
await focusInput();
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
|
|
@ -209,6 +265,7 @@ watch(
|
|||
if (config.app.console_enabled) {
|
||||
return;
|
||||
}
|
||||
|
||||
toast.error('Console is disabled in the configuration. Please enable it to use this feature.');
|
||||
await navigateTo('/');
|
||||
},
|
||||
|
|
@ -216,7 +273,7 @@ watch(
|
|||
|
||||
const handleKeyDown = async (event: KeyboardEvent): Promise<void> => {
|
||||
const target = event.target as HTMLInputElement | HTMLTextAreaElement;
|
||||
const isTextarea = 'TEXTAREA' === target.tagName;
|
||||
const isTextarea = target.tagName === 'TEXTAREA';
|
||||
|
||||
if (event.key !== 'Enter') {
|
||||
return;
|
||||
|
|
@ -224,7 +281,7 @@ const handleKeyDown = async (event: KeyboardEvent): Promise<void> => {
|
|||
|
||||
if (((event.ctrlKey && isTextarea) || !isTextarea) && hasValidCommand.value) {
|
||||
event.preventDefault();
|
||||
runCommand();
|
||||
await runCommand();
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -235,7 +292,9 @@ const handleKeyDown = async (event: KeyboardEvent): Promise<void> => {
|
|||
command.value.substring(0, cursorPos) +
|
||||
'\n' +
|
||||
command.value.substring(target.selectionEnd || cursorPos);
|
||||
|
||||
await nextTick();
|
||||
|
||||
if (commandTextarea.value) {
|
||||
const textarea = commandTextarea.value.$el?.querySelector('textarea') as HTMLTextAreaElement;
|
||||
if (textarea) {
|
||||
|
|
@ -272,14 +331,11 @@ const handlePaste = async (event: ClipboardEvent): Promise<void> => {
|
|||
}
|
||||
};
|
||||
|
||||
const handle_event = () => {
|
||||
if (!terminal.value) {
|
||||
return;
|
||||
}
|
||||
const handle_event = (): void => {
|
||||
terminalFit.value?.fit();
|
||||
};
|
||||
|
||||
const handleStreamMessage = (event: EventSourceMessage) => {
|
||||
const handleStreamMessage = (event: EventSourceMessage): void => {
|
||||
if (!terminal.value) {
|
||||
return;
|
||||
}
|
||||
|
|
@ -293,18 +349,18 @@ const handleStreamMessage = (event: EventSourceMessage) => {
|
|||
}
|
||||
}
|
||||
|
||||
if ('output' === event.event) {
|
||||
if (event.event === 'output') {
|
||||
terminal.value.writeln(payload?.line ?? '');
|
||||
return;
|
||||
}
|
||||
|
||||
if ('close' === event.event) {
|
||||
if (event.event === 'close') {
|
||||
isLoading.value = false;
|
||||
sseController.value?.abort();
|
||||
}
|
||||
};
|
||||
|
||||
const startStream = async (cmd: string) => {
|
||||
const startStream = async (cmd: string): Promise<void> => {
|
||||
sseController.value?.abort();
|
||||
const controller = new AbortController();
|
||||
sseController.value = controller;
|
||||
|
|
@ -324,7 +380,9 @@ const startStream = async (cmd: string) => {
|
|||
if (response.ok) {
|
||||
return;
|
||||
}
|
||||
|
||||
let message = response.statusText || 'Failed to start command stream.';
|
||||
|
||||
try {
|
||||
message = await parse_api_error(response.clone().json());
|
||||
} catch {
|
||||
|
|
@ -337,6 +395,7 @@ const startStream = async (cmd: string) => {
|
|||
message = response.statusText || 'Failed to start command stream.';
|
||||
}
|
||||
}
|
||||
|
||||
throw new Error(message);
|
||||
},
|
||||
onmessage: handleStreamMessage,
|
||||
|
|
@ -344,6 +403,7 @@ const startStream = async (cmd: string) => {
|
|||
if (controller.signal.aborted) {
|
||||
return;
|
||||
}
|
||||
|
||||
terminal.value?.writeln(`Error: ${error}`);
|
||||
isLoading.value = false;
|
||||
},
|
||||
|
|
@ -360,7 +420,7 @@ const startStream = async (cmd: string) => {
|
|||
}
|
||||
};
|
||||
|
||||
const ensureTerminal = async () => {
|
||||
const ensureTerminal = async (): Promise<void> => {
|
||||
if (terminal.value) {
|
||||
return;
|
||||
}
|
||||
|
|
@ -374,6 +434,10 @@ const ensureTerminal = async () => {
|
|||
rows: 10,
|
||||
disableStdin: true,
|
||||
scrollback: 1000,
|
||||
theme: {
|
||||
background: '#09090b',
|
||||
foreground: '#f4f4f5',
|
||||
},
|
||||
});
|
||||
|
||||
terminalFit.value = new FitAddon();
|
||||
|
|
@ -388,12 +452,12 @@ const ensureTerminal = async () => {
|
|||
terminalFit.value.fit();
|
||||
};
|
||||
|
||||
const runCommand = async () => {
|
||||
const runCommand = async (): Promise<void> => {
|
||||
if (!hasValidCommand.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (true !== config.app.console_enabled) {
|
||||
if (config.app.console_enabled !== true) {
|
||||
await navigateTo('/');
|
||||
toast.error('Console is disabled in the configuration. Please enable it to use this feature.');
|
||||
return;
|
||||
|
|
@ -404,39 +468,38 @@ const runCommand = async () => {
|
|||
if (cmd.startsWith('yt-dlp')) {
|
||||
cmd = cmd.replace(/^yt-dlp/, '').trim();
|
||||
await nextTick();
|
||||
if ('' === cmd) {
|
||||
if (cmd === '') {
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
await ensureTerminal();
|
||||
|
||||
if ('clear' === cmd) {
|
||||
clearOutput(true);
|
||||
if (cmd === 'clear') {
|
||||
await clearOutput(true);
|
||||
return;
|
||||
}
|
||||
|
||||
await startStream(cmd);
|
||||
terminal.value?.writeln(`user@YTPTube ~`);
|
||||
terminal.value?.writeln('user@YTPTube ~');
|
||||
terminal.value?.writeln(`$ yt-dlp ${command.value}`);
|
||||
storedCommand.value = '';
|
||||
};
|
||||
|
||||
const clearOutput = async (withCommand: boolean = false) => {
|
||||
if (terminal.value) {
|
||||
terminal.value.clear();
|
||||
}
|
||||
const clearOutput = async (withCommand: boolean = false): Promise<void> => {
|
||||
terminal.value?.clear();
|
||||
|
||||
if (true === withCommand) {
|
||||
if (withCommand === true) {
|
||||
command.value = '';
|
||||
}
|
||||
|
||||
focusInput();
|
||||
await focusInput();
|
||||
};
|
||||
|
||||
const focusInput = async () => {
|
||||
const focusInput = async (): Promise<void> => {
|
||||
await nextTick();
|
||||
let elm;
|
||||
|
||||
let elm: HTMLInputElement | HTMLTextAreaElement | undefined;
|
||||
if (isMultiLineInput.value) {
|
||||
elm = commandTextarea.value?.$el?.querySelector('textarea') as HTMLTextAreaElement;
|
||||
} else {
|
||||
|
|
@ -446,43 +509,53 @@ const focusInput = async () => {
|
|||
elm?.focus();
|
||||
};
|
||||
|
||||
const addToHistory = (cmd: string) => {
|
||||
const addToHistory = (cmd: string): void => {
|
||||
commandHistory.value = [cmd, ...commandHistory.value.filter((h) => h !== cmd)].slice(
|
||||
0,
|
||||
MAX_HISTORY_ITEMS,
|
||||
);
|
||||
};
|
||||
|
||||
const loadCommand = async (cmd: string) => {
|
||||
const loadCommand = async (cmd: string): Promise<void> => {
|
||||
command.value = cmd;
|
||||
await nextTick();
|
||||
focusInput();
|
||||
await focusInput();
|
||||
};
|
||||
|
||||
const clearHistory = async () => {
|
||||
const clearHistory = async (): Promise<void> => {
|
||||
if (commandHistory.value.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
const { status } = await dialog.confirmDialog({
|
||||
title: 'Confirm Action',
|
||||
message: `Clear commands history?`,
|
||||
confirmColor: 'is-danger',
|
||||
message: 'Clear commands history?',
|
||||
confirmColor: 'error',
|
||||
});
|
||||
|
||||
if (!status) {
|
||||
return;
|
||||
}
|
||||
|
||||
commandHistory.value = [];
|
||||
};
|
||||
|
||||
const removeFromHistory = (index: number) =>
|
||||
(commandHistory.value = commandHistory.value.filter((_, i) => i !== index));
|
||||
const removeFromHistory = (index: number): void => {
|
||||
commandHistory.value = commandHistory.value.filter((_, i) => i !== index);
|
||||
};
|
||||
|
||||
watch(isMultiLineInput, () => focusInput());
|
||||
watch(isMultiLineInput, async () => {
|
||||
await focusInput();
|
||||
});
|
||||
|
||||
onMounted(async () => {
|
||||
document.addEventListener('resize', handle_event);
|
||||
focusInput();
|
||||
if (config.app.console_enabled !== true) {
|
||||
toast.error('Console is disabled in the configuration. Please enable it to use this feature.');
|
||||
await navigateTo('/');
|
||||
return;
|
||||
}
|
||||
|
||||
window.addEventListener('resize', handle_event);
|
||||
disableOpacity();
|
||||
|
||||
await ensureTerminal();
|
||||
|
|
@ -491,11 +564,13 @@ onMounted(async () => {
|
|||
command.value = storedCommand.value;
|
||||
await nextTick();
|
||||
}
|
||||
|
||||
await focusInput();
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
sseController.value?.abort();
|
||||
document.removeEventListener('resize', handle_event);
|
||||
window.removeEventListener('resize', handle_event);
|
||||
enableOpacity();
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,187 +1,162 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="mt-1 columns is-multiline">
|
||||
<div class="column is-12 is-clearfix is-unselectable">
|
||||
<span class="title is-4">
|
||||
<span class="icon-text">
|
||||
<template v-if="toggleForm">
|
||||
<span class="icon"
|
||||
><i class="fa-solid" :class="{ 'fa-edit': itemRef, 'fa-plus': !itemRef }"
|
||||
/></span>
|
||||
<span>{{ itemRef ? `Edit - ${item.name}` : 'Add new field' }}</span>
|
||||
</template>
|
||||
<template v-else>
|
||||
<span class="icon"><i class="fa-solid fa-file-lines" /></span>
|
||||
<main class="w-full min-w-0 max-w-full space-y-4">
|
||||
<div class="flex flex-col gap-3 xl:flex-row xl:items-start xl:justify-between">
|
||||
<div class="min-w-0 space-y-1">
|
||||
<div class="flex items-center gap-2 text-lg font-semibold text-highlighted">
|
||||
<UIcon name="i-lucide-braces" class="size-5 text-toned" />
|
||||
<span>Custom Fields</span>
|
||||
</template>
|
||||
</span>
|
||||
</span>
|
||||
<div class="is-pulled-right" v-if="!toggleForm">
|
||||
<div class="field is-grouped">
|
||||
<p class="control has-icons-left" v-if="toggleFilter && items && items.length > 0">
|
||||
<input
|
||||
type="search"
|
||||
v-model.lazy="query"
|
||||
class="input"
|
||||
id="filter"
|
||||
placeholder="Filter displayed content"
|
||||
/>
|
||||
<span class="icon is-left"><i class="fas fa-filter" /></span>
|
||||
</p>
|
||||
|
||||
<p class="control" v-if="items && items.length > 0">
|
||||
<button class="button is-danger is-light" @click="toggleFilter = !toggleFilter">
|
||||
<span class="icon"><i class="fas fa-filter" /></span>
|
||||
<span v-if="!isMobile">Filter</span>
|
||||
</button>
|
||||
</p>
|
||||
|
||||
<p class="control">
|
||||
<button
|
||||
class="button is-primary"
|
||||
@click="
|
||||
resetForm(false);
|
||||
toggleForm = !toggleForm;
|
||||
"
|
||||
>
|
||||
<span class="icon"><i class="fas fa-add" /></span>
|
||||
<span v-if="!isMobile">New Field</span>
|
||||
</button>
|
||||
</p>
|
||||
<p class="control">
|
||||
<button
|
||||
v-tooltip.bottom="'Change display style'"
|
||||
class="button has-tooltip-bottom"
|
||||
@click="() => (display_style = display_style === 'list' ? 'grid' : 'list')"
|
||||
>
|
||||
<span class="icon">
|
||||
<i
|
||||
class="fa-solid"
|
||||
:class="{
|
||||
'fa-table': display_style !== 'list',
|
||||
'fa-table-list': display_style === 'list',
|
||||
}"
|
||||
/></span>
|
||||
<span v-if="!isMobile">
|
||||
{{ display_style === 'list' ? 'List' : 'Grid' }}
|
||||
</span>
|
||||
</button>
|
||||
</p>
|
||||
<p class="control">
|
||||
<button
|
||||
class="button is-info"
|
||||
@click="async () => await loadContent(page)"
|
||||
:class="{ 'is-loading': isLoading }"
|
||||
:disabled="isLoading"
|
||||
v-if="items && items.length > 0"
|
||||
>
|
||||
<span class="icon"><i class="fas fa-refresh" /></span>
|
||||
<span v-if="!isMobile">Reload</span>
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="is-hidden-mobile" v-if="!toggleForm">
|
||||
<span class="subtitle">
|
||||
|
||||
<p class="text-sm text-toned">
|
||||
Custom fields allow you to add new fields to the download form.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap items-center justify-end gap-2">
|
||||
<div v-if="showFilter && items.length > 0" class="relative w-full sm:w-80">
|
||||
<span
|
||||
class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-toned"
|
||||
>
|
||||
<UIcon name="i-lucide-filter" class="size-4" />
|
||||
</span>
|
||||
<input
|
||||
id="filter"
|
||||
ref="filterInput"
|
||||
v-model="query"
|
||||
type="search"
|
||||
placeholder="Filter displayed content"
|
||||
class="w-full rounded-md border border-default bg-elevated py-2 pr-3 pl-9 text-sm text-default outline-none transition focus:border-primary"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<UButton
|
||||
v-if="items.length > 0"
|
||||
color="neutral"
|
||||
:variant="showFilter ? 'soft' : 'outline'"
|
||||
size="sm"
|
||||
icon="i-lucide-filter"
|
||||
@click="toggleFilterPanel"
|
||||
>
|
||||
<span v-if="!isMobile">Filter</span>
|
||||
</UButton>
|
||||
|
||||
<UButton
|
||||
color="neutral"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
icon="i-lucide-plus"
|
||||
@click="openCreate"
|
||||
>
|
||||
<span v-if="!isMobile">New Field</span>
|
||||
</UButton>
|
||||
|
||||
<UButton
|
||||
v-if="items.length > 0"
|
||||
color="neutral"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
:icon="displayStyle === 'list' ? 'i-lucide-list' : 'i-lucide-grid-2x2'"
|
||||
@click="toggleDisplayStyle"
|
||||
>
|
||||
<span v-if="!isMobile">{{ displayStyle === 'list' ? 'List' : 'Grid' }}</span>
|
||||
</UButton>
|
||||
|
||||
<UButton
|
||||
v-if="items.length > 0"
|
||||
color="neutral"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
icon="i-lucide-refresh-cw"
|
||||
:loading="isLoading"
|
||||
:disabled="isLoading"
|
||||
@click="() => void reloadContent()"
|
||||
>
|
||||
<span v-if="!isMobile">Reload</span>
|
||||
</UButton>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column is-12" v-if="!toggleForm && paging?.total_pages > 1">
|
||||
<Pager
|
||||
v-if="paging?.total_pages > 1"
|
||||
:page="paging.page"
|
||||
:last_page="paging.total_pages"
|
||||
:isLoading="isLoading"
|
||||
@navigate="
|
||||
async (newPage) => {
|
||||
page = newPage;
|
||||
await loadContent(newPage);
|
||||
}
|
||||
"
|
||||
@navigate="navigatePage"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="column is-12" v-if="toggleForm">
|
||||
<DLFieldForm
|
||||
:addInProgress="dlFields.addInProgress.value"
|
||||
:reference="itemRef"
|
||||
:item="item as DLField"
|
||||
@cancel="resetForm(true)"
|
||||
@submit="updateItem"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="columns is-multiline"
|
||||
v-if="!isLoading && !toggleForm && filteredItems && filteredItems.length > 0"
|
||||
v-if="displayStyle === 'list' && filteredItems.length > 0"
|
||||
class="w-full min-w-0 max-w-full overflow-hidden rounded-lg border border-default bg-default"
|
||||
>
|
||||
<div class="column is-12" v-if="'list' === display_style">
|
||||
<div class="table-container">
|
||||
<table
|
||||
class="table is-striped is-hoverable is-fullwidth is-bordered"
|
||||
style="min-width: 850px; table-layout: fixed"
|
||||
>
|
||||
<thead>
|
||||
<tr class="has-text-centered is-unselectable">
|
||||
<th width="80%">
|
||||
<span class="icon"><i class="fa-solid fa-filter" /></span>
|
||||
<span>Field</span>
|
||||
</th>
|
||||
<th width="20%">
|
||||
<span class="icon"><i class="fa-solid fa-gear" /></span>
|
||||
<span>Actions</span>
|
||||
</th>
|
||||
<div class="w-full max-w-full overflow-x-auto overscroll-x-contain">
|
||||
<table class="min-w-225 w-full text-sm">
|
||||
<thead class="bg-muted/40 text-xs uppercase tracking-wide text-toned">
|
||||
<tr class="text-center [&>th]:px-3 [&>th]:py-3 [&>th]:font-semibold">
|
||||
<th class="w-full text-left">Field</th>
|
||||
<th class="w-[1%]">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="field in filteredItems" :key="field.id">
|
||||
<td class="is-vcentered">
|
||||
<div class="is-text-overflow is-bold">
|
||||
{{ field.name }}
|
||||
</div>
|
||||
<div class="is-unselectable">
|
||||
<span class="icon-text">
|
||||
<span class="icon"><i class="fa-solid fa-terminal" /></span>
|
||||
|
||||
<tbody class="divide-y divide-default">
|
||||
<tr v-for="field in filteredItems" :key="field.id" class="hover:bg-muted/20">
|
||||
<td class="px-3 py-3 align-middle">
|
||||
<div class="space-y-2">
|
||||
<div class="font-semibold text-highlighted">{{ field.name }}</div>
|
||||
|
||||
<div class="flex flex-wrap items-center gap-3 text-xs text-toned">
|
||||
<span class="inline-flex items-center gap-1">
|
||||
<UIcon name="i-lucide-terminal" class="size-3.5" />
|
||||
<span>{{ field.field }}</span>
|
||||
</span>
|
||||
|
||||
<span class="icon-text">
|
||||
<span class="icon"><i class="fa-solid fa-sort-numeric-down" /></span>
|
||||
|
||||
<span class="inline-flex items-center gap-1">
|
||||
<UIcon name="i-lucide-list-ordered" class="size-3.5" />
|
||||
<span>Order: {{ field.order }}</span>
|
||||
</span>
|
||||
|
||||
<span class="inline-flex items-center gap-1">
|
||||
<UIcon name="i-lucide-shapes" class="size-3.5" />
|
||||
<span>{{ field.kind }}</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div v-if="field.description" class="text-xs text-toned">
|
||||
{{ field.description }}
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="is-vcentered is-items-center">
|
||||
<div class="field is-grouped is-grouped-centered">
|
||||
<div class="control">
|
||||
<button
|
||||
class="button is-info is-small is-fullwidth"
|
||||
|
||||
<td class="w-[1%] px-3 py-3 align-middle whitespace-nowrap">
|
||||
<div class="flex items-center justify-end gap-2">
|
||||
<UButton
|
||||
color="info"
|
||||
variant="outline"
|
||||
size="xs"
|
||||
icon="i-lucide-file-up"
|
||||
@click="exportItem(field)"
|
||||
>
|
||||
<span class="icon"><i class="fa-solid fa-file-export" /></span>
|
||||
<span v-if="!isMobile">Export</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="control">
|
||||
<button
|
||||
class="button is-warning is-small is-fullwidth"
|
||||
</UButton>
|
||||
|
||||
<UButton
|
||||
color="warning"
|
||||
variant="outline"
|
||||
size="xs"
|
||||
icon="i-lucide-pencil"
|
||||
@click="editItem(field)"
|
||||
>
|
||||
<span class="icon"><i class="fa-solid fa-edit" /></span>
|
||||
<span v-if="!isMobile">Edit</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="control">
|
||||
<button
|
||||
class="button is-danger is-small is-fullwidth"
|
||||
@click="deleteItem(field)"
|
||||
</UButton>
|
||||
|
||||
<UButton
|
||||
color="error"
|
||||
variant="outline"
|
||||
size="xs"
|
||||
icon="i-lucide-trash"
|
||||
@click="() => void deleteItem(field)"
|
||||
>
|
||||
<span class="icon"><i class="fa-solid fa-trash" /></span>
|
||||
<span v-if="!isMobile">Delete</span>
|
||||
</button>
|
||||
</div>
|
||||
</UButton>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
|
@ -189,107 +164,162 @@
|
|||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<template v-else>
|
||||
<div class="column is-6" v-for="field in filteredItems" :key="field.id">
|
||||
<div class="card is-flex is-full-height is-flex-direction-column">
|
||||
<header class="card-header">
|
||||
<div class="card-header-title is-text-overflow is-block" v-text="field.name" />
|
||||
<div class="card-header-icon">
|
||||
<div class="field is-grouped">
|
||||
<div class="control">
|
||||
<span class="tag is-dark">
|
||||
<span class="icon"><i class="fa-solid fa-sort-numeric-down" /></span>
|
||||
<span v-text="field.order" />
|
||||
|
||||
<div v-else-if="filteredItems.length > 0" class="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
|
||||
<UCard
|
||||
v-for="field in filteredItems"
|
||||
:key="field.id"
|
||||
class="flex h-full flex-col border bg-default"
|
||||
:ui="{ header: 'p-4 pb-3', body: 'flex flex-1 flex-col gap-4 p-4 pt-0' }"
|
||||
>
|
||||
<template #header>
|
||||
<div class="flex items-start justify-between gap-3">
|
||||
<div class="min-w-0 flex-1 space-y-2">
|
||||
<div class="truncate text-sm font-semibold text-highlighted">{{ field.name }}</div>
|
||||
|
||||
<div class="flex flex-wrap items-center gap-2 text-xs text-toned">
|
||||
<span
|
||||
class="inline-flex items-center gap-1 rounded-md border border-default px-2 py-1"
|
||||
>
|
||||
<UIcon name="i-lucide-list-ordered" class="size-3.5" />
|
||||
<span>Order {{ field.order }}</span>
|
||||
</span>
|
||||
|
||||
<span
|
||||
class="inline-flex items-center gap-1 rounded-md border border-default px-2 py-1"
|
||||
>
|
||||
<UIcon name="i-lucide-shapes" class="size-3.5" />
|
||||
<span>{{ field.kind }}</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="control">
|
||||
<a
|
||||
class="has-text-info"
|
||||
v-tooltip="'Export item'"
|
||||
@click.prevent="exportItem(field)"
|
||||
>
|
||||
<span class="icon"><i class="fa-solid fa-file-export" /></span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="card-content is-flex-grow-1">
|
||||
<div class="content">
|
||||
<p class="is-text-overflow">
|
||||
<span class="icon"><i class="fa-solid fa-terminal" /></span>
|
||||
<span v-text="field.field" />
|
||||
</p>
|
||||
<p class="is-text-overflow" v-if="field.description">
|
||||
<span class="icon"><i class="fa-solid fa-comment" /></span>
|
||||
<span>{{ field.description }}</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer mt-auto">
|
||||
<div class="card-footer-item">
|
||||
<button class="button is-warning is-fullwidth" @click="editItem(field)">
|
||||
<span class="icon"><i class="fa-solid fa-edit" /></span>
|
||||
<span>Edit</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="card-footer-item">
|
||||
<button class="button is-danger is-fullwidth" @click="deleteItem(field)">
|
||||
<span class="icon"><i class="fa-solid fa-trash" /></span>
|
||||
<span>Delete</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<UButton
|
||||
color="info"
|
||||
variant="ghost"
|
||||
size="xs"
|
||||
icon="i-lucide-file-up"
|
||||
square
|
||||
@click="exportItem(field)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="space-y-2 text-sm text-default">
|
||||
<div class="rounded-md border border-default bg-muted/20 px-3 py-2">
|
||||
<div class="flex items-start gap-2">
|
||||
<UIcon name="i-lucide-terminal" class="mt-0.5 size-4 shrink-0 text-toned" />
|
||||
<span class="wrap-break-word">{{ field.field }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="columns is-multiline"
|
||||
v-if="!toggleForm && (isLoading || !filteredItems || filteredItems.length < 1)"
|
||||
v-if="field.description"
|
||||
class="rounded-md border border-default bg-muted/20 px-3 py-2"
|
||||
>
|
||||
<div class="column is-12">
|
||||
<Message v-if="isLoading" class="is-info" title="Loading" icon="fas fa-spinner fa-spin">
|
||||
Loading data. Please wait...
|
||||
</Message>
|
||||
<Message
|
||||
<div class="flex items-start gap-2">
|
||||
<UIcon
|
||||
name="i-lucide-message-square-text"
|
||||
class="mt-0.5 size-4 shrink-0 text-toned"
|
||||
/>
|
||||
<span class="wrap-break-word">{{ field.description }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-auto grid gap-2 pt-2 sm:grid-cols-2">
|
||||
<UButton
|
||||
color="warning"
|
||||
variant="outline"
|
||||
icon="i-lucide-pencil"
|
||||
class="w-full justify-center"
|
||||
@click="editItem(field)"
|
||||
>
|
||||
Edit
|
||||
</UButton>
|
||||
|
||||
<UButton
|
||||
color="error"
|
||||
variant="outline"
|
||||
icon="i-lucide-trash"
|
||||
class="w-full justify-center"
|
||||
@click="() => void deleteItem(field)"
|
||||
>
|
||||
Delete
|
||||
</UButton>
|
||||
</div>
|
||||
</UCard>
|
||||
</div>
|
||||
|
||||
<UAlert
|
||||
v-if="isLoading"
|
||||
color="info"
|
||||
variant="soft"
|
||||
icon="i-lucide-loader-circle"
|
||||
title="Loading"
|
||||
description="Loading data. Please wait..."
|
||||
/>
|
||||
|
||||
<div v-else-if="query && filteredItems.length < 1" class="space-y-3">
|
||||
<UAlert
|
||||
color="warning"
|
||||
variant="soft"
|
||||
icon="i-lucide-search"
|
||||
title="No Results"
|
||||
class="is-warning"
|
||||
icon="fas fa-search"
|
||||
v-else-if="query"
|
||||
:useClose="true"
|
||||
@close="query = ''"
|
||||
:description="`No results found for the query: ${query}. Please try a different search term.`"
|
||||
/>
|
||||
|
||||
<UButton color="neutral" variant="outline" size="sm" @click="query = ''">
|
||||
Clear filter
|
||||
</UButton>
|
||||
</div>
|
||||
|
||||
<UAlert
|
||||
v-else-if="!filteredItems.length"
|
||||
color="warning"
|
||||
variant="soft"
|
||||
icon="i-lucide-circle-alert"
|
||||
title="No items"
|
||||
description="There are no custom defined fields yet. Click the New Field button to add your first field."
|
||||
/>
|
||||
|
||||
<UModal
|
||||
v-if="editorOpen"
|
||||
:open="editorOpen"
|
||||
:title="modalTitle"
|
||||
:description="modalDescription"
|
||||
:dismissible="!dlFields.addInProgress.value"
|
||||
:ui="{ content: 'w-full sm:max-w-5xl', body: 'max-h-[85vh] overflow-y-auto p-4 sm:p-6' }"
|
||||
@update:open="(open) => !open && closeEditor()"
|
||||
>
|
||||
<p>
|
||||
No results found for the query: <code>{{ query }}</code
|
||||
>.
|
||||
</p>
|
||||
<p>Please try a different search term.</p>
|
||||
</Message>
|
||||
<Message v-else title="No items" class="is-warning" icon="fas fa-exclamation-circle">
|
||||
There are no custom defined fields yet. Click the
|
||||
<span class="icon"><i class="fas fa-add" /></span> <strong>New Field</strong> button to
|
||||
add your first field.
|
||||
</Message>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<template #body>
|
||||
<DLFieldForm
|
||||
:key="modalKey"
|
||||
:addInProgress="dlFields.addInProgress.value"
|
||||
:reference="itemRef"
|
||||
:item="item as DLField"
|
||||
@cancel="closeEditor()"
|
||||
@submit="updateItem"
|
||||
/>
|
||||
</template>
|
||||
</UModal>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useStorage } from '@vueuse/core';
|
||||
import type { DLField } from '~/types/dl_fields';
|
||||
import { useConfirm } from '~/composables/useConfirm';
|
||||
import { useDlFields } from '~/composables/useDlFields';
|
||||
import type { DLField } from '~/types/dl_fields';
|
||||
import type { APIResponse } from '~/types/responses';
|
||||
import { copyText, encode } from '~/utils';
|
||||
|
||||
const box = useConfirm();
|
||||
const isMobile = useMediaQuery({ maxWidth: 1024 });
|
||||
const display_style = useStorage<'list' | 'grid'>('dl_fields_display_style', 'grid');
|
||||
const displayStyle = useStorage<'list' | 'grid'>('dl_fields_display_style', 'grid');
|
||||
const dlFields = useDlFields();
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
const items = dlFields.dlFields as Ref<DLField[]>;
|
||||
const paging = dlFields.pagination;
|
||||
|
|
@ -297,42 +327,97 @@ const isLoading = dlFields.isLoading;
|
|||
const page = ref<number>(route.query.page ? parseInt(route.query.page as string, 10) : 1);
|
||||
const item = ref<Partial<DLField>>({});
|
||||
const itemRef = ref<number | null | undefined>(null);
|
||||
const toggleForm = ref(false);
|
||||
const query = ref<string>('');
|
||||
const toggleFilter = ref(false);
|
||||
const editorOpen = ref(false);
|
||||
const query = ref('');
|
||||
const showFilter = ref(false);
|
||||
const filterInput = ref<HTMLInputElement | null>(null);
|
||||
|
||||
const filteredItems = computed<DLField[]>(() => {
|
||||
const q = query.value?.toLowerCase();
|
||||
if (!q) return items.value;
|
||||
return items.value.filter((entry) => deepIncludes(entry, q, new WeakSet()));
|
||||
const normalizedQuery = query.value?.toLowerCase();
|
||||
if (!normalizedQuery) {
|
||||
return items.value;
|
||||
}
|
||||
|
||||
return items.value.filter((entry) => deepIncludes(entry, normalizedQuery, new WeakSet()));
|
||||
});
|
||||
|
||||
const loadContent = async (pageNumber: number = 1): Promise<void> => {
|
||||
await dlFields.loadDlFields(pageNumber);
|
||||
await nextTick();
|
||||
if (dlFields.pagination.value.total_pages > 1) {
|
||||
useRouter().replace({ query: { ...route.query, page: pageNumber.toString() } });
|
||||
}
|
||||
};
|
||||
const modalTitle = computed(() => (itemRef.value ? `Edit - ${item.value.name}` : 'Add new field'));
|
||||
const modalDescription = computed(
|
||||
() => 'Custom fields allow you to add new fields to the download form.',
|
||||
);
|
||||
const modalKey = computed(
|
||||
() => `${itemRef.value ?? 'new'}-${editorOpen.value ? 'open' : 'closed'}`,
|
||||
);
|
||||
|
||||
watch(toggleFilter, (value) => {
|
||||
watch(showFilter, (value) => {
|
||||
if (!value) {
|
||||
query.value = '';
|
||||
}
|
||||
});
|
||||
|
||||
const resetForm = (closeForm = false): void => {
|
||||
const syncPageQuery = async (pageNumber: number): Promise<void> => {
|
||||
const totalPages = dlFields.pagination.value.total_pages;
|
||||
const nextQuery = { ...route.query };
|
||||
|
||||
if (totalPages > 1) {
|
||||
nextQuery.page = String(pageNumber);
|
||||
} else {
|
||||
delete nextQuery.page;
|
||||
}
|
||||
|
||||
await router.replace({ query: nextQuery });
|
||||
};
|
||||
|
||||
const toggleFilterPanel = async (): Promise<void> => {
|
||||
showFilter.value = !showFilter.value;
|
||||
if (!showFilter.value) {
|
||||
query.value = '';
|
||||
return;
|
||||
}
|
||||
|
||||
await nextTick();
|
||||
filterInput.value?.focus();
|
||||
};
|
||||
|
||||
const loadContent = async (pageNumber = 1): Promise<void> => {
|
||||
page.value = pageNumber;
|
||||
await dlFields.loadDlFields(pageNumber);
|
||||
await nextTick();
|
||||
await syncPageQuery(pageNumber);
|
||||
};
|
||||
|
||||
const reloadContent = async (): Promise<void> => {
|
||||
await loadContent(page.value);
|
||||
};
|
||||
|
||||
const navigatePage = async (newPage: number): Promise<void> => {
|
||||
await loadContent(newPage);
|
||||
};
|
||||
|
||||
const resetEditor = (): void => {
|
||||
item.value = {};
|
||||
itemRef.value = null;
|
||||
if (closeForm) {
|
||||
toggleForm.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const closeEditor = (): void => {
|
||||
editorOpen.value = false;
|
||||
resetEditor();
|
||||
};
|
||||
|
||||
const openCreate = (): void => {
|
||||
resetEditor();
|
||||
editorOpen.value = true;
|
||||
};
|
||||
|
||||
const toggleDisplayStyle = (): void => {
|
||||
displayStyle.value = displayStyle.value === 'list' ? 'grid' : 'list';
|
||||
};
|
||||
|
||||
const deleteItem = async (field: DLField): Promise<void> => {
|
||||
if (true !== (await box.confirm(`Delete '${field.name}'?`))) {
|
||||
return;
|
||||
}
|
||||
|
||||
await dlFields.deleteDlField(field.id!);
|
||||
};
|
||||
|
||||
|
|
@ -343,33 +428,36 @@ const updateItem = async ({
|
|||
reference: number | null | undefined;
|
||||
item: DLField;
|
||||
}): Promise<void> => {
|
||||
const cb = (resp: APIResponse) => {
|
||||
if (resp.success) {
|
||||
resetForm(true);
|
||||
const callback = (response: APIResponse) => {
|
||||
if (response.success) {
|
||||
closeEditor();
|
||||
}
|
||||
};
|
||||
|
||||
if (reference) {
|
||||
await dlFields.patchDlField(reference, updatedItem, cb);
|
||||
await dlFields.patchDlField(reference, updatedItem, callback);
|
||||
} else {
|
||||
await dlFields.createDlField(updatedItem, cb);
|
||||
await dlFields.createDlField(updatedItem, callback);
|
||||
}
|
||||
};
|
||||
|
||||
const editItem = (field: DLField): void => {
|
||||
item.value = { ...field };
|
||||
item.value = JSON.parse(JSON.stringify(field)) as DLField;
|
||||
itemRef.value = field.id;
|
||||
toggleForm.value = true;
|
||||
editorOpen.value = true;
|
||||
};
|
||||
|
||||
const exportItem = (field: DLField): void =>
|
||||
const exportItem = (field: DLField): void => {
|
||||
copyText(
|
||||
encode({
|
||||
...Object.fromEntries(Object.entries(field).filter(([k, v]) => !!v && 'id' !== k)),
|
||||
...Object.fromEntries(
|
||||
Object.entries(field).filter(([key, value]) => !!value && 'id' !== key),
|
||||
),
|
||||
_type: 'dl_field',
|
||||
_version: '1.0',
|
||||
}),
|
||||
);
|
||||
};
|
||||
|
||||
onMounted(async () => await loadContent(page.value));
|
||||
</script>
|
||||
|
|
|
|||
71
ui/app/pages/docs/[...slug].vue
Normal file
71
ui/app/pages/docs/[...slug].vue
Normal file
|
|
@ -0,0 +1,71 @@
|
|||
<template>
|
||||
<main class="space-y-6">
|
||||
<UPageHeader :title="docEntry.title" :description="docEntry.description" :ui="pageHeaderUi">
|
||||
<template #links>
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<UButton
|
||||
v-for="entry in docsEntries"
|
||||
:key="entry.id"
|
||||
:to="entry.route"
|
||||
:color="entry.file === docEntry.file ? 'primary' : 'neutral'"
|
||||
:variant="entry.file === docEntry.file ? 'solid' : 'outline'"
|
||||
size="sm"
|
||||
:icon="entry.icon"
|
||||
>
|
||||
{{ entry.navLabel }}
|
||||
</UButton>
|
||||
</div>
|
||||
</template>
|
||||
</UPageHeader>
|
||||
|
||||
<UPageCard variant="outline" :ui="pageCardUi">
|
||||
<template #body>
|
||||
<div class="px-4 py-5 sm:px-6 sm:py-6 lg:px-7">
|
||||
<Markdown :file="`/api/docs/${docEntry.file}`" />
|
||||
</div>
|
||||
</template>
|
||||
</UPageCard>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import Markdown from '~/components/Markdown.vue';
|
||||
import { DOCS_ENTRIES, getDocsEntryBySlug } from '~/composables/useDocs';
|
||||
|
||||
const route = useRoute();
|
||||
|
||||
const docsEntries = DOCS_ENTRIES;
|
||||
|
||||
const docEntry = computed(() => {
|
||||
const entry = getDocsEntryBySlug(route.params.slug as string | string[] | undefined);
|
||||
|
||||
if (!entry) {
|
||||
throw createError({
|
||||
statusCode: 404,
|
||||
statusMessage: 'Documentation not found',
|
||||
});
|
||||
}
|
||||
|
||||
return entry;
|
||||
});
|
||||
|
||||
useHead(() => ({
|
||||
title: docEntry.value.title,
|
||||
}));
|
||||
|
||||
const pageHeaderUi = {
|
||||
root: 'border-b border-default py-4',
|
||||
headline: 'hidden',
|
||||
title: 'text-2xl font-semibold text-highlighted',
|
||||
description: 'text-sm text-toned',
|
||||
wrapper: 'flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between',
|
||||
links: 'flex flex-wrap items-center gap-2',
|
||||
};
|
||||
|
||||
const pageCardUi = {
|
||||
root: 'w-full bg-default',
|
||||
container: 'w-full p-0',
|
||||
wrapper: 'w-full items-stretch',
|
||||
body: 'w-full p-0',
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,147 +1,162 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="mt-1 columns is-multiline">
|
||||
<div class="column is-12 is-clearfix is-unselectable">
|
||||
<span class="title is-4" v-if="!isMobile">
|
||||
<span class="icon-text">
|
||||
<span class="icon"><i class="fa-solid fa-download" /></span>
|
||||
<span>Downloads</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<div class="is-pulled-right">
|
||||
<div class="field is-grouped">
|
||||
<p class="control has-icons-left" v-if="toggleFilter">
|
||||
<input
|
||||
type="search"
|
||||
v-model.lazy="query"
|
||||
class="input"
|
||||
<div class="space-y-6">
|
||||
<UPageHeader
|
||||
title="Downloads"
|
||||
description="Queued and completed downloads are displayed here."
|
||||
:ui="{
|
||||
root: 'border-b border-default py-4',
|
||||
headline: 'hidden',
|
||||
title: 'text-2xl font-semibold text-highlighted',
|
||||
description: 'text-sm text-toned',
|
||||
wrapper: 'flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between',
|
||||
links: 'flex flex-wrap items-center gap-2',
|
||||
}"
|
||||
>
|
||||
<template #links>
|
||||
<UDashboardToolbar
|
||||
:ui="{
|
||||
root: 'w-full border-0 p-0',
|
||||
left: 'flex flex-wrap items-center gap-2',
|
||||
right: 'flex flex-wrap items-center gap-2',
|
||||
}"
|
||||
>
|
||||
<template #left>
|
||||
<UInput
|
||||
v-if="toggleFilter"
|
||||
id="filter"
|
||||
v-model.lazy="query"
|
||||
type="search"
|
||||
placeholder="Filter displayed content"
|
||||
icon="i-lucide-filter"
|
||||
size="sm"
|
||||
class="w-full sm:w-72"
|
||||
/>
|
||||
<span class="icon is-left"><i class="fas fa-filter" /></span>
|
||||
</p>
|
||||
|
||||
<p class="control">
|
||||
<button class="button is-danger is-light" @click="toggleFilter = !toggleFilter">
|
||||
<span class="icon"><i class="fas fa-filter" /></span>
|
||||
<UButton
|
||||
color="neutral"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
icon="i-lucide-filter"
|
||||
@click="toggleFilter = !toggleFilter"
|
||||
>
|
||||
<span v-if="!isMobile">Filter</span>
|
||||
</button>
|
||||
</p>
|
||||
</UButton>
|
||||
|
||||
<p class="control">
|
||||
<button
|
||||
class="button is-warning"
|
||||
@click="pauseDownload"
|
||||
<UButton
|
||||
v-if="false === config.paused"
|
||||
color="neutral"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
icon="i-lucide-pause"
|
||||
@click="() => void pauseDownload()"
|
||||
>
|
||||
<span class="icon"><i class="fas fa-pause" /></span>
|
||||
<span v-if="!isMobile">Pause</span>
|
||||
</button>
|
||||
<button
|
||||
class="button is-danger"
|
||||
@click="resumeDownload"
|
||||
v-else
|
||||
v-tooltip.bottom="'Resume downloading.'"
|
||||
>
|
||||
<span class="icon"><i class="fas fa-play" /></span>
|
||||
<span v-if="!isMobile">Resume</span>
|
||||
</button>
|
||||
</p>
|
||||
</UButton>
|
||||
|
||||
<p class="control">
|
||||
<button
|
||||
class="button is-primary has-tooltip-bottom"
|
||||
<UButton
|
||||
v-else
|
||||
color="neutral"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
icon="i-lucide-play"
|
||||
@click="() => void resumeDownload()"
|
||||
>
|
||||
<span v-if="!isMobile">Resume</span>
|
||||
</UButton>
|
||||
|
||||
<UButton
|
||||
color="neutral"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
icon="i-lucide-plus"
|
||||
@click="config.showForm = !config.showForm"
|
||||
>
|
||||
<span class="icon"><i class="fa-solid fa-plus" /></span>
|
||||
<span v-if="!isMobile">Add</span>
|
||||
</button>
|
||||
</p>
|
||||
</UButton>
|
||||
</template>
|
||||
|
||||
<p class="control">
|
||||
<button
|
||||
v-tooltip.bottom="'Change display style'"
|
||||
class="button has-tooltip-bottom"
|
||||
@click="() => changeDisplay()"
|
||||
<template #right>
|
||||
<UButton
|
||||
color="neutral"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
:icon="display_style === 'list' ? 'i-lucide-list' : 'i-lucide-grid-2x2'"
|
||||
@click="changeDisplay"
|
||||
>
|
||||
<span class="icon"
|
||||
><i
|
||||
class="fa-solid"
|
||||
:class="{
|
||||
'fa-table': display_style !== 'list',
|
||||
'fa-table-list': display_style === 'list',
|
||||
}"
|
||||
/></span>
|
||||
<span v-if="!isMobile">
|
||||
{{ display_style === 'list' ? 'List' : 'Grid' }}
|
||||
</span>
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="!isMobile">
|
||||
<span class="subtitle"> Queued and completed downloads are displayed here. </span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span v-if="!isMobile">{{ display_style === 'list' ? 'List' : 'Grid' }}</span>
|
||||
</UButton>
|
||||
</template>
|
||||
</UDashboardToolbar>
|
||||
</template>
|
||||
</UPageHeader>
|
||||
|
||||
<div v-if="config.showForm" class="page-form-wrap">
|
||||
<NewDownload
|
||||
v-if="config.showForm"
|
||||
:item="item_form"
|
||||
@clear_form="item_form = {}"
|
||||
@getInfo="
|
||||
(url: string, preset: string = '', cli: string = '') => view_info(url, false, preset, cli)
|
||||
"
|
||||
/>
|
||||
|
||||
<div class="tabs is-boxed is-medium">
|
||||
<ul>
|
||||
<li :class="{ 'is-active': activeTab === 'queue' }">
|
||||
<a @click="setActiveTab('queue')">
|
||||
<span class="icon is-small"><i class="fas fa-download" /></span>
|
||||
<span>Downloads</span>
|
||||
<span class="tag is-info is-rounded is-bold ml-2">{{ queueCount }}</span>
|
||||
</a>
|
||||
</li>
|
||||
<li :class="{ 'is-active': activeTab === 'history' }">
|
||||
<a @click="setActiveTab('history')">
|
||||
<span class="icon is-small"><i class="fas fa-history" /></span>
|
||||
<span>History</span>
|
||||
<span class="tag is-primary is-rounded is-bold ml-2">{{ historyCount }}</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="tab-content">
|
||||
<div v-show="'queue' === activeTab">
|
||||
<UPageCard
|
||||
variant="outline"
|
||||
:ui="{
|
||||
root: 'w-full min-w-0 max-w-full bg-default',
|
||||
container: 'w-full min-w-0 max-w-full p-0 sm:p-0',
|
||||
wrapper: 'w-full min-w-0 items-stretch',
|
||||
body: 'w-full min-w-0 max-w-full p-0',
|
||||
}"
|
||||
>
|
||||
<template #body>
|
||||
<UTabs
|
||||
v-model="activeTab"
|
||||
:items="tabItems"
|
||||
value-key="value"
|
||||
color="neutral"
|
||||
variant="link"
|
||||
size="md"
|
||||
:content="false"
|
||||
:ui="{
|
||||
root: 'flex-col gap-4',
|
||||
list: 'border-b border-default px-2 sm:px-4',
|
||||
trigger: 'justify-start rounded-none px-3 py-3 text-sm font-medium',
|
||||
trailingBadge: 'ml-1',
|
||||
}"
|
||||
@update:model-value="(value) => void setActiveTab(value as TabType)"
|
||||
/>
|
||||
|
||||
<div class="w-full min-w-0 max-w-full px-0 pt-2">
|
||||
<div v-show="'queue' === activeTab" class="w-full min-w-0 max-w-full">
|
||||
<Queue
|
||||
:thumbnails="show_thumbnail"
|
||||
:query="query"
|
||||
@getInfo="
|
||||
(url: string, preset: string = '', cli: string = '') =>
|
||||
view_info(url, false, preset, cli)
|
||||
"
|
||||
:thumbnails="show_thumbnail"
|
||||
:query="query"
|
||||
@getItemInfo="(id: string) => view_info(`/api/history/${id}`, true)"
|
||||
@clear_search="query = ''"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div v-show="'history' === activeTab">
|
||||
<div v-show="'history' === activeTab" class="w-full min-w-0 max-w-full">
|
||||
<History
|
||||
:query="query"
|
||||
:thumbnails="show_thumbnail"
|
||||
@getInfo="
|
||||
(url: string, preset: string = '', cli: string = '') =>
|
||||
view_info(url, false, preset, cli)
|
||||
"
|
||||
@add_new="(item: item_request) => toNewDownload(item)"
|
||||
:query="query"
|
||||
:thumbnails="show_thumbnail"
|
||||
@getItemInfo="(id: string) => view_info(`/api/history/${id}`, true)"
|
||||
@clear_search="query = ''"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</UPageCard>
|
||||
|
||||
<GetInfo
|
||||
v-if="info_view.url"
|
||||
|
|
@ -151,21 +166,12 @@
|
|||
:useUrl="info_view.useUrl"
|
||||
@closeModel="close_info()"
|
||||
/>
|
||||
|
||||
<ConfirmDialog
|
||||
v-if="dialog_confirm.visible"
|
||||
:visible="dialog_confirm.visible"
|
||||
:title="dialog_confirm.title"
|
||||
:html_message="dialog_confirm.html_message"
|
||||
:options="dialog_confirm.options"
|
||||
@confirm="dialog_confirm.confirm"
|
||||
@cancel="() => (dialog_confirm.visible = false)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useStorage } from '@vueuse/core';
|
||||
import { useDialog } from '~/composables/useDialog';
|
||||
import type { item_request } from '~/types/item';
|
||||
import type { StoreItem } from '~/types/store';
|
||||
|
||||
|
|
@ -173,6 +179,7 @@ const config = useConfigStore();
|
|||
const stateStore = useStateStore();
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const { confirmDialog } = useDialog();
|
||||
|
||||
const bg_enable = useStorage<boolean>('random_bg', true);
|
||||
const bg_opacity = useStorage<number>('random_bg_opacity', 0.95);
|
||||
|
|
@ -187,17 +194,9 @@ const info_view = ref({
|
|||
useUrl: false,
|
||||
}) as Ref<{ url: string; preset: string; cli: string; useUrl: boolean }>;
|
||||
const item_form = ref<item_request | object>({});
|
||||
const query = ref();
|
||||
const query = ref('');
|
||||
const toggleFilter = ref(false);
|
||||
const dialog_confirm = ref({
|
||||
visible: false,
|
||||
title: 'Confirm Action',
|
||||
confirm: () => {},
|
||||
html_message: '',
|
||||
options: [],
|
||||
});
|
||||
|
||||
// Tab management with URL state
|
||||
type TabType = 'queue' | 'history';
|
||||
|
||||
const activeTab = ref<TabType>('queue');
|
||||
|
|
@ -241,6 +240,25 @@ onMounted(async () => {
|
|||
const queueCount = computed(() => stateStore.count('queue'));
|
||||
const historyCount = computed(() => stateStore.count('history'));
|
||||
|
||||
const tabItems = computed(() => [
|
||||
{
|
||||
label: 'Downloads',
|
||||
icon: 'i-lucide-download',
|
||||
value: 'queue',
|
||||
badge: { label: String(queueCount.value), color: 'info' as const, variant: 'soft' as const },
|
||||
},
|
||||
{
|
||||
label: 'History',
|
||||
icon: 'i-lucide-history',
|
||||
value: 'history',
|
||||
badge: {
|
||||
label: String(historyCount.value),
|
||||
color: 'primary' as const,
|
||||
variant: 'soft' as const,
|
||||
},
|
||||
},
|
||||
]);
|
||||
|
||||
watch(toggleFilter, () => {
|
||||
if (!toggleFilter.value) {
|
||||
query.value = '';
|
||||
|
|
@ -276,26 +294,24 @@ watch(
|
|||
{ deep: true },
|
||||
);
|
||||
|
||||
const resumeDownload = async () => await request('/api/system/resume', { method: 'POST' });
|
||||
const resumeDownload = async (): Promise<void> => {
|
||||
await request('/api/system/resume', { method: 'POST' });
|
||||
};
|
||||
|
||||
const pauseDownload = async (): Promise<void> => {
|
||||
const { status } = await confirmDialog({
|
||||
title: 'Pause Downloads',
|
||||
confirmText: 'Pause',
|
||||
cancelText: 'Cancel',
|
||||
confirmColor: 'warning',
|
||||
message: 'Are you sure you want to pause all non-active downloads?',
|
||||
});
|
||||
|
||||
if (!status) {
|
||||
return;
|
||||
}
|
||||
|
||||
const pauseDownload = () => {
|
||||
dialog_confirm.value.visible = true;
|
||||
dialog_confirm.value.html_message = `
|
||||
<span class="icon-text">
|
||||
<span class="icon"><i class="fa-solid fa-exclamation-triangle"></i></span>
|
||||
<span class="is-bold">Pause All non-active downloads?</span>
|
||||
</span>
|
||||
<br>
|
||||
<span class="has-text-danger">
|
||||
<ul>
|
||||
<li>This will not stop downloads that are currently in progress.</li>
|
||||
<li>If you are in middle of adding a playlist/channel, it will break and stop adding more items.</li>
|
||||
</ul>
|
||||
</span>`;
|
||||
dialog_confirm.value.confirm = async () => {
|
||||
await request('/api/system/pause', { method: 'POST' });
|
||||
dialog_confirm.value.visible = false;
|
||||
};
|
||||
};
|
||||
|
||||
const close_info = () => {
|
||||
|
|
@ -322,8 +338,9 @@ watch(
|
|||
},
|
||||
);
|
||||
|
||||
const changeDisplay = () =>
|
||||
(display_style.value = display_style.value === 'grid' ? 'list' : 'grid');
|
||||
const changeDisplay = (): void => {
|
||||
display_style.value = display_style.value === 'grid' ? 'list' : 'grid';
|
||||
};
|
||||
|
||||
const toNewDownload = async (item: item_request | Partial<StoreItem>) => {
|
||||
if (!item) {
|
||||
|
|
@ -341,3 +358,9 @@ const toNewDownload = async (item: item_request | Partial<StoreItem>) => {
|
|||
config.showForm = true;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page-form-wrap {
|
||||
max-width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,137 +1,162 @@
|
|||
<style scoped>
|
||||
#logView {
|
||||
min-height: 72vh;
|
||||
min-width: inherit;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
#logView > span:nth-child(even) {
|
||||
color: #ffc9d4;
|
||||
}
|
||||
|
||||
#logView > span:nth-child(odd) {
|
||||
color: #e3c981;
|
||||
}
|
||||
|
||||
.logbox {
|
||||
background-color: #1f2229 !important;
|
||||
box-shadow:
|
||||
0 4px 8px 0 rgba(0, 0, 0, 0.2),
|
||||
0 6px 20px 0 rgba(0, 0, 0, 0.19);
|
||||
min-width: 100%;
|
||||
max-height: 73vh;
|
||||
overflow-y: scroll;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
code {
|
||||
background-color: unset;
|
||||
}
|
||||
|
||||
.logline {
|
||||
word-break: break-all;
|
||||
line-height: 1.75rem;
|
||||
padding: 1em;
|
||||
color: #fff1b8;
|
||||
}
|
||||
</style>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="mt-1 columns is-multiline">
|
||||
<div class="column is-12 is-clearfix is-unselectable">
|
||||
<span class="title is-4">
|
||||
<span class="icon"><i class="fas fa-file-lines" /></span>
|
||||
Logs
|
||||
</span>
|
||||
<div class="is-pulled-right">
|
||||
<div class="field is-grouped">
|
||||
<div class="control">
|
||||
<button v-if="!autoScroll" @click="scrollToBottom(false)" class="button is-primary">
|
||||
<span class="icon"><i class="fas fa-arrow-down"></i></span>
|
||||
<span>Go to Bottom</span>
|
||||
</button>
|
||||
</div>
|
||||
<main class="w-full min-w-0 max-w-full space-y-4">
|
||||
<div class="flex flex-col gap-3 xl:flex-row xl:items-start xl:justify-between">
|
||||
<div class="min-w-0 space-y-1">
|
||||
<div class="flex flex-wrap items-center gap-2 text-lg font-semibold text-highlighted">
|
||||
<UIcon name="i-lucide-file-text" class="size-5 text-toned" />
|
||||
<span>Logs</span>
|
||||
|
||||
<div class="control has-icons-left" v-if="toggleFilter || query">
|
||||
<input
|
||||
type="search"
|
||||
v-model.lazy="query"
|
||||
class="input"
|
||||
id="filter"
|
||||
placeholder="Filter displayed content"
|
||||
/>
|
||||
<span class="icon is-left"><i class="fas fa-filter" /></span>
|
||||
</div>
|
||||
<UBadge :color="loading ? 'info' : 'success'" variant="soft" size="sm">
|
||||
{{ loading ? 'Loading history' : 'Live stream' }}
|
||||
</UBadge>
|
||||
|
||||
<div class="control">
|
||||
<button class="button is-danger is-light" @click="toggleFilter = !toggleFilter">
|
||||
<span class="icon"><i class="fas fa-filter" /></span>
|
||||
</button>
|
||||
</div>
|
||||
<UBadge :color="autoScroll ? 'success' : 'neutral'" variant="soft" size="sm">
|
||||
{{ autoScroll ? 'Auto-follow' : 'Manual scroll' }}
|
||||
</UBadge>
|
||||
|
||||
<p class="control">
|
||||
<button
|
||||
class="button is-purple"
|
||||
@click="textWrap = !textWrap"
|
||||
v-tooltip.bottom="'Toggle text wrap'"
|
||||
<UBadge color="neutral" variant="soft" size="sm">
|
||||
{{ filteredLogs.length }} shown
|
||||
</UBadge>
|
||||
|
||||
<UBadge
|
||||
v-if="logs.length !== filteredLogs.length"
|
||||
color="neutral"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
>
|
||||
<span class="icon"><i class="fas fa-text-width"></i></span>
|
||||
</button>
|
||||
{{ logs.length }} loaded
|
||||
</UBadge>
|
||||
|
||||
<UBadge v-if="hasActiveFilter" color="warning" variant="soft" size="sm">
|
||||
{{ matchCount }} matches
|
||||
</UBadge>
|
||||
|
||||
<UBadge v-if="reachedEnd && !hasActiveFilter" color="neutral" variant="soft" size="sm">
|
||||
Start of file loaded
|
||||
</UBadge>
|
||||
</div>
|
||||
|
||||
<p class="text-sm text-toned">Scroll near the top to load older logs.</p>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap items-center justify-end gap-2">
|
||||
<UButton
|
||||
v-if="!autoScroll"
|
||||
color="neutral"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
icon="i-lucide-arrow-down"
|
||||
@click="scrollToBottom(false)"
|
||||
>
|
||||
Jump to Live Tail
|
||||
</UButton>
|
||||
|
||||
<div v-if="toggleFilter || query" class="relative w-full sm:w-72">
|
||||
<span
|
||||
class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-toned"
|
||||
>
|
||||
<UIcon name="i-lucide-filter" class="size-4" />
|
||||
</span>
|
||||
|
||||
<input
|
||||
id="filter"
|
||||
v-model.lazy="query"
|
||||
type="search"
|
||||
placeholder="Filter displayed content"
|
||||
class="w-full rounded-md border border-default bg-elevated py-2 pr-3 pl-9 text-sm text-default outline-none transition focus:border-primary"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<UButton
|
||||
color="neutral"
|
||||
:variant="toggleFilter ? 'soft' : 'outline'"
|
||||
size="sm"
|
||||
icon="i-lucide-filter"
|
||||
@click="toggleFilter = !toggleFilter"
|
||||
>
|
||||
Filter
|
||||
</UButton>
|
||||
|
||||
<USwitch
|
||||
v-model="textWrap"
|
||||
color="primary"
|
||||
size="sm"
|
||||
:label="textWrap ? 'Wrap lines' : 'Horizontal scroll'"
|
||||
:ui="{ root: 'items-center gap-2', wrapper: 'ms-0 text-xs text-toned' }"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<UPageCard variant="naked" :ui="pageCardUi">
|
||||
<template #body>
|
||||
<div class="space-y-3">
|
||||
<div class="flex flex-wrap items-center justify-end gap-2 text-xs text-toned">
|
||||
<span v-if="searchTerm">
|
||||
Query: <code>{{ searchTerm }}</code>
|
||||
</span>
|
||||
|
||||
<span v-if="filterContext > 0">
|
||||
Context: <code>{{ filterContext }}</code>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div ref="logContainer" class="logbox overflow-auto" @scroll.passive="handleScroll">
|
||||
<div
|
||||
class="min-w-full space-y-2 font-mono text-[12px] leading-6 text-default"
|
||||
role="log"
|
||||
aria-live="polite"
|
||||
>
|
||||
<div v-if="reachedEnd && !hasActiveFilter" class="flex justify-center">
|
||||
<div
|
||||
class="rounded-full border border-default bg-muted/40 px-3 py-1 text-[11px] text-toned"
|
||||
>
|
||||
No older lines remain in this file.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="filteredLogs.length > 0" class="space-y-1.5">
|
||||
<article
|
||||
v-for="(entry, index) in filteredLogs"
|
||||
:key="entry.log.id"
|
||||
:class="logRowClass(entry, index)"
|
||||
>
|
||||
<span class="log-timestamp" :title="logTimeTitle(entry.log.datetime)">
|
||||
{{ logTimeLabel(entry.log.datetime) }}
|
||||
</span>
|
||||
|
||||
<p class="log-line" :class="textWrap ? 'log-line--wrap' : 'log-line--nowrap'">
|
||||
{{ entry.log.line }}
|
||||
</p>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-else
|
||||
class="rounded-xl border border-default bg-muted/20 px-4 py-6 text-center"
|
||||
>
|
||||
<div class="space-y-2">
|
||||
<p class="text-sm font-semibold text-highlighted">
|
||||
{{
|
||||
hasActiveFilter
|
||||
? 'No log lines match the current filter.'
|
||||
: 'No log lines are available yet.'
|
||||
}}
|
||||
</p>
|
||||
|
||||
<p v-if="hasActiveFilter" class="text-xs text-toned">
|
||||
Try a different term or clear <code>{{ query }}</code
|
||||
>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="is-hidden-mobile">
|
||||
<span class="subtitle"
|
||||
>The logs are being streamed in real-time. You can scroll up to view older logs.</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column is-12">
|
||||
<div class="logbox is-grid" ref="logContainer" @scroll.passive="handleScroll">
|
||||
<code
|
||||
id="logView"
|
||||
class="p-2 logline is-block"
|
||||
:class="{ 'is-pre-wrap': true === textWrap, 'is-pre': false === textWrap }"
|
||||
>
|
||||
<span
|
||||
class="is-block m-0 notification is-info is-dark has-text-centered"
|
||||
v-if="reachedEnd && !query"
|
||||
>
|
||||
<span class="notification-title">
|
||||
<span class="icon"><i class="fas fa-exclamation-triangle" /></span>
|
||||
No more logs available for this file.
|
||||
</span>
|
||||
</span>
|
||||
<span v-for="log in filteredItems" :key="log.id" class="is-block">
|
||||
<template v-if="log?.datetime"
|
||||
>[<span class="has-tooltip" :title="log.datetime">{{
|
||||
moment(log.datetime).format('HH:mm:ss')
|
||||
}}</span
|
||||
>]</template
|
||||
>
|
||||
{{ log.line }}
|
||||
</span>
|
||||
<span class="is-block" v-if="filteredItems.length < 1">
|
||||
<span
|
||||
class="is-block m-0 notification is-warning is-dark has-text-centered"
|
||||
v-if="query"
|
||||
>
|
||||
<span class="notification-title is-danger">
|
||||
<span class="icon"><i class="fas fa-filter" /></span>
|
||||
No logs match this query: <u>{{ query }}</u>
|
||||
</span>
|
||||
</span>
|
||||
<span v-else> <span class="has-text-danger">No logs available</span></span>
|
||||
</span>
|
||||
</code>
|
||||
<div ref="bottomMarker"></div>
|
||||
</div>
|
||||
<div ref="bottomMarker" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</UPageCard>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
|
@ -140,7 +165,17 @@ import type { EventSourceMessage } from '@microsoft/fetch-event-source';
|
|||
import moment from 'moment';
|
||||
import { useStorage } from '@vueuse/core';
|
||||
import type { log_line } from '~/types/logs';
|
||||
import { parse_api_error, uri } from '~/utils';
|
||||
import { disableOpacity, enableOpacity, parse_api_error, request, uri } from '~/utils';
|
||||
|
||||
type FilteredLogEntry = {
|
||||
log: log_line;
|
||||
isMatch: boolean;
|
||||
isContext: boolean;
|
||||
};
|
||||
|
||||
type LogTone = 'default' | 'info' | 'warning' | 'error';
|
||||
|
||||
const FILTER_CONTEXT_REGEX = /context:(\d+)/;
|
||||
|
||||
let scrollTimeout: NodeJS.Timeout | null = null;
|
||||
|
||||
|
|
@ -151,15 +186,20 @@ const route = useRoute();
|
|||
const logContainer = useTemplateRef<HTMLDivElement>('logContainer');
|
||||
const bottomMarker = useTemplateRef<HTMLDivElement>('bottomMarker');
|
||||
const textWrap = useStorage<boolean>('logs_wrap', true);
|
||||
const bg_enable = useStorage<boolean>('random_bg', true);
|
||||
const bg_opacity = useStorage<number>('random_bg_opacity', 0.95);
|
||||
const sseController = ref<AbortController | null>(null);
|
||||
|
||||
const logs = ref<Array<log_line>>([]);
|
||||
const offset = ref<number>(0);
|
||||
const loading = ref<boolean>(false);
|
||||
const autoScroll = ref<boolean>(true);
|
||||
const reachedEnd = ref<boolean>(false);
|
||||
const offset = ref(0);
|
||||
const loading = ref(false);
|
||||
const autoScroll = ref(true);
|
||||
const reachedEnd = ref(false);
|
||||
|
||||
const pageCardUi = {
|
||||
root: 'w-full bg-transparent',
|
||||
container: 'w-full p-4 sm:p-5',
|
||||
wrapper: 'w-full items-stretch',
|
||||
body: 'w-full',
|
||||
};
|
||||
|
||||
const query = ref<string>(
|
||||
(() => {
|
||||
|
|
@ -167,17 +207,28 @@ const query = ref<string>(
|
|||
if (!filter) {
|
||||
return '';
|
||||
}
|
||||
|
||||
if (typeof filter === 'string') {
|
||||
return filter.trim();
|
||||
}
|
||||
|
||||
if (Array.isArray(filter) && filter.length > 0) {
|
||||
return filter[0]?.trim() ?? '';
|
||||
}
|
||||
|
||||
return '';
|
||||
})(),
|
||||
);
|
||||
|
||||
const toggleFilter = ref(false);
|
||||
const toggleFilter = ref(Boolean(query.value));
|
||||
|
||||
const normalizedQuery = computed(() => query.value.trim().toLowerCase());
|
||||
const filterContext = computed(() => {
|
||||
const match = normalizedQuery.value.match(FILTER_CONTEXT_REGEX);
|
||||
return match ? parseInt(match[1] ?? '0', 10) : 0;
|
||||
});
|
||||
const searchTerm = computed(() => normalizedQuery.value.replace(FILTER_CONTEXT_REGEX, '').trim());
|
||||
const hasActiveFilter = computed(() => Boolean(searchTerm.value));
|
||||
watch(toggleFilter, () => {
|
||||
if (!toggleFilter.value) {
|
||||
query.value = '';
|
||||
|
|
@ -187,52 +238,58 @@ watch(toggleFilter, () => {
|
|||
|
||||
watch(
|
||||
() => config.app.file_logging,
|
||||
async (v) => {
|
||||
if (v) {
|
||||
async (value) => {
|
||||
if (value) {
|
||||
return;
|
||||
}
|
||||
|
||||
await navigateTo('/');
|
||||
},
|
||||
);
|
||||
|
||||
const filteredItems = computed(() => {
|
||||
const raw = query.value.trim().toLowerCase();
|
||||
const contextMatch = raw.match(/context:(\d+)/);
|
||||
const context = contextMatch ? parseInt(String(contextMatch[1]), 10) : 0;
|
||||
const searchTerm = raw.replace(/context:\d+/, '').trim();
|
||||
|
||||
if (!searchTerm) {
|
||||
return logs.value;
|
||||
const filteredLogs = computed<FilteredLogEntry[]>(() => {
|
||||
if (!hasActiveFilter.value) {
|
||||
return logs.value.map((log) => ({ log, isMatch: false, isContext: false }));
|
||||
}
|
||||
|
||||
const result: Array<log_line> = [];
|
||||
const matchedIndexes = new Set();
|
||||
const result: Array<FilteredLogEntry> = [];
|
||||
const visibleIndexes = new Set<number>();
|
||||
const matchedIndexes = new Set<number>();
|
||||
|
||||
logs.value.forEach((log, index) => {
|
||||
if (log.line.toLowerCase().includes(searchTerm.value)) {
|
||||
matchedIndexes.add(index);
|
||||
|
||||
logs.value.forEach((log, i) => {
|
||||
if (log.line.toLowerCase().includes(searchTerm)) {
|
||||
for (
|
||||
let j = Math.max(0, i - context);
|
||||
j <= Math.min(logs.value.length - 1, i + context);
|
||||
j++
|
||||
let i = Math.max(0, index - filterContext.value);
|
||||
i <= Math.min(logs.value.length - 1, index + filterContext.value);
|
||||
i++
|
||||
) {
|
||||
matchedIndexes.add(j);
|
||||
visibleIndexes.add(i);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
Array.from(matchedIndexes)
|
||||
.sort((a: any, b: any) => a - b)
|
||||
.forEach((index: any) => {
|
||||
result.push(logs.value[index] as log_line);
|
||||
Array.from(visibleIndexes)
|
||||
.sort((a, b) => a - b)
|
||||
.forEach((index) => {
|
||||
result.push({
|
||||
log: logs.value[index] as log_line,
|
||||
isMatch: matchedIndexes.has(index),
|
||||
isContext: !matchedIndexes.has(index),
|
||||
});
|
||||
});
|
||||
|
||||
return result;
|
||||
});
|
||||
|
||||
const fetchLogs = async () => {
|
||||
const matchCount = computed(() => filteredLogs.value.filter((entry) => entry.isMatch).length);
|
||||
|
||||
const fetchLogs = async (): Promise<void> => {
|
||||
loading.value = true;
|
||||
|
||||
if (reachedEnd.value || query.value) {
|
||||
if (reachedEnd.value || (hasActiveFilter.value && logs.value.length > 0)) {
|
||||
loading.value = false;
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -250,7 +307,6 @@ const fetchLogs = async () => {
|
|||
}
|
||||
|
||||
const lines = response.logs ?? [];
|
||||
|
||||
if (lines.length) {
|
||||
logs.value.unshift(...response.logs);
|
||||
}
|
||||
|
|
@ -268,15 +324,15 @@ const fetchLogs = async () => {
|
|||
bottomMarker.value.scrollIntoView({ behavior: 'auto' });
|
||||
}
|
||||
});
|
||||
} catch (err) {
|
||||
console.error('Failed to fetch logs:', err);
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch logs:', error);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const handleScroll = () => {
|
||||
if (!logContainer.value || query.value) {
|
||||
const handleScroll = (): void => {
|
||||
if (!logContainer.value || hasActiveFilter.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -299,21 +355,15 @@ const handleScroll = () => {
|
|||
}
|
||||
};
|
||||
|
||||
const scrollToBottom = (fast = false) => {
|
||||
const scrollToBottom = (fast = false): void => {
|
||||
autoScroll.value = true;
|
||||
nextTick(() => {
|
||||
if (bottomMarker.value) {
|
||||
bottomMarker.value.scrollIntoView({ behavior: fast ? 'auto' : 'smooth' });
|
||||
}
|
||||
bottomMarker.value?.scrollIntoView({ behavior: fast ? 'auto' : 'smooth' });
|
||||
});
|
||||
};
|
||||
|
||||
const handleStreamMessage = (event: EventSourceMessage) => {
|
||||
if ('log_lines' !== event.event) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!event.data) {
|
||||
const handleStreamMessage = (event: EventSourceMessage): void => {
|
||||
if (event.event !== 'log_lines' || !event.data) {
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -337,7 +387,7 @@ const handleStreamMessage = (event: EventSourceMessage) => {
|
|||
});
|
||||
};
|
||||
|
||||
const startLogStream = async () => {
|
||||
const startLogStream = async (): Promise<void> => {
|
||||
sseController.value?.abort();
|
||||
const controller = new AbortController();
|
||||
sseController.value = controller;
|
||||
|
|
@ -354,6 +404,7 @@ const startLogStream = async () => {
|
|||
if (response.ok) {
|
||||
return;
|
||||
}
|
||||
|
||||
let message = response.statusText || 'Failed to start log stream.';
|
||||
try {
|
||||
message = await parse_api_error(response.clone().json());
|
||||
|
|
@ -367,6 +418,7 @@ const startLogStream = async () => {
|
|||
message = response.statusText || 'Failed to start log stream.';
|
||||
}
|
||||
}
|
||||
|
||||
throw new Error(message);
|
||||
},
|
||||
onmessage: handleStreamMessage,
|
||||
|
|
@ -374,6 +426,7 @@ const startLogStream = async () => {
|
|||
if (controller.signal.aborted) {
|
||||
return;
|
||||
}
|
||||
|
||||
console.error('Log stream error:', error);
|
||||
},
|
||||
});
|
||||
|
|
@ -388,21 +441,159 @@ const startLogStream = async () => {
|
|||
}
|
||||
};
|
||||
|
||||
const logTimeLabel = (value?: string): string =>
|
||||
value ? moment(value).format('HH:mm:ss') : '--:--:--';
|
||||
|
||||
const logTimeTitle = (value?: string): string =>
|
||||
value ? moment(value).format('YYYY-MM-DD HH:mm:ss Z') : 'No timestamp';
|
||||
|
||||
const detectLogTone = (line: string): LogTone => {
|
||||
const normalized = line.toLowerCase();
|
||||
|
||||
if (/error|failed|exception|traceback|fatal/.test(normalized)) {
|
||||
return 'error';
|
||||
}
|
||||
|
||||
if (/warn|deprecated|retry/.test(normalized)) {
|
||||
return 'warning';
|
||||
}
|
||||
|
||||
if (/info|started|connected|listening|ready/.test(normalized)) {
|
||||
return 'info';
|
||||
}
|
||||
|
||||
return 'default';
|
||||
};
|
||||
|
||||
const logRowClass = (entry: FilteredLogEntry, index: number): string[] => {
|
||||
const classes = ['log-row', `log-row--${detectLogTone(entry.log.line)}`];
|
||||
|
||||
if (entry.isMatch) {
|
||||
classes.push('log-row--match');
|
||||
return classes;
|
||||
}
|
||||
|
||||
if (entry.isContext) {
|
||||
classes.push('log-row--context');
|
||||
return classes;
|
||||
}
|
||||
|
||||
if (index % 2 === 1) {
|
||||
classes.push('log-row--alt');
|
||||
}
|
||||
|
||||
return classes;
|
||||
};
|
||||
|
||||
onMounted(async () => {
|
||||
if (!config.app.file_logging) {
|
||||
await navigateTo('/');
|
||||
return;
|
||||
}
|
||||
|
||||
disableOpacity();
|
||||
await fetchLogs();
|
||||
await startLogStream();
|
||||
if (bg_enable.value) {
|
||||
document.querySelector('body')?.setAttribute('style', `opacity: 1.0`);
|
||||
}
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
sseController.value?.abort();
|
||||
if (bg_enable.value) {
|
||||
document.querySelector('body')?.setAttribute('style', `opacity: ${bg_opacity.value}`);
|
||||
enableOpacity();
|
||||
|
||||
if (scrollTimeout) {
|
||||
clearTimeout(scrollTimeout);
|
||||
scrollTimeout = null;
|
||||
}
|
||||
if (scrollTimeout) clearTimeout(scrollTimeout);
|
||||
});
|
||||
|
||||
useHead({ title: 'Logs' });
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.logbox {
|
||||
min-width: 100%;
|
||||
min-height: 55vh;
|
||||
max-height: 60vh;
|
||||
background: transparent;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.log-row {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 0.75rem;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 0.75rem;
|
||||
padding: 0.625rem 0.75rem;
|
||||
background: var(--ui-bg);
|
||||
transition:
|
||||
background-color 0.15s ease,
|
||||
border-color 0.15s ease;
|
||||
}
|
||||
|
||||
.log-row--alt {
|
||||
background: var(--ui-bg-elevated);
|
||||
}
|
||||
|
||||
.log-row--match {
|
||||
border-color: color-mix(in oklab, var(--ui-warning) 35%, transparent);
|
||||
background: color-mix(in oklab, var(--ui-warning) 12%, var(--ui-bg) 88%);
|
||||
}
|
||||
|
||||
.log-row--context {
|
||||
border-color: color-mix(in oklab, var(--ui-border) 75%, transparent);
|
||||
background: color-mix(in oklab, var(--ui-bg-muted) 30%, var(--ui-bg) 70%);
|
||||
}
|
||||
|
||||
.log-row:hover {
|
||||
border-color: var(--ui-border-accented);
|
||||
background: color-mix(in oklab, var(--ui-bg-elevated) 65%, var(--ui-bg-muted) 35%);
|
||||
}
|
||||
|
||||
.log-timestamp {
|
||||
display: inline-flex;
|
||||
min-width: 4.75rem;
|
||||
flex-shrink: 0;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 0.5rem;
|
||||
border: 1px solid color-mix(in oklab, var(--ui-border) 80%, transparent);
|
||||
background: color-mix(in oklab, var(--ui-bg-muted) 50%, var(--ui-bg) 50%);
|
||||
padding: 0.2rem 0.55rem;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: var(--ui-text-toned);
|
||||
}
|
||||
|
||||
.log-line {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.log-line--wrap {
|
||||
white-space: pre-wrap;
|
||||
overflow-wrap: anywhere;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.log-line--nowrap {
|
||||
min-width: max-content;
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
.log-row--default .log-line {
|
||||
color: var(--ui-text-highlighted);
|
||||
}
|
||||
|
||||
.log-row--info .log-line {
|
||||
color: color-mix(in oklab, var(--ui-info) 55%, var(--ui-text-highlighted) 45%);
|
||||
}
|
||||
|
||||
.log-row--warning .log-line {
|
||||
color: color-mix(in oklab, var(--ui-warning) 60%, var(--ui-text-highlighted) 40%);
|
||||
}
|
||||
|
||||
.log-row--error .log-line {
|
||||
color: color-mix(in oklab, var(--ui-error) 70%, var(--ui-text-highlighted) 30%);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,219 +1,195 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="mt-1 columns is-multiline">
|
||||
<div class="column is-12 is-clearfix is-unselectable">
|
||||
<span class="title is-4">
|
||||
<span class="icon-text">
|
||||
<template v-if="toggleForm">
|
||||
<span class="icon"
|
||||
><i class="fa-solid" :class="{ 'fa-edit': targetRef, 'fa-plus': !targetRef }"
|
||||
/></span>
|
||||
<span>{{ targetRef ? `Edit - ${target.name}` : 'Add new notification target' }}</span>
|
||||
</template>
|
||||
<template v-else>
|
||||
<span class="icon"><i class="fa-solid fa-paper-plane" /></span>
|
||||
<main class="w-full min-w-0 max-w-full space-y-4">
|
||||
<div class="flex flex-col gap-3 xl:flex-row xl:items-start xl:justify-between">
|
||||
<div class="min-w-0 space-y-1">
|
||||
<div class="flex items-center gap-2 text-lg font-semibold text-highlighted">
|
||||
<UIcon name="i-lucide-bell" class="size-5 text-toned" />
|
||||
<span>Notifications</span>
|
||||
</template>
|
||||
</span>
|
||||
</span>
|
||||
<div class="is-pulled-right" v-if="!toggleForm">
|
||||
<div class="field is-grouped">
|
||||
<p
|
||||
class="control has-icons-left"
|
||||
v-if="toggleFilter && notifications && notifications.length > 0"
|
||||
>
|
||||
<input
|
||||
type="search"
|
||||
v-model.lazy="query"
|
||||
class="input"
|
||||
id="filter"
|
||||
placeholder="Filter displayed content"
|
||||
/>
|
||||
<span class="icon is-left"><i class="fas fa-filter" /></span>
|
||||
</p>
|
||||
|
||||
<p class="control" v-if="notifications && notifications.length > 0">
|
||||
<button class="button is-danger is-light" @click="toggleFilter = !toggleFilter">
|
||||
<span class="icon"><i class="fas fa-filter" /></span>
|
||||
<span v-if="!isMobile">Filter</span>
|
||||
</button>
|
||||
</p>
|
||||
|
||||
<p class="control">
|
||||
<button
|
||||
class="button is-primary"
|
||||
@click="
|
||||
resetForm(false);
|
||||
toggleForm = true;
|
||||
"
|
||||
v-tooltip="'Add new notification target.'"
|
||||
>
|
||||
<span class="icon"><i class="fas fa-add" /></span>
|
||||
<span v-if="!isMobile">New Notification</span>
|
||||
</button>
|
||||
</p>
|
||||
<p class="control" v-if="notifications.length > 0">
|
||||
<button
|
||||
class="button is-warning"
|
||||
@click="sendTest"
|
||||
v-tooltip="'Send test notification.'"
|
||||
:class="{ 'is-loading': sendingTest }"
|
||||
:disabled="!notifications.length || sendingTest"
|
||||
>
|
||||
<span class="icon"><i class="fas fa-paper-plane" /></span>
|
||||
<span v-if="!isMobile">Send Test</span>
|
||||
</button>
|
||||
</p>
|
||||
<p class="control" v-if="notifications.length > 0">
|
||||
<button
|
||||
v-tooltip.bottom="'Change display style'"
|
||||
class="button has-tooltip-bottom"
|
||||
@click="() => (display_style = display_style === 'list' ? 'grid' : 'list')"
|
||||
>
|
||||
<span class="icon">
|
||||
<i
|
||||
class="fa-solid"
|
||||
:class="{
|
||||
'fa-table': display_style !== 'list',
|
||||
'fa-table-list': display_style === 'list',
|
||||
}"
|
||||
/></span>
|
||||
<span v-if="!isMobile">
|
||||
{{ display_style === 'list' ? 'List' : 'Grid' }}
|
||||
</span>
|
||||
</button>
|
||||
</p>
|
||||
|
||||
<p class="control" v-if="notifications.length > 0">
|
||||
<button
|
||||
class="button is-info"
|
||||
@click="loadContent(page)"
|
||||
:class="{ 'is-loading': isLoading }"
|
||||
:disabled="isLoading || notifications.length < 1"
|
||||
>
|
||||
<span class="icon"><i class="fas fa-refresh" /></span>
|
||||
<span v-if="!isMobile">Reload</span>
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="is-hidden-mobile" v-if="!toggleForm">
|
||||
<span class="subtitle">
|
||||
|
||||
<p class="text-sm text-toned">
|
||||
Send notifications to your webhooks based on specified events or presets.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap items-center justify-end gap-2">
|
||||
<div v-if="showFilter && notifications.length > 0" class="relative w-full sm:w-80">
|
||||
<span
|
||||
class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-toned"
|
||||
>
|
||||
<UIcon name="i-lucide-filter" class="size-4" />
|
||||
</span>
|
||||
<input
|
||||
id="filter"
|
||||
ref="filterInput"
|
||||
v-model="query"
|
||||
type="search"
|
||||
placeholder="Filter displayed content"
|
||||
class="w-full rounded-md border border-default bg-elevated py-2 pr-3 pl-9 text-sm text-default outline-none transition focus:border-primary"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<UButton
|
||||
v-if="notifications.length > 0"
|
||||
color="neutral"
|
||||
:variant="showFilter ? 'soft' : 'outline'"
|
||||
size="sm"
|
||||
icon="i-lucide-filter"
|
||||
@click="toggleFilterPanel"
|
||||
>
|
||||
<span v-if="!isMobile">Filter</span>
|
||||
</UButton>
|
||||
|
||||
<UButton
|
||||
color="neutral"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
icon="i-lucide-plus"
|
||||
@click="openCreate"
|
||||
>
|
||||
<span v-if="!isMobile">New Notification</span>
|
||||
</UButton>
|
||||
|
||||
<UButton
|
||||
v-if="notifications.length > 0"
|
||||
color="neutral"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
icon="i-lucide-send"
|
||||
:loading="sendingTest"
|
||||
:disabled="sendingTest"
|
||||
@click="() => void sendTest()"
|
||||
>
|
||||
<span v-if="!isMobile">Send Test</span>
|
||||
</UButton>
|
||||
|
||||
<UButton
|
||||
v-if="notifications.length > 0"
|
||||
color="neutral"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
:icon="displayStyle === 'list' ? 'i-lucide-list' : 'i-lucide-grid-2x2'"
|
||||
@click="toggleDisplayStyle"
|
||||
>
|
||||
<span v-if="!isMobile">{{ displayStyle === 'list' ? 'List' : 'Grid' }}</span>
|
||||
</UButton>
|
||||
|
||||
<UButton
|
||||
v-if="notifications.length > 0"
|
||||
color="neutral"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
icon="i-lucide-refresh-cw"
|
||||
:loading="isLoading"
|
||||
:disabled="isLoading"
|
||||
@click="() => void reloadContent()"
|
||||
>
|
||||
<span v-if="!isMobile">Reload</span>
|
||||
</UButton>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column is-12" v-if="!toggleForm && paging?.total_pages > 1">
|
||||
<Pager
|
||||
v-if="paging?.total_pages > 1"
|
||||
:page="paging.page"
|
||||
:last_page="paging.total_pages"
|
||||
:isLoading="isLoading"
|
||||
@navigate="
|
||||
async (newPage) => {
|
||||
page = newPage;
|
||||
await loadContent(newPage);
|
||||
}
|
||||
"
|
||||
@navigate="navigatePage"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="column is-12" v-if="toggleForm">
|
||||
<NotificationForm
|
||||
:addInProgress="addInProgress"
|
||||
:reference="targetRef"
|
||||
:item="target"
|
||||
@cancel="resetForm(true)"
|
||||
@submit="updateItem"
|
||||
:allowedEvents="allowedEvents"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="columns is-multiline"
|
||||
v-if="!isLoading && !toggleForm && filteredTargets && filteredTargets.length > 0"
|
||||
v-if="displayStyle === 'list' && filteredTargets.length > 0"
|
||||
class="w-full min-w-0 max-w-full overflow-hidden rounded-lg border border-default bg-default"
|
||||
>
|
||||
<template v-if="'list' === display_style">
|
||||
<div class="column is-12">
|
||||
<div class="table-container">
|
||||
<table
|
||||
class="table is-striped is-hoverable is-fullwidth is-bordered"
|
||||
style="min-width: 850px; table-layout: fixed"
|
||||
>
|
||||
<thead>
|
||||
<tr class="has-text-centered is-unselectable">
|
||||
<th width="80%">
|
||||
<span class="icon"><i class="fa-solid fa-paper-plane" /></span>
|
||||
<span>Targets</span>
|
||||
</th>
|
||||
<th width="20%">
|
||||
<span class="icon"><i class="fa-solid fa-gear" /></span>
|
||||
<span>Actions</span>
|
||||
</th>
|
||||
<div class="w-full max-w-full overflow-x-auto overscroll-x-contain">
|
||||
<table class="min-w-225 w-full text-sm">
|
||||
<thead class="bg-muted/40 text-xs uppercase tracking-wide text-toned">
|
||||
<tr class="text-center [&>th]:px-3 [&>th]:py-3 [&>th]:font-semibold">
|
||||
<th class="w-full text-left">Targets</th>
|
||||
<th class="w-[1%]">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="item in filteredTargets" :key="item.id">
|
||||
<td class="is-text-overflow is-vcentered">
|
||||
<div class="is-bold">
|
||||
|
||||
<tbody class="divide-y divide-default">
|
||||
<tr v-for="item in filteredTargets" :key="item.id" class="hover:bg-muted/20">
|
||||
<td class="px-3 py-3 align-middle">
|
||||
<div class="space-y-2">
|
||||
<div class="min-w-0 text-sm font-semibold text-highlighted">
|
||||
{{ item.request.method.toUpperCase() }}({{ ucFirst(item.request.type) }}) @
|
||||
<NuxtLink target="_blank" :href="item.request.url">{{ item.name }}</NuxtLink>
|
||||
</div>
|
||||
<div class="is-unselectable">
|
||||
<span class="icon-text">
|
||||
<span class="icon"><i class="fa-solid fa-list-ul" /></span>
|
||||
<span>On: {{ join_events(item.on) }}</span>
|
||||
</span>
|
||||
|
||||
<span class="icon-text">
|
||||
<span class="icon"><i class="fa-solid fa-sliders" /></span>
|
||||
<span>Presets: {{ join_presets(item.presets) }}</span>
|
||||
</span>
|
||||
|
||||
<span class="icon-text is-clickable" @click="toggleEnabled(item)">
|
||||
<span
|
||||
class="icon"
|
||||
:class="item.enabled ? 'has-text-success' : 'has-text-danger'"
|
||||
v-tooltip="
|
||||
`Notification is ${item.enabled !== false ? 'enabled' : 'disabled'}. Click to toggle.`
|
||||
"
|
||||
<a
|
||||
:href="item.request.url"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
class="break-all text-primary hover:underline"
|
||||
>
|
||||
<i class="fa-solid fa-power-off" />
|
||||
{{ item.name }}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap items-center gap-3 text-xs text-toned">
|
||||
<button
|
||||
type="button"
|
||||
class="inline-flex items-center gap-1 rounded-md border border-default px-2 py-1 transition hover:border-primary hover:text-default"
|
||||
:disabled="addInProgress"
|
||||
@click="() => void toggleEnabled(item)"
|
||||
>
|
||||
<UIcon
|
||||
name="i-lucide-power"
|
||||
class="size-3.5"
|
||||
:class="item.enabled !== false ? 'text-success' : 'text-error'"
|
||||
/>
|
||||
<span>{{ item.enabled !== false ? 'Enabled' : 'Disabled' }}</span>
|
||||
</button>
|
||||
|
||||
<span class="inline-flex items-center gap-1">
|
||||
<UIcon name="i-lucide-bell-ring" class="size-3.5" />
|
||||
<span>On: {{ joinEvents(item.on) }}</span>
|
||||
</span>
|
||||
<span>{{ item.enabled ? 'Enabled' : 'Disabled' }}</span>
|
||||
|
||||
<span class="inline-flex items-center gap-1">
|
||||
<UIcon name="i-lucide-sliders-horizontal" class="size-3.5" />
|
||||
<span>Presets: {{ joinPresets(item.presets) }}</span>
|
||||
</span>
|
||||
|
||||
<span v-if="headerKeys(item).length > 0" class="inline-flex items-center gap-1">
|
||||
<UIcon name="i-lucide-key" class="size-3.5" />
|
||||
<span>Headers: {{ headerKeys(item).join(', ') }}</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="is-vcentered is-items-center">
|
||||
<div class="field is-grouped is-grouped-centered">
|
||||
<div class="control">
|
||||
<button
|
||||
class="button is-info is-small is-fullwidth"
|
||||
|
||||
<td class="w-[1%] px-3 py-3 align-middle whitespace-nowrap">
|
||||
<div class="flex items-center justify-end gap-2">
|
||||
<UButton
|
||||
color="info"
|
||||
variant="outline"
|
||||
size="xs"
|
||||
icon="i-lucide-file-up"
|
||||
@click="exportItem(item)"
|
||||
>
|
||||
<span class="icon"><i class="fa-solid fa-file-export" /></span>
|
||||
<span v-if="!isMobile">Export</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="control">
|
||||
<button
|
||||
class="button is-warning is-small is-fullwidth"
|
||||
</UButton>
|
||||
|
||||
<UButton
|
||||
color="warning"
|
||||
variant="outline"
|
||||
size="xs"
|
||||
icon="i-lucide-pencil"
|
||||
@click="editItem(item)"
|
||||
>
|
||||
<span class="icon"><i class="fa-solid fa-edit" /></span>
|
||||
<span v-if="!isMobile">Edit</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="control">
|
||||
<button
|
||||
class="button is-danger is-small is-fullwidth"
|
||||
@click="deleteItem(item)"
|
||||
</UButton>
|
||||
|
||||
<UButton
|
||||
color="error"
|
||||
variant="outline"
|
||||
size="xs"
|
||||
icon="i-lucide-trash"
|
||||
@click="() => void deleteItem(item)"
|
||||
>
|
||||
<span class="icon"><i class="fa-solid fa-trash" /></span>
|
||||
<span v-if="!isMobile">Delete</span>
|
||||
</button>
|
||||
</div>
|
||||
</UButton>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
|
@ -221,154 +197,211 @@
|
|||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="column is-6 is-12-mobile" v-for="item in filteredTargets" :key="item.id">
|
||||
<div class="card is-flex is-full-height is-flex-direction-column">
|
||||
<header class="card-header">
|
||||
<div class="card-header-title is-text-overflow is-block">
|
||||
{{ item.request.method.toUpperCase() }}({{ ucFirst(item.request.type) }}) @
|
||||
<NuxtLink target="_blank" :href="item.request.url">{{ item.name }}</NuxtLink>
|
||||
</div>
|
||||
<div class="card-header-icon">
|
||||
<div class="field is-grouped">
|
||||
<div class="control" @click="toggleEnabled(item)">
|
||||
<span
|
||||
class="icon"
|
||||
:class="item.enabled ? 'has-text-success' : 'has-text-danger'"
|
||||
v-tooltip="
|
||||
`Notification is ${item.enabled !== false ? 'enabled' : 'disabled'}. Click to toggle.`
|
||||
"
|
||||
|
||||
<div v-else-if="filteredTargets.length > 0" class="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
|
||||
<UCard
|
||||
v-for="item in filteredTargets"
|
||||
:key="item.id"
|
||||
class="flex h-full flex-col border bg-default"
|
||||
:ui="{ header: 'p-4 pb-3', body: 'flex flex-1 flex-col gap-4 p-4 pt-0' }"
|
||||
>
|
||||
<i class="fa-solid fa-power-off" />
|
||||
<template #header>
|
||||
<div class="flex items-start justify-between gap-3">
|
||||
<div class="min-w-0 flex-1 space-y-2">
|
||||
<span class="text-sm font-semibold text-highlighted">
|
||||
{{ item.request.method.toUpperCase() }}({{ ucFirst(item.request.type) }})
|
||||
</span>
|
||||
</div>
|
||||
<div class="control">
|
||||
@
|
||||
<a
|
||||
class="has-text-info"
|
||||
v-tooltip="'Export target.'"
|
||||
@click.prevent="exportItem(item)"
|
||||
:href="item.request.url"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
class="text-sm text-primary hover:underline"
|
||||
>
|
||||
<span class="icon"><i class="fa-solid fa-file-export" /></span>
|
||||
{{ item.name }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="card-content is-flex-grow-1">
|
||||
<div class="content">
|
||||
<p>
|
||||
<span class="icon"><i class="fa-solid fa-list-ul" /></span>
|
||||
<span>On: {{ join_events(item.on) }}</span>
|
||||
</p>
|
||||
<p>
|
||||
<span class="icon"><i class="fa-solid fa-sliders" /></span>
|
||||
<span>Presets: {{ join_presets(item.presets) }}</span>
|
||||
</p>
|
||||
<p v-if="item.request?.headers && item.request.headers.length > 0">
|
||||
<span class="icon"><i class="fa-solid fa-heading" /></span>
|
||||
<span>Headers: {{ item.request.headers.map((h) => h.key).join(', ') }}</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer mt-auto">
|
||||
<div class="card-footer-item">
|
||||
<button class="button is-warning is-fullwidth" @click="editItem(item)">
|
||||
<span class="icon"><i class="fa-solid fa-edit" /></span>
|
||||
<span>Edit</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="card-footer-item">
|
||||
<button class="button is-danger is-fullwidth" @click="deleteItem(item)">
|
||||
<span class="icon"><i class="fa-solid fa-trash" /></span>
|
||||
<span>Delete</span>
|
||||
|
||||
<div class="flex flex-wrap items-center gap-2 text-xs text-toned">
|
||||
<button
|
||||
type="button"
|
||||
class="inline-flex items-center gap-1 rounded-md border border-default px-2 py-1 transition hover:border-primary hover:text-default"
|
||||
:disabled="addInProgress"
|
||||
@click="() => void toggleEnabled(item)"
|
||||
>
|
||||
<UIcon
|
||||
name="i-lucide-power"
|
||||
class="size-3.5"
|
||||
:class="item.enabled !== false ? 'text-success' : 'text-error'"
|
||||
/>
|
||||
<span>{{ item.enabled !== false ? 'Enabled' : 'Disabled' }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<UButton
|
||||
color="info"
|
||||
variant="ghost"
|
||||
size="xs"
|
||||
icon="i-lucide-file-up"
|
||||
square
|
||||
@click="exportItem(item)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="space-y-2 text-sm text-default">
|
||||
<div class="rounded-md border border-default bg-muted/20 px-3 py-2">
|
||||
<div class="flex items-start gap-2">
|
||||
<UIcon name="i-lucide-bell-ring" class="mt-0.5 size-4 shrink-0 text-toned" />
|
||||
<span class="wrap-break-word">On: {{ joinEvents(item.on) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rounded-md border border-default bg-muted/20 px-3 py-2">
|
||||
<div class="flex items-start gap-2">
|
||||
<UIcon name="i-lucide-sliders-horizontal" class="mt-0.5 size-4 shrink-0 text-toned" />
|
||||
<span class="wrap-break-word">Presets: {{ joinPresets(item.presets) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="columns is-multiline"
|
||||
v-if="!toggleForm && (isLoading || !filteredTargets || filteredTargets.length < 1)"
|
||||
v-if="headerKeys(item).length > 0"
|
||||
class="rounded-md border border-default bg-muted/20 px-3 py-2"
|
||||
>
|
||||
<div class="column is-12">
|
||||
<Message v-if="isLoading" class="is-info" title="Loading" icon="fas fa-spinner fa-spin">
|
||||
Loading data. Please wait...
|
||||
</Message>
|
||||
<Message
|
||||
<div class="flex items-start gap-2">
|
||||
<UIcon name="i-lucide-key" class="mt-0.5 size-4 shrink-0 text-toned" />
|
||||
<span class="wrap-break-word">Headers: {{ headerKeys(item).join(', ') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-auto grid gap-2 pt-2 sm:grid-cols-2">
|
||||
<UButton
|
||||
color="warning"
|
||||
variant="outline"
|
||||
icon="i-lucide-pencil"
|
||||
class="w-full justify-center"
|
||||
@click="editItem(item)"
|
||||
>
|
||||
Edit
|
||||
</UButton>
|
||||
|
||||
<UButton
|
||||
color="error"
|
||||
variant="outline"
|
||||
icon="i-lucide-trash"
|
||||
class="w-full justify-center"
|
||||
@click="() => void deleteItem(item)"
|
||||
>
|
||||
Delete
|
||||
</UButton>
|
||||
</div>
|
||||
</UCard>
|
||||
</div>
|
||||
|
||||
<UAlert
|
||||
v-if="isLoading"
|
||||
color="info"
|
||||
variant="soft"
|
||||
icon="i-lucide-loader-circle"
|
||||
title="Loading"
|
||||
description="Loading data. Please wait..."
|
||||
/>
|
||||
|
||||
<div v-else-if="query && filteredTargets.length < 1" class="space-y-3">
|
||||
<UAlert
|
||||
color="warning"
|
||||
variant="soft"
|
||||
icon="i-lucide-search"
|
||||
title="No Results"
|
||||
class="is-warning"
|
||||
icon="fas fa-search"
|
||||
v-else-if="query"
|
||||
:useClose="true"
|
||||
@close="query = ''"
|
||||
>
|
||||
<p>
|
||||
No results found for the query: <code>{{ query }}</code
|
||||
>.
|
||||
</p>
|
||||
<p>Please try a different search term.</p>
|
||||
</Message>
|
||||
<Message v-else title="No targets" class="is-warning" icon="fas fa-exclamation-circle">
|
||||
No notification targets found. Click on the
|
||||
<span class="icon"><i class="fas fa-add" /></span>
|
||||
<strong>New Notification</strong> button to add your first notification target.
|
||||
</Message>
|
||||
</div>
|
||||
:description="`No results found for the query: ${query}. Please try a different search term.`"
|
||||
/>
|
||||
|
||||
<UButton color="neutral" variant="outline" size="sm" @click="query = ''">
|
||||
Clear filter
|
||||
</UButton>
|
||||
</div>
|
||||
|
||||
<UAlert
|
||||
v-else-if="!filteredTargets.length"
|
||||
color="warning"
|
||||
variant="soft"
|
||||
icon="i-lucide-circle-alert"
|
||||
title="No targets"
|
||||
description="No notification targets found. Click on the New Notification button to add your first notification target."
|
||||
/>
|
||||
|
||||
<div
|
||||
class="columns is-multiline"
|
||||
v-if="!toggleForm && filteredTargets && filteredTargets.length > 0"
|
||||
v-if="!query && filteredTargets.length > 0"
|
||||
class="rounded-lg border border-info/30 bg-info/10 p-4 text-sm text-default"
|
||||
>
|
||||
<div class="column is-12">
|
||||
<Message class="is-info" :body_class="'pl-0'">
|
||||
<ul>
|
||||
<ul class="list-disc space-y-2 pl-5 text-sm text-default">
|
||||
<li>
|
||||
When you export notification target, We remove <code>Authorization</code> header key
|
||||
by default, However this might not be enough to remove credentials from the exported
|
||||
data. it's your responsibility to ensure that the exported data does not contain any
|
||||
sensitive information for sharing.
|
||||
When you export notification target, We remove <code>Authorization</code> header key by
|
||||
default, However this might not be enough to remove credentials from the exported data.
|
||||
it's your responsibility to ensure that the exported data does not contain any sensitive
|
||||
information for sharing.
|
||||
</li>
|
||||
<li>
|
||||
When you set the request type as <code>Form</code>, the event data will be JSON
|
||||
encoded and sent as <code>...&data_key=json_string</code>, only the
|
||||
<code>data</code> field will be JSON encoded. The other keys <code>id</code>,
|
||||
<code>event</code> and <code>created_at</code> will be sent as they are.
|
||||
When you set the request type as <code>Form</code>, the event data will be JSON encoded
|
||||
and sent as <code>...&data_key=json_string</code>, only the <code>data</code> field
|
||||
will be JSON encoded. The other keys <code>id</code>, <code>event</code> and
|
||||
<code>created_at</code> will be sent as they are.
|
||||
</li>
|
||||
<li>
|
||||
We also send two special headers <code>X-Event-ID</code> and <code>X-Event</code> with
|
||||
the request.
|
||||
We also send two special headers <code>X-Event-ID</code> and <code>X-Event</code> with the
|
||||
request.
|
||||
</li>
|
||||
<li>
|
||||
If you have selected specific presets or events, this will take priority, For example,
|
||||
if you limited the target to <code>default</code> preset and selected
|
||||
<code>ALL</code> events, only events that reference the <code>default</code> preset
|
||||
will be sent to that target. Like wise, if you have limited both events and presets,
|
||||
then ONLY events that satisfy both conditions will be sent to that target. Only the
|
||||
If you have selected specific presets or events, this will take priority, For example, if
|
||||
you limited the target to <code>default</code> preset and selected
|
||||
<code>ALL</code> events, only events that reference the <code>default</code> preset will
|
||||
be sent to that target. Like wise, if you have limited both events and presets, then ONLY
|
||||
events that satisfy both conditions will be sent to that target. Only the
|
||||
<code>test</code> events can bypass these conditions.
|
||||
</li>
|
||||
</ul>
|
||||
</Message>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<UModal
|
||||
v-if="editorOpen"
|
||||
:open="editorOpen"
|
||||
:title="modalTitle"
|
||||
:description="modalDescription"
|
||||
:dismissible="!addInProgress"
|
||||
:ui="{ content: 'w-full sm:max-w-5xl', body: 'max-h-[85vh] overflow-y-auto p-4 sm:p-6' }"
|
||||
@update:open="(open) => !open && closeEditor()"
|
||||
>
|
||||
<template #body>
|
||||
<NotificationForm
|
||||
:key="modalKey"
|
||||
:addInProgress="addInProgress"
|
||||
:reference="targetRef"
|
||||
:item="target"
|
||||
:allowedEvents="allowedEvents"
|
||||
@cancel="closeEditor()"
|
||||
@submit="updateItem"
|
||||
/>
|
||||
</template>
|
||||
</UModal>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useStorage } from '@vueuse/core';
|
||||
import type { notification } from '~/types/notification';
|
||||
import { useConfirm } from '~/composables/useConfirm';
|
||||
import { useNotifications } from '~/composables/useNotifications';
|
||||
import { copyText, encode, parse_api_error, request, ucFirst } from '~/utils';
|
||||
import type { ImportedItem } from '~/types';
|
||||
import type { notification } from '~/types/notification';
|
||||
|
||||
const toast = useNotification();
|
||||
const box = useConfirm();
|
||||
const display_style = useStorage<string>('notification_display_style', 'cards');
|
||||
const isMobile = useMediaQuery({ maxWidth: 1024 });
|
||||
const displayStyleState = useStorage<'list' | 'grid' | 'cards'>(
|
||||
'notification_display_style',
|
||||
'cards',
|
||||
);
|
||||
|
||||
const notificationsStore = useNotifications();
|
||||
const notifications = notificationsStore.notifications;
|
||||
|
|
@ -380,47 +413,100 @@ const lastError = notificationsStore.lastError;
|
|||
|
||||
const page = ref(1);
|
||||
const targetRef = ref<number | undefined>(undefined);
|
||||
const toggleForm = ref(false);
|
||||
const target = ref<notification>(defaultState());
|
||||
const editorOpen = ref(false);
|
||||
const sendingTest = ref(false);
|
||||
const query = ref('');
|
||||
const showFilter = ref(false);
|
||||
const filterInput = ref<HTMLInputElement | null>(null);
|
||||
|
||||
const defaultState = (): notification => ({
|
||||
const displayStyle = computed<'list' | 'grid'>(() =>
|
||||
displayStyleState.value === 'list' ? 'list' : 'grid',
|
||||
);
|
||||
|
||||
const modalTitle = computed(() =>
|
||||
targetRef.value ? `Edit - ${target.value.name}` : 'Add new notification target',
|
||||
);
|
||||
const modalDescription = computed(
|
||||
() => 'Send notifications to your webhooks based on specified events or presets.',
|
||||
);
|
||||
const modalKey = computed(
|
||||
() => `${targetRef.value ?? 'new'}-${editorOpen.value ? 'open' : 'closed'}`,
|
||||
);
|
||||
|
||||
const filteredTargets = computed<notification[]>(() => {
|
||||
const normalizedQuery = query.value?.toLowerCase();
|
||||
const items = notifications.value as notification[];
|
||||
|
||||
if (!normalizedQuery) {
|
||||
return items;
|
||||
}
|
||||
|
||||
return items.filter((item) => deepIncludes(item, normalizedQuery, new WeakSet()));
|
||||
});
|
||||
|
||||
watch(showFilter, (value) => {
|
||||
if (!value) {
|
||||
query.value = '';
|
||||
}
|
||||
});
|
||||
|
||||
function defaultState(): notification {
|
||||
return {
|
||||
name: '',
|
||||
on: [],
|
||||
presets: [],
|
||||
enabled: true,
|
||||
request: { method: 'POST', url: '', type: 'json', headers: [], data_key: 'data' },
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
const target = ref<notification>(defaultState());
|
||||
const query = ref<string>('');
|
||||
const toggleFilter = ref(false);
|
||||
|
||||
const filteredTargets = computed<notification[]>(() => {
|
||||
const q = query.value?.toLowerCase();
|
||||
const items = notifications.value.map((item) => ({ ...item })) as notification[];
|
||||
if (!q) return items;
|
||||
return items.filter((item: notification) => deepIncludes(item, q, new WeakSet()));
|
||||
});
|
||||
|
||||
watch(toggleFilter, (val) => {
|
||||
if (!val) {
|
||||
const toggleFilterPanel = async (): Promise<void> => {
|
||||
showFilter.value = !showFilter.value;
|
||||
if (!showFilter.value) {
|
||||
query.value = '';
|
||||
return;
|
||||
}
|
||||
});
|
||||
|
||||
const loadContent = async (pageNumber = page.value) => {
|
||||
await nextTick();
|
||||
filterInput.value?.focus();
|
||||
};
|
||||
|
||||
const loadContent = async (pageNumber = page.value): Promise<void> => {
|
||||
page.value = pageNumber;
|
||||
await notificationsStore.loadNotifications(pageNumber);
|
||||
};
|
||||
|
||||
const resetForm = (closeForm = false) => {
|
||||
target.value = defaultState();
|
||||
targetRef.value = undefined;
|
||||
if (closeForm) {
|
||||
toggleForm.value = false;
|
||||
}
|
||||
const reloadContent = async (): Promise<void> => {
|
||||
await loadContent(page.value);
|
||||
};
|
||||
|
||||
const deleteItem = async (item: notification) => {
|
||||
const navigatePage = async (newPage: number): Promise<void> => {
|
||||
await loadContent(newPage);
|
||||
};
|
||||
|
||||
const resetEditor = (): void => {
|
||||
target.value = defaultState();
|
||||
targetRef.value = undefined;
|
||||
};
|
||||
|
||||
const closeEditor = (): void => {
|
||||
editorOpen.value = false;
|
||||
resetEditor();
|
||||
};
|
||||
|
||||
const openCreate = (): void => {
|
||||
resetEditor();
|
||||
editorOpen.value = true;
|
||||
};
|
||||
|
||||
const editItem = (item: notification): void => {
|
||||
target.value = JSON.parse(JSON.stringify(item)) as notification;
|
||||
targetRef.value = item.id ?? undefined;
|
||||
editorOpen.value = true;
|
||||
};
|
||||
|
||||
const deleteItem = async (item: notification): Promise<void> => {
|
||||
if (true !== (await box.confirm(`Delete '${item.name}'?`))) {
|
||||
return;
|
||||
}
|
||||
|
|
@ -433,7 +519,7 @@ const deleteItem = async (item: notification) => {
|
|||
await notificationsStore.deleteNotification(item.id);
|
||||
};
|
||||
|
||||
const toggleEnabled = async (item: notification) => {
|
||||
const toggleEnabled = async (item: notification): Promise<void> => {
|
||||
if (!item.id) {
|
||||
toast.error('Notification target not found.');
|
||||
return;
|
||||
|
|
@ -448,7 +534,7 @@ const updateItem = async ({
|
|||
}: {
|
||||
reference: number | undefined;
|
||||
item: notification;
|
||||
}) => {
|
||||
}): Promise<void> => {
|
||||
if (reference) {
|
||||
await notificationsStore.updateNotification(reference, item);
|
||||
} else {
|
||||
|
|
@ -456,22 +542,24 @@ const updateItem = async ({
|
|||
}
|
||||
|
||||
if (!lastError.value) {
|
||||
resetForm(true);
|
||||
closeEditor();
|
||||
}
|
||||
};
|
||||
|
||||
const editItem = (item: notification) => {
|
||||
target.value = JSON.parse(JSON.stringify(item)) as notification;
|
||||
targetRef.value = item.id ?? undefined;
|
||||
toggleForm.value = true;
|
||||
const toggleDisplayStyle = (): void => {
|
||||
displayStyleState.value = displayStyle.value === 'list' ? 'grid' : 'list';
|
||||
};
|
||||
|
||||
const join_events = (events: Array<string>) =>
|
||||
!events || events.length < 1 ? 'ALL' : events.map((e) => ucFirst(e)).join(', ');
|
||||
const join_presets = (presets: Array<string>) =>
|
||||
!presets || presets.length < 1 ? 'ALL' : presets.map((e) => ucFirst(e)).join(', ');
|
||||
const joinEvents = (events: string[]): string =>
|
||||
!events || events.length < 1 ? 'ALL' : events.map((event) => ucFirst(event)).join(', ');
|
||||
|
||||
const sendTest = async () => {
|
||||
const joinPresets = (presets: string[]): string =>
|
||||
!presets || presets.length < 1 ? 'ALL' : presets.map((preset) => ucFirst(preset)).join(', ');
|
||||
|
||||
const headerKeys = (item: notification): string[] =>
|
||||
item.request?.headers?.map((header) => header.key).filter(Boolean) ?? [];
|
||||
|
||||
const sendTest = async (): Promise<void> => {
|
||||
if (true !== (await box.confirm('Send test notification?'))) {
|
||||
return;
|
||||
}
|
||||
|
|
@ -489,7 +577,6 @@ const sendTest = async () => {
|
|||
|
||||
toast.success('Test notification sent.');
|
||||
} catch (error: any) {
|
||||
console.error(error);
|
||||
const message = error?.message || 'Unknown error';
|
||||
toast.error(`Failed to send test notification. ${message}`);
|
||||
} finally {
|
||||
|
|
@ -497,9 +584,7 @@ const sendTest = async () => {
|
|||
}
|
||||
};
|
||||
|
||||
onMounted(async () => await notificationsStore.loadNotifications(page.value));
|
||||
|
||||
const exportItem = async (item: notification) => {
|
||||
const exportItem = async (item: notification): Promise<void> => {
|
||||
const data: notification & ImportedItem = {
|
||||
...JSON.parse(JSON.stringify(item)),
|
||||
_type: 'notification',
|
||||
|
|
@ -507,19 +592,21 @@ const exportItem = async (item: notification) => {
|
|||
};
|
||||
|
||||
const keys = ['id', 'raw'];
|
||||
keys.forEach((k) => {
|
||||
if (Object.prototype.hasOwnProperty.call(data, k)) {
|
||||
const { [k]: _, ...rest } = data as any;
|
||||
keys.forEach((key) => {
|
||||
if (Object.prototype.hasOwnProperty.call(data, key)) {
|
||||
const { [key]: _, ...rest } = data as Record<string, unknown>;
|
||||
Object.assign(data, rest);
|
||||
}
|
||||
});
|
||||
|
||||
if (data.request?.headers?.length) {
|
||||
data.request.headers = data.request.headers.filter(
|
||||
(h) => 'authorization' !== h.key.toLowerCase(),
|
||||
(header) => 'authorization' !== header.key.toLowerCase(),
|
||||
);
|
||||
}
|
||||
|
||||
copyText(encode(data));
|
||||
};
|
||||
|
||||
onMounted(async () => await loadContent(page.value));
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,179 +1,150 @@
|
|||
<template>
|
||||
<main>
|
||||
<div class="mt-1 columns is-multiline">
|
||||
<div class="column is-12 is-clearfix is-unselectable">
|
||||
<span class="title is-4">
|
||||
<span class="icon-text">
|
||||
<template v-if="toggleForm">
|
||||
<span class="icon"
|
||||
><i class="fa-solid" :class="{ 'fa-edit': presetRef, 'fa-plus': !presetRef }"
|
||||
/></span>
|
||||
<span>{{ presetRef ? `Edit - ${prettyName(preset.name || '')}` : 'Add' }}</span>
|
||||
</template>
|
||||
<template v-else>
|
||||
<span class="icon"><i class="fa-solid fa-sliders" /></span>
|
||||
<main class="w-full min-w-0 max-w-full space-y-4">
|
||||
<div class="flex flex-col gap-3 xl:flex-row xl:items-start xl:justify-between">
|
||||
<div class="min-w-0 space-y-1">
|
||||
<div class="flex items-center gap-2 text-lg font-semibold text-highlighted">
|
||||
<UIcon name="i-lucide-sliders-horizontal" class="size-5 text-toned" />
|
||||
<span>Presets</span>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<p class="text-sm text-toned">
|
||||
Presets are pre-defined command options for yt-dlp that you want to apply to given
|
||||
download.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap items-center justify-end gap-2">
|
||||
<div v-if="showFilter && presetsNoDefault.length > 0" class="relative w-full sm:w-80">
|
||||
<span
|
||||
class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-toned"
|
||||
>
|
||||
<UIcon name="i-lucide-filter" class="size-4" />
|
||||
</span>
|
||||
</span>
|
||||
<div class="is-pulled-right" v-if="!toggleForm">
|
||||
<div class="field is-grouped">
|
||||
<p class="control has-icons-left" v-if="toggleFilter && presets && presets.length > 0">
|
||||
<input
|
||||
type="search"
|
||||
v-model.lazy="query"
|
||||
class="input"
|
||||
id="filter"
|
||||
ref="filterInput"
|
||||
v-model="query"
|
||||
type="search"
|
||||
placeholder="Filter displayed content"
|
||||
class="w-full rounded-md border border-default bg-elevated py-2 pr-3 pl-9 text-sm text-default outline-none transition focus:border-primary"
|
||||
/>
|
||||
<span class="icon is-left"><i class="fas fa-filter" /></span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p class="control" v-if="presets && presets.length > 0">
|
||||
<button class="button is-danger is-light" @click="toggleFilter = !toggleFilter">
|
||||
<span class="icon"><i class="fas fa-filter" /></span>
|
||||
<UButton
|
||||
v-if="presetsNoDefault.length > 0"
|
||||
color="neutral"
|
||||
:variant="showFilter ? 'soft' : 'outline'"
|
||||
size="sm"
|
||||
icon="i-lucide-filter"
|
||||
@click="toggleFilterPanel"
|
||||
>
|
||||
<span v-if="!isMobile">Filter</span>
|
||||
</button>
|
||||
</p>
|
||||
</UButton>
|
||||
|
||||
<p class="control">
|
||||
<button
|
||||
class="button is-primary"
|
||||
@click="
|
||||
resetForm(false);
|
||||
toggleForm = !toggleForm;
|
||||
"
|
||||
v-tooltip.bottom="'Toggle add form'"
|
||||
<UButton
|
||||
color="neutral"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
icon="i-lucide-plus"
|
||||
@click="editor.openCreate()"
|
||||
>
|
||||
<span class="icon"><i class="fas fa-add" /></span>
|
||||
<span v-if="!isMobile">New Preset</span>
|
||||
</button>
|
||||
</p>
|
||||
</UButton>
|
||||
|
||||
<p class="control">
|
||||
<button
|
||||
v-tooltip.bottom="'Change display style'"
|
||||
class="button has-tooltip-bottom"
|
||||
@click="() => (display_style = display_style === 'list' ? 'grid' : 'list')"
|
||||
<UButton
|
||||
color="neutral"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
:icon="display_style === 'list' ? 'i-lucide-list' : 'i-lucide-grid-2x2'"
|
||||
@click="toggleDisplayStyle"
|
||||
>
|
||||
<span class="icon">
|
||||
<i
|
||||
class="fa-solid"
|
||||
:class="{
|
||||
'fa-table': display_style !== 'list',
|
||||
'fa-table-list': display_style === 'list',
|
||||
}"
|
||||
/></span>
|
||||
<span v-if="!isMobile">
|
||||
{{ display_style === 'list' ? 'List' : 'Grid' }}
|
||||
</span>
|
||||
</button>
|
||||
</p>
|
||||
<span v-if="!isMobile">{{ display_style === 'list' ? 'List' : 'Grid' }}</span>
|
||||
</UButton>
|
||||
|
||||
<p class="control">
|
||||
<button
|
||||
class="button is-info"
|
||||
@click="reloadContent()"
|
||||
:class="{ 'is-loading': isLoading }"
|
||||
<UButton
|
||||
v-if="presets.length > 0"
|
||||
color="neutral"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
icon="i-lucide-refresh-cw"
|
||||
:loading="isLoading"
|
||||
:disabled="isLoading"
|
||||
v-if="presets && presets.length > 0"
|
||||
@click="() => void reloadContent()"
|
||||
>
|
||||
<span class="icon"><i class="fas fa-refresh" /></span>
|
||||
<span v-if="!isMobile">Reload</span>
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="is-hidden-mobile" v-if="!toggleForm">
|
||||
<span class="subtitle"
|
||||
>Presets are pre-defined command options for yt-dlp that you want to apply to given
|
||||
download.</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns" v-if="toggleForm">
|
||||
<div class="column is-12">
|
||||
<PresetForm
|
||||
:addInProgress="addInProgress"
|
||||
:reference="presetRef"
|
||||
:preset="preset"
|
||||
@cancel="resetForm(true)"
|
||||
@submit="updateItem"
|
||||
:presets="presets"
|
||||
/>
|
||||
</UButton>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template v-if="!toggleForm">
|
||||
<div
|
||||
class="columns is-multiline"
|
||||
v-if="!isLoading && presetsNoDefault && presetsNoDefault.length > 0"
|
||||
v-if="display_style === 'list' && filteredPresets.length > 0"
|
||||
class="w-full min-w-0 max-w-full overflow-hidden rounded-lg border border-default bg-default"
|
||||
>
|
||||
<template v-if="'list' === display_style">
|
||||
<div class="column is-12">
|
||||
<div class="table-container">
|
||||
<table
|
||||
class="table is-striped is-hoverable is-fullwidth is-bordered"
|
||||
style="min-width: 650px; table-layout: fixed"
|
||||
>
|
||||
<thead>
|
||||
<tr class="has-text-centered is-unselectable">
|
||||
<th width="80%">Preset</th>
|
||||
<th width="20%">Actions</th>
|
||||
<div class="w-full max-w-full overflow-x-auto overscroll-x-contain">
|
||||
<table class="min-w-190 w-full text-sm">
|
||||
<thead class="bg-muted/40 text-xs uppercase tracking-wide text-toned">
|
||||
<tr class="text-center [&>th]:px-3 [&>th]:py-3 [&>th]:font-semibold">
|
||||
<th class="w-full text-left">Preset</th>
|
||||
<th class="w-[1%]">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="item in filteredPresets" :key="item.id">
|
||||
<td class="is-text-overflow is-vcentered">
|
||||
<div class="is-text-overflow is-bold">
|
||||
|
||||
<tbody class="divide-y divide-default">
|
||||
<tr v-for="item in filteredPresets" :key="item.id" class="hover:bg-muted/20">
|
||||
<td class="px-3 py-3 align-middle">
|
||||
<div class="space-y-1">
|
||||
<div class="font-semibold text-highlighted">
|
||||
{{ prettyName(item.name) }}
|
||||
</div>
|
||||
<div class="is-unselectable">
|
||||
<span class="icon-text" :class="{ 'has-text-primary': item.cookies }">
|
||||
<span class="icon"><i class="fa-solid fa-cookie" /></span>
|
||||
|
||||
<div class="flex flex-wrap items-center gap-3 text-xs text-toned">
|
||||
<span
|
||||
class="inline-flex items-center gap-1"
|
||||
:class="item.cookies ? 'text-info' : ''"
|
||||
>
|
||||
<UIcon name="i-lucide-cookie" class="size-3.5" />
|
||||
<span>{{ item.cookies ? 'Has cookies' : 'No cookies' }}</span>
|
||||
</span>
|
||||
|
||||
<template v-if="item.priority > 0">
|
||||
|
||||
<span class="icon-text">
|
||||
<span class="icon"><i class="fa-solid fa-sort-numeric-down" /></span>
|
||||
|
||||
<span v-if="item.priority > 0" class="inline-flex items-center gap-1">
|
||||
<UIcon name="i-lucide-list-ordered" class="size-3.5" />
|
||||
<span>Priority: {{ item.priority }}</span>
|
||||
</span>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="is-vcentered is-items-center">
|
||||
<div class="field is-grouped is-grouped-centered">
|
||||
<div class="control">
|
||||
<button
|
||||
class="button is-info is-small is-fullwidth"
|
||||
|
||||
<td class="w-[1%] px-3 py-3 align-middle whitespace-nowrap">
|
||||
<div class="flex items-center justify-end gap-2">
|
||||
<UButton
|
||||
color="info"
|
||||
variant="outline"
|
||||
size="xs"
|
||||
icon="i-lucide-file-up"
|
||||
@click="exportItem(item)"
|
||||
>
|
||||
<span class="icon"><i class="fa-solid fa-file-export" /></span>
|
||||
<span v-if="!isMobile">Export</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="control">
|
||||
<button
|
||||
class="button is-warning is-small is-fullwidth"
|
||||
@click="editItem(item)"
|
||||
</UButton>
|
||||
|
||||
<UButton
|
||||
color="warning"
|
||||
variant="outline"
|
||||
size="xs"
|
||||
icon="i-lucide-pencil"
|
||||
@click="editor.openEdit(item)"
|
||||
>
|
||||
<span class="icon"><i class="fa-solid fa-cog" /></span>
|
||||
<span v-if="!isMobile">Edit</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="control">
|
||||
<button
|
||||
class="button is-danger is-small is-fullwidth"
|
||||
@click="deleteItem(item)"
|
||||
</UButton>
|
||||
|
||||
<UButton
|
||||
color="error"
|
||||
variant="outline"
|
||||
size="xs"
|
||||
icon="i-lucide-trash"
|
||||
@click="() => void deleteItem(item)"
|
||||
>
|
||||
<span class="icon"><i class="fa-solid fa-trash" /></span>
|
||||
<span v-if="!isMobile">Delete</span>
|
||||
</button>
|
||||
</div>
|
||||
</UButton>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
|
@ -181,168 +152,189 @@
|
|||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<div class="column is-6" v-for="item in filteredPresets" :key="item.id">
|
||||
<div class="card is-flex is-full-height is-flex-direction-column">
|
||||
<header class="card-header">
|
||||
<div
|
||||
class="card-header-title is-block is-clickable"
|
||||
:class="{ 'is-text-overflow': !isExpanded(item.id, 'title') }"
|
||||
<div v-else-if="filteredPresets.length > 0" class="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
|
||||
<UCard
|
||||
v-for="item in filteredPresets"
|
||||
:key="item.id"
|
||||
class="flex h-full flex-col border bg-default"
|
||||
:ui="{ header: 'p-4 pb-3', body: 'flex flex-1 flex-col gap-4 p-4 pt-0' }"
|
||||
>
|
||||
<template #header>
|
||||
<div class="flex items-start justify-between gap-3">
|
||||
<button
|
||||
type="button"
|
||||
class="min-w-0 flex-1 text-left text-sm font-semibold text-highlighted"
|
||||
@click="toggleExpand(item.id, 'title')"
|
||||
:title="!isExpanded(item.id, 'title') ? 'Click to expand' : 'Click to collapse'"
|
||||
v-text="prettyName(item.name)"
|
||||
>
|
||||
<span
|
||||
:class="
|
||||
!isExpanded(item.id, 'title') ? 'block truncate' : 'block whitespace-pre-wrap'
|
||||
"
|
||||
>
|
||||
{{ prettyName(item.name) }}
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<UButton
|
||||
color="info"
|
||||
variant="ghost"
|
||||
size="xs"
|
||||
icon="i-lucide-file-up"
|
||||
square
|
||||
@click="exportItem(item)"
|
||||
/>
|
||||
<div class="card-header-icon">
|
||||
<div class="field is-grouped">
|
||||
<div class="control" v-if="item.priority > 0">
|
||||
<span class="tag is-dark">
|
||||
<span class="icon"><i class="fa-solid fa-sort-numeric-down" /></span>
|
||||
<span v-text="item.priority" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap items-center gap-2 text-xs text-toned">
|
||||
<span
|
||||
class="inline-flex items-center gap-1 rounded-md border border-default px-2 py-1"
|
||||
:class="item.cookies ? 'border-info/40 text-info' : ''"
|
||||
>
|
||||
<UIcon name="i-lucide-cookie" class="size-3.5" />
|
||||
<span>{{ item.cookies ? 'Has cookies' : 'No cookies' }}</span>
|
||||
</span>
|
||||
|
||||
<span
|
||||
v-if="item.priority > 0"
|
||||
class="inline-flex items-center gap-1 rounded-md border border-default px-2 py-1"
|
||||
>
|
||||
<UIcon name="i-lucide-list-ordered" class="size-3.5" />
|
||||
<span>Priority {{ item.priority }}</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="control" v-if="item.cookies" v-tooltip="'This preset has cookies'">
|
||||
<span class="icon has-text-primary"><i class="fa-solid fa-cookie" /></span>
|
||||
</div>
|
||||
<div class="control">
|
||||
</template>
|
||||
|
||||
<div class="space-y-2 text-sm text-default">
|
||||
<button
|
||||
class="has-text-info"
|
||||
v-tooltip="'Export preset'"
|
||||
@click="exportItem(item)"
|
||||
>
|
||||
<span class="icon"><i class="fa-solid fa-file-export" /></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="card-content is-flex-grow-1">
|
||||
<div class="content">
|
||||
<template v-if="item.priority > 0">
|
||||
<p>
|
||||
<span class="icon"><i class="fa-solid fa-sort-numeric-down" /></span>
|
||||
<span>Priority: {{ item.priority }}</span>
|
||||
</p>
|
||||
</template>
|
||||
<p
|
||||
:class="{
|
||||
'is-text-overflow': !isExpanded(item.id, 'folder'),
|
||||
'is-clickable': true,
|
||||
}"
|
||||
v-if="item.folder"
|
||||
type="button"
|
||||
class="flex w-full items-start gap-2 rounded-md border border-default bg-muted/20 px-3 py-2 text-left"
|
||||
@click="toggleExpand(item.id, 'folder')"
|
||||
:title="
|
||||
!isExpanded(item.id, 'folder') ? 'Click to expand' : 'Click to collapse'
|
||||
"
|
||||
>
|
||||
<span class="icon"><i class="fa-solid fa-save" /></span>
|
||||
<span>{{ calcPath(item.folder) }}</span>
|
||||
</p>
|
||||
<p
|
||||
:class="{
|
||||
'is-text-overflow': !isExpanded(item.id, 'template'),
|
||||
'is-clickable': true,
|
||||
}"
|
||||
<UIcon name="i-lucide-folder-output" class="mt-0.5 size-4 shrink-0 text-toned" />
|
||||
<span :class="expandClass(item.id, 'folder')">{{ calcPath(item.folder) }}</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
v-if="item.template"
|
||||
type="button"
|
||||
class="flex w-full items-start gap-2 rounded-md border border-default bg-muted/20 px-3 py-2 text-left"
|
||||
@click="toggleExpand(item.id, 'template')"
|
||||
:title="
|
||||
!isExpanded(item.id, 'template') ? 'Click to expand' : 'Click to collapse'
|
||||
"
|
||||
>
|
||||
<span class="icon"><i class="fa-solid fa-file" /></span>
|
||||
<span>{{ item.template }}</span>
|
||||
</p>
|
||||
<p
|
||||
:class="{
|
||||
'is-text-overflow': !isExpanded(item.id, 'cli'),
|
||||
'is-clickable': true,
|
||||
}"
|
||||
<UIcon name="i-lucide-file-code-2" class="mt-0.5 size-4 shrink-0 text-toned" />
|
||||
<span :class="expandClass(item.id, 'template')">{{ item.template }}</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
v-if="item.cli"
|
||||
type="button"
|
||||
class="flex w-full items-start gap-2 rounded-md border border-default bg-muted/20 px-3 py-2 text-left"
|
||||
@click="toggleExpand(item.id, 'cli')"
|
||||
:title="!isExpanded(item.id, 'cli') ? 'Click to expand' : 'Click to collapse'"
|
||||
>
|
||||
<span class="icon"><i class="fa-solid fa-terminal" /></span>
|
||||
<span>{{ item.cli }}</span>
|
||||
</p>
|
||||
<p
|
||||
:class="{
|
||||
'is-text-overflow': !isExpanded(item.id, 'description'),
|
||||
'is-clickable': true,
|
||||
}"
|
||||
<UIcon name="i-lucide-terminal" class="mt-0.5 size-4 shrink-0 text-toned" />
|
||||
<span :class="expandClass(item.id, 'cli')">{{ item.cli }}</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
v-if="item.description"
|
||||
type="button"
|
||||
class="flex w-full items-start gap-2 rounded-md border border-default bg-muted/20 px-3 py-2 text-left"
|
||||
@click="toggleExpand(item.id, 'description')"
|
||||
:title="!isExpanded(item.id, 'cli') ? 'Click to expand' : 'Click to collapse'"
|
||||
>
|
||||
<span class="icon"><i class="fa-solid fa-d" /></span>
|
||||
<span>{{ item.description }}</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="card-content content m-1 p-1 is-overflow-auto"
|
||||
style="max-height: 300px"
|
||||
v-if="item?.toggle_description"
|
||||
>
|
||||
<div class="is-pre-wrap">{{ item.description }}</div>
|
||||
</div>
|
||||
<div class="card-footer mt-auto">
|
||||
<div class="card-footer-item">
|
||||
<button class="button is-warning is-fullwidth" @click="editItem(item)">
|
||||
<span class="icon"><i class="fa-solid fa-edit" /></span>
|
||||
<span>Edit</span>
|
||||
<UIcon name="i-lucide-align-left" class="mt-0.5 size-4 shrink-0 text-toned" />
|
||||
<span :class="expandClass(item.id, 'description')">{{ item.description }}</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="card-footer-item">
|
||||
<button class="button is-danger is-fullwidth" @click="deleteItem(item)">
|
||||
<span class="icon"><i class="fa-solid fa-trash" /></span>
|
||||
<span>Delete</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="columns is-multiline"
|
||||
v-if="!toggleForm && (isLoading || !filteredPresets || filteredPresets.length < 1)"
|
||||
<div class="mt-auto grid gap-2 pt-2 sm:grid-cols-2">
|
||||
<UButton
|
||||
color="warning"
|
||||
variant="outline"
|
||||
icon="i-lucide-pencil"
|
||||
class="w-full justify-center"
|
||||
@click="editor.openEdit(item)"
|
||||
>
|
||||
<div class="column is-12">
|
||||
<Message v-if="isLoading" class="is-info" title="Loading" icon="fas fa-spinner fa-spin">
|
||||
Loading data. Please wait...
|
||||
</Message>
|
||||
<Message
|
||||
Edit
|
||||
</UButton>
|
||||
|
||||
<UButton
|
||||
color="error"
|
||||
variant="outline"
|
||||
icon="i-lucide-trash"
|
||||
class="w-full justify-center"
|
||||
@click="() => void deleteItem(item)"
|
||||
>
|
||||
Delete
|
||||
</UButton>
|
||||
</div>
|
||||
</UCard>
|
||||
</div>
|
||||
|
||||
<UAlert
|
||||
v-if="isLoading"
|
||||
color="info"
|
||||
variant="soft"
|
||||
icon="i-lucide-loader-circle"
|
||||
title="Loading"
|
||||
description="Loading data. Please wait..."
|
||||
/>
|
||||
|
||||
<div v-else-if="query && filteredPresets.length < 1" class="space-y-3">
|
||||
<UAlert
|
||||
color="warning"
|
||||
variant="soft"
|
||||
icon="i-lucide-search"
|
||||
title="No Results"
|
||||
class="is-warning"
|
||||
icon="fas fa-search"
|
||||
v-else-if="query"
|
||||
:useClose="true"
|
||||
@close="query = ''"
|
||||
:description="`No results found for the query: ${query}. Please try a different search term.`"
|
||||
/>
|
||||
|
||||
<UButton color="neutral" variant="outline" size="sm" @click="query = ''"
|
||||
>Clear filter</UButton
|
||||
>
|
||||
<p>
|
||||
No results found for the query: <code>{{ query }}</code
|
||||
>.
|
||||
</p>
|
||||
<p>Please try a different search term.</p>
|
||||
</Message>
|
||||
<Message v-else title="No presets" class="is-warning" icon="fas fa-exclamation-circle">
|
||||
There are no custom defined presets.
|
||||
</Message>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns is-multiline" v-if="!query && presets && presets.length > 0">
|
||||
<div class="column is-12">
|
||||
<Message class="is-info">
|
||||
<span class="icon"><i class="fas fa-info-circle" /></span>
|
||||
When you <b>export</b> preset, it doesn't include the <code>cookies</code> field
|
||||
contents for security reasons.
|
||||
</Message>
|
||||
</div>
|
||||
</div>
|
||||
<UAlert
|
||||
v-else-if="!filteredPresets.length"
|
||||
color="warning"
|
||||
variant="soft"
|
||||
icon="i-lucide-circle-alert"
|
||||
title="No presets"
|
||||
description="There are no custom defined presets."
|
||||
/>
|
||||
|
||||
<UAlert v-if="!query && presets.length > 0" color="info" variant="soft">
|
||||
<template #description>
|
||||
<ul class="list-disc space-y-2 pl-5 text-sm text-default">
|
||||
<li>
|
||||
When you export preset, it doesn't include the cookies field contents for security
|
||||
reasons.
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
</UAlert>
|
||||
|
||||
<UModal
|
||||
v-if="editor.isOpen.value"
|
||||
:open="editor.isOpen.value"
|
||||
:title="editor.modalTitle.value"
|
||||
:description="editor.modalDescription.value"
|
||||
:dismissible="!editor.addInProgress.value"
|
||||
:ui="{ content: 'w-full sm:max-w-6xl', body: 'max-h-[85vh] overflow-y-auto p-4 sm:p-6' }"
|
||||
@update:open="(open) => !open && void editor.requestClose()"
|
||||
>
|
||||
<template #body>
|
||||
<PresetForm
|
||||
:key="editor.modalKey.value"
|
||||
:addInProgress="editor.addInProgress.value"
|
||||
:reference="editor.reference.value"
|
||||
:preset="editor.preset.value"
|
||||
:presets="presets"
|
||||
@cancel="() => void editor.requestClose()"
|
||||
@submit="editor.submit"
|
||||
/>
|
||||
</template>
|
||||
</UModal>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
|
|
@ -350,7 +342,6 @@
|
|||
import { useStorage } from '@vueuse/core';
|
||||
import type { Preset } from '~/types/presets';
|
||||
import { useConfirm } from '~/composables/useConfirm';
|
||||
import { usePresets } from '~/composables/usePresets';
|
||||
import { prettyName } from '~/utils';
|
||||
|
||||
type PresetWithUI = Preset & { raw?: boolean; toggle_description?: boolean };
|
||||
|
|
@ -358,72 +349,54 @@ type PresetWithUI = Preset & { raw?: boolean; toggle_description?: boolean };
|
|||
const presetsStore = usePresets();
|
||||
const config = useConfigStore();
|
||||
const box = useConfirm();
|
||||
const editor = usePresetEditor();
|
||||
|
||||
const display_style = useStorage<string>('preset_display_style', 'cards');
|
||||
const display_style = useStorage<string>('preset_display_style', 'grid');
|
||||
const isMobile = useMediaQuery({ maxWidth: 1024 });
|
||||
|
||||
const query = ref<string>('');
|
||||
const toggleFilter = ref(false);
|
||||
const query = ref('');
|
||||
const showFilter = ref(false);
|
||||
const filterInput = ref<HTMLInputElement | null>(null);
|
||||
|
||||
const presets = presetsStore.presets as Ref<PresetWithUI[]>;
|
||||
const preset = ref<Partial<Preset>>({});
|
||||
const presetRef = ref<number | null>(null);
|
||||
const toggleForm = ref(false);
|
||||
const presets = computed(() => presetsStore.presets.value as PresetWithUI[]);
|
||||
const isLoading = presetsStore.isLoading;
|
||||
const addInProgress = presetsStore.addInProgress;
|
||||
const remove_keys = ['raw', 'toggle_description'];
|
||||
const expandedItems = ref<Record<string, Set<string>>>({});
|
||||
|
||||
const presetsNoDefault = computed(() => presets.value.filter((t) => !t.default));
|
||||
const presetsNoDefault = computed(() => presets.value.filter((item) => !item.default));
|
||||
|
||||
const filteredPresets = computed<PresetWithUI[]>(() => {
|
||||
const q = query.value?.toLowerCase();
|
||||
if (!q) return presetsNoDefault.value;
|
||||
return presetsNoDefault.value.filter((item: PresetWithUI) =>
|
||||
deepIncludes(item, q, new WeakSet()),
|
||||
const normalizedQuery = query.value?.toLowerCase();
|
||||
if (!normalizedQuery) {
|
||||
return presetsNoDefault.value;
|
||||
}
|
||||
|
||||
return presetsNoDefault.value.filter((item) =>
|
||||
deepIncludes(item, normalizedQuery, new WeakSet()),
|
||||
);
|
||||
});
|
||||
|
||||
const toggleExpand = (itemId: number | string | undefined, field: string) => {
|
||||
if (itemId === undefined || itemId === null) return;
|
||||
const key = String(itemId);
|
||||
|
||||
if (!expandedItems.value[key]) {
|
||||
expandedItems.value[key] = new Set();
|
||||
}
|
||||
|
||||
if (expandedItems.value[key].has(field)) {
|
||||
expandedItems.value[key].delete(field);
|
||||
} else {
|
||||
expandedItems.value[key].add(field);
|
||||
}
|
||||
};
|
||||
|
||||
const isExpanded = (itemId: number | string | undefined, field: string): boolean => {
|
||||
if (itemId === undefined || itemId === null) return false;
|
||||
const key = String(itemId);
|
||||
return expandedItems.value[key]?.has(field) ?? false;
|
||||
};
|
||||
|
||||
watch(toggleFilter, (val) => {
|
||||
if (!val) {
|
||||
watch(showFilter, (value) => {
|
||||
if (!value) {
|
||||
query.value = '';
|
||||
}
|
||||
});
|
||||
|
||||
const reloadContent = async () => {
|
||||
const toggleFilterPanel = async (): Promise<void> => {
|
||||
showFilter.value = !showFilter.value;
|
||||
if (!showFilter.value) {
|
||||
query.value = '';
|
||||
return;
|
||||
}
|
||||
|
||||
await nextTick();
|
||||
filterInput.value?.focus();
|
||||
};
|
||||
|
||||
const reloadContent = async (): Promise<void> => {
|
||||
await presetsStore.loadPresets(1, 1000);
|
||||
};
|
||||
|
||||
const resetForm = (closeForm = false) => {
|
||||
preset.value = {};
|
||||
presetRef.value = null;
|
||||
if (closeForm) {
|
||||
toggleForm.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const deleteItem = async (item: Preset) => {
|
||||
const deleteItem = async (item: Preset): Promise<void> => {
|
||||
if (true !== (await box.confirm(`Delete preset '${item.name}'?`))) {
|
||||
return;
|
||||
}
|
||||
|
|
@ -433,44 +406,40 @@ const deleteItem = async (item: Preset) => {
|
|||
}
|
||||
};
|
||||
|
||||
const updateItem = async ({
|
||||
reference,
|
||||
preset: item,
|
||||
}: {
|
||||
reference: number | null;
|
||||
preset: Preset;
|
||||
}) => {
|
||||
item = cleanObject(item, remove_keys) as Preset;
|
||||
if (reference) {
|
||||
const updated = await presetsStore.updatePreset(reference, item);
|
||||
if (updated) {
|
||||
resetForm(true);
|
||||
const toggleDisplayStyle = (): void => {
|
||||
display_style.value = display_style.value === 'list' ? 'grid' : 'list';
|
||||
};
|
||||
|
||||
const toggleExpand = (itemId: number | string | undefined, field: string): void => {
|
||||
if (itemId === undefined || itemId === null) {
|
||||
return;
|
||||
}
|
||||
|
||||
const key = String(itemId);
|
||||
if (!expandedItems.value[key]) {
|
||||
expandedItems.value[key] = new Set();
|
||||
}
|
||||
|
||||
if (expandedItems.value[key]?.has(field)) {
|
||||
expandedItems.value[key]?.delete(field);
|
||||
} else {
|
||||
const created = await presetsStore.createPreset(item);
|
||||
if (created) {
|
||||
resetForm(true);
|
||||
}
|
||||
expandedItems.value[key]?.add(field);
|
||||
}
|
||||
};
|
||||
|
||||
const filterItem = (item: Preset) => {
|
||||
const rest = cleanObject(item, remove_keys);
|
||||
if ('default' in rest) {
|
||||
delete rest.default;
|
||||
const isExpanded = (itemId: number | string | undefined, field: string): boolean => {
|
||||
if (itemId === undefined || itemId === null) {
|
||||
return false;
|
||||
}
|
||||
return JSON.stringify(rest, null, 2);
|
||||
|
||||
return expandedItems.value[String(itemId)]?.has(field) ?? false;
|
||||
};
|
||||
|
||||
const editItem = (item: Preset) => {
|
||||
preset.value = JSON.parse(filterItem(item));
|
||||
presetRef.value = item.id ?? null;
|
||||
toggleForm.value = true;
|
||||
const expandClass = (itemId: number | string | undefined, field: string): string => {
|
||||
return isExpanded(itemId, field) ? 'whitespace-pre-wrap break-words' : 'truncate';
|
||||
};
|
||||
|
||||
onMounted(async () => await reloadContent());
|
||||
|
||||
const exportItem = (item: Preset) => {
|
||||
const exportItem = (item: Preset): void => {
|
||||
const excludedKeys = ['id', 'default', 'raw', 'cookies', 'toggle_description'];
|
||||
const userData = Object.fromEntries(
|
||||
Object.entries(JSON.parse(JSON.stringify(item))).filter(
|
||||
|
|
@ -485,7 +454,9 @@ const exportItem = (item: Preset) => {
|
|||
};
|
||||
|
||||
const calcPath = (path?: string): string => {
|
||||
const loc = config.app.download_path || '/downloads';
|
||||
return path ? loc + '/' + sTrim(path, '/') : loc;
|
||||
const location = config.app.download_path || '/downloads';
|
||||
return path ? location + '/' + sTrim(path, '/') : location;
|
||||
};
|
||||
|
||||
onMounted(async () => await reloadContent());
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,161 +1,194 @@
|
|||
<template>
|
||||
<main>
|
||||
<div class="mt-1 columns is-multiline">
|
||||
<div class="column is-12 is-clearfix is-unselectable">
|
||||
<span class="title is-4">
|
||||
<span class="icon-text">
|
||||
<template v-if="isEditorOpen">
|
||||
<span class="icon"><i class="fa-solid fa-pen-to-square" /></span>
|
||||
<span>{{ editorTitle }}</span>
|
||||
</template>
|
||||
<template v-else>
|
||||
<span class="icon"><i class="fa-solid fa-diagram-project" /></span>
|
||||
<main class="w-full min-w-0 max-w-full space-y-4">
|
||||
<div class="flex flex-col gap-3 xl:flex-row xl:items-start xl:justify-between">
|
||||
<div class="min-w-0 space-y-1">
|
||||
<div class="flex items-center gap-2 text-lg font-semibold text-highlighted">
|
||||
<UIcon name="i-lucide-workflow" class="size-5 text-toned" />
|
||||
<span>Task Definitions</span>
|
||||
</template>
|
||||
</span>
|
||||
</span>
|
||||
<div class="is-pulled-right" v-if="!isEditorOpen">
|
||||
<div class="field is-grouped">
|
||||
<p class="control">
|
||||
<button
|
||||
class="button is-primary"
|
||||
@click="isEditorOpen ? closeEditor() : openCreate()"
|
||||
>
|
||||
<span class="icon"><i class="fa-solid fa-add" /></span>
|
||||
<span v-if="!isMobile">New Definition</span>
|
||||
</button>
|
||||
</p>
|
||||
|
||||
<p class="control">
|
||||
<button @click="() => (inspect = true)" class="button is-warning">
|
||||
<span class="icon"><i class="fa-solid fa-magnifying-glass" /></span>
|
||||
<span v-if="!isMobile">Inspect</span>
|
||||
</button>
|
||||
</p>
|
||||
|
||||
<p class="control">
|
||||
<button
|
||||
v-tooltip.bottom="'Change display style'"
|
||||
class="button has-tooltip-bottom"
|
||||
@click="() => (display_style = display_style === 'list' ? 'grid' : 'list')"
|
||||
>
|
||||
<span class="icon">
|
||||
<i
|
||||
class="fa-solid"
|
||||
:class="{
|
||||
'fa-table': display_style !== 'list',
|
||||
'fa-table-list': display_style === 'list',
|
||||
}"
|
||||
/></span>
|
||||
<span v-if="!isMobile">
|
||||
{{ display_style === 'list' ? 'List' : 'Grid' }}
|
||||
</span>
|
||||
</button>
|
||||
</p>
|
||||
|
||||
<p class="control">
|
||||
<button
|
||||
class="button is-info"
|
||||
@click="async () => await loadDefinitions()"
|
||||
:class="{ 'is-loading': isLoading }"
|
||||
>
|
||||
<span class="icon"><i class="fas fa-refresh" /></span>
|
||||
<span v-if="!isMobile">Reload</span>
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="is-hidden-mobile" v-if="!isEditorOpen">
|
||||
<span class="subtitle">
|
||||
|
||||
<p class="text-sm text-toned">
|
||||
Create definitions to turn any website into a downloadable feed of links.
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap items-center justify-end gap-2">
|
||||
<div v-if="showFilter && definitions.length > 0" class="relative w-full sm:w-80">
|
||||
<span
|
||||
class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-toned"
|
||||
>
|
||||
<UIcon name="i-lucide-filter" class="size-4" />
|
||||
</span>
|
||||
<input
|
||||
id="filter"
|
||||
ref="filterInput"
|
||||
v-model="query"
|
||||
type="search"
|
||||
placeholder="Filter displayed content"
|
||||
class="w-full rounded-md border border-default bg-elevated py-2 pr-3 pl-9 text-sm text-default outline-none transition focus:border-primary"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<UButton
|
||||
v-if="definitions.length > 0"
|
||||
color="neutral"
|
||||
:variant="showFilter ? 'soft' : 'outline'"
|
||||
size="sm"
|
||||
icon="i-lucide-filter"
|
||||
@click="toggleFilterPanel"
|
||||
>
|
||||
<span v-if="!isMobile">Filter</span>
|
||||
</UButton>
|
||||
|
||||
<UButton
|
||||
color="neutral"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
icon="i-lucide-search"
|
||||
@click="inspect = true"
|
||||
>
|
||||
<span v-if="!isMobile">Inspect</span>
|
||||
</UButton>
|
||||
|
||||
<UButton
|
||||
color="neutral"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
icon="i-lucide-plus"
|
||||
@click="openCreate"
|
||||
>
|
||||
<span v-if="!isMobile">New Definition</span>
|
||||
</UButton>
|
||||
|
||||
<UButton
|
||||
color="neutral"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
:icon="display_style === 'list' ? 'i-lucide-list' : 'i-lucide-grid-2x2'"
|
||||
@click="toggleDisplayStyle"
|
||||
>
|
||||
<span v-if="!isMobile">{{ display_style === 'list' ? 'List' : 'Grid' }}</span>
|
||||
</UButton>
|
||||
|
||||
<UButton
|
||||
color="neutral"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
icon="i-lucide-refresh-cw"
|
||||
:loading="isLoading"
|
||||
:disabled="isLoading"
|
||||
@click="() => void reloadContent()"
|
||||
>
|
||||
<span v-if="!isMobile">Reload</span>
|
||||
</UButton>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns" v-if="'list' === display_style && definitions.length > 0 && !isEditorOpen">
|
||||
<div class="column is-12">
|
||||
<div class="table-container">
|
||||
<table
|
||||
class="table is-striped is-hoverable is-fullwidth is-bordered"
|
||||
style="min-width: 850px; table-layout: fixed"
|
||||
<UAlert
|
||||
v-if="lastError"
|
||||
color="error"
|
||||
variant="soft"
|
||||
icon="i-lucide-circle-alert"
|
||||
title="Error"
|
||||
:description="lastError"
|
||||
/>
|
||||
|
||||
<div
|
||||
v-if="display_style === 'list' && filteredDefinitions.length > 0"
|
||||
class="w-full min-w-0 max-w-full overflow-hidden rounded-lg border border-default bg-default"
|
||||
>
|
||||
<thead>
|
||||
<tr class="has-text-centered is-unselectable">
|
||||
<th width="40%">Name</th>
|
||||
<th width="20%">Priority</th>
|
||||
<th width="20%">Updated</th>
|
||||
<th width="20%">Actions</th>
|
||||
<div class="w-full max-w-full overflow-x-auto overscroll-x-contain">
|
||||
<table class="min-w-245 w-full text-sm">
|
||||
<thead class="bg-muted/40 text-xs uppercase tracking-wide text-toned">
|
||||
<tr class="text-center [&>th]:px-3 [&>th]:py-3 [&>th]:font-semibold">
|
||||
<th class="w-full text-left">Definition</th>
|
||||
<th class="w-[18%]">Priority</th>
|
||||
<th class="w-[18%]">Updated</th>
|
||||
<th class="w-[1%]">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="definition in definitions" :key="definition.id">
|
||||
<td class="is-vcentered">
|
||||
<div class="is-text-overflow">
|
||||
|
||||
<tbody class="divide-y divide-default">
|
||||
<tr
|
||||
v-for="definition in filteredDefinitions"
|
||||
:key="definition.id"
|
||||
class="hover:bg-muted/20"
|
||||
>
|
||||
<td class="px-3 py-3 align-middle">
|
||||
<div class="space-y-1">
|
||||
<div class="font-semibold text-highlighted">
|
||||
{{ definition.name || '(Unnamed definition)' }}
|
||||
</div>
|
||||
<div class="is-size-7">
|
||||
<span
|
||||
class="icon-text is-clickable"
|
||||
@click="toggle(definition)"
|
||||
v-tooltip="
|
||||
'Click to ' + (definition.enabled ? 'disable' : 'enable') + ' definition'
|
||||
"
|
||||
|
||||
<div class="flex flex-wrap items-center gap-3 text-xs text-toned">
|
||||
<button
|
||||
type="button"
|
||||
class="inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 transition hover:bg-muted"
|
||||
@click="() => void toggle(definition)"
|
||||
>
|
||||
<span class="icon">
|
||||
<i
|
||||
class="fa-solid fa-power-off"
|
||||
:class="{
|
||||
'has-text-success': definition.enabled,
|
||||
'has-text-danger': !definition.enabled,
|
||||
}"
|
||||
<UIcon
|
||||
name="i-lucide-power"
|
||||
class="size-3.5"
|
||||
:class="definition.enabled ? 'text-success' : 'text-error'"
|
||||
/>
|
||||
</span>
|
||||
<span>{{ definition.enabled ? 'Enabled' : 'Disabled' }}</span>
|
||||
</button>
|
||||
|
||||
<span class="inline-flex items-center gap-1">
|
||||
<UIcon name="i-lucide-link" class="size-3.5" />
|
||||
<span
|
||||
>{{ definition.match_url.length }} match pattern{{
|
||||
definition.match_url.length === 1 ? '' : 's'
|
||||
}}</span
|
||||
>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="is-vcentered has-text-centered">{{ definition.priority }}</td>
|
||||
<td class="is-vcentered has-text-centered">
|
||||
|
||||
<td class="px-3 py-3 text-center align-middle">{{ definition.priority }}</td>
|
||||
|
||||
<td class="px-3 py-3 text-center align-middle whitespace-nowrap">
|
||||
<UTooltip :text="moment(definition.updated_at).format('YYYY-M-DD H:mm Z')">
|
||||
<span
|
||||
class="has-tooltip"
|
||||
class="inline-flex"
|
||||
:date-datetime="moment(definition.updated_at).format('YYYY-M-DD H:mm Z')"
|
||||
v-tooltip="moment(definition.updated_at).format('YYYY-M-DD H:mm Z')"
|
||||
v-rtime="definition.updated_at"
|
||||
/>
|
||||
</UTooltip>
|
||||
</td>
|
||||
<td class="is-vcentered is-items-center">
|
||||
<div class="field is-grouped is-grouped-centered">
|
||||
<div class="control">
|
||||
<button
|
||||
class="button is-small is-info"
|
||||
type="button"
|
||||
@click="exportDefinition(definition)"
|
||||
|
||||
<td class="w-[1%] px-3 py-3 align-middle whitespace-nowrap">
|
||||
<div class="flex items-center justify-end gap-2">
|
||||
<UButton
|
||||
color="info"
|
||||
variant="outline"
|
||||
size="xs"
|
||||
icon="i-lucide-file-up"
|
||||
@click="() => void exportDefinition(definition)"
|
||||
>
|
||||
<span class="icon"><i class="fa-solid fa-file-export" /></span>
|
||||
<span v-if="!isMobile">Export</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="control">
|
||||
<button
|
||||
class="button is-small is-warning"
|
||||
type="button"
|
||||
@click="openEdit(definition)"
|
||||
</UButton>
|
||||
|
||||
<UButton
|
||||
color="warning"
|
||||
variant="outline"
|
||||
size="xs"
|
||||
icon="i-lucide-pencil"
|
||||
@click="() => void openEdit(definition)"
|
||||
>
|
||||
<span class="icon"><i class="fa-solid fa-cog" /></span>
|
||||
<span v-if="!isMobile">Edit</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="control">
|
||||
<button
|
||||
class="button is-small is-danger"
|
||||
type="button"
|
||||
@click="remove(definition)"
|
||||
</UButton>
|
||||
|
||||
<UButton
|
||||
color="error"
|
||||
variant="outline"
|
||||
size="xs"
|
||||
icon="i-lucide-trash"
|
||||
@click="() => void remove(definition)"
|
||||
>
|
||||
<span class="icon"><i class="fa-solid fa-trash" /></span>
|
||||
<span v-if="!isMobile">Delete</span>
|
||||
</button>
|
||||
</div>
|
||||
</UButton>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
|
@ -163,113 +196,162 @@
|
|||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="columns is-multiline"
|
||||
v-if="'grid' === display_style && definitions.length > 0 && !isEditorOpen"
|
||||
v-else-if="filteredDefinitions.length > 0"
|
||||
class="grid gap-4 md:grid-cols-2 xl:grid-cols-3"
|
||||
>
|
||||
<div class="column is-6" v-for="definition in definitions" :key="definition.id">
|
||||
<div class="card">
|
||||
<header class="card-header">
|
||||
<div class="card-header-title is-text-overflow is-block">
|
||||
<UCard
|
||||
v-for="definition in filteredDefinitions"
|
||||
:key="definition.id"
|
||||
class="flex h-full flex-col border bg-default"
|
||||
:ui="{ header: 'p-4 pb-3', body: 'flex flex-1 flex-col gap-4 p-4 pt-0' }"
|
||||
>
|
||||
<template #header>
|
||||
<div class="flex items-start justify-between gap-3">
|
||||
<div class="min-w-0 flex-1 space-y-2">
|
||||
<div class="text-sm font-semibold text-highlighted wrap-break-word">
|
||||
{{ definition.name || '(Unnamed definition)' }}
|
||||
</div>
|
||||
<div class="card-header-icon">
|
||||
<div class="field has-addons">
|
||||
<div class="control" @click="toggle(definition)">
|
||||
<span
|
||||
class="icon"
|
||||
:class="definition.enabled ? 'has-text-success' : 'has-text-danger'"
|
||||
v-tooltip="
|
||||
`Definition is ${definition.enabled ? 'enabled' : 'disabled'}. Click to toggle.`
|
||||
"
|
||||
>
|
||||
<i class="fa-solid fa-power-off" />
|
||||
</span>
|
||||
</div>
|
||||
<div class="control">
|
||||
|
||||
<div class="flex flex-wrap items-center gap-2 text-xs text-toned">
|
||||
<button
|
||||
class="has-text-info"
|
||||
v-tooltip="'Export'"
|
||||
@click="exportDefinition(definition)"
|
||||
type="button"
|
||||
class="inline-flex items-center gap-1 rounded-md border border-default px-2 py-1 transition hover:border-primary hover:text-default"
|
||||
@click="() => void toggle(definition)"
|
||||
>
|
||||
<span class="icon"><i class="fa-solid fa-file-export" /></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="card-content">
|
||||
<div class="content">
|
||||
<p>
|
||||
<span class="icon-text">
|
||||
<span class="icon"><i class="fa-solid fa-sort-numeric-down" /></span>
|
||||
<span>Priority: {{ definition.priority }}</span>
|
||||
</span>
|
||||
</p>
|
||||
<p>
|
||||
<span class="icon-text">
|
||||
<span class="icon"><i class="fa-solid fa-clock" /></span>
|
||||
<span
|
||||
>Updated:
|
||||
<span
|
||||
class="has-tooltip"
|
||||
:date-datetime="moment(definition.updated_at).format('YYYY-M-DD H:mm Z')"
|
||||
v-tooltip="moment(definition.updated_at).format('YYYY-M-DD H:mm Z')"
|
||||
v-rtime="definition.updated_at"
|
||||
<UIcon
|
||||
name="i-lucide-power"
|
||||
class="size-3.5"
|
||||
:class="definition.enabled ? 'text-success' : 'text-error'"
|
||||
/>
|
||||
</span>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="card-footer mt-auto">
|
||||
<div class="card-footer-item">
|
||||
<button class="button is-warning is-fullwidth" @click="openEdit(definition)">
|
||||
<span class="icon-text">
|
||||
<span class="icon"><i class="fa-solid fa-pen-to-square" /></span>
|
||||
<span>Edit</span>
|
||||
</span>
|
||||
<span>{{ definition.enabled ? 'Enabled' : 'Disabled' }}</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="card-footer-item">
|
||||
<button class="button is-danger is-fullwidth" @click="remove(definition)">
|
||||
<span class="icon-text">
|
||||
<span class="icon"><i class="fa-solid fa-trash" /></span>
|
||||
<span>Delete</span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns is-multiline" v-if="!definitions.length">
|
||||
<div class="column is-12">
|
||||
<Message v-if="isLoading" class="is-info" title="Loading" icon="fas fa-spinner fa-spin">
|
||||
Loading data. Please wait...
|
||||
</Message>
|
||||
<Message
|
||||
v-if="!isLoading && !isEditorOpen"
|
||||
title="No definitions"
|
||||
class="is-warning"
|
||||
icon="fas fa-exclamation-circle"
|
||||
<span
|
||||
class="inline-flex items-center gap-1 rounded-md border border-default px-2 py-1"
|
||||
>
|
||||
There are no task definitions. Click the
|
||||
<span class="icon"><i class="fas fa-add" /></span> <strong>New Definition</strong> button
|
||||
to create your first task definition.
|
||||
</Message>
|
||||
<UIcon name="i-lucide-list-ordered" class="size-3.5" />
|
||||
<span>Priority {{ definition.priority }}</span>
|
||||
</span>
|
||||
|
||||
<span
|
||||
class="inline-flex items-center gap-1 rounded-md border border-default px-2 py-1"
|
||||
>
|
||||
<UIcon name="i-lucide-link" class="size-3.5" />
|
||||
<span
|
||||
>{{ definition.match_url.length }} match pattern{{
|
||||
definition.match_url.length === 1 ? '' : 's'
|
||||
}}</span
|
||||
>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns" v-if="isEditorOpen">
|
||||
<div class="column is-12">
|
||||
<TaskDefinitionEditor
|
||||
<UButton
|
||||
color="info"
|
||||
variant="ghost"
|
||||
size="xs"
|
||||
icon="i-lucide-file-up"
|
||||
square
|
||||
@click="() => void exportDefinition(definition)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="space-y-3 text-sm text-default">
|
||||
<div class="rounded-md border border-default bg-muted/20 px-3 py-2">
|
||||
<div
|
||||
class="mb-2 flex items-center gap-2 text-xs font-semibold uppercase tracking-wide text-toned"
|
||||
>
|
||||
<UIcon name="i-lucide-link" class="size-3.5" />
|
||||
<span>Match patterns</span>
|
||||
</div>
|
||||
|
||||
<div class="space-y-1 text-sm">
|
||||
<div
|
||||
v-for="pattern in definition.match_url.slice(0, 3)"
|
||||
:key="pattern"
|
||||
class="truncate text-default"
|
||||
>
|
||||
{{ pattern }}
|
||||
</div>
|
||||
<div v-if="definition.match_url.length > 3" class="text-xs text-toned">
|
||||
+{{ definition.match_url.length - 3 }} more
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-auto grid gap-2 pt-2 sm:grid-cols-2">
|
||||
<UButton
|
||||
color="warning"
|
||||
variant="outline"
|
||||
icon="i-lucide-pencil"
|
||||
class="w-full justify-center"
|
||||
@click="() => void openEdit(definition)"
|
||||
>
|
||||
Edit
|
||||
</UButton>
|
||||
|
||||
<UButton
|
||||
color="error"
|
||||
variant="outline"
|
||||
icon="i-lucide-trash"
|
||||
class="w-full justify-center"
|
||||
@click="() => void remove(definition)"
|
||||
>
|
||||
Delete
|
||||
</UButton>
|
||||
</div>
|
||||
</UCard>
|
||||
</div>
|
||||
|
||||
<UAlert
|
||||
v-if="isLoading"
|
||||
color="info"
|
||||
variant="soft"
|
||||
icon="i-lucide-loader-circle"
|
||||
title="Loading"
|
||||
description="Loading data. Please wait..."
|
||||
/>
|
||||
|
||||
<div v-else-if="query && filteredDefinitions.length < 1" class="space-y-3">
|
||||
<UAlert
|
||||
color="warning"
|
||||
variant="soft"
|
||||
icon="i-lucide-search"
|
||||
title="No Results"
|
||||
:description="`No results found for the query: ${query}. Please try a different search term.`"
|
||||
/>
|
||||
|
||||
<UButton color="neutral" variant="outline" size="sm" @click="query = ''"
|
||||
>Clear filter</UButton
|
||||
>
|
||||
</div>
|
||||
|
||||
<UAlert
|
||||
v-else-if="!definitions.length"
|
||||
color="warning"
|
||||
variant="soft"
|
||||
icon="i-lucide-circle-alert"
|
||||
title="No definitions"
|
||||
description="There are no task definitions. Click the New Definition button to create your first task definition."
|
||||
/>
|
||||
|
||||
<UModal
|
||||
v-if="isEditorOpen"
|
||||
:open="isEditorOpen"
|
||||
:title="editorTitle"
|
||||
:description="editorDescription"
|
||||
:dismissible="!editorLoading && !editorSubmitting"
|
||||
:ui="{ content: 'w-full sm:max-w-7xl', body: 'max-h-[85vh] overflow-y-auto p-4 sm:p-6' }"
|
||||
@update:open="(open) => !open && closeEditor()"
|
||||
>
|
||||
<template #body>
|
||||
<TaskDefinitionEditor
|
||||
:document="workingDefinition"
|
||||
:initial-show-import="'create' === editorMode"
|
||||
:initial-show-import="showImportByDefault"
|
||||
:available-definitions="definitions"
|
||||
:loading="editorLoading"
|
||||
:submitting="editorSubmitting"
|
||||
|
|
@ -277,26 +359,33 @@
|
|||
@cancel="closeEditor"
|
||||
@import-existing="importExistingDefinition"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</UModal>
|
||||
|
||||
<Modal v-if="inspect" @close="() => (inspect = false)" :contentClass="`modal-content-max`">
|
||||
<UModal
|
||||
v-if="inspect"
|
||||
:open="inspect"
|
||||
title="Inspect Task Handler"
|
||||
description="Enter the URL of the resource you want to inspect."
|
||||
:ui="{ content: 'w-full sm:max-w-4xl', body: 'max-h-[85vh] overflow-y-auto p-4 sm:p-6' }"
|
||||
@update:open="(open) => !open && (inspect = false)"
|
||||
>
|
||||
<template #body>
|
||||
<TaskInspect />
|
||||
</Modal>
|
||||
</template>
|
||||
</UModal>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import moment from 'moment';
|
||||
import { computed, onMounted, ref } from 'vue';
|
||||
import { computed, onMounted, ref, watch } from 'vue';
|
||||
import { useStorage } from '@vueuse/core';
|
||||
|
||||
import TaskDefinitionEditor from '~/components/TaskDefinitionEditor.vue';
|
||||
import useTaskDefinitionsComposable from '~/composables/useTaskDefinitions';
|
||||
import { useDialog } from '~/composables/useDialog';
|
||||
import { useNotification } from '~/composables/useNotification';
|
||||
import { copyText, encode } from '~/utils';
|
||||
import { useMediaQuery } from '~/composables/useMediaQuery';
|
||||
import { copyText, encode } from '~/utils';
|
||||
|
||||
import type {
|
||||
TaskDefinitionDetailed,
|
||||
|
|
@ -328,6 +417,7 @@ const isMobile = useMediaQuery({ maxWidth: 1024 });
|
|||
const taskDefs = useTaskDefinitionsComposable();
|
||||
const definitionsRef = taskDefs.definitions;
|
||||
const isLoading = taskDefs.isLoading;
|
||||
const lastError = taskDefs.lastError;
|
||||
const loadDefinitions = taskDefs.loadDefinitions;
|
||||
const getDefinition = taskDefs.getDefinition;
|
||||
const createDefinition = taskDefs.createDefinition;
|
||||
|
|
@ -335,45 +425,107 @@ const updateDefinition = taskDefs.updateDefinition;
|
|||
const deleteDefinition = taskDefs.deleteDefinition;
|
||||
const toggleEnabled = taskDefs.toggleEnabled;
|
||||
|
||||
const definitions = computed(() => definitionsRef.value);
|
||||
const definitions = computed<TaskDefinitionSummary[]>(() => [...definitionsRef.value]);
|
||||
|
||||
const { confirmDialog } = useDialog();
|
||||
const toast = useNotification();
|
||||
|
||||
const isEditorOpen = ref<boolean>(false);
|
||||
const isEditorOpen = ref(false);
|
||||
const editorMode = ref<'create' | 'edit'>('create');
|
||||
const editorLoading = ref<boolean>(false);
|
||||
const editorSubmitting = ref<boolean>(false);
|
||||
const editorLoading = ref(false);
|
||||
const editorSubmitting = ref(false);
|
||||
const workingDefinition = ref<TaskDefinitionDocument | null>(null);
|
||||
const workingId = ref<number | null>(null);
|
||||
const inspect = ref<boolean>(false);
|
||||
const inspect = ref(false);
|
||||
const display_style = useStorage<'list' | 'grid'>('task-definitions:display', 'grid');
|
||||
|
||||
const query = ref('');
|
||||
const showFilter = ref(false);
|
||||
const filterInput = ref<HTMLInputElement | null>(null);
|
||||
const hideImportByDefault = ref(false);
|
||||
|
||||
const filteredDefinitions = computed<TaskDefinitionSummary[]>(() => {
|
||||
const normalizedQuery = query.value.trim().toLowerCase();
|
||||
if (!normalizedQuery) {
|
||||
return definitions.value;
|
||||
}
|
||||
|
||||
return definitions.value.filter((definition) => {
|
||||
const haystack = [
|
||||
definition.name,
|
||||
definition.priority,
|
||||
definition.enabled ? 'enabled' : 'disabled',
|
||||
...definition.match_url,
|
||||
]
|
||||
.join(' ')
|
||||
.toLowerCase();
|
||||
|
||||
return haystack.includes(normalizedQuery);
|
||||
});
|
||||
});
|
||||
|
||||
const currentSummary = computed<TaskDefinitionSummary | undefined>(() => {
|
||||
if ('edit' !== editorMode.value || !workingId.value) {
|
||||
if (editorMode.value !== 'edit' || !workingId.value) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
return definitions.value.find((item) => item.id === workingId.value);
|
||||
});
|
||||
|
||||
const editorTitle = computed<string>(() => {
|
||||
return 'create' === editorMode.value
|
||||
const editorTitle = computed(() => {
|
||||
return editorMode.value === 'create'
|
||||
? 'Create Task Definition'
|
||||
: `Edit - ${currentSummary.value?.name || 'Task Definition'}`;
|
||||
});
|
||||
|
||||
const editorDescription = computed(() => {
|
||||
if (editorLoading.value) {
|
||||
return 'Loading full definition before editing.';
|
||||
}
|
||||
|
||||
return 'Use the GUI editor when it fits, or switch to advanced JSON for full control.';
|
||||
});
|
||||
|
||||
const showImportByDefault = computed(
|
||||
() => editorMode.value === 'create' && !hideImportByDefault.value,
|
||||
);
|
||||
|
||||
watch(showFilter, (value) => {
|
||||
if (!value) {
|
||||
query.value = '';
|
||||
}
|
||||
});
|
||||
|
||||
const cloneDocument = (document: TaskDefinitionDocument): TaskDefinitionDocument => {
|
||||
return JSON.parse(JSON.stringify(document)) as TaskDefinitionDocument;
|
||||
};
|
||||
|
||||
const toggleFilterPanel = async (): Promise<void> => {
|
||||
showFilter.value = !showFilter.value;
|
||||
if (!showFilter.value) {
|
||||
query.value = '';
|
||||
return;
|
||||
}
|
||||
|
||||
await nextTick();
|
||||
filterInput.value?.focus();
|
||||
};
|
||||
|
||||
const reloadContent = async (): Promise<void> => {
|
||||
await loadDefinitions(1, 1000);
|
||||
};
|
||||
|
||||
const toggleDisplayStyle = (): void => {
|
||||
display_style.value = display_style.value === 'list' ? 'grid' : 'list';
|
||||
};
|
||||
|
||||
const openCreate = (): void => {
|
||||
editorMode.value = 'create';
|
||||
workingId.value = null;
|
||||
workingDefinition.value = cloneDocument(DEFAULT_DEFINITION);
|
||||
isEditorOpen.value = true;
|
||||
editorLoading.value = false;
|
||||
editorSubmitting.value = false;
|
||||
hideImportByDefault.value = false;
|
||||
isEditorOpen.value = true;
|
||||
};
|
||||
|
||||
const openEdit = async (summary: TaskDefinitionSummary): Promise<void> => {
|
||||
|
|
@ -382,47 +534,43 @@ const openEdit = async (summary: TaskDefinitionSummary): Promise<void> => {
|
|||
workingDefinition.value = null;
|
||||
editorLoading.value = true;
|
||||
editorSubmitting.value = false;
|
||||
hideImportByDefault.value = true;
|
||||
isEditorOpen.value = true;
|
||||
|
||||
const detailed: TaskDefinitionDetailed | null = await getDefinition(summary.id);
|
||||
if (!detailed) {
|
||||
isEditorOpen.value = false;
|
||||
editorLoading.value = false;
|
||||
closeEditor();
|
||||
return;
|
||||
}
|
||||
|
||||
const document: TaskDefinitionDocument = {
|
||||
workingDefinition.value = {
|
||||
name: detailed.name,
|
||||
priority: detailed.priority,
|
||||
enabled: detailed.enabled,
|
||||
match_url: [...detailed.match_url],
|
||||
definition: JSON.parse(JSON.stringify(detailed.definition)),
|
||||
};
|
||||
|
||||
workingDefinition.value = document;
|
||||
editorLoading.value = false;
|
||||
};
|
||||
|
||||
const importExistingDefinition = async (id: number): Promise<void> => {
|
||||
const detailed = await getDefinition(id);
|
||||
if (!detailed) {
|
||||
toast.error('Failed to load task definition for import.');
|
||||
return;
|
||||
}
|
||||
|
||||
const document: TaskDefinitionDocument = {
|
||||
editorMode.value = 'create';
|
||||
workingId.value = null;
|
||||
workingDefinition.value = {
|
||||
name: detailed.name,
|
||||
priority: detailed.priority,
|
||||
enabled: detailed.enabled,
|
||||
match_url: [...detailed.match_url],
|
||||
definition: JSON.parse(JSON.stringify(detailed.definition)),
|
||||
};
|
||||
|
||||
editorMode.value = 'create';
|
||||
workingId.value = null;
|
||||
workingDefinition.value = document;
|
||||
isEditorOpen.value = true;
|
||||
hideImportByDefault.value = true;
|
||||
editorLoading.value = false;
|
||||
isEditorOpen.value = true;
|
||||
};
|
||||
|
||||
const closeEditor = (): void => {
|
||||
|
|
@ -434,36 +582,40 @@ const closeEditor = (): void => {
|
|||
workingDefinition.value = null;
|
||||
workingId.value = null;
|
||||
editorLoading.value = false;
|
||||
editorSubmitting.value = false;
|
||||
hideImportByDefault.value = false;
|
||||
};
|
||||
|
||||
const submitDefinition = async (definition: TaskDefinitionDocument): Promise<void> => {
|
||||
let shouldClose = false;
|
||||
editorSubmitting.value = true;
|
||||
|
||||
try {
|
||||
if ('create' === editorMode.value) {
|
||||
if (editorMode.value === 'create') {
|
||||
const created = await createDefinition(definition);
|
||||
if (created) {
|
||||
isEditorOpen.value = false;
|
||||
workingDefinition.value = null;
|
||||
workingId.value = null;
|
||||
shouldClose = true;
|
||||
}
|
||||
} else if (workingId.value) {
|
||||
const updated = await updateDefinition(workingId.value, definition);
|
||||
if (updated) {
|
||||
isEditorOpen.value = false;
|
||||
workingDefinition.value = null;
|
||||
workingId.value = null;
|
||||
shouldClose = true;
|
||||
}
|
||||
}
|
||||
} finally {
|
||||
editorSubmitting.value = false;
|
||||
}
|
||||
|
||||
if (shouldClose) {
|
||||
closeEditor();
|
||||
}
|
||||
};
|
||||
|
||||
const remove = async (summary: TaskDefinitionSummary): Promise<void> => {
|
||||
const result = await confirmDialog({
|
||||
title: 'Delete Task Definition',
|
||||
message: `Are you sure you want to delete "${summary.name || summary.id}"?`,
|
||||
confirmColor: 'is-danger',
|
||||
confirmColor: 'error',
|
||||
});
|
||||
|
||||
if (!result.status) {
|
||||
|
|
@ -483,7 +635,7 @@ const exportDefinition = async (summary: TaskDefinitionSummary): Promise<void> =
|
|||
return;
|
||||
}
|
||||
|
||||
return copyText(
|
||||
copyText(
|
||||
encode({
|
||||
_type: 'task_definition',
|
||||
_version: '2.0',
|
||||
|
|
@ -498,7 +650,7 @@ const exportDefinition = async (summary: TaskDefinitionSummary): Promise<void> =
|
|||
|
||||
onMounted(async () => {
|
||||
if (!definitions.value.length) {
|
||||
await loadDefinitions();
|
||||
await reloadContent();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
21
ui/app/plugins/color-mode.client.ts
Normal file
21
ui/app/plugins/color-mode.client.ts
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
import { useColorMode } from '#imports';
|
||||
|
||||
export default defineNuxtPlugin(() => {
|
||||
const legacyTheme = window.localStorage.getItem('theme');
|
||||
if (!legacyTheme) {
|
||||
return;
|
||||
}
|
||||
|
||||
const nextPreference = 'auto' === legacyTheme ? 'system' : legacyTheme;
|
||||
if (!['system', 'light', 'dark'].includes(nextPreference)) {
|
||||
window.localStorage.removeItem('theme');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!window.localStorage.getItem('nuxt-color-mode')) {
|
||||
const colorMode = useColorMode();
|
||||
colorMode.preference = nextPreference as 'system' | 'light' | 'dark';
|
||||
}
|
||||
|
||||
window.localStorage.removeItem('theme');
|
||||
});
|
||||
57
ui/app/plugins/modal-opacity.client.ts
Normal file
57
ui/app/plugins/modal-opacity.client.ts
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
import { disableOpacity, enableOpacity } from '~/utils';
|
||||
|
||||
const OVERLAY_SELECTOR = '[data-slot="overlay"]';
|
||||
|
||||
export default defineNuxtPlugin(() => {
|
||||
if (import.meta.server) {
|
||||
return;
|
||||
}
|
||||
|
||||
let observer: MutationObserver | null = null;
|
||||
let isLocked = false;
|
||||
|
||||
const syncOverlayOpacity = (): void => {
|
||||
const hasOverlay = document.querySelector(OVERLAY_SELECTOR) !== null;
|
||||
|
||||
if (hasOverlay && !isLocked) {
|
||||
disableOpacity();
|
||||
isLocked = true;
|
||||
return;
|
||||
}
|
||||
|
||||
if (!hasOverlay && isLocked) {
|
||||
enableOpacity();
|
||||
isLocked = false;
|
||||
}
|
||||
};
|
||||
|
||||
const startObserver = (): void => {
|
||||
if (observer || !document.body) {
|
||||
return;
|
||||
}
|
||||
|
||||
observer = new MutationObserver(() => syncOverlayOpacity());
|
||||
observer.observe(document.body, { childList: true, subtree: true });
|
||||
syncOverlayOpacity();
|
||||
};
|
||||
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', startObserver, { once: true });
|
||||
} else {
|
||||
startObserver();
|
||||
}
|
||||
|
||||
window.addEventListener(
|
||||
'beforeunload',
|
||||
() => {
|
||||
observer?.disconnect();
|
||||
observer = null;
|
||||
|
||||
if (isLocked) {
|
||||
enableOpacity();
|
||||
isLocked = false;
|
||||
}
|
||||
},
|
||||
{ once: true },
|
||||
);
|
||||
});
|
||||
10
ui/app/plugins/nuxt-toast.client.ts
Normal file
10
ui/app/plugins/nuxt-toast.client.ts
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
import { setNuxtToastManager } from '~/utils/nuxtToastManager';
|
||||
|
||||
export default defineNuxtPlugin(() => {
|
||||
const toast = useToast();
|
||||
|
||||
setNuxtToastManager({
|
||||
add: (payload) => toast.add(payload),
|
||||
remove: (id) => toast.remove(id),
|
||||
});
|
||||
});
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
import { defineNuxtPlugin } from '#app';
|
||||
import Toast, { type PluginOptions } from 'vue-toastification';
|
||||
import 'vue-toastification/dist/index.css';
|
||||
|
||||
export default defineNuxtPlugin((nuxtApp) => {
|
||||
nuxtApp.vueApp.use(Toast, {
|
||||
transition: 'Vue-Toastification__bounce',
|
||||
//position: "bottom-right",
|
||||
maxToasts: 5,
|
||||
newestOnTop: true,
|
||||
} as PluginOptions);
|
||||
});
|
||||
|
|
@ -3,10 +3,10 @@ import { useStorage } from '@vueuse/core';
|
|||
import type { notification, notificationType } from '~/composables/useNotification';
|
||||
|
||||
const _map: Record<notificationType, { level: number; color: string; icon: string }> = {
|
||||
error: { level: 3, color: 'is-danger', icon: 'fas fa-triangle-exclamation' },
|
||||
warning: { level: 2, color: 'is-warning', icon: 'fas fa-circle-exclamation' },
|
||||
success: { level: 1, color: 'is-primary', icon: 'fas fa-circle-check' },
|
||||
info: { level: 0, color: 'is-info', icon: 'fas fa-circle-info' },
|
||||
error: { level: 3, color: 'error', icon: 'i-lucide-triangle-alert' },
|
||||
warning: { level: 2, color: 'warning', icon: 'i-lucide-circle-alert' },
|
||||
success: { level: 1, color: 'success', icon: 'i-lucide-badge-check' },
|
||||
info: { level: 0, color: 'info', icon: 'i-lucide-info' },
|
||||
};
|
||||
|
||||
export const useNotificationStore = defineStore('notifications', () => {
|
||||
|
|
|
|||
2
ui/app/types/dl_fields.d.ts
vendored
2
ui/app/types/dl_fields.d.ts
vendored
|
|
@ -16,7 +16,7 @@ type DLField = {
|
|||
/** The kind of the field. i.e. string, bool */
|
||||
kind: DLFieldType;
|
||||
|
||||
/** The icon of the field, it can be a font-awesome icon */
|
||||
/** The icon of the field, use a Lucide/Iconify name like `i-lucide-image` */
|
||||
icon?: string;
|
||||
|
||||
/** The order of the field, used to sort the fields in the UI. */
|
||||
|
|
|
|||
16
ui/app/types/popover.d.ts
vendored
16
ui/app/types/popover.d.ts
vendored
|
|
@ -1,16 +0,0 @@
|
|||
export type PopoverPlacement = 'top' | 'bottom' | 'left' | 'right';
|
||||
export type PopoverTrigger = 'hover' | 'click' | 'focus';
|
||||
|
||||
export interface PopoverProps {
|
||||
title?: string;
|
||||
description?: string;
|
||||
placement?: PopoverPlacement;
|
||||
trigger?: PopoverTrigger;
|
||||
offset?: number;
|
||||
disabled?: boolean;
|
||||
closeOnClickOutside?: boolean;
|
||||
minWidth?: number;
|
||||
maxWidth?: number;
|
||||
maxHeight?: number;
|
||||
showDelay?: number;
|
||||
}
|
||||
|
|
@ -725,25 +725,49 @@ const decode = (str: string): object => {
|
|||
return JSON.parse(jsonStr);
|
||||
};
|
||||
|
||||
const disableOpacity = (): boolean => {
|
||||
const bg_enable = useStorage<boolean>('random_bg', true);
|
||||
if (!bg_enable) {
|
||||
let opacityLockCount = 0;
|
||||
|
||||
const getStorageValue = <T>(key: string, defaultValue: T, missingValue: T = defaultValue): T => {
|
||||
const stored = useStorage<T>(key, defaultValue);
|
||||
if (!stored || typeof stored !== 'object' || !('value' in stored)) {
|
||||
return missingValue;
|
||||
}
|
||||
|
||||
return (stored.value === undefined ? defaultValue : stored.value) as T;
|
||||
};
|
||||
|
||||
const setBodyOpacity = (value: string): boolean => {
|
||||
const body = document.querySelector('body');
|
||||
if (!body) {
|
||||
return false;
|
||||
}
|
||||
|
||||
document.querySelector('body')?.setAttribute('style', `opacity: 1.0`);
|
||||
body.setAttribute('style', `opacity: ${value}`);
|
||||
return true;
|
||||
};
|
||||
|
||||
const enableOpacity = (): boolean => {
|
||||
const bg_enable = useStorage<boolean>('random_bg', true);
|
||||
if (!bg_enable) {
|
||||
const disableOpacity = (): boolean => {
|
||||
if (!getStorageValue<boolean>('random_bg', true, false)) {
|
||||
opacityLockCount = 0;
|
||||
return false;
|
||||
}
|
||||
|
||||
const bg_opacity = useStorage<number>('random_bg_opacity', 0.95);
|
||||
document.querySelector('body')?.setAttribute('style', `opacity: ${bg_opacity.value}`);
|
||||
return true;
|
||||
opacityLockCount += 1;
|
||||
return setBodyOpacity('1.0');
|
||||
};
|
||||
|
||||
const enableOpacity = (): boolean => {
|
||||
if (!getStorageValue<boolean>('random_bg', true, false)) {
|
||||
opacityLockCount = 0;
|
||||
return false;
|
||||
}
|
||||
|
||||
opacityLockCount = Math.max(0, opacityLockCount - 1);
|
||||
if (opacityLockCount > 0) {
|
||||
return setBodyOpacity('1.0');
|
||||
}
|
||||
|
||||
return setBodyOpacity(String(getStorageValue<number>('random_bg_opacity', 0.95)));
|
||||
};
|
||||
|
||||
const stripPath = (base_path: string, real_path: string): string => {
|
||||
|
|
|
|||
21
ui/app/utils/nuxtToastManager.ts
Normal file
21
ui/app/utils/nuxtToastManager.ts
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
type ToastPayload = {
|
||||
id?: string | number;
|
||||
[key: string]: unknown;
|
||||
};
|
||||
|
||||
type ToastInstance = {
|
||||
id: string | number;
|
||||
};
|
||||
|
||||
type ToastManager = {
|
||||
add: (toast: ToastPayload) => ToastInstance;
|
||||
remove: (id: string | number) => void;
|
||||
};
|
||||
|
||||
let manager: ToastManager | null = null;
|
||||
|
||||
export const setNuxtToastManager = (toastManager: ToastManager): void => {
|
||||
manager = toastManager;
|
||||
};
|
||||
|
||||
export const getNuxtToastManager = (): ToastManager | null => manager;
|
||||
17
ui/app/utils/ytdlpOptions.ts
Normal file
17
ui/app/utils/ytdlpOptions.ts
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
export const YTDLP_ALL_GROUPS = '__all_groups__';
|
||||
|
||||
type YTDLPGroupItem = {
|
||||
label: string;
|
||||
value: string;
|
||||
};
|
||||
|
||||
export const buildYtdlpGroupItems = (groups: string[]): YTDLPGroupItem[] => {
|
||||
return [
|
||||
{ label: 'All groups', value: YTDLP_ALL_GROUPS },
|
||||
...groups.map((group) => ({ label: group, value: group })),
|
||||
];
|
||||
};
|
||||
|
||||
export const normalizeYtdlpGroupFilter = (value: string): string => {
|
||||
return value === YTDLP_ALL_GROUPS ? '' : value;
|
||||
};
|
||||
566
ui/bun.lock
566
ui/bun.lock
File diff suppressed because it is too large
Load diff
|
|
@ -1,6 +1,6 @@
|
|||
import { defineNuxtConfig } from 'nuxt/config'
|
||||
import { defineNuxtConfig } from 'nuxt/config';
|
||||
|
||||
let extraNitro = {}
|
||||
let extraNitro = {};
|
||||
try {
|
||||
const API_URL = process.env.NUXT_API_URL;
|
||||
if (API_URL) {
|
||||
|
|
@ -8,84 +8,85 @@ try {
|
|||
devProxy: {
|
||||
'/api/': {
|
||||
target: API_URL,
|
||||
changeOrigin: true
|
||||
changeOrigin: true,
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
catch { }
|
||||
} catch {}
|
||||
|
||||
export default defineNuxtConfig({
|
||||
ssr: false,
|
||||
devtools: { enabled: false },
|
||||
devtools: { enabled: true },
|
||||
devServer: {
|
||||
port: 8082,
|
||||
host: "0.0.0.0",
|
||||
host: '0.0.0.0',
|
||||
},
|
||||
css: [
|
||||
'vue-toastification/dist/index.css'
|
||||
],
|
||||
css: ['~/assets/css/tailwind.css'],
|
||||
runtimeConfig: {
|
||||
public: {
|
||||
APP_ENV: process.env.NODE_ENV,
|
||||
wss: process.env.NUXT_PUBLIC_WSS ?? ''
|
||||
}
|
||||
wss: process.env.NUXT_PUBLIC_WSS ?? '',
|
||||
},
|
||||
build: {
|
||||
transpile: ['vue-toastification'],
|
||||
},
|
||||
app: {
|
||||
baseURL: 'production' == process.env.NODE_ENV ? '/_base_path/' : '/',
|
||||
buildAssetsDir: "assets",
|
||||
buildAssetsDir: 'assets',
|
||||
head: {
|
||||
"meta": [
|
||||
{ "charset": "utf-8" },
|
||||
{ "name": "viewport", "content": "width=device-width, initial-scale=1.0, maximum-scale=1.0" },
|
||||
{ "name": "theme-color", "content": "#000000" },
|
||||
{ "name": "mobile-web-app-capable", "content": "yes" },
|
||||
{ "name": "apple-mobile-web-app-capable", "content": "yes" },
|
||||
{ "name": "apple-mobile-web-app-status-bar-style", "content": "black-translucent" },
|
||||
{ "name": "apple-mobile-web-app-title", "content": "YTPTube" },
|
||||
meta: [
|
||||
{ charset: 'utf-8' },
|
||||
{ name: 'viewport', content: 'width=device-width, initial-scale=1.0, maximum-scale=1.0' },
|
||||
{ name: 'theme-color', content: '#020817' },
|
||||
{ name: 'mobile-web-app-capable', content: 'yes' },
|
||||
{ name: 'apple-mobile-web-app-capable', content: 'yes' },
|
||||
{ name: 'apple-mobile-web-app-status-bar-style', content: 'black-translucent' },
|
||||
{ name: 'apple-mobile-web-app-title', content: 'YTPTube' },
|
||||
],
|
||||
base: { "href": "/" },
|
||||
base: { href: '/' },
|
||||
link: [
|
||||
{ rel: 'icon', type: 'image/x-icon', href: 'favicon.ico?v=100' },
|
||||
{ rel: 'manifest', href: 'manifest.webmanifest?v=100' },
|
||||
{ rel: 'apple-touch-icon', href: 'images/favicon.png' },
|
||||
{ rel: 'apple-touch-startup-image', href: 'images/logo.png' }
|
||||
]
|
||||
},
|
||||
pageTransition: { name: 'page', mode: 'out-in' }
|
||||
},
|
||||
router: {
|
||||
options: {
|
||||
linkActiveClass: "is-selected",
|
||||
}
|
||||
},
|
||||
modules: [
|
||||
'@pinia/nuxt',
|
||||
'@vueuse/nuxt',
|
||||
'floating-vue/nuxt',
|
||||
'@nuxt/eslint',
|
||||
{ rel: 'apple-touch-startup-image', href: 'images/logo.png' },
|
||||
],
|
||||
},
|
||||
pageTransition: { name: 'page' },
|
||||
},
|
||||
modules: ['@nuxt/ui', '@pinia/nuxt', '@vueuse/nuxt', '@nuxt/eslint'],
|
||||
icon: {
|
||||
serverBundle: 'local',
|
||||
},
|
||||
nitro: {
|
||||
output: {
|
||||
publicDir: 'production' === process.env.NODE_ENV ? __dirname + '/exported' : __dirname + '/dist',
|
||||
publicDir:
|
||||
'production' === process.env.NODE_ENV ? __dirname + '/exported' : __dirname + '/dist',
|
||||
},
|
||||
...extraNitro,
|
||||
},
|
||||
vite: {
|
||||
optimizeDeps: {
|
||||
include: [
|
||||
'moment',
|
||||
'@microsoft/fetch-event-source',
|
||||
'@xterm/addon-fit',
|
||||
'@xterm/xterm',
|
||||
'cron-parser',
|
||||
'marked',
|
||||
'marked-base-url',
|
||||
'marked-alert',
|
||||
'marked-gfm-heading-id',
|
||||
],
|
||||
},
|
||||
server: {
|
||||
allowedHosts: true,
|
||||
},
|
||||
build: {
|
||||
chunkSizeWarningLimit: 2000,
|
||||
}
|
||||
},
|
||||
},
|
||||
telemetry: false,
|
||||
compatibilityDate: "2025-08-03",
|
||||
compatibilityDate: '2025-08-03',
|
||||
experimental: {
|
||||
checkOutdatedBuildInterval: 1000 * 60 * 10,
|
||||
}
|
||||
})
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -21,7 +21,11 @@
|
|||
},
|
||||
"web-types": "./web-types.json",
|
||||
"dependencies": {
|
||||
"@iconify-json/lucide": "^1.2.98",
|
||||
"@microsoft/fetch-event-source": "^2.0.1",
|
||||
"@nuxt/eslint": "^1.15.2",
|
||||
"@nuxt/eslint-config": "^1.15.2",
|
||||
"@nuxt/ui": "^4.5.1",
|
||||
"@pinia/nuxt": "^0.11.3",
|
||||
"@vueuse/core": "^14.2.1",
|
||||
"@vueuse/nuxt": "^14.2.1",
|
||||
|
|
@ -29,35 +33,29 @@
|
|||
"@xterm/xterm": "^6.0.0",
|
||||
"cron-parser": "^5.5.0",
|
||||
"cronstrue": "^3.14.0",
|
||||
"floating-vue": "^5.2.2",
|
||||
"hls.js": "^1.6.15",
|
||||
"marked": "^17.0.4",
|
||||
"marked": "^17.0.5",
|
||||
"marked-alert": "^2.1.2",
|
||||
"marked-base-url": "^1.1.8",
|
||||
"marked-gfm-heading-id": "^4.1.3",
|
||||
"moment": "^2.30.1",
|
||||
"nuxt": "^4.4.2",
|
||||
"pinia": "^3.0.4",
|
||||
"tailwindcss": "^4.2.2",
|
||||
"vue": "^3.5.30",
|
||||
"vue-router": "^5.0.4",
|
||||
"vue-toastification": "^2.0.0-rc.5",
|
||||
"@nuxt/eslint": "^1.15.2",
|
||||
"@nuxt/eslint-config": "^1.15.2"
|
||||
"vue-router": "^5.0.4"
|
||||
},
|
||||
"trustedDependencies": [
|
||||
"esbuild",
|
||||
"@parcel/watcher"
|
||||
],
|
||||
"overrides": {
|
||||
"vue-toastification": "^2.0.0-rc.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/bun": "^1.3.11",
|
||||
"@types/node": "25.5.0",
|
||||
"@types/jsdom": "^28.0.0",
|
||||
"@types/jsdom": "^28.0.1",
|
||||
"@typescript-eslint/parser": "^8.57.1",
|
||||
"eslint": "^10.0.3",
|
||||
"jsdom": "^29.0.0",
|
||||
"eslint": "^10.1.0",
|
||||
"jsdom": "^29.0.1",
|
||||
"oxfmt": "^0.41.0",
|
||||
"typescript": "^5.9.3",
|
||||
"vue-eslint-parser": "^10.4.0",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { describe, it, expect, beforeAll, beforeEach, afterEach, mock, spyOn } from 'bun:test'
|
||||
import { describe, it, expect, beforeAll, beforeEach, afterEach, mock, spyOn } from 'bun:test';
|
||||
|
||||
type StorageEntry = { value: unknown }
|
||||
type StorageEntry = { value: unknown };
|
||||
|
||||
const notificationMock = {
|
||||
info: mock(() => {}),
|
||||
|
|
@ -8,515 +8,527 @@ const notificationMock = {
|
|||
warning: mock(() => {}),
|
||||
error: mock(() => {}),
|
||||
notify: mock(() => {}),
|
||||
}
|
||||
};
|
||||
|
||||
const runtimeConfig = {
|
||||
app: {
|
||||
baseURL: '/base-path',
|
||||
},
|
||||
}
|
||||
};
|
||||
|
||||
mock.module('#imports', () => ({
|
||||
useRuntimeConfig: () => runtimeConfig,
|
||||
useNotification: () => notificationMock,
|
||||
}))
|
||||
}));
|
||||
|
||||
globalThis.useRuntimeConfig = () => runtimeConfig as any
|
||||
globalThis.useNotification = () => notificationMock as any
|
||||
globalThis.useRuntimeConfig = () => runtimeConfig as any;
|
||||
globalThis.useNotification = () => notificationMock as any;
|
||||
|
||||
const storageMap = new Map<string, StorageEntry | unknown>()
|
||||
const storageMap = new Map<string, StorageEntry | unknown>();
|
||||
|
||||
const useStorageFn = mock(<T>(key: string, defaultValue: T) => {
|
||||
if (!storageMap.has(key)) {
|
||||
storageMap.set(key, { value: defaultValue })
|
||||
storageMap.set(key, { value: defaultValue });
|
||||
}
|
||||
return storageMap.get(key)
|
||||
})
|
||||
return storageMap.get(key);
|
||||
});
|
||||
|
||||
mock.module('@vueuse/core', () => ({
|
||||
useStorage: useStorageFn,
|
||||
}))
|
||||
}));
|
||||
|
||||
const clipboardWriteMock = mock(() => Promise.resolve())
|
||||
const fetchMock = mock(() => Promise.resolve({ status: 200 } as Response))
|
||||
const clipboardWriteMock = mock(() => Promise.resolve());
|
||||
const fetchMock = mock(() => Promise.resolve({ status: 200 } as Response));
|
||||
const getRandomValuesMock = mock((buffer: Uint8Array) => {
|
||||
buffer.fill(1)
|
||||
return buffer
|
||||
})
|
||||
buffer.fill(1);
|
||||
return buffer;
|
||||
});
|
||||
|
||||
const originalFetch = globalThis.fetch
|
||||
const originalClipboard = globalThis.navigator?.clipboard
|
||||
const originalCrypto = globalThis.crypto
|
||||
const originalFetch = globalThis.fetch;
|
||||
const originalClipboard = globalThis.navigator?.clipboard;
|
||||
const originalCrypto = globalThis.crypto;
|
||||
|
||||
let utils: Awaited<typeof import('~/utils/index')>
|
||||
let fetchSpy: ReturnType<typeof spyOn> | undefined
|
||||
let utils: Awaited<typeof import('~/utils/index')>;
|
||||
let fetchSpy: ReturnType<typeof spyOn> | undefined;
|
||||
|
||||
const resetStorage = () => {
|
||||
storageMap.clear()
|
||||
storageMap.set('random_bg', { value: true })
|
||||
storageMap.set('random_bg_opacity', { value: 0.95 })
|
||||
}
|
||||
|
||||
storageMap.clear();
|
||||
storageMap.set('random_bg', { value: true });
|
||||
storageMap.set('random_bg_opacity', { value: 0.95 });
|
||||
};
|
||||
|
||||
beforeAll(async () => {
|
||||
utils = await import('~/utils/index')
|
||||
})
|
||||
utils = await import('~/utils/index');
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
resetStorage()
|
||||
runtimeConfig.app.baseURL = '/base-path'
|
||||
notificationMock.info.mockClear()
|
||||
notificationMock.success.mockClear()
|
||||
notificationMock.warning.mockClear()
|
||||
notificationMock.error.mockClear()
|
||||
notificationMock.notify.mockClear()
|
||||
useStorageFn.mockClear()
|
||||
resetStorage();
|
||||
runtimeConfig.app.baseURL = '/base-path';
|
||||
notificationMock.info.mockClear();
|
||||
notificationMock.success.mockClear();
|
||||
notificationMock.warning.mockClear();
|
||||
notificationMock.error.mockClear();
|
||||
notificationMock.notify.mockClear();
|
||||
useStorageFn.mockClear();
|
||||
|
||||
fetchMock.mockClear()
|
||||
clipboardWriteMock.mockClear()
|
||||
getRandomValuesMock.mockClear()
|
||||
fetchMock.mockClear();
|
||||
clipboardWriteMock.mockClear();
|
||||
getRandomValuesMock.mockClear();
|
||||
|
||||
if (typeof originalFetch === 'function') {
|
||||
fetchSpy = spyOn(globalThis, 'fetch')
|
||||
fetchSpy.mockImplementation(fetchMock as any)
|
||||
fetchSpy = spyOn(globalThis, 'fetch');
|
||||
fetchSpy.mockImplementation(fetchMock as any);
|
||||
} else {
|
||||
;(globalThis as any).fetch = fetchMock
|
||||
fetchSpy = undefined
|
||||
(globalThis as any).fetch = fetchMock;
|
||||
fetchSpy = undefined;
|
||||
}
|
||||
|
||||
Object.defineProperty(navigator, 'clipboard', {
|
||||
configurable: true,
|
||||
value: { writeText: clipboardWriteMock },
|
||||
})
|
||||
});
|
||||
|
||||
Object.defineProperty(globalThis, 'crypto', {
|
||||
configurable: true,
|
||||
value: { getRandomValues: getRandomValuesMock },
|
||||
})
|
||||
});
|
||||
Object.defineProperty(window as any, 'crypto', {
|
||||
configurable: true,
|
||||
value: { getRandomValues: getRandomValuesMock },
|
||||
})
|
||||
})
|
||||
});
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
if (fetchSpy) {
|
||||
fetchSpy.mockRestore()
|
||||
fetchSpy.mockRestore();
|
||||
} else if (!originalFetch) {
|
||||
delete (globalThis as any).fetch
|
||||
delete (globalThis as any).fetch;
|
||||
} else {
|
||||
globalThis.fetch = originalFetch
|
||||
globalThis.fetch = originalFetch;
|
||||
}
|
||||
|
||||
if (originalClipboard) {
|
||||
Object.defineProperty(navigator, 'clipboard', {
|
||||
configurable: true,
|
||||
value: originalClipboard,
|
||||
})
|
||||
});
|
||||
} else {
|
||||
delete (navigator as any).clipboard
|
||||
delete (navigator as any).clipboard;
|
||||
}
|
||||
|
||||
Object.defineProperty(globalThis, 'crypto', {
|
||||
configurable: true,
|
||||
value: originalCrypto,
|
||||
})
|
||||
});
|
||||
Object.defineProperty(window as any, 'crypto', {
|
||||
configurable: true,
|
||||
value: originalCrypto,
|
||||
})
|
||||
});
|
||||
|
||||
if (document.body) {
|
||||
document.body.innerHTML = ''
|
||||
document.body.removeAttribute('style')
|
||||
document.body.innerHTML = '';
|
||||
document.body.removeAttribute('style');
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
describe('utils/index setup', () => {
|
||||
it('exposes core utilities after mocks initialize', () => {
|
||||
expect(Array.isArray(utils.separators)).toBe(true)
|
||||
expect(typeof utils.getValue).toBe('function')
|
||||
})
|
||||
})
|
||||
expect(Array.isArray(utils.separators)).toBe(true);
|
||||
expect(typeof utils.getValue).toBe('function');
|
||||
});
|
||||
});
|
||||
|
||||
describe('object access helpers', () => {
|
||||
it('getValue resolves direct values and callables', () => {
|
||||
expect(utils.getValue(5)).toBe(5)
|
||||
expect(utils.getValue(() => 7)).toBe(7)
|
||||
})
|
||||
expect(utils.getValue(5)).toBe(5);
|
||||
expect(utils.getValue(() => 7)).toBe(7);
|
||||
});
|
||||
|
||||
it('ag returns nested value or default value', () => {
|
||||
const payload = { a: { b: { c: 42 } } }
|
||||
expect(utils.ag(payload, 'a.b.c')).toBe(42)
|
||||
expect(utils.ag(payload, 'a.b.x', 'fallback')).toBe('fallback')
|
||||
expect(utils.ag(payload, 'missing', () => 'fn-default')).toBe('fn-default')
|
||||
})
|
||||
const payload = { a: { b: { c: 42 } } };
|
||||
expect(utils.ag(payload, 'a.b.c')).toBe(42);
|
||||
expect(utils.ag(payload, 'a.b.x', 'fallback')).toBe('fallback');
|
||||
expect(utils.ag(payload, 'missing', () => 'fn-default')).toBe('fn-default');
|
||||
});
|
||||
|
||||
it('ag_set sets nested path creating objects as needed', () => {
|
||||
const payload: Record<string, unknown> = {}
|
||||
utils.ag_set(payload, 'a.b.c', 99)
|
||||
expect(payload).toEqual({ a: { b: { c: 99 } } })
|
||||
})
|
||||
const payload: Record<string, unknown> = {};
|
||||
utils.ag_set(payload, 'a.b.c', 99);
|
||||
expect(payload).toEqual({ a: { b: { c: 99 } } });
|
||||
});
|
||||
|
||||
it('cleanObject removes requested keys', () => {
|
||||
const source = { id: 1, keep: true, drop: false }
|
||||
expect(utils.cleanObject(source, ['drop'])).toEqual({ id: 1, keep: true })
|
||||
expect(utils.cleanObject(source, [])).toEqual(source)
|
||||
})
|
||||
const source = { id: 1, keep: true, drop: false };
|
||||
expect(utils.cleanObject(source, ['drop'])).toEqual({ id: 1, keep: true });
|
||||
expect(utils.cleanObject(source, [])).toEqual(source);
|
||||
});
|
||||
|
||||
it('stripPath removes base prefix and leading slashes', () => {
|
||||
expect(utils.stripPath('/data/downloads', '/data/downloads/video.mp4')).toBe('video.mp4')
|
||||
expect(utils.stripPath('', '/var/files/test.txt')).toBe('/var/files/test.txt')
|
||||
})
|
||||
})
|
||||
expect(utils.stripPath('/data/downloads', '/data/downloads/video.mp4')).toBe('video.mp4');
|
||||
expect(utils.stripPath('', '/var/files/test.txt')).toBe('/var/files/test.txt');
|
||||
});
|
||||
});
|
||||
|
||||
describe('string manipulation helpers', () => {
|
||||
it('r replaces tokens with context values', () => {
|
||||
const result = utils.r('Hello {user.name}!', { user: { name: 'YTPTube' } })
|
||||
expect(result).toBe('Hello YTPTube!')
|
||||
})
|
||||
const result = utils.r('Hello {user.name}!', { user: { name: 'YTPTube' } });
|
||||
expect(result).toBe('Hello YTPTube!');
|
||||
});
|
||||
|
||||
it('iTrim trims delimiters at requested positions', () => {
|
||||
expect(utils.iTrim('--value--', '-', 'both')).toBe('value')
|
||||
expect(utils.iTrim('::value', ':', 'start')).toBe('value')
|
||||
expect(utils.iTrim('value::', ':', 'end')).toBe('value')
|
||||
})
|
||||
expect(utils.iTrim('--value--', '-', 'both')).toBe('value');
|
||||
expect(utils.iTrim('::value', ':', 'start')).toBe('value');
|
||||
expect(utils.iTrim('value::', ':', 'end')).toBe('value');
|
||||
});
|
||||
|
||||
it('iTrim handles forward slash delimiter', () => {
|
||||
expect(utils.iTrim('//value//', '/', 'both')).toBe('value')
|
||||
expect(utils.iTrim('/value', '/', 'start')).toBe('value')
|
||||
expect(utils.iTrim('value/', '/', 'end')).toBe('value')
|
||||
expect(utils.iTrim('///multiple///', '/', 'both')).toBe('multiple')
|
||||
})
|
||||
expect(utils.iTrim('//value//', '/', 'both')).toBe('value');
|
||||
expect(utils.iTrim('/value', '/', 'start')).toBe('value');
|
||||
expect(utils.iTrim('value/', '/', 'end')).toBe('value');
|
||||
expect(utils.iTrim('///multiple///', '/', 'both')).toBe('multiple');
|
||||
});
|
||||
|
||||
it('iTrim handles backslash delimiter', () => {
|
||||
expect(utils.iTrim('\\\\value\\\\', '\\', 'both')).toBe('value')
|
||||
expect(utils.iTrim('\\value', '\\', 'start')).toBe('value')
|
||||
expect(utils.iTrim('value\\', '\\', 'end')).toBe('value')
|
||||
})
|
||||
expect(utils.iTrim('\\\\value\\\\', '\\', 'both')).toBe('value');
|
||||
expect(utils.iTrim('\\value', '\\', 'start')).toBe('value');
|
||||
expect(utils.iTrim('value\\', '\\', 'end')).toBe('value');
|
||||
});
|
||||
|
||||
it('iTrim handles hyphen delimiter', () => {
|
||||
expect(utils.iTrim('--value--', '-', 'both')).toBe('value')
|
||||
expect(utils.iTrim('-value', '-', 'start')).toBe('value')
|
||||
expect(utils.iTrim('value-', '-', 'end')).toBe('value')
|
||||
expect(utils.iTrim('---multiple---', '-', 'both')).toBe('multiple')
|
||||
})
|
||||
expect(utils.iTrim('--value--', '-', 'both')).toBe('value');
|
||||
expect(utils.iTrim('-value', '-', 'start')).toBe('value');
|
||||
expect(utils.iTrim('value-', '-', 'end')).toBe('value');
|
||||
expect(utils.iTrim('---multiple---', '-', 'both')).toBe('multiple');
|
||||
});
|
||||
|
||||
it('iTrim handles caret delimiter', () => {
|
||||
expect(utils.iTrim('^^value^^', '^', 'both')).toBe('value')
|
||||
expect(utils.iTrim('^value', '^', 'start')).toBe('value')
|
||||
expect(utils.iTrim('value^', '^', 'end')).toBe('value')
|
||||
})
|
||||
expect(utils.iTrim('^^value^^', '^', 'both')).toBe('value');
|
||||
expect(utils.iTrim('^value', '^', 'start')).toBe('value');
|
||||
expect(utils.iTrim('value^', '^', 'end')).toBe('value');
|
||||
});
|
||||
|
||||
it('iTrim handles bracket delimiters', () => {
|
||||
expect(utils.iTrim('[[value]]', '[', 'both')).toBe('value]]')
|
||||
expect(utils.iTrim(']]value[[', ']', 'both')).toBe('value[[')
|
||||
})
|
||||
expect(utils.iTrim('[[value]]', '[', 'both')).toBe('value]]');
|
||||
expect(utils.iTrim(']]value[[', ']', 'both')).toBe('value[[');
|
||||
});
|
||||
|
||||
it('iTrim handles dot delimiter', () => {
|
||||
expect(utils.iTrim('..value..', '.', 'both')).toBe('value')
|
||||
expect(utils.iTrim('.value', '.', 'start')).toBe('value')
|
||||
expect(utils.iTrim('value.', '.', 'end')).toBe('value')
|
||||
})
|
||||
expect(utils.iTrim('..value..', '.', 'both')).toBe('value');
|
||||
expect(utils.iTrim('.value', '.', 'start')).toBe('value');
|
||||
expect(utils.iTrim('value.', '.', 'end')).toBe('value');
|
||||
});
|
||||
|
||||
it('iTrim handles special regex characters', () => {
|
||||
expect(utils.iTrim('**value**', '*', 'both')).toBe('value')
|
||||
expect(utils.iTrim('++value++', '+', 'both')).toBe('value')
|
||||
expect(utils.iTrim('??value??', '?', 'both')).toBe('value')
|
||||
expect(utils.iTrim('||value||', '|', 'both')).toBe('value')
|
||||
expect(utils.iTrim('((value))', '(', 'both')).toBe('value))')
|
||||
expect(utils.iTrim('((value))', ')', 'both')).toBe('((value')
|
||||
})
|
||||
expect(utils.iTrim('**value**', '*', 'both')).toBe('value');
|
||||
expect(utils.iTrim('++value++', '+', 'both')).toBe('value');
|
||||
expect(utils.iTrim('??value??', '?', 'both')).toBe('value');
|
||||
expect(utils.iTrim('||value||', '|', 'both')).toBe('value');
|
||||
expect(utils.iTrim('((value))', '(', 'both')).toBe('value))');
|
||||
expect(utils.iTrim('((value))', ')', 'both')).toBe('((value');
|
||||
});
|
||||
|
||||
it('iTrim handles empty string', () => {
|
||||
expect(utils.iTrim('', '/', 'both')).toBe('')
|
||||
})
|
||||
expect(utils.iTrim('', '/', 'both')).toBe('');
|
||||
});
|
||||
|
||||
it('iTrim throws error when delimiter is empty', () => {
|
||||
expect(() => utils.iTrim('value', '', 'both')).toThrow('Delimiter is required')
|
||||
})
|
||||
expect(() => utils.iTrim('value', '', 'both')).toThrow('Delimiter is required');
|
||||
});
|
||||
|
||||
it('iTrim preserves middle occurrences', () => {
|
||||
expect(utils.iTrim('/path/to/file/', '/', 'both')).toBe('path/to/file')
|
||||
expect(utils.iTrim('//path//to//file//', '/', 'both')).toBe('path//to//file')
|
||||
})
|
||||
expect(utils.iTrim('/path/to/file/', '/', 'both')).toBe('path/to/file');
|
||||
expect(utils.iTrim('//path//to//file//', '/', 'both')).toBe('path//to//file');
|
||||
});
|
||||
|
||||
it('eTrim and sTrim delegate to iTrim ends', () => {
|
||||
expect(utils.eTrim('##name##', '#')).toBe('##name')
|
||||
expect(utils.sTrim('##name##', '#')).toBe('name##')
|
||||
})
|
||||
expect(utils.eTrim('##name##', '#')).toBe('##name');
|
||||
expect(utils.sTrim('##name##', '#')).toBe('name##');
|
||||
});
|
||||
|
||||
it('ucFirst capitalizes first character', () => {
|
||||
expect(utils.ucFirst('ytp')).toBe('Ytp')
|
||||
expect(utils.ucFirst('')).toBe('')
|
||||
})
|
||||
expect(utils.ucFirst('ytp')).toBe('Ytp');
|
||||
expect(utils.ucFirst('')).toBe('');
|
||||
});
|
||||
|
||||
it('encodePath safely encodes components', () => {
|
||||
expect(utils.encodePath('folder#1/video name.mp4')).toBe('folder%231/video%20name.mp4')
|
||||
})
|
||||
expect(utils.encodePath('folder#1/video name.mp4')).toBe('folder%231/video%20name.mp4');
|
||||
});
|
||||
|
||||
it('encodePath handles % character correctly', () => {
|
||||
expect(utils.encodePath('How to enjoy Shin Ramyun 100%.opus')).toBe('How%20to%20enjoy%20Shin%20Ramyun%20100%25.opus')
|
||||
})
|
||||
expect(utils.encodePath('How to enjoy Shin Ramyun 100%.opus')).toBe(
|
||||
'How%20to%20enjoy%20Shin%20Ramyun%20100%25.opus',
|
||||
);
|
||||
});
|
||||
|
||||
it('encodePath handles multiple special characters', () => {
|
||||
expect(utils.encodePath('100% complete [HD] #1.mp4')).toBe('100%25%20complete%20%5BHD%5D%20%231.mp4')
|
||||
})
|
||||
expect(utils.encodePath('100% complete [HD] #1.mp4')).toBe(
|
||||
'100%25%20complete%20%5BHD%5D%20%231.mp4',
|
||||
);
|
||||
});
|
||||
|
||||
it('encodePath handles paths with % character', () => {
|
||||
expect(utils.encodePath('folder/How to enjoy Shin Ramyun 100%.opus')).toBe('folder/How%20to%20enjoy%20Shin%20Ramyun%20100%25.opus')
|
||||
})
|
||||
expect(utils.encodePath('folder/How to enjoy Shin Ramyun 100%.opus')).toBe(
|
||||
'folder/How%20to%20enjoy%20Shin%20Ramyun%20100%25.opus',
|
||||
);
|
||||
});
|
||||
|
||||
it('encodePath handles already encoded strings', () => {
|
||||
expect(utils.encodePath('How%20to%20enjoy%20Shin%20Ramyun%20100%25.opus')).toBe('How%20to%20enjoy%20Shin%20Ramyun%20100%25.opus')
|
||||
})
|
||||
expect(utils.encodePath('How%20to%20enjoy%20Shin%20Ramyun%20100%25.opus')).toBe(
|
||||
'How%20to%20enjoy%20Shin%20Ramyun%20100%25.opus',
|
||||
);
|
||||
});
|
||||
|
||||
it('encodePath handles mixed encoded and unencoded', () => {
|
||||
expect(utils.encodePath('folder/file%20name 100%.mp4')).toBe('folder/file%20name%20100%25.mp4')
|
||||
})
|
||||
expect(utils.encodePath('folder/file%20name 100%.mp4')).toBe('folder/file%20name%20100%25.mp4');
|
||||
});
|
||||
|
||||
it('encodePath handles special characters &, =, ?', () => {
|
||||
expect(utils.encodePath('query?param=value&key=100%.mp4')).toBe('query%3Fparam%3Dvalue%26key%3D100%25.mp4')
|
||||
})
|
||||
expect(utils.encodePath('query?param=value&key=100%.mp4')).toBe(
|
||||
'query%3Fparam%3Dvalue%26key%3D100%25.mp4',
|
||||
);
|
||||
});
|
||||
|
||||
it('encodePath handles empty string', () => {
|
||||
expect(utils.encodePath('')).toBe('')
|
||||
})
|
||||
expect(utils.encodePath('')).toBe('');
|
||||
});
|
||||
|
||||
it('encodePath handles simple filename', () => {
|
||||
expect(utils.encodePath('video.mp4')).toBe('video.mp4')
|
||||
})
|
||||
expect(utils.encodePath('video.mp4')).toBe('video.mp4');
|
||||
});
|
||||
|
||||
it('encodePath handles unicode characters', () => {
|
||||
expect(utils.encodePath('视频文件.mp4')).toBe('%E8%A7%86%E9%A2%91%E6%96%87%E4%BB%B6.mp4')
|
||||
})
|
||||
expect(utils.encodePath('视频文件.mp4')).toBe('%E8%A7%86%E9%A2%91%E6%96%87%E4%BB%B6.mp4');
|
||||
});
|
||||
|
||||
it('encodePath handles parentheses', () => {
|
||||
expect(utils.encodePath('video (1080p).mp4')).toBe('video%20(1080p).mp4')
|
||||
})
|
||||
expect(utils.encodePath('video (1080p).mp4')).toBe('video%20(1080p).mp4');
|
||||
});
|
||||
|
||||
it('removeANSIColors strips escape codes', () => {
|
||||
const sample = '\u001b[31mError\u001b[0m'
|
||||
expect(utils.removeANSIColors(sample)).toBe('Error')
|
||||
})
|
||||
const sample = '\u001b[31mError\u001b[0m';
|
||||
expect(utils.removeANSIColors(sample)).toBe('Error');
|
||||
});
|
||||
|
||||
it('dec2hex converts to two character hex strings', () => {
|
||||
expect(utils.dec2hex(15)).toBe('0f')
|
||||
expect(utils.dec2hex(255)).toBe('ff')
|
||||
})
|
||||
expect(utils.dec2hex(15)).toBe('0f');
|
||||
expect(utils.dec2hex(255)).toBe('ff');
|
||||
});
|
||||
|
||||
it('basename returns final segment optionally trimming extension', () => {
|
||||
expect(utils.basename('/downloads/video.mp4')).toBe('video.mp4')
|
||||
expect(utils.basename('/downloads/video.mp4', '.mp4')).toBe('video')
|
||||
expect(utils.basename('', '.mp4')).toBe('')
|
||||
})
|
||||
expect(utils.basename('/downloads/video.mp4')).toBe('video.mp4');
|
||||
expect(utils.basename('/downloads/video.mp4', '.mp4')).toBe('video');
|
||||
expect(utils.basename('', '.mp4')).toBe('');
|
||||
});
|
||||
|
||||
it('dirname returns parent directory', () => {
|
||||
expect(utils.dirname('/downloads/video.mp4')).toBe('/downloads')
|
||||
expect(utils.dirname('video.mp4')).toBe('.')
|
||||
expect(utils.dirname('/file')).toBe('/')
|
||||
})
|
||||
expect(utils.dirname('/downloads/video.mp4')).toBe('/downloads');
|
||||
expect(utils.dirname('video.mp4')).toBe('.');
|
||||
expect(utils.dirname('/file')).toBe('/');
|
||||
});
|
||||
|
||||
it('formatBytes returns human readable strings', () => {
|
||||
expect(utils.formatBytes(0)).toBe('0 Bytes')
|
||||
expect(utils.formatBytes(1024)).toBe('1 KiB')
|
||||
})
|
||||
expect(utils.formatBytes(0)).toBe('0 Bytes');
|
||||
expect(utils.formatBytes(1024)).toBe('1 KiB');
|
||||
});
|
||||
|
||||
it('formatTime renders hh:mm:ss or mm:ss', () => {
|
||||
expect(utils.formatTime(59)).toBe('59')
|
||||
expect(utils.formatTime(90)).toBe('01:30')
|
||||
expect(utils.formatTime(3661)).toBe('01:01:01')
|
||||
})
|
||||
expect(utils.formatTime(59)).toBe('59');
|
||||
expect(utils.formatTime(90)).toBe('01:30');
|
||||
expect(utils.formatTime(3661)).toBe('01:01:01');
|
||||
});
|
||||
|
||||
it('getSeparatorsName returns human readable label', () => {
|
||||
expect(utils.getSeparatorsName(',')).toContain('Comma')
|
||||
expect(utils.getSeparatorsName('*')).toBe('Unknown')
|
||||
})
|
||||
})
|
||||
expect(utils.getSeparatorsName(',')).toContain('Comma');
|
||||
expect(utils.getSeparatorsName('*')).toBe('Unknown');
|
||||
});
|
||||
});
|
||||
|
||||
describe('data conversion helpers', () => {
|
||||
it('has_data detects arrays, objects, and json strings', () => {
|
||||
expect(utils.has_data({ key: 'value' })).toBe(true)
|
||||
expect(utils.has_data('""')).toBe(false)
|
||||
expect(utils.has_data('[1,2]')).toBe(true)
|
||||
expect(utils.has_data('')).toBe(false)
|
||||
})
|
||||
expect(utils.has_data({ key: 'value' })).toBe(true);
|
||||
expect(utils.has_data('""')).toBe(false);
|
||||
expect(utils.has_data('[1,2]')).toBe(true);
|
||||
expect(utils.has_data('')).toBe(false);
|
||||
});
|
||||
|
||||
it('encode and decode provide reversible transformation', () => {
|
||||
const payload = { name: 'YTPTube', count: 2 }
|
||||
const encoded = utils.encode(payload)
|
||||
expect(typeof encoded).toBe('string')
|
||||
expect(utils.decode(encoded)).toEqual(payload)
|
||||
})
|
||||
const payload = { name: 'YTPTube', count: 2 };
|
||||
const encoded = utils.encode(payload);
|
||||
expect(typeof encoded).toBe('string');
|
||||
expect(utils.decode(encoded)).toEqual(payload);
|
||||
});
|
||||
|
||||
it('makePagination builds a ranged pagination list', () => {
|
||||
const pages = utils.makePagination(5, 10, 1)
|
||||
const selected = pages.find((page: any) => page.selected)
|
||||
expect(selected?.page).toBe(5)
|
||||
expect(pages.length).toBeGreaterThan(0)
|
||||
expect(pages[0]?.page).toBe(1)
|
||||
expect(pages[pages.length - 1]?.page).toBe(10)
|
||||
})
|
||||
const pages = utils.makePagination(5, 10, 1);
|
||||
const selected = pages.find((page: any) => page.selected);
|
||||
expect(selected?.page).toBe(5);
|
||||
expect(pages.length).toBeGreaterThan(0);
|
||||
expect(pages[0]?.page).toBe(1);
|
||||
expect(pages[pages.length - 1]?.page).toBe(10);
|
||||
});
|
||||
|
||||
it('getQueryParams parses query strings', () => {
|
||||
expect(utils.getQueryParams('?a=1&b=two')).toEqual({ a: '1', b: 'two' })
|
||||
})
|
||||
expect(utils.getQueryParams('?a=1&b=two')).toEqual({ a: '1', b: 'two' });
|
||||
});
|
||||
|
||||
it('uri prefixes runtime base path', () => {
|
||||
runtimeConfig.app.baseURL = '/base-path'
|
||||
expect(utils.uri('/api/test')).toBe('/base-path/api/test')
|
||||
runtimeConfig.app.baseURL = '/'
|
||||
expect(utils.uri('/api/test')).toBe('/api/test')
|
||||
})
|
||||
runtimeConfig.app.baseURL = '/base-path';
|
||||
expect(utils.uri('/api/test')).toBe('/base-path/api/test');
|
||||
runtimeConfig.app.baseURL = '/';
|
||||
expect(utils.uri('/api/test')).toBe('/api/test');
|
||||
});
|
||||
|
||||
it('makeDownload builds expected url with folder and filename', () => {
|
||||
runtimeConfig.app.baseURL = '/base-path'
|
||||
const url = utils.makeDownload({}, { folder: 'music', filename: 'song.mp3' })
|
||||
expect(url).toBe('/base-path/api/download/music/song.mp3')
|
||||
})
|
||||
runtimeConfig.app.baseURL = '/base-path';
|
||||
const url = utils.makeDownload({}, { folder: 'music', filename: 'song.mp3' });
|
||||
expect(url).toBe('/base-path/api/download/music/song.mp3');
|
||||
});
|
||||
|
||||
it('makeDownload handles m3u8 base path', () => {
|
||||
const url = utils.makeDownload({}, { filename: 'playlist' }, 'm3u8')
|
||||
expect(url).toBe('/base-path/api/player/m3u8/video/playlist.m3u8')
|
||||
})
|
||||
})
|
||||
const url = utils.makeDownload({}, { filename: 'playlist' }, 'm3u8');
|
||||
expect(url).toBe('/base-path/api/player/m3u8/video/playlist.m3u8');
|
||||
});
|
||||
});
|
||||
|
||||
describe('dom and browser helpers', () => {
|
||||
it('dEvent dispatches custom event with detail payload', () => {
|
||||
const detail = { foo: 'bar' }
|
||||
let received: unknown = null
|
||||
const detail = { foo: 'bar' };
|
||||
let received: unknown = null;
|
||||
const listener = (event: Event) => {
|
||||
received = (event as CustomEvent).detail
|
||||
}
|
||||
received = (event as CustomEvent).detail;
|
||||
};
|
||||
|
||||
window.addEventListener('custom-detail', listener)
|
||||
const dispatched = utils.dEvent('custom-detail', detail)
|
||||
window.removeEventListener('custom-detail', listener)
|
||||
window.addEventListener('custom-detail', listener);
|
||||
const dispatched = utils.dEvent('custom-detail', detail);
|
||||
window.removeEventListener('custom-detail', listener);
|
||||
|
||||
expect(dispatched).toBe(true)
|
||||
expect(received).toEqual(detail)
|
||||
})
|
||||
expect(dispatched).toBe(true);
|
||||
expect(received).toEqual(detail);
|
||||
});
|
||||
|
||||
it('toggleClass adds and removes classes', () => {
|
||||
const el = document.createElement('div')
|
||||
utils.toggleClass(el, 'active')
|
||||
expect(el.classList.contains('active')).toBe(true)
|
||||
utils.toggleClass(el, 'active')
|
||||
expect(el.classList.contains('active')).toBe(false)
|
||||
})
|
||||
const el = document.createElement('div');
|
||||
utils.toggleClass(el, 'active');
|
||||
expect(el.classList.contains('active')).toBe(true);
|
||||
utils.toggleClass(el, 'active');
|
||||
expect(el.classList.contains('active')).toBe(false);
|
||||
});
|
||||
|
||||
it('copyText uses clipboard API and notifies success', async () => {
|
||||
utils.copyText('sample')
|
||||
utils.copyText('sample');
|
||||
|
||||
await Promise.resolve()
|
||||
await Promise.resolve();
|
||||
|
||||
expect(clipboardWriteMock).toHaveBeenCalledWith('sample')
|
||||
expect(clipboardWriteMock).toHaveBeenCalledWith('sample');
|
||||
|
||||
await Promise.resolve()
|
||||
await Promise.resolve();
|
||||
|
||||
expect(notificationMock.success).toHaveBeenCalledWith('Text copied to clipboard.')
|
||||
})
|
||||
expect(notificationMock.success).toHaveBeenCalledWith('Text copied to clipboard.');
|
||||
});
|
||||
|
||||
it('disableOpacity toggles body opacity when enabled', () => {
|
||||
const result = utils.disableOpacity()
|
||||
expect(result).toBe(true)
|
||||
expect(document.body.getAttribute('style')).toBe('opacity: 1.0')
|
||||
})
|
||||
const result = utils.disableOpacity();
|
||||
expect(result).toBe(true);
|
||||
expect(document.body.getAttribute('style')).toBe('opacity: 1.0');
|
||||
});
|
||||
|
||||
it('disableOpacity returns false when background disabled', () => {
|
||||
document.body.removeAttribute('style')
|
||||
storageMap.clear()
|
||||
document.body.removeAttribute('style');
|
||||
storageMap.clear();
|
||||
const originalOpacity = document.body.style.opacity;
|
||||
useStorageFn.mockImplementation((key: string, defaultValue: any) => {
|
||||
if (key === 'random_bg') {
|
||||
return null
|
||||
return null;
|
||||
}
|
||||
if (!storageMap.has(key)) {
|
||||
storageMap.set(key, { value: defaultValue })
|
||||
storageMap.set(key, { value: defaultValue });
|
||||
}
|
||||
return storageMap.get(key)
|
||||
})
|
||||
return storageMap.get(key);
|
||||
});
|
||||
|
||||
const result = utils.disableOpacity()
|
||||
expect(result).toBe(false)
|
||||
expect(document.body.getAttribute('style')).toBeNull()
|
||||
})
|
||||
const result = utils.disableOpacity();
|
||||
expect(result).toBe(false);
|
||||
expect(document.body.getAttribute('style')).toBeNull();
|
||||
expect(document.body.style.opacity || '').toBe(originalOpacity || '');
|
||||
});
|
||||
|
||||
it('enableOpacity applies stored opacity value', () => {
|
||||
utils.disableOpacity();
|
||||
useStorageFn.mockImplementation((key: string, defaultValue: any) => {
|
||||
if (!storageMap.has(key)) {
|
||||
storageMap.set(key, { value: defaultValue })
|
||||
storageMap.set(key, { value: defaultValue });
|
||||
}
|
||||
return storageMap.get(key)
|
||||
})
|
||||
return storageMap.get(key);
|
||||
});
|
||||
|
||||
storageMap.set('random_bg_opacity', { value: 0.75 })
|
||||
const result = utils.enableOpacity()
|
||||
expect(result).toBe(true)
|
||||
expect(document.body.getAttribute('style')).toBe('opacity: 0.75')
|
||||
})
|
||||
})
|
||||
storageMap.set('random_bg_opacity', { value: 0.75 });
|
||||
const result = utils.enableOpacity();
|
||||
expect(result).toBe(true);
|
||||
expect(document.body.getAttribute('style')).toBe('opacity: 0.75');
|
||||
});
|
||||
});
|
||||
|
||||
describe('network and id helpers', () => {
|
||||
it('request prefixes relative urls and sets defaults', async () => {
|
||||
const responseMock = { status: 200 } as Response
|
||||
fetchMock.mockResolvedValue(responseMock)
|
||||
const responseMock = { status: 200 } as Response;
|
||||
fetchMock.mockResolvedValue(responseMock);
|
||||
|
||||
const response = await utils.request('/api/test')
|
||||
const response = await utils.request('/api/test');
|
||||
|
||||
expect(response).toBe(responseMock)
|
||||
expect(fetchMock).toHaveBeenCalledTimes(1)
|
||||
const [url, options] = fetchMock.mock.calls[0]!
|
||||
expect(url).toBe('/base-path/api/test')
|
||||
expect(options?.method).toBe('GET')
|
||||
expect(options?.credentials).toBe('same-origin')
|
||||
expect((options?.headers as Record<string, string>)['Content-Type']).toBe('application/json')
|
||||
expect((options?.headers as Record<string, string>)['Accept']).toBe('application/json')
|
||||
expect((options as Record<string, unknown>).withCredentials).toBe(true)
|
||||
})
|
||||
expect(response).toBe(responseMock);
|
||||
expect(fetchMock).toHaveBeenCalledTimes(1);
|
||||
const [url, options] = fetchMock.mock.calls[0]!;
|
||||
expect(url).toBe('/base-path/api/test');
|
||||
expect(options?.method).toBe('GET');
|
||||
expect(options?.credentials).toBe('same-origin');
|
||||
expect((options?.headers as Record<string, string>)['Content-Type']).toBe('application/json');
|
||||
expect((options?.headers as Record<string, string>)['Accept']).toBe('application/json');
|
||||
expect((options as Record<string, unknown>).withCredentials).toBe(true);
|
||||
});
|
||||
|
||||
it('convertCliOptions posts payload and returns parsed json', async () => {
|
||||
const jsonMock = mock().mockResolvedValue({ success: true })
|
||||
const responseMock = { status: 200, json: jsonMock }
|
||||
fetchMock.mockResolvedValue(responseMock)
|
||||
const jsonMock = mock().mockResolvedValue({ success: true });
|
||||
const responseMock = { status: 200, json: jsonMock };
|
||||
fetchMock.mockResolvedValue(responseMock);
|
||||
|
||||
const result = await utils.convertCliOptions('--help')
|
||||
const result = await utils.convertCliOptions('--help');
|
||||
|
||||
expect(fetchMock).toHaveBeenCalledTimes(1)
|
||||
const [url, options] = fetchMock.mock.calls[0]!
|
||||
expect(url).toBe('/base-path/api/yt-dlp/convert')
|
||||
expect(options?.method).toBe('POST')
|
||||
expect(options?.body).toBe(JSON.stringify({ args: '--help' }))
|
||||
expect(jsonMock).toHaveBeenCalled()
|
||||
expect(result).toEqual({ success: true })
|
||||
})
|
||||
expect(fetchMock).toHaveBeenCalledTimes(1);
|
||||
const [url, options] = fetchMock.mock.calls[0]!;
|
||||
expect(url).toBe('/base-path/api/yt-dlp/convert');
|
||||
expect(options?.method).toBe('POST');
|
||||
expect(options?.body).toBe(JSON.stringify({ args: '--help' }));
|
||||
expect(jsonMock).toHaveBeenCalled();
|
||||
expect(result).toEqual({ success: true });
|
||||
});
|
||||
|
||||
it('convertCliOptions throws on non-200 response', async () => {
|
||||
const jsonMock = mock().mockResolvedValue({ error: 'fail' })
|
||||
const responseMock = { status: 400, json: jsonMock }
|
||||
fetchMock.mockResolvedValue(responseMock)
|
||||
const jsonMock = mock().mockResolvedValue({ error: 'fail' });
|
||||
const responseMock = { status: 400, json: jsonMock };
|
||||
fetchMock.mockResolvedValue(responseMock);
|
||||
|
||||
await expect(utils.convertCliOptions('--bad')).rejects.toThrow('Error: (400): fail')
|
||||
})
|
||||
await expect(utils.convertCliOptions('--bad')).rejects.toThrow('Error: (400): fail');
|
||||
});
|
||||
|
||||
it('makeId uses crypto random values for deterministic id', () => {
|
||||
const id = utils.makeId(4)
|
||||
expect(id).toBe('0101')
|
||||
expect(getRandomValuesMock).toHaveBeenCalled()
|
||||
const typedArray = getRandomValuesMock.mock.calls[0]?.[0] as Uint8Array
|
||||
expect(typedArray).toBeInstanceOf(Uint8Array)
|
||||
expect(typedArray.length).toBe(2)
|
||||
})
|
||||
})
|
||||
const id = utils.makeId(4);
|
||||
expect(id).toBe('0101');
|
||||
expect(getRandomValuesMock).toHaveBeenCalled();
|
||||
const typedArray = getRandomValuesMock.mock.calls[0]?.[0] as Uint8Array;
|
||||
expect(typedArray).toBeInstanceOf(Uint8Array);
|
||||
expect(typedArray.length).toBe(2);
|
||||
});
|
||||
});
|
||||
|
||||
describe('async helpers', () => {
|
||||
it('awaiter resolves when test becomes truthy', async () => {
|
||||
const values = [false, false, 'done']
|
||||
const result = await utils.awaiter(() => values.shift(), 500, 0.01)
|
||||
expect(result).toBe('done')
|
||||
})
|
||||
const values = [false, false, 'done'];
|
||||
const result = await utils.awaiter(() => values.shift(), 500, 0.01);
|
||||
expect(result).toBe('done');
|
||||
});
|
||||
|
||||
it('awaiter returns false when timeout reached', async () => {
|
||||
const result = await utils.awaiter(() => false, 50, 0.01)
|
||||
expect(result).toBe(false)
|
||||
})
|
||||
})
|
||||
const result = await utils.awaiter(() => false, 50, 0.01);
|
||||
expect(result).toBe(false);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
20
ui/tests/utils/ytdlpOptions.test.ts
Normal file
20
ui/tests/utils/ytdlpOptions.test.ts
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
import { describe, expect, it } from 'bun:test';
|
||||
import {
|
||||
buildYtdlpGroupItems,
|
||||
normalizeYtdlpGroupFilter,
|
||||
YTDLP_ALL_GROUPS,
|
||||
} from '~/utils/ytdlpOptions';
|
||||
|
||||
describe('ytdlpOptions helpers', () => {
|
||||
it('uses a non-empty sentinel value for the all-groups option', () => {
|
||||
const items = buildYtdlpGroupItems(['root', 'video']);
|
||||
|
||||
expect(items[0]).toEqual({ label: 'All groups', value: YTDLP_ALL_GROUPS });
|
||||
expect(items.every((item) => item.value !== '')).toBe(true);
|
||||
});
|
||||
|
||||
it('normalizes the all-groups sentinel back to an empty filter', () => {
|
||||
expect(normalizeYtdlpGroupFilter(YTDLP_ALL_GROUPS)).toBe('');
|
||||
expect(normalizeYtdlpGroupFilter('root')).toBe('root');
|
||||
});
|
||||
});
|
||||
|
|
@ -13,45 +13,11 @@
|
|||
"contributions": {
|
||||
"html": {
|
||||
"vue-directives": [
|
||||
{
|
||||
"name": "tooltip",
|
||||
"description": "Create a tooltip for an element.",
|
||||
"doc-url": "",
|
||||
"attribute-value": {
|
||||
"type": "string",
|
||||
"required": true
|
||||
},
|
||||
"modifiers": [
|
||||
{
|
||||
"name": "top",
|
||||
"description": "Position the tooltip at the top of the element."
|
||||
},
|
||||
{
|
||||
"name": "bottom",
|
||||
"description": "Position the tooltip at the bottom of the element."
|
||||
},
|
||||
{
|
||||
"name": "left",
|
||||
"description": "Position the tooltip at the left of the element."
|
||||
},
|
||||
{
|
||||
"name": "right",
|
||||
"description": "Position the tooltip at the right of the element."
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "autoscroll",
|
||||
"description": "Automatically scroll to an element.",
|
||||
"doc-url": ""
|
||||
}
|
||||
],
|
||||
"vue-components": [
|
||||
{
|
||||
"name": "VTooltip",
|
||||
"description": "Create more advanced tooltips.",
|
||||
"doc-url": "https://floating-vue.starpad.dev/guide/component#tooltip"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue