Skip to content

Commit

Permalink
Merge pull request #1779 from smeup/chip-test
Browse files Browse the repository at this point in the history 
Chip test
  • Loading branch information
@lucafoscili
lucafoscili authored Feb 13, 2024
2 parents 9eaf2c1 + 1253cff commit 0688332
Show file tree
Hide file tree
Showing 24 changed files with 552 additions and 162 deletions.
91 changes: 75 additions & 16 deletions packages/ketchup/src/chip.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,31 +33,90 @@
font-size: var(--kup-font-size);
padding: 1rem;
}

body{
display: grid;
}
</style>
</head>
<body>
<kup-chip type="input">
<h1>Chip</h1>
<kup-chip type="input" id="chipList">
<input slot="_field" type="text" ></input>
</kup-chip>
<h3>Sizing</h3>
<h5>Default ( Medium ) </h5>
<kup-chip type="input" sizing="medium" id="chipList2">
<input slot="_field" type="text" ></input>
</kup-chip>
<h5>Small</h5>
<kup-chip type="input" sizing="small" id="chipList5">
<input slot="_field" type="text" ></input>
</kup-chip>


<h3>Styling</h3>
<h5>Default ( Neutral ) </h5>

<kup-chip type="input" sizing="medium" id="chipList">
<kup-autocomplete slot="field" allow-inconsistent-values ></kup-autocomplete>
<kup-text-field slot="_field" ></kup-text-field>
<input slot="_field" type="text" ></input>
</kup-chip>

<hr>

<kup-chip type="input" sizing="small" id="chipList2" styling="outlined">
<input slot="_field" type="text" ></input>
</kup-chip>

<h3>Construction</h3>
<h5>Singular</h5>
<h5>Set construction </h5>

<h3>Type</h3>
<h5>Default ( Raised ) </h5>



<kup-chip type="input" sizing="medium" id="chipList4" styling="raised" class="kup-primary">
<input slot="_field" type="text" ></input>
</kup-chip>

<kup-chip type="input" sizing="small" id="chipList3" styling="outlined" class="kup-primary">
<input slot="_field" type="text" ></input>
</kup-chip>

<script>
let chipList = document.getElementsByTagName('kup-chip')[0];
chipList.data = [
{
checked: false,
icon: 'favorite',
id: 'favorites',
value: 'Favorites',
},
{
checked: true,
icon: 'filter_2',
id: 'Set alarm clock',
value: 'Label 2',
},
];
let chipList = document.getElementById('chipList');
let chipList2 = document.getElementById('chipList2');
let chipList3 = document.getElementById('chipList3');
let chipList4 = document.getElementById('chipList4');
let chipList5 = document.getElementById('chipList5');
const chipData = [
{
checked: false,
id: 'favorites',
value: 'Favorites',
},
{
checked: true,
icon: 'filter_2',
id: 'Set alarm clock',
value: 'Label 2',
},
{
checked: false,
id: 'favorites2',
value: 'Favorites',
},
];

chipList.data = chipData;
chipList2.data = chipData;
chipList3.data = chipData;
chipList4.data = chipData;
chipList5.data = chipData;

document.addEventListener("kup-chip-change", (e) => {console.log(e)});
</script>
Expand Down
5 changes: 3 additions & 2 deletions packages/ketchup/src/combobox.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,22 +21,23 @@
</head>
<body>
<h4>Material Combobox (widget)</h4>
isSelect=true
<kup-combobox
disabled
is-filterable="false"
field-id="pluto1"
is-select="true"
label="i'm the label of this field"
></kup-combobox>
<kup-combobox
error="Error message"
is-filterable="false"
field-id="pluto2"
is-select="true"
display-mode="both"
select-mode="code"
label="i'm the label of this field"
></kup-combobox>
<br />
isSelect=false
<kup-combobox
disabled
is-filterable="false"
Expand Down
144 changes: 142 additions & 2 deletions packages/ketchup/src/components.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ import { FCellPadding } from "./f-components/f-cell/f-cell-declarations";
import { ChartAspect, ChartAxis, ChartOfflineMode, ChartSerie, ChartTitle, ChartType, KupChartClickEvent, KupChartSort, KupChartTrendlines } from "./components/kup-chart/kup-chart-declarations";
import { KupCheckboxEventPayload } from "./components/kup-checkbox/kup-checkbox-declarations";
import { KupChipChangeEventPayload, KupChipEventPayload, KupChipNode } from "./components/kup-chip/kup-chip-declarations";
import { FChipType } from "./f-components/f-chip/f-chip-declarations";
import { FChipSize, FChipStyling, FChipType } from "./f-components/f-chip/f-chip-declarations";
import { KupColorPickerEventPayload } from "./components/kup-color-picker/kup-color-picker-declarations";
import { KupComboboxEventPayload, KupComboboxIconClickEventPayload } from "./components/kup-combobox/kup-combobox-declarations";
import { KupGanttPlannerProps, KupPlannerBarDisplayProps, KupPlannerBarTask, KupPlannerCalendarProps, KupPlannerClickEventPayload, KupPlannerEventOption, KupPlannerEventPayload, KupPlannerGanttEvent, KupPlannerGanttProps, KupPlannerGanttRow, KupPlannerGanttTaskN, KupPlannerItemDetail, KupPlannerPhase, KupPlannerSwitcherProps, KupPlannerTask, KupPlannerTaskGanttContentProps, KupPlannerTaskGanttProps, KupPlannerTaskItemProps, KupPlannerTaskListProps, KupPlannerTaskType, KupPlannerUnloadEventPayload, KupPlannerViewMode, PlannerProps } from "./components/kup-planner/kup-planner-declarations";
Expand Down Expand Up @@ -71,7 +71,7 @@ export { FCellPadding } from "./f-components/f-cell/f-cell-declarations";
export { ChartAspect, ChartAxis, ChartOfflineMode, ChartSerie, ChartTitle, ChartType, KupChartClickEvent, KupChartSort, KupChartTrendlines } from "./components/kup-chart/kup-chart-declarations";
export { KupCheckboxEventPayload } from "./components/kup-checkbox/kup-checkbox-declarations";
export { KupChipChangeEventPayload, KupChipEventPayload, KupChipNode } from "./components/kup-chip/kup-chip-declarations";
export { FChipType } from "./f-components/f-chip/f-chip-declarations";
export { FChipSize, FChipStyling, FChipType } from "./f-components/f-chip/f-chip-declarations";
export { KupColorPickerEventPayload } from "./components/kup-color-picker/kup-color-picker-declarations";
export { KupComboboxEventPayload, KupComboboxIconClickEventPayload } from "./components/kup-combobox/kup-combobox-declarations";
export { KupGanttPlannerProps, KupPlannerBarDisplayProps, KupPlannerBarTask, KupPlannerCalendarProps, KupPlannerClickEventPayload, KupPlannerEventOption, KupPlannerEventPayload, KupPlannerGanttEvent, KupPlannerGanttProps, KupPlannerGanttRow, KupPlannerGanttTaskN, KupPlannerItemDetail, KupPlannerPhase, KupPlannerSwitcherProps, KupPlannerTask, KupPlannerTaskGanttContentProps, KupPlannerTaskGanttProps, KupPlannerTaskItemProps, KupPlannerTaskListProps, KupPlannerTaskType, KupPlannerUnloadEventPayload, KupPlannerViewMode, PlannerProps } from "./components/kup-planner/kup-planner-declarations";
Expand Down Expand Up @@ -1018,6 +1018,16 @@ export namespace Components {
* @param props - Object containing props that will be set to the component.
*/
"setProps": (props: GenericObject) => Promise<void>;
/**
* Sets the type of the chip
* @default FChipSize.MEDIUM
*/
"sizing": FChipSize;
/**
* Sets the style of the chip
* @default FChipStyling.RAISED
*/
"styling": FChipStyling;
/**
* The type of chip. Available types: input, filter, choice or empty for default.
* @default FChipType.STANDARD
Expand Down Expand Up @@ -1082,6 +1092,11 @@ export namespace Components {
"swatchOnly": boolean;
}
interface KupCombobox {
/**
* Set alert message
* @default '''
*/
"alert": string;
/**
* Custom style of the component.
* @default ""
Expand All @@ -1100,6 +1115,11 @@ export namespace Components {
* Sets how to show the selected item value. Suported values: "code", "description", "both".
*/
"displayMode": ItemsDisplayMode;
/**
* Set error message
* @default '''
*/
"error": string;
/**
* Used to retrieve component's props values.
* @param descriptions - When provided and true, the result will be the list of props with their description.
Expand All @@ -1111,14 +1131,54 @@ export namespace Components {
* @returns Value of the component.
*/
"getValue": () => Promise<string>;
/**
* When set, its content will be shown as a help text below the field.
* @default null
*/
"helper": string;
/**
* When true, the helper will be displayed.
* @default true
*/
"helperEnabled": boolean;
/**
* When set, the helper will be shown only when the field is focused.
* @default false
*/
"helperWhenFocused": boolean;
/**
* When set, the text-field will show this icon.
* @default null
*/
"icon": string;
/**
* Sets the initial value of the component
*/
"initialValue": string;
/**
* Enables a clear trailing icon.
* @default false
*/
"isClearable": boolean;
/**
* Lets the combobox behave as a select element.
*/
"isSelect": boolean;
/**
* When set, its content will be shown as a label.
* @default null
*/
"label": string;
/**
* When set to true, the label will be on the left of the component.
* @default false
*/
"leadingLabel": boolean;
/**
* Sets the component to read only state, making it not editable, but interactable. Used in combobox component when it behaves as a select.
* @default false
*/
"readOnly": boolean;
/**
* This method is used to trigger a new render of the component.
*/
Expand All @@ -1145,6 +1205,16 @@ export namespace Components {
* When true shows the drop-down icon, for open list.
*/
"showDropDownIcon": boolean;
/**
* Sets the type of the button
* @default KupComponentSizing.MEDIUM
*/
"sizing": KupComponentSizing;
/**
* When set, the icon will be shown after the text.
* @default false
*/
"trailingIcon": boolean;
}
interface KupCustomTaskListHeader {
"doubleView"?: boolean;
Expand Down Expand Up @@ -5888,6 +5958,16 @@ declare namespace LocalJSX {
* Triggered when the removal icon on input chips is clicked.
*/
"onKup-chip-iconclick"?: (event: KupChipCustomEvent<KupChipEventPayload>) => void;
/**
* Sets the type of the chip
* @default FChipSize.MEDIUM
*/
"sizing"?: FChipSize;
/**
* Sets the style of the chip
* @default FChipStyling.RAISED
*/
"styling"?: FChipStyling;
/**
* The type of chip. Available types: input, filter, choice or empty for default.
* @default FChipType.STANDARD
Expand Down Expand Up @@ -5924,6 +6004,11 @@ declare namespace LocalJSX {
"swatchOnly"?: boolean;
}
interface KupCombobox {
/**
* Set alert message
* @default '''
*/
"alert"?: string;
/**
* Custom style of the component.
* @default ""
Expand All @@ -5942,21 +6027,66 @@ declare namespace LocalJSX {
* Sets how to show the selected item value. Suported values: "code", "description", "both".
*/
"displayMode"?: ItemsDisplayMode;
/**
* Set error message
* @default '''
*/
"error"?: string;
/**
* When set, its content will be shown as a help text below the field.
* @default null
*/
"helper"?: string;
/**
* When true, the helper will be displayed.
* @default true
*/
"helperEnabled"?: boolean;
/**
* When set, the helper will be shown only when the field is focused.
* @default false
*/
"helperWhenFocused"?: boolean;
/**
* When set, the text-field will show this icon.
* @default null
*/
"icon"?: string;
/**
* Sets the initial value of the component
*/
"initialValue"?: string;
/**
* Enables a clear trailing icon.
* @default false
*/
"isClearable"?: boolean;
/**
* Lets the combobox behave as a select element.
*/
"isSelect"?: boolean;
/**
* When set, its content will be shown as a label.
* @default null
*/
"label"?: string;
/**
* When set to true, the label will be on the left of the component.
* @default false
*/
"leadingLabel"?: boolean;
"onKup-combobox-blur"?: (event: KupComboboxCustomEvent<KupComboboxEventPayload>) => void;
"onKup-combobox-change"?: (event: KupComboboxCustomEvent<KupComboboxEventPayload>) => void;
"onKup-combobox-click"?: (event: KupComboboxCustomEvent<KupComboboxEventPayload>) => void;
"onKup-combobox-focus"?: (event: KupComboboxCustomEvent<KupComboboxEventPayload>) => void;
"onKup-combobox-iconclick"?: (event: KupComboboxCustomEvent<KupComboboxIconClickEventPayload>) => void;
"onKup-combobox-input"?: (event: KupComboboxCustomEvent<KupComboboxEventPayload>) => void;
"onKup-combobox-itemclick"?: (event: KupComboboxCustomEvent<KupComboboxEventPayload>) => void;
/**
* Sets the component to read only state, making it not editable, but interactable. Used in combobox component when it behaves as a select.
* @default false
*/
"readOnly"?: boolean;
/**
* Sets how to return the selected item value. Suported values: "code", "description", "both".
*/
Expand All @@ -5965,6 +6095,16 @@ declare namespace LocalJSX {
* When true shows the drop-down icon, for open list.
*/
"showDropDownIcon"?: boolean;
/**
* Sets the type of the button
* @default KupComponentSizing.MEDIUM
*/
"sizing"?: KupComponentSizing;
/**
* When set, the icon will be shown after the text.
* @default false
*/
"trailingIcon"?: boolean;
}
interface KupCustomTaskListHeader {
"doubleView"?: boolean;
Expand Down
2 changes: 1 addition & 1 deletion packages/ketchup/src/components/kup-badge/styles/kup-badge-main.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@
font-size: 0.625em;
min-height: var(--kup_badge_min_size);
min-width: var(--kup_badge_min_size);
padding: var(--kup_badge_padding) calc(var(--kup_badge_padding) * 1.25);
padding: var(--kup_badge_padding) calc(var(--kup_badge_padding));
text-align: center;
display: flex;
justify-content: center;
Expand Down
Loading

0 comments on commit 0688332

Please sign in to comment.