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

package/dist/component/FluxDataTable.vue.d.ts

@@ -3,7 +3,10 @@ declare const _default: <T extends Record<string, any>>(__VLS_props: NonNullable
     props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
         readonly onNavigate?: (args_0: number) => any;
         readonly onLimit?: (args_0: number) => any;
-    } & VNodeProps & AllowedComponentProps & ComponentCustomProps, never>, "onNavigate" | "onLimit"> & {
+        readonly "onUpdate:selected"?: (value: (string | number) | (string | number)[]) => any;
+    } & VNodeProps & AllowedComponentProps & ComponentCustomProps, never>, "onNavigate" | "onLimit" | "onUpdate:selected"> & ({
+        selected?: (string | number) | (string | number)[];
+    } & {
         readonly fillColumns?: number;
         readonly isBordered?: boolean;
         readonly isHoverable?: boolean;
@@ -14,9 +17,10 @@ declare const _default: <T extends Record<string, any>>(__VLS_props: NonNullable
         readonly limits: number[];
         readonly page: number;
         readonly perPage: number;
+        readonly selectionMode?: "single" | "multiple";
         readonly total: number;
         readonly uniqueKey?: string;
-    } & Partial<{}>> & PublicProps;
+    }) & Partial<{}>> & PublicProps;
     expose(exposed: ShallowUnwrapRef<{}>): void;
     attrs: any;
     slots: Readonly<{
@@ -27,6 +31,7 @@ declare const _default: <T extends Record<string, any>>(__VLS_props: NonNullable
             readonly item: T;
             readonly items: T[];
             readonly total: number;
+            readonly isSelected: boolean;
         }) => VNode;
         filter(props: {
             readonly page: number;
@@ -61,6 +66,7 @@ declare const _default: <T extends Record<string, any>>(__VLS_props: NonNullable
             readonly item: T;
             readonly items: T[];
             readonly total: number;
+            readonly isSelected: boolean;
         }) => VNode;
         filter(props: {
             readonly page: number;
@@ -88,7 +94,7 @@ declare const _default: <T extends Record<string, any>>(__VLS_props: NonNullable
         }): VNode;
         colgroups(): VNode;
     };
-    emit: ((evt: "navigate", args_0: number) => void) & ((evt: "limit", args_0: number) => void);
+    emit: (((evt: "navigate", args_0: number) => void) & ((evt: "limit", args_0: number) => void)) & ((evt: "update:selected", value: (string | number) | (string | number)[]) => void);
 }>) => VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

package/dist/component/FluxTableRow.vue.d.ts

@@ -1,4 +1,7 @@
 import { VNode, DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+type __VLS_Props = {
+    readonly isSelected?: boolean;
+};
 declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: Readonly<{
@@ -10,7 +13,7 @@ declare function __VLS_template(): {
     rootEl: HTMLTableRowElement;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, HTMLTableRowElement>;
+declare const __VLS_component: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, HTMLTableRowElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

package/dist/index.css

@@ -767,7 +767,7 @@
 }
 .slide-over > .base-pane-structure > .pane-header + .tab-bar-default {
   position: sticky;
-  top: 45px;
+  top: 60px;
   z-index: 100;
 }
 .slide-over > .base-pane-structure > .pane-header:has(.pane-header-caption > :is(span)) + .tab-bar-default {
@@ -2573,6 +2573,10 @@
   border: 0;
 }
 
+.layer-pane > .pane-header .button {
+  margin: -9px -9px -9px 0;
+}
+
 .layer-pane-secondary {
   display: flex;
   align-items: center;
@@ -3091,6 +3095,7 @@
   display: inline-flex;
   flex-shrink: 0;
   gap: 12px;
+  line-height: 20px;
   outline: 0;
 }
 .checkbox.is-disabled {
@@ -3116,16 +3121,16 @@
 
 .checkbox-element,
 .checkbox-native {
-  margin: 1px 0;
-  height: 22px;
-  width: 22px;
+  margin: 1px 0 0;
+  height: 20px;
+  width: 20px;
 }
 
 .checkbox-element {
   position: relative;
   display: inline-flex;
-  height: 22px;
-  width: 22px;
+  height: 20px;
+  width: 20px;
   padding: 0;
   align-items: center;
   justify-content: center;
@@ -3157,6 +3162,7 @@
 
 .checkbox-native {
   position: absolute;
+  cursor: pointer;
   opacity: 0;
 }
 @media (hover: hover) {
@@ -4808,6 +4814,9 @@
   margin: 0;
   padding: 0;
 }
+.table-row.is-selectable-row {
+  cursor: pointer;
+}
 
 .table-cell {
   height: 0;
@@ -4851,11 +4860,24 @@ tbody .table-row:nth-child(even) .table-cell.is-striped {
   background: rgb(from var(--gray-50) r g b/0.5);
 }
 
+tbody .table-row.is-selected .table-cell {
+  background: var(--primary-50);
+  border-color: var(--primary-100);
+}
+
+tbody .table-row.is-selected + .table-row .table-cell {
+  border-top-color: var(--primary-100);
+}
+
 @media (hover: hover) {
   tbody .table-row:hover .table-cell.is-hoverable,
   tbody .table-row:has(:focus-visible) .table-cell.is-hoverable {
     background: var(--gray-50);
   }
+  tbody .table-row.is-selected:hover .table-cell.is-hoverable,
+  tbody .table-row.is-selected:has(:focus-visible) .table-cell.is-hoverable {
+    background: var(--primary-50);
+  }
 }
 tfoot .table-cell {
   border-top: 1px solid var(--gray-100);
@@ -4873,6 +4895,10 @@ tfoot .table-cell {
   margin: -4px 0 -4px -3px;
 }
 
+.table-cell-selection {
+  width: 0;
+}
+
 .table-fill {
   pointer-events: none;
 }
@@ -4932,12 +4958,20 @@ tfoot .table-cell {
   }
 }
 
+.base-pane-structure:has(.table) {
+  --table-spacing: 18px;
+}
+
+.base-pane-structure .base-pane-structure {
+  --table-spacing: 15px;
+}
+
 .base-pane-structure > .table .table-cell:first-child .table-cell-content {
-  padding-left: 18px;
+  padding-left: var(--table-spacing);
 }
 
 .base-pane-structure > .table .table-cell:last-child .table-cell-content {
-  padding-right: 18px;
+  padding-right: var(--table-spacing);
 }
 
 .base-pane-structure > .table .table-actions {
@@ -4945,7 +4979,7 @@ tfoot .table-cell {
 }
 
 .base-pane-structure > .table :is(caption) {
-  padding: 12px 18px;
+  padding: 12px var(--table-spacing);
   border-top: 1px solid var(--gray-100);
 }
 
@@ -6972,7 +7006,7 @@ tfoot .table-cell {
 .tab-bar-arrow {
   position: absolute;
   display: flex;
-  top: 3px;
+  top: 2px;
   height: calc(100% - 6px);
   width: 30px;
   align-items: center;
@@ -6993,11 +7027,11 @@ tfoot .table-cell {
 }
 
 .tab-bar-arrow-start {
-  left: -6px;
+  left: 3px;
 }
 
 .tab-bar-arrow-end {
-  right: -6px;
+  right: 3px;
 }
 
 .base-tab-bar-tabs {