@spectric/ui 0.0.9 → 0.0.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -19,13 +19,13 @@ export declare enum ButtonVariants {
19
19
  type ButtonVariantsTypes = `${ButtonVariants}`;
20
20
  export interface ButtonProps {
21
21
  /** Is this the principal call to action on the page? */
22
- variant: ButtonVariantsTypes;
22
+ variant?: ButtonVariantsTypes;
23
23
  /** What background color to use */
24
24
  backgroundColor?: string;
25
25
  /** How large should the button be? */
26
26
  size: ButtonSizesTypes;
27
27
  label?: string;
28
- disabled: boolean;
28
+ disabled?: boolean;
29
29
  danger?: boolean;
30
30
  icon?: boolean;
31
31
  tooltip?: DomRenderable;
@@ -33,7 +33,7 @@ export interface IQueryProps {
33
33
  /**
34
34
  * The output of the query in a specific format
35
35
  */
36
- outputLanguage: SupportedLanguagesTypes;
36
+ outputLanguage?: SupportedLanguagesTypes;
37
37
  /**
38
38
  * The output of the query
39
39
  */
@@ -41,15 +41,15 @@ export interface IQueryProps {
41
41
  /**
42
42
  * Fields that are used for the auto complete
43
43
  */
44
- fields: FieldTypes[];
44
+ fields?: FieldTypes[];
45
45
  /**
46
46
  * Callback that will provide values for specific fields
47
47
  */
48
- getValuesForField: (field: string, text: string) => Promise<string[]>;
48
+ getValuesForField?: (field: string, text: string) => Promise<string[]>;
49
49
  /**
50
50
  * Input placeholder
51
51
  */
52
- placeholder: string;
52
+ placeholder?: string;
53
53
  }
54
54
  /**
55
55
  * The Query component will take Opensearch Dashboard Query language and transform it into various outputs
@@ -26,35 +26,9 @@ type DomEvent<T> = Event & {
26
26
  target: T;
27
27
  };
28
28
  /**
29
- * Table Element
29
+ * React example
30
+ * <iframe width="100%" height="400px" src="https://stackblitz.com/edit/react-ts-2ue7azag?ctl=1&embed=1&file=App.tsx&hideExplorer=1&hideNavigation=1"/>
30
31
  *
31
- * The table element is a bit more complex and the column settings and data can only be set through the properties
32
- *
33
- *
34
- * React
35
- *
36
- * ``` tsx
37
- * <spectric-table data={[{col1:1}]} columns={[{key:"col1",}]} ></spectric-table>
38
- * ```
39
- *
40
- * Javascript
41
- *
42
- * ``` js
43
- * table = document.createElement("spectric-table")
44
- * table.data = [{col1:1}]
45
- * table.columns = [{key:"col1",}]
46
- * ```
47
- *
48
- * HTML
49
- *
50
- * ``` html
51
- * <spectric-table id="table"></spectric-table>
52
- * <script>
53
- * document.querySelector("#table")
54
- * table.data = [{col1:1}]
55
- * table.columns = [{key:"col1",}]
56
- * </script>
57
- * ```
58
32
  */
59
33
  export declare class TableElement<T> extends LitElement implements TableProps<T> {
60
34
  data: T[];
@@ -2020,7 +2020,7 @@
2020
2020
  },
2021
2021
  {
2022
2022
  "name": "spectric-table",
2023
- "description": "Table Element\n\nThe table element is a bit more complex and the column settings and data can only be set through the properties\n\n\nReact\n\n``` tsx\n<spectric-table data={[{col1:1}]} columns={[{key:\"col1\",}]} ></spectric-table>\n```\n\nJavascript\n\n``` js\ntable = document.createElement(\"spectric-table\")\ntable.data = [{col1:1}]\ntable.columns = [{key:\"col1\",}]\n```\n\nHTML \n\n``` html\n<spectric-table id=\"table\"></spectric-table>\n<script>\ndocument.querySelector(\"#table\")\ntable.data = [{col1:1}]\ntable.columns = [{key:\"col1\",}]\n</script>\n```\n\nEvents:\n\n * `change` {`CustomEvent<{ pagination?: PaginationChangeProps | undefined; }>`} - \n\n * `filter` {`CustomEvent<FilterEvent<T>>`} - \n\n * `select` {`CustomEvent<T[]>`} - \n\nAttributes:\n\n * `select` {`TableSelectOptions | undefined`} - \n\nProperties:\n\n * `_handlePaginationChange` - \n\n * `_emitChange` - \n\n * `__DO_NOT_USE_filter` - \n\n * `selected` {`T[]`} - \n\n * `_handleSelectAllChange` - \n\n * `pagination` {`PaginationProps | undefined`} - \n\n * `columns` {`ColumnSettings<T>[]`} - \n\n * `data` {`T[]`} - \n\n * `select` {`TableSelectOptions | undefined`} - ",
2023
+ "description": "React example\n<iframe width=\"100%\" height=\"400px\" src=\"https://stackblitz.com/edit/react-ts-2ue7azag?ctl=1&embed=1&file=App.tsx&hideExplorer=1&hideNavigation=1\"/>\n\nEvents:\n\n * `change` {`CustomEvent<{ pagination?: PaginationChangeProps | undefined; }>`} - \n\n * `filter` {`CustomEvent<FilterEvent<T>>`} - \n\n * `select` {`CustomEvent<T[]>`} - \n\nAttributes:\n\n * `select` {`TableSelectOptions | undefined`} - \n\nProperties:\n\n * `_handlePaginationChange` - \n\n * `_emitChange` - \n\n * `__DO_NOT_USE_filter` - \n\n * `selected` {`T[]`} - \n\n * `_handleSelectAllChange` - \n\n * `pagination` {`PaginationProps | undefined`} - \n\n * `columns` {`ColumnSettings<T>[]`} - \n\n * `data` {`T[]`} - \n\n * `select` {`TableSelectOptions | undefined`} - ",
2024
2024
  "attributes": [
2025
2025
  {
2026
2026
  "name": "select",