Skip to content

Commit

Permalink
Merge branch 'develop' into fix/kup-calendar-change-month
Browse files Browse the repository at this point in the history
  • Loading branch information
@n-colasanto-as
n-colasanto-as committed Mar 4, 2025
2 parents c87ffd1 + 1f550a7 commit c025051
Show file tree
Hide file tree
Showing 15 changed files with 86 additions and 34 deletions.
26 changes: 26 additions & 0 deletions packages/ketchup/src/components.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -244,6 +244,10 @@ export namespace Components {
* @default false
*/
"disabled": boolean;
/**
* Sets how to show the selected item value. Suported values: "CodeOnly", "DescOnly", "Both" or "CodeAndDesc" and "DescAndCode".
*/
"displayListMode": ItemsDisplayMode;
/**
* Sets how to show the selected item value. Suported values: "CodeOnly", "DescOnly", "Both" or "CodeAndDesc" and "DescAndCode".
* @default ItemsDisplayMode.DESCRIPTION
Expand Down Expand Up @@ -1200,6 +1204,11 @@ export namespace Components {
* @default []
*/
"data": KupChipNode[];
/**
* When true, the chip cannot be edited, nor removed.
* @default false
*/
"disabled": boolean;
/**
* When enabled, the chip's text will display both the id and description.
* @default ItemsDisplayMode.DESCRIPTION
Expand Down Expand Up @@ -1328,6 +1337,10 @@ export namespace Components {
* Defaults at false. When set to true, the component is disabled.
*/
"disabled": boolean;
/**
* Sets how to show the selected item value. Suported values: "CodeOnly", "DescOnly", "Both" or "CodeAndDesc" and "DescAndCode".
*/
"displayListMode": ItemsDisplayMode;
/**
* Sets how to show the selected item value. Suported values: "CodeOnly", "DescOnly", "Both" or "CodeAndDesc" and "DescAndCode".
*/
Expand Down Expand Up @@ -6330,6 +6343,10 @@ declare namespace LocalJSX {
* @default false
*/
"disabled"?: boolean;
/**
* Sets how to show the selected item value. Suported values: "CodeOnly", "DescOnly", "Both" or "CodeAndDesc" and "DescAndCode".
*/
"displayListMode"?: ItemsDisplayMode;
/**
* Sets how to show the selected item value. Suported values: "CodeOnly", "DescOnly", "Both" or "CodeAndDesc" and "DescAndCode".
* @default ItemsDisplayMode.DESCRIPTION
Expand Down Expand Up @@ -7181,6 +7198,11 @@ declare namespace LocalJSX {
* @default []
*/
"data"?: KupChipNode[];
/**
* When true, the chip cannot be edited, nor removed.
* @default false
*/
"disabled"?: boolean;
/**
* When enabled, the chip's text will display both the id and description.
* @default ItemsDisplayMode.DESCRIPTION
Expand Down Expand Up @@ -7286,6 +7308,10 @@ declare namespace LocalJSX {
* Defaults at false. When set to true, the component is disabled.
*/
"disabled"?: boolean;
/**
* Sets how to show the selected item value. Suported values: "CodeOnly", "DescOnly", "Both" or "CodeAndDesc" and "DescAndCode".
*/
"displayListMode"?: ItemsDisplayMode;
/**
* Sets how to show the selected item value. Suported values: "CodeOnly", "DescOnly", "Both" or "CodeAndDesc" and "DescAndCode".
*/
Expand Down
11 changes: 5 additions & 6 deletions packages/ketchup/src/components/kup-autocomplete/kup-autocomplete.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,6 +97,10 @@ export class KupAutocomplete {
* @default ItemsDisplayMode.DESCRIPTION
*/
@Prop() displayMode: ItemsDisplayMode = ItemsDisplayMode.DESCRIPTION;
/**
* Sets how to show the selected item value. Suported values: "CodeOnly", "DescOnly", "Both" or "CodeAndDesc" and "DescAndCode".
*/
@Prop() listDisplayMode: ItemsDisplayMode = ItemsDisplayMode.CODE_AND_DESC;
/**
* Set error message
* @default '''
Expand Down Expand Up @@ -583,14 +587,9 @@ export class KupAutocomplete {
}

#prepList() {
const displayModeForList =
this.data['kup-list'].options?.length === 1
? ItemsDisplayMode.CODE
: ItemsDisplayMode.CODE_AND_DESC;

return (
<kup-list
displayMode={displayModeForList}
displayMode={this.listDisplayMode}
{...this.data['kup-list']}
isMenu={true}
onkup-list-click={(e: CustomEvent<KupListEventPayload>) =>
Expand Down
1 change: 1 addition & 0 deletions packages/ketchup/src/components/kup-autocomplete/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@
| `isClearable` | `is-clearable` | Enables a clear trailing icon. | `boolean` | `false` |
| `label` | `label` | When set, its content will be shown as a label. | `string` | `null` |
| `leadingLabel` | `leading-label` | When set to true, the label will be on the left of the component. | `boolean` | `false` |
| `listDisplayMode` | `list-display-mode` | Sets how to show the selected item value. Suported values: "CodeOnly", "DescOnly", "Both" or "CodeAndDesc" and "DescAndCode". | `ItemsDisplayMode.CODE \| ItemsDisplayMode.CODE_AND_DESC \| ItemsDisplayMode.CODE_AND_DESC_ALIAS \| ItemsDisplayMode.DESCRIPTION \| ItemsDisplayMode.DESC_AND_CODE` | `ItemsDisplayMode.DESCRIPTION` |
| `minimumChars` | `minimum-chars` | The minimum number of chars to trigger the autocomplete | `number` | `3` |
| `placeholder` | `placeholder` | Set custom placeholder / watermark for text field | `string` | `'Type code or description'` |
| `readOnly` | `read-only` | Sets the component to read only state, making it not editable, but interactable. Used in combobox component when it behaves as a select. | `boolean` | `false` |
Expand Down
7 changes: 7 additions & 0 deletions packages/ketchup/src/components/kup-chip/kup-chip.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,11 @@ export class KupChip {
* @default false
*/
@Prop() enableInput = false;
/**
* When true, the chip cannot be edited, nor removed.
* @default false
*/
@Prop() disabled: boolean = false;
/**
* The type of chip. Available types: input, filter, choice or empty for default.
* @default FChipType.STANDARD
Expand Down Expand Up @@ -414,7 +419,9 @@ export class KupChip {
warning: this.rootElement.classList.contains('kup-warning')
? true
: false,
disabled: this.disabled,
};

for (let j = 0; this.data && j < this.data.length; j++) {
props.onBlur.push((chip) => this.onKupBlur(chip));
props.onClick.push((chip) => this.onKupClick(chip));
Expand Down
1 change: 1 addition & 0 deletions packages/ketchup/src/components/kup-chip/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
| ------------- | -------------- | -------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------ |
| `customStyle` | `custom-style` | Custom style of the component. | `string` | `''` |
| `data` | -- | List of elements. | `KupChipNode[]` | `[]` |
| `disabled` | `disabled` | When true, the chip cannot be edited, nor removed. | `boolean` | `false` |
| `displayMode` | `display-mode` | When enabled, the chip's text will display both the id and description. | `ItemsDisplayMode.CODE \| ItemsDisplayMode.CODE_AND_DESC \| ItemsDisplayMode.CODE_AND_DESC_ALIAS \| ItemsDisplayMode.DESCRIPTION \| ItemsDisplayMode.DESC_AND_CODE` | `ItemsDisplayMode.DESCRIPTION` |
| `enableInput` | `enable-input` | When enabled, it's possible to add items to the chip's dataset through an input slot (kup-autocomplete, kup-combobox, kup-text-field). | `boolean` | `false` |
| `label` | `label` | When set,will be shown a label on the chips | `string` | `null` |
Expand Down
6 changes: 5 additions & 1 deletion packages/ketchup/src/components/kup-combobox/kup-combobox.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,6 +86,10 @@ export class KupCombobox {
* Sets how to show the selected item value. Suported values: "CodeOnly", "DescOnly", "Both" or "CodeAndDesc" and "DescAndCode".
*/
@Prop() displayMode: ItemsDisplayMode = ItemsDisplayMode.DESCRIPTION;
/**
* Sets how to show the selected item value. Suported values: "CodeOnly", "DescOnly", "Both" or "CodeAndDesc" and "DescAndCode".
*/
@Prop() listDisplayMode: ItemsDisplayMode = ItemsDisplayMode.CODE_AND_DESC;
/**
* Set error message
* @default '''
Expand Down Expand Up @@ -523,7 +527,7 @@ export class KupCombobox {
#prepList() {
return (
<kup-list
displayMode={ItemsDisplayMode.CODE_AND_DESC}
displayMode={this.listDisplayMode}
{...this.data['kup-list']}
is-menu
showFilter={
Expand Down
1 change: 1 addition & 0 deletions packages/ketchup/src/components/kup-combobox/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
| `isSelect` | `is-select` | Lets the combobox behave as a select element, making the textfield readable only but interactable. | `boolean` | `true` |
| `label` | `label` | When set, its content will be shown as a label. | `string` | `null` |
| `leadingLabel` | `leading-label` | When set to true, the label will be on the left of the component. | `boolean` | `false` |
| `listDisplayMode` | `list-display-mode` | Sets how to show the selected item value. Suported values: "CodeOnly", "DescOnly", "Both" or "CodeAndDesc" and "DescAndCode". | `ItemsDisplayMode.CODE \| ItemsDisplayMode.CODE_AND_DESC \| ItemsDisplayMode.CODE_AND_DESC_ALIAS \| ItemsDisplayMode.DESCRIPTION \| ItemsDisplayMode.DESC_AND_CODE` | `ItemsDisplayMode.DESCRIPTION` |
| `readOnly` | `read-only` | Sets the component to read only state, making it not editable, but interactable. Used in combobox component when it behaves as a select. | `boolean` | `false` |
| `selectMode` | `select-mode` | Sets how to return the selected item value. Suported values: "CodeOnly", "DescOnly", "Both" or "CodeAndDesc" and "DescAndCode". | `ItemsDisplayMode.CODE \| ItemsDisplayMode.CODE_AND_DESC \| ItemsDisplayMode.CODE_AND_DESC_ALIAS \| ItemsDisplayMode.DESCRIPTION \| ItemsDisplayMode.DESC_AND_CODE` | `ItemsDisplayMode.CODE` |
| `showDropDownIcon` | `show-drop-down-icon` | When true shows the drop-down icon, for open list. | `boolean` | `true` |
Expand Down
6 changes: 6 additions & 0 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 @@ -243,6 +243,12 @@ export class KupDataTable {
this.visibleColumns = state.visibleColumns
? [...state.visibleColumns]
: undefined;
} else {
this.#kupManager.debug.logMessage(
this,
'Persisting initial stateId ' + this.stateId
);
this.store.persistState(this.stateId, this.state);
}
}
}
Expand Down
7 changes: 2 additions & 5 deletions packages/ketchup/src/components/kup-input-panel/kup-input-panel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -615,8 +615,8 @@ export class KupInputPanel {
cell,
column,
row,
component: this,
editable: true,
component: this,
renderKup: true,
setSizes: true,
};
Expand Down Expand Up @@ -1166,6 +1166,7 @@ export class KupInputPanel {
disabled: !cell.isEditable,
id: column.name,
};

const cellType = dom.ketchup.data.cell.getType(cell, cell.shape);
const { data, ...noDataProps } = cell.data || {};

Expand Down Expand Up @@ -1299,10 +1300,6 @@ export class KupInputPanel {
#slotData(cell: KupInputPanelCell, col: KupInputPanelColumn) {
const cellType = dom.ketchup.data.cell.getType(cell, cell.shape);

if (!cell.isEditable) {
return null;
}

if (cellType === FCellTypes.CHIP) {
return {
trailingIcon: true,
Expand Down
2 changes: 1 addition & 1 deletion packages/ketchup/src/f-components/f-cell/f-cell-declarations.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,10 +22,10 @@ export interface FCellProps extends FComponent {
column?: KupDataColumn;
component?: unknown;
density?: FCellPadding;
editable?: boolean;
indents?: VNode[];
previousValue?: string;
renderKup?: boolean;
editable?: boolean;
row?: KupDataRow;
setSizes?: boolean;
shape?: FCellShapes;
Expand Down
2 changes: 0 additions & 2 deletions packages/ketchup/src/f-components/f-cell/f-cell.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -801,7 +801,6 @@ function setEditableCell(
class="kup-full-width"
slot="field"
displayMode={ItemsDisplayMode.CODE_AND_DESC}
selectMode={ItemsDisplayMode.CODE_AND_DESC}
sizing={KupComponentSizing.EXTRA_SMALL}
onKup-autocomplete-blur={(
e: CustomEvent<KupAutocompleteEventPayload>
Expand Down Expand Up @@ -848,7 +847,6 @@ function setEditableCell(
class="kup-full-width"
slot="field"
displayMode={ItemsDisplayMode.CODE_AND_DESC}
selectMode={ItemsDisplayMode.CODE_AND_DESC}
sizing={KupComponentSizing.EXTRA_SMALL}
onKup-combobox-blur={(
e: CustomEvent<KupComboboxEventPayload>
Expand Down
1 change: 1 addition & 0 deletions packages/ketchup/src/f-components/f-chip/f-chip-declarations.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ export interface FChipsProps extends FComponent {
sizing?: FChipSize;
styling?: FChipStyling;
type?: FChipType;
disabled?: boolean;
}
/**
* Types of the f-chip component.
Expand Down
16 changes: 16 additions & 0 deletions packages/ketchup/src/f-components/f-chip/f-chip.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,14 @@
--kup-chip-background-color,
var(--kup-layer-3)
);
--kup_chip_background_color_disabled: var(
--kup-chip-background-color-disabled,
var(--kup-layer-2)
);
--kup_chip_font_color_disabled: var(
--kup-chip-font-color-disabled,
var(--kup-layer-3)
);
--kup_chip_border_color: var(
--kup-chip-border-color,
var(--kup-border-strong)
Expand Down Expand Up @@ -187,6 +195,14 @@
white-space: nowrap;
}
}

&--disabled {
background-color: var(--kup_chip_background_color_disabled);
color: var(--kup_chip_font_color_disabled);
& .kup-icon {
background: var(--kup_chip_font_color_disabled);
}
}
}

&.chip-set--choice {
Expand Down
32 changes: 13 additions & 19 deletions packages/ketchup/src/f-components/f-chip/f-chip.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import { KupChipNode } from '../../components/kup-chip/kup-chip-declarations';
import { KupDom } from '../../managers/kup-manager/kup-manager-declarations';
import { KupLanguageGeneric } from '../../managers/kup-language/kup-language-declarations';
import { ItemsDisplayMode } from '../../components/kup-list/kup-list-declarations';
import { getIdOfItemByDisplayMode } from '../../components/kup-list/kup-list-helper';

const dom: KupDom = document.documentElement as KupDom;

Expand All @@ -28,6 +29,9 @@ export const FChip: FunctionalComponent<FChipsProps> = (props: FChipsProps) => {
if (!props.type) {
props.type = FChipType.STANDARD;
}
if (!props.displayMode) {
props.displayMode = ItemsDisplayMode.DESCRIPTION;
}

const isChoice = props.type.toLowerCase() === FChipType.CHOICE;
const isFilter = props.type.toLowerCase() === FChipType.FILTER;
Expand Down Expand Up @@ -88,6 +92,7 @@ function createChipList(
const indentStyle = {
['--kup_chip_indent_offset']: indent.toString(),
};
const isDisabled = props.disabled;

chipGroup.push(
<div
Expand Down Expand Up @@ -132,7 +137,7 @@ function createChipList(
wrapperClass="dropdown-icon"
></FImage>
) : null}
{createChip(chip)}
{createChip(chip, isDisabled)}
</div>
);
if (showChildren) {
Expand All @@ -144,11 +149,11 @@ function createChipList(
}
}

function createChip(chip: KupChipNode): VNode {
function createChip(chip: KupChipNode, disabled: boolean): VNode {
const onlyIcon = !!(chip.icon && !chip.value);
let componentClass: string = `chip ${
onlyIcon ? 'chip--only-icon' : ''
}`;
} ${disabled && 'chip--disabled'}`;
let iconEl = [];
let iconClass = 'chip__icon chip__icon--leading';

Expand Down Expand Up @@ -191,22 +196,11 @@ function createChipList(
);
}

let chipText: string = '';

switch (props.displayMode) {
case ItemsDisplayMode.CODE:
chipText = chip.id;
break;
case ItemsDisplayMode.DESCRIPTION:
chipText = chip.value;
break;
case ItemsDisplayMode.CODE_AND_DESC:
chipText = chip.id + ' - ' + chip.value;
break;
default:
chipText = chip.value ?? chip.id;
break;
}
let chipText: string = getIdOfItemByDisplayMode(
chip,
chip.value == '' ? ItemsDisplayMode.CODE : props.displayMode,
' - '
);

return (
<div
Expand Down
Loading

0 comments on commit c025051

Please sign in to comment.