@degreesign/ui 1.0.2 → 1.0.3

package/README.md

@@ -1 +1,132 @@
-# DegreeSign UI functions
+# DegreeSign UI functions
+
+A lightweight TypeScript library for managing UI elements in web applications.
+
+## Installation
+
+Install the package via npm:
+
+```bash
+npm install @degreesign/ui
+```
+
+## Usage
+
+Import the functions from the `@degreesign/ui` package in your TypeScript or JavaScript project:
+
+```javascript
+import { selectElement, selectAll, showElement, hideElement, repeatElements } from '@degreesign/ui';
+```
+
+Below are the available functions and their usage examples.
+
+## Functions
+
+### `selectElement(id: string, parent?: Element) => HTMLElement`
+
+Selects a single DOM element by its CSS selector, optionally within a parent element.
+
+**Parameters:**
+- `id`: The CSS selector (e.g., `#myId`, `.myClass`) of the element to select.
+- `parent` (optional): The parent element to search within. Defaults to `document`.
+
+**Returns:** An `HTMLElement`.
+
+**Example:**
+```javascript
+// Select an element by ID
+const myDiv = selectElement('#myDiv');
+myDiv.textContent = 'Hello, World!';
+
+// Select an element within a specific parent
+const parent = selectElement('.container');
+const child = selectElement('.child', parent);
+child.style.color = 'blue';
+```
+
+### `selectAll(id: string, parent?: Element) => NodeListOf<Element>`
+
+Selects all DOM elements matching a CSS selector, optionally within a parent element.
+
+**Parameters:**
+- `id`: The CSS selector (e.g., `.myClass`, `div`) to select elements.
+- `parent` (optional): The parent element to search within. Defaults to `document`.
+
+**Returns:** A `NodeListOf<Element>`.
+
+**Example:**
+```javascript
+// Select all elements with a class
+const items = selectAll('.item');
+items.forEach(item => item.style.backgroundColor = 'lightgray');
+
+// Select all divs within a parent
+const parent = selectElement('#parent');
+const divs = selectAll('div', parent);
+divs.forEach(div => div.classList.add('highlight'));
+```
+
+### `showElement(element: HTMLElement) => void`
+
+Sets an element's display style to `flex`, making it visible.
+
+**Parameters:**
+- `element`: The `HTMLElement` to show.
+
+**Example:**
+```javascript
+const myDiv = selectElement('#myDiv');
+showElement(myDiv); // Displays the element with flex layout
+```
+
+### `hideElement(element: HTMLElement) => void`
+
+Sets an element's display style to `none`, hiding it.
+
+**Parameters:**
+- `element`: The `HTMLElement` to hide.
+
+**Example:**
+```javascript
+const myDiv = selectElement('#myDiv');
+hideElement(myDiv); // Hides the element
+```
+
+### `repeatElements({ children?: NodeListOf<Element>, parent: Element, targetCount: number }) => void`
+
+Repeats or removes child elements within a parent to match a target count by cloning or removing the first child.
+
+**Parameters:**
+- `children` (optional): A `NodeListOf<Element>` containing the child elements to repeat or remove.
+- `parent`: The parent `Element` where children will be added or removed.
+- `targetCount`: The desired number of child elements.
+
+**Example:**
+```javascript
+// HTML structure:
+// <div id="parent">
+//   <div class="child">Item</div>
+// </div>
+
+// Repeat child elements to a total of 5
+const parent = selectElement('#parent');
+const children = selectAll('.child', parent);
+repeatElements({ parent, children, targetCount: 5 });
+// Result: 5 child divs inside #parent
+
+// Reduce to 2 child elements
+repeatElements({ parent, children: selectAll('.child', parent), targetCount: 2 });
+// Result: 2 child divs inside #parent
+```
+
+## Error Handling
+
+The `repeatElements` function includes error handling to catch and log issues when manipulating elements. For example, if the `children` NodeList is invalid or cloning fails, an error will be logged to the console.
+
+## Contributing
+
+Contributions are welcome! Please open an issue or submit a pull request at [https://github.com/DegreeSign/ds_ui](https://github.com/DegreeSign/ds_ui).
+
+## License
+
+This project is licensed under the MIT License. See the [LICENSE](https://github.com/DegreeSign/ds_ui/blob/main/LICENSE) file for details.

package/dist/browser/degreesign.min.js

@@ -1,2 +1,2 @@
 /*! For license information please see degreesign.min.js.LICENSE.txt */
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.degreesign=t():e.degreesign=t()}(this,(()=>(()=>{"use strict";var e={};return(()=>{var t=e;Object.defineProperty(t,"__esModule",{value:!0}),t.repeatElements=t.hideElement=t.showElement=t.selectAll=t.selectElement=void 0;t.selectElement=e=>document.querySelector(e),t.selectAll=e=>document.querySelectorAll(e),t.showElement=e=>e.style.display="flex",t.hideElement=e=>e.style.display="none",t.repeatElements=({children:e,parent:t,targetCount:l})=>{try{if(e?.length){const o=e?.length||0;if(l>o)for(let n=o;n<l;n++)t.appendChild(e[0]?.cloneNode(!0));else if(l<o&&0!=l)for(let t=o-1;t>=l;t--)e[t]?.remove()}}catch(e){console.log("Error repeating elements",l,e)}}})(),e})()));
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.degreesign=t():e.degreesign=t()}(this,(()=>(()=>{"use strict";var e={};return(()=>{var t=e;Object.defineProperty(t,"__esModule",{value:!0}),t.repeatElements=t.hideElement=t.showElement=t.selectAll=t.selectElement=void 0;t.selectElement=(e,t)=>(t||document).querySelector(e),t.selectAll=(e,t)=>(t||document).querySelectorAll(e),t.showElement=e=>e.style.display="flex",t.hideElement=e=>e.style.display="none",t.repeatElements=({children:e,parent:t,targetCount:l})=>{try{if(e?.length){const o=e?.length||0;if(l>o)for(let n=o;n<l;n++)t.appendChild(e[0]?.cloneNode(!0));else if(l<o&&0!=l)for(let t=o-1;t>=l;t--)e[t]?.remove()}}catch(e){console.log("Error repeating elements",l,e)}}})(),e})()));

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-declare const selectElement: (id: string) => HTMLElement, selectAll: (id: string) => NodeListOf<Element>, showElement: (element: HTMLElement) => string, hideElement: (element: HTMLElement) => string, 
+declare const selectElement: (id: string, parent?: Element) => HTMLElement, selectAll: (id: string, parent?: Element) => NodeListOf<Element>, showElement: (element: HTMLElement) => string, hideElement: (element: HTMLElement) => string, 
 /** Repeat Elements */
 repeatElements: ({ children, parent, targetCount, }: {
     /** Child Element Nodes */

package/dist/node/degreesign.node.min.js

@@ -1,2 +1,2 @@
 /*! For license information please see degreesign.node.min.js.LICENSE.txt */
-(()=>{"use strict";var e={};(()=>{var l=e;Object.defineProperty(l,"__esModule",{value:!0}),l.repeatElements=l.hideElement=l.showElement=l.selectAll=l.selectElement=void 0;l.selectElement=e=>document.querySelector(e),l.selectAll=e=>document.querySelectorAll(e),l.showElement=e=>e.style.display="flex",l.hideElement=e=>e.style.display="none",l.repeatElements=({children:e,parent:l,targetCount:t})=>{try{if(e?.length){const r=e?.length||0;if(t>r)for(let n=r;n<t;n++)l.appendChild(e[0]?.cloneNode(!0));else if(t<r&&0!=t)for(let l=r-1;l>=t;l--)e[l]?.remove()}}catch(e){console.log("Error repeating elements",t,e)}}})();var l=exports;for(var t in e)l[t]=e[t];e.__esModule&&Object.defineProperty(l,"__esModule",{value:!0})})();
+(()=>{"use strict";var e={};(()=>{var l=e;Object.defineProperty(l,"__esModule",{value:!0}),l.repeatElements=l.hideElement=l.showElement=l.selectAll=l.selectElement=void 0;l.selectElement=(e,l)=>(l||document).querySelector(e),l.selectAll=(e,l)=>(l||document).querySelectorAll(e),l.showElement=e=>e.style.display="flex",l.hideElement=e=>e.style.display="none",l.repeatElements=({children:e,parent:l,targetCount:t})=>{try{if(e?.length){const r=e?.length||0;if(t>r)for(let n=r;n<t;n++)l.appendChild(e[0]?.cloneNode(!0));else if(t<r&&0!=t)for(let l=r-1;l>=t;l--)e[l]?.remove()}}catch(e){console.log("Error repeating elements",t,e)}}})();var l=exports;for(var t in e)l[t]=e[t];e.__esModule&&Object.defineProperty(l,"__esModule",{value:!0})})();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@degreesign/ui",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "DegreeSign UI Controls",
   "main": "dist/node/degreesign.node.min.js",
   "module": "dist/node/degreesign.node.min.js",