@spectric/ui 0.0.10 → 0.0.12

package/src/docs/HTML-Vue-Python Integration.mdx

@@ -2,16 +2,16 @@
 
 Add the dist/custom-element.json to the html.languge settings
 https://code.visualstudio.com/docs/languages/html#_html-custom-data
-![Add spectric custom elements](html-include.png)
+![Add spectric custom elements](./html-include.png)
 
 # VUE Integration
 
 Complete steps to include custom elements in the HTML language server
 then
 Add the HTML language server in the @ext:Vue.volar extention
-![Add the HTML language server in the @ext:Vue.volar extention](vue-include.png)
+![Add the HTML language server in the @ext:Vue.volar extention](./vue-include.png)
 Once setup hovering over spectric elements will provide documentation
-![alt text](vue-example.png)
+![alt text](./vue-example.png)
 
 # Python Jinja
 

package/src/stories/BitDisplay.stories.ts

@@ -44,6 +44,8 @@ const meta = {
     Int16-e:  ${pad(dataview.getInt16(0, true))}
     UInt16-E: ${pad(dataview.getUint16(0, false))} 0x${dataview.getUint16(0, false).toString(16)}
     Int16-e:  ${pad(dataview.getUint16(0, true))} 0x${dataview.getUint16(0, true).toString(16)}
+    F32-e:  ${pad(dataview.getFloat32(0, true))} 
+    F32-E:  ${pad(dataview.getFloat32(0, false))} 
   </pre>`: null}
 `},
 

package/src/stories/fixtures/ExampleContent.ts

@@ -1,5 +1,5 @@
 
-import { filterByColumn, tablecolumns, tabledata } from "./data";
+import { filterByColumn, tablecolumns, tabledata, TestData } from "./data";
 import { ExampleBits } from "./Bits";
 import { FieldTypes, SpectricQuery } from "../../components/query_bar/QueryBar";
 
@@ -7,8 +7,9 @@ import { html, LitElement } from 'lit';
 
 import { customElement, property, query, state } from 'lit/decorators.js';
 import "./lorumipsum"
-import { PaginationChangeProps } from "../../components/pagination";
+import { PaginationChangeProps, PaginationProps } from "../../components/pagination";
 import { FilterEvent } from "../../components/table/cell";
+import { TableDataOptions, TableElement } from "../../components/table";
 type Props = {
   frameWidth: number
 }
@@ -23,10 +24,15 @@ export class SpectricStorybookExampleContent extends LitElement implements Props
   @query("spectric-query")
   query!: SpectricQuery
 
+  private dataSorter = TableElement.getDefaultDataSorterAndPaginatior<TestData>(tabledata)
   @state()
   dialogOpen: boolean = false;
-  tableData = tabledata.slice(0, 3)
-  pagination = {
+  get tableData() {
+    return this.dataSorter(this)
+  }
+
+  columns = tablecolumns
+  pagination: PaginationProps = {
     page: 1,
     pageSize: 3,
     size: "xsmall",
@@ -35,17 +41,17 @@ export class SpectricStorybookExampleContent extends LitElement implements Props
   _handleFilter = (e: CustomEvent<FilterEvent<any>>) => {
     let include = e.detail.include ? "" : "not "
     if (e.detail.column.key && e.detail.value) {
-      if (this.query.value !== "") {
+      if (this.query.value.trim() !== "") {
         this.query.value = `${this.query.value} and ${include}${e.detail.column.key}: '${e.detail.value}'`
       } else {
         this.query.value = `${include}${e.detail.column.key}: '${e.detail.value}'`
       }
     }
   }
-  _handlePaginationChange = (e: CustomEvent<{ pagination: PaginationChangeProps }>) => {
-    let { pagination } = e.detail
+  _handlePaginationChange = (e: CustomEvent<TableDataOptions<TestData>>) => {
+    let { pagination, columns } = e.detail
     this.pagination = { ...this.pagination, ...pagination }
-    this.tableData = tabledata.slice((pagination.page - 1) * pagination.pageSize, (pagination.page) * pagination.pageSize)
+    this.columns = columns
     this.requestUpdate()
   }
   render() {
@@ -89,6 +95,7 @@ export class SpectricStorybookExampleContent extends LitElement implements Props
         
           </spectric-query>
           <spectric-table 
+          style="height:200px;"
           .data=${this.tableData} 
           .columns=${tablecolumns} 
           @filter=${this._handleFilter}

package/src/stories/fixtures/data.ts

@@ -33,21 +33,32 @@ export const filterByColumn = async (field, text) => {
   return values.filter(v => v.includes(text))
 }
 
-type TestData = {
+export type TestData = {
   name: string
   company: string
   contact: string
   location: {
     country: string,
     state: string
-  }
+  },
+  years: number
 }
 export const tabledata: TestData[] = [
-  { name: "Sean", company: "Spectric Labs", "contact": "123-4567", location: { "country": "US", state: "VA" } },
-  { name: "Kipp", company: "Spectric Labs", "contact": "123-4567", location: { "country": "UK", state: "N/A" } },
-  { name: "Adam", company: "Spectric Labs", "contact": "123-4567", location: { "country": "US", state: "VA" } },
-  { name: "Chris", company: "Spectric Labs", "contact": "123-4567", location: { "country": "US", state: "VA" } },
-  { name: "Michael", company: "Spectric Labs", "contact": "123-4567", location: { "country": "US", state: "VA" } },
-  { name: "Matt", company: "Spectric Labs", "contact": "123-4567", location: { "country": "US", state: "VA" } },
-  { name: "Grant", company: "Spectric Labs", "contact": "123-4567", location: { "country": "US", state: "VA" } },]
-export const tablecolumns: ColumnSettings<TestData>[] = [{ "title": "Company", key: "company" }, { "title": "Name", key: "name" }, { "title": "Contact", key: "contact" }, { "title": "Country", key: "location.country", filterable: true }]
+  { name: "Sean", company: "Spectric Labs", "contact": "123-4567", location: { "country": "US", state: "VA" }, years: 11 },
+  { name: "Kipp", company: "Spectric Labs", "contact": "123-4567", location: { "country": "UK", state: "N/A" }, years: 5 },
+  { name: "Adam", company: "Spectric Labs", "contact": "123-4567", location: { "country": "US", state: "VA" }, years: 19 },
+  { name: "Chris", company: "Spectric Labs", "contact": "123-4567", location: { "country": "US", state: "VA" }, years: 27 },
+  { name: "Michael", company: "Spectric Labs", "contact": "123-4567", location: { "country": "US", state: "VA" }, years: 3 },
+  { name: "Matt", company: "Spectric Labs", "contact": "123-4567", location: { "country": "US", state: "VA" }, years: 9 },
+  { name: "Matt", company: "Spectric Labs", "contact": "865-6343", location: { "country": "UK", state: "VA" }, years: 5 },
+  { name: "Matt", company: "Spectric Labs", "contact": "253-6795", location: { "country": "UK", state: "VA" }, years: 15 },
+  { name: "Matt", company: "Spectric Labs (Intern)", "contact": "253-6795", location: { "country": "US", state: "CO" }, years: 1 },
+  { name: "Matt", company: "Spectric Labs", "contact": "912-1230", location: { "country": "UK", state: "VA" }, years: 24 },
+  { name: "Grant", company: "Spectric Labs", "contact": "123-4567", location: { "country": "US", state: "VA" }, years: 100 },]
+export const tablecolumns: ColumnSettings<TestData>[] = [
+  { "title": "Company", key: "company", width: 200 },
+  { "title": "Name", key: "name", sortable: true },
+  { "title": "Contact", key: "contact" },
+  { "title": "Country", key: "location.country", filterable: true },
+  { "title": "Years Employed", key: "years", sortable: true }
+]

package/src/stories/pagination.stories.ts

@@ -5,6 +5,7 @@ import { html } from "lit";
 import '../components';
 import { ifDefined } from "lit/directives/if-defined.js";
 import { useArgs } from "@storybook/client-api";
+import { ButtonSizes } from "../components";
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
 const meta = {
   title: "UI/Pagination",
@@ -29,7 +30,7 @@ const meta = {
   argTypes: {
     size: {
       control: { type: 'select' },
-      options: ['small', 'medium', 'large'],
+      options: Object.values(ButtonSizes),
     },
   },
   args: {

package/src/stories/table.stories.ts

@@ -1,15 +1,16 @@
 import type { Meta, StoryObj } from "@storybook/web-components";
 
-import { ColumnSettings, PaginationChangeProps, type TableProps as Props } from "../components/";
+import { ColumnSettings, PaginationChangeProps, TableElement, TableSelectOptions, TableSortDirection, TableSortOption, type TableProps as Props } from "../components/";
 import { html } from "lit";
 import '../components';
 import { ifDefined } from "lit/directives/if-defined.js";
 import { useArgs } from "@storybook/client-api";
-import { FilterEvent } from "../components/table/cell";
+import { FilterEvent, rowGetValue } from "../components/table/cell";
 import { tablecolumns, tabledata } from "./fixtures/data";
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-const data = tabledata
+const data = JSON.parse(JSON.stringify([...tabledata, ...tabledata, ...tabledata, ...tabledata, ...tabledata, ...tabledata, ...tabledata, ...tabledata, ...tabledata, ...tabledata, ...tabledata, ...tabledata, ...tabledata, ...tabledata, ...tabledata, ...tabledata, ...tabledata, ...tabledata, ...tabledata, ...tabledata, ...tabledata, ...tabledata, ...tabledata, ...tabledata,]))
 const columns = tablecolumns
+const getData = TableElement.getDefaultDataSorterAndPaginatior<typeof tabledata[0]>(data)
 const meta = {
   title: "UI/Table",
   tags: ["autodocs"],
@@ -19,22 +20,31 @@ const meta = {
 
     return html`
       <spectric-table
+        style="height: 150px;"
         .pagination=${args.pagination}
         .columns=${args.columns}
-        .data=${!args.pagination ? data : data.slice((args.pagination.page - 1) * args.pagination.pageSize, (args.pagination.page) * args.pagination.pageSize)}
+        .data=${getData(args)}
         select=${ifDefined(args.select)}
+        sort=${ifDefined(args.sort)}
+        rowHeight=${ifDefined(args.rowHeight)}
+        @selected=${(e) => console.log(e)}
         @filter=${(e: CustomEvent<FilterEvent<any>>) => {
         alert(`filter ${e.detail.include ? "for" : "out"} event value ${e.detail.value}`)
       }}
         @change=${(e: CustomEvent<PaginationChangeProps>) => {
         console.log(e)
         updateArgs({ ...e.detail });
+        if (e.target && e.target instanceof TableElement) {
+          e.target.data = getData({ ...args, ...e.detail })
+        }
       }}
       >
       </spectric-table>
     `;
   },
   argTypes: {
+    select: { control: { type: "select" }, options: Object.values(TableSelectOptions) },
+    sort: { control: { type: "select" }, options: Object.values(TableSortOption) }
   },
   args: {
     pagination: {
@@ -43,7 +53,8 @@ const meta = {
       size: "xsmall",
       totalItems: data.length,
     },
-    columns: columns
+    columns: columns,
+    select: TableSelectOptions.none
   },
 } satisfies Meta<Props<typeof tabledata[0]>>;
 
@@ -79,4 +90,15 @@ export const SingleSelect: Story = {
   args: {
     select: "single"
   },
+};
+
+
+/**
+ * The spectric table by default is set to single column sorting, but you can enable multicolumn sorting with the sort="multi" attribute
+ */
+export const MultiColumnSort: Story = {
+  args: {
+    sort: "multi",
+    pagination: { pageSize: 20, page: 1 }
+  },
 };

package/src/utils/once.ts

@@ -0,0 +1,12 @@
+export function once(func: Function) {
+    let hasBeenCalled = false;
+    let result: any;
+    return function (...args: any[]) {
+        if (!hasBeenCalled) {
+            hasBeenCalled = true;
+            //@ts-ignore
+            result = func.apply(this, args);
+        }
+        return result;
+    };
+}

package/src/utils/spread.ts

@@ -7,7 +7,7 @@ import { AsyncDirective, directive } from 'lit/async-directive.js';
 /**
  * Usage:
  *    import { html, render } from 'lit';
- *    import { spreadProps } from '@open-wc/lit-helpers';
+ *    import { spreadProps } from '@spectric/ui';
  *
  *    render(
  *      html`
@@ -44,10 +44,10 @@ export class SpreadPropsDirective extends AsyncDirective {
 
     apply(data: any) {
         if (!data) return;
-        const { prevData, element } = this;
+        const { element } = this;
         for (const key in data) {
             const value = data[key];
-            if (value === prevData[key]) {
+            if ((element as any)[key] === value) {
                 continue;
             }
             // @ts-ignore