Skip to content

Commit

Permalink
Added CPE example
Browse files Browse the repository at this point in the history
  • Loading branch information
albarivas committed Dec 13, 2023
1 parent 48cebfd commit 5a7ff44
Show file tree
Hide file tree
Showing 5 changed files with 70 additions and 0 deletions.
12 changes: 12 additions & 0 deletions force-app/main/default/lwc/productTileList/productTileList.js
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,18 @@ export default class ProductTileList extends LightningElement {
*/
@api tilesAreDraggable = false;

/**
* min-size of the pictures shown
*/
@api minPictureWidth;

renderedCallback() {
const productTiles = this.template.querySelectorAll('c-product-tile');
productTiles.forEach((tile) => {
tile.style.minWidth = `${this.minPictureWidth}px`;
});
}

/** Current page in the product list. */
pageNumber = 1;

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,12 @@
type="Boolean"
label="Product tiles are draggable"
/>
<property
type="Integer"
name="minPictureWidth"
label="Min Picture Width"
editor="c/sliderEditor"
/>
</targetConfig>
</targetConfigs>
</LightningComponentBundle>
13 changes: 13 additions & 0 deletions force-app/main/default/lwc/sliderEditor/sliderEditor.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<!-- sldsValidatorIgnore -->
<template>
<div>
<lightning-slider
label={label}
step="1"
min="10"
max="1000"
value={width}
onchange={handleChange}
></lightning-slider>
</div>
</template>
30 changes: 30 additions & 0 deletions force-app/main/default/lwc/sliderEditor/sliderEditor.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import { LightningElement, api } from 'lwc';

export default class SliderEditor extends LightningElement {
@api label;
_width = 200; // Default width

@api
get width() {
return this._width;
}

set width(value) {
this._width = value;
}

connectedCallback() {
this.fireWidthChangedEvent();
}

handleChange(event) {
this._width = event.target.value;
this.fireWidthChangedEvent();
}

fireWidthChangedEvent() {
this.dispatchEvent(
new CustomEvent('valuechange', { detail: { value: this._width } })
);
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
<?xml version="1.0" encoding="UTF-8" ?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>59.0</apiVersion>
<isExposed>true</isExposed>
<masterLabel>Slider Custom Editor</masterLabel>
<targets>
<target>lightning__PropertyEditor</target>
</targets>
</LightningComponentBundle>

0 comments on commit 5a7ff44

Please sign in to comment.