@rettangoli/ui 0.1.1 → 0.1.2-rc2

package/README.md

@@ -1,34 +1,34 @@
 
 # Rettangoli
 
-A set of primitives that are all the necessary to build a UI framework
-
-The following:
-* rtgl-view
-* rtgl-text
-* rtgl-image
-* rtgl-svg
-* rtgl-button
-* rtgl-input
-* rtgl-textarea
-
-All UI components should be able to be built from the above primitives
+## Development
 
+### Folder Structure
 
-## Development
+```
+src/
+├── primitives/     # Basic web components built from scratch, no dependencies
+└── components/     # Pre-built components using @rettangoli/fe
+vt/                 # Uses @rettangoli/vt visual testing library
+├── reference/      # Golden screenshots for visual testing
+└── specs/          # HTML test specifications
+```
 
 ### Install dependencies
 
-
+Use npx to install `rtgl` cli globally. You run into issues if try to use `bunx`.
 
 ```bash
-bun install
+npx i -g rtgl
 ```
 
+Install dependencies
 
+```bash
+bun install
+```
 
-
-### Generate test screens
+### Generate specification screens
 
 Bundles the code to be used for `rettangoli-vt`
 
@@ -39,11 +39,68 @@ bun run build:dev
 Uses `rettangoli-vt` to generates test screens 
 
 ```bash
-bun run ../rettangoli-cli/cli.js vt generate --skip-screenshots
+bun run vt:generate
+```
+
+Test for any change using `rettangoli-vt`
+
+```bash
+bun run vt:report
+```
+
+Accept the changes by updating the reference screenshots
+
+```bash
+bun run vt:accept
 ```
 
 You can then access the generates screens
 
 ```bash
-bunx serve ./viz/_site
+bun run serve
+```
+
+Open http://localhost:3000/view to see the specification screens
+
+
+## Usage
+
+### Install via CDN
+
+Use via CDN iife (Immediately Invoked Function Expression) us [JSDeliver](https://www.jsdelivr.com/package/npm/@rettangoli/ui)
+
+Primitives only. This might be useful if you want a light weight version and use only the primitives.
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/@rettangoli/ui@latest/dist/rettangoli-layout.iife.min.js"></script>
+```
+
+All primitives and components
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/@rettangoli/ui@latest/dist/rettangoli-ui.iife.min.js"></script>
+```
+
+### Install via NPM
+
+Install package
+
+```bash
+npm install @rettangoli/ui
+```
+
+Import the package. This allows you to configure more flexible options and to treeshake only the code that you need.
+
+```js
+import { RettangoliView } '@rettangoli/ui';
+customElements.define("rtgl-view", RettangoliView({}));
 ```
+
+### Stylesheet file
+
+Make sure you import a stylesheet file from your html file. [Example](./src/vt/static/public/theme.css)
+
+
+
+
+

package/dist/rettangoli-iife-layout.min.js

@@ -688,8 +688,8 @@ var rettangoli=(()=>{function h(e,...t){let s="";return e.forEach((r,g)=>{s+=r+(
           font-weight: var(--xs-font-weight);
           line-height: var(--xs-line-height);
           letter-spacing: var(--xs-letter-spacing);
-          padding-left: var(--spacing-sm);
-          padding-right: var(--spacing-sm);
+          padding-left: var(--spacing-md);
+          padding-right: var(--spacing-md);
           height: 24px;
         }
         input:focus {
@@ -700,7 +700,7 @@ var rettangoli=(()=>{function h(e,...t){let s="";return e.forEach((r,g)=>{s+=r+(
         }
         ${b}
         ${m}
-      `))}constructor(){super(),e.initializeStyleSheet(),this.shadow=this.attachShadow({mode:"closed"}),this.shadow.adoptedStyleSheets=[e.styleSheet],this._styles={default:{},sm:{},md:{},lg:{},xl:{}},this._lastStyleString="",this._inputElement=document.createElement("input"),this._styleElement=document.createElement("style"),this.shadow.appendChild(this._styleElement),this.shadow.appendChild(this._inputElement),this._inputElement.addEventListener("keydown",this._onChange)}static get observedAttributes(){return["key","type","placeholder","disabled","s",...x([...y,"wh","w","h","hidden","visible","op","z"])]}get value(){return this._inputElement.value}_onChange=t=>{this.dispatchEvent(new CustomEvent("input-keydown",{detail:{value:this._inputElement.value}}))};attributeChangedCallback(t,s,r){if(["type","placeholder","disabled","s"].includes(t)){this._updateInputAttributes();return}this._styles={default:{},sm:{},md:{},lg:{},xl:{}},["default","sm","md","lg","xl"].forEach(i=>{let o=v=>`${i==="default"?"":`${i}-`}${v}`,l=this.getAttribute(o("wh")),a=c(l===null?this.getAttribute(o("w")):l),d=c(l===null?this.getAttribute(o("h")):l),u=this.getAttribute(o("op")),f=this.getAttribute(o("z"));f!==null&&(this._styles[i]["z-index"]=f),u!==null&&(this._styles[i].opacity=u),a==="f"?this._styles[i].width="var(--width-stretch)":a!==void 0&&(this._styles[i].width=a,this._styles[i]["min-width"]=a,this._styles[i]["max-width"]=a),d==="f"?this._styles[i].height="100%":d!==void 0&&(this._styles[i].height=d,this._styles[i]["min-height"]=d,this._styles[i]["max-height"]=d),this.hasAttribute(o("hidden"))&&(this._styles[i].display="none !important"),this.hasAttribute(o("visible"))&&(this._styles[i].display="block !important")});let g=w(this._styles,"input");g!==this._lastStyleString&&(this._styleElement.textContent=g,this._lastStyleString=g)}_updateInputAttributes(){let t=this.getAttribute("type")||"text",s=this.getAttribute("placeholder"),r=this.hasAttribute("disabled");this._inputElement.setAttribute("type",t),s!==null?this._inputElement.setAttribute("placeholder",s):this._inputElement.removeAttribute("placeholder"),r?this._inputElement.setAttribute("disabled",""):this._inputElement.removeAttribute("disabled")}connectedCallback(){this._updateInputAttributes()}},G=({render:e,html:t})=>O;var W=class e extends HTMLElement{static styleSheet=null;static initializeStyleSheet(){e.styleSheet||(e.styleSheet=new CSSStyleSheet,e.styleSheet.replaceSync(h`
+      `))}constructor(){super(),e.initializeStyleSheet(),this.shadow=this.attachShadow({mode:"closed"}),this.shadow.adoptedStyleSheets=[e.styleSheet],this._styles={default:{},sm:{},md:{},lg:{},xl:{}},this._lastStyleString="",this._inputElement=document.createElement("input"),this._styleElement=document.createElement("style"),this.shadow.appendChild(this._styleElement),this.shadow.appendChild(this._inputElement),this._inputElement.addEventListener("input",this._onChange)}static get observedAttributes(){return["key","type","placeholder","disabled","s",...x([...y,"wh","w","h","hidden","visible","op","z"])]}get value(){return this._inputElement.value}_onChange=t=>{this.dispatchEvent(new CustomEvent("input-change",{detail:{value:this._inputElement.value}}))};attributeChangedCallback(t,s,r){if(["type","placeholder","disabled","s"].includes(t)){this._updateInputAttributes();return}this._styles={default:{},sm:{},md:{},lg:{},xl:{}},["default","sm","md","lg","xl"].forEach(i=>{let o=v=>`${i==="default"?"":`${i}-`}${v}`,l=this.getAttribute(o("wh")),a=c(l===null?this.getAttribute(o("w")):l),d=c(l===null?this.getAttribute(o("h")):l),u=this.getAttribute(o("op")),f=this.getAttribute(o("z"));f!==null&&(this._styles[i]["z-index"]=f),u!==null&&(this._styles[i].opacity=u),a==="f"?this._styles[i].width="var(--width-stretch)":a!==void 0&&(this._styles[i].width=a,this._styles[i]["min-width"]=a,this._styles[i]["max-width"]=a),d==="f"?this._styles[i].height="100%":d!==void 0&&(this._styles[i].height=d,this._styles[i]["min-height"]=d,this._styles[i]["max-height"]=d),this.hasAttribute(o("hidden"))&&(this._styles[i].display="none !important"),this.hasAttribute(o("visible"))&&(this._styles[i].display="block !important")});let g=w(this._styles,"input");g!==this._lastStyleString&&(this._styleElement.textContent=g,this._lastStyleString=g)}_updateInputAttributes(){let t=this.getAttribute("type")||"text",s=this.getAttribute("placeholder"),r=this.hasAttribute("disabled");this._inputElement.setAttribute("type",t),s!==null?this._inputElement.setAttribute("placeholder",s):this._inputElement.removeAttribute("placeholder"),r?this._inputElement.setAttribute("disabled",""):this._inputElement.removeAttribute("disabled")}connectedCallback(){this._updateInputAttributes()}},G=({render:e,html:t})=>O;var W=class e extends HTMLElement{static styleSheet=null;static initializeStyleSheet(){e.styleSheet||(e.styleSheet=new CSSStyleSheet,e.styleSheet.replaceSync(h`
         :host {
           display: contents;
         }