From 15ecb402aac084d9b39b32b437e7d747aa140a81 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ramirez=20Vargas=2C=20Jos=C3=A9=20Pablo?= Date: Sun, 19 May 2024 21:32:30 -0600 Subject: [PATCH 01/16] chore: Clean dependencies --- package.json | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index 0834fc4..5ecd00f 100644 --- a/package.json +++ b/package.json @@ -31,6 +31,7 @@ "@sveltejs/package": "^2.0.0", "@sveltejs/vite-plugin-svelte": "^3.0.0", "publint": "^0.1.9", + "sass": "^1.77.1", "svelte": "^5.0.0-next.136", "svelte-check": "^3.6.0", "tslib": "^2.4.1", @@ -40,10 +41,5 @@ }, "svelte": "./dist/index.js", "types": "./dist/index.d.ts", - "type": "module", - "dependencies": { - "bootstrap": "^5.3.3", - "bootstrap-icons": "^1.11.3", - "sass": "^1.77.1" - } + "type": "module" } From 88954543acb62ac03167856a469f9afba5725dfa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ramirez=20Vargas=2C=20Jos=C3=A9=20Pablo?= Date: Sun, 19 May 2024 21:34:02 -0600 Subject: [PATCH 02/16] fix: Correct bootstrap-icons & add Bootstrap JS --- src/app.html | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/app.html b/src/app.html index a88224c..be7e4cb 100644 --- a/src/app.html +++ b/src/app.html @@ -5,10 +5,11 @@ - + %sveltekit.head%
%sveltekit.body%
+ From fa88676d9aa4eed7aefab954bebf6e41d0b4cbb6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ramirez=20Vargas=2C=20Jos=C3=A9=20Pablo?= Date: Sun, 19 May 2024 22:58:44 -0600 Subject: [PATCH 03/16] feat: Add JsDoc commets for Intellisense support --- src/lib/WjDataView.svelte | 38 ++++++++++++++++++++++++++++++++++++-- 1 file changed, 36 insertions(+), 2 deletions(-) diff --git a/src/lib/WjDataView.svelte b/src/lib/WjDataView.svelte index 1bb814c..ac7dbba 100644 --- a/src/lib/WjDataView.svelte +++ b/src/lib/WjDataView.svelte @@ -37,15 +37,49 @@ class: cssClass, ...restProps }: { + /** + * Defines the columns the data view component will create. + */ columns: WjDvColumn[]; + /** + * The data that is shown by the data view component. + */ data: WjDvRow[]; + /** + * Function that retrieves a column's value using the row and provided key for columns that don't provide one. + * + * **HINT**: Its signature matches that of `dot-prop`'s `getProperty()` function. + * @param row Data object for the row being rendered (hence its name). + * @param key Key of the column being rendered. + */ get?: (row: TRow, key: string) => any; + /** + * The width for colums that don't specify its own width, in `em`'s. + */ defaultWidth?: number; + /** + * Turns the row-highlighting-on-hover feature on and off. + */ rowHighlight?: boolean; + /** + * Turns the striping of rows on and off. + */ striped?: boolean; + /** + * Turns the divider between pinned and unpinned columns on and off. + */ pinnedDivider?: boolean; - headerCell?: Snippet<[WjDvColumn]> - dataCell?: Snippet<[WjDvColumn, WjDvRow]> + /** + * Snippet used to render the contents of header cells. + */ + headerCell?: Snippet<[WjDvColumn]>; + /** + * Snippet used to render the contents of data cells. + */ + dataCell?: Snippet<[WjDvColumn, WjDvRow]>; + /** + * Additional CSS classes that are applied to the data view's viewport (the top-level element). + */ class?: string; } = $props(); From f48a15035e91dee4c47082dd4a94290e0b63978f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ramirez=20Vargas=2C=20Jos=C3=A9=20Pablo?= Date: Sun, 19 May 2024 22:59:17 -0600 Subject: [PATCH 04/16] docs: Complete README sections and other enhancements/fixes --- README.md | 82 +++++++++++++++++++++++++++++++++++++++++++++++-------- 1 file changed, 70 insertions(+), 12 deletions(-) diff --git a/README.md b/README.md index 6398c14..28d16d5 100644 --- a/README.md +++ b/README.md @@ -8,6 +8,8 @@ The data view component renders a table with functionality suitable for close ex provides conveniences like pinnable columns and row highlighting on hover, useful to users when following data with their eyes. +> **[Demo Website](https://wj-dataview.vercel.app)** + The component tries to be as unopinionated as possible in terms of styling and tries to provide as little styling as possible. Certain features, however, impose some appearance requirements. For example, pinning columns in the grid requires opaque background colors or else the data from other columns will be seen through the pinned columns when @@ -34,13 +36,40 @@ The only two required properties are `columns` and `data`. The former defines t latter provides the data that shows in each column. By default, the `key` property of each column is treated as the key to retrieve data from the data row, but this can be overridden by providing `get` functions. -> **[Demo Website](https://wj-dataview.vercel.app)** +Each column must have the `key` and the `text` properties. Any other property is optional. `key` is a unique string, +and by default, it is assumed to be the name of a property in the data objects given to the grid via the `data` +property. -## Props - -## Snippets (formerly slots) +```html + +... + + + +``` -## Events +This example would render the data view with two columns, whose captions will read `ID` and `Tag`. The data shown in +each column will be extracted from the `MyDataModel.id` and `MyDataModel.tagName` properties of each of the data +objects in the `data` array. ## Theming the Data View @@ -52,8 +81,8 @@ directly defining the CSS variables. ### The WjDataViewTheme Component This component is a mere convenience to setting up themes for data view components. It works by defining the CSS -variables at the end of the section in a `
` element with its CSS `display` attribute set to `contets` that wraps -the target `WjDataView` component. +variables in a `
` element with its CSS `display` attribute set to `contents` that wraps the target `WjDataView` +component. > **TIP**: The `WjDataViewTheme` component doesn't have to be the immediate parent of a `WjDataView`. It can be > placed higher in the hierarchy to, for example, cover more than one `WjDataView` component. @@ -82,8 +111,10 @@ export type Theme = { Since the amount of properties are a lot to set every time, the most effective way to create a theme is to spread the stock theme (light or dark) and then modify what's needed. +> In the future, deep merging instead of spreading will be enabled via the `wj-merge` package. + For example, Bootstrap consumers might want to ensure that the data view always uses the body's background color. In -this case, we could create the following theme in `dataViewThemes.ts`: +this case, we could create the following theme in a `dataViewThemes.ts`: ```typescript import { stockLight, type Theme } from '@wj/dataview'; @@ -106,15 +137,16 @@ export const bootstrapTheme: Theme = { }; ``` -As seen, one can take advantage of CSS variables to define things. In Bootstrap that provides light and dark modes, -have different definitions for these CSS variables, making the data view's theme immediately responsive to theme -selection changes. +As seen, one can take advantage of CSS variables to define things. Bootstrap provides light and dark modes, and these +variables have different definitions depending on the mode, making the data view's theme immediately responsive to +mode selection changes. This is not perfect, however, because Bootstrap doesn't have `-rgb` variables for every color, so not everything goes as smoothly. Create responsive CSS variables to perfect the theme. > **IMPORTANT**: All background colors are composed using the provided color and an opacity value. This is why the -> color must be specified in RGB format, or with a CSS variable that defines it in RGB format. +> color must be specified in RGB format, or with a CSS variable that defines it in RGB format. Formats like `#rrggbb` +> simply won't work. Anyway, use the `WjDataViewTheme` component as a wrapper for any `WjDataView` components that you may have. This wrapper doesn't have to be the immediate parent, so put it wherever is best according to your needs. @@ -148,6 +180,32 @@ The complete list of CSS variables that can be set for the data view component a | `--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. | +## Reference + +### Props + +| Property | Type | Default Value | Description | +| - | - | - | - | +| `columns` | `WjDvColumn[]` | (none) | Defines the columns the data view component will create. | +| `data` | `WjDvRow[]` | (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. | +| `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. | +| `class` | `string` | `undefined` | Additional CSS classes that are applied to the data view's viewport (the top-level element). | + +### Snippets (formerly slots) + +| Name | Signature | Description | +| - | - | - | +| `headerCell` | `(col: WjDvColumn)` | Renders header cells' content. The snippet is passed the column definition. | +| `dataCell` | `(col: WjDvColumn, row: WjDvRow])` | Renders data cells' content. The snippet is passed the column definition and the data object for the row being rendered. | + +### Events + +None. + ## Roadmap - [x] Scrollable viewport From 13367c5bd734953bca4108994c3c7e8997e75747 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ramirez=20Vargas=2C=20Jos=C3=A9=20Pablo?= Date: Sun, 19 May 2024 23:00:39 -0600 Subject: [PATCH 05/16] fix: Remove the selected property from the row type --- src/lib/WjDataView.svelte | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/lib/WjDataView.svelte b/src/lib/WjDataView.svelte index ac7dbba..70ece33 100644 --- a/src/lib/WjDataView.svelte +++ b/src/lib/WjDataView.svelte @@ -3,9 +3,8 @@ export type WjDvRow = Record> = TRow & { id: string | number; - selected?: boolean; expanded?: boolean; - } + }; export type WjDvColumn = Record, TRow extends Record = Record> = TCol & { key: string; @@ -17,7 +16,7 @@ alignment?: ColAlignment; noTextWrap?: boolean; get?: (row: TRow) => any; - } + }; + + + +{#if dragStart !== null} +
+
+
+
0 })} + style:width={`${deltaOverlayWidth}px`}> +
+
+{/if} +
+
+ + + \ No newline at end of file From 6954091d40d33c7994987cd684028f497126e18a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Pablo=20Ram=C3=ADrez=20Vargas?= Date: Mon, 20 May 2024 01:29:12 -0700 Subject: [PATCH 07/16] Add files via upload --- src/lib/zoomRatio.ts | 50 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 50 insertions(+) create mode 100644 src/lib/zoomRatio.ts diff --git a/src/lib/zoomRatio.ts b/src/lib/zoomRatio.ts new file mode 100644 index 0000000..385cba7 --- /dev/null +++ b/src/lib/zoomRatio.ts @@ -0,0 +1,50 @@ +import { readable } from "svelte/store"; + +const wnd = globalThis.window; +let initialPixelRatio = wnd?.devicePixelRatio; +calibrateInitialPixelRatio(); + +function calculateRatio() { + return 1.0 * wnd?.screen.availWidth / globalThis.document?.documentElement.clientWidth; +} + +function isWindowMaximized() { + return wnd?.screenX === 0 && wnd?.screenY === 0 + && wnd?.outerWidth === wnd?.screen.availWidth + && wnd?.outerHeight === wnd?.screen.availHeight; +} + +function calibrateInitialPixelRatio() { + if (!isWindowMaximized()) { + return; + } + const maximizedRatio = calculateRatio(); + if (Math.abs(maximizedRatio - 1) < 0.000000001) { + initialPixelRatio = wnd?.devicePixelRatio; + } + else { + // Zoom is applied. + initialPixelRatio = wnd?.devicePixelRatio / maximizedRatio; + } +} + +function calculateZoomRatio() { + return 1 + 1.0 * (wnd?.devicePixelRatio - initialPixelRatio) / initialPixelRatio; +} + + +/** + * Read-only store that returns the current window's zoom level. + */ +export default readable(calculateZoomRatio(), set => { + wnd?.visualViewport?.addEventListener('resize', handleResize); + + return () => { + wnd?.visualViewport?.removeEventListener('resize', handleResize); + } + + function handleResize() { + calibrateInitialPixelRatio(); + set(calculateZoomRatio()); + } +}); From 7a4f1332b360ce3ec0bbc7cc08065abeccc7bc3a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ramirez=20Vargas=2C=20Jos=C3=A9=20Pablo?= Date: Tue, 21 May 2024 01:01:10 -0600 Subject: [PATCH 08/16] fix: Correct scope in .npmrc --- .npmrc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.npmrc b/.npmrc index 2b249b1..ab8b8ec 100644 --- a/.npmrc +++ b/.npmrc @@ -1,2 +1,2 @@ engine-strict=true -@wjsoft:registry=https://www.npmjs.com +@wj:registry=https://www.npmjs.com From bbad43c3ec8edc021585132cb6069265614ab085 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ramirez=20Vargas=2C=20Jos=C3=A9=20Pablo?= Date: Tue, 21 May 2024 01:01:37 -0600 Subject: [PATCH 09/16] feat: Add column resizer component --- src/lib/Resizer.svelte | 135 ++++++++++++++++++++++------------------- 1 file changed, 72 insertions(+), 63 deletions(-) diff --git a/src/lib/Resizer.svelte b/src/lib/Resizer.svelte index 82d81d6..a63e954 100644 --- a/src/lib/Resizer.svelte +++ b/src/lib/Resizer.svelte @@ -1,49 +1,61 @@ - + {#if dragStart !== null}
-
-
+
0 })} - style:width={`${deltaOverlayWidth}px`}> -
+ class={combineClasses('overlay delta-overlay', { 'delta-neg': delta < 0, 'delta-pos': delta > 0 })} + style:width="{deltaOverlayWidth}px" + >
{/if} -
-
+
+ +>
\ No newline at end of file + From 7ec144d509ee44d738ce3fe2ca0aaea878173622 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ramirez=20Vargas=2C=20Jos=C3=A9=20Pablo?= Date: Tue, 21 May 2024 01:02:19 -0600 Subject: [PATCH 10/16] feat: Update themese --- src/lib/stockTheme.ts | 56 ++++++++++++++++++++++++++++++++++++++++++- src/routes/themes.ts | 5 +++- 2 files changed, 59 insertions(+), 2 deletions(-) diff --git a/src/lib/stockTheme.ts b/src/lib/stockTheme.ts index 2ac3926..946c6d8 100644 --- a/src/lib/stockTheme.ts +++ b/src/lib/stockTheme.ts @@ -4,6 +4,11 @@ export type ComponentColor = { color?: string; } +export type ResizerColor = { + backgroundColor?: string; + borderColor?: string; +} + export type Theme = { table?: ComponentColor; stripes?: ComponentColor; @@ -12,7 +17,16 @@ export type Theme = { width?: string; style?: 'dashed' | 'dotted' | 'double' | 'groove' | 'inset' | 'outset' | 'ridge' | 'solid' | 'unset'; color?: string; - } + }, + resizer?: Omit & { + width?: string; + overlay?: { + opacity?: number; + item?: ResizerColor; + positiveDelta?: ResizerColor; + negativeDelta?: ResizerColor; + } + }; } export const stockLight: Theme = { @@ -35,6 +49,26 @@ export const stockLight: Theme = { width: '0.1em', style: 'solid', color: 'darkgray' + }, + resizer: { + width: '0.4em', + backgroundColor: '0, 0, 0', + opacity: 0.05, + overlay: { + opacity: 0.7, + item: { + backgroundColor: 'lightblue', + borderColor: 'blue' + }, + positiveDelta: { + backgroundColor: 'lightgreen', + borderColor: 'green' + }, + negativeDelta: { + backgroundColor: 'pink', + borderColor: 'red' + } + } } }; @@ -58,5 +92,25 @@ export const stockDark: Theme = { width: '0.1em', style: 'solid', color: 'lightgray' + }, + resizer: { + width: '0.4em', + backgroundColor: '255, 255, 255', + opacity: 0.05, + overlay: { + opacity: 0.7, + item: { + backgroundColor: '#0578ea', + borderColor: '#13aeff' + }, + positiveDelta: { + backgroundColor: 'lightgreen', + borderColor: 'green' + }, + negativeDelta: { + backgroundColor: 'pink', + borderColor: 'red' + } + } } }; diff --git a/src/routes/themes.ts b/src/routes/themes.ts index 2b50840..7b8b6e7 100644 --- a/src/routes/themes.ts +++ b/src/routes/themes.ts @@ -1,4 +1,4 @@ -import { stockLight, type Theme } from "$lib/stockTheme.js"; +import { stockLight, stockDark, type Theme } from "$lib/stockTheme.js"; export const bootstrapTheme: Theme = { ...stockLight, @@ -14,6 +14,9 @@ export const bootstrapTheme: Theme = { ...stockLight.rowHighlight, backgroundColor: 'var(--bs-primary-rgb)', opacity: 0.2 + }, + resizer: { + ...stockLight.resizer } }; From 05a75653bed26079ec2c85e8a9be99bdac0fdbfd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ramirez=20Vargas=2C=20Jos=C3=A9=20Pablo?= Date: Tue, 21 May 2024 01:03:02 -0600 Subject: [PATCH 11/16] feat: Add resizable columns --- README.md | 13 +++++++++- src/lib/WjDataView.svelte | 45 +++++++++++++++++++++++++++------- src/lib/WjDataViewTheme.svelte | 10 ++++++++ 3 files changed, 58 insertions(+), 10 deletions(-) diff --git a/README.md b/README.md index 28d16d5..40ad90b 100644 --- a/README.md +++ b/README.md @@ -179,6 +179,16 @@ The complete list of CSS variables that can be set for the data view component a | `--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. | +| `--wjdv-resizer-width` | `0.4em` | `0.4em` | Column resizer's width. | +| `--wjdv-resizer-bg-color-rgb` | `0, 0, 0` | `255, 255, 255` | Resizer handle's background color. | +| `--wjdv-resizer-bg-opacity` | `0.05` | `0.05` | Resizer handle's background's opacity. | +| `--wjdv-resizer-overlay-opacity` | `0.7` | `0.7` | Opacity of the entire resizer overlay. | +| `--wjdv-resizer-overlay-bg-color` | `lightblue` | `#0578ea` | Background color of the overlay section that represents the original column's size. | +| `--wjdv-resizer-overlay-border-color` | `blue` | `#13aeff` | Border color of the overlay section that represents the original column's size. | +| `--wjdv-resizer-deltapos-bg-color` | `lightgreen` | `lightgreen` | Background color of the overlay setion that represents the column's size increase. | +| `--wjdv-resizer-deltapos-border-color` | `green` | `green` | Border color of the overlay setion that represents the column's size increase. | +| `--wjdv-resizer-deltaneg-bg-color` | `pink` | `pink` | Background color of the overlay setion that represents the column's size reduction. | +| `--wjdv-resizer-deltaneg-border-color` | `red` | `red` | Border color of the overlay setion that represents the column's size reduction. | ## Reference @@ -212,15 +222,16 @@ None. - [x] Striped look - [x] Row highlighting effect on hover - [x] Column alignment +- [x] Text wrap control - [x] Hideable columns - [x] Pinnable columns - [x] Customizable appearance - [x] Theme component - [x] headerCell snippet - [x] dataCell snippet +- [x] Resizable columns - [ ] headerControl snippet - [ ] dataControl snippet - [ ] Expansible rows (expansionRow snippet) -- [ ] Resizable columns - [ ] Make cell/row/column padding themeable - [ ] dataRow snippet diff --git a/src/lib/WjDataView.svelte b/src/lib/WjDataView.svelte index 70ece33..26b7dbe 100644 --- a/src/lib/WjDataView.svelte +++ b/src/lib/WjDataView.svelte @@ -10,7 +10,8 @@ key: string; text: string; width?: number; - pinnable?: boolean; + minWidth?: number; + resizable?: boolean; pinned?: boolean; hidden?: boolean; alignment?: ColAlignment; @@ -20,6 +21,7 @@ + +
+ +
+ + From d5a8d209fdb9c4d746738df5e8aa51eb0b028c98 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ramirez=20Vargas=2C=20Jos=C3=A9=20Pablo?= Date: Tue, 21 May 2024 01:11:52 -0600 Subject: [PATCH 13/16] fix: Document doesn't exist error --- src/routes/ThemeSwitch.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/routes/ThemeSwitch.svelte b/src/routes/ThemeSwitch.svelte index cf22255..44c3ec2 100644 --- a/src/routes/ThemeSwitch.svelte +++ b/src/routes/ThemeSwitch.svelte @@ -2,7 +2,7 @@ import { fly } from "svelte/transition"; let darkTheme = $state(false); - let htmlEl = document.querySelector("html"); + let htmlEl = document?.querySelector("html"); $effect(() => htmlEl?.setAttribute("data-bs-theme", darkTheme ? "dark" : "light")); From c0bd038bc5a87a66ab926a94510d00bc95e6517b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ramirez=20Vargas=2C=20Jos=C3=A9=20Pablo?= Date: Tue, 21 May 2024 01:17:17 -0600 Subject: [PATCH 14/16] fix: Document is not defined, take 2 --- src/routes/ThemeSwitch.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/routes/ThemeSwitch.svelte b/src/routes/ThemeSwitch.svelte index 44c3ec2..f64d149 100644 --- a/src/routes/ThemeSwitch.svelte +++ b/src/routes/ThemeSwitch.svelte @@ -2,7 +2,7 @@ import { fly } from "svelte/transition"; let darkTheme = $state(false); - let htmlEl = document?.querySelector("html"); + let htmlEl = globalThis?.document?.querySelector("html"); $effect(() => htmlEl?.setAttribute("data-bs-theme", darkTheme ? "dark" : "light")); From da79c5ab7ea5f98de2f0d48897f36a63e24ee0ce Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ramirez=20Vargas=2C=20Jos=C3=A9=20Pablo?= Date: Tue, 21 May 2024 01:26:26 -0600 Subject: [PATCH 15/16] feat: Export stock themes --- src/index.test.ts | 7 ------- src/lib/index.ts | 1 + 2 files changed, 1 insertion(+), 7 deletions(-) delete mode 100644 src/index.test.ts diff --git a/src/index.test.ts b/src/index.test.ts deleted file mode 100644 index e07cbbd..0000000 --- a/src/index.test.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { describe, it, expect } from 'vitest'; - -describe('sum test', () => { - it('adds 1 + 2 to equal 3', () => { - expect(1 + 2).toBe(3); - }); -}); diff --git a/src/lib/index.ts b/src/lib/index.ts index a9a8034..b923847 100644 --- a/src/lib/index.ts +++ b/src/lib/index.ts @@ -2,3 +2,4 @@ export * from "./WjDataView.svelte"; export { default as WjDataView } from "./WjDataView.svelte"; export * from "./WjDataViewTheme.svelte"; export { default as WjDataViewTheme } from "./WjDataViewTheme.svelte"; +export * from './stockTheme.js'; From 480a1163fed91a5a7c4259fc88b53632d8969f42 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ramirez=20Vargas=2C=20Jos=C3=A9=20Pablo?= Date: Tue, 21 May 2024 01:39:02 -0600 Subject: [PATCH 16/16] fix: Change scope to an available one --- .npmrc | 2 +- README.md | 10 +++++----- package.json | 2 +- src/routes/+page.svelte | 4 ++-- 4 files changed, 9 insertions(+), 9 deletions(-) diff --git a/.npmrc b/.npmrc index ab8b8ec..9844771 100644 --- a/.npmrc +++ b/.npmrc @@ -1,2 +1,2 @@ engine-strict=true -@wj:registry=https://www.npmjs.com +@wjfe:registry=https://www.npmjs.com diff --git a/README.md b/README.md index 40ad90b..e4430db 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# @wj/dataview +# @wjfe/dataview > Svelte v5 table component suitable for examination of extensive tabular data. @@ -23,13 +23,13 @@ Tailwind CSS, Bulma, etc.), you may style it in accordance to what is shown in t Install the package: ```powershell -npm i @wj/dataview +npm i @wjfe/dataview ``` Now import the data view component and use it: ```typescript -import { WjDataView } from '@wj/dataview'; +import { WjDataView } from '@wjfe/dataview'; ``` The only two required properties are `columns` and `data`. The former defines the columns in the data view; the @@ -42,7 +42,7 @@ property. ```html