@spectrum-web-components/shared - npm Package Compare versions

Comparing version 0.1.4 to 0.2.0

CHANGELOG.md

@@ -6,2 +6,13 @@ # Change Log
 
+# [0.2.0](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/shared@0.1.4...@spectrum-web-components/shared@0.2.0) (2019-11-01)
+
+### Bug Fixes
+
+-   **shared:** make Focusable pass disabled always ([a339d6f](https://github.com/adobe/spectrum-web-components/commit/a339d6f))
+-   **shared:** quiet the angry soul of the explicit any linter ([c278263](https://github.com/adobe/spectrum-web-components/commit/c278263))
+
+### Features
+
+-   **shared:** add mixing for observing text content changes in a slot ([1318150](https://github.com/adobe/spectrum-web-components/commit/1318150))
+
 ## [0.1.4](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/shared@0.1.3...@spectrum-web-components/shared@0.1.4) (2019-10-14)
@@ -8,0 +19,0 @@

lib/focusable.d.ts

 import { LitElement, CSSResultArray, PropertyValues } from 'lit-element';
+declare type DisableableElement = HTMLElement & {
+    disabled?: boolean;
+};
 /**
@@ -26,3 +29,3 @@ * Focusable base class handles tabindex setting into shadowed elements automatically.
     private oldTabindex;
-    readonly focusElement: HTMLElement;
+    readonly focusElement: DisableableElement;
     focus(): void;
@@ -37,1 +40,2 @@ blur(): void;
 }
+export {};

lib/focusable.js

@@ -90,5 +90,3 @@ import { __decorate } from "tslib";
         if (changedProperties.has('disabled')) {
-            if (this.focusElement instanceof HTMLInputElement) {
-                this.focusElement.disabled = this.disabled;
-            }
+            this.focusElement.disabled = this.disabled;
             if (this.disabled) {
@@ -95,0 +93,0 @@ this.blur();

package.json

@@ -21,3 +21,3 @@ {
     ],
-    "version": "0.1.4",
+    "version": "0.2.0",
     "description": "",
@@ -42,3 +42,3 @@ "main": "lib/index.js",
     },
-    "gitHead": "7c3e131bc2bc3b1195e736ff65d3c4e044590ace"
+    "gitHead": "2157014e1c3f8cf184663261e4095eef59011b37"
 }

README.md

 ## Overview
 
+```
+yarn add @spectrum-web-components/shared
+```
+
 ### Focusable
 
 The `Focusable` subclass of `LitElement` adds some helpers method and lifecycle coverage in order to support passing focus to a container element inside of a custom element. The Focusable base class handles tabindex setting into shadowed elements automatically and is based heavily on the aybolit delegate-focus-mixin at https://github.com/web-padawan/aybolit/blob/master/packages/core/src/mixins/delegate-focus-mixin.js
+
+```js
+import { Focusable } from '@spectrum-web-components/shared/lib/focusable';
+import { html } from 'lit-element';
+
+class FocusableButton extends Focusable {
+    public get focusElement(): HTMLElement {
+        /* istanbul ignore if */
+        if (!this.shadowRoot) {
+            return this;
+        }
+        return this.shadowRoot.querySelector('#button') as HTMLElement;
+    }
+
+    protected render(): TemplateResult {
+        return html`
+            <button
+                id="button"
+            >
+                Focus for this button is being managed by the focusable base class.
+            </button>
+        `;
+    }
+}
+```
+
+### ObserverSlotText
+
+When working with `<slot>`s and their `slotchange` event, you will have the opportunity to capture when the nodes and/or elements in your element are added or removed. However, if the `textContent` of a text node changes, you will not receive the `slotchange` event because the slot hasn't actually received new nodes and/or elements in the exchange. When working with a lit-html binding `<your-element>${text}</your-element>` that means you will not receive a `slotchange` event when the value of `text` goes from `text = ''` to `text = 'something'` or the other way. In these cases the `ObserveSlotText` can be leverages to apply a mutation observe onto your element that tracks `characterData` mutations so that you can resspond as desired.
+
+```js
+import { ObserveSlotText } from '@spectrum-web-components/shared/lib/oberve-slot-text';
+import { LitElement, html } from 'lit-element';
+
+class ObserveSlotTextElement extends ObserveSlotText(LitElement, '#observing-slot') {
+    protected render(): TemplateResult {
+        return html`
+            <button
+                id="button"
+            >
+                <slot
+                    id="observing-slot"
+                    @slotchange=${this.manageObservedSlot}
+                ></slot>
+            </button>
+        `;
+    }
+    protected updated(): void {
+        console.log(this.slotHasContent); // => true when <observing-slot-text-element>Text</observing-slot-text-element>
+    }
+}
+
+customElements.define('observing-slot-text-element', ObserveSlotTextElement);
+```

src/focusable.ts

@@ -20,2 +20,4 @@ /*
 
+type DisableableElement = HTMLElement & { disabled?: boolean };
+
 /**
@@ -54,3 +56,3 @@ * Focusable base class handles tabindex setting into shadowed elements automatically.
 
-    public get focusElement(): HTMLElement {
+    public get focusElement(): DisableableElement {
         throw new Error('Must implement focusElement getter!');
@@ -116,5 +118,3 @@ }
         if (changedProperties.has('disabled')) {
-            if (this.focusElement instanceof HTMLInputElement) {
-                this.focusElement.disabled = this.disabled;
-            }
+            this.focusElement.disabled = this.disabled;
             if (this.disabled) {
@@ -121,0 +121,0 @@ this.blur();

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

59256

increased by36.69%

Number of package files

21

increased by23.53%

Lines of code

637

increased by35.53%

Number of lines in readme file

64

increased by966.67%

No dependency changes