@florid-kit/components 0.5.0 → 0.5.1

package/components/dropdown.d.ts

@@ -5,6 +5,8 @@ export declare class OccitaneDropdown extends LitElement {
     options: {
         value: string;
         label: string;
+        disabled?: boolean;
+        url?: string;
     }[];
     value: string;
     name: string;
@@ -20,6 +22,7 @@ export declare class OccitaneDropdown extends LitElement {
     selectOption(option: {
         value: string;
         label: string;
+        url?: string;
     }): void;
     handleKeydown(e: KeyboardEvent): void;
     updated(changedProperties: Map<string, unknown>): void;

package/index.js

@@ -1221,7 +1221,7 @@
     border-color: transparent var(--color-alpha-dark-strongest) transparent transparent;
   }
       
-  `;xt([a({type:String,reflect:!0})],J.prototype,"type",2);xt([a({type:String,reflect:!0})],J.prototype,"text",2);J=xt([_("o-tooltip")],J);var Je=Object.defineProperty,Ye=Object.getOwnPropertyDescriptor,E=(o,t,e,i)=>{for(var n=i>1?void 0:i?Ye(t,e):t,r=o.length-1,s;r>=0;r--)(s=o[r])&&(n=(i?s(t,e,n):s(n))||n);return i&&n&&Je(t,e,n),n};let x=class extends m{constructor(){super(...arguments),this.options=[],this.value="",this.name="",this.disabled=!1,this.width="100%",this.open=!1,this.activeIndex=-1,this._handleOutsideClick=o=>{this.contains(o.target)||(this.open=!1,this.activeIndex=-1)},this.menuWidth=""}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this._handleOutsideClick)}disconnectedCallback(){document.removeEventListener("click",this._handleOutsideClick),super.disconnectedCallback()}toggle(){var o;if(!this.disabled&&(this.open=!this.open,this.activeIndex=this.open?this.options.findIndex(t=>t.value===this.value):-1,this.open&&this.width==="auto")){const t=(o=this.renderRoot)==null?void 0:o.querySelector("button");t&&(this.menuWidth=`${t.getBoundingClientRect().width}px`)}}selectOption(o){this.value=o.value,this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value}}))}handleKeydown(o){if(this.disabled){o.preventDefault();return}if(!this.open){(o.key==="ArrowDown"||o.key==="ArrowUp")&&(o.preventDefault(),this.open=!0,this.activeIndex=this.options.findIndex(t=>t.value===this.value));return}switch(o.key){case"ArrowDown":o.preventDefault(),this.activeIndex=(this.activeIndex+1)%this.options.length;break;case"ArrowUp":o.preventDefault(),this.activeIndex=(this.activeIndex-1+this.options.length)%this.options.length;break;case"Enter":o.preventDefault(),this.activeIndex>=0&&this.selectOption(this.options[this.activeIndex]);break;case"Escape":o.preventDefault(),this.open=!1,this.activeIndex=-1;break}}updated(o){this.options.length>0&&(this.options.some(e=>e.value===this.value)||(this.value=this.options[0].value))}render(){const o=Q.checkstroke.replace("<svg",'<svg aria-hidden="true" focusable="false" part="svg"'),t=this.options.find(e=>e.value===this.value);return h`
+  `;xt([a({type:String,reflect:!0})],J.prototype,"type",2);xt([a({type:String,reflect:!0})],J.prototype,"text",2);J=xt([_("o-tooltip")],J);var Je=Object.defineProperty,Ye=Object.getOwnPropertyDescriptor,E=(o,t,e,i)=>{for(var n=i>1?void 0:i?Ye(t,e):t,r=o.length-1,s;r>=0;r--)(s=o[r])&&(n=(i?s(t,e,n):s(n))||n);return i&&n&&Je(t,e,n),n};let x=class extends m{constructor(){super(...arguments),this.options=[],this.value="",this.name="",this.disabled=!1,this.width="100%",this.open=!1,this.activeIndex=-1,this._handleOutsideClick=o=>{this.contains(o.target)||(this.open=!1,this.activeIndex=-1)},this.menuWidth=""}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this._handleOutsideClick)}disconnectedCallback(){document.removeEventListener("click",this._handleOutsideClick),super.disconnectedCallback()}toggle(){var o;if(!this.disabled&&(this.open=!this.open,this.activeIndex=this.open?this.options.findIndex(t=>t.value===this.value):-1,this.open&&this.width==="auto")){const t=(o=this.renderRoot)==null?void 0:o.querySelector("button");t&&(this.menuWidth=`${t.getBoundingClientRect().width}px`)}}selectOption(o){this.value=o.value,this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value,url:o.url}}))}handleKeydown(o){if(this.disabled){o.preventDefault();return}if(!this.open){(o.key==="ArrowDown"||o.key==="ArrowUp")&&(o.preventDefault(),this.open=!0,this.activeIndex=this.options.findIndex(t=>t.value===this.value));return}switch(o.key){case"ArrowDown":o.preventDefault(),this.activeIndex=(this.activeIndex+1)%this.options.length;break;case"ArrowUp":o.preventDefault(),this.activeIndex=(this.activeIndex-1+this.options.length)%this.options.length;break;case"Enter":o.preventDefault(),this.activeIndex>=0&&this.selectOption(this.options[this.activeIndex]);break;case"Escape":o.preventDefault(),this.open=!1,this.activeIndex=-1;break}}updated(o){this.options.length>0&&(this.options.some(e=>e.value===this.value)||(this.value=this.options[0].value))}render(){const o=Q.checkstroke.replace("<svg",'<svg aria-hidden="true" focusable="false" part="svg"'),t=this.options.find(e=>e.value===this.value);return h`
       <button
         @click=${this.toggle}
         @keydown=${this.handleKeydown}
@@ -1242,8 +1242,8 @@
                 <li
                   role="option"
                   aria-selected="${e.value===this.value}"
-                  class="${i===this.activeIndex?"active":""}"
-                  @click=${()=>this.selectOption(e)}
+                  class="${i===this.activeIndex?"active":""} ${e.disabled?"disabled":""}"
+                  @click=${()=>!e.disabled&&this.selectOption(e)}
                 >
                   <span>${e.label}</span>
                   ${e.value===this.value?h`<span class="check">${N(o)}</span>`:null}
@@ -1290,6 +1290,7 @@
 
 			&:disabled {
 				background-color: var(--color-container-disabled);
+        pointer-events: none;
 			}
 		}
 
@@ -1316,11 +1317,16 @@
 			cursor: pointer;
 			border-bottom: var(--border-s) solid var(--color-border-tertiary);
 
-			&:hover {
+      &.disabled {
+        background-color: var(--color-container-disabled);
+        pointer-events: none;
+      }
+
+			&:hover:not(.disabled) {
 				background-color: var(--color-container-action-secondary-hover);
 			}
 
-			&:active {
+			&:active:not(.disabled) {
 				background-color: var(--color-container-action-secondary-pressed);
 			}
 

package/index.mjs

@@ -2404,7 +2404,7 @@ let x = class extends m {
     }
   }
   selectOption(o) {
-    this.value = o.value, this.dispatchEvent(new CustomEvent("change", { detail: { value: this.value } }));
+    this.value = o.value, this.dispatchEvent(new CustomEvent("change", { detail: { value: this.value, url: o.url } }));
   }
   handleKeydown(o) {
     if (this.disabled) {
@@ -2460,8 +2460,8 @@ let x = class extends m {
                 <li
                   role="option"
                   aria-selected="${e.value === this.value}"
-                  class="${i === this.activeIndex ? "active" : ""}"
-                  @click=${() => this.selectOption(e)}
+                  class="${i === this.activeIndex ? "active" : ""} ${e.disabled ? "disabled" : ""}"
+                  @click=${() => !e.disabled && this.selectOption(e)}
                 >
                   <span>${e.label}</span>
                   ${e.value === this.value ? h`<span class="check">${N(o)}</span>` : null}
@@ -2512,6 +2512,7 @@ x.styles = w`
 
 			&:disabled {
 				background-color: var(--color-container-disabled);
+        pointer-events: none;
 			}
 		}
 
@@ -2538,11 +2539,16 @@ x.styles = w`
 			cursor: pointer;
 			border-bottom: var(--border-s) solid var(--color-border-tertiary);
 
-			&:hover {
+      &.disabled {
+        background-color: var(--color-container-disabled);
+        pointer-events: none;
+      }
+
+			&:hover:not(.disabled) {
 				background-color: var(--color-container-action-secondary-hover);
 			}
 
-			&:active {
+			&:active:not(.disabled) {
 				background-color: var(--color-container-action-secondary-pressed);
 			}
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@florid-kit/components",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "main": "index.js",
   "module": "index.mjs",
   "typings": "index.d.ts",