diff --git a/packages/crayons-core/src/components.d.ts b/packages/crayons-core/src/components.d.ts index 284642030..f4523fc59 100644 --- a/packages/crayons-core/src/components.d.ts +++ b/packages/crayons-core/src/components.d.ts @@ -5,9 +5,7 @@ * It contains typing information for all components that exist in this project. */ import { HTMLStencilElement, JSXBase } from "@stencil/core/internal"; -import { DropdownVariant } from "./components/select-option/select-option"; -import { PopoverPlacementType } from "./components/popover/popover"; -import { DropdownVariant as DropdownVariant1 } from "./components/select-option/select-option"; +import { DropdownVariant, PopoverPlacementType, TagVariant } from "./utils/types"; import { ToastOptions } from "./components/toast/toast-util"; export namespace Components { interface FwAvatar { @@ -589,6 +587,10 @@ export namespace Components { * Descriptive or instructional text displayed below the list box. */ "stateText": string; + /** + * The variant of tag to be used. + */ + "tagVariant": TagVariant; /** * Type of option accepted as the input value. If a user tries to enter an option other than the specified type, the list is not populated. */ @@ -729,7 +731,7 @@ export namespace Components { /** * The variant of tag to be displayed. */ - "variant": 'standard' | 'avatar'; + "variant": TagVariant; } interface FwTextarea { /** @@ -1804,6 +1806,10 @@ declare namespace LocalJSX { * Descriptive or instructional text displayed below the list box. */ "stateText"?: string; + /** + * The variant of tag to be used. + */ + "tagVariant"?: TagVariant; /** * Type of option accepted as the input value. If a user tries to enter an option other than the specified type, the list is not populated. */ @@ -1955,7 +1961,7 @@ declare namespace LocalJSX { /** * The variant of tag to be displayed. */ - "variant"?: 'standard' | 'avatar'; + "variant"?: TagVariant; } interface FwTextarea { /** diff --git a/packages/crayons-core/src/components/avatar/readme.md b/packages/crayons-core/src/components/avatar/readme.md index 7c31032a4..d4f234fff 100644 --- a/packages/crayons-core/src/components/avatar/readme.md +++ b/packages/crayons-core/src/components/avatar/readme.md @@ -105,11 +105,13 @@ function App() { ### Used by + - [fw-select-option](../select-option) - [fw-tag](../tag) ### Graph ```mermaid graph TD; + fw-select-option --> fw-avatar fw-tag --> fw-avatar style fw-avatar fill:#f9f,stroke:#333,stroke-width:4px ``` diff --git a/packages/crayons-core/src/components/datepicker/readme.md b/packages/crayons-core/src/components/datepicker/readme.md index e05dc8950..21e3c5771 100644 --- a/packages/crayons-core/src/components/datepicker/readme.md +++ b/packages/crayons-core/src/components/datepicker/readme.md @@ -95,6 +95,7 @@ graph TD; fw-list-options --> fw-input fw-select-option --> fw-icon fw-select-option --> fw-checkbox + fw-select-option --> fw-avatar fw-button --> fw-spinner fw-button --> fw-icon style fw-datepicker fill:#f9f,stroke:#333,stroke-width:4px diff --git a/packages/crayons-core/src/components/options-list/list-options.tsx b/packages/crayons-core/src/components/options-list/list-options.tsx index 3e74b80a8..30ea4d034 100644 --- a/packages/crayons-core/src/components/options-list/list-options.tsx +++ b/packages/crayons-core/src/components/options-list/list-options.tsx @@ -11,7 +11,7 @@ import { Event, } from '@stencil/core'; import { debounce } from '../../utils'; -import { DropdownVariant } from '../select-option/select-option'; +import { DropdownVariant } from '../../utils/types'; @Component({ tag: 'fw-list-options', @@ -34,11 +34,7 @@ export class ListOptions { option.text.toLowerCase().includes(value) ) : dataSource; - resolve( - filteredValue.length === 0 - ? [{ text: this.notFoundText, disabled: true }] - : filteredValue - ); + resolve(filteredValue); }); }; @@ -209,7 +205,11 @@ export class ListOptions { this.isLoading = true; this.fwLoading.emit({ isLoading: this.isLoading }); this.search(filterText, this.selectOptions).then((options) => { - this.filteredOptions = this.serializeData(options); + this.filteredOptions = + options?.length > 0 + ? this.serializeData(options) + : [{ text: this.notFoundText, disabled: true }]; + this.isLoading = false; this.fwLoading.emit({ isLoading: this.isLoading }); }); @@ -269,7 +269,8 @@ export class ListOptions { componentWillLoad() { if (this.selectedOptions.length > 0) { - this.value = this.selectedOptions.map((option) => option.value); + this.selectedOptionsState = this.selectedOptions; + this.value = this.selectedOptionsState.map((option) => option.value); } else if (this.value.length > 0) { this.setSelectedOptionsByValue(this.value); } diff --git a/packages/crayons-core/src/components/options-list/readme.md b/packages/crayons-core/src/components/options-list/readme.md index 7a0d39997..50ede116e 100644 --- a/packages/crayons-core/src/components/options-list/readme.md +++ b/packages/crayons-core/src/components/options-list/readme.md @@ -154,6 +154,7 @@ graph TD; fw-list-options --> fw-input fw-select-option --> fw-icon fw-select-option --> fw-checkbox + fw-select-option --> fw-avatar fw-input --> fw-icon fw-select --> fw-list-options style fw-list-options fill:#f9f,stroke:#333,stroke-width:4px diff --git a/packages/crayons-core/src/components/popover/popover.tsx b/packages/crayons-core/src/components/popover/popover.tsx index a28267d4e..683cce833 100644 --- a/packages/crayons-core/src/components/popover/popover.tsx +++ b/packages/crayons-core/src/components/popover/popover.tsx @@ -9,6 +9,7 @@ import { h, } from '@stencil/core'; import { createPopper, Instance } from '@popperjs/core'; +import { PopoverPlacementType } from '../../utils/types'; @Component({ tag: 'fw-popover', @@ -184,17 +185,3 @@ export class Popover { ]; } } - -export type PopoverPlacementType = - | 'top-start' - | 'top' - | 'top-end' - | 'left-start' - | 'left' - | 'left-end' - | 'right-start' - | 'right' - | 'right-end' - | 'bottom-start' - | 'bottom' - | 'bottom-end'; diff --git a/packages/crayons-core/src/components/select-option/readme.md b/packages/crayons-core/src/components/select-option/readme.md index f5d274247..245e61376 100644 --- a/packages/crayons-core/src/components/select-option/readme.md +++ b/packages/crayons-core/src/components/select-option/readme.md @@ -149,12 +149,14 @@ Type: `Promise` - [fw-icon](../icon) - [fw-checkbox](../checkbox) +- [fw-avatar](../avatar) ### Graph ```mermaid graph TD; fw-select-option --> fw-icon fw-select-option --> fw-checkbox + fw-select-option --> fw-avatar fw-datepicker --> fw-select-option fw-list-options --> fw-select-option fw-timepicker --> fw-select-option diff --git a/packages/crayons-core/src/components/select-option/select-option.tsx b/packages/crayons-core/src/components/select-option/select-option.tsx index 6721562d1..93e37ebda 100644 --- a/packages/crayons-core/src/components/select-option/select-option.tsx +++ b/packages/crayons-core/src/components/select-option/select-option.tsx @@ -9,6 +9,7 @@ import { Method, Listen, } from '@stencil/core'; +import { DropdownVariant } from '../../utils/types'; @Component({ tag: 'fw-select-option', @@ -114,6 +115,14 @@ export class SelectOption { {description} ); + case 'avatar': + return ( + + {checkbox} + {this.createAvatar()} + {description} + + ); default: break; } @@ -150,6 +159,10 @@ export class SelectOption { return ; } + createAvatar() { + return ; + } + render() { return (
@@ -255,6 +258,7 @@ function App() { text: x.name, subText: x.type, value: x.id.toString(), + graphicsProps: { image: x.image }, }; }); }); @@ -288,6 +292,7 @@ function App() { | `selectedOptions` | -- | Array of the options that is displayed as the default selection, in the list box. Must be a valid option corresponding to the fw-select-option components used in Select. | `any[]` | `[]` | | `state` | `state` | Theme based on which the list box is styled. | `"error" \| "normal" \| "warning"` | `'normal'` | | `stateText` | `state-text` | Descriptive or instructional text displayed below the list box. | `string` | `''` | +| `tagVariant` | `tag-variant` | The variant of tag to be used. | `"avatar" \| "standard"` | `'standard'` | | `type` | `type` | Type of option accepted as the input value. If a user tries to enter an option other than the specified type, the list is not populated. | `"number" \| "text"` | `'text'` | | `value` | `value` | Value of the option that is displayed as the default selection, in the list box. Must be a valid value corresponding to the fw-select-option components used in Select. | `any` | `undefined` | | `variant` | `variant` | Standard is the default option without any graphics other options are icon and avatar which places either the icon or avatar at the beginning of the row. The props for the icon or avatar are passed as an object via the graphicsProps. | `"avatar" \| "icon" \| "standard"` | `'standard'` | @@ -369,6 +374,7 @@ graph TD; fw-list-options --> fw-input fw-select-option --> fw-icon fw-select-option --> fw-checkbox + fw-select-option --> fw-avatar fw-input --> fw-icon fw-datepicker --> fw-select fw-timepicker --> fw-select diff --git a/packages/crayons-core/src/components/select/select.tsx b/packages/crayons-core/src/components/select/select.tsx index f990f8d15..297f6df54 100644 --- a/packages/crayons-core/src/components/select/select.tsx +++ b/packages/crayons-core/src/components/select/select.tsx @@ -14,7 +14,7 @@ import { } from '@stencil/core'; import { handleKeyDown, renderHiddenField } from '../../utils'; -import { DropdownVariant } from '../select-option/select-option'; +import { DropdownVariant, TagVariant } from '../../utils/types'; @Component({ tag: 'fw-select', styleUrl: 'select.scss', @@ -128,6 +128,10 @@ export class Select { * Array of the options that is displayed as the default selection, in the list box. Must be a valid option corresponding to the fw-select-option components used in Select. */ @Prop({ reflect: true, mutable: true }) selectedOptions = []; + /** + * The variant of tag to be used. + */ + @Prop() tagVariant: TagVariant = 'standard'; // Events /** * Triggered when a value is selected or deselected from the list box options. @@ -235,6 +239,8 @@ export class Select { if (this.value.includes(option.value)) { return ( fw-input fw-select-option --> fw-icon fw-select-option --> fw-checkbox + fw-select-option --> fw-avatar fw-input --> fw-icon style fw-timepicker fill:#f9f,stroke:#333,stroke-width:4px ``` diff --git a/packages/crayons-core/src/utils/types.ts b/packages/crayons-core/src/utils/types.ts new file mode 100644 index 000000000..c54b0cea8 --- /dev/null +++ b/packages/crayons-core/src/utils/types.ts @@ -0,0 +1,17 @@ +export type TagVariant = 'standard' | 'avatar'; + +export type DropdownVariant = 'standard' | 'icon' | 'avatar'; + +export type PopoverPlacementType = + | 'top-start' + | 'top' + | 'top-end' + | 'left-start' + | 'left' + | 'left-end' + | 'right-start' + | 'right' + | 'right-end' + | 'bottom-start' + | 'bottom' + | 'bottom-end';