phoenix_duskmoon 9.8.0 → 9.9.1

package/README.md

@@ -141,7 +141,7 @@ Components that require hooks:
 ## Available Components
 
 - **Action**: buttons, dropdowns, links, menus, toggles
-- **Data Display**: accordion, avatar, badge, card, chip, collapse, flash, git repository, list, markdown, pagination, popover, progress, skeleton, stat, table, timeline, tooltip
+- **Data Display**: accordion, avatar, badge, card, chip, collapse, flash, git repository, list, markdown, markdown body, pagination, popover, progress, skeleton, stat, table, timeline, tooltip
 - **Data Entry**: autocomplete, cascader, checkbox, compact input, file upload, form, input, multi-select, OTP input, PIN input, radio, rating, segment control, select, slider, switch, textarea, time input, tree select
 - **Feedback**: dialog, loading, snackbar, toast
 - **Navigation**: actionbar, appbar, bottom nav, breadcrumb, left menu, navbar, nested menu, page footer, page header, stepper, steps, tabs

package/assets/js/phoenix_duskmoon.js

@@ -11,6 +11,11 @@ const DM_EVENTS = [
   "dm-submit", "dm-select", "dm-close", "dm-open", "dm-toggle",
 ];
 
+const COPY_SELECTOR = "[data-copy-value]";
+const COPY_FEEDBACK_DURATION = 2000;
+const COPY_LISTENER = Symbol.for("phoenix-duskmoon.copy-listener");
+const copyFeedback = new WeakMap();
+
 /**
  * WebComponentHook - Universal LiveView ↔ Custom Element bridge
  *
@@ -254,6 +259,108 @@ export const FormElementHook = {
   },
 };
 
+/** Copy text with the Clipboard API, falling back only when it is unavailable. */
+export async function copyTextToClipboard(value, environment = globalThis) {
+  const clipboard = environment.navigator?.clipboard;
+
+  if (typeof clipboard?.writeText === "function") {
+    await clipboard.writeText(value);
+    return;
+  }
+
+  const document = environment.document;
+
+  if (!document?.body || typeof document.execCommand !== "function") {
+    throw new Error("Clipboard API is unavailable");
+  }
+
+  const textArea = document.createElement("textarea");
+  const activeElement = document.activeElement;
+  textArea.value = value;
+  textArea.setAttribute("readonly", "");
+  textArea.style.position = "fixed";
+  textArea.style.opacity = "0";
+  document.body.appendChild(textArea);
+
+  try {
+    textArea.focus();
+    textArea.select();
+
+    if (!document.execCommand("copy")) {
+      throw new Error("Clipboard copy command failed");
+    }
+  } finally {
+    document.body.removeChild(textArea);
+    activeElement?.focus?.();
+  }
+}
+
+function copyStatus(button) {
+  const sibling = button.nextElementSibling;
+
+  if (sibling?.matches?.("[data-copy-status]")) {
+    return sibling;
+  }
+
+  return button.parentElement?.querySelector?.("[data-copy-status]") ?? null;
+}
+
+function showCopyFeedback(button, message, state, options) {
+  const label = button.querySelector?.("[data-copy-label]");
+  const status = copyStatus(button);
+  const previous = copyFeedback.get(button);
+  const cancelReset = options.cancelReset ?? globalThis.clearTimeout;
+  const scheduleReset = options.scheduleReset ?? globalThis.setTimeout;
+
+  if (previous?.timer !== undefined) {
+    cancelReset(previous.timer);
+  }
+
+  const originalLabel = previous?.originalLabel ?? label?.textContent ?? "Copy";
+
+  if (label) label.textContent = message;
+  if (status) status.textContent = message;
+  button.dataset.copyState = state;
+
+  const timer = scheduleReset(() => {
+    if (label) label.textContent = originalLabel;
+    if (status) status.textContent = "";
+    delete button.dataset.copyState;
+    copyFeedback.delete(button);
+  }, COPY_FEEDBACK_DURATION);
+
+  copyFeedback.set(button, { originalLabel, timer });
+}
+
+/** Handle clicks from any descendant of a generated copy control. */
+export async function handleClipboardClick(event, options = {}) {
+  const button = event.target?.closest?.(COPY_SELECTOR);
+
+  if (!button || button.disabled || button.getAttribute?.("aria-disabled") === "true") {
+    return;
+  }
+
+  const copy = options.copy ?? copyTextToClipboard;
+
+  try {
+    await copy(button.dataset.copyValue);
+    showCopyFeedback(button, button.dataset.copySuccess ?? "Copied", "success", options);
+  } catch (_error) {
+    showCopyFeedback(button, button.dataset.copyFailure ?? "Copy failed", "error", options);
+  }
+}
+
+/** Install one delegated listener so LiveView-patched copy controls also work. */
+export function installClipboardBehavior(root = globalThis.document, options = {}) {
+  if (!root?.addEventListener || root[COPY_LISTENER]) return;
+
+  const listener = (event) => handleClipboardClick(event, options);
+  root.addEventListener("click", listener);
+  root[COPY_LISTENER] = listener;
+}
+
+installClipboardBehavior();
+
 // Export to window for non-module usage
 if (typeof window !== "undefined") {
   window.__WebComponentHook__ = WebComponentHook;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "phoenix_duskmoon",
-  "version": "9.8.0",
+  "version": "9.9.1",
   "type": "module",
   "exports": {
     ".": "./priv/static/assets/js/phoenix_duskmoon.js",
@@ -35,17 +35,17 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "@duskmoon-dev/art-elements": "1.5.5",
+    "@duskmoon-dev/art-elements": "1.5.6",
     "@duskmoon-dev/core": "1.17.0",
     "@duskmoon-dev/css-art": "1.17.0",
-    "@duskmoon-dev/elements": "1.5.5"
+    "@duskmoon-dev/elements": "1.5.6"
   },
   "devDependencies": {
     "@mdi/svg": "7.4.47",
     "bootstrap-icons": "1.13.1",
-    "postcss": "8.5.16"
+    "postcss": "8.5.19"
   },
   "peerDependencies": {
-    "tailwindcss": "4.3.2"
+    "tailwindcss": "4.3.3"
   }
 }