@omegagrid/bucket 0.6.61 → 0.6.63
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/dist/ui/bucketAlert.d.ts.map +1 -1
- package/dist/ui/bucketAlert.js +1 -0
- package/dist/ui/bucketAlert.js.map +1 -1
- package/dist/ui/bucketButton.d.ts.map +1 -1
- package/dist/ui/bucketButton.js +24 -9
- package/dist/ui/bucketButton.js.map +1 -1
- package/dist/ui/sidemenu.d.ts +5 -3
- package/dist/ui/sidemenu.d.ts.map +1 -1
- package/dist/ui/sidemenu.js +32 -14
- package/dist/ui/sidemenu.js.map +1 -1
- package/package.json +5 -5
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"bucketAlert.d.ts","sourceRoot":"","sources":["../../src/ui/bucketAlert.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAA4B,MAAM,iBAAiB,CAAC;AACvE,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAE5C,OAAO,EAAE,kBAAkB,EAAmB,MAAM,UAAU,CAAC;AAS/D,qBAAa,UAAW,SAAQ,KAAK;gBACxB,IAAI,EAAE,MAAM;CAGxB;AAED,qBAEa,WAAY,SAAQ,UAAU;IAE1C,MAAM,CAAC,MAAM,
|
|
1
|
+
{"version":3,"file":"bucketAlert.d.ts","sourceRoot":"","sources":["../../src/ui/bucketAlert.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAA4B,MAAM,iBAAiB,CAAC;AACvE,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAE5C,OAAO,EAAE,kBAAkB,EAAmB,MAAM,UAAU,CAAC;AAS/D,qBAAa,UAAW,SAAQ,KAAK;gBACxB,IAAI,EAAE,MAAM;CAGxB;AAED,qBAEa,WAAY,SAAQ,UAAU;IAE1C,MAAM,CAAC,MAAM,0BA+CX;IAGF,OAAO,EAAE,kBAAkB,CAAC;IAG5B,KAAK,EAAE,UAAU,CAAC;IAElB,UAAU,CAAC,KAAK,EAAE,GAAG,CAAC,WAAW,EAAE,OAAO,CAAC;IAM3C,OAAO,KAAK,QAAQ,GAQnB;IAED,KAAK,CAAC,aAAa,UAAO;IAK1B,MAAM,6CASJ;CAEF"}
|
package/dist/ui/bucketAlert.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"bucketAlert.js","sourceRoot":"","sources":["../../src/ui/bucketAlert.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAY,SAAS,EAAE,GAAG,EAAE,MAAM,iBAAiB,CAAC;AACvE,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAG5D,MAAM,OAAO,GAAkD;IAC9D,MAAM,EAAE,CAAC,UAAU,CAAC,MAAM,EAAE,aAAa,CAAC;IAC1C,QAAQ,EAAE,CAAC,UAAU,CAAC,GAAG,EAAE,oBAAoB,CAAC;IAChD,SAAS,EAAE,CAAC,UAAU,CAAC,MAAM,EAAE,oBAAoB,CAAC;IACpD,SAAS,EAAE,CAAC,UAAU,CAAC,KAAK,EAAE,cAAc,CAAC;CAC7C,CAAC;AAEF,MAAM,OAAO,UAAW,SAAQ,KAAK;IACpC,YAAY,IAAY;QACvB,KAAK,CAAC,SAAS,IAAI,EAAE,EAAE,EAAC,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAC,CAAC,CAAC;IACzD,CAAC;CACD;AAIM,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;IAApC;;
|
|
1
|
+
{"version":3,"file":"bucketAlert.js","sourceRoot":"","sources":["../../src/ui/bucketAlert.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAY,SAAS,EAAE,GAAG,EAAE,MAAM,iBAAiB,CAAC;AACvE,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAG5D,MAAM,OAAO,GAAkD;IAC9D,MAAM,EAAE,CAAC,UAAU,CAAC,MAAM,EAAE,aAAa,CAAC;IAC1C,QAAQ,EAAE,CAAC,UAAU,CAAC,GAAG,EAAE,oBAAoB,CAAC;IAChD,SAAS,EAAE,CAAC,UAAU,CAAC,MAAM,EAAE,oBAAoB,CAAC;IACpD,SAAS,EAAE,CAAC,UAAU,CAAC,KAAK,EAAE,cAAc,CAAC;CAC7C,CAAC;AAEF,MAAM,OAAO,UAAW,SAAQ,KAAK;IACpC,YAAY,IAAY;QACvB,KAAK,CAAC,SAAS,IAAI,EAAE,EAAE,EAAC,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAC,CAAC,CAAC;IACzD,CAAC;CACD;AAIM,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;IAApC;;QA8EN,WAAM,GAAG,GAAG,EAAE,CAAC,IAAI,CAAA;;;sBAGE,IAAI,CAAC,QAAQ;;wBAEX,IAAI,CAAC,OAAO,EAAE,KAAK;gCACX,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE;;sBAE5B,IAAI,CAAC,OAAO,EAAE,OAAO;EACzC,CAAC;IAEH,CAAC;IAhCA,UAAU,CAAC,KAAgC;QAC1C,IAAI,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE,CAAC;YAC1B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,MAAM,CAAC;QACrF,CAAC;IACF,CAAC;IAED,IAAY,QAAQ;QACnB,IAAI,IAAI,CAAC,OAAO,EAAE,IAAI;YAAE,OAAO,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC;QACjD,MAAM,IAAI,GAAa,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;QACtC,IAAI,IAAI,CAAC,OAAO,EAAE,IAAI,EAAE,CAAC;YACxB,IAAI,CAAC,KAAK,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;YAC3C,IAAI,CAAC,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;QAC3C,CAAC;QACD,OAAO,IAAI,CAAC;IACb,CAAC;IAED,KAAK,CAAC,aAAa,GAAG,IAAI;QACzB,GAAG,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;QACtB,IAAI,aAAa;YAAE,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;IAC3D,CAAC;;AA1EM,kBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+ClB,AA/CY,CA+CX;AAGF;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;4CACG;AAG5B;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;0CACtB;AAvDN,WAAW;IAFvB,aAAa,CAAC,iBAAiB,CAAC;IAChC,SAAS,CAAC,EAAC,KAAK,EAAE,CAAC,QAAQ,CAAC,EAAC,CAAC;GAClB,WAAW,CAyFvB","sourcesContent":["import { ColorTypes, IconSpec, colorable, dom } from '@omegagrid/core';\nimport { LitElement, html, css } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { BucketAlertOptions, BucketAlertType } from '../types';\n\nconst typeMap: Record<BucketAlertType, [ColorTypes, string]> = {\n\t'info': [ColorTypes.Accent, 'circle-info'],\n\t'danger': [ColorTypes.Red, 'circle-exclamation'],\n\t'warning': [ColorTypes.Yellow, 'circle-exclamation'],\n\t'success': [ColorTypes.Green, 'circle-check']\n};\n\nexport class AlertEvent extends Event {\n\tconstructor(type: string) {\n\t\tsuper(`alert.${type}`, {bubbles: true, composed: true});\n\t}\n}\n\n@customElement('og-bucket-alert')\n@colorable({props: ['border']})\nexport class BucketAlert extends LitElement {\n\n\tstatic styles = css`\n\t\t* {\n\t\t\tbox-sizing: border-box;\n\t\t}\n\t\t\n\t\t:host {\n\t\t\tfont-size: var(--og-font-size);\n\t\t\tdisplay: block;\n\t\t\tbackground-color: var(--og-background-color);\n\t\t\tborder: 1px solid var(--og-accent-color);\n\t\t\tmin-width: 200px;\n\t\t\ttransition: bottom 0.5s;\n\t\t\tposition: absolute;\n\t\t\tbottom: -100px;\n\t\t\tbox-shadow: 8px 8px 4px -3px var(--og-dialog-shadow);\n\t\t\tz-index: 1000;\n\t\t\tborder-radius: var(--og-base-radius);\n\t\t}\n\n\t\t.header {\n\t\t\theight: 20px;\n\t\t\tposition: relative;\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: row;\n\t\t\talign-items: center;\n\t\t}\n\n\t\t.header .icon {\n\t\t\tmin-width: 20px;\n\t\t\ttext-align: center;\n\t\t\tflex: 0;\n\t\t}\n\n\t\t.header .close {\n\t\t\tposition: absolute;\n\t\t\theight: 20px;\n\t\t\twidth: 20px;\n\t\t\tline-height: 20px;\n\t\t\tcursor: pointer;\n\t\t\ttext-align: center;\n\t\t\ttop: 0;\n\t\t\tright: 0;\n\t\t}\n\n\t\t.body {\n\t\t\tpadding: 2px;\n\t\t}\n\t`;\n\t\n\t@property({type: Object})\n\toptions: BucketAlertOptions;\n\n\t@property({type: String, reflect: true})\n\tcolor: ColorTypes;\n\n\twillUpdate(props: Map<PropertyKey, unknown>) {\n\t\tif (props.has('options')) {\n\t\t\tthis.color = this.options?.type ? typeMap[this.options.type][0] : ColorTypes.Accent;\n\t\t}\n\t}\n\n\tprivate get iconSpec() {\n\t\tif (this.options?.icon) return this.options.icon;\n\t\tconst icon: IconSpec = {icon: 'info'};\n\t\tif (this.options?.type) {\n\t\t\ticon.color = typeMap[this.options.type][0];\n\t\t\ticon.icon = typeMap[this.options.type][1];\n\t\t}\n\t\treturn icon;\n\t}\n\n\tclose(dispatchEvent = true) {\n\t\tdom.hideElement(this);\n\t\tif (dispatchEvent) this.dispatchEvent(new Event('close'));\n\t}\n\n\trender = () => html`\n\t\t<div class=\"header\">\n\t\t\t<div class=\"icon\">\n\t\t\t\t<og-icon .icon=\"${this.iconSpec}\"></og-icon>\n\t\t\t</div>\n\t\t\t<div class=\"title\">${this.options?.title}</div>\n\t\t\t<div class=\"close\" @click=\"${() => this.close()}\">×</div>\n\t\t</div>\n\t\t<div class=\"body\">${this.options?.content}</div>\n\t`;\n\n}"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"bucketButton.d.ts","sourceRoot":"","sources":["../../src/ui/bucketButton.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAS,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C,qBACa,YAAa,SAAQ,UAAU;IAG3C,IAAI,EAAE,MAAM,CAAC;IAGb,IAAI,EAAE,QAAQ,GAAC,MAAM,CAAC;IAGtB,MAAM,UAAQ;IAGd,UAAU,EAAE,MAAM,GAAC,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAEpC,MAAM,CAAC,MAAM,
|
|
1
|
+
{"version":3,"file":"bucketButton.d.ts","sourceRoot":"","sources":["../../src/ui/bucketButton.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAS,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C,qBACa,YAAa,SAAQ,UAAU;IAG3C,IAAI,EAAE,MAAM,CAAC;IAGb,IAAI,EAAE,QAAQ,GAAC,MAAM,CAAC;IAGtB,MAAM,UAAQ;IAGd,UAAU,EAAE,MAAM,GAAC,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAEpC,MAAM,CAAC,MAAM,0BA+CX;IAEF,OAAO,KAAK,QAAQ,GAEnB;IAED,MAAM,6CAOJ;CAEF"}
|
package/dist/ui/bucketButton.js
CHANGED
|
@@ -12,10 +12,12 @@ let BucketButton = class BucketButton extends LitElement {
|
|
|
12
12
|
super(...arguments);
|
|
13
13
|
this.active = false;
|
|
14
14
|
this.render = () => html `
|
|
15
|
-
<div class="
|
|
16
|
-
<
|
|
15
|
+
<div class="inner">
|
|
16
|
+
<div class="icon">
|
|
17
|
+
<og-icon .icon="${this.iconSpec}"></og-icon>
|
|
18
|
+
</div>
|
|
19
|
+
<div class="text">${this.text}</div>
|
|
17
20
|
</div>
|
|
18
|
-
<div class="text">${this.text}</div>
|
|
19
21
|
`;
|
|
20
22
|
}
|
|
21
23
|
get iconSpec() {
|
|
@@ -28,26 +30,39 @@ BucketButton.styles = css `
|
|
|
28
30
|
width: 40px;
|
|
29
31
|
height: 40px;
|
|
30
32
|
cursor: pointer;
|
|
33
|
+
padding: 4px;
|
|
31
34
|
}
|
|
32
35
|
|
|
33
|
-
:host(:hover) {
|
|
34
|
-
background-color: var(--og-accent-color-alpha-
|
|
36
|
+
:host(:hover) .inner {
|
|
37
|
+
background-color: var(--og-accent-color-alpha-30);
|
|
35
38
|
}
|
|
36
39
|
|
|
37
|
-
:host([active]) {
|
|
38
|
-
background-color: var(--og-accent-color
|
|
40
|
+
:host([active]) .inner {
|
|
41
|
+
background-color: var(--og-accent-color);
|
|
42
|
+
color: var(--og-text-color-2);
|
|
39
43
|
}
|
|
40
44
|
|
|
41
45
|
* {
|
|
42
46
|
box-sizing: border-box;
|
|
43
47
|
}
|
|
44
48
|
|
|
49
|
+
.inner {
|
|
50
|
+
width: 100%;
|
|
51
|
+
height: 100%;
|
|
52
|
+
display: flex;
|
|
53
|
+
flex-direction: column;
|
|
54
|
+
align-items: center;
|
|
55
|
+
justify-content: center;
|
|
56
|
+
border-radius: var(--og-base-radius);
|
|
57
|
+
}
|
|
58
|
+
|
|
45
59
|
.icon {
|
|
46
|
-
|
|
47
|
-
line-height:
|
|
60
|
+
flex: 1;
|
|
61
|
+
line-height: 22px;
|
|
48
62
|
}
|
|
49
63
|
|
|
50
64
|
.text {
|
|
65
|
+
flex: 0;
|
|
51
66
|
font-size: 8px;
|
|
52
67
|
height: 10px;
|
|
53
68
|
line-height: 10px;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"bucketButton.js","sourceRoot":"","sources":["../../src/ui/bucketButton.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAY,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAGrD,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,UAAU;IAArC;;QASN,WAAM,GAAG,KAAK,CAAA;
|
|
1
|
+
{"version":3,"file":"bucketButton.js","sourceRoot":"","sources":["../../src/ui/bucketButton.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAY,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAGrD,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,UAAU;IAArC;;QASN,WAAM,GAAG,KAAK,CAAA;QA0Dd,WAAM,GAAG,GAAG,EAAE,CAAC,IAAI,CAAA;;;sBAGE,IAAI,CAAC,QAAQ;;uBAEZ,IAAI,CAAC,IAAI;;EAE9B,CAAC;IAEH,CAAC;IAbA,IAAY,QAAQ;QACnB,OAAO,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAE,IAAI,EAAC,CAAa,CAAC;IAC3G,CAAC;;AAnDM,mBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+ClB,AA/CY,CA+CX;AA1DF;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;0CACZ;AAGb;IADC,QAAQ,EAAE;0CACW;AAGtB;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;4CAC3B;AAGd;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;gDACW;AAZxB,YAAY;IADxB,aAAa,CAAC,kBAAkB,CAAC;GACrB,YAAY,CA4ExB","sourcesContent":["import { IconSpec, utils } from '@omegagrid/core';\nimport { LitElement, html, css } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\n@customElement('og-bucket-button')\nexport class BucketButton extends LitElement {\n\n\t@property({type: String})\n\ttext: string;\n\n\t@property()\n\ticon: IconSpec|string;\n\n\t@property({type: Boolean, reflect: true})\n\tactive = false\n\n\t@property({type: String})\n\tstatusIcon: string|[string, string];\n\n\tstatic styles = css`\n\t\t:host {\n\t\t\tdisplay: block;\n\t\t\twidth: 40px;\n\t\t\theight: 40px;\n\t\t\tcursor: pointer;\n\t\t\tpadding: 4px;\n\t\t}\n\n\t\t:host(:hover) .inner {\n\t\t\tbackground-color: var(--og-accent-color-alpha-30);\n\t\t}\n\t\t\n\t\t:host([active]) .inner {\n\t\t\tbackground-color: var(--og-accent-color);\n\t\t\tcolor: var(--og-text-color-2);\n\t\t}\n\n\t\t* {\n\t\t\tbox-sizing: border-box;\n\t\t}\n\n\t\t.inner {\n\t\t\twidth: 100%;\n\t\t\theight: 100%;\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\tborder-radius: var(--og-base-radius);\n\t\t}\n\n\t\t.icon {\n\t\t\tflex: 1;\n\t\t\tline-height: 22px;\n\t\t}\n\n\t\t.text {\n\t\t\tflex: 0;\n\t\t\tfont-size: 8px;\n\t\t\theight: 10px;\n\t\t\tline-height: 10px;\n\t\t}\n\n\t\t.statusicon {\n\t\t\tcolor: var(--og-accent-color);\n\t\t}\n\t`;\n\n\tprivate get iconSpec() {\n\t\treturn Object.assign(utils.isObject(this.icon) ? this.icon : {icon: this.icon}, {size: 'lg'}) as IconSpec;\n\t}\n\n\trender = () => html`\n\t\t<div class=\"inner\">\n\t\t\t<div class=\"icon\">\n\t\t\t\t<og-icon .icon=\"${this.iconSpec}\"></og-icon>\n\t\t\t</div>\n\t\t\t<div class=\"text\">${this.text}</div>\n\t\t</div>\n\t`;\n\n}"]}
|
package/dist/ui/sidemenu.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { List, ListItemElement,
|
|
1
|
+
import { List, ListItemElement, Tooltip } from '@omegagrid/core';
|
|
2
2
|
import { LitElement } from 'lit';
|
|
3
3
|
import { SidemenuSettings } from '../types';
|
|
4
4
|
export declare class Sidemenu extends LitElement {
|
|
@@ -9,12 +9,14 @@ export declare class Sidemenu extends LitElement {
|
|
|
9
9
|
get tooltip(): Tooltip;
|
|
10
10
|
get count(): number;
|
|
11
11
|
private _hideTimer;
|
|
12
|
+
private items;
|
|
12
13
|
constructor();
|
|
13
14
|
requestHide(): void;
|
|
14
15
|
_onMouseMove: (_e: MouseEvent, elm: ListItemElement) => void;
|
|
15
|
-
updated(): void
|
|
16
|
+
updated(): Promise<void>;
|
|
17
|
+
updateActiveIndex(): void;
|
|
16
18
|
firstUpdated(): void;
|
|
17
|
-
_itemRenderer:
|
|
19
|
+
_itemRenderer: (div: HTMLDivElement, index: number) => Promise<void>;
|
|
18
20
|
render: () => import("lit-html").TemplateResult<1>;
|
|
19
21
|
}
|
|
20
22
|
//# sourceMappingURL=sidemenu.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sidemenu.d.ts","sourceRoot":"","sources":["../../src/ui/sidemenu.ts"],"names":[],"mappings":"AACA,OAAO,
|
|
1
|
+
{"version":3,"file":"sidemenu.d.ts","sourceRoot":"","sources":["../../src/ui/sidemenu.ts"],"names":[],"mappings":"AACA,OAAO,EAAuB,IAAI,EAAE,eAAe,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AACtF,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAqB5C,qBACa,QAAS,SAAQ,UAAU;IAGvC,QAAQ,EAAE,gBAAgB,CAAC;IAG3B,IAAI,EAAE,IAAI,CAAC;IAEX,MAAM,CAAC,MAAM,0BAYX;IAEF,OAAO,CAAC,UAAU,CAAwB;IAC1C,IAAI,OAAO,YAAqC;IAEhD,IAAI,KAAK,WAA+C;IAExD,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,KAAK,CAUV;;IAYH,WAAW;IASX,YAAY,OAAQ,UAAU,OAAO,eAAe,UAQnD;IAEK,OAAO;IAOb,iBAAiB;IAQjB,YAAY;IAIZ,aAAa,QAAe,cAAc,SAAS,MAAM,mBAIxD;IAED,MAAM,6CAYJ;CAEF"}
|
package/dist/ui/sidemenu.js
CHANGED
|
@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
5
5
|
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
6
|
};
|
|
7
7
|
import constants from '../constants';
|
|
8
|
-
import { dom } from '@omegagrid/core';
|
|
8
|
+
import { ComponentStore, dom } from '@omegagrid/core';
|
|
9
9
|
import { LitElement, html, css } from 'lit';
|
|
10
10
|
import { customElement, property, query } from 'lit/decorators.js';
|
|
11
11
|
import { createRef, ref } from 'lit/directives/ref.js';
|
|
@@ -15,7 +15,11 @@ const itemStyle = css `
|
|
|
15
15
|
text-align: center;
|
|
16
16
|
border-bottom: 1px solid var(--og-border-color);
|
|
17
17
|
color: var(--og-text-color);
|
|
18
|
-
|
|
18
|
+
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.item, .item.selected {
|
|
22
|
+
background-color: var(--og-background-color) !important;
|
|
19
23
|
}
|
|
20
24
|
|
|
21
25
|
.item.selected og-bucket-button, .item:hover og-bucket-button {
|
|
@@ -28,6 +32,17 @@ let Sidemenu = class Sidemenu extends LitElement {
|
|
|
28
32
|
constructor() {
|
|
29
33
|
super();
|
|
30
34
|
this.tooltipRef = createRef();
|
|
35
|
+
this.items = new ComponentStore((index) => {
|
|
36
|
+
const item = this.settings?.items[index];
|
|
37
|
+
const b = dom.createElement('og-bucket-button', {
|
|
38
|
+
active: this.settings?.activeIndex === index,
|
|
39
|
+
text: item.text,
|
|
40
|
+
icon: item.icon,
|
|
41
|
+
statusIcon: ['fas', item.statusIcon]
|
|
42
|
+
});
|
|
43
|
+
console.log('creating item', index, b);
|
|
44
|
+
return b;
|
|
45
|
+
});
|
|
31
46
|
this._onMouseMove = (_e, elm) => {
|
|
32
47
|
const tooltip = this.settings.items[elm.index].tooltip;
|
|
33
48
|
if (tooltip) {
|
|
@@ -38,16 +53,10 @@ let Sidemenu = class Sidemenu extends LitElement {
|
|
|
38
53
|
this.tooltip.deatach();
|
|
39
54
|
}
|
|
40
55
|
};
|
|
41
|
-
this._itemRenderer = (
|
|
42
|
-
const item = this.
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
.text="${item.text}"
|
|
46
|
-
.icon="${item.icon}"
|
|
47
|
-
.color="${item.color}"
|
|
48
|
-
.statusIcon="${['fas', item.statusIcon]}">
|
|
49
|
-
</og-bucket-button>
|
|
50
|
-
`;
|
|
56
|
+
this._itemRenderer = async (div, index) => {
|
|
57
|
+
const item = await this.items.get(index);
|
|
58
|
+
dom.empty(div);
|
|
59
|
+
div.appendChild(item);
|
|
51
60
|
};
|
|
52
61
|
this.render = () => html `
|
|
53
62
|
<og-list
|
|
@@ -55,7 +64,8 @@ let Sidemenu = class Sidemenu extends LitElement {
|
|
|
55
64
|
?nativeHeight="${true}"
|
|
56
65
|
.customStyle="${itemStyle}"
|
|
57
66
|
itemHeight="${constants.SIDEMENU_WIDTH}"
|
|
58
|
-
.itemRenderer="${this._itemRenderer}"
|
|
67
|
+
.itemRenderer="${this._itemRenderer}"
|
|
68
|
+
@select="${() => this.updateActiveIndex()}">
|
|
59
69
|
</og-list>
|
|
60
70
|
<og-tooltip ${ref(this.tooltipRef)} style="max-width: 300px; display: none">
|
|
61
71
|
<div style="padding: 5px" slot="body"></div>
|
|
@@ -75,11 +85,19 @@ let Sidemenu = class Sidemenu extends LitElement {
|
|
|
75
85
|
}, 100);
|
|
76
86
|
}
|
|
77
87
|
}
|
|
78
|
-
updated() {
|
|
88
|
+
async updated() {
|
|
79
89
|
if (this.settings?.activeIndex >= 0) {
|
|
80
90
|
this.list.select(this.settings?.activeIndex);
|
|
91
|
+
this.updateActiveIndex();
|
|
81
92
|
}
|
|
82
93
|
}
|
|
94
|
+
updateActiveIndex() {
|
|
95
|
+
this.settings.activeIndex = this.list.selectedIndex;
|
|
96
|
+
this.items.forEach((item, index) => {
|
|
97
|
+
console.log('updating item', index, item);
|
|
98
|
+
item.active = index === this.settings.activeIndex;
|
|
99
|
+
});
|
|
100
|
+
}
|
|
83
101
|
firstUpdated() {
|
|
84
102
|
document.body.appendChild(this.tooltip);
|
|
85
103
|
}
|
package/dist/ui/sidemenu.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sidemenu.js","sourceRoot":"","sources":["../../src/ui/sidemenu.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,SAAS,MAAM,cAAc,CAAC;AACrC,OAAO,EAAE,GAAG,
|
|
1
|
+
{"version":3,"file":"sidemenu.js","sourceRoot":"","sources":["../../src/ui/sidemenu.ts"],"names":[],"mappings":"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","sourcesContent":["import constants from '../constants';\nimport { ComponentStore, dom, List, ListItemElement, Tooltip } from '@omegagrid/core';\nimport { LitElement, html, css } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { createRef, ref } from 'lit/directives/ref.js';\nimport { SidemenuSettings } from '../types';\nimport { BucketButton } from './bucketButton';\n\nconst itemStyle = css`\n\t.item {\n\t\tvertical-align: middle;\n\t\ttext-align: center;\n\t\tborder-bottom: 1px solid var(--og-border-color);\n\t\tcolor: var(--og-text-color);\n\t\t\n\t}\n\n\t.item, .item.selected {\n\t\tbackground-color: var(--og-background-color) !important;\n\t}\n\n\t.item.selected og-bucket-button, .item:hover og-bucket-button {\n\t\tcolor: var(--og-text-color-3);\n\t}\n`;\n\n@customElement('og-bucket-sidemenu')\nexport class Sidemenu extends LitElement {\n\n\t@property({type: Object})\n\tsettings: SidemenuSettings;\n\n\t@query('og-list')\n\tlist: List;\n\n\tstatic styles = css`\n\t\t:host {\n\t\t\tdisplay: block;\n\t\t}\n\n\t\t* {\n\t\t\tbox-sizing: border-box;\n\t\t}\n\n\t\tog-list {\n\t\t\theight: 100%;\n\t\t}\n\t`;\n\n\tprivate tooltipRef = createRef<Tooltip>();\n\tget tooltip() { return this.tooltipRef?.value; }\n\n\tget count() { return this.settings?.items?.length ?? 0 }\n\n\tprivate _hideTimer: number;\n\tprivate items = new ComponentStore<BucketButton>((index: number) => {\n\t\tconst item = this.settings?.items[index];\n\t\tconst b = dom.createElement<BucketButton>('og-bucket-button', {\n\t\t\tactive: this.settings?.activeIndex === index,\n\t\t\ttext: item.text,\n\t\t\ticon: item.icon,\n\t\t\tstatusIcon: ['fas', item.statusIcon]\n\t\t});\n\t\tconsole.log('creating item', index, b);\n\t\treturn b\n\t});\n\n\tconstructor() {\n\t\tsuper();\n\t\tdom.debounceOn(this, 'mousemove', '.item', this._onMouseMove, {wait: 10, noMatchCallback: () => {\n\t\t\tthis.tooltip.deatach();\n\t\t}});\n\n\t\tdom.on(this, 'mouseout', '.item', () => this.requestHide());\n\t\tdom.on(this, 'mouseleave', '.item', () => this.requestHide());\n\t}\n\n\trequestHide() {\n\t\tif (this._hideTimer == null) {\n\t\t\tthis._hideTimer = window.setTimeout(() => {\n\t\t\t\tthis.tooltip.deatach();\n\t\t\t\tthis._hideTimer = null;\n\t\t\t}, 100)\n\t\t}\n\t}\n\t\n\t_onMouseMove = (_e: MouseEvent, elm: ListItemElement) => {\n\t\tconst tooltip = this.settings.items[elm.index].tooltip;\n\t\tif (tooltip) {\n\t\t\t(this.tooltip.querySelector('[slot=\"body\"]') as HTMLDivElement).innerText = tooltip;\n\t\t\tthis.tooltip.attachTo(elm, 'right');\n\t\t} else {\n\t\t\tthis.tooltip.deatach();\n\t\t}\n\t}\n\n\tasync updated() {\n\t\tif (this.settings?.activeIndex >= 0) {\n\t\t\tthis.list.select(this.settings?.activeIndex);\n\t\t\tthis.updateActiveIndex();\n\t\t}\n\t}\n\n\tupdateActiveIndex() {\n\t\tthis.settings.activeIndex = this.list.selectedIndex;\n\t\tthis.items.forEach((item, index) => {\n\t\t\tconsole.log('updating item', index, item);\n\t\t\titem.active = index === this.settings.activeIndex;\n\t\t});\n\t}\n\n\tfirstUpdated() {\n\t\tdocument.body.appendChild(this.tooltip);\n\t}\n\n\t_itemRenderer = async (div: HTMLDivElement, index: number) => {\n\t\tconst item = await this.items.get(index);\n\t\tdom.empty(div);\n\t\tdiv.appendChild(item);\n\t}\n\n\trender = () => html`\n\t\t<og-list\n\t\t\tsize=\"${this.count}\"\n\t\t\t?nativeHeight=\"${true}\"\n\t\t\t.customStyle=\"${itemStyle}\"\n\t\t\titemHeight=\"${constants.SIDEMENU_WIDTH}\"\n\t\t\t.itemRenderer=\"${this._itemRenderer}\"\n\t\t\t@select=\"${() => this.updateActiveIndex()}\">\n\t\t</og-list>\n\t\t<og-tooltip ${ref(this.tooltipRef)} style=\"max-width: 300px; display: none\">\n\t\t\t<div style=\"padding: 5px\" slot=\"body\"></div>\n\t\t</og-tooltip>\n\t`;\n\n}"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@omegagrid/bucket",
|
|
3
|
-
"version": "0.6.
|
|
3
|
+
"version": "0.6.63",
|
|
4
4
|
"license": "UNLICENSED",
|
|
5
5
|
"description": "Application layout component",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -28,10 +28,10 @@
|
|
|
28
28
|
},
|
|
29
29
|
"dependencies": {
|
|
30
30
|
"@fortawesome/fontawesome-svg-core": "6.4.2",
|
|
31
|
-
"@omegagrid/commands": "^0.6.
|
|
32
|
-
"@omegagrid/core": "^0.6.
|
|
33
|
-
"@omegagrid/dialog": "^0.6.
|
|
34
|
-
"@omegagrid/tabs": "^0.6.
|
|
31
|
+
"@omegagrid/commands": "^0.6.63",
|
|
32
|
+
"@omegagrid/core": "^0.6.63",
|
|
33
|
+
"@omegagrid/dialog": "^0.6.63",
|
|
34
|
+
"@omegagrid/tabs": "^0.6.63",
|
|
35
35
|
"@riovir/wc-fontawesome": "^0.1.9",
|
|
36
36
|
"lit": "^3.1.1",
|
|
37
37
|
"ts-debounce": "^4.0.0"
|