this.#rowsRefs.push(el)}
+ ref={(el: HTMLElement) => {
+ if (el) {
+ this.#rowsRefs.push(el);
+ }
+ }}
>
= (
/* M e t h o d s */
/*-------------------------------------------------*/
-function createIcon(props: FImageProps): HTMLDivElement {
+function createIcon(
+ icon: string,
+ color: string,
+ iconClass = 'f-image__icon'
+): HTMLDivElement {
const classObj: GenericObject = {
- 'f-image__icon': true,
+ [iconClass]: true,
};
const style: GenericObject = {
- background: props.color ? props.color : `var(--kup-gray-color-70)`,
+ background: color ? color : `var(--kup-gray-color-70)`,
};
- if (props.resource.indexOf('--kup') > -1) {
- let themeIcon: string = props.resource.replace('--', '');
+ if (icon.indexOf('--kup') > -1) {
+ let themeIcon: string = icon.replace('--', '');
classObj['kup-icon'] = true;
classObj[themeIcon] = true;
} else {
- const path: string = getAssetPath(`./assets/svg/${props.resource}.svg`);
+ const path: string = getAssetPath(`./assets/svg/${icon}.svg`);
style.mask = `url('${path}') no-repeat center`;
style.webkitMask = `url('${path}') no-repeat center`;
}
- return ;
+ return (
+ 
;
+ return (
+ ![]()
{
+ if (props.onLoad) {
+ props.onLoad(e);
+ }
+ if (placeholder) {
+ placeholder.classList.add(HIDDEN_CLASS);
+ img.classList.remove(HIDDEN_CLASS);
+ }
+ }}
+ onError={() => {
+ if (placeholder) {
+ placeholder.classList.remove(HIDDEN_CLASS);
+ img.classList.add(HIDDEN_CLASS);
+ }
+ }}
+ ref={(el) => (img = el)}
+ src={props.resource}
+ >
+ );
}
function createBar(data: FImageData[]): HTMLDivElement {
diff --git a/packages/ketchup/src/image.html b/packages/ketchup/src/image.html
index de8fcff7b3..8560daffe9 100644
--- a/packages/ketchup/src/image.html
+++ b/packages/ketchup/src/image.html
@@ -40,7 +40,8 @@
{
- this.editor && this.editor.moveCursorToStart();
+ if (this.editor) {
+ this.editor.moveCursorToStart();
+ if (
+ this.initialEditType === 'markdown' &&
+ this.previewStyle === 'tab' &&
+ this.selectedTab === 'preview'
+ ) {
+ this.updateMarkDownPreviewTab();
+ }
+ }
}, 100);
}
}
@@ -243,6 +259,17 @@ export class KupEditor {
this.updateToolbarVisiblity();
}
+ @Watch('selectedTab')
+ onMarkdownPreviewTabChanged() {
+ if (
+ (this.initialEditType != 'markdown' &&
+ this.previewStyle != 'tab') ||
+ !this.editor
+ )
+ return;
+ this.updateMarkDownPreviewTab();
+ }
+
@Watch('showSaveButton')
onShowSaveButtonChanged() {
if (this.editor) {
@@ -457,6 +484,20 @@ export class KupEditor {
this.kupAutoSave.emit(this.getSaveAndAutoSaveProps());
}
+ updateMarkDownPreviewTab() {
+ const tabSection = this.rootElement.querySelector(
+ '.te-markdown-tab-section'
+ );
+ if (!tabSection) return;
+
+ this.selectedTab === 'preview' &&
+ (tabSection.querySelector(
+ 'button:last-child'
+ ) as HTMLElement)!.click();
+ this.selectedTab === 'write' &&
+ tabSection.querySelector('button')!.click();
+ }
+
getToolBarWithSaveButton(includeDefaultItems: boolean = true) {
const options: Partial = {
toolbarItems: [
diff --git a/packages/ketchup/src/components/kup-editor/readme.md b/packages/ketchup/src/components/kup-editor/readme.md
index fd7057f2c9..64066ab76d 100644
--- a/packages/ketchup/src/components/kup-editor/readme.md
+++ b/packages/ketchup/src/components/kup-editor/readme.md
@@ -15,6 +15,7 @@
| `initialValue` | `initial-value` | The initial editor value. | `string` | `''` |
| `isReadOnly` | `is-read-only` | Defines whether the editor is disabled or not. | `boolean` | `false` |
| `previewStyle` | `preview-style` | The editor preview style. | `"tab" \| "vertical"` | `'vertical'` |
+| `selectedTab` | `selected-tab` | The markdown editor selected tab. | `"preview" \| "write"` | `'write'` |
| `showSaveButton` | `show-save-button` | Defines whether to show the save button in editor's toolbar or not. | `boolean` | `true` |
| `showToolbar` | `show-toolbar` | Defines whether to show the editor's toolbar or not. | `boolean` | `true` |
diff --git a/packages/ketchup/src/components/kup-image/kup-image.tsx b/packages/ketchup/src/components/kup-image/kup-image.tsx
index 16058f99c7..9fd5c9dcff 100644
--- a/packages/ketchup/src/components/kup-image/kup-image.tsx
+++ b/packages/ketchup/src/components/kup-image/kup-image.tsx
@@ -77,6 +77,11 @@ export class KupImage {
* @default false
*/
@Prop() isCanvas: boolean = false;
+ /**
+ * An SVG that will be displayed until the image is loaded.
+ * @default ""
+ */
+ @Prop() placeholderResource = '';
/**
* The resource used to fetch the image.
* @default null
@@ -250,6 +255,7 @@ export class KupImage {
color: this.color,
data: this.data,
fit: this.rootElement.classList.contains('kup-fit') ? true : false,
+ placeholderResource: this.placeholderResource,
resource: this.resource,
sizeX: this.sizeX,
sizeY: this.sizeY,
diff --git a/packages/ketchup/src/components/kup-image/readme.md b/packages/ketchup/src/components/kup-image/readme.md
index 312a062d02..0767e4378c 100644
--- a/packages/ketchup/src/components/kup-image/readme.md
+++ b/packages/ketchup/src/components/kup-image/readme.md
@@ -5,17 +5,18 @@
## Properties
-| Property | Attribute | Description | Type | Default |
-| ------------- | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | ------------------------------------ |
-| `badgeData` | -- | Sets the data of badges. | `KupBadge[]` | `null` |
-| `color` | `color` | The color of the icon, defaults to the CSS variable KupThemeColorValues.ICON. | `string` | ``var(${KupThemeColorValues.ICON})`` |
-| `customStyle` | `custom-style` | Custom style of the component. | `string` | `''` |
-| `data` | -- | When present, the component will be drawn using CSS. Check the 'Drawing with CSS' section of the image showcase for more information. | `FImageData[]` | `null` |
-| `feedback` | `feedback` | When set to true, a spinner will be displayed until the image finished loading. Not compatible with SVGs. | `boolean` | `false` |
-| `isCanvas` | `is-canvas` | The image component will create a canvas element on which it's possible to draw. It's a temporary feature that will be fully replaced by CSS drawing in the future. | `boolean` | `false` |
-| `resource` | `resource` | The resource used to fetch the image. | `string` | `null` |
-| `sizeX` | `size-x` | The width of the icon, defaults to 100%. Accepts any valid CSS format (px, %, vh, etc.). | `string` | `'100%'` |
-| `sizeY` | `size-y` | The height of the icon, defaults to 100%. Accepts any valid CSS format (px, %, vh, etc.). | `string` | `'100%'` |
+| Property | Attribute | Description | Type | Default |
+| --------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | ------------------------------------ |
+| `badgeData` | -- | Sets the data of badges. | `KupBadge[]` | `null` |
+| `color` | `color` | The color of the icon, defaults to the CSS variable KupThemeColorValues.ICON. | `string` | ``var(${KupThemeColorValues.ICON})`` |
+| `customStyle` | `custom-style` | Custom style of the component. | `string` | `''` |
+| `data` | -- | When present, the component will be drawn using CSS. Check the 'Drawing with CSS' section of the image showcase for more information. | `FImageData[]` | `null` |
+| `feedback` | `feedback` | When set to true, a spinner will be displayed until the image finished loading. Not compatible with SVGs. | `boolean` | `false` |
+| `isCanvas` | `is-canvas` | The image component will create a canvas element on which it's possible to draw. It's a temporary feature that will be fully replaced by CSS drawing in the future. | `boolean` | `false` |
+| `placeholderResource` | `placeholder-resource` | An SVG that will be displayed until the image is loaded. | `string` | `''` |
+| `resource` | `resource` | The resource used to fetch the image. | `string` | `null` |
+| `sizeX` | `size-x` | The width of the icon, defaults to 100%. Accepts any valid CSS format (px, %, vh, etc.). | `string` | `'100%'` |
+| `sizeY` | `size-y` | The height of the icon, defaults to 100%. Accepts any valid CSS format (px, %, vh, etc.). | `string` | `'100%'` |
## Events
diff --git a/packages/ketchup/src/components/kup-input-panel/kup-input-panel-declarations.ts b/packages/ketchup/src/components/kup-input-panel/kup-input-panel-declarations.ts
index 22cd63a37d..22c998c4e8 100644
--- a/packages/ketchup/src/components/kup-input-panel/kup-input-panel-declarations.ts
+++ b/packages/ketchup/src/components/kup-input-panel/kup-input-panel-declarations.ts
@@ -74,7 +74,8 @@ export type DataAdapterFn = (
options: GenericObject,
fieldLabel: string,
currentValue: string,
- fun?: string
+ cell?: KupInputPanelCell,
+ id?: string
) => Object;
export type InputPanelCells = {
@@ -90,7 +91,11 @@ export type InputPanelEvent = {
};
};
-export type InputPanelOptionsHandler = (fun: string) => Promise;
+export type InputPanelOptionsHandler = (
+ fun: string,
+ inputValue: string,
+ currentState: KupInputPanelData
+) => Promise;
export enum KupInputPanelProps {
customStyle = 'Custom style of the component.',
diff --git a/packages/ketchup/src/components/kup-input-panel/kup-input-panel.scss b/packages/ketchup/src/components/kup-input-panel/kup-input-panel.scss
index 02ea026dae..d002572740 100644
--- a/packages/ketchup/src/components/kup-input-panel/kup-input-panel.scss
+++ b/packages/ketchup/src/components/kup-input-panel/kup-input-panel.scss
@@ -26,6 +26,7 @@
overflow: auto;
padding: var(--kup_input_panel_padding);
position: relative;
+ gap: 2rem;
&--column {
flex-direction: column;
@@ -33,6 +34,13 @@
&__section {
display: grid;
+
+ .f-cell__content {
+ >* {
+ width: 100%;
+ }
+ }
+
}
&__horizontal-section {
@@ -44,6 +52,17 @@
width: 40px;
}
+ &__label_container {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+
+ >.f-cell {
+ flex: 1;
+ }
+
+ }
+
}
}
\ No newline at end of file
diff --git a/packages/ketchup/src/components/kup-input-panel/kup-input-panel.tsx b/packages/ketchup/src/components/kup-input-panel/kup-input-panel.tsx
index d9361a4fbd..902b32a9af 100644
--- a/packages/ketchup/src/components/kup-input-panel/kup-input-panel.tsx
+++ b/packages/ketchup/src/components/kup-input-panel/kup-input-panel.tsx
@@ -4,7 +4,6 @@ import {
Event,
EventEmitter,
Host,
- Listen,
Method,
Prop,
State,
@@ -13,10 +12,16 @@ import {
forceUpdate,
h,
} from '@stencil/core';
-import { KupAutocompleteEventPayload, KupDataCell } from '../../components';
+import {
+ KupAutocompleteEventPayload,
+ KupComboboxIconClickEventPayload,
+ KupDataCell,
+} from '../../components';
import { FButton } from '../../f-components/f-button/f-button';
import { FCell } from '../../f-components/f-cell/f-cell';
import {
+ FCellEventPayload,
+ FCellEvents,
FCellProps,
FCellTypes,
} from '../../f-components/f-cell/f-cell-declarations';
@@ -125,6 +130,15 @@ export class KupInputPanel {
]);
#originalData: KupInputPanelData = null;
+
+ #eventNames = new Map([
+ [
+ FCellTypes.AUTOCOMPLETE,
+ ['kup-autocomplete-input', 'kup-autocomplete-iconclick'],
+ ],
+ [FCellTypes.COMBOBOX, ['kup-combobox-iconclick']],
+ ]);
+ #listeners: { event: string; handler: (e) => void }[] = [];
//#endregion
//#region WATCHERS
@@ -134,9 +148,15 @@ export class KupInputPanel {
@Watch('data')
onDataChanged() {
- if (!this.#originalData) {
- this.#originalData = structuredClone(this.data);
+ this.#originalData = structuredClone(this.data);
+
+ if (this.#listeners.length) {
+ this.#listeners.map(({ event, handler }) => {
+ this.rootElement.removeEventListener(event, handler);
+ });
+ this.#listeners = [];
}
+
this.#mapCells(this.data);
}
//#endregion
@@ -252,14 +272,39 @@ export class KupInputPanel {
column,
row,
component: this,
- editable: cell.isEditable,
+ editable: true,
renderKup: true,
setSizes: true,
};
+ const label = this.#getLabelComponent(cell, column.title);
+
+ if (label) {
+ return (
+
+ ) => {
+ this.#getAutocompleteEventCallback(
+ e.detail,
+ cell.fun,
+ configCMandACP,
+ id,
+ currentValue
+ );
+ };
+ this.rootElement.addEventListener(evName, handler);
+ this.#listeners.push({
+ event: evName,
+ handler,
+ });
+ });
+ } else if (rawOptions) {
configCMandACP.data['kup-list'].data =
- this.#optionsTreeComboAdapter(options, currentValue);
+ this.#optionsTreeComboAdapter(rawOptions, currentValue);
}
return configCMandACP;
@@ -620,6 +687,30 @@ export class KupInputPanel {
.flat();
}
+ #getAutocompleteEventCallback(
+ detail: KupAutocompleteEventPayload | KupComboboxIconClickEventPayload,
+ fun: string,
+ data: any,
+ id: string,
+ currentValue: string
+ ) {
+ if (
+ detail.id !== id ||
+ (detail as KupComboboxIconClickEventPayload).open === false
+ ) {
+ return;
+ }
+ this.optionsHandler(
+ fun,
+ detail.inputValue,
+ this.#reverseMapCells()
+ ).then((options) => {
+ data.data['kup-list'].data =
+ this.#optionsTreeComboAdapter(options, currentValue) ?? [];
+ detail.comp.refresh();
+ });
+ }
+
//#endregion
//#region LIFECYCLE HOOKS
@@ -637,24 +728,6 @@ export class KupInputPanel {
componentDidLoad() {
this.kupReady.emit({ comp: this, id: this.rootElement.id });
this.#kupManager.debug.logLoad(this, true);
-
- // this.handleEventsCallbacks.map((cbData) => {
- // this.rootElement.addEventListener(cbData.eventName, (e: any) => {
- // const inputPanelEvent: InputPanelEvent = {
- // state: this.inputPanelCells.find((data) =>
- // data.cells.find(
- // (cell) => cell.column.name === e.detail.id
- // )
- // ).cells,
- // data: {
- // field: e.detail.id,
- // value: e.detail.inputValue || e.detail.value,
- // },
- // };
-
- // cbData.eventCallback(inputPanelEvent);
- // });
- // });
}
componentWillRender() {
diff --git a/packages/ketchup/src/components/kup-input-panel/readme.md b/packages/ketchup/src/components/kup-input-panel/readme.md
index e6fd8dad82..5f87fa6ea7 100644
--- a/packages/ketchup/src/components/kup-input-panel/readme.md
+++ b/packages/ketchup/src/components/kup-input-panel/readme.md
@@ -7,13 +7,13 @@
## Properties
-| Property | Attribute | Description | Type | Default |
-| -------------------- | ---------------------- | ---------------------------------------------------------------------- | ----------------------------------------- | ------- |
-| `customStyle` | `custom-style` | Custom style of the component. | `string` | `''` |
-| `data` | -- | Actual data of the form. | `KupInputPanelData` | `null` |
-| `hiddenSubmitButton` | `hidden-submit-button` | Creates a hidden submit button in order to submit the form with enter. | `boolean` | `false` |
-| `optionsHandler` | -- | Sets the callback function on loading options via FUN | `(fun: string) => Promise` | `null` |
-| `submitCb` | -- | Sets the callback function on submit form | `(e: KupInputPanelSubmit) => unknown` | `null` |
+| Property | Attribute | Description | Type | Default |
+| -------------------- | ---------------------- | ---------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | ------- |
+| `customStyle` | `custom-style` | Custom style of the component. | `string` | `''` |
+| `data` | -- | Actual data of the form. | `KupInputPanelData` | `null` |
+| `hiddenSubmitButton` | `hidden-submit-button` | Creates a hidden submit button in order to submit the form with enter. | `boolean` | `false` |
+| `optionsHandler` | -- | Sets the callback function on loading options via FUN | `(fun: string, inputValue: string, currentState: KupInputPanelData) => Promise` | `null` |
+| `submitCb` | -- | Sets the callback function on submit form | `(e: KupInputPanelSubmit) => unknown` | `null` |
## Events
diff --git a/packages/ketchup/src/f-components/f-image/f-image-declarations.ts b/packages/ketchup/src/f-components/f-image/f-image-declarations.ts
index 42d8b344fa..28cdd26a1f 100644
--- a/packages/ketchup/src/f-components/f-image/f-image-declarations.ts
+++ b/packages/ketchup/src/f-components/f-image/f-image-declarations.ts
@@ -7,6 +7,7 @@ export interface FImageProps extends FComponent {
color?: string;
data?: FImageData[];
fit?: boolean;
+ placeholderResource?: string;
resource?: string;
sizeX?: string;
sizeY?: string;
diff --git a/packages/ketchup/src/f-components/f-image/f-image.scss b/packages/ketchup/src/f-components/f-image/f-image.scss
index e7b61ecf33..9cdb997d2a 100644
--- a/packages/ketchup/src/f-components/f-image/f-image.scss
+++ b/packages/ketchup/src/f-components/f-image/f-image.scss
@@ -31,6 +31,16 @@
width: var(--kup_image_width, 100%);
}
+ .f-image__placeholder {
+ height: 100%;
+ position: absolute;
+ width: 100%;
+ }
+
+ .f-image__hidden {
+ visibility: hidden;
+ }
+
.css-step.bottom-aligned {
bottom: 0;
position: absolute;
diff --git a/packages/ketchup/src/f-components/f-image/f-image.tsx b/packages/ketchup/src/f-components/f-image/f-image.tsx
index cd93272629..1addca580b 100644
--- a/packages/ketchup/src/f-components/f-image/f-image.tsx
+++ b/packages/ketchup/src/f-components/f-image/f-image.tsx
@@ -1,13 +1,17 @@
import type { KupBadge } from '../../components/kup-badge/kup-badge';
import { FImageProps, FImageData, FImageShape } from './f-image-declarations';
import { FunctionalComponent, getAssetPath, h, JSX } from '@stencil/core';
-import { KupThemeColorValues } from '../../managers/kup-theme/kup-theme-declarations';
import { GenericObject } from '../../types/GenericTypes';
/*-------------------------------------------------*/
/* C o m p o n e n t */
/*-------------------------------------------------*/
+let img: HTMLImageElement;
+let placeholder: HTMLDivElement;
+
+const HIDDEN_CLASS = 'f-image__hidden';
+
export const FImage: FunctionalComponent = (
props: FImageProps
) => {
@@ -33,7 +37,7 @@ export const FImage: FunctionalComponent = (
'--kup_image_height': props.sizeY ? props.sizeY : '100%',
'--kup_image_width': props.sizeX ? props.sizeX : '100%',
};
- el = createIcon(props);
+ el = createIcon(props.resource, props.color);
}
} else if (props.data) {
style = {
@@ -59,6 +63,13 @@ export const FImage: FunctionalComponent = (
title={props.title}
onClick={props.onClick}
>
+ {props.placeholderResource
+ ? createIcon(
+ props.placeholderResource,
+ props.color,
+ 'f-image__placeholder ' + HIDDEN_CLASS
+ )
+ : undefined}
{el}
{...badgeCollection}
@@ -69,27 +80,62 @@ export const FImage: FunctionalComponent
+ {label}
+
+ );
+ }
+
return {
+ if (iconClass.indexOf('placeholder') > 1) {
+ placeholder = el;
+ }
+ }}
+ style={style}
+ >
+ );
}
function createImage(props: FImageProps): HTMLImageElement {
- return