New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
@umbraco-ui/uui-box
Advanced tools
@umbraco-ui/uui-box - npm Package Compare versions
Comparing version 0.0.14 to 0.1.0
@@ -8,2 +8,10 @@ { | ||
| "description": "A box for grouping elements", | ||
| "attributes": [ | ||
| { | ||
| "name": "headline", | ||
| "description": "Headline for this box, can also be set via the 'box' slot.", | ||
| "type": "string | null", | ||
| "default": "\"null\"" | ||
| } | ||
| ], | ||
| "properties": [ | ||
@@ -13,3 +21,10 @@ { | ||
| "type": "CSSResult[]", | ||
| "default": "[null]" | ||
| "default": "[\"UUITextStyles\",null]" | ||
| }, | ||
| { | ||
| "name": "headline", | ||
| "attribute": "headline", | ||
| "description": "Headline for this box, can also be set via the 'box' slot.", | ||
| "type": "string | null", | ||
| "default": "\"null\"" | ||
| } | ||
@@ -19,13 +34,19 @@ ], | ||
| { | ||
| "name": "header", | ||
| "description": "header area for title" | ||
| "name": "headline", | ||
| "description": "headline area" | ||
| }, | ||
| { | ||
| "name": "main", | ||
| "description": "main content area" | ||
| "name": "header", | ||
| "description": "headline area" | ||
| }, | ||
| { | ||
| "name": "", | ||
| "description": "area with no padding" | ||
| "name": "default", | ||
| "description": "area for the content of the box" | ||
| } | ||
| ], | ||
| "cssProperties": [ | ||
| { | ||
| "name": "--uui-box-default-padding", | ||
| "description": "overwrite the box padding" | ||
| } | ||
| ] | ||
@@ -32,0 +53,0 @@ } |
| import { css, LitElement, html } from 'lit'; | ||
| import { defineElement } from '@umbraco-ui/uui-base/lib/registration'; | ||
| import { property, state } from 'lit/decorators.js'; | ||
| import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; | ||
@@ -16,6 +18,31 @@ var __defProp = Object.defineProperty; | ||
| let UUIBoxElement = class extends LitElement { | ||
| constructor() { | ||
| super(...arguments); | ||
| this.headline = null; | ||
| this._headlineSlotHasContent = false; | ||
| this._headlineSlotChanged = (e) => { | ||
| this._headlineSlotHasContent = e.target.assignedNodes({ flatten: true }).length > 0; | ||
| }; | ||
| this._headerSlotHasContent = false; | ||
| this._headerSlotChanged = (e) => { | ||
| this._headerSlotHasContent = e.target.assignedNodes({ flatten: true }).length > 0; | ||
| }; | ||
| } | ||
| renderHeader() { | ||
| return html`<div | ||
| id="header" | ||
| class="uui-text" | ||
| style=${this._headerSlotHasContent || this._headlineSlotHasContent || this.headline !== null ? "" : "display: none"}> | ||
| <h5 | ||
| id="headline" | ||
| style=${this._headlineSlotHasContent || this.headline !== null ? "" : "display: none"}> | ||
| ${this.headline} | ||
| <slot name="headline" @slotchange=${this._headlineSlotChanged}></slot> | ||
| </h5> | ||
| <slot name="header" @slotchange=${this._headerSlotChanged}></slot> | ||
| </div>`; | ||
| } | ||
| render() { | ||
| return html` | ||
| <slot name="header"></slot> | ||
| <slot name="main"></slot> | ||
| ${this.renderHeader()} | ||
| <slot></slot> | ||
@@ -26,21 +53,33 @@ `; | ||
| UUIBoxElement.styles = [ | ||
| UUITextStyles, | ||
| css` | ||
| :host { | ||
| display: block; | ||
| /* TODO: fix automatic fallback values for shadows shadows.*/ | ||
| box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); | ||
| box-shadow: var(--uui-shadow-depth-1,0 1px 3px rgba(0,0,0,0.12) , 0 1px 2px rgba(0,0,0,0.24)); | ||
| border-radius: var(--uui-border-radius,3px); | ||
| background-color: var(--uui-interface-surface,#fefefe); | ||
| --uui-box-default-padding: var(--uui-size-space-5,18px); | ||
| } | ||
| ::slotted([slot='header']) { | ||
| #header { | ||
| display: block; | ||
| border-bottom: 1px solid var(--uui-interface-border,#c4c4c4); | ||
| padding: var(--uui-size-4,12px) var(--uui-size-5,15px); | ||
| padding: var(--uui-size-space-4,12px) var(--uui-size-space-5,18px); | ||
| } | ||
| ::slotted([slot='main']) { | ||
| padding: var(--uui-size-5,15px); | ||
| slot:not([name]) { | ||
| display: block; | ||
| padding: var(--uui-box-default-padding, var(--uui-size-space-5,18px)); | ||
| } | ||
| ` | ||
| ]; | ||
| __decorateClass([ | ||
| property({ type: String }) | ||
| ], UUIBoxElement.prototype, "headline", 2); | ||
| __decorateClass([ | ||
| state() | ||
| ], UUIBoxElement.prototype, "_headlineSlotHasContent", 2); | ||
| __decorateClass([ | ||
| state() | ||
| ], UUIBoxElement.prototype, "_headerSlotHasContent", 2); | ||
| UUIBoxElement = __decorateClass([ | ||
@@ -47,0 +86,0 @@ defineElement("uui-box") |
@@ -5,5 +5,6 @@ import { LitElement } from 'lit'; | ||
| * @element uui-box | ||
| * @slot header - header area for title | ||
| * @slot main - main content area | ||
| * @slot area with no padding | ||
| * @slot headline - headline area | ||
| * @slot header - headline area | ||
| * @slot default - area for the content of the box | ||
| * @cssprop --uui-box-default-padding - overwrite the box padding | ||
| * | ||
@@ -13,2 +14,20 @@ */ | ||
| static styles: import("lit").CSSResult[]; | ||
| /** | ||
| * Headline for this box, can also be set via the 'box' slot. | ||
| * @type string | ||
| * @attr | ||
| * @default null | ||
| */ | ||
| headline: string | null; | ||
| private _headlineSlotHasContent; | ||
| private _headlineSlotChanged; | ||
| private _headerSlotHasContent; | ||
| private _headerSlotChanged; | ||
| /** | ||
| * Renders a header with the header-slot, headline and headline-slot within | ||
| * @returns {TemplateResult} | ||
| * @protected | ||
| * @method | ||
| */ | ||
| protected renderHeader(): import("lit-html").TemplateResult<1>; | ||
| render(): import("lit-html").TemplateResult<1>; | ||
@@ -15,0 +34,0 @@ } |
| { | ||
| "name": "@umbraco-ui/uui-box", | ||
| "version": "0.0.14", | ||
| "version": "0.1.0", | ||
| "license": "MIT", | ||
@@ -32,3 +32,4 @@ "description": "A box web component for grouping elements", | ||
| "dependencies": { | ||
| "@umbraco-ui/uui-base": "0.0.17" | ||
| "@umbraco-ui/uui-base": "0.1.0", | ||
| "@umbraco-ui/uui-css": "0.1.0" | ||
| }, | ||
@@ -43,3 +44,3 @@ "scripts": { | ||
| }, | ||
| "gitHead": "3b7c6cf892e89054b2980b19d8c2f8bead2752e8" | ||
| "gitHead": "9ed7860ce865d310b85bd1718f37b59db873aefd" | ||
| } |
@@ -5,2 +5,6 @@ # uui-box | ||
| ### See it in action | ||
| Preview the component on [Storybook](https://uui.umbraco.com/?path=/story/uui-box) | ||
| ## Installation | ||
@@ -29,6 +33,3 @@ | ||
| ```html | ||
| <uui-box> | ||
| <div slot="header">Header</div> | ||
| <div slot="main">Main</main> | ||
| </uui-box> | ||
| <uui-box headline="Headline"> Content </uui-box> | ||
| ``` |
No alert changes
Improved metrics
- Total package byte prevSize
- increased by51.17%
8216
- Lines of code
- increased by84.95%
172
- Number of lines in readme file
- increased by3.03%
34
Worsened metrics
- Dependency count
- increased by100%
2
Dependency changes
+ Added@umbraco-ui/uui-css@0.1.0
+ Added@umbraco-ui/uui-base@0.1.0(transitive)
+ Added@umbraco-ui/uui-css@0.1.0(transitive)
- Removed@umbraco-ui/uui-base@0.0.17(transitive)
Updated@umbraco-ui/uui-base@0.1.0