diff --git a/index.html b/index.html index 76acb34..9a8f676 100644 --- a/index.html +++ b/index.html @@ -2,13 +2,43 @@ - vaadin-split-layout + <vaadin-split-layout> - - + - + + + + + + + diff --git a/rollup.config.js b/rollup.config.js new file mode 100644 index 0000000..80c9746 --- /dev/null +++ b/rollup.config.js @@ -0,0 +1,8 @@ +const { createDefaultConfig } = require('@open-wc/building-rollup'); + +module.exports = createDefaultConfig({ + input: './index.html', + indexHTMLPlugin: { + minify: false + } +}); diff --git a/src/vaadin-split-layout.ts b/src/vaadin-split-layout.ts index e0c065f..093e45f 100644 --- a/src/vaadin-split-layout.ts +++ b/src/vaadin-split-layout.ts @@ -4,7 +4,35 @@ import { SplitLayoutMixin } from './vaadin-split-layout-mixin'; /** * `` is a Web Component implementing a split layout for two - * content elements with a draggable splitter between them. + * content elements with a draggable splitter between them. Content can be any HTML, + * including nested ``. + * + * #### Initial Splitter Position + * + * The initial splitter position is determined from the sizes of the content elements + * inside the split layout. Changing `width` or `height` on them affects the initial splitter + * position, depending on the `orientation`. + * + * When the total size of the content elements does not fit the layout, they are scaled + * proportionally. + * + * When setting initial sizes with percentages, it is recommended to assign the size for both + * elements. + * + * #### Size Limits + * + * The `min-width` / `min-height`, and `max-width` / `max-height` CSS size values + * for the content elements are respected and used to limit the splitter position + * when it is dragged. It is preferred to set the limits only for a single element. + * + * @slot primary - Slot where the first content element will be rendered into. + * @slot secondary - Slot where the second content element will be rendered into. + * @slot - Hidden slot where all the nodes except first and second one will go. + * + * @csspart splitter - The splitter element. + * @csspart handle - The handle of the splitter. + * + * @event splitter-dragend - Fired after dragging the splitter has ended. */ @customElement('vaadin-split-layout') export class VaadinSplitLayout extends SplitLayoutMixin(SplitLayoutBase) { diff --git a/vaadin-split-layout.html b/vaadin-split-layout.html deleted file mode 100644 index f94ace5..0000000 --- a/vaadin-split-layout.html +++ /dev/null @@ -1 +0,0 @@ - diff --git a/vaadin-split-layout.ts b/vaadin-split-layout.ts new file mode 100644 index 0000000..1fad25b --- /dev/null +++ b/vaadin-split-layout.ts @@ -0,0 +1,3 @@ +import './theme/lumo/vaadin-split-layout'; + +export { VaadinSplitLayout } from './src/vaadin-split-layout';