@nuralyui/divider 0.0.1
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/divider.component.d.ts +14 -0
- package/divider.component.d.ts.map +1 -0
- package/divider.component.js +57 -0
- package/divider.component.js.map +1 -0
- package/divider.style.d.ts +3 -0
- package/divider.style.d.ts.map +1 -0
- package/divider.style.js +49 -0
- package/divider.style.js.map +1 -0
- package/index.d.ts +2 -0
- package/index.d.ts.map +1 -0
- package/index.js +2 -0
- package/index.js.map +1 -0
- package/package.json +12 -0
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { LitElement } from "lit";
|
|
2
|
+
export declare class HyDivider extends LitElement {
|
|
3
|
+
static styles: import("lit").CSSResult;
|
|
4
|
+
color: string;
|
|
5
|
+
darkColor: string;
|
|
6
|
+
lightColor: string;
|
|
7
|
+
orientation: 'horizontal' | 'vertical';
|
|
8
|
+
thickness: number;
|
|
9
|
+
willUpdate(changedProperties: {
|
|
10
|
+
has: (arg0: string) => any;
|
|
11
|
+
}): void;
|
|
12
|
+
render(): import("lit").TemplateResult<1>;
|
|
13
|
+
}
|
|
14
|
+
//# sourceMappingURL=divider.component.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"divider.component.d.ts","sourceRoot":"","sources":["../../../src/components/divider/divider.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAIvC,qBACa,SAAU,SAAQ,UAAU;IACvC,OAAgB,MAAM,0BAAU;IAGhC,KAAK,SAAM;IAGX,SAAS,SAAM;IAGf,UAAU,SAAM;IAGhB,WAAW,EAAE,YAAY,GAAG,UAAU,CAAgB;IAGtD,SAAS,SAAK;IAEL,UAAU,CAAC,iBAAiB,EAAE;QAAC,GAAG,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,GAAG,CAAA;KAAC;IAe1D,MAAM;CAGhB"}
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
2
|
+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
|
+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
4
|
+
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
5
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
|
+
};
|
|
7
|
+
import { html, LitElement } from "lit";
|
|
8
|
+
import { customElement, property } from "lit/decorators.js";
|
|
9
|
+
import styles from "./divider.style.js";
|
|
10
|
+
let HyDivider = class HyDivider extends LitElement {
|
|
11
|
+
constructor() {
|
|
12
|
+
super(...arguments);
|
|
13
|
+
this.color = '';
|
|
14
|
+
this.darkColor = '';
|
|
15
|
+
this.lightColor = '';
|
|
16
|
+
this.orientation = 'horizontal';
|
|
17
|
+
this.thickness = 1;
|
|
18
|
+
}
|
|
19
|
+
willUpdate(changedProperties) {
|
|
20
|
+
if (changedProperties.has('color')) {
|
|
21
|
+
this.style.setProperty('--hy-divider-color', this.color);
|
|
22
|
+
}
|
|
23
|
+
if (changedProperties.has('darkColor')) {
|
|
24
|
+
this.style.setProperty('--hy-divider-local-dark-color', this.darkColor);
|
|
25
|
+
}
|
|
26
|
+
if (changedProperties.has('lightColor')) {
|
|
27
|
+
this.style.setProperty('--hy-divider-local-light-color', this.lightColor);
|
|
28
|
+
}
|
|
29
|
+
if (changedProperties.has('thickness')) {
|
|
30
|
+
this.style.setProperty('--hy-divider-thickness', `${this.thickness}px`);
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
render() {
|
|
34
|
+
return html ` <div class="divider ${this.orientation}"></div> `;
|
|
35
|
+
}
|
|
36
|
+
};
|
|
37
|
+
HyDivider.styles = styles;
|
|
38
|
+
__decorate([
|
|
39
|
+
property({ type: String })
|
|
40
|
+
], HyDivider.prototype, "color", void 0);
|
|
41
|
+
__decorate([
|
|
42
|
+
property({ type: String })
|
|
43
|
+
], HyDivider.prototype, "darkColor", void 0);
|
|
44
|
+
__decorate([
|
|
45
|
+
property({ type: String })
|
|
46
|
+
], HyDivider.prototype, "lightColor", void 0);
|
|
47
|
+
__decorate([
|
|
48
|
+
property({ type: String })
|
|
49
|
+
], HyDivider.prototype, "orientation", void 0);
|
|
50
|
+
__decorate([
|
|
51
|
+
property({ type: Number })
|
|
52
|
+
], HyDivider.prototype, "thickness", void 0);
|
|
53
|
+
HyDivider = __decorate([
|
|
54
|
+
customElement('hy-divider')
|
|
55
|
+
], HyDivider);
|
|
56
|
+
export { HyDivider };
|
|
57
|
+
//# sourceMappingURL=divider.component.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"divider.component.js","sourceRoot":"","sources":["../../../src/components/divider/divider.component.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,MAAM,MAAM,oBAAoB,CAAC;AAGxC,IAAa,SAAS,GAAtB,MAAa,SAAU,SAAQ,UAAU;IAAzC;;QAIE,UAAK,GAAG,EAAE,CAAC;QAGX,cAAS,GAAG,EAAE,CAAC;QAGf,eAAU,GAAG,EAAE,CAAC;QAGhB,gBAAW,GAA8B,YAAY,CAAC;QAGtD,cAAS,GAAG,CAAC,CAAC;IAoBhB,CAAC;IAlBU,UAAU,CAAC,iBAA+C;QACjE,IAAI,iBAAiB,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE;YAClC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,oBAAoB,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;SAC1D;QACD,IAAI,iBAAiB,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE;YACtC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,+BAA+B,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;SACzE;QACD,IAAI,iBAAiB,CAAC,GAAG,CAAC,YAAY,CAAC,EAAE;YACvC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,gCAAgC,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;SAC3E;QACD,IAAI,iBAAiB,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE;YACtC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,wBAAwB,EAAE,GAAG,IAAI,CAAC,SAAS,IAAI,CAAC,CAAC;SACzE;IACH,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA,wBAAwB,IAAI,CAAC,WAAW,WAAW,CAAC;IACjE,CAAC;CACF,CAAA;AAnCiB,gBAAM,GAAG,MAAO,CAAA;AAGhC;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;wCACd;AAGX;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;4CACV;AAGf;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;6CACT;AAGhB;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;8CAC6B;AAGtD;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;4CACX;AAhBH,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CAoCrB;SApCY,SAAS","sourcesContent":["import { html, LitElement } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport styles from \"./divider.style.js\";\n\n@customElement('hy-divider')\nexport class HyDivider extends LitElement {\n static override styles = styles;\n\n @property({type: String})\n color = '';\n\n @property({type: String})\n darkColor = '';\n\n @property({type: String})\n lightColor = '';\n\n @property({type: String})\n orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n @property({type: Number})\n thickness = 1;\n\n override willUpdate(changedProperties: {has: (arg0: string) => any}) {\n if (changedProperties.has('color')) {\n this.style.setProperty('--hy-divider-color', this.color);\n }\n if (changedProperties.has('darkColor')) {\n this.style.setProperty('--hy-divider-local-dark-color', this.darkColor);\n }\n if (changedProperties.has('lightColor')) {\n this.style.setProperty('--hy-divider-local-light-color', this.lightColor);\n }\n if (changedProperties.has('thickness')) {\n this.style.setProperty('--hy-divider-thickness', `${this.thickness}px`);\n }\n }\n\n override render() {\n return html` <div class=\"divider ${this.orientation}\"></div> `;\n }\n}"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"divider.style.d.ts","sourceRoot":"","sources":["../../../src/components/divider/divider.style.ts"],"names":[],"mappings":";AAEA,wBA8CE"}
|
package/divider.style.js
ADDED
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
import { css } from "lit";
|
|
2
|
+
export default css `
|
|
3
|
+
:host {
|
|
4
|
+
/* Default color variables */
|
|
5
|
+
--hy-divider-color: #e0e0e0; /* Default divider color */
|
|
6
|
+
--hy-divider-local-dark-color: #4a4a4a; /* Dark mode divider color */
|
|
7
|
+
--hy-divider-local-light-color: #e0e0e0; /* Light mode divider color */
|
|
8
|
+
|
|
9
|
+
/* Thickness and spacing */
|
|
10
|
+
--hy-divider-thickness: 1px; /* Default thickness */
|
|
11
|
+
--hy-divider-margin: 8px; /* Default margin */
|
|
12
|
+
|
|
13
|
+
/* Resolved variables */
|
|
14
|
+
--hy-resolved-divider-color: var(--hy-divider-local-color, var(--hy-divider-color));
|
|
15
|
+
--hy-resolved-divider-thickness: var(--hy-divider-thickness);
|
|
16
|
+
--hy-resolved-divider-margin: var(--hy-divider-margin);
|
|
17
|
+
|
|
18
|
+
display: block;
|
|
19
|
+
width: 100%;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.divider {
|
|
23
|
+
background-color: var(--hy-resolved-divider-color);
|
|
24
|
+
margin: var(--hy-resolved-divider-margin) 0;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.horizontal {
|
|
28
|
+
height: var(--hy-resolved-divider-thickness);
|
|
29
|
+
width: 100%;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.vertical {
|
|
33
|
+
width: var(--hy-resolved-divider-thickness);
|
|
34
|
+
height: 100%;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
@media (prefers-color-scheme: dark) {
|
|
38
|
+
:host {
|
|
39
|
+
--hy-resolved-divider-color: var(--hy-divider-local-dark-color, var(--hy-divider-color));
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
@media (prefers-color-scheme: light) {
|
|
44
|
+
:host {
|
|
45
|
+
--hy-resolved-divider-color: var(--hy-divider-local-light-color, var(--hy-divider-color));
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
`;
|
|
49
|
+
//# sourceMappingURL=divider.style.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"divider.style.js","sourceRoot":"","sources":["../../../src/components/divider/divider.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8CjB,CAAC","sourcesContent":["import { css } from \"lit\";\n\nexport default css`\n:host {\n /* Default color variables */\n --hy-divider-color: #e0e0e0; /* Default divider color */\n --hy-divider-local-dark-color: #4a4a4a; /* Dark mode divider color */\n --hy-divider-local-light-color: #e0e0e0; /* Light mode divider color */\n\n /* Thickness and spacing */\n --hy-divider-thickness: 1px; /* Default thickness */\n --hy-divider-margin: 8px; /* Default margin */\n\n /* Resolved variables */\n --hy-resolved-divider-color: var(--hy-divider-local-color, var(--hy-divider-color));\n --hy-resolved-divider-thickness: var(--hy-divider-thickness);\n --hy-resolved-divider-margin: var(--hy-divider-margin);\n\n display: block;\n width: 100%;\n}\n\n.divider {\n background-color: var(--hy-resolved-divider-color);\n margin: var(--hy-resolved-divider-margin) 0;\n}\n\n.horizontal {\n height: var(--hy-resolved-divider-thickness);\n width: 100%;\n}\n\n.vertical {\n width: var(--hy-resolved-divider-thickness);\n height: 100%;\n}\n\n@media (prefers-color-scheme: dark) {\n :host {\n --hy-resolved-divider-color: var(--hy-divider-local-dark-color, var(--hy-divider-color));\n }\n}\n\n@media (prefers-color-scheme: light) {\n :host {\n --hy-resolved-divider-color: var(--hy-divider-local-light-color, var(--hy-divider-color));\n }\n}\n`;"]}
|
package/index.d.ts
ADDED
package/index.d.ts.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/divider/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC"}
|
package/index.js
ADDED
package/index.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/divider/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC","sourcesContent":["export * from './divider.component.js';"]}
|
package/package.json
ADDED