@flux-ui/components 3.0.0-next.64 → 3.0.0-next.66

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@flux-ui/components",
     "description": "A set of opiniated UI components.",
-    "version": "3.0.0-next.64",
+    "version": "3.0.0-next.66",
     "type": "module",
     "license": "MIT",
     "funding": "https://github.com/sponsors/basmilius",
@@ -50,11 +50,15 @@
     "main": "./dist/index.js",
     "module": "./dist/index.js",
     "types": "./dist/index.d.ts",
+    "sideEffects": [
+        "**/css/index.scss",
+        "**/dist/index.css"
+    ],
     "dependencies": {
         "@basmilius/common": "^3.25.0",
         "@basmilius/utils": "^3.25.0",
-        "@flux-ui/internals": "3.0.0-next.64",
-        "@flux-ui/types": "3.0.0-next.64",
+        "@flux-ui/internals": "3.0.0-next.66",
+        "@flux-ui/types": "3.0.0-next.66",
         "@fortawesome/fontawesome-common-types": "^7.2.0",
         "clsx": "^2.1.1",
         "imask": "^7.6.1",

package/src/component/FluxCheckbox.vue

@@ -26,12 +26,12 @@
             <FluxIcon
                 v-if="isIndeterminate"
                 name="minus"
-                :size="16"/>
+                :size="12"/>
 
             <FluxIcon
                 v-else
                 name="check"
-                :size="16"/>
+                :size="12"/>
         </button>
 
         <span

package/src/component/FluxDataTable.vue

@@ -13,13 +13,23 @@
         </template>
 
         <template
-            v-if="'header' in slots"
+            v-if="'header' in slots || selectionMode"
             #header>
             <slot
                 name="filter"
                 v-bind="{page, perPage, items: limitedItems, total}"/>
 
             <FluxTableRow>
+                <FluxTableHeader
+                    v-if="selectionMode"
+                    is-shrinking
+                    :class="$style.tableCellSelection">
+                    <FluxCheckbox
+                        v-if="selectionMode === 'multiple'"
+                        :model-value="selectAllState"
+                        @update:model-value="onSelectAll"/>
+                </FluxTableHeader>
+
                 <slot
                     name="header"
                     v-bind="{page, perPage, items: limitedItems, total}"/>
@@ -54,11 +64,22 @@
 
         <FluxTableRow
             v-for="(item, index) of limitedItems"
-            :key="uniqueKey ? item[uniqueKey] : index">
+            :key="uniqueKey ? item[uniqueKey] : index"
+            :class="selectionMode && $style.isSelectableRow"
+            :is-selected="selectionMode ? isItemSelected(item) : false"
+            @click="onRowClick(item, $event)">
+            <FluxTableCell
+                v-if="selectionMode"
+                :class="$style.tableCellSelection">
+                <FluxCheckbox
+                    :model-value="isItemSelected(item)"
+                    @update:model-value="onSelectRow(item)"/>
+            </FluxTableCell>
+
             <template v-for="(_, name) of slots">
                 <slot
                     v-if="!IGNORED_SLOTS.includes(name as string)"
-                    v-bind="{index, item, items: limitedItems, page, perPage, total}"
+                    v-bind="{index, item, items: limitedItems, page, perPage, total, isSelected: isItemSelected(item)}"
                     :name="name"/>
             </template>
         </FluxTableRow>
@@ -69,10 +90,17 @@
     lang="ts"
     setup
     generic="T extends Record<string, any>">
-    import { computed, type VNode } from 'vue';
+    import { computed, unref, type VNode } from 'vue';
+    import FluxCheckbox from './FluxCheckbox.vue';
     import FluxPaginationBar from './FluxPaginationBar.vue';
     import FluxTable from './FluxTable.vue';
+    import FluxTableCell from './FluxTableCell.vue';
+    import FluxTableHeader from './FluxTableHeader.vue';
     import FluxTableRow from './FluxTableRow.vue';
+    import $style from '~flux/components/css/component/Table.module.scss';
+
+    type SelectionId = string | number;
+    type SelectionValue = SelectionId | null | SelectionId[];
 
     const IGNORED_SLOTS: string[] = ['filter', 'header', 'footer', 'colgroups', 'pagination'];
 
@@ -81,6 +109,8 @@
         navigate: [number];
     }>();
 
+    const selected = defineModel<SelectionValue>('selected');
+
     const {
         isBordered = true,
         isHoverable = false,
@@ -88,7 +118,9 @@
         isSeparated = true,
         isStriped = false,
         items,
-        perPage
+        perPage,
+        selectionMode,
+        uniqueKey
     } = defineProps<{
         readonly fillColumns?: number;
         readonly isBordered?: boolean;
@@ -100,6 +132,7 @@
         readonly limits: number[];
         readonly page: number;
         readonly perPage: number;
+        readonly selectionMode?: 'single' | 'multiple';
         readonly total: number;
         readonly uniqueKey?: string;
     }>();
@@ -112,6 +145,7 @@
             readonly item: T;
             readonly items: T[];
             readonly total: number;
+            readonly isSelected: boolean;
         }) => VNode;
 
         filter(props: {
@@ -146,4 +180,116 @@
     }>();
 
     const limitedItems = computed(() => items.slice(0, perPage));
+
+    const currentPageIds = computed<SelectionId[]>(() => {
+        if (!uniqueKey) {
+            return [];
+        }
+
+        return unref(limitedItems).map(item => item[uniqueKey] as SelectionId);
+    });
+
+    const selectAllState = computed<boolean | null>(() => {
+        const ids = unref(currentPageIds);
+        const value = unref(selected);
+
+        if (ids.length === 0 || !Array.isArray(value)) {
+            return false;
+        }
+
+        const selectedOnPage = ids.filter(id => value.includes(id)).length;
+
+        if (selectedOnPage === 0) {
+            return false;
+        }
+
+        if (selectedOnPage === ids.length) {
+            return true;
+        }
+
+        return null;
+    });
+
+    function getItemId(item: T): SelectionId | undefined {
+        if (!uniqueKey) {
+            return undefined;
+        }
+
+        return item[uniqueKey] as SelectionId;
+    }
+
+    function isItemSelected(item: T): boolean {
+        if (!selectionMode) {
+            return false;
+        }
+
+        const id = getItemId(item);
+
+        if (id === undefined) {
+            return false;
+        }
+
+        const value = unref(selected);
+
+        if (Array.isArray(value)) {
+            return value.includes(id);
+        }
+
+        return value === id;
+    }
+
+    function onRowClick(item: T, event: MouseEvent): void {
+        if (!selectionMode) {
+            return;
+        }
+
+        const target = event.target as HTMLElement | null;
+
+        if (target?.closest('a, button, input, label, select, textarea, [role="button"]')) {
+            return;
+        }
+
+        onSelectRow(item);
+    }
+
+    function onSelectRow(item: T): void {
+        const id = getItemId(item);
+
+        if (id === undefined) {
+            return;
+        }
+
+        if (selectionMode === 'multiple') {
+            const current = Array.isArray(unref(selected)) ? unref(selected) as SelectionId[] : [];
+            selected.value = current.includes(id)
+                ? current.filter(v => v !== id)
+                : [...current, id];
+            return;
+        }
+
+        if (selectionMode === 'single') {
+            selected.value = isItemSelected(item) ? null : id;
+        }
+    }
+
+    function onSelectAll(value: boolean | null): void {
+        if (selectionMode !== 'multiple') {
+            return;
+        }
+
+        const ids = unref(currentPageIds);
+        const current = Array.isArray(unref(selected)) ? unref(selected) as SelectionId[] : [];
+
+        if (value) {
+            const additions = ids.filter(id => !current.includes(id));
+            selected.value = [...current, ...additions];
+            return;
+        }
+
+        selected.value = current.filter(id => !ids.includes(id));
+    }
+
+    if (import.meta.env.DEV && selectionMode && !uniqueKey) {
+        console.warn('[FluxDataTable] `uniqueKey` is required when `selectionMode` is set, otherwise rows cannot be tracked across renders.');
+    }
 </script>

package/src/component/FluxTable.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :class="$style.table">
+    <div :class="[$style.table, isBordered && $style.isBordered]">
         <table :class="$style.tableBase">
             <slot name="colgroups"/>
 

package/src/component/FluxTableRow.vue

@@ -1,5 +1,5 @@
 <template>
-    <tr :class="$style.tableRow">
+    <tr :class="clsx($style.tableRow, isSelected && $style.isSelected)">
         <slot/>
     </tr>
 </template>
@@ -7,9 +7,14 @@
 <script
     lang="ts"
     setup>
+    import { clsx } from 'clsx';
     import type { VNode } from 'vue';
     import $style from '~flux/components/css/component/Table.module.scss';
 
+    defineProps<{
+        readonly isSelected?: boolean;
+    }>();
+
     defineSlots<{
         default(): VNode[];
     }>();

package/src/css/component/Form.module.scss

@@ -163,6 +163,7 @@
     border-radius: var(--radius);
     box-shadow: var(--shadow-px);
     color: var(--foreground);
+    outline: 0 solid transparent;
     transition: var(--transition-default);
     transition-property: background, border-color, mixin.focus-ring-transition-properties();
 
@@ -587,6 +588,7 @@
     display: inline-flex;
     flex-shrink: 0;
     gap: 12px;
+    line-height: 20px;
     outline: 0;
 
     &.isDisabled {
@@ -618,16 +620,16 @@
 
 .checkboxElement,
 .checkboxNative {
-    margin: 1px 0;
-    height: 22px;
-    width: 22px;
+    margin: 1px 0 0;
+    height: 20px;
+    width: 20px;
 }
 
 .checkboxElement {
     position: relative;
     display: inline-flex;
-    height: 22px;
-    width: 22px;
+    height: 20px;
+    width: 20px;
     padding: 0;
     align-items: center;
     justify-content: center;
@@ -661,6 +663,7 @@
 
 .checkboxNative {
     position: absolute;
+    cursor: pointer;
     opacity: 0;
 
     @include mixin.hover {

package/src/css/component/LayerPane.module.scss

@@ -36,6 +36,10 @@
     border: 0;
 }
 
+.layerPane > .paneHeader .button {
+    margin: -9px -9px -9px 0;
+}
+
 .layerPaneSecondary {
     display: flex;
     align-items: center;

package/src/css/component/Overlay.module.scss

@@ -138,7 +138,7 @@
 
         > .paneHeader + .tabBarDefault {
             position: sticky;
-            top: 45px;
+            top: 60px;
             z-index: 100;
         }
 

package/src/css/component/Tab.module.scss

@@ -31,7 +31,7 @@
 .tabBarArrow {
     position: absolute;
     display: flex;
-    top: 3px;
+    top: 2px;
     height: calc(100% - 6px);
     width: 30px;
     align-items: center;
@@ -53,13 +53,13 @@
 .tabBarArrowStart {
     composes: tabBarArrow;
 
-    left: -6px;
+    left: 3px;
 }
 
 .tabBarArrowEnd {
     composes: tabBarArrow;
 
-    right: -6px;
+    right: 3px;
 }
 
 .baseTabBarTabs {

package/src/css/component/Table.module.scss

@@ -39,6 +39,10 @@
     height: 0;
     margin: 0;
     padding: 0;
+
+    &.isSelectableRow {
+        cursor: pointer;
+    }
 }
 
 .tableCell {
@@ -88,11 +92,25 @@ tbody .tableRow:nth-child(even) .tableCell.isStriped {
     background: rgb(from var(--gray-50) r g b / .5);
 }
 
+tbody .tableRow.isSelected .tableCell {
+    background: var(--primary-50);
+    border-color: var(--primary-100);
+}
+
+tbody .tableRow.isSelected + .tableRow .tableCell {
+    border-top-color: var(--primary-100);
+}
+
 @media (hover: hover) {
     tbody .tableRow:hover .tableCell.isHoverable,
     tbody .tableRow:has(:focus-visible) .tableCell.isHoverable {
         background: var(--gray-50);
     }
+
+    tbody .tableRow.isSelected:hover .tableCell.isHoverable,
+    tbody .tableRow.isSelected:has(:focus-visible) .tableCell.isHoverable {
+        background: var(--primary-50);
+    }
 }
 
 tfoot .tableCell {
@@ -111,6 +129,10 @@ tfoot .tableCell {
     margin: -4px 0 -4px -3px;
 }
 
+.tableCellSelection {
+    width: 0;
+}
+
 .tableFill {
     pointer-events: none;
 
@@ -180,12 +202,20 @@ tfoot .tableCell {
     }
 }
 
+.basePaneStructure:has(.table) {
+    --table-spacing: 18px;
+}
+
+.basePaneStructure .basePaneStructure {
+    --table-spacing: 15px;
+}
+
 .basePaneStructure > .table .tableCell:first-child .tableCellContent {
-    padding-left: 18px;
+    padding-left: var(--table-spacing);
 }
 
 .basePaneStructure > .table .tableCell:last-child .tableCellContent {
-    padding-right: 18px;
+    padding-right: var(--table-spacing);
 }
 
 .basePaneStructure > .table .tableActions {
@@ -193,7 +223,7 @@ tfoot .tableCell {
 }
 
 .basePaneStructure > .table :is(caption) {
-    padding: 12px 18px;
+    padding: 12px var(--table-spacing);
     border-top: 1px solid var(--gray-100);
 }