Merge pull request #33 from WJSoftware:JP/RowTracking

feat!: Rename rowHighlight prop to rowTracking
WJSoftware · Jul 6, 2024 · 3910b23 · 3910b23
2 parents 8261a4b + fedff15
commit 3910b23
Show file tree

Hide file tree

Showing 9 changed files with 29 additions and 29 deletions.
diff --git a/README.md b/README.md
@@ -123,7 +123,7 @@ export type BorderDefinition = {
 export type Theme = {
     table?: ComponentColor;
     stripes?: ComponentColor;
-    rowHighlight?: ComponentColor;
+    rowTracking?: ComponentColor;
     rowSelection?: ComponentColor;
     pinnedColumnsDivider?: BorderDefinition,
     resizer?: {
@@ -155,7 +155,7 @@ export const bootstrapTheme: Theme = {
     stripes: {
         backgroundColor: 'var(--bs-emphasis-color-rgb)'
     },
-    rowHighlight: {
+    rowTracking: {
         backgroundColor: 'var(--bs-primary-rgb)',
         opacity: 0.2
     },
@@ -217,9 +217,9 @@ The complete list of CSS variables that can be set for the data view component a
 | `--wjdv-striping-bg-color-rgb` | `0, 0, 0` | `255, 255, 255` | Striping background color.  Set the opacity as well. |
 | `--wjdv-striping-bg-opacity` | `0.04` | `0.07` | Striping background color's opacity. |
 | `--wjdv-striping-fg-color` | `inherit` | `inherit` | Foreground (or text) color for striped rows. |
-| `--wjdv-rowhighlight-bg-color-rgb` | `0, 0, 0` | `255, 255, 255` | Background color for row highlighting on hover. |
-| `--wjdv-rowhighlight-bg-opacity` | `0.07` | `0.15` | Opacity for row highlighting.  Usually set higher than the striping one or the effect doesn't look very good. |
-| `--wjdv-rowhighlight-fg-color` | `inherit` | `inherit` | Foreground (or text) color for highlighted rows. |
+| `--wjdv-rowtracking-bg-color-rgb` | `0, 0, 0` | `255, 255, 255` | Background color for row tracking. |
+| `--wjdv-rowtracking-bg-opacity` | `0.07` | `0.15` | Opacity for row tracking.  Usually set higher than the striping one or the effect doesn't look very good. |
+| `--wjdv-rowtracking-fg-color` | `inherit` | `inherit` | Foreground (or text) color for tracked rows. |
 | `--wjdv-sticky-divider-width` | `0.1em` | `0.1em` | Width of the border that divides pinned columns from unpinned ones. |
 | `--wjdv-sticky-divider-style` | `solid` | `solid` | Style of the border that divides pinned columns from unpinned ones. |
 | `--wjdv-sticky-divider-color` | `darkgray` | `lightgray` | Color of the border that divides pinned columns from unpinned ones. |
@@ -248,7 +248,7 @@ The complete list of CSS variables that can be set for the data view component a
 | `data` | `WjDvRow<TRow>[]` | (none) | The data that is shown by the data view component. |
 | `get` | `(row: TRow, key: string) => any` | (function) | Function that retrieves a column's value using the row and provided key for columns that don't provide one. |
 | `defaultWidth` | `number` | `10` | The width for colums that don't specify its own width, in `em`'s. |
-| `rowHighlight` | `boolean` | `true` | Turns the row-highlighting-on-hover feature on and off. |
+| `rowTracking` | `boolean` | `true` | Turns the row tracking feature on and off. |
 | `rowSelectionBg` | `boolean` | `true` |   Turns the row-highlighting-on-selection feature on and off. |
 | `striped` | `boolean` | `true` | Turns the striping of rows on and off. |
 | `pinnedDivider` | `boolean` | `true` | Turns the divider between pinned and unpinned columns on and off. |

diff --git a/src/lib/WjDataView.svelte b/src/lib/WjDataView.svelte
@@ -156,7 +156,7 @@
         data = $bindable(),
         get = (r, k) => r[k],
         defaultWidth = 10,
-        rowHighlight = true,
+        rowTracking = true,
         rowSelectionBg = true,
         striped = true,
         gridBorders = GridBorders.None,
@@ -188,9 +188,9 @@
          */
         defaultWidth?: number;
         /**
-         * Turns the row-highlighting-on-hover feature on and off.
+         * Turns the row tracking feature on and off.
          */
-        rowHighlight?: boolean;
+        rowTracking?: boolean;
         /**
          * Turns the row-highlighting-on-selection feature on and off.
          */
@@ -335,7 +335,7 @@
                 <div class="col-header extra-header">&nbsp;</div>
             </div>
         </div>
-        <div class={combineClasses('dataview-body', { striped, 'row-highlight': rowHighlight })} role="rowgroup">
+        <div class={combineClasses('dataview-body', { striped, 'row-tracking': rowTracking })} role="rowgroup">
             {#each data as row (row.id)}
             <div
                 class="dataview-row-bg"
@@ -403,8 +403,8 @@
         --wjdv-color: var(--wjdv-fg-color, inherit);
         --wjdv-striping-bg-color: rgba(var(--wjdv-striping-bg-color-rgb, 0, 0, 0), var(--wjdv-striping-bg-opacity, 0.04));
         --wjdv-striping-color: var(--wjdv-striping-fg-color, inherit);
-        --wjdv-rowhighlight-bg-color: rgba(var(--wjdv-rowhighlight-bg-color-rgb, 0, 0, 0), var(--wjdv-rowhighlight-bg-opacity, 0.07));
-        --wjdv-rowhighlight-color: rgba(--wjdv-rowhighlight-fg-color, inherit);
+        --wjdv-rowtracking-bg-color: rgba(var(--wjdv-rowtracking-bg-color-rgb, 0, 0, 0), var(--wjdv-rowtracking-bg-opacity, 0.07));
+        --wjdv-rowtracking-color: rgba(--wjdv-rowtracking-fg-color, inherit);
         --wjdv-sticky-divider: var(--wjdv-sticky-divider-width, 0.2em) var(--wjdv-sticky-divider-style, solid) var(--wjdv-sticky-divider-color, darkgray);
         --wjdv-selected-bg-color: rgba(var(--wjdv-selected-bg-color-rgb, 227, 240, 254), var(--wjdv-selected-bg-opacity, 1));
         --wjdv-selected-color: var(--wjdv-selected-fg-color, inherit);
@@ -494,15 +494,15 @@
             }
         }
 
-        &.row-highlight div.dataview-row-h {
+        &.row-tracking div.dataview-row-h {
             &:hover {
-                background-color: var(--wjdv-rowhighlight-bg-color);
+                background-color: var(--wjdv-rowtracking-bg-color);
 
                 // The following is correct, but Svelte says it is an unused CSS selector.
                 // It's been re-written outside the SCSS block with :global() as workaround.
 
                 // div.sticky-data div.dataview-cell-d {
-                //     background-color: var(--wjdv-rowhighlight-bg-color) !important;
+                //     background-color: var(--wjdv-rowtracking-bg-color) !important;
                 // }
             }
         }
@@ -513,8 +513,8 @@
         background-color: var(--wjdv-striping-bg-color);
         color: var(--wjdv-striping-color);
     }
-    :global(div.dataview-body.row-highlight) div.dataview-row-h:hover div.sticky-data :global(div.dataview-cell-d) {
-        background-color: var(--wjdv-rowhighlight-bg-color) !important;
+    :global(div.dataview-body.row-tracking) div.dataview-row-h:hover div.sticky-data :global(div.dataview-cell-d) {
+        background-color: var(--wjdv-rowtracking-bg-color) !important;
     }
 
     div.dataview-row-s {

diff --git a/src/lib/WjDataViewTheme.svelte b/src/lib/WjDataViewTheme.svelte
@@ -19,9 +19,9 @@
     style:--wjdv-striping-bg-color-rgb={theme.stripes?.backgroundColor}
     style:--wjdv-striping-bg-opacity={theme.stripes?.opacity}
     style:--wjdv-striping-fg-color={theme.stripes?.color}
-    style:--wjdv-rowhighlight-bg-color-rgb={theme.rowHighlight?.backgroundColor}
-    style:--wjdv-rowhighlight-bg-opacity={theme.rowHighlight?.opacity}
-    style:--wjdv-rowhighlight-fg-color={theme.rowHighlight?.color}
+    style:--wjdv-rowtracking-bg-color-rgb={theme.rowTracking?.backgroundColor}
+    style:--wjdv-rowtracking-bg-opacity={theme.rowTracking?.opacity}
+    style:--wjdv-rowtracking-fg-color={theme.rowTracking?.color}
     style:--wjdv-sticky-divider-width={theme.pinnedColumnsDivider?.width}
     style:--wjdv-sticky-divider-style={theme.pinnedColumnsDivider?.style}
     style:--wjdv-sticky-divider-color={theme.pinnedColumnsDivider?.color}

diff --git a/src/lib/stockTheme.ts b/src/lib/stockTheme.ts
@@ -18,7 +18,7 @@ export type BorderDefinition = {
 export type Theme = {
     table?: ComponentColor;
     stripes?: ComponentColor;
-    rowHighlight?: ComponentColor;
+    rowTracking?: ComponentColor;
     rowSelection?: ComponentColor;
     pinnedColumnsDivider?: BorderDefinition,
     resizer?: {
@@ -44,7 +44,7 @@ export const stockLight: Theme = {
         opacity: 0.04,
         color: 'inherit'
     },
-    rowHighlight: {
+    rowTracking: {
         backgroundColor: '0, 0, 0',
         opacity: 0.07,
         color: 'inherit'
@@ -95,7 +95,7 @@ export const stockDark: Theme = {
         opacity: 0.07,
         color: 'inherit'
     },
-    rowHighlight: {
+    rowTracking: {
         backgroundColor: '255, 255, 255',
         opacity: 0.15,
         color: 'inherit'

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -139,7 +139,7 @@ import &#123; WjDataView &#125; from '@wjfe/dataview';</pre>
                 bind:columns
                 bind:data={data.data}
                 striped={demoOptions.striped}
-                rowHighlight={demoOptions.rowHighlight}
+                rowTracking={demoOptions.rowTracking}
                 rowSelectionBg={demoOptions.rowSelectionBg}
                 gridBorders={demoOptions.gridBorders}
                 defaultWidth={15}

diff --git a/src/routes/MoreInfo.svelte b/src/routes/MoreInfo.svelte
@@ -15,7 +15,7 @@
         <ul>
             <li>Scrollable viewport</li>
             <li>Striped rows</li>
-            <li>Row highlighting on hover</li>
+            <li>Row tracking on mouse hover</li>
             <li>Row highlighting on selection</li>
             <li>Expansible rows</li>
             <li>Hideable columns</li>

diff --git a/src/routes/Toolbar.svelte b/src/routes/Toolbar.svelte
@@ -24,8 +24,8 @@
         <div class="btn-group btn-sm">
             <input type="checkbox" id="striped" bind:checked={demoOptions.striped} class="btn-check" />
             <label for="striped" class="btn btn-outline-primary rounded-0">Striped</label>
-            <input type="checkbox" id="rowHighlight" bind:checked={demoOptions.rowHighlight} class="btn-check" />
-            <label for="rowHighlight" class="btn btn-outline-primary">Row Highlight</label>
+            <input type="checkbox" id="rowTracking" bind:checked={demoOptions.rowTracking} class="btn-check" />
+            <label for="rowTracking" class="btn btn-outline-primary">Row Tracking</label>
             <input type="checkbox" id="rowSelectionBg" bind:checked={demoOptions.rowSelectionBg} class="btn-check" />
             <label for="rowSelectionBg" class="btn btn-outline-primary">Row Selection BG</label>
         </div>

diff --git a/src/routes/demoOptions.svelte.ts b/src/routes/demoOptions.svelte.ts
@@ -2,7 +2,7 @@ import { GridBorders } from "$lib/WjDataView.svelte";
 
 export const demoOptions = $state({
     striped: true,
-    rowHighlight: true,
+    rowTracking: true,
     rowSelectionBg: true,
     records: 200,
     borders: [] as GridBorders[],

diff --git a/src/routes/themeOptions.svelte.ts b/src/routes/themeOptions.svelte.ts
@@ -7,7 +7,7 @@ export const bootstrapTheme: Theme = {
     stripes: {
         backgroundColor: 'var(--bs-emphasis-color-rgb)'
     },
-    rowHighlight: {
+    rowTracking: {
         backgroundColor: 'var(--bs-primary-rgb)',
         opacity: 0.2
     },