@karibsen/eponyme 0.1.0 → 0.2.0

package/dist/runtime/components/editor/EponymeCollectionPage.vue

@@ -3,11 +3,11 @@ import { useAsyncData, useRequestFetch, useRoute, useRouter, useState } from "#a
 import { computed, ref, watch } from "vue";
 import { normalizeSlug } from "../../utils/normalize-slug";
 import { useEponymeAuth } from "../../composables/useEponymeAuth";
-import EPBadge from "../ui/EPBadge.vue";
 import EPButton from "../ui/EPButton.vue";
 import EPDialog from "../ui/EPDialog.vue";
 import EPFormField from "../ui/EPFormField.vue";
 import EPInputText from "../ui/EPInputText.vue";
+import { EPONYME_DATE_LOCALE } from "../../utils/date-locale";
 const props = defineProps({
   basePath: { type: String, required: true },
   name: { type: String, required: true },
@@ -24,12 +24,19 @@ const slugTouched = ref(false);
 const errors = ref({});
 const collectionEntries = useState("eponyme:collection-entries", () => ({}));
 const endpoint = computed(() => `/api/eponyme-collections/${props.name}`);
+const trashEndpoint = computed(() => `/api/eponyme-trash/${props.name}`);
 const auth = useEponymeAuth();
+const view = ref("entries");
 const { data: response, pending, refresh } = useAsyncData(
   `eponyme:collection:${props.name}`,
-  () => requestFetch(endpoint.value, { query: { version: "draft" } })
+  () => requestFetch(endpoint.value, { query: { version: "draft", raw: 1 } })
+);
+const { data: trashResponse, refresh: refreshTrash } = useAsyncData(
+  `eponyme:collection-trash:${props.name}`,
+  () => auth.canEdit.value ? requestFetch(trashEndpoint.value) : Promise.resolve({ entries: [] })
 );
 const entries = computed(() => response.value?.entries ?? []);
+const trashEntries = computed(() => trashResponse.value?.entries ?? []);
 const label = computed(() => props.definition.label || humanize(props.name.split("/").at(-1) || props.name));
 watch(title, (value) => {
   if (!slugTouched.value) slug.value = normalizeSlug(value);
@@ -87,12 +94,23 @@ async function createEntry() {
   }
 }
 async function deleteEntry(entry) {
-  if (!confirm(`Delete \u201C${entry.title}\u201D? This cannot be undone.`)) return;
+  if (!confirm(`Move \u201C${entry.title}\u201D to the trash? Its slug stays reserved until you restore it or delete it for good.`)) return;
   await requestFetch(`${endpoint.value}/${entry.slug}`, { method: "DELETE" });
-  await refresh();
+  await Promise.all([refresh(), refreshTrash()]);
+}
+async function restoreEntry(entry) {
+  await requestFetch(`${trashEndpoint.value}/${entry.slug}`, { method: "PATCH" });
+  await Promise.all([refresh(), refreshTrash()]);
+  if (!trashEntries.value.length) view.value = "entries";
+}
+async function purgeEntry(entry) {
+  if (!confirm(`Permanently delete \u201C${entry.title}\u201D? Its content and its whole history are lost. This cannot be undone.`)) return;
+  await requestFetch(`${trashEndpoint.value}/${entry.slug}`, { method: "DELETE" });
+  await refreshTrash();
+  if (!trashEntries.value.length) view.value = "entries";
 }
 function formatDate(value) {
-  return value ? new Intl.DateTimeFormat(void 0, { dateStyle: "medium", timeStyle: "short" }).format(new Date(value)) : "";
+  return value ? new Intl.DateTimeFormat(EPONYME_DATE_LOCALE, { dateStyle: "medium", timeStyle: "short" }).format(new Date(value)) : "";
 }
 </script>
 
@@ -113,17 +131,65 @@ function formatDate(value) {
           {{ definition.description }}
         </p>
       </div>
-      <EPButton
-        v-if="auth.canEdit.value"
-        variant="primary"
-        @click="createOpen = true"
-      >
-        + New {{ humanize(name.split("/").at(-1) || "entry").replace(/s$/, "") }}
-      </EPButton>
+      <div class="ep:flex ep:flex-wrap ep:items-center ep:gap-2">
+        <EPButton
+          v-if="auth.canEdit.value && trashEntries.length"
+          size="md"
+          :variant="view === 'trash' ? 'primary' : 'secondary'"
+          @click="view = view === 'trash' ? 'entries' : 'trash'"
+        >
+          Trash ({{ trashEntries.length }})
+        </EPButton>
+        <EPButton
+          v-if="auth.canEdit.value"
+          variant="primary"
+          @click="createOpen = true"
+        >
+          + New {{ humanize(name.split("/").at(-1) || "entry").replace(/s$/, "") }}
+        </EPButton>
+      </div>
     </header>
 
+    <div
+      v-if="view === 'trash'"
+      class="ep:mt-8 ep:grid ep:gap-3"
+    >
+      <p class="ep:m-0 ep:text-sm ep:text-muted-ep">
+        Trashed entries keep their history and their slug. Restore one to bring it back.
+      </p>
+      <article
+        v-for="entry in trashEntries"
+        :key="entry.slug"
+        class="ep:flex ep:flex-wrap ep:items-center ep:justify-between ep:gap-3 ep:rounded-xl ep:bg-selected-ep/50 ep:p-4"
+      >
+        <div
+          class="ep:min-w-0 ep:flex-1"
+          :title="entry.title"
+        >
+          <span class="ep:block ep:min-w-0 ep:overflow-hidden ep:text-ellipsis ep:whitespace-nowrap ep:text-sm ep:font-semibold ep:text-white">{{ truncateTitle(entry.title) }}</span>
+          <span class="ep:mt-1 ep:block ep:text-xs ep:text-muted-ep">{{ entry.deletedAt ? `Deleted ${formatDate(entry.deletedAt)}` : "Deleted" }}</span>
+        </div>
+        <div class="ep:flex ep:shrink-0 ep:gap-2">
+          <EPButton
+            size="sm"
+            @click="restoreEntry(entry)"
+          >
+            Restore
+          </EPButton>
+          <EPButton
+            v-if="auth.isOwner.value"
+            size="sm"
+            variant="danger"
+            @click="purgeEntry(entry)"
+          >
+            Delete for good
+          </EPButton>
+        </div>
+      </article>
+    </div>
+
     <p
-      v-if="pending"
+      v-else-if="pending"
       class="ep:mt-8 ep:text-sm ep:text-muted-ep"
     >
       Loading…
@@ -144,18 +210,14 @@ function formatDate(value) {
         >
           <span class="ep:flex ep:min-w-0 ep:items-center ep:gap-2">
             <span class="ep:min-w-0 ep:flex-1 ep:overflow-hidden ep:text-ellipsis ep:whitespace-nowrap ep:text-sm ep:font-semibold ep:text-white">{{ truncateTitle(entry.title) }}</span>
-            <EPBadge
-              class="ep:shrink-0"
-              :variant="entry.status === 'draft' ? 'warning' : 'success'"
-            >{{ entry.status }}</EPBadge>
           </span>
-          <span class="ep:mt-1 ep:block ep:text-xs ep:text-muted-ep">/{{ entry.slug }}<template v-if="entry.updatedAt"> · {{ formatDate(entry.updatedAt) }}</template></span>
+          <span class="ep:mt-1 ep:block ep:text-xs ep:text-muted-ep ep:capitalize">{{ entry.status }}<template v-if="entry.updatedAt"> · {{ formatDate(entry.updatedAt) }}</template></span>
         </NuxtLink>
         <EPButton
           v-if="auth.canEdit.value"
           size="sm"
           variant="danger"
-          class="ep:opacity-0 ep:group-hover:opacity-100 ep:focus-visible:opacity-100"
+          class="ep:shrink-0 ep:md:opacity-0 ep:md:group-hover:opacity-100 ep:md:focus-visible:opacity-100"
           @click="deleteEntry(entry)"
         >
           Delete

package/dist/runtime/components/editor/EponymeForm.vue

@@ -30,7 +30,7 @@ const previewPaths = runtimeConfig.public.eponyme?.previewPaths ?? {};
 const collectionNames = Object.keys(getEponymeCollections(useEponymeConfig()));
 const previewPath = computed(() => resolvePreviewPath(previewPaths, collectionNames, props.name));
 const auth = useEponymeAuth();
-const { data: eponymeData, errors: serverErrors, pending, status, publishedAt, refresh, save: persist } = useEponyme(props.name, { version: "draft" });
+const { data: eponymeData, errors: serverErrors, pending, status, publishedAt, refresh, save: persist } = useEponyme(props.name, { version: "draft", raw: true });
 const data = ref({});
 const savedData = ref({});
 const validation = useEponymeValidation(props.schema, data, savedData, { serverErrors });
@@ -64,10 +64,10 @@ watch(eponymeData, (value) => {
     data.value = next;
     savedData.value = cloneData(next);
   }
-}, { immediate: true });
+}, { immediate: true, flush: "sync" });
 watch(status, (value) => {
   entryStatuses.value = { ...entryStatuses.value, [props.name]: value };
-}, { immediate: true });
+}, { immediate: true, flush: "sync" });
 function cloneData(value) {
   return JSON.parse(JSON.stringify(value));
 }

package/dist/runtime/components/editor/EponymeFormPage.vue

@@ -7,6 +7,7 @@ import { useEponymeAuth } from "../../composables/useEponymeAuth";
 import EPBadge from "../ui/EPBadge.vue";
 import EPButton from "../ui/EPButton.vue";
 import EPDialog from "../ui/EPDialog.vue";
+import { EPONYME_DATE_LOCALE } from "../../utils/date-locale";
 const props = defineProps({
   name: { type: String, required: true },
   definition: { type: Object, required: true }
@@ -35,7 +36,10 @@ const columns = computed(() => [
     {
       id: fieldName,
       header: humanizeLabel(fieldName, field.options.label),
-      cell: (info) => truncate(info.getValue())
+      // Never empty: SSR emits nothing for an empty string while the client still
+      // builds a text node, which hydrates as a missing child. The dash also makes
+      // an unanswered optional field readable instead of looking like a broken cell.
+      cell: (info) => truncate(info.getValue()) || "\u2014"
     }
   )),
   columnHelper.accessor((row) => row.createdAt, {
@@ -79,7 +83,7 @@ function truncate(value, maxLength = 60) {
   return characters.length <= maxLength ? value : `${characters.slice(0, maxLength - 1).join("")}\u2026`;
 }
 function formatDate(value) {
-  return new Intl.DateTimeFormat(void 0, { dateStyle: "medium", timeStyle: "short" }).format(new Date(value));
+  return new Intl.DateTimeFormat(EPONYME_DATE_LOCALE, { dateStyle: "medium", timeStyle: "short" }).format(new Date(value));
 }
 async function clearAll() {
   if (!confirm(`Delete all ${total.value} submissions of \u201C${label.value}\u201D? This cannot be undone.`)) return;
@@ -184,7 +188,7 @@ async function deleteSubmission(submission) {
               </th>
               <th
                 scope="col"
-                class="ep:border-b ep:border-border-ep ep:p-3"
+                class="ep:relative ep:border-b ep:border-border-ep ep:p-3"
               >
                 <span class="ep:sr-only">Actions</span>
               </th>

package/dist/runtime/components/editor/EponymeSidebar.vue

@@ -6,6 +6,8 @@ import EponymeNavigationLink from "./EponymeNavigationLink.vue";
 import EponymeSidebarTree from "./EponymeSidebarTree.vue";
 import { useEponymeConfig } from "../../composables/useEponymeConfig";
 import { getEponymeCollections, getEponymeForms, getEponymeSchemas } from "../../utils/get-eponyme-schemas";
+import { buildEponymeNavigationTree } from "../../utils/build-navigation-tree";
+import { filterEponymeNavigationTree } from "../../utils/filter-navigation-tree";
 import { useEponymeAuth } from "../../composables/useEponymeAuth";
 import EPAvatar from "../ui/EPAvatar.vue";
 import EPButton from "../ui/EPButton.vue";
@@ -39,7 +41,7 @@ onMounted(async () => {
   await restoreNavigationScroll();
   const [statusResponse, ...collectionResponses] = await Promise.all([
     requestFetch("/api/eponyme-statuses"),
-    ...Object.keys(collections).map((name) => requestFetch(`/api/eponyme-collections/${name}`, { query: { version: "draft" } }))
+    ...Object.keys(collections).map((name) => requestFetch(`/api/eponyme-collections/${name}`, { query: { version: "draft", raw: 1 } }))
   ]);
   statuses.value = { ...statusResponse.statuses };
   collectionEntries.value = Object.fromEntries(Object.keys(collections).map((name, index) => [name, collectionResponses[index]?.entries ?? []]));
@@ -55,6 +57,12 @@ onKeyStroke("k", (event) => {
   if (!event.metaKey && !event.ctrlKey) return;
   event.preventDefault();
   searchInput.value?.$el?.focus();
+  searchInput.value?.$el?.select();
+});
+onKeyStroke("Escape", () => {
+  if (!isFiltering.value) return;
+  searchQuery.value = "";
+  searchInput.value?.$el?.blur();
 });
 const navigation = computed(() => {
   const items = [];
@@ -86,38 +94,15 @@ const navigation = computed(() => {
   }
   return items;
 });
-const navigationTree = computed(() => {
-  const root = [];
-  function addPath(pathValue, finalKind, configuredLabel) {
-    const parts = pathValue.split("/");
-    let children = root;
-    for (let index = 0; index < parts.length; index++) {
-      const part = parts[index];
-      const path = parts.slice(0, index + 1).join("/");
-      const kind = index === parts.length - 1 ? finalKind : "folder";
-      let node = children.find((item) => item.path === path);
-      if (!node) {
-        node = { kind, path, label: index === parts.length - 1 && configuredLabel ? configuredLabel : label(part), children: [] };
-        children.push(node);
-      } else if (index === parts.length - 1) {
-        node.kind = finalKind;
-        if (configuredLabel) node.label = configuredLabel;
-      }
-      children = node.children;
-    }
-  }
-  for (const entry of Object.keys(getEponymeSchemas(config))) addPath(entry, "entry");
-  for (const [name, definition] of Object.entries(collections)) {
-    addPath(name, "collection", definition.label);
-    for (const entry of collectionEntries.value[name] ?? []) addPath(`${name}/${entry.slug}`, "entry", entry.title);
-  }
-  for (const [name, definition] of Object.entries(forms)) addPath(name, "form", definition.label);
-  return root;
-});
+const navigationTree = computed(() => buildEponymeNavigationTree({
+  schemas: getEponymeSchemas(config),
+  collections,
+  forms,
+  collectionEntries: collectionEntries.value
+}));
+const isFiltering = computed(() => searchQuery.value.trim().length > 0);
+const filteredTree = computed(() => filterEponymeNavigationTree(navigationTree.value, searchQuery.value));
 const openFolders = useState(`eponyme:open-folders:${normalizedBasePath.value}`, () => navigation.value.filter((item) => item.kind === "folder").map((item) => item.path));
-function label(name) {
-  return name.replace(/[-_]/g, " ").replace(/\b\w/g, (char) => char.toUpperCase());
-}
 function entryPath(name) {
   return `${normalizedBasePath.value}/${name}`;
 }
@@ -204,14 +189,21 @@ watch(() => route.path, () => {
         Editables
       </div>
       <EponymeSidebarTree
-        :nodes="navigationTree"
+        :nodes="filteredTree"
         :base-path="normalizedBasePath"
         :current-path="route.path"
         :statuses="statuses"
         :open-folders="openFolders"
+        :force-open="isFiltering"
         :can-edit="auth.canEdit.value"
         @update:open-folders="openFolders = $event"
       />
+      <p
+        v-if="isFiltering && !filteredTree.length"
+        class="ep:m-0 ep:px-3 ep:py-2 ep:text-xs ep:text-muted-ep"
+      >
+        No match for “{{ searchQuery }}”.
+      </p>
     </nav>
     <div
       v-if="!collapsed && auth.user.value"

package/dist/runtime/components/editor/EponymeSidebarTree.d.vue.ts

@@ -6,6 +6,8 @@ type __VLS_Props = {
     currentPath: string;
     statuses: Record<string, EponymeStatus>;
     openFolders: string[];
+    /** Reveals every folder while a search is active, without touching `openFolders`. */
+    forceOpen?: boolean;
     canEdit?: boolean;
     depth?: number;
 };

package/dist/runtime/components/editor/EponymeSidebarTree.vue

@@ -8,6 +8,7 @@ const props = defineProps({
   currentPath: { type: String, required: true },
   statuses: { type: Object, required: true },
   openFolders: { type: Array, required: true },
+  forceOpen: { type: Boolean, required: false, default: false },
   canEdit: { type: Boolean, required: false, default: false },
   depth: { type: Number, required: false, default: 0 }
 });
@@ -16,7 +17,7 @@ function entryPath(path) {
   return `${props.basePath}/${path}`;
 }
 function isOpen(path) {
-  return props.openFolders.includes(path);
+  return props.forceOpen || props.openFolders.includes(path);
 }
 function setOpen(path, open) {
   const next = new Set(props.openFolders);
@@ -66,6 +67,7 @@ function setOpen(path, open) {
           :current-path="currentPath"
           :statuses="statuses"
           :open-folders="openFolders"
+          :force-open="forceOpen"
           :can-edit="canEdit"
           :depth="depth + 1"
           @update:open-folders="emit('update:openFolders', $event)"

package/dist/runtime/components/editor/EponymeSidebarTree.vue.d.ts

@@ -6,6 +6,8 @@ type __VLS_Props = {
     currentPath: string;
     statuses: Record<string, EponymeStatus>;
     openFolders: string[];
+    /** Reveals every folder while a search is active, without touching `openFolders`. */
+    forceOpen?: boolean;
     canEdit?: boolean;
     depth?: number;
 };

package/dist/runtime/components/fields/RichTextField.vue

@@ -2,9 +2,27 @@
 import Image from "@tiptap/extension-image";
 import Placeholder from "@tiptap/extension-placeholder";
 import StarterKit from "@tiptap/starter-kit";
-import { EditorContent, useEditor } from "@tiptap/vue-3";
+import { EditorContent, Extension, useEditor } from "@tiptap/vue-3";
 import { computed, ref, watch } from "vue";
+import { useEponymeVariables } from "../../composables/useEponymeVariables";
+import EPDropdownMenu from "../ui/EPDropdownMenu.vue";
 import EPFormField from "../ui/EPFormField.vue";
+import EPLinkDialog from "../ui/EPLinkDialog.vue";
+const DownloadableLinkAttribute = Extension.create({
+  name: "downloadableLinkAttribute",
+  addGlobalAttributes() {
+    return [{
+      types: ["link"],
+      attributes: {
+        download: {
+          default: null,
+          parseHTML: (element) => element.hasAttribute("download"),
+          renderHTML: (attributes) => attributes.download ? { download: "" } : {}
+        }
+      }
+    }];
+  }
+});
 const props = defineProps({
   id: { type: String, required: true },
   modelValue: { type: null, required: false },
@@ -20,6 +38,8 @@ const props = defineProps({
 });
 const emit = defineEmits(["update:modelValue"]);
 const revision = ref(0);
+const linkDialogOpen = ref(false);
+const linkValue = ref({ href: "", type: "external", openInNewTab: false, download: false });
 const initialContent = typeof props.modelValue === "string" ? props.modelValue : "";
 const editor = useEditor({
   content: initialContent,
@@ -34,6 +54,7 @@ const editor = useEditor({
         HTMLAttributes: { rel: "noopener noreferrer" }
       }
     }),
+    DownloadableLinkAttribute,
     Placeholder.configure({ placeholder: props.placeholder }),
     Image.configure({ HTMLAttributes: { class: "eponyme-rich-text-image" } })
   ],
@@ -59,17 +80,33 @@ function isActive(name, attributes = {}) {
   trackEditorRevision();
   return editor.value?.isActive(name, attributes) ?? false;
 }
-function setLink() {
+function openLinkDialog() {
+  const instance = editor.value;
+  if (!instance) return;
+  const attributes = instance.getAttributes("link");
+  const href = String(attributes.href ?? "");
+  linkValue.value = {
+    href,
+    type: href.startsWith("/") || href.startsWith("#") ? "internal" : "external",
+    openInNewTab: attributes.target === "_blank",
+    download: attributes.download === true
+  };
+  linkDialogOpen.value = true;
+}
+function applyLink(value) {
   const instance = editor.value;
   if (!instance) return;
-  const current = String(instance.getAttributes("link").href ?? "");
-  const href = window.prompt("Link URL", current || "https://");
-  if (href === null) return;
-  if (!href.trim()) {
+  if (!value.href) {
     instance.chain().focus().extendMarkRange("link").unsetLink().run();
     return;
   }
-  instance.chain().focus().extendMarkRange("link").setLink({ href: href.trim() }).run();
+  const attributes = {
+    href: value.href,
+    target: value.openInNewTab ? "_blank" : null,
+    rel: "noopener noreferrer",
+    download: value.download ? true : null
+  };
+  instance.chain().focus().extendMarkRange("link").setLink(attributes).run();
 }
 function setImage() {
   const instance = editor.value;
@@ -83,6 +120,14 @@ function setImage() {
   const alt = window.prompt("Alt text (describe the image)", "") ?? "";
   instance.chain().focus().setImage({ src: src.trim(), alt: alt.trim() }).run();
 }
+const variables = useEponymeVariables();
+const variableItems = computed(() => variables.map((variable) => ({
+  label: variable.preview ? `${variable.label} \u2014 ${variable.preview}` : variable.label,
+  value: variable.name
+})));
+function insertVariable(name) {
+  editor.value?.chain().focus().insertContent(`{{ ${name} }}`).run();
+}
 const tools = computed(() => {
   const instance = editor.value;
   if (!instance) return [];
@@ -94,7 +139,7 @@ const tools = computed(() => {
     { icon: "mingcute:bold-line", title: "Bold", active: isActive("bold"), separated: true, run: () => instance.chain().focus().toggleBold().run() },
     { icon: "mingcute:italic-line", title: "Italic", active: isActive("italic"), run: () => instance.chain().focus().toggleItalic().run() },
     { icon: "mingcute:strikethrough-line", title: "Strikethrough", active: isActive("strike"), run: () => instance.chain().focus().toggleStrike().run() },
-    { icon: "mingcute:link-line", title: "Link", active: isActive("link"), run: setLink },
+    { icon: "mingcute:link-line", title: "Link", active: isActive("link"), run: openLinkDialog },
     { icon: "mingcute:pic-line", title: "Image", active: isActive("image"), run: setImage },
     { icon: "mingcute:list-check-line", title: "Bullet list", active: isActive("bulletList"), separated: true, run: () => instance.chain().focus().toggleBulletList().run() },
     { icon: "mingcute:list-ordered-line", title: "Numbered list", active: isActive("orderedList"), run: () => instance.chain().focus().toggleOrderedList().run() },
@@ -148,6 +193,27 @@ const tools = computed(() => {
             />
           </button>
         </template>
+        <EPDropdownMenu
+          v-if="variables.length"
+          :items="variableItems"
+          @select="insertVariable"
+        >
+          <template #trigger>
+            <button
+              type="button"
+              class="rich-text-tool"
+              :disabled="disabled"
+              title="Insert a variable"
+              aria-label="Insert a variable"
+            >
+              <Icon
+                name="mingcute:code-line"
+                size="18"
+                aria-hidden="true"
+              />
+            </button>
+          </template>
+        </EPDropdownMenu>
       </div>
       <EditorContent
         v-if="editor"
@@ -168,6 +234,12 @@ const tools = computed(() => {
     >
       {{ characterCount }} / {{ maxLength }}
     </p>
+    <EPLinkDialog
+      :open="linkDialogOpen"
+      :model-value="linkValue"
+      @update:open="linkDialogOpen = $event"
+      @update:model-value="applyLink"
+    />
   </EPFormField>
 </template>
 

package/dist/runtime/components/ui/EPLinkDialog.d.vue.ts

@@ -0,0 +1,15 @@
+import type { UrlValue } from '../../types/index.js';
+type __VLS_Props = {
+    open: boolean;
+    modelValue?: unknown;
+    placeholder?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: UrlValue) => any;
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: UrlValue) => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/ui/EPLinkDialog.vue

@@ -0,0 +1,142 @@
+<script setup>
+import { computed, ref, watch } from "vue";
+import EPButton from "./EPButton.vue";
+import EPDialog from "./EPDialog.vue";
+import EPInputText from "./EPInputText.vue";
+import EPRadioButton from "./EPRadioButton.vue";
+import EPSwitch from "./EPSwitch.vue";
+import { getDownloadableExtension } from "../../utils/downloadable-link";
+const props = defineProps({
+  open: { type: Boolean, required: true },
+  modelValue: { type: null, required: false },
+  placeholder: { type: String, required: false }
+});
+const emit = defineEmits(["update:open", "update:modelValue"]);
+const draftHref = ref("");
+const draftType = ref("external");
+const draftOpenInNewTab = ref(false);
+const draftDownload = ref(false);
+const value = computed(() => {
+  if (props.modelValue && typeof props.modelValue === "object" && !Array.isArray(props.modelValue)) {
+    const link = props.modelValue;
+    return {
+      href: typeof link.href === "string" ? link.href : "",
+      type: link.type === "internal" ? "internal" : "external",
+      openInNewTab: link.openInNewTab === true,
+      download: link.download === true
+    };
+  }
+  return { href: "", type: "external", openInNewTab: false, download: false };
+});
+const downloadableExtension = computed(() => getDownloadableExtension(draftHref.value));
+const typeOptions = [
+  { label: "Internal link", value: "internal" },
+  { label: "External link", value: "external" }
+];
+watch(() => props.open, (open) => {
+  if (!open) return;
+  draftHref.value = value.value.href;
+  draftType.value = value.value.type;
+  draftOpenInNewTab.value = value.value.openInNewTab;
+  draftDownload.value = value.value.download === true;
+});
+function updateType(type) {
+  draftType.value = type === "internal" ? "internal" : "external";
+}
+function updateHref(href) {
+  draftHref.value = String(href);
+  if (!getDownloadableExtension(draftHref.value)) draftDownload.value = false;
+}
+function apply() {
+  emit("update:modelValue", {
+    href: draftHref.value.trim(),
+    type: draftType.value,
+    openInNewTab: draftOpenInNewTab.value,
+    download: Boolean(downloadableExtension.value && draftDownload.value)
+  });
+  emit("update:open", false);
+}
+</script>
+
+<template>
+  <EPDialog
+    :open="open"
+    title="Configure link"
+    description="Choose where the link points and how it should open."
+    @update:open="emit('update:open', $event)"
+  >
+    <div class="ep:grid ep:gap-5">
+      <div>
+        <p class="ep:mt-0 ep:mb-2 ep:text-sm ep:font-medium ep:text-white">
+          Link type
+        </p>
+        <EPRadioButton
+          :model-value="draftType"
+          :options="typeOptions"
+          @update:model-value="updateType"
+        />
+      </div>
+
+      <label class="ep:block">
+        <span class="ep:mb-2 ep:block ep:text-sm ep:font-medium ep:text-white">Destination</span>
+        <EPInputText
+          :model-value="draftHref"
+          :type="draftType === 'external' ? 'url' : 'text'"
+          :placeholder="draftType === 'internal' ? '/contact' : placeholder || 'https://example.com'"
+          @update:model-value="updateHref"
+        />
+        <span class="ep:mt-1.5 ep:block ep:text-xs ep:text-muted-ep">
+          {{ draftType === "internal" ? "Use a path beginning with / or an anchor beginning with #." : "Use a complete HTTP(S) address." }}
+        </span>
+      </label>
+
+      <div
+        v-if="downloadableExtension"
+        class="ep:flex ep:items-center ep:justify-between ep:gap-4 ep:rounded-xl ep:bg-selected-ep/40 ep:px-4 ep:py-3"
+      >
+        <div>
+          <p class="ep:m-0 ep:text-sm ep:font-medium ep:text-white">
+            Download file
+          </p>
+          <p class="ep:mt-1 ep:mb-0 ep:text-xs ep:text-muted-ep">
+            A .{{ downloadableExtension }} file was detected. Ask the browser to download it instead of opening it.
+          </p>
+        </div>
+        <EPSwitch
+          :model-value="draftDownload"
+          @update:model-value="draftDownload = $event"
+        />
+      </div>
+
+      <div class="ep:flex ep:items-center ep:justify-between ep:gap-4 ep:rounded-xl ep:bg-selected-ep/40 ep:px-4 ep:py-3">
+        <div>
+          <p class="ep:m-0 ep:text-sm ep:font-medium ep:text-white">
+            Open in new tab
+          </p>
+          <p class="ep:mt-1 ep:mb-0 ep:text-xs ep:text-muted-ep">
+            Keep the current page open when visitors follow this link.
+          </p>
+        </div>
+        <EPSwitch
+          :model-value="draftOpenInNewTab"
+          @update:model-value="draftOpenInNewTab = $event"
+        />
+      </div>
+
+      <div class="ep:flex ep:justify-end ep:gap-2">
+        <EPButton
+          variant="ghost"
+          @click="emit('update:open', false)"
+        >
+          Cancel
+        </EPButton>
+        <EPButton
+          variant="primary"
+          @click="apply"
+        >
+          Apply link
+        </EPButton>
+      </div>
+    </div>
+  </EPDialog>
+</template>