@nuralyui/dropdown 0.0.5 → 0.0.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/dropdown.types.d.ts +1 -0
  2. package/dropdown.types.d.ts.map +1 -1
  3. package/dropdown.types.js.map +1 -1
  4. package/hy-dropdown.component.d.ts +2 -2
  5. package/hy-dropdown.component.d.ts.map +1 -1
  6. package/hy-dropdown.component.js +25 -28
  7. package/hy-dropdown.component.js.map +1 -1
  8. package/hy-dropdown.style.js +1 -1
  9. package/hy-dropdown.style.js.map +1 -1
  10. package/package.json +1 -1
  11. package/templates/hy-dropdown-item.d.ts +1 -0
  12. package/templates/hy-dropdown-item.d.ts.map +1 -1
  13. package/templates/hy-dropdown-item.js +17 -3
  14. package/templates/hy-dropdown-item.js.map +1 -1
package/dropdown.types.d.ts CHANGED
@@ -4,6 +4,7 @@ export interface IOption {
4
4
  disabled?: boolean;
5
5
  icon?: string;
6
6
  children?: IOption[];
7
+ additionalData?: any;
7
8
  }
8
9
  export declare const enum TriggerMode {
9
10
  Click = "click",
package/dropdown.types.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"dropdown.types.d.ts","sourceRoot":"","sources":["../../../src/components/dropdown/dropdown.types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,OAAO;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAC;CACtB;AAED,0BAAkB,WAAW;IAC3B,KAAK,UAAU;IACf,KAAK,UAAU;CAChB;AACD,0BAAkB,iBAAiB;IACjC,KAAK,UAAU;IACf,IAAI,SAAS;CACd"}
1
+ {"version":3,"file":"dropdown.types.d.ts","sourceRoot":"","sources":["../../../src/components/dropdown/dropdown.types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,OAAO;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAC;IACrB,cAAc,CAAC,EAAE,GAAG,CAAC;CACtB;AAED,0BAAkB,WAAW;IAC3B,KAAK,UAAU;IACf,KAAK,UAAU;CAChB;AACD,0BAAkB,iBAAiB;IACjC,KAAK,UAAU;IACf,IAAI,SAAS;CACd"}
package/dropdown.types.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"dropdown.types.js","sourceRoot":"","sources":["../../../src/components/dropdown/dropdown.types.ts"],"names":[],"mappings":"","sourcesContent":["export interface IOption {\n label: string;\n value?: string;\n disabled?: boolean;\n icon?: string;\n children?: IOption[];\n}\n\nexport const enum TriggerMode {\n Click = 'click',\n Hover = 'hover',\n}\nexport const enum DropDownDirection {\n Right = 'right',\n Left = 'left',\n}\n"]}
1
+ {"version":3,"file":"dropdown.types.js","sourceRoot":"","sources":["../../../src/components/dropdown/dropdown.types.ts"],"names":[],"mappings":"","sourcesContent":["export interface IOption {\n label: string;\n value?: string;\n disabled?: boolean;\n icon?: string;\n children?: IOption[];\n additionalData?: any;\n}\n\nexport const enum TriggerMode {\n Click = 'click',\n Hover = 'hover',\n}\nexport const enum DropDownDirection {\n Right = 'right',\n Left = 'left',\n}\n"]}
package/hy-dropdown.component.d.ts CHANGED
@@ -17,14 +17,14 @@ export declare class HyDropdownComponent extends LitElement {
17
17
  onTriggerClick: () => Promise<void>;
18
18
  calculatePosition: () => void;
19
19
  initPosition(): void;
20
- onClickOutside: (onClickEvent: Event) => void;
20
+ onClickOutside: (event: Event) => void;
21
21
  onMouseEnterTriggerElement: () => Promise<void>;
22
22
  onMouseLeaveTriggerElement: () => void;
23
23
  onMouseEnterDropDown: () => void;
24
24
  onMouseLeaveDropDown: () => void;
25
25
  onOptionClick(): void;
26
26
  disconnectedCallback(): void;
27
- display(options: IOption[]): any;
27
+ display(options: IOption[]): TemplateResult[];
28
28
  render(): TemplateResult<1>;
29
29
  }
30
30
  //# sourceMappingURL=hy-dropdown.component.d.ts.map
package/hy-dropdown.component.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"hy-dropdown.component.d.ts","sourceRoot":"","sources":["../../../src/components/dropdown/hy-dropdown.component.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,UAAU,EAAE,cAAc,EAAgB,MAAM,KAAK,CAAC;AAG9D,OAAO,EAAC,iBAAiB,EAAE,OAAO,EAAE,WAAW,EAAC,MAAM,kBAAkB,CAAC;AACzE,OAAO,iCAAiC,CAAC;AACzC,OAAO,iCAAiC,CAAC;AAEzC,qBACa,mBAAoB,SAAQ,UAAU;IACjD,OAAgB,MAAM,0BAAU;IAEhC,cAAc,EAAG,WAAW,CAAC;IAE7B,iBAAiB,EAAG,WAAW,CAAC;IAEhC,OAAO,EAAG,OAAO,EAAE,CAAC;IAEpB,IAAI,UAAS;IAEb,OAAO,cAAqB;IAE5B,QAAQ,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC;IAG5B,MAAM,UAAS;IAIf,iBAAiB,UAAS;IAE1B,iBAAiB,oBAA2B;IAEnC,YAAY,IAAI,IAAI;IAa7B,cAAc,sBAIZ;IACF,iBAAiB,aAoBf;IACF,YAAY;IAKZ,cAAc,iBAAiB,KAAK,UAMlC;IACF,0BAA0B,sBAIxB;IACF,0BAA0B,aAKxB;IACF,oBAAoB,aAElB;IACF,oBAAoB,aAIlB;IACF,aAAa;IAIJ,oBAAoB;IAc7B,OAAO,CAAC,OAAO,EAAE,OAAO,EAAE,GAAG,GAAG;IAsBvB,MAAM;CAQhB"}
1
+ {"version":3,"file":"hy-dropdown.component.d.ts","sourceRoot":"","sources":["../../../src/components/dropdown/hy-dropdown.component.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,cAAc,EAAiB,MAAM,KAAK,CAAC;AAGhE,OAAO,EAAE,iBAAiB,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC3E,OAAO,iCAAiC,CAAC;AACzC,OAAO,iCAAiC,CAAC;AAEzC,qBACa,mBAAoB,SAAQ,UAAU;IACjD,OAAgB,MAAM,0BAAU;IAEjB,cAAc,EAAG,WAAW,CAAC;IACd,iBAAiB,EAAG,WAAW,CAAC;IAEnC,OAAO,EAAG,OAAO,EAAE,CAAC;IACH,IAAI,UAAS;IAC7C,OAAO,cAAqB;IACZ,QAAQ,EAAG,cAAc,CAAC,CAAC,CAAC,CAAC;IACb,MAAM,UAAS;IAElD,iBAAiB,UAAS;IAC1B,iBAAiB,oBAA2B;IAE5C,YAAY,IAAI,IAAI;IAe7B,cAAc,sBAIZ;IAEF,iBAAiB,aAqBf;IAEF,YAAY;IAMZ,cAAc,UAAW,KAAK,UAM5B;IAEF,0BAA0B,sBAIxB;IAEF,0BAA0B,aAKxB;IAEF,oBAAoB,aAElB;IAEF,oBAAoB,aAIlB;IAEF,aAAa;IAIJ,oBAAoB;IAe7B,OAAO,CAAC,OAAO,EAAE,OAAO,EAAE,GAAG,cAAc,EAAE;IAyBpC,MAAM;CAQhB"}
package/hy-dropdown.component.js CHANGED
@@ -44,9 +44,6 @@ let HyDropdownComponent = class HyDropdownComponent extends LitElement {
44
44
  if (dropDownHeight > availableBottomSpace) {
45
45
  this.dropDownContainer.style.top = `${triggerClientRect.top - dropDownHeight}px`;
46
46
  }
47
- else {
48
- //this.dropDownContainer.style.top = `${triggerClientRect.top +triggerClientRect.height+8}px`;
49
- }
50
47
  if (dropDownWidth > availableRightSpace && dropDownWidth < availableLeftSpace) {
51
48
  this.dropDownContainer.style.right = `${availableRightSpace}px`;
52
49
  this.dropDownDirection = "left" /* DropDownDirection.Left */;
@@ -56,8 +53,8 @@ let HyDropdownComponent = class HyDropdownComponent extends LitElement {
56
53
  this.dropDownContainer.style.removeProperty('right');
57
54
  }
58
55
  };
59
- this.onClickOutside = (onClickEvent) => {
60
- const outsideClick = !onClickEvent.composedPath().includes(this);
56
+ this.onClickOutside = (event) => {
57
+ const outsideClick = !event.composedPath().includes(this);
61
58
  if (outsideClick && this.show && !this.always) {
62
59
  this.show = false;
63
60
  this.initPosition();
@@ -87,7 +84,7 @@ let HyDropdownComponent = class HyDropdownComponent extends LitElement {
87
84
  firstUpdated() {
88
85
  document.addEventListener('scroll', this.calculatePosition);
89
86
  window.addEventListener('resize', this.calculatePosition);
90
- if (this.trigger == "hover" /* TriggerMode.Hover */) {
87
+ if (this.trigger === "hover" /* TriggerMode.Hover */) {
91
88
  this.triggerElement.addEventListener('mouseenter', this.onMouseEnterTriggerElement);
92
89
  this.triggerElement.addEventListener('mouseleave', this.onMouseLeaveTriggerElement);
93
90
  this.dropDownContainer.addEventListener('mouseenter', this.onMouseEnterDropDown);
@@ -109,7 +106,7 @@ let HyDropdownComponent = class HyDropdownComponent extends LitElement {
109
106
  disconnectedCallback() {
110
107
  document.removeEventListener('scroll', this.calculatePosition);
111
108
  window.removeEventListener('resize', this.calculatePosition);
112
- if (this.trigger == "hover" /* TriggerMode.Hover */) {
109
+ if (this.trigger === "hover" /* TriggerMode.Hover */) {
113
110
  this.triggerElement.removeEventListener('mouseenter', this.onMouseEnterTriggerElement);
114
111
  this.triggerElement.removeEventListener('mouseleave', this.onMouseLeaveTriggerElement);
115
112
  this.dropDownContainer.removeEventListener('mouseenter', this.onMouseEnterDropDown);
@@ -121,32 +118,32 @@ let HyDropdownComponent = class HyDropdownComponent extends LitElement {
121
118
  }
122
119
  }
123
120
  display(options) {
124
- return options.map((option) => {
125
- if (option.children) {
126
- return html `<hy-dropdown-menu
127
- .direction=${this.dropDownDirection}
128
- .disabled=${option.disabled}
129
- .icon=${option.icon}
130
- .label=${option.label}
131
- >
132
- <div class="dropdown-container">${this.display(option.children)}</div>
133
- </hy-dropdown-menu>`;
134
- }
135
- else {
136
- return html `<hy-dropdown-item
137
- .disabled=${option.disabled}
138
- .icon=${option.icon}
139
- .label=${option.label}
140
- .value=${option.value}
141
- ></hy-dropdown-item>`;
142
- }
143
- });
121
+ return options.map((option) => option.children
122
+ ? html `
123
+ <hy-dropdown-menu
124
+ .direction=${this.dropDownDirection}
125
+ .disabled=${option.disabled}
126
+ .icon=${option.icon}
127
+ .label=${option.label}
128
+ >
129
+ <div class="dropdown-container">${this.display(option.children)}</div>
130
+ </hy-dropdown-menu>
131
+ `
132
+ : html `
133
+ <hy-dropdown-item
134
+ .disabled=${option.disabled}
135
+ .icon=${option.icon}
136
+ .label=${option.label}
137
+ .value=${option.value}
138
+ .additionalData=${option.additionalData}
139
+ ></hy-dropdown-item>
140
+ `);
144
141
  }
145
142
  render() {
146
143
  return html `
147
144
  <slot></slot>
148
145
  <div class="dropdown-container" @click-item=${this.onOptionClick}>
149
- ${this.template ? html `${this.show ? this.template : nothing}` : this.display(this.options)}
146
+ ${this.template ? html `${this.show ? this.template : nothing}` : this.display(this.options)}
150
147
  </div>
151
148
  `;
152
149
  }
package/hy-dropdown.component.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"hy-dropdown.component.js","sourceRoot":"","sources":["../../../src/components/dropdown/hy-dropdown.component.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport {LitElement, TemplateResult, html, nothing} from 'lit';\nimport {customElement, property, query, state} from 'lit/decorators.js';\nimport {styles} from './hy-dropdown.style.js';\nimport {DropDownDirection, IOption, TriggerMode} from './dropdown.types';\nimport './templates/hy-dropdown-item.js';\nimport './templates/hy-dropdown-menu.js';\n\n@customElement('hy-dropdown')\nexport class HyDropdownComponent extends LitElement {\n static override styles = styles;\n @query('slot')\n triggerElement!: HTMLElement;\n @query('.dropdown-container')\n dropDownContainer!: HTMLElement;\n @property({type: Array})\n options!: IOption[];\n @property({type: Boolean, reflect: true})\n show = false;\n @property()\n trigger = TriggerMode.Click;\n @property({type: Object})\n template!:TemplateResult<1>;\n\n @property({type: Boolean, reflect: true})\n always = false;\n\n\n @state()\n isDropDownVisited = false;\n @state()\n dropDownDirection = DropDownDirection.Right;\n\n override firstUpdated(): void {\n document.addEventListener('scroll', this.calculatePosition);\n window.addEventListener('resize', this.calculatePosition);\n if (this.trigger == TriggerMode.Hover) {\n this.triggerElement.addEventListener('mouseenter', this.onMouseEnterTriggerElement);\n this.triggerElement.addEventListener('mouseleave', this.onMouseLeaveTriggerElement);\n this.dropDownContainer.addEventListener('mouseenter', this.onMouseEnterDropDown);\n this.dropDownContainer.addEventListener('mouseleave', this.onMouseLeaveDropDown);\n } else {\n this.triggerElement.addEventListener('click', this.onTriggerClick);\n window.addEventListener('click', this.onClickOutside);\n }\n }\n onTriggerClick = async () => {\n this.show = !this.show;\n await this.updateComplete;\n this.calculatePosition();\n };\n calculatePosition = () => {\n const triggerClientRect = this.shadowRoot!.querySelector('slot')!.assignedElements()[0].getBoundingClientRect()!;\n const dropDownWidth = this.dropDownContainer?.clientWidth;\n const dropDownHeight = this.dropDownContainer?.clientHeight;\n const availableBottomSpace = window.visualViewport!.height - triggerClientRect.bottom;\n const availableRightSpace = window.visualViewport!.width - triggerClientRect.left - triggerClientRect.width;\n const availableLeftSpace = triggerClientRect.right;\n this.dropDownContainer.style.position = 'fixed';\n if (dropDownHeight > availableBottomSpace) {\n this.dropDownContainer.style.top = `${triggerClientRect.top - dropDownHeight}px`;\n } else {\n //this.dropDownContainer.style.top = `${triggerClientRect.top +triggerClientRect.height+8}px`;\n }\n if (dropDownWidth > availableRightSpace && dropDownWidth < availableLeftSpace) {\n this.dropDownContainer.style.right = `${availableRightSpace}px`;\n this.dropDownDirection = DropDownDirection.Left;\n } else {\n this.dropDownDirection = DropDownDirection.Right;\n this.dropDownContainer.style.removeProperty('right');\n }\n };\n initPosition() {\n this.dropDownContainer.style.removeProperty('top');\n this.dropDownContainer.style.removeProperty('position');\n this.dropDownContainer.style.removeProperty('right');\n }\n onClickOutside = (onClickEvent:Event) => {\n const outsideClick = !onClickEvent.composedPath().includes(this)\n if (outsideClick && this.show && !this.always){\n this.show = false;\n this.initPosition();\n }\n };\n onMouseEnterTriggerElement = async () => {\n this.show = true;\n await this.updateComplete;\n this.calculatePosition();\n };\n onMouseLeaveTriggerElement = () => {\n const waitIsDropDownVisited = 50;\n setTimeout(() => {\n if (!this.isDropDownVisited) this.show = false;\n }, waitIsDropDownVisited);\n };\n onMouseEnterDropDown = () => {\n this.isDropDownVisited = true;\n };\n onMouseLeaveDropDown = () => {\n this.isDropDownVisited = false;\n this.show = false;\n this.initPosition();\n };\n onOptionClick() {\n this.show = false;\n }\n\n override disconnectedCallback() {\n document.removeEventListener('scroll', this.calculatePosition);\n window.removeEventListener('resize', this.calculatePosition);\n if (this.trigger == TriggerMode.Hover) {\n this.triggerElement.removeEventListener('mouseenter', this.onMouseEnterTriggerElement);\n this.triggerElement.removeEventListener('mouseleave', this.onMouseLeaveTriggerElement);\n this.dropDownContainer.removeEventListener('mouseenter', this.onMouseEnterDropDown);\n this.dropDownContainer.removeEventListener('mouseleave', this.onMouseLeaveDropDown);\n } else {\n this.triggerElement.removeEventListener('click', this.onTriggerClick);\n window.removeEventListener('click', this.onClickOutside);\n }\n }\n\n display(options: IOption[]): any {\n return options.map((option) => {\n if (option.children) {\n return html`<hy-dropdown-menu\n .direction=${this.dropDownDirection}\n .disabled=${option.disabled}\n .icon=${option.icon}\n .label=${option.label}\n >\n <div class=\"dropdown-container\">${this.display(option.children)}</div>\n </hy-dropdown-menu>`;\n } else {\n return html`<hy-dropdown-item\n .disabled=${option.disabled}\n .icon=${option.icon}\n .label=${option.label}\n .value=${option.value}\n ></hy-dropdown-item>`;\n }\n });\n }\n\n override render() {\n return html`\n <slot></slot>\n <div class=\"dropdown-container\" @click-item=${this.onOptionClick}>\n ${this.template?html`${this.show ? this.template : nothing}`: this.display(this.options)}\n </div>\n `;\n }\n}\n"]}
1
+ {"version":3,"file":"hy-dropdown.component.js","sourceRoot":"","sources":["../../../src/components/dropdown/hy-dropdown.component.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { LitElement, TemplateResult, html, nothing } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { styles } from './hy-dropdown.style.js';\nimport { DropDownDirection, IOption, TriggerMode } from './dropdown.types';\nimport './templates/hy-dropdown-item.js';\nimport './templates/hy-dropdown-menu.js';\n\n@customElement('hy-dropdown')\nexport class HyDropdownComponent extends LitElement {\n static override styles = styles;\n\n @query('slot') triggerElement!: HTMLElement;\n @query('.dropdown-container') dropDownContainer!: HTMLElement;\n\n @property({ type: Array }) options!: IOption[];\n @property({ type: Boolean, reflect: true }) show = false;\n @property() trigger = TriggerMode.Click;\n @property({ type: Object }) template!: TemplateResult<1>;\n @property({ type: Boolean, reflect: true }) always = false;\n\n @state() isDropDownVisited = false;\n @state() dropDownDirection = DropDownDirection.Right;\n\n override firstUpdated(): void {\n document.addEventListener('scroll', this.calculatePosition);\n window.addEventListener('resize', this.calculatePosition);\n\n if (this.trigger === TriggerMode.Hover) {\n this.triggerElement.addEventListener('mouseenter', this.onMouseEnterTriggerElement);\n this.triggerElement.addEventListener('mouseleave', this.onMouseLeaveTriggerElement);\n this.dropDownContainer.addEventListener('mouseenter', this.onMouseEnterDropDown);\n this.dropDownContainer.addEventListener('mouseleave', this.onMouseLeaveDropDown);\n } else {\n this.triggerElement.addEventListener('click', this.onTriggerClick);\n window.addEventListener('click', this.onClickOutside);\n }\n }\n\n onTriggerClick = async () => {\n this.show = !this.show;\n await this.updateComplete;\n this.calculatePosition();\n };\n\n calculatePosition = () => {\n const triggerClientRect = this.shadowRoot!.querySelector('slot')!.assignedElements()[0].getBoundingClientRect();\n const dropDownWidth = this.dropDownContainer?.clientWidth;\n const dropDownHeight = this.dropDownContainer?.clientHeight;\n const availableBottomSpace = window.visualViewport!.height - triggerClientRect.bottom;\n const availableRightSpace = window.visualViewport!.width - triggerClientRect.left - triggerClientRect.width;\n const availableLeftSpace = triggerClientRect.right;\n\n this.dropDownContainer.style.position = 'fixed';\n\n if (dropDownHeight > availableBottomSpace) {\n this.dropDownContainer.style.top = `${triggerClientRect.top - dropDownHeight}px`;\n }\n\n if (dropDownWidth > availableRightSpace && dropDownWidth < availableLeftSpace) {\n this.dropDownContainer.style.right = `${availableRightSpace}px`;\n this.dropDownDirection = DropDownDirection.Left;\n } else {\n this.dropDownDirection = DropDownDirection.Right;\n this.dropDownContainer.style.removeProperty('right');\n }\n };\n\n initPosition() {\n this.dropDownContainer.style.removeProperty('top');\n this.dropDownContainer.style.removeProperty('position');\n this.dropDownContainer.style.removeProperty('right');\n }\n\n onClickOutside = (event: Event) => {\n const outsideClick = !event.composedPath().includes(this);\n if (outsideClick && this.show && !this.always) {\n this.show = false;\n this.initPosition();\n }\n };\n\n onMouseEnterTriggerElement = async () => {\n this.show = true;\n await this.updateComplete;\n this.calculatePosition();\n };\n\n onMouseLeaveTriggerElement = () => {\n const waitIsDropDownVisited = 50;\n setTimeout(() => {\n if (!this.isDropDownVisited) this.show = false;\n }, waitIsDropDownVisited);\n };\n\n onMouseEnterDropDown = () => {\n this.isDropDownVisited = true;\n };\n\n onMouseLeaveDropDown = () => {\n this.isDropDownVisited = false;\n this.show = false;\n this.initPosition();\n };\n\n onOptionClick() {\n this.show = false;\n }\n\n override disconnectedCallback() {\n document.removeEventListener('scroll', this.calculatePosition);\n window.removeEventListener('resize', this.calculatePosition);\n\n if (this.trigger === TriggerMode.Hover) {\n this.triggerElement.removeEventListener('mouseenter', this.onMouseEnterTriggerElement);\n this.triggerElement.removeEventListener('mouseleave', this.onMouseLeaveTriggerElement);\n this.dropDownContainer.removeEventListener('mouseenter', this.onMouseEnterDropDown);\n this.dropDownContainer.removeEventListener('mouseleave', this.onMouseLeaveDropDown);\n } else {\n this.triggerElement.removeEventListener('click', this.onTriggerClick);\n window.removeEventListener('click', this.onClickOutside);\n }\n }\n\n display(options: IOption[]): TemplateResult[] {\n return options.map((option) =>\n option.children\n ? html`\n <hy-dropdown-menu\n .direction=${this.dropDownDirection}\n .disabled=${option.disabled}\n .icon=${option.icon}\n .label=${option.label}\n >\n <div class=\"dropdown-container\">${this.display(option.children)}</div>\n </hy-dropdown-menu>\n `\n : html`\n <hy-dropdown-item\n .disabled=${option.disabled}\n .icon=${option.icon}\n .label=${option.label}\n .value=${option.value}\n .additionalData=${option.additionalData}\n ></hy-dropdown-item>\n `\n );\n }\n\n override render() {\n return html`\n <slot></slot>\n <div class=\"dropdown-container\" @click-item=${this.onOptionClick}>\n ${this.template ? html`${this.show ? this.template : nothing}` : this.display(this.options)}\n </div>\n `;\n }\n}"]}
package/hy-dropdown.style.js CHANGED
@@ -28,7 +28,7 @@ const dropdownStyle = css `
28
28
  --hybrid-dropdown-disabled-text-color: rgba(0, 0, 0, 0.5);
29
29
  --hybrid-dropdown-only-text-padding-left: 18px;
30
30
  --hybrid-dropdown-icon-and-text-padding-left: 4px;
31
- --hybrid-dropdown-menu-children-top: 10px;
31
+ --hybrid-dropdown-menu-children-top: 0px;
32
32
  --hybrid-dropdown-menu-children-offset: -2px;
33
33
  --hybrid-dropdown-menu-children-z-index: 2;
34
34
  --hybrid-dropdown-font-size-local: 13px;
package/hy-dropdown.style.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"hy-dropdown.style.js","sourceRoot":"","sources":["../../../src/components/dropdown/hy-dropdown.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB,MAAM,aAAa,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2CxB,CAAC;AACF,MAAM,CAAC,MAAM,MAAM,GAAG,aAAa,CAAC","sourcesContent":["import {css} from 'lit';\n\nconst dropdownStyle = css`\n .dropdown-container {\n display: none;\n z-index:1;\n border-radius: var(--hybrid-dropdown-border-radius, var(--hybrid-dropdown-border-radius));\n font-family: var(--hybrid-dropdown-font-family, Inter, ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, Ubuntu, Cantarell, \"Noto Sans\", sans-serif, \"system-ui\", \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, SFProLocalRange;);\n }\n :host {\n cursor: pointer;\n }\n\n :host([show]) .dropdown-container {\n display: block;\n position: absolute;\n width: var(--hybrid-dropdown-width);\n box-shadow: var(--hybrid-dropdown-box-shadow);\n }\n :host {\n --hybrid-icon-color: #5d5d5d;\n --hybrid-dropdown-width: 150px;\n --hybrid-dropdown-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.1);\n --hybrid-dropdown-padding: 10px;\n --hybrid-dropdown-background-color: #f4f4f4;\n --hybrid-dropdown-hovered-background-color: #e4e3e3;\n --hybrid-dropdown-text-color: #000000;\n --hybrid-dropdown-disabled-background-color: #f4f4f4;\n --hybrid-dropdown-disabled-text-color: rgba(0, 0, 0, 0.5);\n --hybrid-dropdown-only-text-padding-left: 18px;\n --hybrid-dropdown-icon-and-text-padding-left: 4px;\n --hybrid-dropdown-menu-children-top: 10px;\n --hybrid-dropdown-menu-children-offset: -2px;\n --hybrid-dropdown-menu-children-z-index: 2;\n --hybrid-dropdown-font-size-local: 13px;\n --hybrid-dropdown-border-radius : 0px;\n }\n @media (prefers-color-scheme: dark) {\n :host {\n --hybrid-dropdown-background-color: #232323;\n --hybrid-dropdown-hovered-background-color: #2b2b2b;\n --hybrid-dropdown-disabled-background-color: #6f6f6f;\n --hybrid-dropdown-text-color: #f4f4f4;\n }\n }\n`;\nexport const styles = dropdownStyle;\n"]}
1
+ {"version":3,"file":"hy-dropdown.style.js","sourceRoot":"","sources":["../../../src/components/dropdown/hy-dropdown.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,aAAa,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2CxB,CAAC;AACF,MAAM,CAAC,MAAM,MAAM,GAAG,aAAa,CAAC","sourcesContent":["import { css } from 'lit';\n\nconst dropdownStyle = css`\n .dropdown-container {\n display: none;\n z-index:1;\n border-radius: var(--hybrid-dropdown-border-radius, var(--hybrid-dropdown-border-radius));\n font-family: var(--hybrid-dropdown-font-family, Inter, ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, Ubuntu, Cantarell, \"Noto Sans\", sans-serif, \"system-ui\", \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, SFProLocalRange;);\n }\n :host {\n cursor: pointer;\n }\n\n :host([show]) .dropdown-container {\n display: block;\n position: absolute;\n width: var(--hybrid-dropdown-width);\n box-shadow: var(--hybrid-dropdown-box-shadow);\n }\n :host {\n --hybrid-icon-color: #5d5d5d;\n --hybrid-dropdown-width: 150px;\n --hybrid-dropdown-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.1);\n --hybrid-dropdown-padding: 10px;\n --hybrid-dropdown-background-color: #f4f4f4;\n --hybrid-dropdown-hovered-background-color: #e4e3e3;\n --hybrid-dropdown-text-color: #000000;\n --hybrid-dropdown-disabled-background-color: #f4f4f4;\n --hybrid-dropdown-disabled-text-color: rgba(0, 0, 0, 0.5);\n --hybrid-dropdown-only-text-padding-left: 18px;\n --hybrid-dropdown-icon-and-text-padding-left: 4px;\n --hybrid-dropdown-menu-children-top: 0px;\n --hybrid-dropdown-menu-children-offset: -2px;\n --hybrid-dropdown-menu-children-z-index: 2;\n --hybrid-dropdown-font-size-local: 13px;\n --hybrid-dropdown-border-radius : 0px;\n }\n @media (prefers-color-scheme: dark) {\n :host {\n --hybrid-dropdown-background-color: #232323;\n --hybrid-dropdown-hovered-background-color: #2b2b2b;\n --hybrid-dropdown-disabled-background-color: #6f6f6f;\n --hybrid-dropdown-text-color: #f4f4f4;\n }\n }\n`;\nexport const styles = dropdownStyle;\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nuralyui/dropdown",
3
- "version": "0.0.5",
3
+ "version": "0.0.7",
4
4
  "description": "",
5
5
  "main": "index.js",
6
6
  "type": "module",
package/templates/hy-dropdown-item.d.ts CHANGED
@@ -5,6 +5,7 @@ export declare class HyDropdownItem extends LitElement {
5
5
  disabled: boolean;
6
6
  label: string;
7
7
  value: string;
8
+ additionalData: any;
8
9
  onClick(clickItemEvent: Event): void;
9
10
  render(): import("lit").TemplateResult<1>;
10
11
  }
package/templates/hy-dropdown-item.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"hy-dropdown-item.d.ts","sourceRoot":"","sources":["../../../../src/components/dropdown/templates/hy-dropdown-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAgB,MAAM,KAAK,CAAC;AAI9C,qBACa,cAAe,SAAQ,UAAU;IAC5C,OAAgB,MAAM,4BAAU;IAEhC,IAAI,EAAG,MAAM,CAAC;IAEd,QAAQ,UAAS;IAEjB,KAAK,EAAG,MAAM,CAAC;IAEf,KAAK,EAAG,MAAM,CAAC;IAEf,OAAO,CAAC,cAAc,EAAE,KAAK;IAMpB,MAAM;CAKhB"}
1
+ {"version":3,"file":"hy-dropdown-item.d.ts","sourceRoot":"","sources":["../../../../src/components/dropdown/templates/hy-dropdown-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAC;AAIhD,qBACa,cAAe,SAAQ,UAAU;IAC5C,OAAgB,MAAM,4BAAU;IAGhC,IAAI,EAAG,MAAM,CAAC;IAGd,QAAQ,UAAS;IAGjB,KAAK,EAAG,MAAM,CAAC;IAGf,KAAK,EAAG,MAAM,CAAC;IAGf,cAAc,EAAG,GAAG,CAAC;IAErB,OAAO,CAAC,cAAc,EAAE,KAAK;IAepB,MAAM;CAQhB"}
package/templates/hy-dropdown-item.js CHANGED
@@ -13,12 +13,23 @@ let HyDropdownItem = class HyDropdownItem extends LitElement {
13
13
  this.disabled = false;
14
14
  }
15
15
  onClick(clickItemEvent) {
16
+ console.log(this.additionalData, 'clickItemEvent');
16
17
  clickItemEvent.stopPropagation();
17
- if (!this.disabled)
18
- this.dispatchEvent(new CustomEvent('click-item', { detail: { value: this.value }, composed: true, bubbles: true }));
18
+ if (!this.disabled) {
19
+ this.dispatchEvent(new CustomEvent('click-item', {
20
+ detail: { value: this.value, additionalData: this.additionalData },
21
+ composed: true,
22
+ bubbles: true,
23
+ }));
24
+ }
19
25
  }
20
26
  render() {
21
- return html `<div @click=${this.onClick}>${this.icon ? html `<hy-icon name=${this.icon}></hy-icon>` : nothing}<hy-label class="option-label">${this.label}<hy-label></div>`;
27
+ return html `
28
+ <div @click=${this.onClick}>
29
+ ${this.icon ? html `<hy-icon name=${this.icon}></hy-icon>` : nothing}
30
+ <hy-label class="option-label">${this.label}</hy-label>
31
+ </div>
32
+ `;
22
33
  }
23
34
  };
24
35
  HyDropdownItem.styles = styles;
@@ -34,6 +45,9 @@ __decorate([
34
45
  __decorate([
35
46
  property()
36
47
  ], HyDropdownItem.prototype, "value", void 0);
48
+ __decorate([
49
+ property()
50
+ ], HyDropdownItem.prototype, "additionalData", void 0);
37
51
  HyDropdownItem = __decorate([
38
52
  customElement('hy-dropdown-item')
39
53
  ], HyDropdownItem);
package/templates/hy-dropdown-item.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"hy-dropdown-item.js","sourceRoot":"","sources":["../../../../src/components/dropdown/templates/hy-dropdown-item.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAC,UAAU,EAAE,IAAI,EAAE,OAAO,EAAC,MAAM,KAAK,CAAC;AAC9C,OAAO,EAAC,aAAa,EAAE,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC1D,OAAO,EAAC,MAAM,EAAC,MAAM,6BAA6B,CAAC;AAGnD,IAAa,cAAc,GAA3B,MAAa,cAAe,SAAQ,UAAU;IAA9C;;QAKE,aAAQ,GAAG,KAAK,CAAC;IAiBnB,CAAC;IAXC,OAAO,CAAC,cAAqB;QAC3B,cAAc,CAAC,eAAe,EAAE,CAAC;QACjC,IAAI,CAAC,IAAI,CAAC,QAAQ;YAChB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,YAAY,EAAE,EAAC,MAAM,EAAE,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC,CAAC,CAAC;IACpH,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA,eAAe,IAAI,CAAC,OAAO,IACpC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA,iBAAiB,IAAI,CAAC,IAAI,aAAa,CAAC,CAAC,CAAC,OAC5D,kCAAkC,IAAI,CAAC,KAAK,kBAAkB,CAAC;IACjE,CAAC;CACF,CAAA;AArBiB,qBAAM,GAAG,MAAO,CAAA;AAEhC;IADC,QAAQ,CAAC,EAAC,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAC,CAAC;4CAC1B;AAEd;IADC,QAAQ,CAAC,EAAC,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAC,CAAC;gDACxB;AAEjB;IADC,QAAQ,EAAE;6CACI;AAEf;IADC,QAAQ,EAAE;6CACI;AATJ,cAAc;IAD1B,aAAa,CAAC,kBAAkB,CAAC;GACrB,cAAc,CAsB1B;SAtBY,cAAc","sourcesContent":["import {LitElement, html, nothing} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\nimport {styles} from './hy-dropdown-item.style.js';\n\n@customElement('hy-dropdown-item')\nexport class HyDropdownItem extends LitElement {\n static override styles = styles;\n @property({reflect: true, type: String})\n icon!: string;\n @property({reflect: true, type: Boolean})\n disabled = false;\n @property()\n label!: string;\n @property()\n value!: string;\n\n onClick(clickItemEvent: Event) {\n clickItemEvent.stopPropagation();\n if (!this.disabled)\n this.dispatchEvent(new CustomEvent('click-item', {detail: {value: this.value}, composed: true, bubbles: true}));\n }\n\n override render() {\n return html`<div @click=${this.onClick}>${\n this.icon ? html`<hy-icon name=${this.icon}></hy-icon>` : nothing\n }<hy-label class=\"option-label\">${this.label}<hy-label></div>`;\n }\n}\n"]}
1
+ {"version":3,"file":"hy-dropdown-item.js","sourceRoot":"","sources":["../../../../src/components/dropdown/templates/hy-dropdown-item.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,6BAA6B,CAAC;AAGrD,IAAa,cAAc,GAA3B,MAAa,cAAe,SAAQ,UAAU;IAA9C;;QAOE,aAAQ,GAAG,KAAK,CAAC;IAkCnB,CAAC;IAvBC,OAAO,CAAC,cAAqB;QAC3B,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,cAAc,EAAE,gBAAgB,CAAC,CAAC;QACnD,cAAc,CAAC,eAAe,EAAE,CAAC;QAEjC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAClB,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,YAAY,EAAE;gBAC5B,MAAM,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,cAAc,EAAE,IAAI,CAAC,cAAc,EAAE;gBAClE,QAAQ,EAAE,IAAI;gBACd,OAAO,EAAE,IAAI;aACd,CAAC,CACH,CAAC;SACH;IACH,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA;oBACK,IAAI,CAAC,OAAO;UACtB,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA,iBAAiB,IAAI,CAAC,IAAI,aAAa,CAAC,CAAC,CAAC,OAAO;yCAClC,IAAI,CAAC,KAAK;;KAE9C,CAAC;IACJ,CAAC;CACF,CAAA;AAxCiB,qBAAM,GAAG,MAAO,CAAA;AAGhC;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAC5B;AAGd;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;gDAC1B;AAGjB;IADC,QAAQ,EAAE;6CACI;AAGf;IADC,QAAQ,EAAE;6CACI;AAGf;IADC,QAAQ,EAAE;sDACU;AAhBV,cAAc;IAD1B,aAAa,CAAC,kBAAkB,CAAC;GACrB,cAAc,CAyC1B;SAzCY,cAAc","sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styles } from './hy-dropdown-item.style.js';\n\n@customElement('hy-dropdown-item')\nexport class HyDropdownItem extends LitElement {\n static override styles = styles;\n\n @property({ reflect: true, type: String })\n icon!: string;\n\n @property({ reflect: true, type: Boolean })\n disabled = false;\n\n @property()\n label!: string;\n\n @property()\n value!: string;\n\n @property()\n additionalData!: any;\n\n onClick(clickItemEvent: Event) {\n console.log(this.additionalData, 'clickItemEvent');\n clickItemEvent.stopPropagation();\n\n if (!this.disabled) {\n this.dispatchEvent(\n new CustomEvent('click-item', {\n detail: { value: this.value, additionalData: this.additionalData },\n composed: true,\n bubbles: true,\n })\n );\n }\n }\n\n override render() {\n return html`\n <div @click=${this.onClick}>\n ${this.icon ? html`<hy-icon name=${this.icon}></hy-icon>` : nothing}\n <hy-label class=\"option-label\">${this.label}</hy-label>\n </div>\n `;\n }\n}"]}