';
+
return (
+ ${renderLabel(
+ this.label,
+ getNestedCopyValue(this),
+ this.copy,
+ this.tooltip
+ )}
+
+
+
+
+ ${renderLabel(this.label, data, this.copy, this.tooltip)}
+
+
+ `;
+ };
+
+ if (this.type === "tab") {
+ return tabs();
+ }
+ if (this.type === "detail") {
+ return detail();
+ }
+ if (this.type === "list") {
+ return list();
+ }
+ return html`
+
+ ${renderLabel(this.label, this.value, this.copy, this.tooltip)}
+ ${this.value || "_"}
+
+ `;
+ }
+}
+
+export default EccUtilsDesignDataItem;
diff --git a/packages/ecc-utils-design/src/components/details/details.styles.ts b/packages/ecc-utils-design/src/components/details/details.styles.ts
index 95df4a3c..00775a5d 100644
--- a/packages/ecc-utils-design/src/components/details/details.styles.ts
+++ b/packages/ecc-utils-design/src/components/details/details.styles.ts
@@ -1,6 +1,6 @@
import { css } from "lit";
-const styles = css`
+export const detailsStyles = css`
:host {
display: block;
padding: 1rem;
@@ -26,18 +26,52 @@ const styles = css`
text-decoration: underline;
padding: 0;
}
- .icon {
+ .ecc-action-button {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ border: var(--ecc-input-border-width) solid black;
+ gap: var(--ecc-spacing-large);
+ background-color: var(--ecc-color-background-primary);
+ padding: var(--ecc-spacing-medium);
+ border-radius: var(--ecc-border-radius-medium);
+ outline: none;
+ cursor: pointer;
+ font-family: var(--ecc-input-font-family);
+ font-weight: var(--ecc-input-font-weight);
+ user-select: none;
+ white-space: nowrap;
+ font-size: var(--ecc-input-font-size-medium);
+ }
+ .ecc-action-button:active {
+ scale: 0.98;
+ }
+ .ecc-action-button.ecc-primary {
+ color: white;
+ background-color: var(--ecc-color-primary-600);
+ border: none;
+ }
+ .ecc-action-button.ecc-danger {
+ color: white;
+ background-color: var(--sl-color-danger-600);
+ border: none;
+ }
+ .ecc-icon {
height: var(--ecc-input-font-size-large);
width: var(--ecc-input-font-size-large);
}
+`;
- /* Details */
+export const dataItemStyles = css`
+ .tab-container {
+ }
.key,
.value {
font-size: var(--ecc-input-label-font-size-medium);
font-family: var(--ecc-input-font-family);
font-weight: var(--ecc-input-font-weight);
letter-spacing: var(--ecc-input-letter-spacing);
+ position: relative;
}
.field {
display: flex;
@@ -92,5 +126,3 @@ const styles = css`
height: var(--ecc-input-font-size-small);
}
`;
-
-export default styles;
diff --git a/packages/ecc-utils-design/src/components/details/details.ts b/packages/ecc-utils-design/src/components/details/details.ts
index 47a67bba..ddf1c894 100644
--- a/packages/ecc-utils-design/src/components/details/details.ts
+++ b/packages/ecc-utils-design/src/components/details/details.ts
@@ -1,71 +1,19 @@
import { html, LitElement } from "lit";
-import { ifDefined } from "lit/directives/if-defined.js";
-import { property, state } from "lit/decorators.js";
-import _, { toLower } from "lodash-es";
-import "@shoelace-style/shoelace/dist/components/tab-group/tab-group.js";
+import "@shoelace-style/shoelace/dist/components/tooltip/tooltip.js";
+import "@shoelace-style/shoelace/dist/components/copy-button/copy-button.js";
import "@shoelace-style/shoelace/dist/components/tab/tab.js";
+import "@shoelace-style/shoelace/dist/components/tab-group/tab-group.js";
import "@shoelace-style/shoelace/dist/components/tab-panel/tab-panel.js";
-import "@shoelace-style/shoelace/dist/components/copy-button/copy-button.js";
-import "@shoelace-style/shoelace/dist/components/button/button.js";
import "@shoelace-style/shoelace/dist/components/details/details.js";
+import "@shoelace-style/shoelace/dist/components/button/button.js";
import "@shoelace-style/shoelace/dist/components/tag/tag.js";
-import "@shoelace-style/shoelace/dist/components/tooltip/tooltip.js";
import { hostStyles } from "../../styles/host.styles.js";
-import detailsStyles from "./details.styles.js";
+import { detailsStyles } from "./details.styles.js";
import { primitiveStylesheet } from "../../styles/primitive.styles.js";
import sholelaceStyles from "../../styles/shoelace.styles.js";
+import { formatBtn } from "./utils.js";
-export interface Field {
- key: string;
- path: string;
- tab?: string;
- label?: string;
- arrayOptions?: {
- labelOptions?: {
- path?: string;
- prefix?: string;
- suffix?: string;
- };
- type?: "detail" | "tag";
- };
- tooltip?: string;
- copy?: boolean;
- parentKey?: string;
-}
-
-export interface Action {
- key: string;
- label: string;
- type?: "button" | "link";
- buttonOptions?: {
- variant?: "primary" | "success" | "neutral" | "warning" | "danger" | "text";
- loading?: boolean;
- disabled?: boolean;
- size?: "small" | "medium" | "large";
- icon?: {
- url: string;
- position?: "prefix" | "suffix";
- };
- };
- linkOptions?: {
- url: string;
- size?: "small" | "medium" | "large";
- };
- position?: "left" | "right";
-}
-
-/**
- * @summary This component is used to render a detailed view of items.
- * @since 1.0.0
- *
- * @property {object} data - Data to be rendered
- * @property {array} fields - An array of fields to render
- * @property {array} buttons - An array of buttons and its configuration
- *
- * @event ecc-utils-button-click - This event is fired when a button in the details component is clicked.
- */
-
-export default class EccUtilsDesignDetails extends LitElement {
+export class EccUtilsDesignDetails extends LitElement {
static styles = [
primitiveStylesheet,
sholelaceStyles,
@@ -73,357 +21,29 @@ export default class EccUtilsDesignDetails extends LitElement {
detailsStyles,
];
- @property({ type: Object, reflect: true }) data = {};
- @property({ type: Array, reflect: true }) fields: Array
-
`;
- }
-
- const array = _.get(this.data, field.path);
- return html`
-
-
- ${field.copy
- ? html`
-
- ${field.tooltip}
- ${field.label}
- ${field.tooltip}
-
- ${field.label}
- ${field.copy
- ? html`
- ${field.tooltip}
-
- ${field.label}
- ${field.copy
- ? html`
-
-
`;
- }
-
- private _renderPanel(tab: string) {
- const fields = this.fields.filter((field) => field.tab === tab);
- return fields.map((field) => this._renderField(field));
- }
-
- private _renderTabs() {
- return this._tabs.map(
- (tab) => html`
-
-
- ${fieldwithProps.copy
- ? html`
- ${fieldwithProps.tooltip}
- ${fieldwithProps.label}
- ${value}
-
- ${this.actions
- .filter((action) => action.position === "left")
- .map((action) => this._renderAction(action))}
+ ${getLeftActionButtons().map((btn) => formatBtn(btn))}
- ${this.actions
- .filter((action) => action.position === "right")
- .map((action) => this._renderAction(action))}
+ ${getRightActionButtons().map((btn) => formatBtn(btn))}
- ${this._tabs.length > 0
- ? html` ${this._renderTabs()} `
- : this._renderFields(this.data)}
- ${this._renderActions()}
-
`;
- }
}
+
+export default EccUtilsDesignDetails;
diff --git a/packages/ecc-utils-design/src/components/details/index.ts b/packages/ecc-utils-design/src/components/details/index.ts
index 11e052a4..408346fc 100644
--- a/packages/ecc-utils-design/src/components/details/index.ts
+++ b/packages/ecc-utils-design/src/components/details/index.ts
@@ -1,12 +1,14 @@
import EccUtilsDesignDetails from "./details.js";
+import EccUtilsDesignDataItem from "./dataItem.js";
+
+// ... other imports
export * from "./details.js";
export default EccUtilsDesignDetails;
-window.customElements.define("ecc-utils-design-details", EccUtilsDesignDetails);
+export { EccUtilsDesignDataItem };
+
+window.customElements.define("ecc-d-details", EccUtilsDesignDetails);
+window.customElements.define("ecc-d-data-item", EccUtilsDesignDataItem);
-declare global {
- interface HTMLElementTagNameMap {
- "ecc-utils-design-details": EccUtilsDesignDetails;
- }
-}
+// ... rest of the code (declare global, etc.)
diff --git a/packages/ecc-utils-design/src/components/details/utils.ts b/packages/ecc-utils-design/src/components/details/utils.ts
new file mode 100644
index 00000000..8979b57f
--- /dev/null
+++ b/packages/ecc-utils-design/src/components/details/utils.ts
@@ -0,0 +1,90 @@
+/* eslint-disable no-param-reassign */
+import { html } from "lit";
+import * as _ from "lodash-es";
+import "@shoelace-style/shoelace/dist/components/tooltip/tooltip.js";
+
+export const getListData = (input: string) => {
+ if (typeof input !== "string") return input;
+ if (input.trim().startsWith("[") && input.trim().endsWith("]")) {
+ return JSON.parse(input);
+ }
+ return input.split(",");
+};
+
+export const getNestedCopyValue = (el: Element) => {
+ const dataItems = el.querySelectorAll("ecc-d-data-item");
+
+ const data: Record
+ ${tooltip.trim()
+ ? html` ${getHTML()} `
+ : getHTML()}
+
+ `;
+};
diff --git a/packages/ecc-utils-design/src/components/form/form.styles.ts b/packages/ecc-utils-design/src/components/form/form.styles.ts
index fa9654e3..beb5829e 100644
--- a/packages/ecc-utils-design/src/components/form/form.styles.ts
+++ b/packages/ecc-utils-design/src/components/form/form.styles.ts
@@ -68,7 +68,7 @@ const styles = css`
.group-content {
padding-top: var(--ecc-spacing-medium);
}
- .group-item {
+ .group {
min-height: var(--ecc-input-height-3xlarge);
}
/* Array Styles */
@@ -78,12 +78,12 @@ const styles = css`
font-weight: var(--ecc-input-font-weight);
letter-spacing: var(--ecc-input-letter-spacing);
}
- .array-item {
+ .array {
border-style: solid;
border-width: 0px 0px var(--ecc-input-border-width) 0px;
border-color: var(--ecc-input-border-color-disabled);
}
- .array-item {
+ .array {
display: flex;
flex-direction: row;
align-items: center;
diff --git a/packages/ecc-utils-design/src/components/form/form.ts b/packages/ecc-utils-design/src/components/form/form.ts
index 2278c828..138d40c4 100644
--- a/packages/ecc-utils-design/src/components/form/form.ts
+++ b/packages/ecc-utils-design/src/components/form/form.ts
@@ -1,4 +1,4 @@
-import { html, LitElement, TemplateResult } from "lit";
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
import { property, state } from "lit/decorators.js";
import "@shoelace-style/shoelace/dist/components/input/input.js";
import "@shoelace-style/shoelace/dist/components/button/button.js";
@@ -14,67 +14,39 @@ import { hostStyles } from "../../styles/host.styles.js";
import formStyles from "./form.styles.js";
import { primitiveStylesheet } from "../../styles/primitive.styles.js";
import sholelaceStyles from "../../styles/shoelace.styles.js";
-
-export interface Field {
- key: string;
- label: string;
- type?:
- | "text"
- | "date"
- | "number"
- | "email"
- | "password"
- | "tel"
- | "url"
- | "search"
- | "datetime-local"
- | "time"
- | "array"
- | "switch"
- | "file"
- | "group"
- | "select";
- fieldOptions?: {
- required?: boolean;
- default?: string | boolean;
- multiple?: boolean;
- accept?: string;
- returnIfEmpty?: boolean;
- tooltip?: string;
- readonly?: boolean;
- };
- selectOptions?: Array<{ label: string; value: string }>;
- arrayOptions?: {
- defaultInstances?: number;
- max?: number;
- min?: number;
- };
- groupOptions?: {
- collapsible: boolean;
- };
- fileOptions?: {
- protocol?: "native" | "tus";
- tusOptions?: {
- endpoint: string;
- };
- };
- error?: string;
- children?: Array
- ${field.fieldOptions?.tooltip?.trim()
- ? html`
-
-
-
- `
- : html`
-
- `}
- {
- const value = (e.target as HTMLInputElement).checked;
- _.set(this.form, path, value);
- this.requestUpdate();
- this.alertFieldChange(field.key, value);
- }}
- >
-
-
- `;
- }
-
- private uploadPercentage = 0;
-
- private handleTusFileUpload = async (
- e: Event,
- field: Field
- ): Promise
- ${field.fieldOptions?.tooltip?.trim()
- ? html`
-
-
-
- `
- : html`
-
- `}
- ${field.fileOptions?.protocol === "tus"
- ? html`
- {
- const data = await this.handleTusFileUpload(e, field);
-
- if (data) {
- _.set(this.form, path, data);
- this.alertFieldChange(field.key, data);
- }
- }}
- />
-
-
- `;
- }
-
- // if the field is empty and has a default value, set the default value on first render
- if (!_.get(this.form, path)) {
- if (field.fieldOptions?.default && !this.hasUpdated) {
- _.set(this.form, path, field.fieldOptions.default);
- } else if (field.fieldOptions?.returnIfEmpty) {
- _.set(this.form, path, "");
- }
- }
-
- if (field.type === "select") {
- return html`
-
- ${this.uploadPercentage.toFixed(2)}%
-
- `
- : ""}
- ${!field.fileOptions?.protocol ||
- field.fileOptions?.protocol === "native"
- ? html`
- {
- const { files } = e.target as HTMLInputElement;
- _.set(this.form, path, files);
- this.requestUpdate();
- }}
- />
- `
- : ""}
-
- ${field.fieldOptions?.tooltip?.trim()
- ? html`
-
-
-
- `
- : html`
-
- `}
- {
- const selectElement = e.target as HTMLSelectElement;
- const label =
- selectElement.selectedOptions[0].textContent?.trim();
- _.set(this.form, path, label);
- this.requestUpdate();
- this.alertFieldChange(field.key, label);
- }}
- >
- ${field.selectOptions?.map(
- (option) => html`
- ${option.label}
- `
- )}
-
-
- `;
- }
+ declare setHTMLUnsafe: (htmlString: string) => void;
+ protected firstUpdated(_changedProperties: PropertyValues): void {
+ super.firstUpdated(_changedProperties);
- return html`
-
-
- `;
- }
-
- private renderGroupTemplate(field: Field, path: string): TemplateResult {
- if (!field.children) return html``;
-
- const renderChildren = () =>
- html`
-
- ${field.fieldOptions?.tooltip?.trim()
- ? html`
-
-
-
- `
- : html`
-
- `}
- {
- if (resolveAddButtonIsActive()) {
- const instances: [] = _.get(this.form, path) || [];
- _.set(this.form, path, [...instances, {}]);
- this.requestUpdate();
- }
- }}
- >
-
- Add
-
-
- ${_.get(this.form, path)?.map(
- (_item: any, index: number) => html`
-
- {
- if (resolveDeleteButtonIsActive()) {
- const newInstance = [..._.get(this.form, path)];
- newInstance.splice(index, 1);
- _.set(this.form, path, newInstance);
- this.requestUpdate();
- }
- }}
- >
-
-
-
- `
- )}
-
- ${field.children?.map((child) =>
- this.renderTemplate(child, `${path}[${index}]`)
- )}
-
-
- ${field.children?.map((child) =>
- this.renderTemplate(child, `${path}`)
- )}
-
- `;
-
- return html`
- ${field.groupOptions?.collapsible
- ? html`
- ${renderChildren()}
- `
- : html`
-
`;
+ });
}
- private renderTemplate(field: Field, path: string): TemplateResult {
- const newPath = `${path}.${field.key}`;
- if (field.type === "group") {
- return this.renderGroupTemplate(field, newPath);
- }
- if (field.type === "array") {
- return this.renderArrayTemplate(field, newPath);
- }
- if (field.type === "switch") {
- return this.renderSwitchTemplate(field, newPath);
- }
-
- if (field.fieldOptions?.required) {
- if (
- !_.get(this.form, newPath) &&
- !this.requiredButEmpty.includes(field.key)
- ) {
- // add to requiredButEmpty
- if (this.hasUpdated || !field.fieldOptions.default) {
- this.requiredButEmpty.push(field.key);
- }
- } else if (_.get(this.form, newPath)) {
- // remove from requiredButEmpty
- this.requiredButEmpty = this.requiredButEmpty.filter(
- (key) => key !== field.key
- );
- }
- }
-
- return this.renderInputTemplate(field, newPath);
+ protected updated(): void {
+ setupCustomInputs(
+ this.shadowRoot?.querySelectorAll("[ecc-key]:not([ecc-input-path])")
+ );
}
private renderErrorTemplate(): TemplateResult {
if (this.formState !== "error") return html``;
- return html`
- ${field.fieldOptions?.tooltip?.trim()
- ? html`
-
-
-
- `
- : html`
-
- `}
-
- ${renderChildren()}
- `}
-