@nuralyui/dropdown 0.0.6 → 0.0.8
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.
- package/hy-dropdown.style.js +1 -1
- package/hy-dropdown.style.js.map +1 -1
- package/package.json +1 -1
- package/templates/hy-dropdown-item.style.d.ts.map +1 -1
- package/templates/hy-dropdown-item.style.js +1 -0
- package/templates/hy-dropdown-item.style.js.map +1 -1
- package/templates/hy-dropdown-menu.d.ts.map +1 -1
- package/templates/hy-dropdown-menu.js.map +1 -1
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:
|
|
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,
|
|
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 +1 @@
|
|
|
1
|
-
{"version":3,"file":"hy-dropdown-item.style.d.ts","sourceRoot":"","sources":["../../../../src/components/dropdown/templates/hy-dropdown-item.style.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"hy-dropdown-item.style.d.ts","sourceRoot":"","sources":["../../../../src/components/dropdown/templates/hy-dropdown-item.style.ts"],"names":[],"mappings":"AAkCA,eAAO,MAAM,MAAM,2BAAsB,CAAC"}
|
|
@@ -15,6 +15,7 @@ const dropdownItemStyle = css `
|
|
|
15
15
|
}
|
|
16
16
|
:host(:not([disabled])) div:hover {
|
|
17
17
|
background-color: var(--hybrid-dropdown-hovered-background-color);
|
|
18
|
+
margin-left: -1px;
|
|
18
19
|
}
|
|
19
20
|
:host([disabled]) div {
|
|
20
21
|
background-color: var(--hybrid-dropdown-disabled-background-color);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"hy-dropdown-item.style.js","sourceRoot":"","sources":["../../../../src/components/dropdown/templates/hy-dropdown-item.style.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"hy-dropdown-item.style.js","sourceRoot":"","sources":["../../../../src/components/dropdown/templates/hy-dropdown-item.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8B5B,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,iBAAiB,CAAC,CAAC","sourcesContent":["import { css } from 'lit';\n\nconst dropdownItemStyle = css`\n div {\n padding: var(--hybrid-dropdown-padding);\n cursor: pointer;\n background-color: var(--hybrid-dropdown-background-color);\n display: flex;\n align-items: center;\n color: var(--hybrid-dropdown-text-color);\n font-size: var(--hybrid-dropdown-font-size, var(--hybrid-dropdown-font-size-local)); /* Default value added */\n\n }\n hy-icon {\n display: flex;\n }\n :host(:not([disabled])) div:hover {\n background-color: var(--hybrid-dropdown-hovered-background-color);\n margin-left: -1px;\n }\n :host([disabled]) div {\n background-color: var(--hybrid-dropdown-disabled-background-color);\n cursor: not-allowed;\n color: var(--hybrid-dropdown-disabled-text-color);\n }\n\n :host(:not([icon])) .option-label {\n padding-left: var(--hybrid-dropdown-only-text-padding-left);\n }\n :host([icon]) .option-label {\n padding-left: var(--hybrid-dropdown-icon-and-text-padding-left);\n }\n`;\n\nexport const styles = [dropdownItemStyle];"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"hy-dropdown-menu.d.ts","sourceRoot":"","sources":["../../../../src/components/dropdown/templates/hy-dropdown-menu.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"hy-dropdown-menu.d.ts","sourceRoot":"","sources":["../../../../src/components/dropdown/templates/hy-dropdown-menu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAC;AAGhD,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,qBACa,cAAe,SAAQ,UAAU;IAC5C,OAAgB,MAAM,4BAAU;IAEhC,UAAU,EAAG,WAAW,CAAC;IAEzB,QAAQ,UAAS;IAEjB,IAAI,EAAG,MAAM,CAAC;IAEd,KAAK,EAAG,MAAM,CAAC;IAEf,SAAS,EAAG,iBAAiB,CAAC;IAE9B,YAAY,UAAS;IAEZ,YAAY,IAAI,IAAI;IAK7B,gBAAgB,aAEd;IACF,gBAAgB,aAEd;IACF,WAAW,CAAC,cAAc,EAAE,KAAK;IAIxB,oBAAoB,IAAI,IAAI;IAK5B,MAAM;CAWhB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"hy-dropdown-menu.js","sourceRoot":"","sources":["../../../../src/components/dropdown/templates/hy-dropdown-menu.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"hy-dropdown-menu.js","sourceRoot":"","sources":["../../../../src/components/dropdown/templates/hy-dropdown-menu.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1E,OAAO,EAAE,MAAM,EAAE,MAAM,6BAA6B,CAAC;AAGrD,IAAa,cAAc,GAA3B,MAAa,cAAe,SAAQ,UAAU;IAA9C;;QAKE,aAAQ,GAAG,KAAK,CAAC;QAQjB,iBAAY,GAAG,KAAK,CAAC;QAOrB,qBAAgB,GAAG,GAAG,EAAE;YACtB,IAAI,CAAC,IAAI,CAAC,QAAQ;gBAAE,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;QAC/C,CAAC,CAAC;QACF,qBAAgB,GAAG,GAAG,EAAE;YACtB,IAAI,CAAC,IAAI,CAAC,QAAQ;gBAAE,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;QAChD,CAAC,CAAC;IAqBJ,CAAC;IA/BU,YAAY;QACnB,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;QACtE,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;IACxE,CAAC;IAQD,WAAW,CAAC,cAAqB;QAC/B,cAAc,CAAC,eAAe,EAAE,CAAC;IACnC,CAAC;IAEQ,oBAAoB;QAC3B,IAAI,CAAC,UAAU,CAAC,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;QACzE,IAAI,CAAC,UAAU,CAAC,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;IAC3E,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA,mBAAmB,IAAI,CAAC,WAAW;QAC1C,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA,iBAAiB,IAAI,CAAC,IAAI,aAAa,CAAC,CAAC,CAAC,OAAO;sCACnC,IAAI,CAAC,KAAK;;gBAEhC,IAAI,CAAC,SAAS,yCAA2B,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,YAAY;;;6BAG3D,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM;WACtD,CAAC;IACV,CAAC;CACF,CAAA;AA7CiB,qBAAM,GAAG,MAAO,CAAA;AAEhC;IADC,KAAK,CAAC,KAAK,CAAC;kDACY;AAEzB;IADC,QAAQ,CAAC,EAAC,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAC,CAAC;gDACxB;AAEjB;IADC,QAAQ,CAAC,EAAC,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAC,CAAC;4CAC1B;AAEd;IADC,QAAQ,EAAE;6CACI;AAEf;IADC,QAAQ,CAAC,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC;iDACI;AAE9B;IADC,KAAK,EAAE;oDACa;AAbV,cAAc;IAD1B,aAAa,CAAC,kBAAkB,CAAC;GACrB,cAAc,CA8C1B;SA9CY,cAAc","sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { styles } from './hy-dropdown-menu.style.js';\nimport { DropDownDirection } from '../dropdown.types';\n@customElement('hy-dropdown-menu')\nexport class HyDropdownMenu extends LitElement {\n static override styles = styles;\n @query('div')\n menuOption!: HTMLElement;\n @property({reflect: true, type: Boolean})\n disabled = false;\n @property({reflect: true, type: String})\n icon!: string;\n @property()\n label!: string;\n @property({reflect: true})\n direction!: DropDownDirection;\n @state()\n showChildren = false;\n\n override firstUpdated(): void {\n this.menuOption.addEventListener('mouseenter', this.onMouseEnterMenu);\n this.menuOption.addEventListener('mouseleave', this.onMouseLeaveMenu);\n }\n\n onMouseEnterMenu = () => {\n if (!this.disabled) this.showChildren = true;\n };\n onMouseLeaveMenu = () => {\n if (!this.disabled) this.showChildren = false;\n };\n onClickMenu(menuClickEvent: Event) {\n menuClickEvent.stopPropagation();\n }\n\n override disconnectedCallback(): void {\n this.menuOption.removeEventListener('mouseenter', this.onMouseEnterMenu);\n this.menuOption.removeEventListener('mouseleave', this.onMouseLeaveMenu);\n }\n\n override render() {\n return html`<div @mousedown=${this.onClickMenu}>\n ${this.icon ? html`<hy-icon name=${this.icon}></hy-icon>` : nothing}\n <hy-label class=\"menu-label\"> ${this.label}</hy-label>\n <hy-icon\n name=\"${this.direction == DropDownDirection.Right ? 'caret-right' : 'caret-left'}\"\n id=\"caret-icon\"\n ></hy-icon>\n <slot style=\"display:${this.showChildren ? 'block' : 'none'}\"></slot>\n </div>`;\n }\n}\n"]}
|