@elenajs/elements 0.0.4 → 0.0.6
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/bundle.css +1 -0
- package/dist/bundle.js +2 -0
- package/dist/bundle.js.map +1 -0
- package/dist/button.js +1 -10
- package/dist/button.js.map +1 -1
- package/dist/input.js +1 -18
- package/dist/input.js.map +1 -1
- package/package.json +6 -5
package/dist/bundle.css
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
elena-button{--elena-button-bg:transparent;--elena-button-text:#333;--elena-button-border:#f19c77;--elena-button-radius:10rem;--elena-button-font:sans-serif;all:unset;display:inline-flex}:is(elena-button:not(.elena-hydrated),.elena-button){all:unset;-webkit-appearance:none;appearance:none;display:inline-flex;-webkit-user-select:none;user-select:none;background:var(--elena-button-bg);color:var(--elena-button-text);border-radius:var(--elena-button-radius);border:2px solid var(--elena-button-border);font-family:var(--elena-button-font);font-weight:700;padding:0.75rem 1.25rem;cursor:pointer}elena-button:hover{opacity:0.8}elena-button:active{opacity:0.6}elena-button:focus-within{box-shadow:0 0 0 3px red}elena-button[disabled]{--elena-button-bg:#2b1c15;--elena-button-text:#fff;--elena-button-border:#2b1c15;opacity:0.3;pointer-events:none}elena-button[variant="primary"]{--elena-button-bg:#f19c77;--elena-button-text:#2b1c15}elena-button[variant="danger"]{--elena-button-text:red;--elena-button-border:red}elena-input{--elena-input-bg:transparent;--elena-input-text:#333;--elena-input-border:#333;--elena-input-radius:4px;--elena-input-font:sans-serif;all:unset;min-inline-size:300px;box-sizing:border-box;display:inline-flex;flex-direction:column;gap:5px}:is(elena-input:not(.elena-hydrated),.elena-input){-webkit-appearance:none;appearance:none;display:inline-flex;-webkit-user-select:none;user-select:none;line-height:1;block-size:3rem;background:var(--elena-input-bg);color:var(--elena-input-text);border-radius:var(--elena-input-radius);border:1px solid var(--elena-input-border);font-family:var(--elena-input-font);font-weight:700;padding:0.75rem 1.25rem;cursor:text;position:relative}elena-input:not(.elena-hydrated){margin-block-start:1.82rem}elena-input:not(.elena-hydrated)::before{content:attr(label);position:absolute;font-weight:700;top:-1.78rem;left:-1px;display:block;inline-size:100%}elena-input:not(.elena-hydrated)::after{content:attr(placeholder);display:flex;align-items:center;block-size:100%;color:#aaa}elena-input .elena-input{font-size:100%;box-sizing:border-box;inline-size:100%}elena-input label{font-weight:700;display:block;block-size:1.5rem;margin:0;inline-size:100%}.elena-input-container{inline-size:100%}elena-input input:focus{box-shadow:0 0 0 1px red}elena-input input::placeholder{opacity:1;color:#aaa}elena-input[error]{--elena-input-border:red}elena-input .elena-error{color:red}elena-stack{display:flex;justify-content:flex-start;flex-flow:column wrap;gap:1rem}elena-stack[dir="row"]{flex-direction:row}
|
package/dist/bundle.js
ADDED
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
function e(e,t,n){if(t="boolean"===e&&"boolean"!=typeof t?null!==t:t,!n)return t;if("toAttribute"===n)switch(e){case"object":case"array":return null===t?null:JSON.stringify(t);case"boolean":return t?"":null;case"number":return null===t?null:t;default:return t}else switch(e){case"object":case"array":return t&&JSON.parse(t);case"boolean":default:return t;case"number":return null!==t?+t:t}}function t(e,t,n){e?null===n?e.removeAttribute(t):e.setAttribute(t,n):console.warn("░█ [ELENA]: Cannot sync attributes to a null element.")}let n,s=class extends Event{constructor(e,t){super(e,{bubbles:!0,composed:!0,...t})}};function r(e,t){"undefined"!=typeof window&&"customElements"in window&&(window.customElements.get(e)||window.customElements.define(e,t))}function l(e){const t={"&":"&","<":"<",">":">",'"':""","'":"'"};return String(e).replace(/[&<>"']/g,e=>t[e])}function i(e,...t){const n=e.reduce((e,n,s)=>e+n+l(String(t[s]??"")),"");return{__raw:!0,toString:()=>n}}function a(e,t,n){(function(e,t,n){if(e._tplStrings!==t||!e._tplParts)return!1;let s=!1;for(let t=0;t<n.length;t++){const r=n[t],i=r&&r.__raw,a=i?String(r):l(String(r??""));if(a!==e._tplValues[t])if(e._tplValues[t]=a,i)s=!0;else{const n=e._tplParts[t];n?n.textContent=String(r??""):s=!0}}return!s})(e,t,n)||function(e,t,n){const s=n.map(e=>e&&e.__raw?String(e):l(String(e??""))),r=t.reduce((e,t,n)=>e+t.replace(/\n\s*/g," ")+(s[n]??""),"").replace(/>\s+</g,"><").replace(/>\s+/g,">").replace(/\s+</g,"<").trim();o(e,r),e._tplStrings=t,e._tplValues=s,e._tplParts=function(e,t){const n=new Array(t.length),s=document.createTreeWalker(e,NodeFilter.SHOW_TEXT);let r,l=0;for(;(r=s.nextNode())&&l<t.length;)r.textContent===t[l]&&(n[l]=r,l++);return n}(e,s)}(e,t,n)}function o(e,t){e?e.replaceChildren((n??=document.createRange()).createContextualFragment(t)):console.warn("░█ [ELENA]: Cannot render to a null element.")}function u(n,r){const l=r&&r.element?/^[a-z][a-z0-9-]*$/i.test(r.element)?e=>e.getElementsByClassName(r.element)[0]:e=>e.querySelector(r.element):e=>e.firstElementChild;class i extends n{element=null;attributeChangedCallback(t,n,s){(function(t,n,s,r){if(s!==r){const s=e(typeof t[n],r,"toProp");t[n]=s}})(this,t,n,s),this.element&&n!==s&&this.render()}static get observedAttributes(){return r&&r.props?r.props:[]}render(){}template(e,...t){a(this,e,t)}connectedCallback(){if(this.render(),this.element||(this.element=l(this),this.element||(console.warn("░█ [ELENA]: No element found, using firstElementChild as fallback."),this.element=this.firstElementChild)),this._props)for(const[n,s]of this._props){const r=e(typeof s,s,"toAttribute");"string"==typeof s&&""===s?(this.removeAttribute(n),this.element.removeAttribute(n)):(t(this,n,r),t(this.element,n,r))}!this._events&&r&&r.events&&(this._events=!0,r.events?.forEach(e=>{this.element.addEventListener(e,this),this[e]=(...t)=>this.element[e](...t)})),this.updated()}updated(){this._hydrated||(this._hydrated=!0,this.classList.add("elena-hydrated"))}disconnectedCallback(){this._events&&(this._events=!1,r.events?.forEach(e=>{this.element?.removeEventListener(e,this)}))}handleEvent(e){r.events?.includes(e.type)&&(e.stopPropagation(),this.dispatchEvent(new s(e.type,{cancelable:!0})))}}return r&&r.props?.length&&function(n,s){for(const r of s)Object.defineProperty(n,r,{configurable:!0,enumerable:!0,get(){return this._props?this._props.get(r):void 0},set(n){if(this._props||(this._props=new Map),n===this._props.get(r))return;if(this._props.set(r,n),!this.isConnected)return;const s=e(typeof n,n,"toAttribute");t(this,r,s),this.element&&t(this.element,r,s)}})}(i.prototype,r.props),i}const c={props:["variant","size","disabled","name","value","type"],events:["click","focus","blur"],element:".elena-button"};class h extends(u(HTMLElement,c)){constructor(){super(),this.variant="default",this.size="md",this.disabled=!1,this.name="",this.value="",this.type="button"}render(){const e=this.textContent.trim();this.template`<button class="elena-button" type="${this.type||"button"}" ${this.name?`name="${this.name}"`:""} ${this.value?`value="${this.value}"`:""} ${this.disabled?"disabled":""}>${e}</button>`}}r("elena-button",h);const p={props:["size","disabled","name","value","type","label","error","placeholder"],events:["click","focus","blur"],element:".elena-input"};class d extends(u(HTMLElement,p)){constructor(){super(),this.size="md",this.disabled=!1,this.name="",this.label="",this.value="",this.placeholder="",this.type="text",this.error=""}render(){this.template`<label for="input">${this.label}</label><div class="elena-input-container"><span class="elena-input-start"></span> <input id="input" class="elena-input" type="${this.type}" value="${this.value}" placeholder="${this.placeholder}" ${this.name?`name="${this.name}"`:""} ${this.value?`value="${this.value}"`:""} ${this.disabled?"disabled":""}> <span class="elena-input-end"></span></div>${this.error?i`<div class="elena-error" role="alert">${this.error}</div>`:""}`}}r("elena-input",d);class m extends(u(HTMLElement)){constructor(){super()}}r("elena-stack",m);export{h as Button,d as Input,m as Stack};
|
|
2
|
+
//# sourceMappingURL=bundle.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"bundle.js","sources":["../../core/dist/props.js","../../core/dist/events.js","../../core/dist/render.js","../../core/dist/utils.js","../../core/dist/elena.js","../src/button/button.js","../src/input/input.js","../src/stack/stack.js"],"sourcesContent":["function t(t,e,n){if(e=\"boolean\"===t&&\"boolean\"!=typeof e?null!==e:e,!n)return e;if(\"toAttribute\"===n)switch(t){case\"object\":case\"array\":return null===e?null:JSON.stringify(e);case\"boolean\":return e?\"\":null;case\"number\":return null===e?null:e;default:return e}else switch(t){case\"object\":case\"array\":return e&&JSON.parse(e);case\"boolean\":default:return e;case\"number\":return null!==e?+e:e}}function e(t,e,n){t?null===n?t.removeAttribute(e):t.setAttribute(e,n):console.warn(\"░█ [ELENA]: Cannot sync attributes to a null element.\")}function n(n,r){for(const o of r)Object.defineProperty(n,o,{configurable:!0,enumerable:!0,get(){return this._props?this._props.get(o):void 0},set(n){if(this._props||(this._props=new Map),n===this._props.get(o))return;if(this._props.set(o,n),!this.isConnected)return;const r=t(typeof n,n,\"toAttribute\");e(this,o,r),this.element&&e(this.element,o,r)}})}function r(e,n,r,o){if(r!==o){const r=t(typeof e[n],o,\"toProp\");e[n]=r}}export{t as getPropValue,r as getProps,n as setProps,e as syncAttribute};\n//# sourceMappingURL=props.js.map\n","class e extends Event{constructor(e,s){super(e,{bubbles:!0,composed:!0,...s})}}export{e as ElenaEvent};\n//# sourceMappingURL=events.js.map\n","import{escapeHtml as t}from\"./utils.js\";function e(e,n,l){(function(e,n,r){if(e._tplStrings!==n||!e._tplParts)return!1;let l=!1;for(let n=0;n<r.length;n++){const a=r[n],o=a&&a.__raw,c=o?String(a):t(String(a??\"\"));if(c!==e._tplValues[n])if(e._tplValues[n]=c,o)l=!0;else{const t=e._tplParts[n];t?t.textContent=String(a??\"\"):l=!0}}return!l})(e,n,l)||function(e,n,l){const a=l.map(e=>e&&e.__raw?String(e):t(String(e??\"\"))),o=n.reduce((t,e,n)=>t+e.replace(/\\n\\s*/g,\" \")+(a[n]??\"\"),\"\").replace(/>\\s+</g,\"><\").replace(/>\\s+/g,\">\").replace(/\\s+</g,\"<\").trim();r(e,o),e._tplStrings=n,e._tplValues=a,e._tplParts=function(t,e){const n=new Array(e.length),r=document.createTreeWalker(t,NodeFilter.SHOW_TEXT);let l,a=0;for(;(l=r.nextNode())&&a<e.length;)l.textContent===e[a]&&(n[a]=l,a++);return n}(e,a)}(e,n,l)}let n;function r(t,e){t?t.replaceChildren((n??=document.createRange()).createContextualFragment(e)):console.warn(\"░█ [ELENA]: Cannot render to a null element.\")}export{r as renderHtml,e as renderTemplate};\n//# sourceMappingURL=render.js.map\n","function n(n,t){\"undefined\"!=typeof window&&\"customElements\"in window&&(window.customElements.get(n)||window.customElements.define(n,t))}function t(n){const t={\"&\":\"&\",\"<\":\"<\",\">\":\">\",'\"':\""\",\"'\":\"'\"};return String(n).replace(/[&<>\"']/g,n=>t[n])}function e(n,...e){const o=n.reduce((n,o,i)=>n+o+t(String(e[i]??\"\")),\"\");return{__raw:!0,toString:()=>o}}export{n as defineElement,t as escapeHtml,e as html};\n//# sourceMappingURL=utils.js.map\n","import{setProps as e,getProps as t,getPropValue as s,syncAttribute as n}from\"./props.js\";import{ElenaEvent as i}from\"./events.js\";export{defineElement,html}from\"./utils.js\";import{renderTemplate as r}from\"./render.js\";function l(l,h){const o=h&&h.element?/^[a-z][a-z0-9-]*$/i.test(h.element)?e=>e.getElementsByClassName(h.element)[0]:e=>e.querySelector(h.element):e=>e.firstElementChild;class a extends l{element=null;attributeChangedCallback(e,s,n){t(this,e,s,n),this.element&&s!==n&&this.render()}static get observedAttributes(){return h&&h.props?h.props:[]}render(){}template(e,...t){r(this,e,t)}connectedCallback(){if(this.render(),this.element||(this.element=o(this),this.element||(console.warn(\"░█ [ELENA]: No element found, using firstElementChild as fallback.\"),this.element=this.firstElementChild)),this._props)for(const[e,t]of this._props){const i=s(typeof t,t,\"toAttribute\");\"string\"==typeof t&&\"\"===t?(this.removeAttribute(e),this.element.removeAttribute(e)):(n(this,e,i),n(this.element,e,i))}!this._events&&h&&h.events&&(this._events=!0,h.events?.forEach(e=>{this.element.addEventListener(e,this),this[e]=(...t)=>this.element[e](...t)})),this.updated()}updated(){this._hydrated||(this._hydrated=!0,this.classList.add(\"elena-hydrated\"))}disconnectedCallback(){this._events&&(this._events=!1,h.events?.forEach(e=>{this.element?.removeEventListener(e,this)}))}handleEvent(e){h.events?.includes(e.type)&&(e.stopPropagation(),this.dispatchEvent(new i(e.type,{cancelable:!0})))}}return h&&h.props?.length&&e(a.prototype,h.props),a}export{l as Elena};\n//# sourceMappingURL=elena.js.map\n","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","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","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":["t","e","n","JSON","stringify","parse","removeAttribute","setAttribute","console","warn","e$2","Event","constructor","s","super","bubbles","composed","window","customElements","get","define","String","replace","o","reduce","i","__raw","toString","l","r","_tplStrings","_tplParts","length","a","c","_tplValues","textContent","map","trim","Array","document","createTreeWalker","NodeFilter","SHOW_TEXT","nextNode","replaceChildren","createRange","createContextualFragment","h","element","test","getElementsByClassName","querySelector","firstElementChild","attributeChangedCallback","this","render","observedAttributes","props","template","connectedCallback","_props","_events","events","forEach","addEventListener","updated","_hydrated","classList","add","disconnectedCallback","removeEventListener","handleEvent","includes","type","stopPropagation","dispatchEvent","cancelable","Object","defineProperty","configurable","enumerable","set","Map","isConnected","prototype","options","Button","Elena","HTMLElement","variant","size","disabled","name","value","slottedContent","defineElement","Input","label","placeholder","error","html","Stack"],"mappings":"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"}
|
package/dist/button.js
CHANGED
|
@@ -1,11 +1,2 @@
|
|
|
1
|
-
import{l as t,n as e}from"./elena-f59Xc5oc.js";const s={props:["variant","size","disabled","name","value","type"],events:["click","focus","blur"],element:".elena-button"};class a extends(t(HTMLElement,s)){constructor(){super(),this.variant="default",this.size="md",this.disabled=!1,this.name="",this.value="",this.type="button"}render(){const t=this.textContent.trim();this.template
|
|
2
|
-
<button
|
|
3
|
-
class="elena-button"
|
|
4
|
-
type="${this.type||"button"}"
|
|
5
|
-
${this.name?`name="${this.name}"`:""}
|
|
6
|
-
${this.value?`value="${this.value}"`:""}
|
|
7
|
-
${this.disabled?"disabled":""}>
|
|
8
|
-
${t}
|
|
9
|
-
</button>
|
|
10
|
-
`}}e("elena-button",a);export{a as default};
|
|
1
|
+
import{l as t,n as e}from"./elena-f59Xc5oc.js";const s={props:["variant","size","disabled","name","value","type"],events:["click","focus","blur"],element:".elena-button"};class a extends(t(HTMLElement,s)){constructor(){super(),this.variant="default",this.size="md",this.disabled=!1,this.name="",this.value="",this.type="button"}render(){const t=this.textContent.trim();this.template`<button class="elena-button" type="${this.type||"button"}" ${this.name?`name="${this.name}"`:""} ${this.value?`value="${this.value}"`:""} ${this.disabled?"disabled":""}>${t}</button>`}}e("elena-button",a);export{a as default};
|
|
11
2
|
//# sourceMappingURL=button.js.map
|
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 * 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
|
|
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,sCAGDX,KAAKM,MAAQ,aACnBN,KAAKI,KAAO,SAASJ,KAAKI,QAAU,MACpCJ,KAAKK,MAAQ,UAAUL,KAAKK,SAAW,MACvCL,KAAKG,SAAW,WAAa,MAC3BK,YAGV,EAMFI,EAAc,eAAgBjB"}
|
package/dist/input.js
CHANGED
|
@@ -1,19 +1,2 @@
|
|
|
1
|
-
import{l as e,e as s,n as l}from"./elena-f59Xc5oc.js";const t={props:["size","disabled","name","value","type","label","error","placeholder"],events:["click","focus","blur"],element:".elena-input"};class a extends(e(HTMLElement,t)){constructor(){super(),this.size="md",this.disabled=!1,this.name="",this.label="",this.value="",this.placeholder="",this.type="text",this.error=""}render(){this.template`
|
|
2
|
-
<label for="input">${this.label}</label>
|
|
3
|
-
<div class="elena-input-container">
|
|
4
|
-
<span class="elena-input-start"></span>
|
|
5
|
-
<input
|
|
6
|
-
id="input"
|
|
7
|
-
class="elena-input"
|
|
8
|
-
type="${this.type}"
|
|
9
|
-
value="${this.value}"
|
|
10
|
-
placeholder="${this.placeholder}"
|
|
11
|
-
${this.name?`name="${this.name}"`:""}
|
|
12
|
-
${this.value?`value="${this.value}"`:""}
|
|
13
|
-
${this.disabled?"disabled":""}
|
|
14
|
-
/>
|
|
15
|
-
<span class="elena-input-end"></span>
|
|
16
|
-
</div>
|
|
17
|
-
${this.error?s`<div class="elena-error" role="alert">${this.error}</div>`:""}
|
|
18
|
-
`}}l("elena-input",a);export{a as default};
|
|
1
|
+
import{l as e,e as s,n as l}from"./elena-f59Xc5oc.js";const t={props:["size","disabled","name","value","type","label","error","placeholder"],events:["click","focus","blur"],element:".elena-input"};class a extends(e(HTMLElement,t)){constructor(){super(),this.size="md",this.disabled=!1,this.name="",this.label="",this.value="",this.placeholder="",this.type="text",this.error=""}render(){this.template`<label for="input">${this.label}</label><div class="elena-input-container"><span class="elena-input-start"></span> <input id="input" class="elena-input" type="${this.type}" value="${this.value}" placeholder="${this.placeholder}" ${this.name?`name="${this.name}"`:""} ${this.value?`value="${this.value}"`:""} ${this.disabled?"disabled":""}> <span class="elena-input-end"></span></div>${this.error?s`<div class="elena-error" role="alert">${this.error}</div>`:""}`}}l("elena-input",a);export{a as default};
|
|
19
2
|
//# sourceMappingURL=input.js.map
|
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 {\"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
|
|
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,sBACYV,KAAKI,uIAMVJ,KAAKO,gBACJP,KAAKK,uBACCL,KAAKM,gBAClBN,KAAKG,KAAO,SAASH,KAAKG,QAAU,MACpCH,KAAKK,MAAQ,UAAUL,KAAKK,SAAW,MACvCL,KAAKE,SAAW,WAAa,kDAIrCF,KAAKQ,MAAQG,CAAI,yCAAyCX,KAAKQ,cAAgB,IAEvF,EAMFI,EAAc,cAAejB"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elenajs/elements",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.6",
|
|
4
4
|
"description": "An example Elena custom element library",
|
|
5
5
|
"author": "Ariel Salminen <info@arielsalminen.com>",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -26,14 +26,14 @@
|
|
|
26
26
|
],
|
|
27
27
|
"scripts": {
|
|
28
28
|
"prebuild": "npm run -s clean",
|
|
29
|
-
"start": "web-dev-server --node-resolve --app-index
|
|
29
|
+
"start": "web-dev-server --node-resolve --app-index index.html --open --watch",
|
|
30
30
|
"build": "NODE_OPTIONS='--no-warnings' rollup -c",
|
|
31
31
|
"postbuild": "npm run -s analyze",
|
|
32
32
|
"clean": "rm -rf dist/",
|
|
33
|
-
"analyze": "custom-elements-manifest analyze --config './
|
|
33
|
+
"analyze": "custom-elements-manifest analyze --config './elena.config.js'"
|
|
34
34
|
},
|
|
35
35
|
"dependencies": {
|
|
36
|
-
"@elenajs/core": "0.0.
|
|
36
|
+
"@elenajs/core": "^0.0.3"
|
|
37
37
|
},
|
|
38
38
|
"devDependencies": {
|
|
39
39
|
"@custom-elements-manifest/analyzer": "0.11.0",
|
|
@@ -43,7 +43,8 @@
|
|
|
43
43
|
"custom-element-jsx-integration": "1.6.0",
|
|
44
44
|
"rollup": "4.57.1",
|
|
45
45
|
"rollup-plugin-copy": "3.5.0",
|
|
46
|
+
"rollup-plugin-minify-html-literals-v3": "^1.3.4",
|
|
46
47
|
"rollup-plugin-summary": "3.0.1"
|
|
47
48
|
},
|
|
48
|
-
"gitHead": "
|
|
49
|
+
"gitHead": "ecee01a1000911557a1abe36b265aa9cd08e04a2"
|
|
49
50
|
}
|