Skip to content

Commit

Permalink
Merge pull request #1820 from apuliasoft/inputpanel
Browse files Browse the repository at this point in the history
Inputpanel - preview only
  • Loading branch information
lucafoscili authored Mar 22, 2024
2 parents a08b3e1 + 676765c commit dd1590a
Show file tree
Hide file tree
Showing 14 changed files with 997 additions and 0 deletions.
1 change: 1 addition & 0 deletions packages/ketchup-react/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@ export const KupHorizontalScroll = /*@__PURE__*/createReactComponent<JSX.KupHori
export const KupIframe = /*@__PURE__*/createReactComponent<JSX.KupIframe, HTMLKupIframeElement>('kup-iframe');
export const KupImage = /*@__PURE__*/createReactComponent<JSX.KupImage, HTMLKupImageElement>('kup-image');
export const KupImageList = /*@__PURE__*/createReactComponent<JSX.KupImageList, HTMLKupImageListElement>('kup-image-list');
export const KupInputPanel = /*@__PURE__*/createReactComponent<JSX.KupInputPanel, HTMLKupInputPanelElement>('kup-input-panel');
export const KupLazy = /*@__PURE__*/createReactComponent<JSX.KupLazy, HTMLKupLazyElement>('kup-lazy');
export const KupList = /*@__PURE__*/createReactComponent<JSX.KupList, HTMLKupListElement>('kup-list');
export const KupMagicBox = /*@__PURE__*/createReactComponent<JSX.KupMagicBox, HTMLKupMagicBoxElement>('kup-magic-box');
Expand Down
4 changes: 4 additions & 0 deletions packages/ketchup/src/assets/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -142,6 +142,10 @@ components.data = [
value: 'Image list',
id: 'image-list.html',
},
{
value: 'Input panel',
id: 'input-panel.html',
},
{
value: 'KupData',
id: 'kupdata.html',
Expand Down
215 changes: 215 additions & 0 deletions packages/ketchup/src/assets/input-panel.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,215 @@
const data = {
columns: [
{
name: 'NAM',
title: 'Name',
visible: true,
},
{
name: 'SUR',
title: 'Surname',
visible: true,
},
{
name: 'COL',
title: 'Color Shirt',
visible: true,
},
{
name: 'NAT',
title: 'Nation',
visible: true,
},
{
name: 'CIT',
title: 'City',
visible: true,
},
{
name: 'CAM',
title: 'Campionato vinto',
visible: true,
},
{
name: 'CHA',
title: 'Chart',
visible: false,
},
{
name: 'CHI',
title: 'Chip',
visible: true,
},
{
name: 'BUT',
title: 'Buttons list',
visible: false,
},
],
rows: [
{
cells: {
NAM: {
value: 'Francesco',
obj: {
t: '',
p: '',
k: '',
},
editable: true,
mandatory: true,
shape: 'ITX',
},
SUR: {
value: 'Totti',
obj: {
t: '',
p: '',
k: '',
},
editable: true,
mandatory: true,
shape: 'INF',
},
COL: {
value: '#8E1F2F',
obj: {
t: 'J1',
p: 'COL',
k: '',
},
editable: true,
mandatory: true,
// shape: 'CLP',
},
NAT: {
value: 'It',
options: [
{ id: 'It', label: 'Italy' },
{ id: 'Sp', label: 'Spain' },
],
obj: {
t: '',
p: '',
k: '',
},
editable: true,
mandatory: true,
shape: 'CMB',
},
CIT: {
value: 'Rom',
obj: {
t: '',
p: '',
k: '',
},
editable: true,
mandatory: true,
options: [
{ id: 'Rom', label: 'Roma' },
{ id: 'Flam', label: 'Flaminio' },
{ id: 'PorMet', label: 'Porta Metronia' },
{ id: 'Garbat', label: 'Garbatella' },
],
shape: 'ACP',
},
CAM: {
value: 'on',
obj: {
t: 'V2',
p: 'SI/NO',
k: '',
},
editable: true,
mandatory: true,
// shape: 'CHK',
},
CHA: {
data: {
sizeX: '50px',
offlineMode: {
value: '8;4;5',
},
id: 'i1012_GREF_0',
cellId: 'i1012_GREF_0',
sizeY: '50px',
},
obj: {
k: '8;4;5',
p: 'GRA_PIE',
t: 'J4',
},
shape: 'Gra',
value: '8;4;5',
},
CHI: {
// data: {},
shape: 'CHI',
value: 'Chipp',
},
BUT: {
cssClass: 'strong-text',
data: {
data: [
{
children: [
{
children: [],
disabled: false,
expandable: false,
icon: 'lightbulb-outline',
isExpanded: false,
obj: {
k: '000050',
p: 'COD_VER',
t: 'VO',
},
options: false,
value: 'Collaboratore',
},
{
children: [],
disabled: false,
expandable: false,
icon: 'briefcase',
isExpanded: false,
obj: {
k: '000050',
p: 'COD_VER',
t: 'VO',
},
options: false,
value: 'Azienda',
},
],
data: {
dropdownOnly: true,
},
disabled: false,
expandable: false,
isExpanded: false,
options: false,
},
],
customStyle:
' #kup-component button { padding: 0; font-size: 0.65em; } ',
icon: 'settings',
className: 'kup-slim',
},
editable: true,
obj: {
k: '000050',
p: 'COD_VER',
t: 'VO',
},
shape: 'BTN',
value: '',
},
},
},
],
};

const inputPanel = document.getElementById('input-panel');
inputPanel.data = data;
76 changes: 76 additions & 0 deletions packages/ketchup/src/components.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ import { FImageData } from "./f-components/f-image/f-image-declarations";
import { KupImageClickEventPayload } from "./components/kup-image/kup-image-declarations";
import { KupTreeColumnMenuEventPayload, KupTreeColumnRemoveEventPayload, KupTreeContextMenuEventPayload, KupTreeDynamicMassExpansionEventPayload, KupTreeExpansionMode, KupTreeNode, KupTreeNodeButtonClickEventPayload, KupTreeNodeCollapseEventPayload, KupTreeNodeExpandEventPayload, KupTreeNodeSelectedEventPayload, TreeNodePath } from "./components/kup-tree/kup-tree-declarations";
import { KupImageListEventPayload } from "./components/kup-image-list/kup-image-list-declarations";
import { KupInputPanelData } from "./components/kup-input-panel/kup-input-panel-declarations";
import { KupLazyRender } from "./components/kup-lazy/kup-lazy-declarations";
import { KupNavBarStyling } from "./components/kup-nav-bar/kup-nav-bar-declarations";
import { KupNumericPickerEventPayload } from "./components/kup-numeric-picker/kup-numeric-picker-declarations";
Expand Down Expand Up @@ -93,6 +94,7 @@ export { FImageData } from "./f-components/f-image/f-image-declarations";
export { KupImageClickEventPayload } from "./components/kup-image/kup-image-declarations";
export { KupTreeColumnMenuEventPayload, KupTreeColumnRemoveEventPayload, KupTreeContextMenuEventPayload, KupTreeDynamicMassExpansionEventPayload, KupTreeExpansionMode, KupTreeNode, KupTreeNodeButtonClickEventPayload, KupTreeNodeCollapseEventPayload, KupTreeNodeExpandEventPayload, KupTreeNodeSelectedEventPayload, TreeNodePath } from "./components/kup-tree/kup-tree-declarations";
export { KupImageListEventPayload } from "./components/kup-image-list/kup-image-list-declarations";
export { KupInputPanelData } from "./components/kup-input-panel/kup-input-panel-declarations";
export { KupLazyRender } from "./components/kup-lazy/kup-lazy-declarations";
export { KupNavBarStyling } from "./components/kup-nav-bar/kup-nav-bar-declarations";
export { KupNumericPickerEventPayload } from "./components/kup-numeric-picker/kup-numeric-picker-declarations";
Expand Down Expand Up @@ -2563,6 +2565,29 @@ export namespace Components {
"stateId": string;
"store": KupStore;
}
interface KupInputPanel {
/**
* Custom style of the component.
* @default ""
* @see https://ketchup.smeup.com/ketchup-showcase/#/customization
*/
"customStyle": string;
/**
* Actual data of the form.
* @default null
*/
"data": KupInputPanelData;
/**
* Creates a hidden submit button in order to submit the form with enter.
* @default false
*/
"hiddenSubmitButton": boolean;
/**
* Sets the callback function on submit form
* @default null
*/
"submitCb": (e: SubmitEvent) => unknown;
}
interface KupLazy {
/**
* Sets the tag name of the component to be lazy loaded.
Expand Down Expand Up @@ -4163,6 +4188,10 @@ export interface KupImageListCustomEvent<T> extends CustomEvent<T> {
detail: T;
target: HTMLKupImageListElement;
}
export interface KupInputPanelCustomEvent<T> extends CustomEvent<T> {
detail: T;
target: HTMLKupInputPanelElement;
}
export interface KupLazyCustomEvent<T> extends CustomEvent<T> {
detail: T;
target: HTMLKupLazyElement;
Expand Down Expand Up @@ -4809,6 +4838,23 @@ declare global {
prototype: HTMLKupImageListElement;
new (): HTMLKupImageListElement;
};
interface HTMLKupInputPanelElementEventMap {
"kup-input-panel-ready": KupEventPayload;
}
interface HTMLKupInputPanelElement extends Components.KupInputPanel, HTMLStencilElement {
addEventListener<K extends keyof HTMLKupInputPanelElementEventMap>(type: K, listener: (this: HTMLKupInputPanelElement, ev: KupInputPanelCustomEvent<HTMLKupInputPanelElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
removeEventListener<K extends keyof HTMLKupInputPanelElementEventMap>(type: K, listener: (this: HTMLKupInputPanelElement, ev: KupInputPanelCustomEvent<HTMLKupInputPanelElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}
var HTMLKupInputPanelElement: {
prototype: HTMLKupInputPanelElement;
new (): HTMLKupInputPanelElement;
};
interface HTMLKupLazyElementEventMap {
"kup-lazy-loaded": KupEventPayload;
}
Expand Down Expand Up @@ -5230,6 +5276,7 @@ declare global {
"kup-iframe": HTMLKupIframeElement;
"kup-image": HTMLKupImageElement;
"kup-image-list": HTMLKupImageListElement;
"kup-input-panel": HTMLKupInputPanelElement;
"kup-lazy": HTMLKupLazyElement;
"kup-list": HTMLKupListElement;
"kup-magic-box": HTMLKupMagicBoxElement;
Expand Down Expand Up @@ -7297,6 +7344,33 @@ declare namespace LocalJSX {
"stateId"?: string;
"store"?: KupStore;
}
interface KupInputPanel {
/**
* Custom style of the component.
* @default ""
* @see https://ketchup.smeup.com/ketchup-showcase/#/customization
*/
"customStyle"?: string;
/**
* Actual data of the form.
* @default null
*/
"data"?: KupInputPanelData;
/**
* Creates a hidden submit button in order to submit the form with enter.
* @default false
*/
"hiddenSubmitButton"?: boolean;
/**
* When component load is complete
*/
"onKup-input-panel-ready"?: (event: KupInputPanelCustomEvent<KupEventPayload>) => void;
/**
* Sets the callback function on submit form
* @default null
*/
"submitCb"?: (e: SubmitEvent) => unknown;
}
interface KupLazy {
/**
* Sets the tag name of the component to be lazy loaded.
Expand Down Expand Up @@ -8622,6 +8696,7 @@ declare namespace LocalJSX {
"kup-iframe": KupIframe;
"kup-image": KupImage;
"kup-image-list": KupImageList;
"kup-input-panel": KupInputPanel;
"kup-lazy": KupLazy;
"kup-list": KupList;
"kup-magic-box": KupMagicBox;
Expand Down Expand Up @@ -8692,6 +8767,7 @@ declare module "@stencil/core" {
"kup-iframe": LocalJSX.KupIframe & JSXBase.HTMLAttributes<HTMLKupIframeElement>;
"kup-image": LocalJSX.KupImage & JSXBase.HTMLAttributes<HTMLKupImageElement>;
"kup-image-list": LocalJSX.KupImageList & JSXBase.HTMLAttributes<HTMLKupImageListElement>;
"kup-input-panel": LocalJSX.KupInputPanel & JSXBase.HTMLAttributes<HTMLKupInputPanelElement>;
"kup-lazy": LocalJSX.KupLazy & JSXBase.HTMLAttributes<HTMLKupLazyElement>;
"kup-list": LocalJSX.KupList & JSXBase.HTMLAttributes<HTMLKupListElement>;
"kup-magic-box": LocalJSX.KupMagicBox & JSXBase.HTMLAttributes<HTMLKupMagicBoxElement>;
Expand Down
2 changes: 2 additions & 0 deletions packages/ketchup/src/components/kup-card/readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -126,6 +126,7 @@ Type: `Promise<void>`
- [kup-iframe](../kup-iframe)
- [kup-image](../kup-image)
- [kup-image-list](../kup-image-list)
- [kup-input-panel](../kup-input-panel)
- [kup-lazy](../kup-lazy)
- [kup-list](../kup-list)
- [kup-magic-box](../kup-magic-box)
Expand Down Expand Up @@ -217,6 +218,7 @@ graph TD;
kup-grid --> kup-card
kup-iframe --> kup-card
kup-image-list --> kup-card
kup-input-panel --> kup-card
kup-lazy --> kup-card
kup-magic-box --> kup-card
kup-nav-bar --> kup-card
Expand Down
Loading

0 comments on commit dd1590a

Please sign in to comment.