kempo-ui 0.3.3 → 0.3.4

package/dist/components/Tags.js

@@ -1,7 +1,12 @@
-import{html,css}from"../lit-all.min.js";import ShadowComponent from"./ShadowComponent.js";export default class Tags extends ShadowComponent{static properties={value:{type:String,reflect:!0},allowedTags:{type:String,reflect:!0,attribute:"allowed-tags"},disallowedTags:{type:String,reflect:!0,attribute:"disallowed-tags"}};constructor(){super(),this.value="",this.allowedTags="",this.disallowedTags=""}firstUpdated(){super.firstUpdated(),this.renderTags()}updated(t){if(super.updated(t),t.has("value")){const a=t.get("value"),e=this.validateTags();e!==this.value?this.value=e:(this.dispatchEvent(new CustomEvent("change",{detail:{oldValue:a,newValue:this.value},bubbles:!0})),this.renderTags())}if(t.has("allowedTags")||t.has("disallowedTags")){const a=t.get("allowedTags")||t.get("disallowedTags"),e=this.allowedTags||this.disallowedTags,s=this.validateTags();if(s!==this.value)this.value=s;else{const s=t.has("allowedTags")?"allowedtagschange":"disallowedtagschange";this.dispatchEvent(new CustomEvent(s,{detail:{oldValue:a,newValue:e},bubbles:!0})),this.renderTags()}}}handleInputChange=()=>{const t=this.shadowRoot.getElementById("tagsInput"),a=t.value.trim();a&&(this.addTag(a),t.value="")};handleInputInput=t=>{if(","===t.data||"insertFromPaste"===t.inputType){const t=this.shadowRoot.getElementById("tagsInput"),a=t.value.split(",").filter(t=>!!t.trim());a.length&&(a.forEach(t=>this.addTag(t.trim())),t.value="")}};async renderTags(){await this.updateComplete;const t=this.shadowRoot.getElementById("tags");t.innerHTML="",this.value&&this.value.split(",").forEach(a=>{const e=new Tag(a.trim(),this);t.appendChild(e)})}addTag(t){const a=new Set(this.value.split(",").filter(t=>!!t.trim()));a.add(t.trim()),this.value=[...a].filter(t=>!!t).join(","),this.dispatchEvent(new CustomEvent("addtag",{detail:{tag:t},bubbles:!0}))}removeTag(t){const a=new Set(this.value.split(",").filter(t=>!!t.trim()));a.delete(t),this.value=[...a].join(","),this.dispatchEvent(new CustomEvent("removetag",{detail:{tag:t},bubbles:!0}))}validateTags(){return this.value.split(",").map(t=>t.trim()).map(t=>{const a=new Set(this.allowedTags.split(",").filter(t=>!!t.trim()));if(a.size)return a.has(t)?t:"";const e=new Set(this.disallowedTags.split(",").filter(t=>!!t.trim()));return e.size&&e.has(t)?"":t}).filter(t=>!!t).join(",")}static styles=css`
+import{html,css}from"../lit-all.min.js";import ShadowComponent from"./ShadowComponent.js";export default class Tags extends ShadowComponent{static properties={value:{type:String,reflect:!0},allowedTags:{type:String,reflect:!0,attribute:"allowed-tags"},disallowedTags:{type:String,reflect:!0,attribute:"disallowed-tags"},disabled:{type:Boolean,reflect:!0}};constructor(){super(),this.value="",this.allowedTags="",this.disallowedTags="",this.disabled=!1}firstUpdated(){super.firstUpdated(),this.renderTags()}updated(t){if(super.updated(t),t.has("value")){const e=t.get("value"),a=this.validateTags();a!==this.value?this.value=a:(this.dispatchEvent(new CustomEvent("change",{detail:{oldValue:e,newValue:this.value},bubbles:!0})),this.renderTags())}if(t.has("allowedTags")||t.has("disallowedTags")){const e=t.get("allowedTags")||t.get("disallowedTags"),a=this.allowedTags||this.disallowedTags,s=this.validateTags();if(s!==this.value)this.value=s;else{const s=t.has("allowedTags")?"allowedtagschange":"disallowedtagschange";this.dispatchEvent(new CustomEvent(s,{detail:{oldValue:e,newValue:a},bubbles:!0})),this.renderTags()}}}handleInputChange=()=>{if(this.disabled)return;const t=this.shadowRoot.getElementById("tagsInput"),e=t.value.trim();e&&(this.addTag(e),t.value="")};handleInputInput=t=>{if(!this.disabled&&(","===t.data||"insertFromPaste"===t.inputType)){const t=this.shadowRoot.getElementById("tagsInput"),e=t.value.split(",").filter(t=>!!t.trim());e.length&&(e.forEach(t=>this.addTag(t.trim())),t.value="")}};async renderTags(){await this.updateComplete;const t=this.shadowRoot.getElementById("tags");t.innerHTML="",this.value&&this.value.split(",").forEach(e=>{const a=new Tag(e.trim(),this);t.appendChild(a)})}addTag(t){const e=new Set(this.value.split(",").filter(t=>!!t.trim()));e.add(t.trim()),this.value=[...e].filter(t=>!!t).join(","),this.dispatchEvent(new CustomEvent("addtag",{detail:{tag:t},bubbles:!0}))}removeTag(t){const e=new Set(this.value.split(",").filter(t=>!!t.trim()));e.delete(t),this.value=[...e].join(","),this.dispatchEvent(new CustomEvent("removetag",{detail:{tag:t},bubbles:!0}))}validateTags(){return this.value.split(",").map(t=>t.trim()).map(t=>{const e=new Set(this.allowedTags.split(",").filter(t=>!!t.trim()));if(e.size)return e.has(t)?t:"";const a=new Set(this.disallowedTags.split(",").filter(t=>!!t.trim()));return a.size&&a.has(t)?"":t}).filter(t=>!!t).join(",")}static styles=css`
 		:host {
 			display: block;
-
+		}
+		:host([disabled]) {
+			opacity: 0.5;
+			cursor: not-allowed;
+			pointer-events: none;
+		}
 		#tagsHolder {
 			display: flex;
 			flex-wrap: wrap;
@@ -46,13 +51,14 @@ import{html,css}from"../lit-all.min.js";import ShadowComponent from"./ShadowComp
 				<div id="tagsHolder">
 					<span id="tags"></span>
 					<input 
-						id="tagsInput" 
+						id="tagsInput"
+						?disabled=${this.disabled}
 						@change=${this.handleInputChange}
 						@input=${this.handleInputInput}
 					/>
 				</div>
 			</label>
-		`}}class Tag extends ShadowComponent{constructor(t,a){super(),this.tag=t,this.tagsComponent=a,this.innerHTML=t}handleClick=()=>{this.tagsComponent.removeTag(this.tag)};static styles=css`
+		`}}class Tag extends ShadowComponent{constructor(t,e){super(),this.tag=t,this.tagsComponent=e,this.innerHTML=t}handleClick=()=>{this.tagsComponent.disabled||this.tagsComponent.removeTag(this.tag)};static styles=css`
 		:host {
 			display: inline-block;
 			width: min-content;

package/docs/components/tags.html

@@ -24,6 +24,7 @@
           <a href="#basicUsage">Basic Usage</a><br />
           <a href="#allowedTags">Allowed Tags</a><br />
           <a href="#disallowedTags">Disallowed Tags</a><br />
+          <a href="#disabled">Disabled</a><br />
 
           <h6 class="mt"><a href="#jsRef" class="no-link">JavaScript Reference</a></h6>
           <a href="#constructor">Constructor</a><br />
@@ -98,6 +99,24 @@
 
 
 
+    <h3 id="disabled"><a href="#disabled" class="no-link">Disabled</a></h3>
+    <p>Use the <code>disabled</code> attribute to prevent the user from adding or removing tags while still displaying the current value.</p>
+    <div class="row -mx mb">
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-tags</span> <span class="hljs-attr">disabled</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;design,ui&quot;</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">label</span>&gt;</span>Tags<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">k-tags</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="Results">
+          <k-tags disabled value="design,ui">
+            <label>Tags</label>
+          </k-tags>
+        </k-card>
+      </div>
+    </div>
+
+
     <h2 id="jsRef"><a href="#jsRef" class="no-link">JavaScript Reference</a></h2>
 
     <h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
@@ -120,6 +139,8 @@
     <h5><code>disallowedTags<i>: string</i></code></h5>
     <p>A comma-separated list of disallowed tags. If specified, these tags cannot be added. Syncs with the
       <code>disallowed-tags</code> attribute.</p>
+    <h5><code>disabled<i>: boolean</i></code></h5>
+    <p>When <code>true</code>, prevents the user from adding or removing tags. The current value is still displayed. The element appears at 50% opacity. Syncs with the <code>disabled</code> attribute.</p>
 
     <h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
     <h5><code>addTag(tag)<i>: void</i></code></h5>

package/docs/src/components/Tags.js

@@ -1,7 +1,12 @@
-import{html,css}from"../lit-all.min.js";import ShadowComponent from"./ShadowComponent.js";export default class Tags extends ShadowComponent{static properties={value:{type:String,reflect:!0},allowedTags:{type:String,reflect:!0,attribute:"allowed-tags"},disallowedTags:{type:String,reflect:!0,attribute:"disallowed-tags"}};constructor(){super(),this.value="",this.allowedTags="",this.disallowedTags=""}firstUpdated(){super.firstUpdated(),this.renderTags()}updated(t){if(super.updated(t),t.has("value")){const a=t.get("value"),e=this.validateTags();e!==this.value?this.value=e:(this.dispatchEvent(new CustomEvent("change",{detail:{oldValue:a,newValue:this.value},bubbles:!0})),this.renderTags())}if(t.has("allowedTags")||t.has("disallowedTags")){const a=t.get("allowedTags")||t.get("disallowedTags"),e=this.allowedTags||this.disallowedTags,s=this.validateTags();if(s!==this.value)this.value=s;else{const s=t.has("allowedTags")?"allowedtagschange":"disallowedtagschange";this.dispatchEvent(new CustomEvent(s,{detail:{oldValue:a,newValue:e},bubbles:!0})),this.renderTags()}}}handleInputChange=()=>{const t=this.shadowRoot.getElementById("tagsInput"),a=t.value.trim();a&&(this.addTag(a),t.value="")};handleInputInput=t=>{if(","===t.data||"insertFromPaste"===t.inputType){const t=this.shadowRoot.getElementById("tagsInput"),a=t.value.split(",").filter(t=>!!t.trim());a.length&&(a.forEach(t=>this.addTag(t.trim())),t.value="")}};async renderTags(){await this.updateComplete;const t=this.shadowRoot.getElementById("tags");t.innerHTML="",this.value&&this.value.split(",").forEach(a=>{const e=new Tag(a.trim(),this);t.appendChild(e)})}addTag(t){const a=new Set(this.value.split(",").filter(t=>!!t.trim()));a.add(t.trim()),this.value=[...a].filter(t=>!!t).join(","),this.dispatchEvent(new CustomEvent("addtag",{detail:{tag:t},bubbles:!0}))}removeTag(t){const a=new Set(this.value.split(",").filter(t=>!!t.trim()));a.delete(t),this.value=[...a].join(","),this.dispatchEvent(new CustomEvent("removetag",{detail:{tag:t},bubbles:!0}))}validateTags(){return this.value.split(",").map(t=>t.trim()).map(t=>{const a=new Set(this.allowedTags.split(",").filter(t=>!!t.trim()));if(a.size)return a.has(t)?t:"";const e=new Set(this.disallowedTags.split(",").filter(t=>!!t.trim()));return e.size&&e.has(t)?"":t}).filter(t=>!!t).join(",")}static styles=css`
+import{html,css}from"../lit-all.min.js";import ShadowComponent from"./ShadowComponent.js";export default class Tags extends ShadowComponent{static properties={value:{type:String,reflect:!0},allowedTags:{type:String,reflect:!0,attribute:"allowed-tags"},disallowedTags:{type:String,reflect:!0,attribute:"disallowed-tags"},disabled:{type:Boolean,reflect:!0}};constructor(){super(),this.value="",this.allowedTags="",this.disallowedTags="",this.disabled=!1}firstUpdated(){super.firstUpdated(),this.renderTags()}updated(t){if(super.updated(t),t.has("value")){const e=t.get("value"),a=this.validateTags();a!==this.value?this.value=a:(this.dispatchEvent(new CustomEvent("change",{detail:{oldValue:e,newValue:this.value},bubbles:!0})),this.renderTags())}if(t.has("allowedTags")||t.has("disallowedTags")){const e=t.get("allowedTags")||t.get("disallowedTags"),a=this.allowedTags||this.disallowedTags,s=this.validateTags();if(s!==this.value)this.value=s;else{const s=t.has("allowedTags")?"allowedtagschange":"disallowedtagschange";this.dispatchEvent(new CustomEvent(s,{detail:{oldValue:e,newValue:a},bubbles:!0})),this.renderTags()}}}handleInputChange=()=>{if(this.disabled)return;const t=this.shadowRoot.getElementById("tagsInput"),e=t.value.trim();e&&(this.addTag(e),t.value="")};handleInputInput=t=>{if(!this.disabled&&(","===t.data||"insertFromPaste"===t.inputType)){const t=this.shadowRoot.getElementById("tagsInput"),e=t.value.split(",").filter(t=>!!t.trim());e.length&&(e.forEach(t=>this.addTag(t.trim())),t.value="")}};async renderTags(){await this.updateComplete;const t=this.shadowRoot.getElementById("tags");t.innerHTML="",this.value&&this.value.split(",").forEach(e=>{const a=new Tag(e.trim(),this);t.appendChild(a)})}addTag(t){const e=new Set(this.value.split(",").filter(t=>!!t.trim()));e.add(t.trim()),this.value=[...e].filter(t=>!!t).join(","),this.dispatchEvent(new CustomEvent("addtag",{detail:{tag:t},bubbles:!0}))}removeTag(t){const e=new Set(this.value.split(",").filter(t=>!!t.trim()));e.delete(t),this.value=[...e].join(","),this.dispatchEvent(new CustomEvent("removetag",{detail:{tag:t},bubbles:!0}))}validateTags(){return this.value.split(",").map(t=>t.trim()).map(t=>{const e=new Set(this.allowedTags.split(",").filter(t=>!!t.trim()));if(e.size)return e.has(t)?t:"";const a=new Set(this.disallowedTags.split(",").filter(t=>!!t.trim()));return a.size&&a.has(t)?"":t}).filter(t=>!!t).join(",")}static styles=css`
 		:host {
 			display: block;
-
+		}
+		:host([disabled]) {
+			opacity: 0.5;
+			cursor: not-allowed;
+			pointer-events: none;
+		}
 		#tagsHolder {
 			display: flex;
 			flex-wrap: wrap;
@@ -46,13 +51,14 @@ import{html,css}from"../lit-all.min.js";import ShadowComponent from"./ShadowComp
 				<div id="tagsHolder">
 					<span id="tags"></span>
 					<input 
-						id="tagsInput" 
+						id="tagsInput"
+						?disabled=${this.disabled}
 						@change=${this.handleInputChange}
 						@input=${this.handleInputInput}
 					/>
 				</div>
 			</label>
-		`}}class Tag extends ShadowComponent{constructor(t,a){super(),this.tag=t,this.tagsComponent=a,this.innerHTML=t}handleClick=()=>{this.tagsComponent.removeTag(this.tag)};static styles=css`
+		`}}class Tag extends ShadowComponent{constructor(t,e){super(),this.tag=t,this.tagsComponent=e,this.innerHTML=t}handleClick=()=>{this.tagsComponent.disabled||this.tagsComponent.removeTag(this.tag)};static styles=css`
 		:host {
 			display: inline-block;
 			width: min-content;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kempo-ui",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "type": "module",
   "description": "A Lit based web-component library",
   "main": "index.js",
@@ -13,7 +13,7 @@
   "scripts": {
     "build": "node scripts/build.js",
     "prod": "node scripts/docs.js",
-    "dev": "node scripts/docs.js --src --logging silent",
+    "dev": "node scripts/docs.js --src --port 9875",
     "icon": "node bin/icon.js",
     "geticon": "node bin/get_icon.js",
     "listicons": "node bin/list_icons.js",

package/src/components/Tags.js

@@ -8,7 +8,8 @@ export default class Tags extends ShadowComponent {
 	static properties = {
 		value: { type: String, reflect: true },
 		allowedTags: { type: String, reflect: true, attribute: 'allowed-tags' },
-		disallowedTags: { type: String, reflect: true, attribute: 'disallowed-tags' }
+		disallowedTags: { type: String, reflect: true, attribute: 'disallowed-tags' },
+		disabled: { type: Boolean, reflect: true }
 	};
 
 	constructor() {
@@ -16,6 +17,7 @@ export default class Tags extends ShadowComponent {
 		this.value = '';
 		this.allowedTags = '';
 		this.disallowedTags = '';
+		this.disabled = false;
 	}
 
 	/*
@@ -64,6 +66,7 @@ export default class Tags extends ShadowComponent {
 		Event Handlers
 	*/
 	handleInputChange = () => {
+		if(this.disabled) return;
 		const tagsInput = this.shadowRoot.getElementById('tagsInput');
 		const tag = tagsInput.value.trim();
 		if(tag) {
@@ -73,6 +76,7 @@ export default class Tags extends ShadowComponent {
 	};
 
 	handleInputInput = (event) => {
+		if(this.disabled) return;
 		if(event.data === ',' || event.inputType === 'insertFromPaste') {
 			const tagsInput = this.shadowRoot.getElementById('tagsInput');
 			const tags = tagsInput.value.split(',').filter(tag => !!tag.trim());
@@ -140,7 +144,12 @@ export default class Tags extends ShadowComponent {
 	static styles = css`
 		:host {
 			display: block;
-
+		}
+		:host([disabled]) {
+			opacity: 0.5;
+			cursor: not-allowed;
+			pointer-events: none;
+		}
 		#tagsHolder {
 			display: flex;
 			flex-wrap: wrap;
@@ -191,7 +200,8 @@ export default class Tags extends ShadowComponent {
 				<div id="tagsHolder">
 					<span id="tags"></span>
 					<input 
-						id="tagsInput" 
+						id="tagsInput"
+						?disabled=${this.disabled}
 						@change=${this.handleInputChange}
 						@input=${this.handleInputInput}
 					/>
@@ -216,6 +226,7 @@ class Tag extends ShadowComponent {
 		Event Handlers
 	*/
 	handleClick = () => {
+		if(this.tagsComponent.disabled) return;
 		this.tagsComponent.removeTag(this.tag);
 	};
 

package/tests/components/Tags.browser-test.js

@@ -600,5 +600,110 @@ export default {
 
 		cleanup(container);
 		pass('Whitespace-only tags not added');
+	},
+
+	/*
+		Disabled
+	*/
+	'disabled should default to false': async ({pass, fail}) => {
+		const { container, tags } = await createTags();
+		if(tags.disabled !== false){
+			cleanup(container);
+			return fail(`Expected disabled to be false, got ${tags.disabled}`);
+		}
+		cleanup(container);
+		pass('disabled defaults to false');
+	},
+
+	'should reflect disabled attribute': async ({pass, fail}) => {
+		const container = document.createElement('div');
+		container.innerHTML = '<k-tags disabled></k-tags>';
+		document.body.appendChild(container);
+		const tags = container.querySelector('k-tags');
+		await tags.updateComplete;
+		if(!tags.hasAttribute('disabled')){
+			cleanup(container);
+			return fail('Tags should have disabled attribute');
+		}
+		if(tags.disabled !== true){
+			cleanup(container);
+			return fail(`Expected disabled property to be true, got ${tags.disabled}`);
+		}
+		cleanup(container);
+		pass('disabled attribute reflects correctly');
+	},
+
+	'input change should not add tag when disabled': async ({pass, fail}) => {
+		const container = document.createElement('div');
+		container.innerHTML = '<k-tags disabled></k-tags>';
+		document.body.appendChild(container);
+		const tags = container.querySelector('k-tags');
+		await tags.updateComplete;
+		const input = tags.shadowRoot.getElementById('tagsInput');
+		input.value = 'newtag';
+		input.dispatchEvent(new Event('change'));
+		await tags.updateComplete;
+		if(tags.value !== ''){
+			cleanup(container);
+			return fail(`Expected value to remain empty when disabled, got "${tags.value}"`);
+		}
+		cleanup(container);
+		pass('Input change does not add tag when disabled');
+	},
+
+	'input event should not add tag when disabled': async ({pass, fail}) => {
+		const container = document.createElement('div');
+		container.innerHTML = '<k-tags disabled></k-tags>';
+		document.body.appendChild(container);
+		const tags = container.querySelector('k-tags');
+		await tags.updateComplete;
+		const input = tags.shadowRoot.getElementById('tagsInput');
+		input.value = 'tag1,tag2,';
+		input.dispatchEvent(new InputEvent('input', { data: ',' }));
+		await tags.updateComplete;
+		if(tags.value !== ''){
+			cleanup(container);
+			return fail(`Expected value to remain empty when disabled, got "${tags.value}"`);
+		}
+		cleanup(container);
+		pass('Input event does not add tag when disabled');
+	},
+
+	'clicking tag should not remove it when disabled': async ({pass, fail}) => {
+		const container = document.createElement('div');
+		container.innerHTML = '<k-tags disabled value="design,ui"></k-tags>';
+		document.body.appendChild(container);
+		const tags = container.querySelector('k-tags');
+		await tags.updateComplete;
+		await new Promise(r => setTimeout(r, 50));
+		const tagEl = tags.shadowRoot.getElementById('tags').querySelector('k-tag');
+		if(!tagEl){
+			cleanup(container);
+			return fail('Expected a k-tag element to be rendered');
+		}
+		const span = tagEl.shadowRoot.querySelector('span');
+		span.click();
+		await tags.updateComplete;
+		if(!tags.value.includes('design') || !tags.value.includes('ui')){
+			cleanup(container);
+			return fail(`Tags should not be removed when disabled, got "${tags.value}"`);
+		}
+		cleanup(container);
+		pass('Clicking tag does not remove it when disabled');
+	},
+
+	'input should be disabled when disabled attribute is set': async ({pass, fail}) => {
+		const container = document.createElement('div');
+		container.innerHTML = '<k-tags disabled></k-tags>';
+		document.body.appendChild(container);
+		const tags = container.querySelector('k-tags');
+		await tags.updateComplete;
+		const input = tags.shadowRoot.getElementById('tagsInput');
+		if(!input.disabled){
+			cleanup(container);
+			return fail('Input should be disabled when Tags is disabled');
+		}
+		cleanup(container);
+		pass('Input is disabled when Tags is disabled');
 	}
 };