@andreyshpigunov/x 0.3.72

package/src/components/x/flex.css

@@ -0,0 +1,163 @@
+/*----------------------------------------
+flex.css / x
+Flexbox
+
+Created by Andrey Shpigunov at 20.03.2025
+All right reserved.
+----------------------------------------*/
+
+
+/*
+  .flex
+  
+  .flex.fr  (m,l,xl)  - flex row
+  .flex.fc  (m,l,xl)  - flex column
+  .flex.fw  (m,l,xl)  - flex wrap
+  .flex.fnw (m,l,xl)  - flex nowrap
+  
+  .flex.ais  (m,l,xl)  - stretch
+  .flex.aifs (m,l,xl)  - flex start
+  .flex.aic  (m,l,xl)  - center
+  .flex.aife (m,l,xl)  - flex end
+  
+  .flex.jcfs (m,l,xl)  - flex start
+  .flex.jcc  (m,l,xl)  - center
+  .flex.jcfe (m,l,xl)  - flex end
+  .flex.jcsb (m,l,xl)  - space between
+  .flex.jcsa (m,l,xl)  - space around
+  .flex.jcse (m,l,xl)  - space evenly
+  
+  .flex > .c[1-12]/[1-12] (m,l,xl) - column width "column/columns"
+*/
+
+
+.flex {
+  display: flex;
+  
+  &.fr  { flex-direction: row }
+  &.fc  { flex-direction: column }
+  &.fw  { flex-wrap: wrap }
+  &.fnw { flex-wrap: nowrap }
+  
+  &.ais  { align-items: stretch }
+  &.aifs { align-items: flex-start }
+  &.aic  { align-items: center }
+  &.aife { align-items: flex-end }
+  
+  &.jcfs { justify-content: flex-start }
+  &.jcc  { justify-content: center }
+  &.jcfe { justify-content: flex-end }
+  &.jcsb { justify-content: space-between }
+  &.jcsa { justify-content: space-around }
+  &.jcse { justify-content: space-evenly }
+  
+  & > .noshrink { flex-shrink: 0 }
+  & > .nogrow { flex-grow: 0 }
+  
+  /* Columns */
+  @for $cols from 1 to 12 {
+    @for $col from 1 to $cols {
+      & > .c$(col)\/$(cols) {
+        flex-basis: calc($(col) / $(cols) * 100%);
+        max-width: calc($(col) / $(cols) * 100%);
+      }
+    }
+  }
+  
+  @media (--medium) {
+    
+    &.m\:fr  { flex-direction: row }
+    &.m\:fc  { flex-direction: column }
+    &.m\:fw  { flex-wrap: wrap }
+    &.m\:fnw { flex-wrap: nowrap }
+    
+    &.m\:ais  { align-items: stretch }
+    &.m\:aifs { align-items: flex-start }
+    &.m\:aic  { align-items: center }
+    &.m\:aife { align-items: flex-end }
+    
+    &.m\:jcfs { justify-content: flex-start }
+    &.m\:jcc  { justify-content: center }
+    &.m\:jcfe { justify-content: flex-end }
+    &.m\:jcsb { justify-content: space-between }
+    &.m\:jcsa { justify-content: space-around }
+    &.m\:jcse { justify-content: space-evenly }
+    
+    & > .m\:noshrink { flex-shrink: 0 }
+    & > .m\:nogrow { flex-grow: 0 }
+    
+    @for $cols from 1 to 12 {
+      @for $col from 1 to $cols {
+        & > .m\:c$(col)\/$(cols) {
+          flex-basis: calc($(col) / $(cols) * 100%);
+          max-width: calc($(col) / $(cols) * 100%);
+        }
+      }
+    }
+  }
+  
+  @media (--large) {
+    
+    &.l\:fr  { flex-direction: row }
+    &.l\:fc  { flex-direction: column }
+    &.l\:fw  { flex-wrap: wrap }
+    &.l\:fnw { flex-wrap: nowrap }
+    
+    &.l\:ais  { align-items: stretch }
+    &.l\:aifs { align-items: flex-start }
+    &.l\:aic  { align-items: center }
+    &.l\:aife { align-items: flex-end }
+    
+    &.l\:jcfs { justify-content: flex-start }
+    &.l\:jcc  { justify-content: center }
+    &.l\:jcfe { justify-content: flex-end }
+    &.l\:jcsb { justify-content: space-between }
+    &.l\:jcsa { justify-content: space-around }
+    &.l\:jcse { justify-content: space-evenly }
+    
+    & > .l\:noshrink { flex-shrink: 0 }
+    & > .l\:nogrow { flex-grow: 0 }
+    
+    @for $cols from 1 to 12 {
+      @for $col from 1 to $cols {
+        & > .l\:c$(col)\/$(cols) {
+          flex-basis: calc($(col) / $(cols) * 100%);
+          max-width: calc($(col) / $(cols) * 100%);
+        }
+      }
+    }
+  }
+  
+  @media (--xlarge) {
+    
+    &.xl\:fr  { flex-direction: row }
+    &.xl\:fc  { flex-direction: column }
+    &.xl\:fw  { flex-wrap: wrap }
+    &.xl\:fnw { flex-wrap: nowrap }
+    
+    &.xl\:ais  { align-items: stretch }
+    &.xl\:aifs { align-items: flex-start }
+    &.xl\:aic  { align-items: center }
+    &.xl\:aife { align-items: flex-end }
+    
+    &.xl\:jcfs { justify-content: flex-start }
+    &.xl\:jcc  { justify-content: center }
+    &.xl\:jcfe { justify-content: flex-end }
+    &.xl\:jcsb { justify-content: space-between }
+    &.xl\:jcsa { justify-content: space-around }
+    &.xl\:jcse { justify-content: space-evenly }
+    
+    & > .xl\:noshrink { flex-shrink: 0 }
+    & > .xl\:nogrow { flex-grow: 0 }
+    
+    @for $cols from 1 to 12 {
+      @for $col from 1 to $cols {
+        & > .xl\:c$(col)\/$(cols) {
+          flex-basis: calc($(col) / $(cols) * 100%);
+          max-width: calc($(col) / $(cols) * 100%);
+        }
+      }
+    }
+  }
+  
+}

package/src/components/x/flow.css

@@ -0,0 +1,52 @@
+/*----------------------------------------
+flow.css / x
+Flow — vertical flow of elements with margin-bottom space
+
+Created by Andrey Shpigunov at 20.03.2025
+All right reserved.
+----------------------------------------*/
+
+
+/*
+  .flow
+  .flow.s[0-12] (m,l,xl)   - vertical space
+*/
+
+
+.flow {
+  
+  
+  & > * { margin: 0 }
+  
+  @for $i from 0 to 12 {
+    &.s$(i) > * {
+      margin-bottom: var(--space-$(i));
+    }
+  }
+  
+  @media(--medium){
+    @for $i from 0 to 12 {
+      &.m\:s$(i) > * {
+        margin-bottom: var(--space-$(i));
+      }
+    }
+  }
+  
+  @media(--large){
+    @for $i from 0 to 12 {
+      &.l\:s$(i) > * {
+        margin-bottom: var(--space-$(i));
+      }
+    }
+  }
+  
+  @media(--xlarge){
+    @for $i from 0 to 12 {
+      &.xl\:s$(i) > * {
+        margin-bottom: var(--space-$(i));
+      }
+    }
+  }
+  
+  & > *:last-child { margin-bottom: 0 }
+}

package/src/components/x/form.css

@@ -0,0 +1,138 @@
+/*----------------------------------------
+form.css / x
+Form default styles
+
+Created by Andrey Shpigunov at 20.03.2025
+All right reserved.
+----------------------------------------*/
+
+
+:root {
+  --form-width: 40rem;
+  --form-height-coeff: 2.5;
+  --form-side-padding: 1rem;
+
+  --form-font-size: var(--font-size);
+  --form-font-color: #000;
+  --form-font-color-readonly: #000;
+  --form-font-color-disabled: #666;
+  --form-font-color-placeholder: #ccc;
+
+  --form-border-width: 0.1rem;
+  --form-border-radius: 0.8rem;
+  --form-border-color: #d4d4d4;
+  --form-border-color-focused: #8cf;
+  --form-border-color-error: #f00;
+  --form-border-color-readonly: #ddd;
+  --form-border-color-disabled: #ddd;
+
+  --form-background-color: #fff;
+  --form-background-color-readonly: #fafafa;
+  --form-background-color-disabled: #f6f6f6;
+  
+  /*
+    Additional variables and their default values:
+    --form-height: 4rem;
+  */
+}
+
+input[type="color"],
+input[type="date"],
+input[type="datetime"],
+input[type="tel"],
+input[type="email"],
+input[type="month"],
+input[type="number"],
+input[type="password"],
+input[type="search"],
+input[type="text"],
+input[type="time"],
+input[type="url"],
+input[type="week"],
+input:not([type]),
+textarea,
+select {
+  position: relative;
+  width: 100%;
+  height: var(--form-height);
+  height: var(--form-height, calc(var(--form-font-size) * var(--form-height-coeff)));
+  margin: 0;
+  padding: 0 var(--form-side-padding);
+  font-size: var(--form-font-size);
+  color: var(--form-font-color);
+  outline: none;
+  border-width: var(--form-border-width);
+  border-style: solid;
+  border-color: var(--form-border-color);
+  border-radius: var(--form-border-radius);
+  background-color: var(--form-background-color);
+  appearance: none;
+
+  &[readonly],
+  &[readonly]:focus {
+    color: var(--form-font-color-readonly);
+    border-color: var(--form-border-color-readonly);
+    background-color: var(--form-background-color-readonly);
+    box-shadow: none;
+  }
+  &[disabled],
+  &[disabled]:focus {
+    color: var(--form-font-color-disabled);
+    border-color: var(--form-border-color-disabled);
+    background-color: var(--form-background-color-disabled);
+    cursor: not-allowed !important;
+    box-shadow: none;
+  }
+
+  &:focus {
+    border-color: var(--form-border-color-focused);
+    box-shadow: 0 0 0 1px var(--form-border-color-focused);
+  }
+  &.error,
+  &.error:focus,
+  &[pattern]:invalid,
+  &[pattern]:invalid:focus {
+    border-color: var(--form-border-color-error);
+    box-shadow: 0 0 0 1px var(--form-border-color-error);
+  }
+}
+
+select {
+  padding-right: calc(var(--form-side-padding) * 2.6);
+  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#888" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevrons-up-down-icon lucide-chevrons-up-down"%3E%3Cpath d="m7 15 5 5 5-5"/%3E%3Cpath d="m7 9 5-5 5 5"/%3E%3C/svg%3E');
+  background-repeat: no-repeat;
+  background-position: right calc(var(--form-side-padding) - 4px) top 52%, 0 0;
+  background-size: 1.6rem;
+}
+
+::placeholder {
+  color: var(--form-font-color-placeholder);
+}
+
+input[placeholder],
+input::-moz-placeholder,
+input:-moz-placeholder,
+input:-ms-input-placeholder {
+  text-overflow: ellipsis;
+}
+
+input,
+textarea,
+select,
+button {
+  max-width: var(--form-width);
+  font-family: inherit;
+  font-size: var(--font-size);
+  box-sizing: border-box;
+  box-shadow: none;
+}
+
+textarea {
+  height: auto;
+  padding-top: calc(var(--form-side-padding) / 2);
+  padding-bottom: calc(var(--form-side-padding) / 2);
+}
+
+::-webkit-file-upload-button {
+    cursor:pointer;
+}

package/src/components/x/form.js

@@ -0,0 +1,180 @@
+/**
+ * @fileoverview Additional form utilities for inputs, checkboxes, selects, and contenteditable elements.
+ *
+ * Provides methods for setting values, managing checkboxes, attaching/removing event listeners,
+ * and manually dispatching events.
+ *
+ * Exported singleton: `form`
+ *
+ * Public API:
+ *
+ * - `form.setChecked(selector, checked)` – Set checked state of checkboxes/radios.
+ * - `form.setValue(selector, value)` – Set value of form elements or contenteditable.
+ * - `form.onUpdate(selector, callback)` – Attach listener for input/change events.
+ * - `form.offUpdate(selector)` – Remove previously added listeners (partial, due to anonymous functions).
+ * - `form.update(selector)` – Manually dispatch input/change event.
+ *
+ * Example usage:
+ *
+ *   form.setValue('.name', 'John');
+ *   form.setChecked('#agree', true);
+ *   form.onUpdate('input', el => console.log(el.value));
+ *
+ * @author Andrey Shpigunov
+ * @version 0.2
+ * @since 2025-07-17
+ */
+ 
+import { lib } from './lib';
+
+class Form {
+  /**
+   * Creates a Form utility instance.
+   * Stores internal references to event listeners.
+   */
+  constructor() {
+    /**
+     * Stores event listener references to avoid duplicates.
+     *
+     * @readonly
+     * @type {{update: Set<HTMLElement>}}
+     */
+    this.listen = Object.freeze({
+      update: new Set(),
+    });
+  }
+
+  /**
+   * Determines the appropriate event type for an element.
+   *
+   * @param {HTMLElement} el - Target element.
+   * @returns {string} 'input' or 'change' depending on the element type.
+   * @throws {Error} If the element is unsupported.
+   */
+  getEventType(el) {
+    if (el.isContentEditable) return 'input';
+
+    const tag = el.tagName.toLowerCase();
+    if (tag === 'input' || tag === 'textarea') return 'input';
+    if (tag === 'select') return 'change';
+
+    throw new Error(`Unsupported element <${tag}>`);
+  }
+
+  /**
+   * Sets the checked state of checkboxes or radios and dispatches 'input' event if changed.
+   *
+   * @param {string} selector - CSS selector for checkboxes or radios.
+   * @param {boolean} [checked=false] - Desired checked state.
+   */
+  setChecked(selector, checked = false) {
+    for (const el of lib.qsa(selector)) {
+      if (!el?.type || (el.type !== 'checkbox' && el.type !== 'radio')) {
+        console.error('setChecked: Not a checkbox/radio', el);
+        continue;
+      }
+
+      if (el.checked !== checked) {
+        el.checked = checked;
+        el.dispatchEvent(new Event('input', { bubbles: true }));
+      }
+    }
+  }
+
+  /**
+   * Sets the value of inputs, textareas, selects, or contenteditable elements and dispatches event.
+   *
+   * @param {string} selector - CSS selector for elements.
+   * @param {string|boolean|number} value - Value to set.
+   * @throws {Error} If element type is unsupported.
+   */
+  setValue(selector, value) {
+    for (const el of lib.qsa(selector)) {
+      if (!el) {
+        console.error('setValue: Element not found', el);
+        continue;
+      }
+
+      if (el.isContentEditable) {
+        el.innerText = value;
+      } else {
+        const tag = el.tagName.toLowerCase();
+        const type = el.type;
+
+        if (tag === 'input') {
+          if (type === 'checkbox' || type === 'radio') {
+            el.checked = !!value;
+          } else {
+            el.value = value;
+          }
+        } else if (tag === 'textarea' || tag === 'select') {
+          el.value = value;
+        } else {
+          throw new Error(`setValue: Unsupported element <${tag}>`);
+        }
+      }
+
+      el.dispatchEvent(new Event(this.getEventType(el), { bubbles: true }));
+    }
+  }
+
+  /**
+   * Attaches input/change listeners to elements, preventing duplicates.
+   *
+   * @param {string} selector - CSS selector for elements.
+   * @param {Function} callback - Function to call when input or change event fires.
+   */
+  onUpdate(selector, callback) {
+    for (const el of lib.qsa(selector)) {
+      if (!el) {
+        console.error('onUpdate: Element not found', el);
+        continue;
+      }
+
+      if (this.listen.update.has(el)) continue;
+
+      el.addEventListener(this.getEventType(el), () => callback(el));
+      this.listen.update.add(el);
+    }
+  }
+
+  /**
+   * Removes references to update listeners added by `onUpdate`.
+   *
+   * Note: Actual event listeners are not removed because they were added as anonymous functions.
+   * This method only cleans the internal tracking set.
+   *
+   * @param {string} selector - CSS selector for elements.
+   */
+  offUpdate(selector) {
+    for (const el of lib.qsa(selector)) {
+      if (!el) continue;
+      if (!this.listen.update.has(el)) continue;
+
+      console.warn('offUpdate: Cannot fully remove listener because anonymous functions were used.');
+      this.listen.update.delete(el);
+    }
+  }
+
+  /**
+   * Manually dispatches 'input' or 'change' events on the selected elements.
+   *
+   * @param {string} selector - CSS selector for elements.
+   */
+  update(selector) {
+    for (const el of lib.qsa(selector)) {
+      if (!el) {
+        console.error('update: Element not found', el);
+        continue;
+      }
+
+      el.dispatchEvent(new Event(this.getEventType(el), { bubbles: true }));
+    }
+  }
+}
+
+/**
+ * Singleton export of the Form utility.
+ * @type {Form}
+ */
+export const form = new Form();

package/src/components/x/grid.css

@@ -0,0 +1,109 @@
+/*----------------------------------------
+grid.css / x
+Grid prototype
+
+Created by Andrey Shpigunov at 20.03.2025
+All right reserved.
+----------------------------------------*/
+
+
+/*
+  .grid
+  .grid.g[1-12]           (m,l,xl)  - columns limit in grid
+  .grid > .c[1-12]        (m,l,xl)  - column width
+  .grid > .c[1-12]/[1-12] (m,l,xl)  - columns range for content
+*/
+
+
+.grid {
+  display: grid;
+  width: 100%;
+  grid-template-columns: repeat(12, 1fr);
+  grid-auto-flow: dense;
+  
+  @for $i from 1 to 12 {
+    &.g$(i)  { grid-template-columns: repeat($(i), 1fr) }
+    & > .c$(i) { grid-column: span $(i) }
+    
+    @for $m from 12 to $i {
+      & > .c$(i)\/$(m) {
+        grid-column: $(i) / calc($(m) + 1)
+      }
+    }
+  }
+  
+  & .jss   { justify-self: start }
+  & .jse   { justify-self: end }
+  & .jsc   { justify-self: center }
+  & .jsstr { justify-self: stretch }
+  & .ass   { align-self: start }
+  & .ase   { align-self: end }
+  & .asc   { align-self: center }
+  & .asstr { align-self: stretch }
+  
+  @media (--medium) {
+    @for $i from 1 to 12 {
+      &.m\:g$(i) { grid-template-columns: repeat($(i), 1fr) }
+      & > .m\:c$(i) { grid-column: span $(i) }
+      
+      @for $m from 12 to $i {
+        & > .m\:c$(i)\/$(m) {
+          grid-column: $(i) / calc($(m) + 1)
+        }
+      }
+    }
+    
+    & .m\:jss   { justify-self: start }
+    & .m\:jse   { justify-self: end }
+    & .m\:jsc   { justify-self: center }
+    & .m\:jsstr { justify-self: stretch }
+    & .m\:ass   { align-self: start }
+    & .m\:ase   { align-self: end }
+    & .m\:asc   { align-self: center }
+    & .m\:asstr { align-self: stretch }
+  }
+  
+  @media (--large) {
+    @for $i from 1 to 12 {
+      &.l\:g$(i) { grid-template-columns: repeat($(i), 1fr) }
+      & > .l\:c$(i) { grid-column: span $(i) }
+      
+      @for $m from 12 to $i {
+        & > .l\:c$(i)\/$(m) {
+          grid-column: $(i) / calc($(m) + 1)
+        }
+      }
+    }
+    
+    & .l\:jss   { justify-self: start }
+    & .l\:jse   { justify-self: end }
+    & .l\:jsc   { justify-self: center }
+    & .l\:jsstr { justify-self: stretch }
+    & .l\:ass   { align-self: start }
+    & .l\:ase   { align-self: end }
+    & .l\:asc   { align-self: center }
+    & .l\:asstr { align-self: stretch }
+  }
+  
+  @media (--xlarge) {
+    @for $i from 1 to 12 {
+      &.xl\:g$(i) { grid-template-columns: repeat($(i), 1fr) }
+      & > .xl\:c$(i) { grid-column: span $(i) }
+      
+      @for $m from 12 to $i {
+        & > .xl\:c$(i)\/$(m) {
+          grid-column: $(i) / calc($(m) + 1)
+        }
+      }
+    }
+    
+    & .xl\:jss   { justify-self: start }
+    & .xl\:jse   { justify-self: end }
+    & .xl\:jsc   { justify-self: center }
+    & .xl\:jsstr { justify-self: stretch }
+    & .xl\:ass   { align-self: start }
+    & .xl\:ase   { align-self: end }
+    & .xl\:asc   { align-self: center }
+    & .xl\:asstr { align-self: stretch }
+  }
+}