picocrank 1.22.0 → 1.22.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "picocrank",
-  "version": "1.22.0",
+  "version": "1.22.2",
   "description": "A set of zero dependency Vue components built on the Femtocrank global CSS theme.",
   "main": "vite.config.js",
   "scripts": {
@@ -21,14 +21,14 @@
     "@hugeicons/core-free-icons": "^4.2.3",
     "@hugeicons/vue": "^1.0.7",
     "@vitejs/plugin-vue": "^6.0.8",
-    "femtocrank": "^2.5.1",
+    "femtocrank": "^2.5.2",
     "unplugin-vue-components": "^32.1.0",
-    "vite": "^8.2.0",
-    "vue": "^3.5.40",
+    "vite": "^8.2.1",
+    "vue": "^3.5.41",
     "vue-router": "^5.2.0"
   },
   "devDependencies": {
-    "semantic-release": "^25.0.8"
+    "semantic-release": "^25.0.9"
   },
   "homepage": "https://github.com/jamesread/picocrank#readme"
 }

package/router.js

@@ -14,6 +14,7 @@ import { LayoutGridIcon } from '@hugeicons/core-free-icons';
 import { StatusIcon } from '@hugeicons/core-free-icons';
 import { PaintBoardIcon } from '@hugeicons/core-free-icons';
 import { UserIcon } from '@hugeicons/core-free-icons';
+import { InformationCircleIcon } from '@hugeicons/core-free-icons';
 
 const routes = [
   {
@@ -136,6 +137,15 @@ const routes = [
       icon: StatusIcon,
     }
   },
+  {
+    name: 'DialogExample',
+    path: '/dialog-example',
+    component: () => import('./vue/views/DialogExample.vue'),
+    meta: {
+      title: 'Dialog',
+      icon: InformationCircleIcon,
+    }
+  },
   {
     name: 'TabsExample',
     path: '/tabs-example',

package/vue/components/QuickSearch.vue

@@ -362,11 +362,35 @@ function selectItem(item) {
   close()
 }
 
+function escapeHtml(value) {
+  return String(value)
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;')
+}
+
 function highlightText(text, query) {
-  if (!query || !text) return text
+  if (text == null || text === '') return ''
+
+  const source = String(text)
+  if (!query) return escapeHtml(source)
+
+  const regex = new RegExp(query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'gi')
+  let result = ''
+  let lastIndex = 0
+
+  for (const match of source.matchAll(regex)) {
+    const start = match.index
+    const matched = match[0]
+    result += escapeHtml(source.slice(lastIndex, start))
+    result += `<mark>${escapeHtml(matched)}</mark>`
+    lastIndex = start + matched.length
+  }
 
-  const regex = new RegExp(`(${query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'gi')
-  return text.replace(regex, '<mark>$1</mark>')
+  result += escapeHtml(source.slice(lastIndex))
+  return result
 }
 
 function addItem(item) {

package/vue/views/App.vue

@@ -198,6 +198,7 @@
 
 			navigation.value.addSection('Feedback & status', { name: 'nav-feedback' })
 			navigation.value.addRouterLink('StatusExample', 'Status & notifications')
+			navigation.value.addRouterLink('DialogExample', 'Dialog')
 
 			navigation.value.addSection('Patterns', { name: 'nav-patterns' })
 			navigation.value.addCallback('Callback example', helloWorld, { icon: Pin02Icon })

package/vue/views/DialogExample.vue

@@ -0,0 +1,123 @@
+<template>
+	<Section
+		title="Dialog"
+		subtitle="Native HTML dialog element with showModal()"
+	>
+		<p>
+			The <code>&lt;dialog&gt;</code> element provides accessible modal and
+			non-modal overlays without a third-party library. Femtocrank styles the
+			element globally; use <code>showModal()</code> for a modal with backdrop,
+			or <code>show()</code> for a non-modal panel.
+		</p>
+	</Section>
+
+	<Section title="Modal dialog" subtitle="Opens with showModal() and closes on backdrop click">
+		<div role="toolbar" class="dialog-actions">
+			<button type="button" @click="openModal">Open modal</button>
+		</div>
+
+		<dialog
+			ref="modalRef"
+			class="example-dialog"
+			@close="onModalClose"
+			@click="onBackdropClick($event, modalRef)"
+		>
+			<div class="dialog-panel" @click.stop>
+				<h3>Confirm action</h3>
+				<p>
+					This modal uses the native dialog API. Press Escape or click outside
+					to dismiss, or choose an action below.
+				</p>
+				<form method="dialog" class="dialog-form">
+					<div role="toolbar" class="dialog-actions">
+						<button type="submit" value="cancel" class="neutral">Cancel</button>
+						<button type="submit" value="confirm" class="good">Confirm</button>
+					</div>
+				</form>
+			</div>
+		</dialog>
+
+		<p v-if="modalResult" class="subtle">{{ modalResult }}</p>
+	</Section>
+
+	<Section title="Non-modal dialog" subtitle="Stays open while the page remains interactive">
+		<div role="toolbar" class="dialog-actions">
+			<button type="button" class="neutral" @click="openPanel">Open panel</button>
+			<button type="button" class="bad" :disabled="!panelRef?.open" @click="closePanel">
+				Close panel
+			</button>
+		</div>
+
+		<dialog ref="panelRef" class="example-dialog example-dialog-panel">
+			<div class="dialog-panel">
+				<h3>Side note</h3>
+				<p>
+					Non-modal dialogs use <code>show()</code> instead of
+					<code>showModal()</code>. They do not trap focus or dim the page.
+				</p>
+				<button type="button" class="neutral" @click="closePanel">Dismiss</button>
+			</div>
+		</dialog>
+	</Section>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import Section from '../components/Section.vue'
+
+const modalRef = ref(null)
+const panelRef = ref(null)
+const modalResult = ref('')
+
+function openModal() {
+	modalRef.value?.showModal()
+}
+
+function onModalClose(event) {
+	const value = event.target?.returnValue
+	if (value === 'confirm') {
+		modalResult.value = 'Action confirmed.'
+	} else {
+		modalResult.value = 'Dialog closed without confirming.'
+	}
+}
+
+function onBackdropClick(event, dialog) {
+	if (event.target === dialog) {
+		dialog.close('cancel')
+	}
+}
+
+function openPanel() {
+	panelRef.value?.show()
+}
+
+function closePanel() {
+	panelRef.value?.close()
+}
+</script>
+
+<style scoped>
+.dialog-actions {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0.5rem;
+}
+
+.dialog-panel h3 {
+	margin: 0 0 0.5rem;
+}
+
+.dialog-panel p {
+	margin: 0 0 1rem;
+}
+
+.dialog-form {
+	margin: 0;
+}
+
+.example-dialog-panel {
+	margin-block-start: 1rem;
+	max-width: 24rem;
+}
+</style>