@flux-ui/components 3.0.0-next.65 → 3.0.0-next.67

package/src/component/FluxTable.vue

@@ -1,5 +1,10 @@
 <template>
-    <div :class="$style.table">
+    <div
+        ref="base"
+        :class="[
+            $style.table,
+            isBordered && $style.isBordered
+        ]">
         <table :class="$style.tableBase">
             <slot name="colgroups"/>
 
@@ -30,7 +35,8 @@
 
         <div
             v-if="isLoading"
-            :class="$style.tableLoader">
+            :class="$style.tableLoader"
+            :style="{transform: `translate(${x}px, ${y}px)`}">
             <FluxSpinner/>
         </div>
 
@@ -45,7 +51,8 @@
 <script
     lang="ts"
     setup>
-    import { provide, type VNode } from 'vue';
+    import { useScrollPosition } from '@flux-ui/internals';
+    import { provide, useTemplateRef, type VNode } from 'vue';
     import { FluxTableInjectionKey } from '~flux/components/data';
     import FluxPaneBody from './FluxPaneBody.vue';
     import FluxSpinner from './FluxSpinner.vue';
@@ -79,6 +86,9 @@
         pagination?(): VNode;
     }>();
 
+    const base = useTemplateRef('base');
+    const {x, y} = useScrollPosition(base);
+
     provide(FluxTableInjectionKey, {
         isBordered,
         isHoverable,

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

@@ -588,6 +588,7 @@
     display: inline-flex;
     flex-shrink: 0;
     gap: 12px;
+    line-height: 20px;
     outline: 0;
 
     &.isDisabled {
@@ -619,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;
@@ -650,7 +651,7 @@
         transition-property: opacity;
 
         :is(path) {
-            stroke: white;
+            stroke: currentColor;
             stroke-width: 54px;
         }
     }
@@ -662,6 +663,7 @@
 
 .checkboxNative {
     position: absolute;
+    cursor: pointer;
     opacity: 0;
 
     @include mixin.hover {
@@ -682,6 +684,16 @@
     &:focus-visible + .checkboxElement {
         @include mixin.focus-outline-visible(2px);
     }
+
+    &:disabled {
+        cursor: not-allowed;
+    }
+
+    &:disabled + .checkboxElement {
+        background: var(--gray-100);
+        border-color: var(--gray-200);
+        color: var(--foreground-secondary);
+    }
 }
 
 .quantitySelector {
@@ -811,6 +823,12 @@
     border-radius: var(--radius-full);
     contain: paint;
 
+    @include mixin.focus-outline;
+
+    &:has(.toggleInput:focus-visible) {
+        @include mixin.focus-outline-visible(2px);
+    }
+
     &.isChecked {
         border-color: transparent;
 
@@ -888,8 +906,6 @@
     cursor: pointer;
     outline: 0;
 
-    @include mixin.focus-ring(2px);
-
     &::after {
         position: absolute;
         display: block;

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);
 }
 

package/src/util/createDialogRenderer.ts

@@ -31,7 +31,6 @@ export default function (attrs: object, props: Props, emit: Emit, slots: Slots,
         }
 
         dialog.addEventListener('keydown', onKeyDown, {passive: true});
-        dialog.focus();
 
         onCleanup(() => {
             dialog.removeEventListener('keydown', onKeyDown);