picocrank 1.31.1 → 1.33.0

package/docs/table.md

@@ -0,0 +1,99 @@
+# Table
+
+`Table` supports local data and remote `fetchRows` data. Existing usages remain
+uncontrolled; pass any query-state prop to control that field independently.
+
+## Query state
+
+```vue
+<Table
+  v-model:sort-by="sortBy"
+  v-model:sort-dir="sortDir"
+  v-model:page="page"
+  v-model:page-size="pageSize"
+/>
+```
+
+`sortBy`, `sortDir`, `page`, and `pageSize` default to internal state when
+omitted. Controlled values may be changed after mount. User actions emit the
+corresponding `update:*` event. Sorting resets the page by default; set
+`:reset-page-on-sort="false"` to preserve the current page. Page-size, data, and
+filter changes continue to reset to page 1.
+
+A sortable header can provide a value comparator:
+
+```js
+{
+  key: 'version',
+  sortable: true,
+  comparator: (left, right, leftRow, rightRow) =>
+    left.localeCompare(right, undefined, { numeric: true }),
+}
+```
+
+The comparator defines ascending order and receives non-null cell values plus
+their rows. `Table` reverses its result for descending order and keeps null
+values last. `sortRows(rows, sortBy, sortDir, comparator)` accepts the same
+optional comparator.
+
+## Cells and display hooks
+
+Named `#cell-{key}` slots and the generic `#cell` slot receive:
+
+```ts
+{ row, value, header, rowIndex, sourceIndex }
+```
+
+`rowIndex` is the index on the displayed page. For local data, `sourceIndex` is
+the index in `data`; for remote data it is the index in the current response.
+
+The `rowClass` and `rowStyle` callbacks receive
+`{ row, rowIndex, sourceIndex }`. `cellClass`, `cellStyle`, and `cellAttrs`
+receive that context plus `{ value, header }`. Return Vue-compatible class or
+style values. `cellAttrs` is intended for attributes such as `title`, `aria-*`,
+and `data-*`; use the dedicated class/style callbacks for those fields.
+Header `class` continues to apply to both its header and body cells.
+
+## Selection and active cells
+
+`selectionClickMode` controls selectable-row clicks:
+
+- `row` (default): row clicks toggle selection; Ctrl/Cmd also toggles and Shift
+  selects a range on the displayed page.
+- `checkbox`: only checkboxes change selection; row clicks emit `row-click`.
+- `modifier`: Ctrl/Cmd toggles, Shift selects a displayed-page range, and an
+  unmodified click emits `row-click`.
+- `extended`: unmodified clicks replace the selection, Ctrl/Cmd toggles, and
+  Shift adds a range on the displayed page. This matches desktop-style
+  selection while leaving the default behavior unchanged.
+
+The additive `row-click` payload is `{ row, index, event }`, where `event` is
+the native click event.
+
+`activeCell` is an optional controlled `{ rowKey, columnKey }` value:
+
+```vue
+<Table
+  v-model:active-cell="activeCell"
+  @cell-click="onCellClick"
+/>
+```
+
+Clicking a data cell emits `cell-click` with the enriched cell context and adds
+the visibly outlined `table-active-cell` class. The component ref exposes:
+
+- `clearFilters()`
+- `focusActiveCell(options?)` (returns whether a displayed active cell was focused)
+- `clearActiveCell()`
+- `activateCellAt(rowIndex, columnIndex, options?)`
+- `moveActiveCell(rowDelta, columnDelta, options?)`
+- `getActiveCellContext()`
+- the existing `loadDeveloperDefaults()` and `layoutLabel`
+
+Cell indices use `displayRows` and `visibleHeaders` and are clamped to the
+displayed grid. Pass `{ wrapColumns: true }` to `moveActiveCell` to move from
+the last column of one row to the first column of the next (or in reverse),
+which is suitable for Tab/Shift+Tab. Pass `{ focus: true, focusOptions? }` to
+activation or movement methods to focus the destination after Vue renders.
+`getActiveCellContext()` returns the cell slot context plus `rowKey`,
+`columnKey`, and `columnIndex`, or `null` when the active cell is not displayed.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "picocrank",
-  "version": "1.31.1",
+  "version": "1.33.0",
   "type": "module",
   "description": "A set of zero dependency Vue components built on the Femtocrank global CSS theme.",
   "main": "vite.config.js",

package/router.js

@@ -15,6 +15,7 @@ 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';
+import { Loading03Icon } from '@hugeicons/core-free-icons';
 
 import {
 	hubChildBreadcrumbs,
@@ -176,6 +177,16 @@ const routes = [
       breadcrumbs: hubChildBreadcrumbs('NavFeedbackStatusHub', 'DialogExample', 'Dialog'),
     }
   },
+  {
+    name: 'LoadingAreaExample',
+    path: '/loading-area-example',
+    component: () => import('./vue/examples/LoadingAreaExample.vue'),
+    meta: {
+      title: 'Loading area',
+      icon: Loading03Icon,
+      breadcrumbs: hubChildBreadcrumbs('NavFeedbackStatusHub', 'LoadingAreaExample', 'Loading area'),
+    }
+  },
   {
     name: 'TabsExample',
     path: '/tabs-example',

package/styles/picocrank-extensions.css

@@ -252,3 +252,68 @@ header.fixed ~ #layout > #content,
 @container responsive-cols (max-width: 22rem) {
 	:is(th, td).col-priority-5 { display: none; }
 }
+
+/*
+ * Floating context menu: reuse Femtocrank nav.menu dropdown chrome, forced open
+ * for cursor-positioned / teleported menus (table rows, calendar days, etc.).
+ */
+nav.menu.context-menu {
+	position: fixed;
+	z-index: 1000;
+	margin: 0;
+}
+
+nav.menu.context-menu:focus,
+nav.menu.context-menu:focus-visible {
+	outline: none;
+}
+
+nav.menu.context-menu > ul {
+	margin: 0;
+	padding: 0;
+}
+
+nav.menu.context-menu > ul > li {
+	display: block;
+	margin: 0;
+	padding: 0;
+	border-radius: 0;
+	background: transparent;
+}
+
+nav.menu.context-menu > ul > li:hover,
+nav.menu.context-menu > ul > li:focus-within {
+	background: transparent;
+	color: inherit;
+}
+
+nav.menu.context-menu > ul > li > div {
+	display: block;
+	position: static;
+	top: auto;
+	left: auto;
+	min-width: 12em;
+	padding: var(--menu-dropdown-padding);
+	border-radius: var(--menu-dropdown-radius);
+	background-color: var(--menu-dropdown-background-color);
+	box-shadow: var(--menu-dropdown-shadow);
+}
+
+nav.menu.context-menu > ul > li > div::before {
+	content: none;
+}
+
+nav.menu.context-menu > ul div ul button.inline-icon {
+	display: inline-flex;
+	align-items: center;
+	gap: 0.45em;
+}
+
+nav.menu.context-menu > ul div ul li[role="separator"] {
+	height: 1px;
+	margin: 0.25em 0.35em;
+	padding: 0;
+	background: var(--menu-dropdown-border-color, var(--border-color));
+	border-radius: 0;
+	pointer-events: none;
+}

package/vue/components/Calendar.vue

@@ -641,7 +641,7 @@ function onDayContextMenu(date, mouseEvent) {
 
   nextTick(() => {
     positionDayContextMenu(mouseEvent.clientX, mouseEvent.clientY)
-    dayContextMenuRef.value?.querySelector('button')?.focus()
+    dayContextMenuRef.value?.focus({ preventScroll: true })
   })
 }
 
@@ -1067,43 +1067,53 @@ watch([viewMonth, viewYear], () => {
     </div>
 
     <Teleport to="body">
-      <div
+      <nav
         v-if="dayContextMenuOpen"
         ref="dayContextMenuRef"
-        class="calendar-day-context-menu"
+        class="menu context-menu calendar-day-context-menu"
         role="menu"
+        tabindex="-1"
         :style="dayContextMenuStyle"
+        aria-label="Day view options"
         @click.stop
         @contextmenu.prevent
       >
-        <button
-          v-if="internalViewMode !== 'day'"
-          type="button"
-          role="menuitem"
-          class="calendar-day-context-menu-item"
-          @click="showOnlyThisDay"
-        >
-          Show only this day
-        </button>
-        <button
-          v-if="internalViewMode !== 'week'"
-          type="button"
-          role="menuitem"
-          class="calendar-day-context-menu-item"
-          @click="showOnlyThisWeek"
-        >
-          Show only this week
-        </button>
-        <button
-          v-if="internalViewMode !== 'month'"
-          type="button"
-          role="menuitem"
-          class="calendar-day-context-menu-item"
-          @click="showFullMonth"
-        >
-          Show full month
-        </button>
-      </div>
+        <ul class="noListStyle">
+          <li>
+            <div>
+              <ul>
+                <li v-if="internalViewMode !== 'day'">
+                  <button
+                    type="button"
+                    role="menuitem"
+                    @click="showOnlyThisDay"
+                  >
+                    Show only this day
+                  </button>
+                </li>
+                <li v-if="internalViewMode !== 'week'">
+                  <button
+                    type="button"
+                    role="menuitem"
+                    @click="showOnlyThisWeek"
+                  >
+                    Show only this week
+                  </button>
+                </li>
+                <li v-if="internalViewMode !== 'month'">
+                  <button
+                    type="button"
+                    role="menuitem"
+                    @click="showFullMonth"
+                  >
+                    Show full month
+                  </button>
+                </li>
+              </ul>
+            </div>
+          </li>
+        </ul>
+      </nav>
     </Teleport>
   </div>
 </template>
@@ -1522,35 +1532,3 @@ watch([viewMonth, viewYear], () => {
   }
 }
 </style>
-
-<style>
-.calendar-day-context-menu {
-  position: fixed;
-  z-index: 1000;
-  min-width: 12rem;
-  padding: 0.35rem;
-  border: 1px solid var(--table-popover-border);
-  border-radius: 8px;
-  background: var(--table-popover-bg);
-  box-shadow: var(--table-popover-shadow);
-}
-
-.calendar-day-context-menu-item {
-  display: block;
-  width: 100%;
-  padding: 0.5rem 0.75rem;
-  border: none;
-  border-radius: 4px;
-  background: transparent;
-  color: var(--table-popover-fg);
-  font: inherit;
-  text-align: left;
-  cursor: pointer;
-}
-
-.calendar-day-context-menu-item:hover,
-.calendar-day-context-menu-item:focus-visible {
-  background: var(--table-popover-item-bg);
-  outline: none;
-}
-</style>

package/vue/components/LoadingArea.spec.js

@@ -0,0 +1,72 @@
+import { describe, expect, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { nextTick } from 'vue'
+import LoadingArea from './LoadingArea.vue'
+
+const globalStubs = {
+	HugeiconsIcon: true,
+}
+
+describe('LoadingArea', () => {
+	it('shows the placeholder by default', () => {
+		const wrapper = mount(LoadingArea, {
+			global: { stubs: globalStubs },
+		})
+
+		expect(wrapper.find('[role="status"]').exists()).toBe(true)
+		expect(wrapper.text()).toContain('Loading…')
+		expect(wrapper.attributes('aria-busy')).toBe('true')
+	})
+
+	it('renders default-slot content when not loading', async () => {
+		const wrapper = mount(LoadingArea, {
+			props: {
+				loading: false,
+			},
+			slots: {
+				default: '<p class="ready">Ready</p>',
+			},
+			global: { stubs: globalStubs },
+		})
+
+		await nextTick()
+
+		expect(wrapper.find('[role="status"]').exists()).toBe(false)
+		expect(wrapper.find('.ready').text()).toBe('Ready')
+		expect(wrapper.attributes('aria-busy')).toBe('false')
+	})
+
+	it('keeps content mounted in overlay mode while loading', async () => {
+		const wrapper = mount(LoadingArea, {
+			props: {
+				loading: true,
+				overlay: true,
+			},
+			slots: {
+				default: '<p class="ready">Ready</p>',
+			},
+			global: { stubs: globalStubs },
+		})
+
+		await nextTick()
+
+		expect(wrapper.find('[role="status"]').exists()).toBe(true)
+		expect(wrapper.find('.ready').exists()).toBe(true)
+		expect(wrapper.classes()).toContain('is-overlay')
+	})
+
+	it('supports a custom placeholder slot', () => {
+		const wrapper = mount(LoadingArea, {
+			props: {
+				loading: true,
+			},
+			slots: {
+				placeholder: '<span class="custom">Please wait</span>',
+			},
+			global: { stubs: globalStubs },
+		})
+
+		expect(wrapper.find('.custom').text()).toBe('Please wait')
+		expect(wrapper.text()).not.toContain('Loading…')
+	})
+})

package/vue/components/LoadingArea.vue

@@ -0,0 +1,176 @@
+<template>
+	<div
+		class="loading-area"
+		:class="{
+			'is-loading': loading,
+			'is-overlay': loading && overlay && hasContent,
+		}"
+		:style="rootStyle"
+		:aria-busy="loading ? 'true' : 'false'"
+	>
+		<div
+			v-if="loading"
+			class="loading-area-placeholder"
+			role="status"
+			aria-live="polite"
+		>
+			<slot name="placeholder">
+				<HugeiconsIcon
+					:icon="resolvedIcon"
+					class="loading-area-spinner"
+					:size="resolvedIconSize"
+					:strokeWidth="2"
+					aria-hidden="true"
+				/>
+				<p v-if="message" class="loading-area-message">{{ message }}</p>
+			</slot>
+		</div>
+
+		<div
+			v-if="hasContent"
+			v-show="!loading || overlay"
+			class="loading-area-content"
+			:aria-hidden="loading && overlay ? 'true' : undefined"
+		>
+			<slot />
+		</div>
+	</div>
+</template>
+
+<script setup>
+import { computed, useSlots } from 'vue'
+import { HugeiconsIcon } from '@hugeicons/vue'
+import { Loading03Icon } from '@hugeicons/core-free-icons'
+
+const props = defineProps({
+	/**
+	 * When true, shows the loading placeholder (and optionally overlays content).
+	 */
+	loading: {
+		type: Boolean,
+		default: true,
+	},
+	/**
+	 * Status text announced to assistive tech and shown under the spinner.
+	 * Pass an empty string to hide the message.
+	 */
+	message: {
+		type: String,
+		default: 'Loading…',
+	},
+	/**
+	 * Keep default-slot content in the layout and cover it with the placeholder.
+	 */
+	overlay: {
+		type: Boolean,
+		default: false,
+	},
+	/**
+	 * Hugeicons icon definition. Defaults to Loading03Icon.
+	 */
+	icon: {
+		type: [Object, Array, Function],
+		default: null,
+	},
+	/**
+	 * Spinner size in px, or a CSS length string (e.g. "1.5em").
+	 */
+	iconSize: {
+		type: [Number, String],
+		default: 28,
+	},
+	/**
+	 * Minimum height of the loading area (number = px, or any CSS length).
+	 */
+	minHeight: {
+		type: [Number, String],
+		default: null,
+	},
+})
+
+const slots = useSlots()
+
+const hasContent = computed(() => typeof slots.default === 'function')
+
+const resolvedIcon = computed(() => props.icon || Loading03Icon)
+
+const resolvedIconSize = computed(() => {
+	if (typeof props.iconSize === 'number') {
+		return props.iconSize
+	}
+	const parsed = Number.parseFloat(props.iconSize)
+	return Number.isFinite(parsed) ? parsed : 28
+})
+
+const rootStyle = computed(() => {
+	if (props.minHeight == null || props.minHeight === '') {
+		return undefined
+	}
+	const value = typeof props.minHeight === 'number'
+		? `${props.minHeight}px`
+		: props.minHeight
+	return { minHeight: value }
+})
+</script>
+
+<style scoped>
+.loading-area {
+	position: relative;
+	display: block;
+	min-width: 0;
+}
+
+.loading-area-placeholder {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	gap: 0.75rem;
+	padding: 2rem 1rem;
+	text-align: center;
+	color: var(--table-muted-fg, var(--muted-text-color));
+}
+
+.loading-area.is-overlay > .loading-area-placeholder {
+	position: absolute;
+	inset: 0;
+	z-index: 1;
+	box-sizing: border-box;
+	background-color: color-mix(in srgb, var(--section-bg-color, #fff) 78%, transparent);
+}
+
+.loading-area-spinner {
+	display: block;
+	flex: 0 0 auto;
+	animation: loading-area-spin 0.8s linear infinite;
+}
+
+.loading-area-message {
+	margin: 0;
+	font-size: 0.95em;
+}
+
+.loading-area-content {
+	min-width: 0;
+}
+
+.loading-area.is-overlay > .loading-area-content {
+	pointer-events: none;
+	user-select: none;
+}
+
+@keyframes loading-area-spin {
+	from {
+		transform: rotate(0deg);
+	}
+	to {
+		transform: rotate(360deg);
+	}
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.loading-area-spinner {
+		animation: none;
+	}
+}
+</style>