Skip to content

Commit

Permalink
Merge pull request #1785 from smeup/chip-test
Browse files Browse the repository at this point in the history 
Data-table, Rating and Progress Bar
  • Loading branch information
@Leonardo-Signorelli
Leonardo-Signorelli authored Feb 28, 2024
2 parents 4c0c6c6 + 2d845e5 commit 870127d
Show file tree
Hide file tree
Showing 23 changed files with 278 additions and 160 deletions.
3 changes: 2 additions & 1 deletion packages/ketchup/src/assets/snackbar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,8 @@ const bottomButton = document.getElementById('bottom');
const topButton = document.getElementById('top');
const snackbar = document.getElementById('snackbar');
const props = {
text: 'This is a snackbar demo',
header: 'This is a snackbar title',
text: 'This is a snackbar text',
actionButton: { label: 'Action', styling: 'flat' },
closeButton: true,
timeout: 2000,
Expand Down
10 changes: 10 additions & 0 deletions packages/ketchup/src/components.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3313,6 +3313,11 @@ export namespace Components {
* @returns List of props as object, each key will be a prop.
*/
"getProps": (descriptions?: boolean) => Promise<GenericObject>;
/**
* Sets the textual content of the snackbar.
* @default ''
*/
"header": string;
/**
* Hides the snackbar.
*/
Expand Down Expand Up @@ -7863,6 +7868,11 @@ declare namespace LocalJSX {
* @see https://ketchup.smeup.com/ketchup-showcase/#/customization
*/
"customStyle"?: string;
/**
* Sets the textual content of the snackbar.
* @default ''
*/
"header"?: string;
/**
* Triggered when action button is clicked.
*/
Expand Down
11 changes: 6 additions & 5 deletions packages/ketchup/src/components/kup-accordion/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,12 @@

## Properties

| Property | Attribute | Description | Type | Default |
| ------------- | -------------- | --------------------------------------------------------------- | ------------------ | ------- |
| `customStyle` | `custom-style` | Custom style of the component. | `string` | `''` |
| `data` | -- | Data of the accordion. | `KupAccordionData` | `null` |
| `ripple` | `ripple` | When enabled displays Material's ripple effect on item headers. | `boolean` | `true` |
| Property | Attribute | Description | Type | Default |
| ------------- | -------------- | --------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | --------------------------- |
| `customStyle` | `custom-style` | Custom style of the component. | `string` | `''` |
| `data` | -- | Data of the accordion. | `KupAccordionData` | `null` |
| `ripple` | `ripple` | When enabled displays Material's ripple effect on item headers. | `boolean` | `false` |
| `sizing` | `sizing` | Sets the type of the button | `KupComponentSizing.LARGE \| KupComponentSizing.MAX \| KupComponentSizing.MEDIUM \| KupComponentSizing.SMALL` | `KupComponentSizing.MEDIUM` |


## Events
Expand Down
20 changes: 20 additions & 0 deletions packages/ketchup/src/components/kup-combobox/styles/kup-combobox-classes.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,3 +42,23 @@
--kup-textfield-primary-color: var(--kup-warning-color);
--kup-textfield-primary-color-rgb: var(--kup-warning-color-rgb);
}

:host(.page-selector),
:host(.rows-selector) {
.f-text-field {
.mdc-text-field {
border-bottom: none !important;
width: max-content !important;
}
.mdc-text-field-container {
flex-direction: row !important;
.mdc-text-field__label-container {
white-space: nowrap;
@include kup-body-compact-01;
}
}
.mdc-text-field-helper-line {
display: none;
}
}
}
108 changes: 56 additions & 52 deletions packages/ketchup/src/components/kup-data-table/kup-data-table.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,7 @@ import {
import {
GenericObject,
KupComponent,
KupComponentSizing,
KupEventPayload,
} from '../../types/GenericTypes';
import { identify, getProps, setProps } from '../../utils/utils';
Expand Down Expand Up @@ -587,7 +588,7 @@ export class KupDataTable {
/**
* When set to true it activates the global filter.
*/
@Prop() globalFilter: boolean = false;
@Prop() globalFilter: boolean = true;
/**
* The value of the global filter.
*/
Expand Down Expand Up @@ -651,7 +652,7 @@ export class KupDataTable {
/**
* Sets the position of the paginator. Available positions: top, bottom or both.
*/
@Prop() paginatorPos: PaginatorPos = PaginatorPos.TOP;
@Prop() paginatorPos: PaginatorPos = PaginatorPos.BOTTOM;
/**
* Sets the possibility to remove the selected column.
*/
Expand Down Expand Up @@ -5668,7 +5669,9 @@ export class KupDataTable {
)}
</style>
<div id={componentWrapperId}>
<div class="above-wrapper">
<div class="above-wrapper">{paginatorTop}</div>
<div class="group-wrapper">{groupChips}</div>
<div class="actions-wrapper">
{this.globalFilter ? (
<div id="global-filter">
<FTextField
Expand Down Expand Up @@ -5696,13 +5699,56 @@ export class KupDataTable {
/>
</div>
) : null}
{paginatorTop}
</div>
<div class="group-wrapper">{groupChips}</div>
<div class="actions-wrapper">
{this.insertMode !== '' &&
this.selectedRows.length > 0 ? (
<FButton
icon="save"
onClick={() => {
this.kupSave.emit({
comp: this,
id: this.rootElement.id,
selectedRows: this.selectedRows,
});
}}
styling={FButtonStyling.FLAT}
sizing={KupComponentSizing.MEDIUM}
title="Save"
wrapperClass="save-button"
></FButton>
) : null}
{this.showDeleteButton &&
this.selectedRows.length > 0 ? (
<FButton
icon="delete"
onClick={() => {
this.#rowsDelete();
}}
styling={FButtonStyling.FLAT}
sizing={KupComponentSizing.MEDIUM}
title="Delete selected rows"
wrapperClass="delete-button"
></FButton>
) : null}
{this.showHistoryButton ? (
<FButton
icon="history"
onClick={() => {
this.kupHistory.emit({
comp: this,
id: this.rootElement.id,
selectedRows: this.selectedRows,
});
}}
styling={FButtonStyling.FLAT}
sizing={KupComponentSizing.MEDIUM}
title="History"
wrapperClass="history-button"
></FButton>
) : null}
{this.insertMode !== '' ? (
<FButton
icon="plus"
label="Add new"
// icon="plus"
onClick={async () => {
if (this.insertMode === 'form') {
this.#rowInsertForm();
Expand Down Expand Up @@ -5749,54 +5795,12 @@ export class KupDataTable {
await this.refresh(true);
}
}}
styling={FButtonStyling.OUTLINED}
sizing={KupComponentSizing.MEDIUM}
styling={FButtonStyling.RAISED}
title="Insert row"
wrapperClass="insert-button"
></FButton>
) : null}
{this.insertMode !== '' &&
this.selectedRows.length > 0 ? (
<FButton
icon="save"
onClick={() => {
this.kupSave.emit({
comp: this,
id: this.rootElement.id,
selectedRows: this.selectedRows,
});
}}
styling={FButtonStyling.OUTLINED}
title="Save"
wrapperClass="save-button"
></FButton>
) : null}
{this.showDeleteButton &&
this.selectedRows.length > 0 ? (
<FButton
icon="delete"
onClick={() => {
this.#rowsDelete();
}}
styling={FButtonStyling.OUTLINED}
title="Delete selected rows"
wrapperClass="delete-button"
></FButton>
) : null}
{this.showHistoryButton ? (
<FButton
icon="history"
onClick={() => {
this.kupHistory.emit({
comp: this,
id: this.rootElement.id,
selectedRows: this.selectedRows,
});
}}
styling={FButtonStyling.OUTLINED}
title="History"
wrapperClass="history-button"
></FButton>
) : null}
</div>
<div
class="droparea"
Expand Down
4 changes: 2 additions & 2 deletions packages/ketchup/src/components/kup-data-table/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ If the `sticky` element would be hidden by the scroll, after having specified a
| `fixedColumns` | `fixed-columns` | Fixes the given number of columns so that they stay visible when horizontally scrolling the data-table. If grouping is active or the value of the prop is <= 0, this prop will have no effect. Can be combined with fixedRows. | `number` | `0` |
| `fixedRows` | `fixed-rows` | Fixes the given number of rows so that they stay visible when vertically scrolling the data-table. If grouping is active or the value of the prop is <= 0, this prop will have no effect. Can be combined with fixedColumns. | `number` | `0` |
| `forceOneLine` | `force-one-line` | Forces cells with long text and a fixed column size to have an ellipsis set on their text. The reflect attribute is mandatory to allow styling. | `boolean` | `false` |
| `globalFilter` | `global-filter` | When set to true it activates the global filter. | `boolean` | `false` |
| `globalFilter` | `global-filter` | When set to true it activates the global filter. | `boolean` | `true` |
| `globalFilterValue` | `global-filter-value` | The value of the global filter. | `string` | `''` |
| `groupLabelDisplay` | `group-label-display` | How the label of a group must be displayed. For available values [see here]{@link GroupLabelDisplayMode} | `GroupLabelDisplayMode.BOTH \| GroupLabelDisplayMode.LABEL \| GroupLabelDisplayMode.VALUE` | `GroupLabelDisplayMode.BOTH` |
| `groups` | -- | The list of groups. | `GroupObject[]` | `[]` |
Expand All @@ -65,7 +65,7 @@ If the `sticky` element would be hidden by the scroll, after having specified a
| `loadMoreMode` | `load-more-mode` | Establish the modality of how many new records will be downloaded. This property is regulated also by loadMoreStep. | `LoadMoreMode.CONSTANT \| LoadMoreMode.CONSTANT_INCREMENT \| LoadMoreMode.PROGRESSIVE_THRESHOLD` | `LoadMoreMode.PROGRESSIVE_THRESHOLD` |
| `loadMoreStep` | `load-more-step` | The number of records which will be requested to be downloaded when clicking on the load more button. This property is regulated also by loadMoreMode. | `number` | `60` |
| `pageSelected` | `page-selected` | Current selected page set on component load | `number` | `-1` |
| `paginatorPos` | `paginator-pos` | Sets the position of the paginator. Available positions: top, bottom or both. | `PaginatorPos.BOTH \| PaginatorPos.BOTTOM \| PaginatorPos.TOP` | `PaginatorPos.TOP` |
| `paginatorPos` | `paginator-pos` | Sets the position of the paginator. Available positions: top, bottom or both. | `PaginatorPos.BOTH \| PaginatorPos.BOTTOM \| PaginatorPos.TOP` | `PaginatorPos.BOTTOM` |
| `removableColumns` | `removable-columns` | Sets the possibility to remove the selected column. | `boolean` | `false` |
| `resizableColumns` | `resizable-columns` | Gives the possibility to resize columns by dragging on their right edge. | `boolean` | `true` |
| `rowActions` | -- | Sets the actions of the rows. | `KupDataRowAction[]` | `undefined` |
Expand Down
Loading

0 comments on commit 870127d

Please sign in to comment.