nuance-ui 0.2.1 → 0.2.5

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

@@ -216,319 +216,319 @@ defineExpose({
 </script>
 
 <template>
-	<Box ref='rootRef' :class='[$style.root, props.classes?.root]' :style>
-		<table ref='tableRef' :class='[$style.table, props.classes?.table]'>
-			<caption v-if='caption || $slots.caption' :class='props.classes?.caption'>
-				<slot name='caption'>
-					{{ props.caption }}
-				</slot>
-			</caption>
-
-			<Box
-				is='thead'
-				:class='$style.thead'
+	<Box ref='rootRef' :class='[$style.root, props.classes?.root]' :style>
+		<table ref='tableRef' :class='[$style.table, props.classes?.table]'>
+			<caption v-if='caption || $slots.caption' :class='props.classes?.caption'>
+				<slot name='caption'>
+					{{ props.caption }}
+				</slot>
+			</caption>
+
+			<Box
+				is='thead'
+				:class='$style.thead'
 				:mod='{
   sticky: props.sticky === "header" || props.sticky === true,
   loading: props.loading
-}'
-			>
-				<tr v-for='headerGroup in table.getHeaderGroups()' :key='headerGroup.id' :class='$style.tr'>
-					<Box
-						is='th'
-						v-for='header in headerGroup.headers'
-						:key='header.id'
-						:mod='{ pinned: header.column.getIsPinned() }'
-						:scope="header.colSpan > 1 ? 'colgroup' : 'col'"
-						:colspan='header.colSpan > 1 ? header.colSpan : void 0'
-						:rowspan='header.rowSpan > 1 ? header.rowSpan : void 0'
+}'
+			>
+				<tr v-for='headerGroup in table.getHeaderGroups()' :key='headerGroup.id' :class='$style.tr'>
+					<Box
+						is='th'
+						v-for='header in headerGroup.headers'
+						:key='header.id'
+						:mod='{ pinned: header.column.getIsPinned() }'
+						:scope="header.colSpan > 1 ? 'colgroup' : 'col'"
+						:colspan='header.colSpan > 1 ? header.colSpan : void 0'
+						:rowspan='header.rowSpan > 1 ? header.rowSpan : void 0'
 						:class='[
   $style.th,
   props.classes?.th,
   resolveValue(header.column.columnDef.meta?.class?.th, header)
-]'
+]'
 						:style='[
   { width: header.getSize() !== 150 ? `${header.getSize()}px` : void 0 },
   resolveValue(header.column.columnDef.meta?.style?.th, header)
-]'
-					>
-						<slot :name='`${header.id}-header`' v-bind='header.getContext()'>
-							<FlexRender
-								v-if='!header.isPlaceholder'
-								:render='header.column.columnDef.header'
-								:props='header.getContext()'
-							/>
-						</slot>
-					</Box>
-				</tr>
-
-				<tr :class='[$style.separator, props.classes?.separator]' />
-			</Box>
-
-			<tbody :class='[$style.tbody, props.classes?.tbody]'>
-				<slot name='body-top' />
-
-				<template v-if='rows.length'>
-					<template v-for='row in rows' :key='row.id'>
-						<Box
-							is='tr'
+]'
+					>
+						<slot :name='`${header.id}-header`' v-bind='header.getContext()'>
+							<FlexRender
+								v-if='!header.isPlaceholder'
+								:render='header.column.columnDef.header'
+								:props='header.getContext()'
+							/>
+						</slot>
+					</Box>
+				</tr>
+
+				<tr :class='[$style.separator, props.classes?.separator]' />
+			</Box>
+
+			<tbody :class='[$style.tbody, props.classes?.tbody]'>
+				<slot name='body-top' />
+
+				<template v-if='rows.length'>
+					<template v-for='row in rows' :key='row.id'>
+						<Box
+							is='tr'
 							:mod='{
   selected: row.getIsSelected(),
   expanded: row.getIsExpanded(),
   selectable: !!onSelect || !!onHover || !!onContextmenu
-}'
-							:role="onSelect ? 'button' : void 0"
-							:tabindex='onSelect ? 0 : void 0'
-							:class='[$style.tr, props.classes?.tr, resolveValue(table.options.meta?.class?.tr, row)]'
-							:style='resolveValue(table.options.meta?.style?.tr, row)'
-							@click='onRowSelect($event, row)'
-							@pointerenter='onRowHover($event, row)'
-							@pointerleave='onRowHover($event, null)'
-							@contextmenu='onRowContextmenu($event, row)'
-						>
-							<Box
-								is='td'
-								v-for='cell in row.getVisibleCells()'
-								:key='cell.id'
-								:mod='{ pinned: cell.column.getIsPinned() }'
-								:colspan='resolveValue(cell.column.columnDef.meta?.colspan?.td, cell)'
-								:rowspan='resolveValue(cell.column.columnDef.meta?.rowspan?.td, cell)'
-								:class='resolveValue(cell.column.columnDef.meta?.class?.td, cell)'
+}'
+							:role="onSelect ? 'button' : void 0"
+							:tabindex='onSelect ? 0 : void 0'
+							:class='[$style.tr, props.classes?.tr, resolveValue(table.options.meta?.class?.tr, row)]'
+							:style='resolveValue(table.options.meta?.style?.tr, row)'
+							@click='onRowSelect($event, row)'
+							@pointerenter='onRowHover($event, row)'
+							@pointerleave='onRowHover($event, null)'
+							@contextmenu='onRowContextmenu($event, row)'
+						>
+							<Box
+								is='td'
+								v-for='cell in row.getVisibleCells()'
+								:key='cell.id'
+								:mod='{ pinned: cell.column.getIsPinned() }'
+								:colspan='resolveValue(cell.column.columnDef.meta?.colspan?.td, cell)'
+								:rowspan='resolveValue(cell.column.columnDef.meta?.rowspan?.td, cell)'
+								:class='resolveValue(cell.column.columnDef.meta?.class?.td, cell)'
 								:style='[
   { width: cell.column.getSize() !== 150 ? `${cell.column.getSize()}px` : void 0 },
   resolveValue(cell.column.columnDef.meta?.style?.td, cell)
-]'
-							>
-								<slot :name='`${cell.column.id}-cell`' v-bind='cell.getContext()'>
-									<FlexRender :render='cell.column.columnDef.cell' :props='cell.getContext()' />
-								</slot>
-							</Box>
-						</Box>
-
-						<tr v-if='row.getIsExpanded()'>
-							<td :colspan='row.getAllCells().length'>
-								<slot name='expanded' :row='row' />
-							</td>
-						</tr>
-					</template>
-				</template>
-
-				<tr v-else-if='loading && !!$slots.loading'>
-					<td :colspan='table.getAllLeafColumns().length' :class='[$style.loading, props.classes?.loading]'>
-						<slot name='loading' />
-					</td>
-				</tr>
-
-				<tr v-else>
-					<td :colspan='table.getAllLeafColumns().length' :class='[$style.empty, props.classes?.empty]'>
-						<slot name='empty'>
-							{{ empty || "\u041D\u0435\u0442 \u0434\u0430\u043D\u043D\u044B\u0445" }}
-						</slot>
-					</td>
-				</tr>
-
-				<slot name='body-bottom' />
-			</tbody>
-
-			<Box
-				is='tfoot'
-				v-if='hasFooter'
-				:class='[$style.tfoot, props.classes?.tfoot]'
-				:mod='{ sticky: props.sticky === "footer" || props.sticky === true }'
-			>
-				<tr :class='[$style.separator, props.classes?.separator]' />
-
-				<tr v-for='footerGroup in table.getFooterGroups()' :key='footerGroup.id' :class='[$style.tr, props.classes?.tr]'>
-					<Box
-						is='th'
-						v-for='header in footerGroup.headers'
-						:key='header.id'
-						:mod='{ pinned: header.column.getIsPinned() }'
-						:colspan='header.colSpan > 1 ? header.colSpan : void 0'
-						:rowspan='header.rowSpan > 1 ? header.rowSpan : void 0'
-						:class='[$style.th, props.classes?.th, resolveValue(header.column.columnDef.meta?.class?.th, header)]'
-						:style='resolveValue(header.column.columnDef.meta?.style?.th, header)'
-					>
-						<slot :name='`${header.id}-footer`' v-bind='header.getContext()'>
-							<FlexRender
-								v-if='!header.isPlaceholder'
-								:render='header.column.columnDef.footer'
-								:props='header.getContext()'
-							/>
-						</slot>
-					</Box>
-				</tr>
-			</Box>
-		</table>
-	</Box>
+]'
+							>
+								<slot :name='`${cell.column.id}-cell`' v-bind='cell.getContext()'>
+									<FlexRender :render='cell.column.columnDef.cell' :props='cell.getContext()' />
+								</slot>
+							</Box>
+						</Box>
+
+						<tr v-if='row.getIsExpanded()'>
+							<td :colspan='row.getAllCells().length'>
+								<slot name='expanded' :row='row' />
+							</td>
+						</tr>
+					</template>
+				</template>
+
+				<tr v-else-if='loading && !!$slots.loading'>
+					<td :colspan='table.getAllLeafColumns().length' :class='[$style.loading, props.classes?.loading]'>
+						<slot name='loading' />
+					</td>
+				</tr>
+
+				<tr v-else>
+					<td :colspan='table.getAllLeafColumns().length' :class='[$style.empty, props.classes?.empty]'>
+						<slot name='empty'>
+							{{ empty || "\u041D\u0435\u0442 \u0434\u0430\u043D\u043D\u044B\u0445" }}
+						</slot>
+					</td>
+				</tr>
+
+				<slot name='body-bottom' />
+			</tbody>
+
+			<Box
+				is='tfoot'
+				v-if='hasFooter'
+				:class='[$style.tfoot, props.classes?.tfoot]'
+				:mod='{ sticky: props.sticky === "footer" || props.sticky === true }'
+			>
+				<tr :class='[$style.separator, props.classes?.separator]' />
+
+				<tr v-for='footerGroup in table.getFooterGroups()' :key='footerGroup.id' :class='[$style.tr, props.classes?.tr]'>
+					<Box
+						is='th'
+						v-for='header in footerGroup.headers'
+						:key='header.id'
+						:mod='{ pinned: header.column.getIsPinned() }'
+						:colspan='header.colSpan > 1 ? header.colSpan : void 0'
+						:rowspan='header.rowSpan > 1 ? header.rowSpan : void 0'
+						:class='[$style.th, props.classes?.th, resolveValue(header.column.columnDef.meta?.class?.th, header)]'
+						:style='resolveValue(header.column.columnDef.meta?.style?.th, header)'
+					>
+						<slot :name='`${header.id}-footer`' v-bind='header.getContext()'>
+							<FlexRender
+								v-if='!header.isPlaceholder'
+								:render='header.column.columnDef.footer'
+								:props='header.getContext()'
+							/>
+						</slot>
+					</Box>
+				</tr>
+			</Box>
+		</table>
+	</Box>
 </template>
 
 <style lang="postcss" module>
-.root {
-	--table-color: var(--color-primary-4);
-	--table-loader-color: var(--table-color);
-	--table-loader-animation: carousel 2s ease-in-out infinite;
-	--table-padding-x: .5rem;
-	--table-padding-y: .5rem;
-	--vertical-align: baseline;
-
-	position: relative;
-
-	overflow: auto;
-
-	&:not([data-virtualize]) {
-		.table {
-			overflow: clip;
-		}
-
-		.tbody>tr:not(:last-of-type) {
-			border-bottom: 1px solid var(--table-bd-color);
-		}
-	}
-
-	@mixin where-light {
-		--table-active-bg: alpha(var(--color-slate-1), .5);
-		--table-c: var(--color-slate-7);
-		--table-bd-color: var(--color-slate-3);
-	}
-
-	@mixin where-dark {
-		--table-active-bg: alpha(var(--color-slate-7), .5);
-		--table-c: var(--color-slate-4);
-		--table-bd-color: var(--color-slate-7);
-	}
-}
-
-.table {
-	border-collapse: collapse;
-
-	min-width: 100%;
-}
-
-.thead {
-	position: relative;
-
-	&[data-loading]::after {
-		content: '';
-
-		position: absolute;
-		z-index: 1;
-
-		height: 1px;
-
-		background-color: alpha(var(--table-loader-color), .75);
-
-		animation: var(--table-loader-animation);
-	}
-
-	&[data-sticky] {
-		position: sticky;
-		z-index: 1;
-		top: 0;
-		inset-inline: 0rem;
-
-		background-color: alpha(var(--color-body), .75);
-		backdrop-filter: blur(8px);
-	}
-}
-
-.th {
-	padding-block: var(--table-padding-y);
-	padding-inline: var(--table-padding-x);
-
-	font-weight: 600;
-	color: var(--table-c);
-	text-align: left;
-	vertical-align: var(--vertical-align);
-
-	&:has([role='checkbox']) {
-		padding-inline-end: 0;
-	}
-}
-
-.th[data-pinned],
-.tr td[data-pinned] {
-	position: sticky;
-	z-index: 1;
-
-	background-color: alpha(var(--color-body), .75);
-}
-
-.tbody {
-	isolation: isolate;
-}
-
-.tfoot {
-	position: relative;
-
-	&[data-sticky] {
-		position: sticky;
-		z-index: 1;
-		bottom: 0;
-		inset-inline: 0rem;
-
-		background-color: var(--color-body);
-		backdrop-filter: blur(8px);
-	}
-}
-
-.tr {
-	&[data-selectable] {
-		&:hover {
-			background-color: var(--table-active-bg);
-		}
-
-		&:focus-visible {
-			outline: 1px solid var(--table-color);
-		}
-	}
-
-	&[data-selected] {
-		background-color: var(--table-active-bg);
-	}
-
-	td {
-		padding-block: var(--table-padding-y);
-		padding-inline: var(--table-padding-x);
-
-		color: var(--table-c);
-		white-space: nowrap;
-		vertical-align: var(--vertical-align);
-
-		&:has([role='checkbox']) {
-			padding-inline-end: 0;
-		}
-	}
-}
-
-.separator {
-	position: absolute;
-	z-index: 1;
-	left: 0;
-
-	width: 100%;
-	height: 1px;
-
-	background-color: var(--table-bd-color);
-}
-
-.loading,
-.empty {
-	padding-inline: 1.5rem;
-
-	text-align: center;
-}
-
-@keyframes carousel {
-	0% {
-		transform: translate(-100%);
-
-		width: 50%;
-	}
-
-	to {
-		transform: translate(200%);
-
-		width: 50%;
-	}
-}
+.root {
+	--table-color: var(--color-primary-4);
+	--table-loader-color: var(--table-color);
+	--table-loader-animation: carousel 2s ease-in-out infinite;
+	--table-padding-x: .5rem;
+	--table-padding-y: .5rem;
+	--vertical-align: baseline;
+
+	position: relative;
+
+	overflow: auto;
+
+	&:not([data-virtualize]) {
+		.table {
+			overflow: clip;
+		}
+
+		.tbody>tr:not(:last-of-type) {
+			border-bottom: 1px solid var(--table-bd-color);
+		}
+	}
+
+	@mixin where-light {
+		--table-active-bg: alpha(var(--color-slate-1), .5);
+		--table-c: var(--color-slate-7);
+		--table-bd-color: var(--color-slate-3);
+	}
+
+	@mixin where-dark {
+		--table-active-bg: alpha(var(--color-slate-7), .5);
+		--table-c: var(--color-slate-4);
+		--table-bd-color: var(--color-slate-7);
+	}
+}
+
+.table {
+	border-collapse: collapse;
+
+	min-width: 100%;
+}
+
+.thead {
+	position: relative;
+
+	&[data-loading]::after {
+		content: '';
+
+		position: absolute;
+		z-index: 1;
+
+		height: 1px;
+
+		background-color: alpha(var(--table-loader-color), .75);
+
+		animation: var(--table-loader-animation);
+	}
+
+	&[data-sticky] {
+		position: sticky;
+		z-index: 1;
+		top: 0;
+		inset-inline: 0rem;
+
+		background-color: alpha(var(--color-body), .75);
+		backdrop-filter: blur(8px);
+	}
+}
+
+.th {
+	padding-block: var(--table-padding-y);
+	padding-inline: var(--table-padding-x);
+
+	font-weight: 600;
+	color: var(--table-c);
+	text-align: left;
+	vertical-align: var(--vertical-align);
+
+	&:has([role='checkbox']) {
+		padding-inline-end: 0;
+	}
+}
+
+.th[data-pinned],
+.tr td[data-pinned] {
+	position: sticky;
+	z-index: 1;
+
+	background-color: alpha(var(--color-body), .75);
+}
+
+.tbody {
+	isolation: isolate;
+}
+
+.tfoot {
+	position: relative;
+
+	&[data-sticky] {
+		position: sticky;
+		z-index: 1;
+		bottom: 0;
+		inset-inline: 0rem;
+
+		background-color: var(--color-body);
+		backdrop-filter: blur(8px);
+	}
+}
+
+.tr {
+	&[data-selectable] {
+		&:hover {
+			background-color: var(--table-active-bg);
+		}
+
+		&:focus-visible {
+			outline: 1px solid var(--table-color);
+		}
+	}
+
+	&[data-selected] {
+		background-color: var(--table-active-bg);
+	}
+
+	td {
+		padding-block: var(--table-padding-y);
+		padding-inline: var(--table-padding-x);
+
+		color: var(--table-c);
+		white-space: nowrap;
+		vertical-align: var(--vertical-align);
+
+		&:has([role='checkbox']) {
+			padding-inline-end: 0;
+		}
+	}
+}
+
+.separator {
+	position: absolute;
+	z-index: 1;
+	left: 0;
+
+	width: 100%;
+	height: 1px;
+
+	background-color: var(--table-bd-color);
+}
+
+.loading,
+.empty {
+	padding-inline: 1.5rem;
+
+	text-align: center;
+}
+
+@keyframes carousel {
+	0% {
+		transform: translate(-100%);
+
+		width: 50%;
+	}
+
+	to {
+		transform: translate(200%);
+
+		width: 50%;
+	}
+}
 </style>

package/dist/runtime/components/tabs/tabs-list.vue

@@ -14,20 +14,20 @@ const style = computed(() => ({ "--tabs-justify": justify }));
 </script>
 
 <template>
-	<Box
-		:is
-		:style
-		:class='css.list'
-		role='tablist'
+	<Box
+		:is
+		:style
+		:class='css.list'
+		role='tablist'
 		:mod='[mod, {
   variant: ctx?.variant,
   grow,
   orientation: ctx?.orientation,
   placement: ctx?.orientation === "vertical" && ctx.placement,
   inverted: ctx?.inverted
-}]'
-		:aria-orientation='ctx?.orientation'
-	>
-		<slot />
-	</Box>
+}]'
+		:aria-orientation='ctx?.orientation'
+	>
+		<slot />
+	</Box>
 </template>

package/dist/runtime/components/tabs/tabs-panel.vue

@@ -11,15 +11,15 @@ const ctx = useTabsState();
 </script>
 
 <template>
-	<Box
-		:is
-		:id='ctx?.getPanelId(value)'
-		:mod='[mod, { orientation: ctx?.orientation }]'
-		:data-active='ctx?.active.value === value'
-		:class='css.panel'
-		role='tabpanel'
-		:aria-labelledby='ctx?.getTabId(value)'
-	>
-		<slot />
-	</Box>
+	<Box
+		:is
+		:id='ctx?.getPanelId(value)'
+		:mod='[mod, { orientation: ctx?.orientation }]'
+		:data-active='ctx?.active.value === value'
+		:class='css.panel'
+		role='tabpanel'
+		:aria-labelledby='ctx?.getTabId(value)'
+	>
+		<slot />
+	</Box>
 </template>