@spectric/ui 0.0.9 → 0.0.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spectric/ui",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "type": "module",
   "main": "./dist/index.es.js",
   "module": "./dist/index.es.js",

package/src/components/Button.ts

@@ -25,14 +25,14 @@ export enum ButtonVariants {
 type ButtonVariantsTypes = `${ButtonVariants}`
 export interface ButtonProps {
   /** Is this the principal call to action on the page? */
-  variant: ButtonVariantsTypes;
+  variant?: ButtonVariantsTypes;
   /** What background color to use */
   backgroundColor?: string;
   /** How large should the button be? */
   size: ButtonSizesTypes;
   label?: string,
   /* should the button be disabled*/
-  disabled: boolean;
+  disabled?: boolean;
   danger?: boolean;
   icon?: boolean
   tooltip?: DomRenderable

package/src/components/query_bar/QueryBar.ts

@@ -39,7 +39,7 @@ export interface IQueryProps {
   /**
    * The output of the query in a specific format
    */
-  outputLanguage: SupportedLanguagesTypes;
+  outputLanguage?: SupportedLanguagesTypes;
   /**
    * The output of the query
    */
@@ -47,16 +47,16 @@ export interface IQueryProps {
   /**
    * Fields that are used for the auto complete
    */
-  fields: FieldTypes[];
+  fields?: FieldTypes[];
   /**
    * Callback that will provide values for specific fields
    */
-  getValuesForField: (field: string, text: string) => Promise<string[]>;
+  getValuesForField?: (field: string, text: string) => Promise<string[]>;
 
   /**
    * Input placeholder
    */
-  placeholder: string;
+  placeholder?: string;
 }
 type LabelValue = {
   label?: string;
@@ -133,7 +133,7 @@ export class SpectricQuery extends LitElement implements IQueryProps {
   protected _input!: SpectricInput;
   _parseQuery = (e: InputEvent | undefined = undefined) => {
     let ast;
-    if(e && e?.currentTarget && (e.currentTarget as HTMLInputElement).value){
+    if (e && e?.currentTarget && (e.currentTarget as HTMLInputElement).value) {
       this.value = (e.currentTarget as HTMLInputElement).value
     }
     if (this.value == "") {
@@ -293,7 +293,7 @@ export class SpectricQuery extends LitElement implements IQueryProps {
       let value = await completion.onSelect()
       if (value !== undefined) {
         this.value += value
-        setTimeout(()=>{this._input.focus();})
+        setTimeout(() => { this._input.focus(); })
       }
     }
     this.completionIndex = 0;

package/src/components/table/cell.ts

@@ -43,7 +43,7 @@ export class TableCellElement<T> extends LitElement implements CellProps<T> {
     _handleFilterOut = () => {
         let value = undefined;
         if (this.column.key && typeof this.row === "object") {
-            value = (this.row as Record<any, any>)[this.column.key]
+            value = getValue(this.row as Record<any, any>, this.column.key)
         }
         this.dispatchEvent(new CustomEvent<FilterEvent<T>>("filter", {
             composed: true,
@@ -59,7 +59,7 @@ export class TableCellElement<T> extends LitElement implements CellProps<T> {
     _handleFilterFor = () => {
         let value = undefined;
         if (this.column.key && typeof this.row === "object") {
-            value = (this.row as Record<any, any>)[this.column.key]
+            value = getValue(this.row as Record<any, any>, this.column.key)
         }
         this.dispatchEvent(new CustomEvent<FilterEvent<T>>("filter", {
             composed: true,
@@ -77,7 +77,8 @@ export class TableCellElement<T> extends LitElement implements CellProps<T> {
         if (this.column.render) {
             rendered = this.column.render(this.row, this.table)
         } else if (this.column.key && typeof this.row === 'object') {
-            rendered = (this.row as Record<any, any>)[this.column.key]
+
+            rendered = getValue(this.row as any, this.column.key)
         } else {
             rendered = html`error`
         }
@@ -131,3 +132,13 @@ declare global {
         }
     }
 }
+
+
+const getValue = (context: Record<string, any>, key: string) => {
+    let path = key.split(".")
+    let value = context[path[0]]
+    if (path.length > 1) {
+        value = getValue(value, path.slice(1).join("."))
+    }
+    return value
+}

package/src/components/table/table.ts

@@ -35,35 +35,9 @@ type DomEvent<T> = Event & {
     target: T
 }
 /**
- * Table Element
+ * React example
+ * <iframe  width="100%" height="400px" src="https://stackblitz.com/edit/react-ts-2ue7azag?ctl=1&embed=1&file=App.tsx&hideExplorer=1&hideNavigation=1"/>
  * 
- * The table element is a bit more complex and the column settings and data can only be set through the properties
- * 
- * 
- * React
- * 
- * ``` tsx
- * <spectric-table data={[{col1:1}]} columns={[{key:"col1",}]} ></spectric-table>
- * ```
- * 
- * Javascript
- * 
- * ``` js
- * table = document.createElement("spectric-table")
- * table.data = [{col1:1}]
- * table.columns = [{key:"col1",}]
- * ```
- * 
- * HTML 
- * 
- * ``` html
- * <spectric-table id="table"></spectric-table>
- * <script>
- * document.querySelector("#table")
- * table.data = [{col1:1}]
- * table.columns = [{key:"col1",}]
- * </script>
- * ```
  */
 @customElement(TableElementTag)
 export class TableElement<T> extends LitElement implements TableProps<T> {

package/src/stories/fixtures/data.ts

@@ -37,15 +37,17 @@ type TestData = {
   name: string
   company: string
   contact: string
-  country: string
+  location: {
+    country: string,
+    state: string
+  }
 }
-
 export const tabledata: TestData[] = [
-  { name: "Sean", company: "Spectric Labs", "contact": "123-4567", "country": "US" },
-  { name: "Kipp", company: "Spectric Labs", "contact": "123-4567", "country": "UK" },
-  { name: "Adam", company: "Spectric Labs", "contact": "123-4567", "country": "US" },
-  { name: "Chris", company: "Spectric Labs", "contact": "123-4567", "country": "US" },
-  { name: "Michael", company: "Spectric Labs", "contact": "123-4567", "country": "US" },
-  { name: "Matt", company: "Spectric Labs", "contact": "123-4567", "country": "US" },
-  { name: "Grant", company: "Spectric Labs", "contact": "123-4567", "country": "UK" },]
-export const tablecolumns: ColumnSettings<TestData>[] = [{ "title": "Company", key: "company" }, { "title": "Name", key: "name" }, { "title": "Contact", key: "contact" }, { "title": "Country", key: "country", filterable: true }]
+  { 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 }]

package/src/stories/table.stories.ts

@@ -8,12 +8,6 @@ import { useArgs } from "@storybook/client-api";
 import { FilterEvent } 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
-type TestData = {
-  name: string
-  company: string
-  contact: string
-  country: string
-}
 const data = tabledata
 const columns = tablecolumns
 const meta = {
@@ -51,10 +45,10 @@ const meta = {
     },
     columns: columns
   },
-} satisfies Meta<Props<TestData>>;
+} satisfies Meta<Props<typeof tabledata[0]>>;
 
 export default meta;
-type Story = StoryObj<Props<TestData>>;
+type Story = StoryObj<Props<typeof tabledata[0]>>;
 
 // More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
 export const Basic: Story = {