@stonecrop/atable 0.31.0 → 0.32.0

package/src/components/ATableColumnFilter.vue

@@ -1,216 +0,0 @@
-<template>
-	<div class="column-filter">
-		<input
-			v-if="resolvedFilterType === 'text'"
-			v-model="filterValue"
-			type="text"
-			class="filter-input"
-			@input="updateFilter(filterValue)" />
-
-		<input
-			v-else-if="resolvedFilterType === 'number'"
-			v-model="filterValue"
-			type="number"
-			class="filter-input"
-			@input="updateFilter(filterValue)" />
-
-		<label v-else-if="resolvedFilterType === 'checkbox'" class="checkbox-filter">
-			<input v-model="filterValue" type="checkbox" class="filter-checkbox" @change="updateFilter(filterValue)" />
-			<span>{{ column.label }}</span>
-		</label>
-
-		<select
-			v-else-if="resolvedFilterType === 'select'"
-			v-model="filterValue"
-			class="filter-select"
-			@change="updateFilter(filterValue)">
-			<option value="">All</option>
-			<option v-for="option in getSelectOptions(column)" :key="option.value || option" :value="option.value || option">
-				{{ option.label || option }}
-			</option>
-		</select>
-
-		<input
-			v-else-if="resolvedFilterType === 'date'"
-			v-model="filterValue"
-			type="date"
-			class="filter-input"
-			@change="updateFilter(filterValue)" />
-
-		<div v-else-if="resolvedFilterType === 'dateRange'" class="date-range-filter">
-			<input
-				v-model="dateFilter.startValue"
-				type="date"
-				class="filter-input"
-				@change="updateDateRangeFilter('start', dateFilter.startValue)" />
-			<span class="date-separator">-</span>
-			<input
-				v-model="dateFilter.endValue"
-				type="date"
-				class="filter-input"
-				@change="updateDateRangeFilter('end', dateFilter.endValue)" />
-		</div>
-
-		<component
-			:is="column.filterComponent"
-			v-else-if="resolvedFilterType === 'component' && column.filterComponent"
-			:value="filterValue"
-			:column="column"
-			:col-index="colIndex"
-			:store="store"
-			@update:value="updateFilter($event)" />
-
-		<button v-if="hasActiveFilter" class="clear-btn" title="Clear" @click="clearFilter">×</button>
-	</div>
-</template>
-
-<script setup lang="ts">
-import { ref, reactive, computed } from 'vue'
-
-import { createTableStore } from '../stores/table'
-import { resolveFilterType } from '../resolveFilterType'
-import type { TableColumn } from '../types'
-
-const { column, colIndex, store } = defineProps<{
-	column: TableColumn
-	colIndex: number
-	store: ReturnType<typeof createTableStore>
-}>()
-
-const filterValue = ref<any>('')
-const dateFilter = reactive({
-	startValue: '',
-	endValue: '',
-})
-
-const resolvedFilterType = computed(() => resolveFilterType(column))
-
-const getSelectOptions = (col: TableColumn): any[] => {
-	if (col.filterOptions) return col.filterOptions
-
-	// Auto-generate options from data
-	const uniqueValues = new Set<any>()
-	store.rows.forEach(row => {
-		const value = row[col.name]
-		if (value !== null && value !== undefined && value !== '') {
-			uniqueValues.add(value)
-		}
-	})
-
-	return Array.from(uniqueValues).map(value => ({
-		value: value,
-		label: String(value),
-	}))
-}
-
-const hasActiveFilter = computed(() => {
-	return !!(filterValue.value || dateFilter.startValue || dateFilter.endValue)
-})
-
-// Filter actions
-const updateFilter = (value: any) => {
-	if (!value && resolvedFilterType.value !== 'checkbox') {
-		store.clearFilter(colIndex)
-		filterValue.value = ''
-	} else {
-		filterValue.value = value
-		store.setFilter(colIndex, { value })
-	}
-}
-
-const updateDateRangeFilter = (rangeType: 'start' | 'end', value: any) => {
-	if (rangeType === 'start') {
-		dateFilter.startValue = value
-	} else {
-		dateFilter.endValue = value
-	}
-
-	if (!dateFilter.startValue && !dateFilter.endValue) {
-		store.clearFilter(colIndex)
-	} else {
-		store.setFilter(colIndex, {
-			value: null,
-			startValue: dateFilter.startValue,
-			endValue: dateFilter.endValue,
-		})
-	}
-}
-
-const clearFilter = () => {
-	filterValue.value = ''
-	dateFilter.startValue = ''
-	dateFilter.endValue = ''
-	store.clearFilter(colIndex)
-}
-</script>
-
-<style scoped>
-.column-filter {
-	display: flex;
-	align-items: center;
-	gap: 0.25rem;
-	width: 100%;
-}
-
-.filter-input,
-.filter-select {
-	background-color: var(--sc-form-background) !important;
-	padding: 0.15rem 0.2rem;
-	border: 1px solid var(--sc-form-border);
-	border-radius: 3px;
-	font-size: 0.875rem;
-	color: var(--sc-cell-text-color);
-	width: 100%;
-	box-sizing: border-box;
-}
-
-.filter-input:focus,
-.filter-select:focus {
-	outline: none;
-	border-color: var(--sc-input-active-border-color);
-}
-
-.checkbox-filter {
-	display: flex;
-	align-items: center;
-	gap: 0.25rem;
-	font-size: 0.875rem;
-	color: var(--sc-cell-text-color);
-	cursor: pointer;
-}
-
-.filter-checkbox {
-	margin: 0;
-}
-
-.date-range-filter {
-	display: flex;
-	gap: 0.25rem;
-	align-items: center;
-	width: 100%;
-}
-
-.date-range-filter .filter-input {
-	flex: 1;
-	min-width: 0;
-}
-
-.date-separator {
-	color: var(--sc-gray-50);
-	font-weight: 500;
-	padding: 0 0.25rem;
-	flex-shrink: 0;
-}
-
-.clear-btn {
-	background: var(--sc-gray-10);
-	border: 1px solid var(--sc-form-border);
-	border-radius: 3px;
-	color: var(--sc-gray-70);
-	cursor: pointer;
-	font-size: 1rem;
-	padding: 0.15rem 0.4rem;
-	line-height: 1;
-	flex-shrink: 0;
-}
-</style>

package/src/components/ATableHeader.vue

@@ -1,141 +0,0 @@
-<template>
-	<thead v-if="columns.length">
-		<!-- Header row -->
-		<tr class="atable-header-row" tabindex="-1">
-			<!-- Row actions header cell (before-index position) -->
-			<th
-				v-if="showRowActionsHeader && rowActionsPosition === 'before-index'"
-				class="row-actions-header"
-				:class="{ 'sticky-column': rowActionsPosition === 'before-index' }" />
-			<th
-				v-if="store.zeroColumn"
-				id="header-index"
-				:class="[
-					store.hasPinnedColumns ? 'sticky-index' : '',
-					store.isTreeView ? 'tree-index' : '',
-					store.config.view === 'list-expansion' ? 'list-expansion-index' : '',
-				]"
-				class="list-index" />
-			<!-- Row actions header cell (after-index position) -->
-			<th v-if="showRowActionsHeader && rowActionsPosition === 'after-index'" class="row-actions-header" />
-			<th
-				v-for="(column, colKey) in columns"
-				:key="column.name"
-				v-resize-observer="onResize"
-				:data-colindex="colKey"
-				tabindex="-1"
-				:style="store.getHeaderCellStyle(column)"
-				:class="`${column.pinned ? 'sticky-column' : ''} ${column.sortable === false ? '' : 'cursor-pointer'}`"
-				@click="column.sortable !== false ? handleSort(colKey) : undefined">
-				<slot>{{ column.label || String.fromCharCode(colKey + 97).toUpperCase() }}</slot>
-			</th>
-			<!-- Row actions header cell (end position) -->
-			<th v-if="showRowActionsHeader && rowActionsPosition === 'end'" class="row-actions-header" />
-		</tr>
-		<!-- Filters row -->
-		<tr v-if="filterableColumns.length > 0" class="atable-filters-row">
-			<!-- Row actions filter cell (before-index position) -->
-			<th
-				v-if="showRowActionsHeader && rowActionsPosition === 'before-index'"
-				class="row-actions-header"
-				:class="{ 'sticky-column': rowActionsPosition === 'before-index' }" />
-			<th
-				v-if="store.zeroColumn"
-				:class="[
-					store.hasPinnedColumns ? 'sticky-index' : '',
-					store.isTreeView ? 'tree-index' : '',
-					store.config.view === 'list-expansion' ? 'list-expansion-index' : '',
-				]"
-				class="list-index" />
-			<!-- Row actions filter cell (after-index position) -->
-			<th v-if="showRowActionsHeader && rowActionsPosition === 'after-index'" class="row-actions-header" />
-			<th
-				v-for="(column, colKey) in columns"
-				:key="`filter-${column.name}`"
-				:class="`${column.pinned ? 'sticky-column' : ''}`"
-				:style="store.getHeaderCellStyle(column)">
-				<ATableColumnFilter v-if="column.filterable" :column="column" :col-index="colKey" :store="store" />
-			</th>
-			<!-- Row actions filter cell (end position) -->
-			<th v-if="showRowActionsHeader && rowActionsPosition === 'end'" class="row-actions-header" />
-		</tr>
-	</thead>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-import { vResizeObserver } from '@vueuse/components'
-import ATableColumnFilter from './ATableColumnFilter.vue'
-import { createTableStore } from '../stores/table'
-import type { TableColumn } from '../types'
-
-const { columns, store } = defineProps<{
-	columns: TableColumn[]
-	store: ReturnType<typeof createTableStore>
-}>()
-
-const filterableColumns = computed(() => columns.filter(column => column.filterable))
-
-// Row actions header support — explicit return type resolves Pinia's inference chain
-const showRowActionsHeader = computed(() => store.config.rowActions?.enabled ?? false)
-const rowActionsPosition = computed(() => store.config.rowActions?.position ?? 'before-index')
-
-const handleSort = (colIndex: number) => store.sortByColumn(colIndex)
-
-const onResize = (entries: ReadonlyArray<ResizeObserverEntry>) => {
-	for (const entry of entries) {
-		if (entry.borderBoxSize.length === 0) continue
-		const observedCell = entry.borderBoxSize[0]
-		const observedWidth = observedCell.inlineSize
-		const colIndex = Number((entry.target as HTMLElement).dataset.colindex)
-		const currentWidth = store.columns[colIndex]?.width
-
-		if (typeof currentWidth === 'number' && currentWidth !== observedWidth) {
-			store.resizeColumn(colIndex, observedWidth)
-		}
-	}
-}
-</script>
-
-<style>
-.atable-header-row th {
-	padding-left: 0.5ch !important;
-	font-weight: 700;
-	min-width: 3ch;
-	padding-top: var(--sc-atable-row-padding);
-	padding-bottom: var(--sc-atable-row-padding);
-	box-sizing: border-box;
-	color: var(--sc-header-text-color);
-	position: relative;
-}
-#header-index {
-	padding-left: var(--sc-atable-row-padding);
-	box-sizing: border-box;
-	border-top: none;
-}
-.tree-index {
-	padding-right: 0;
-}
-th {
-	order: 1;
-}
-.list-expansion-index {
-	width: 2ch;
-	margin-left: 5px;
-}
-
-.cursor-pointer {
-	cursor: pointer;
-}
-
-.atable-filters-row th {
-	padding: 0.25rem 0.5ch;
-	vertical-align: top;
-}
-
-.row-actions-header {
-	width: 2rem;
-	min-width: 2rem;
-	padding: 0 0.25rem;
-}
-</style>

package/src/components/ATableLoading.vue

@@ -1,86 +0,0 @@
-<template>
-	<div class="aloading">
-		<h2 class="aloading-header">
-			<slot></slot>
-		</h2>
-		<div class="aloading-bar"></div>
-	</div>
-</template>
-
-<style scoped>
-.aloading {
-	width: 100%;
-	border-top: 1px solid var(--sc-row-border-color);
-	border-bottom: 1px solid var(--sc-row-border-color);
-	display: flex;
-	background-color: white;
-	border-left: 4px solid var(--sc-row-border-color);
-	padding-left: 0.5ch !important;
-	padding-right: 0.5ch;
-	padding-top: var(--sc-atable-row-padding);
-	padding-bottom: var(--sc-atable-row-padding);
-	align-items: center;
-	box-sizing: border-box;
-	background: var(--sc-focus-cell-background);
-	overflow: hidden;
-	position: relative;
-}
-.aloading-bar {
-	width: 100%;
-	height: 100%;
-	position: absolute;
-	left: -100%;
-	top: 0;
-	background: linear-gradient(
-		90deg,
-		rgba(var(--sc-table-loading-color), 0) 0%,
-		rgba(var(--sc-table-loading-color), 1) 50%,
-		rgba(var(--sc-table-loading-color), 0) 100%
-	);
-	animation: gradient infinite 2s;
-	z-index: 0;
-}
-.aloading-header {
-	color: var(--sc-cell-text-color);
-	font-family: var(--sc-atable-font-family);
-	-webkit-font-smoothing: antialiased;
-	-moz-osx-font-smoothing: grayscale;
-	font-size: var(--sc-table-font-size);
-	padding: 0;
-	margin: 0;
-	font-weight: normal;
-	z-index: 1;
-}
-.aloading-header::after {
-	content: '...';
-	animation: ellipse 2s;
-	animation-iteration-count: infinite;
-}
-
-@keyframes gradient {
-	0% {
-		left: -100%;
-	}
-	100% {
-		left: 100%;
-	}
-}
-
-@keyframes ellipse {
-	0% {
-		content: '';
-	}
-	20% {
-		content: '';
-	}
-	40% {
-		content: '.';
-	}
-	60% {
-		content: '..';
-	}
-	80% {
-		content: '...';
-	}
-}
-</style>

package/src/components/ATableLoadingBar.vue

@@ -1,81 +0,0 @@
-<template>
-	<div class="aloading">
-		<h2 class="aloading-header">
-			<slot></slot>
-		</h2>
-		<div class="aloading-bar"></div>
-	</div>
-</template>
-
-<style scoped>
-.aloading {
-	width: 100%;
-	border-top: 1px solid var(--sc-row-border-color);
-	border-bottom: 1px solid var(--sc-row-border-color);
-	display: flex;
-	background-color: white;
-	border-left: 4px solid var(--sc-row-border-color);
-	padding-left: 0.5ch !important;
-	padding-right: 0.5ch;
-	padding-top: var(--sc-atable-row-padding);
-	padding-bottom: var(--sc-atable-row-padding);
-	align-items: center;
-	box-sizing: border-box;
-	background: var(--sc-focus-cell-background);
-	overflow: hidden;
-	position: relative;
-}
-.aloading-bar {
-	width: 50%;
-	height: 3px;
-	position: absolute;
-	left: -100%;
-	bottom: 0;
-	background: var(--sc-row-border-color);
-	animation: bar-left infinite 2s;
-	z-index: 0;
-}
-.aloading-header {
-	color: var(--sc-cell-text-color);
-	font-family: var(--sc-atable-font-family);
-	-webkit-font-smoothing: antialiased;
-	-moz-osx-font-smoothing: grayscale;
-	font-size: var(--sc-table-font-size);
-	padding: 0;
-	margin: 0;
-	font-weight: normal;
-	z-index: 1;
-}
-.aloading-header::after {
-	content: '...';
-	animation: ellipse 2s;
-	animation-iteration-count: infinite;
-}
-
-@keyframes bar-left {
-	0% {
-		left: -50%;
-	}
-	100% {
-		left: 100%;
-	}
-}
-
-@keyframes ellipse {
-	0% {
-		content: '';
-	}
-	20% {
-		content: '';
-	}
-	40% {
-		content: '.';
-	}
-	60% {
-		content: '..';
-	}
-	80% {
-		content: '...';
-	}
-}
-</style>

package/src/components/ATableModal.vue

@@ -1,52 +0,0 @@
-<template>
-	<div ref="amodal" class="amodal" tabindex="-1" :style="amodalStyles" @click.stop @input.stop>
-		<slot />
-	</div>
-</template>
-
-<script setup lang="ts">
-import { useElementBounding } from '@vueuse/core'
-import { useTemplateRef, computed, type StyleValue } from 'vue'
-
-import { createTableStore } from '../stores/table'
-
-const { store } = defineProps<{ store: ReturnType<typeof createTableStore> }>()
-
-const amodalRef = useTemplateRef('amodal')
-const { width: modalWidth, height: modalHeight } = useElementBounding(amodalRef)
-
-const amodalStyles = computed((): StyleValue => {
-	if (!(store.modal.height && store.modal.width && store.modal.left && store.modal.bottom)) return {}
-
-	const table = store.modal.cell?.closest('table')
-	if (!table) return {}
-
-	const maxHeight = table.offsetHeight || 0
-	const maxWidth = table.offsetWidth || 0
-
-	// Get the Y position of the cell clicked by getting the cumulative height of prior rows + the header (if present)
-	let modalY = store.modal.cell?.offsetTop || 0
-	const headerHeight = table.querySelector('thead')?.offsetHeight || 0
-	modalY += headerHeight
-	// if the modal will overflow the bottom of the table, remove modal and cell heights from the Y position
-	modalY = modalY + modalHeight.value < maxHeight ? modalY : modalY - (modalHeight.value + store.modal.height)
-
-	// Get the X position of the cell clicked by getting the cumulative width of prior cells within the row
-	let modalX = store.modal.cell?.offsetLeft || 0
-	// if the modal will overflow the right of the table, remove modal and cell widths from the X position
-	modalX = modalX + modalWidth.value <= maxWidth ? modalX : modalX - (modalWidth.value - store.modal.width)
-
-	return {
-		left: `${modalX}px`,
-		top: `${modalY}px`,
-	}
-})
-</script>
-
-<style>
-.amodal {
-	position: absolute;
-	background-color: var(--sc-row-color-zebra-dark);
-	z-index: 200;
-}
-</style>

package/src/components/ATablePaginationFooter.vue

@@ -1,100 +0,0 @@
-<template>
-	<tfoot v-if="showFooter" class="atable-pagination">
-		<tr>
-			<td :colspan="columnCount">
-				<p v-if="hasMore" class="truncation-note">This is a partial list — more records exist on the server.</p>
-				<p v-else-if="showCompleteNote" class="completion-note">All {{ loadedCount }} records loaded.</p>
-				<div v-if="showControls" class="atable-pagination-controls">
-					<button type="button" class="atable-pagination-btn" :disabled="!hasPrev || loading" @click="prev">
-						Previous
-					</button>
-					<button type="button" class="atable-pagination-btn" :disabled="!hasNext || loading" @click="onNext">
-						{{ hasMore && !hasLocalNext ? 'Load more' : 'Next' }}
-					</button>
-				</div>
-			</td>
-		</tr>
-	</tfoot>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-
-const props = defineProps<{
-	columnCount: number
-	showFooter: boolean
-	hasMore: boolean
-	hasPrev: boolean
-	hasNext: boolean
-	hasLocalNext: boolean
-	hasEverHadMore: boolean
-	loadedCount: number
-	loading: boolean
-	next: () => Promise<void>
-	prev: () => void
-}>()
-
-const showCompleteNote = computed(() => !props.hasMore && props.hasEverHadMore)
-const showControls = computed(() => props.hasMore || props.hasPrev)
-
-const onNext = () => {
-	void props.next()
-}
-</script>
-
-<style scoped>
-.atable-pagination td {
-	padding: 0.75rem 0.5ch;
-	border-top: 1px solid var(--sc-row-border-color);
-}
-
-.truncation-note,
-.completion-note {
-	margin: 0 0 0.5rem;
-	font-size: var(--sc-table-font-size);
-	color: var(--sc-gray-60);
-}
-
-.completion-note {
-	margin-bottom: 0;
-}
-
-.atable-pagination-controls {
-	display: flex;
-	gap: 0.5rem;
-}
-
-.atable-pagination-btn {
-	appearance: none;
-	-webkit-appearance: none;
-	box-sizing: border-box;
-	padding: 0.5rem 1rem;
-	background: var(--sc-btn-color);
-	color: var(--sc-btn-label-color);
-	border: 1px solid var(--sc-btn-border);
-	border-radius: var(--sc-border-radius);
-	cursor: pointer;
-	font-family: var(--sc-font-family);
-	font-size: var(--sc-table-font-size);
-	font-weight: 400;
-	line-height: 1.2;
-	transition: background-color 0.15s ease;
-}
-
-.atable-pagination-btn:hover:not(:disabled) {
-	background: var(--sc-btn-hover);
-}
-
-.atable-pagination-btn:focus-visible {
-	outline: 2px solid var(--sc-input-active-border-color);
-	outline-offset: 1px;
-}
-
-.atable-pagination-btn:disabled {
-	cursor: not-allowed;
-	background: var(--sc-gray-5);
-	color: var(--sc-gray-50);
-	border-color: var(--sc-gray-20);
-	opacity: 1;
-}
-</style>