@elenajs/elements 0.0.2 → 0.0.4
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/button.d.ts +24 -0
- package/dist/button.js.map +1 -1
- package/dist/custom-elements.d.ts +3 -2
- package/dist/custom-elements.json +28 -12
- package/dist/index.js +1 -1
- package/dist/input.d.ts +28 -0
- package/dist/input.js.map +1 -1
- package/dist/stack.d.ts +5 -0
- package/dist/stack.js.map +1 -1
- package/package.json +13 -2
package/dist/button.d.ts
ADDED
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
export type { ButtonProps } from './custom-elements.js';
|
|
2
|
+
|
|
3
|
+
declare class Button extends HTMLElement {
|
|
4
|
+
/** The style variant of the button. */
|
|
5
|
+
variant?: "default" | "primary" | "danger";
|
|
6
|
+
/** The size of the button. */
|
|
7
|
+
size?: "sm" | "md" | "lg";
|
|
8
|
+
/** Makes the component disabled. */
|
|
9
|
+
disabled?: Boolean;
|
|
10
|
+
/** The name used to identify the button in forms. */
|
|
11
|
+
name?: string;
|
|
12
|
+
/** The value used to identify the button in forms. */
|
|
13
|
+
value?: string;
|
|
14
|
+
/** The type of the button. */
|
|
15
|
+
type?: "submit" | "reset" | "button";
|
|
16
|
+
/** Programmatically fire click on the component. */
|
|
17
|
+
onclick?: (e: CustomEvent<never>) => void;
|
|
18
|
+
/** Programmatically move focus to the component. */
|
|
19
|
+
onfocus?: (e: CustomEvent<never>) => void;
|
|
20
|
+
/** Programmatically remove focus from the component. */
|
|
21
|
+
onblur?: (e: CustomEvent<never>) => void;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
export default Button;
|
package/dist/button.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.js","sources":["../src/button/button.js"],"sourcesContent":["import { Elena, defineElement } from \"@elenajs/core\";\n\nconst options = {\n props: [\"variant\", \"size\", \"disabled\", \"name\", \"value\", \"type\"],\n events: [\"click\", \"focus\", \"blur\"],\n element: \".elena-button\",\n};\n\n/**\n *
|
|
1
|
+
{"version":3,"file":"button.js","sources":["../src/button/button.js"],"sourcesContent":["import { Elena, defineElement } from \"@elenajs/core\";\n\nconst options = {\n props: [\"variant\", \"size\", \"disabled\", \"name\", \"value\", \"type\"],\n events: [\"click\", \"focus\", \"blur\"],\n element: \".elena-button\",\n};\n\n/**\n * Button component is used for interface actions.\n *\n * @displayName Button\n * @status alpha\n *\n * @event click - Programmatically fire click on the component.\n * @event focus - Programmatically move focus to the component.\n * @event blur - Programmatically remove focus from the component.\n *\n * @cssprop [--elena-button-color-text] - Controls the color of the text.\n * @cssprop [--elena-button-color-bg] - Controls the color of the background.\n * @cssprop [--elena-button-color-border] - Controls the color of the border.\n * @cssprop [--elena-button-radius] - Controls the radius of the component.\n */\nexport default class Button extends Elena(HTMLElement, options) {\n constructor() {\n super();\n\n /**\n * The style variant of the button.\n *\n * @attribute\n * @type {\"default\" | \"primary\" | \"danger\"}\n */\n this.variant = \"default\";\n\n /**\n * The size of the button.\n *\n * @attribute\n * @type {\"sm\" | \"md\" | \"lg\"}\n */\n this.size = \"md\";\n\n /**\n * Makes the component disabled.\n *\n * @attribute\n * @type {Boolean}\n */\n this.disabled = false;\n\n /**\n * The name used to identify the button in forms.\n *\n * @attribute\n * @type {string}\n */\n this.name = \"\";\n\n /**\n * The value used to identify the button in forms.\n *\n * @attribute\n * @type {string}\n */\n this.value = \"\";\n\n /**\n * The type of the button.\n *\n * @attribute\n * @type {\"submit\" | \"reset\" | \"button\"}\n */\n this.type = \"button\";\n }\n\n /**\n * Renders the custom element template.\n *\n * @internal\n */\n render() {\n const slottedContent = this.textContent.trim();\n\n this.template`\n <button\n class=\"elena-button\"\n type=\"${this.type || \"button\"}\"\n ${this.name ? `name=\"${this.name}\"` : \"\"}\n ${this.value ? `value=\"${this.value}\"` : \"\"}\n ${this.disabled ? \"disabled\" : \"\"}>\n ${slottedContent}\n </button>\n `;\n }\n}\n\n/**\n * Register the custom element\n */\ndefineElement(\"elena-button\", Button);\n"],"names":["options","props","events","element","Button","Elena","HTMLElement","constructor","super","this","variant","size","disabled","name","value","type","render","slottedContent","textContent","trim","template","defineElement"],"mappings":"+CAEA,MAAMA,EAAU,CACdC,MAAO,CAAC,UAAW,OAAQ,WAAY,OAAQ,QAAS,QACxDC,OAAQ,CAAC,QAAS,QAAS,QAC3BC,QAAS,iBAkBI,MAAMC,UAAeC,EAAMC,YAAaN,IACrD,WAAAO,GACEC,QAQAC,KAAKC,QAAU,UAQfD,KAAKE,KAAO,KAQZF,KAAKG,UAAW,EAQhBH,KAAKI,KAAO,GAQZJ,KAAKK,MAAQ,GAQbL,KAAKM,KAAO,QACd,CAOA,MAAAC,GACE,MAAMC,EAAiBR,KAAKS,YAAYC,OAExCV,KAAKW,QAAQ;;;gBAGDX,KAAKM,MAAQ;UACnBN,KAAKI,KAAO,SAASJ,KAAKI,QAAU;UACpCJ,KAAKK,MAAQ,UAAUL,KAAKK,SAAW;UACvCL,KAAKG,SAAW,WAAa;YAC3BK;;KAGV,EAMFI,EAAc,eAAgBjB"}
|
|
@@ -112,7 +112,7 @@ export type StackProps = {};
|
|
|
112
112
|
|
|
113
113
|
export type CustomElements = {
|
|
114
114
|
/**
|
|
115
|
-
*
|
|
115
|
+
* Button component is used for interface actions.
|
|
116
116
|
* ---
|
|
117
117
|
*
|
|
118
118
|
*
|
|
@@ -148,7 +148,8 @@ export type CustomElements = {
|
|
|
148
148
|
"elena-input": Partial<InputProps & BaseProps & BaseEvents>;
|
|
149
149
|
|
|
150
150
|
/**
|
|
151
|
-
*
|
|
151
|
+
* Stack component manages layout of immediate children
|
|
152
|
+
* with optional spacing between each child.
|
|
152
153
|
* ---
|
|
153
154
|
*
|
|
154
155
|
*/
|
|
@@ -14,6 +14,22 @@
|
|
|
14
14
|
"name": "default",
|
|
15
15
|
"module": "./button/button.js"
|
|
16
16
|
}
|
|
17
|
+
},
|
|
18
|
+
{
|
|
19
|
+
"kind": "js",
|
|
20
|
+
"name": "Input",
|
|
21
|
+
"declaration": {
|
|
22
|
+
"name": "default",
|
|
23
|
+
"module": "./input/input.js"
|
|
24
|
+
}
|
|
25
|
+
},
|
|
26
|
+
{
|
|
27
|
+
"kind": "js",
|
|
28
|
+
"name": "Stack",
|
|
29
|
+
"declaration": {
|
|
30
|
+
"name": "default",
|
|
31
|
+
"module": "./stack/stack.js"
|
|
32
|
+
}
|
|
17
33
|
}
|
|
18
34
|
]
|
|
19
35
|
},
|
|
@@ -23,7 +39,7 @@
|
|
|
23
39
|
"declarations": [
|
|
24
40
|
{
|
|
25
41
|
"kind": "class",
|
|
26
|
-
"description": "
|
|
42
|
+
"description": "Button component is used for interface actions.",
|
|
27
43
|
"name": "Button",
|
|
28
44
|
"cssProperties": [
|
|
29
45
|
{
|
|
@@ -48,7 +64,7 @@
|
|
|
48
64
|
"kind": "field",
|
|
49
65
|
"name": "variant",
|
|
50
66
|
"type": {
|
|
51
|
-
"text": "
|
|
67
|
+
"text": "\"default\" | \"primary\" | \"danger\""
|
|
52
68
|
},
|
|
53
69
|
"description": "The style variant of the button.",
|
|
54
70
|
"default": "\"default\"",
|
|
@@ -58,7 +74,7 @@
|
|
|
58
74
|
"kind": "field",
|
|
59
75
|
"name": "size",
|
|
60
76
|
"type": {
|
|
61
|
-
"text": "
|
|
77
|
+
"text": "\"sm\" | \"md\" | \"lg\""
|
|
62
78
|
},
|
|
63
79
|
"description": "The size of the button.",
|
|
64
80
|
"default": "\"md\"",
|
|
@@ -98,7 +114,7 @@
|
|
|
98
114
|
"kind": "field",
|
|
99
115
|
"name": "type",
|
|
100
116
|
"type": {
|
|
101
|
-
"text": "
|
|
117
|
+
"text": "\"submit\" | \"reset\" | \"button\""
|
|
102
118
|
},
|
|
103
119
|
"description": "The type of the button.",
|
|
104
120
|
"default": "\"button\"",
|
|
@@ -123,7 +139,7 @@
|
|
|
123
139
|
{
|
|
124
140
|
"name": "variant",
|
|
125
141
|
"type": {
|
|
126
|
-
"text": "
|
|
142
|
+
"text": "\"default\" | \"primary\" | \"danger\""
|
|
127
143
|
},
|
|
128
144
|
"description": "The style variant of the button.",
|
|
129
145
|
"default": "\"default\"",
|
|
@@ -132,7 +148,7 @@
|
|
|
132
148
|
{
|
|
133
149
|
"name": "size",
|
|
134
150
|
"type": {
|
|
135
|
-
"text": "
|
|
151
|
+
"text": "\"sm\" | \"md\" | \"lg\""
|
|
136
152
|
},
|
|
137
153
|
"description": "The size of the button.",
|
|
138
154
|
"default": "\"md\"",
|
|
@@ -168,7 +184,7 @@
|
|
|
168
184
|
{
|
|
169
185
|
"name": "type",
|
|
170
186
|
"type": {
|
|
171
|
-
"text": "
|
|
187
|
+
"text": "\"submit\" | \"reset\" | \"button\""
|
|
172
188
|
},
|
|
173
189
|
"description": "The type of the button.",
|
|
174
190
|
"default": "\"button\"",
|
|
@@ -240,7 +256,7 @@
|
|
|
240
256
|
"kind": "field",
|
|
241
257
|
"name": "size",
|
|
242
258
|
"type": {
|
|
243
|
-
"text": "
|
|
259
|
+
"text": "\"sm\" | \"md\" | \"lg\""
|
|
244
260
|
},
|
|
245
261
|
"description": "The size of the input.",
|
|
246
262
|
"default": "\"md\"",
|
|
@@ -300,7 +316,7 @@
|
|
|
300
316
|
"kind": "field",
|
|
301
317
|
"name": "type",
|
|
302
318
|
"type": {
|
|
303
|
-
"text": "
|
|
319
|
+
"text": "\"text\" | \"email\" | \"password\" | \"tel\" | \"url\" | \"search\" | \"number\" | \"unit\" | \"button\""
|
|
304
320
|
},
|
|
305
321
|
"description": "The type of the input",
|
|
306
322
|
"default": "\"text\"",
|
|
@@ -335,7 +351,7 @@
|
|
|
335
351
|
{
|
|
336
352
|
"name": "size",
|
|
337
353
|
"type": {
|
|
338
|
-
"text": "
|
|
354
|
+
"text": "\"sm\" | \"md\" | \"lg\""
|
|
339
355
|
},
|
|
340
356
|
"description": "The size of the input.",
|
|
341
357
|
"default": "\"md\"",
|
|
@@ -389,7 +405,7 @@
|
|
|
389
405
|
{
|
|
390
406
|
"name": "type",
|
|
391
407
|
"type": {
|
|
392
|
-
"text": "
|
|
408
|
+
"text": "\"text\" | \"email\" | \"password\" | \"tel\" | \"url\" | \"search\" | \"number\" | \"unit\" | \"button\""
|
|
393
409
|
},
|
|
394
410
|
"description": "The type of the input",
|
|
395
411
|
"default": "\"text\"",
|
|
@@ -445,7 +461,7 @@
|
|
|
445
461
|
"declarations": [
|
|
446
462
|
{
|
|
447
463
|
"kind": "class",
|
|
448
|
-
"description": "
|
|
464
|
+
"description": "Stack component manages layout of immediate children\nwith optional spacing between each child.",
|
|
449
465
|
"name": "Stack",
|
|
450
466
|
"mixins": [
|
|
451
467
|
{
|
package/dist/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export{default as Button}from"./button.js";import"./elena-f59Xc5oc.js";
|
|
1
|
+
export{default as Button}from"./button.js";export{default as Input}from"./input.js";export{default as Stack}from"./stack.js";import"./elena-f59Xc5oc.js";
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/dist/input.d.ts
ADDED
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
export type { InputProps } from './custom-elements.js';
|
|
2
|
+
|
|
3
|
+
declare class Input extends HTMLElement {
|
|
4
|
+
/** The size of the input. */
|
|
5
|
+
size?: "sm" | "md" | "lg";
|
|
6
|
+
/** Makes the component disabled. */
|
|
7
|
+
disabled?: Boolean;
|
|
8
|
+
/** The name used to identify the input in forms. */
|
|
9
|
+
name?: string;
|
|
10
|
+
/** The label for the input */
|
|
11
|
+
label?: string;
|
|
12
|
+
/** The value used to identify the input in forms. */
|
|
13
|
+
value?: string;
|
|
14
|
+
/** The placeholder text for the input. */
|
|
15
|
+
placeholder?: string;
|
|
16
|
+
/** The type of the input */
|
|
17
|
+
type?: "text" | "email" | "password" | "tel" | "url" | "search" | "number" | "unit" | "button";
|
|
18
|
+
/** The error to display */
|
|
19
|
+
error?: string;
|
|
20
|
+
/** Programmatically fire click on the component. */
|
|
21
|
+
onclick?: (e: CustomEvent<never>) => void;
|
|
22
|
+
/** Programmatically move focus to the component. */
|
|
23
|
+
onfocus?: (e: CustomEvent<never>) => void;
|
|
24
|
+
/** Programmatically remove focus from the component. */
|
|
25
|
+
onblur?: (e: CustomEvent<never>) => void;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
export default Input;
|
package/dist/input.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input.js","sources":["../src/input/input.js"],"sourcesContent":["import { Elena, defineElement, html } from \"@elenajs/core\";\n\nconst options = {\n props: [\"size\", \"disabled\", \"name\", \"value\", \"type\", \"label\", \"error\", \"placeholder\"],\n events: [\"click\", \"focus\", \"blur\"],\n element: \".elena-input\",\n};\n\n/**\n * The description of the component goes here.\n *\n * @displayName Input\n * @status alpha\n *\n * @event click - Programmatically fire click on the component.\n * @event focus - Programmatically move focus to the component.\n * @event blur - Programmatically remove focus from the component.\n *\n * @cssprop [--elena-input-color-text] - Controls the color of the text.\n * @cssprop [--elena-input-color-bg] - Controls the color of the background.\n * @cssprop [--elena-input-color-border] - Controls the color of the border.\n * @cssprop [--elena-input-radius] - Controls the radius of the component.\n */\nexport default class Input extends Elena(HTMLElement, options) {\n constructor() {\n super();\n\n /**\n * The size of the input.\n *\n * @attribute\n * @type {
|
|
1
|
+
{"version":3,"file":"input.js","sources":["../src/input/input.js"],"sourcesContent":["import { Elena, defineElement, html } from \"@elenajs/core\";\n\nconst options = {\n props: [\"size\", \"disabled\", \"name\", \"value\", \"type\", \"label\", \"error\", \"placeholder\"],\n events: [\"click\", \"focus\", \"blur\"],\n element: \".elena-input\",\n};\n\n/**\n * The description of the component goes here.\n *\n * @displayName Input\n * @status alpha\n *\n * @event click - Programmatically fire click on the component.\n * @event focus - Programmatically move focus to the component.\n * @event blur - Programmatically remove focus from the component.\n *\n * @cssprop [--elena-input-color-text] - Controls the color of the text.\n * @cssprop [--elena-input-color-bg] - Controls the color of the background.\n * @cssprop [--elena-input-color-border] - Controls the color of the border.\n * @cssprop [--elena-input-radius] - Controls the radius of the component.\n */\nexport default class Input extends Elena(HTMLElement, options) {\n constructor() {\n super();\n\n /**\n * The size of the input.\n *\n * @attribute\n * @type {\"sm\" | \"md\" | \"lg\"}\n */\n this.size = \"md\";\n\n /**\n * Makes the component disabled.\n *\n * @attribute\n * @type {Boolean}\n */\n this.disabled = false;\n\n /**\n * The name used to identify the input in forms.\n *\n * @attribute\n * @type {string}\n */\n this.name = \"\";\n\n /**\n * The label for the input\n *\n * @attribute\n * @type {string}\n */\n this.label = \"\";\n\n /**\n * The value used to identify the input in forms.\n *\n * @attribute\n * @type {string}\n */\n this.value = \"\";\n\n /**\n * The placeholder text for the input.\n *\n * @attribute\n * @type {string}\n */\n this.placeholder = \"\";\n\n /**\n * The type of the input\n *\n * @attribute\n * @type {\"text\" | \"email\" | \"password\" | \"tel\" | \"url\" | \"search\" | \"number\" | \"unit\" | \"button\"}\n */\n this.type = \"text\";\n\n /**\n * The error to display\n *\n * @attribute\n * @type {string}\n */\n this.error = \"\";\n }\n\n /**\n * Renders the custom element template.\n *\n * @internal\n */\n render() {\n this.template`\n <label for=\"input\">${this.label}</label>\n <div class=\"elena-input-container\">\n <span class=\"elena-input-start\"></span>\n <input\n id=\"input\"\n class=\"elena-input\"\n type=\"${this.type}\"\n value=\"${this.value}\"\n placeholder=\"${this.placeholder}\"\n ${this.name ? `name=\"${this.name}\"` : \"\"}\n ${this.value ? `value=\"${this.value}\"` : \"\"}\n ${this.disabled ? \"disabled\" : \"\"}\n />\n <span class=\"elena-input-end\"></span>\n </div>\n ${this.error ? html`<div class=\"elena-error\" role=\"alert\">${this.error}</div>` : \"\"}\n `;\n }\n}\n\n/**\n * Register the custom element\n */\ndefineElement(\"elena-input\", Input);\n"],"names":["options","props","events","element","Input","Elena","HTMLElement","constructor","super","this","size","disabled","name","label","value","placeholder","type","error","render","template","html","defineElement"],"mappings":"sDAEA,MAAMA,EAAU,CACdC,MAAO,CAAC,OAAQ,WAAY,OAAQ,QAAS,OAAQ,QAAS,QAAS,eACvEC,OAAQ,CAAC,QAAS,QAAS,QAC3BC,QAAS,gBAkBI,MAAMC,UAAcC,EAAMC,YAAaN,IACpD,WAAAO,GACEC,QAQAC,KAAKC,KAAO,KAQZD,KAAKE,UAAW,EAQhBF,KAAKG,KAAO,GAQZH,KAAKI,MAAQ,GAQbJ,KAAKK,MAAQ,GAQbL,KAAKM,YAAc,GAQnBN,KAAKO,KAAO,OAQZP,KAAKQ,MAAQ,EACf,CAOA,MAAAC,GACET,KAAKU,QAAQ;6BACYV,KAAKI;;;;;;wBAMVJ,KAAKO;yBACJP,KAAKK;+BACCL,KAAKM;kBAClBN,KAAKG,KAAO,SAASH,KAAKG,QAAU;kBACpCH,KAAKK,MAAQ,UAAUL,KAAKK,SAAW;kBACvCL,KAAKE,SAAW,WAAa;;;;UAIrCF,KAAKQ,MAAQG,CAAI,yCAAyCX,KAAKQ,cAAgB;KAEvF,EAMFI,EAAc,cAAejB"}
|
package/dist/stack.d.ts
ADDED
package/dist/stack.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"stack.js","sources":["../src/stack/stack.js"],"sourcesContent":["import { Elena, defineElement } from \"@elenajs/core\";\n\n/**\n *
|
|
1
|
+
{"version":3,"file":"stack.js","sources":["../src/stack/stack.js"],"sourcesContent":["import { Elena, defineElement } from \"@elenajs/core\";\n\n/**\n * Stack component manages layout of immediate children\n * with optional spacing between each child.\n *\n * @displayName Stack\n * @status alpha\n */\nexport default class Stack extends Elena(HTMLElement) {\n constructor() {\n super();\n }\n}\n\n/**\n * Register the custom element\n */\ndefineElement(\"elena-stack\", Stack);\n"],"names":["Stack","Elena","HTMLElement","constructor","super","defineElement"],"mappings":"+CASe,MAAMA,UAAcC,EAAMC,cACvC,WAAAC,GACEC,OACF,EAMFC,EAAc,cAAeL"}
|
package/package.json
CHANGED
|
@@ -1,11 +1,22 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elenajs/elements",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.4",
|
|
4
4
|
"description": "An example Elena custom element library",
|
|
5
5
|
"author": "Ariel Salminen <info@arielsalminen.com>",
|
|
6
6
|
"main": "./dist/index.js",
|
|
7
7
|
"types": "./dist/custom-elements.d.ts",
|
|
8
8
|
"customElements": "dist/custom-elements.json",
|
|
9
|
+
"exports": {
|
|
10
|
+
".": {
|
|
11
|
+
"types": "./dist/custom-elements.d.ts",
|
|
12
|
+
"import": "./dist/index.js"
|
|
13
|
+
},
|
|
14
|
+
"./dist/*.js": {
|
|
15
|
+
"types": "./dist/*.d.ts",
|
|
16
|
+
"import": "./dist/*.js"
|
|
17
|
+
},
|
|
18
|
+
"./dist/*.css": "./dist/*.css"
|
|
19
|
+
},
|
|
9
20
|
"publishConfig": {
|
|
10
21
|
"access": "public"
|
|
11
22
|
},
|
|
@@ -34,5 +45,5 @@
|
|
|
34
45
|
"rollup-plugin-copy": "3.5.0",
|
|
35
46
|
"rollup-plugin-summary": "3.0.1"
|
|
36
47
|
},
|
|
37
|
-
"gitHead": "
|
|
48
|
+
"gitHead": "05a16799099fd572f1ccd1e228f470345ca2a309"
|
|
38
49
|
}
|