revotech-ui-kit 0.0.20-2 → 0.0.20-3
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/revotech-ui-kit.js +9 -18
- package/dist/revotech-ui-kit.umd.cjs +9 -18
- package/package.json +1 -1
package/dist/revotech-ui-kit.js
CHANGED
|
@@ -6724,7 +6724,7 @@ var Li = Object.defineProperty, Mi = Object.getOwnPropertyDescriptor, ue = (e, t
|
|
|
6724
6724
|
};
|
|
6725
6725
|
let R = class extends h {
|
|
6726
6726
|
constructor() {
|
|
6727
|
-
super(...arguments), this.isOpen = !
|
|
6727
|
+
super(...arguments), this.isOpen = !1, this.selectedValue = "", this.searchTerm = "", this.focusedIndex = -1, this.filteredItems = [], this.label = "Select an item", this.items = [];
|
|
6728
6728
|
}
|
|
6729
6729
|
firstUpdated(e) {
|
|
6730
6730
|
console.log("this. items", this.items), this.items && this.items.length > 0 && (this.filteredItems = this.items.filter(
|
|
@@ -6810,23 +6810,14 @@ let R = class extends h {
|
|
|
6810
6810
|
<div class="relative" data-hs-combo-box="">
|
|
6811
6811
|
isopen:${this.isOpen}
|
|
6812
6812
|
<div>
|
|
6813
|
-
<input
|
|
6814
|
-
|
|
6815
|
-
|
|
6816
|
-
|
|
6817
|
-
|
|
6818
|
-
|
|
6819
|
-
|
|
6820
|
-
|
|
6821
|
-
hover:text-accent-foreground
|
|
6822
|
-
outline-none"
|
|
6823
|
-
role="combobox"
|
|
6824
|
-
aria-expanded=${this.isOpen}
|
|
6825
|
-
readonly
|
|
6826
|
-
.value=${this.selectedValue || this.label}
|
|
6827
|
-
@click="${this.handleInputClick}"
|
|
6828
|
-
@keydown="${this.handleKeyDown}"
|
|
6829
|
-
/>
|
|
6813
|
+
<input part="combobox" class="inline-flex justify-between items-center
|
|
6814
|
+
w-full h-10 px-4 py-2 whitespace-nowrap rounded-md text-sm font-medium
|
|
6815
|
+
border border-input cursor-pointer ring-offset-background
|
|
6816
|
+
transition-colors disabled:pointer-events-none disabled:opacity-50
|
|
6817
|
+
bg-background hover:bg-accent hover:text-accent-foreground
|
|
6818
|
+
outline-none" role="combobox" aria-expanded=${this.isOpen} readonly
|
|
6819
|
+
.value=${this.selectedValue || this.label} //
|
|
6820
|
+
@click="${this.handleInputClick}" @keydown="${this.handleKeyDown}" />
|
|
6830
6821
|
<div
|
|
6831
6822
|
class="absolute top-1/2 end-3 -translate-y-1/2 cursor-pointer"
|
|
6832
6823
|
aria-expanded=${this.isOpen}
|
|
@@ -3138,27 +3138,18 @@ body {
|
|
|
3138
3138
|
</div>
|
|
3139
3139
|
<slot></slot>
|
|
3140
3140
|
</div>
|
|
3141
|
-
`}};be.styles=[l.css``,c],We([d.property({attribute:"data-state",type:String})],be.prototype,"state",2),We([d.state()],be.prototype,"isOpen",2),be=We([d.customElement("rtg-combo-box-list")],be);var In=Object.defineProperty,An=Object.getOwnPropertyDescriptor,U=(n,e,r,o)=>{for(var t=o>1?void 0:o?An(e,r):e,s=n.length-1,i;s>=0;s--)(i=n[s])&&(t=(o?i(e,r,t):i(t))||t);return o&&t&&In(e,r,t),t};a.ComboBox=class extends l.LitElement{constructor(){super(...arguments),this.isOpen=!
|
|
3141
|
+
`}};be.styles=[l.css``,c],We([d.property({attribute:"data-state",type:String})],be.prototype,"state",2),We([d.state()],be.prototype,"isOpen",2),be=We([d.customElement("rtg-combo-box-list")],be);var In=Object.defineProperty,An=Object.getOwnPropertyDescriptor,U=(n,e,r,o)=>{for(var t=o>1?void 0:o?An(e,r):e,s=n.length-1,i;s>=0;s--)(i=n[s])&&(t=(o?i(e,r,t):i(t))||t);return o&&t&&In(e,r,t),t};a.ComboBox=class extends l.LitElement{constructor(){super(...arguments),this.isOpen=!1,this.selectedValue="",this.searchTerm="",this.focusedIndex=-1,this.filteredItems=[],this.label="Select an item",this.items=[]}firstUpdated(e){console.log("this. items",this.items),this.items&&this.items.length>0&&(this.filteredItems=this.items.filter(r=>r.toLowerCase().includes(this.searchTerm)))}toggleDropdown(){this.isOpen=!this.isOpen,this.focusedIndex=-1,this.requestUpdate(),console.log("toggleDropdown",this.isOpen)}selectItem(e){const r=e.target;if(r instanceof HTMLElement){const o=r.closest("rtg-combo-box-item");o?(this.selectedValue=o.getAttribute("data-hs-combo-box-value")||"",this.isOpen=!1):console.log("No valid rtg-combo-box-item found")}else console.log("Event target is not an HTMLElement")}handleInputClick(){console.log("-----handleInputClick------"),this.toggleDropdown()}handleSearch(e){const r=e.target;this.searchTerm=r.value,this.filteredItems=this.items.filter(o=>o.toLowerCase().includes(this.searchTerm.toLowerCase()))}handleKeyDown(e){const r=this.filteredItems.length;switch(e.key){case"ArrowDown":e.preventDefault(),this.focusedIndex=(this.focusedIndex+1)%r;break;case"ArrowUp":e.preventDefault(),this.focusedIndex=(this.focusedIndex-1+r)%r;break;case"Enter":this.focusedIndex>=0&&this.focusedIndex<r&&(this.selectedValue=this.filteredItems[this.focusedIndex],this.isOpen=!1);break}}handleMouseOver(e,r){e.preventDefault(),this.focusedIndex=r}connectedCallback(){var e,r,o,t;super.connectedCallback(),console.log("connectedCallback"),document.addEventListener("click",this.handleClickOutside.bind(this)),console.log("connectedCallback click"),(r=(e=this.shadowRoot)==null?void 0:e.querySelector("input"))==null||r.addEventListener("focus",()=>{this.isOpen=!0,console.log("connectedCallback focus",this.isOpen)}),(t=(o=this.shadowRoot)==null?void 0:o.querySelector("input"))==null||t.addEventListener("blur",()=>{this.isOpen&&(this.isOpen=!1,console.log("connectedCallback blur",this.isOpen))})}disconnectedCallback(){var e,r,o,t;super.disconnectedCallback(),document.removeEventListener("click",this.handleClickOutside),(r=(e=this.shadowRoot)==null?void 0:e.querySelector("input"))==null||r.removeEventListener("focus",()=>{}),(t=(o=this.shadowRoot)==null?void 0:o.querySelector("input"))==null||t.removeEventListener("blur",()=>{})}handleClickOutside(e){var s,i;const r=e.target,o=(s=this.shadowRoot)==null?void 0:s.querySelector("[data-hs-combo-box]");if(!this.shadowRoot||!(r instanceof HTMLElement)){console.log("Invalid target or shadow root");return}const t=(i=r.shadowRoot)==null?void 0:i.firstElementChild;if(!t){this.isOpen=!1;return}(!o||!o.contains(t))&&(this.isOpen=!1)}updateFocus(){if(!this.shadowRoot)return;this.shadowRoot.querySelectorAll("rtg-combo-box-item").forEach((r,o)=>{o===this.focusedIndex?r.classList.add("bg-gray-100"):r.classList.remove("bg-gray-100")})}render(){return console.log("render ",this.isOpen),l.html`
|
|
3142
3142
|
<div class="relative" data-hs-combo-box="">
|
|
3143
3143
|
isopen:${this.isOpen}
|
|
3144
3144
|
<div>
|
|
3145
|
-
<input
|
|
3146
|
-
|
|
3147
|
-
|
|
3148
|
-
|
|
3149
|
-
|
|
3150
|
-
|
|
3151
|
-
|
|
3152
|
-
|
|
3153
|
-
hover:text-accent-foreground
|
|
3154
|
-
outline-none"
|
|
3155
|
-
role="combobox"
|
|
3156
|
-
aria-expanded=${this.isOpen}
|
|
3157
|
-
readonly
|
|
3158
|
-
.value=${this.selectedValue||this.label}
|
|
3159
|
-
@click="${this.handleInputClick}"
|
|
3160
|
-
@keydown="${this.handleKeyDown}"
|
|
3161
|
-
/>
|
|
3145
|
+
<input part="combobox" class="inline-flex justify-between items-center
|
|
3146
|
+
w-full h-10 px-4 py-2 whitespace-nowrap rounded-md text-sm font-medium
|
|
3147
|
+
border border-input cursor-pointer ring-offset-background
|
|
3148
|
+
transition-colors disabled:pointer-events-none disabled:opacity-50
|
|
3149
|
+
bg-background hover:bg-accent hover:text-accent-foreground
|
|
3150
|
+
outline-none" role="combobox" aria-expanded=${this.isOpen} readonly
|
|
3151
|
+
.value=${this.selectedValue||this.label} //
|
|
3152
|
+
@click="${this.handleInputClick}" @keydown="${this.handleKeyDown}" />
|
|
3162
3153
|
<div
|
|
3163
3154
|
class="absolute top-1/2 end-3 -translate-y-1/2 cursor-pointer"
|
|
3164
3155
|
aria-expanded=${this.isOpen}
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"description": "Webcomponent wc-ui following open-wc recommendations",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"author": "wc-ui",
|
|
6
|
-
"version": "0.0.20-
|
|
6
|
+
"version": "0.0.20-003",
|
|
7
7
|
"type": "module",
|
|
8
8
|
"main": "dist/revotech-ui-kit.umd.cjs",
|
|
9
9
|
"module": "./dist/revotech-ui-kit.js",
|