@cntwg/html-helper 0.0.17 → 0.0.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntwg/html-helper",
-  "version": "0.0.17",
+  "version": "0.0.19",
   "description": "A base HTML-helper library for js",
   "author": "ygracs <cs70th-om@rambler.ru>",
   "license": "MIT",
@@ -13,16 +13,22 @@
     "doc/html-helper-lib.md",
     "doc/html-ctrls-list.md",
     "doc/html-ctrls-btn.md",
+    "doc/html-ctrls-fields.md",
     "lib/html-helper-lib.js",
     "lib/html-ctrls/lists-stubs.js",
-    "lib/html-ctrls/lists-btns.js",
-    "lib/html-ctrls-list.js",
-    "lib/html-ctrls-btn.js",
-    "index.js"
+    "lib/html-ctrls/lists-btn.js",
+    "lib/html-ctrls/list.js",
+    "lib/html-ctrls/buttons.js",
+    "lib/html-ctrls/fields.js",
+    "lib/html-ctrls/mod-hfunc.js",
+    "index.js",
+    "CHANGELOG.md"
   ],
   "scripts": {
     "test": "jest",
     "test-bs": "jest base/",
+    "test-bs:g1": "jest base/fg-1",
+    "test-bs:g2": "jest base/fg-2",
     "test-lc1": "jest THtmlItemsListContainer",
     "test-lc2": "jest THtmlItemsListController",
     "test-lc2:bs": "jest THtmlItemsListController/base",
@@ -36,11 +42,15 @@
     "test-bc1:bs": "jest THtmlButtonsControllerARCSet/base",
     "test-bc1:ec": "jest THtmlButtonsControllerARCSet/events"
   },
+  "imports": {
+    "#lib/*": "./lib/*"
+  },
   "dependencies": {
-    "@ygracs/bsfoc-lib-js": "^0.1.2"
+    "@ygracs/bsfoc-lib-js": "^0.1.3"
   },
   "devDependencies": {
-    "jest": "^29.0.3",
-    "jest-environment-jsdom": "^29.0.3"
+    "jest": "^29.5.0",
+    "jest-environment-jsdom": "^29.5.0",
+    "minimist": "^1.2.8"
   }
 }

package/lib/html-ctrls/lists-btns.js

@@ -1,277 +0,0 @@
-// [v0.1.042-20220912]
-
-// === module init block ===
-
-const {
-  readAsString,
-  readAsNumber,
-  isNotEmptyString,
-  isPlainObject,
-  valueToArray,
-  TItemsICollection,
-} = require('@ygracs/bsfoc-lib-js');
-
-const {
-  CSS_CLASS_STRING,
-  isHTMLElement,
-} = require('../html-helper-lib.js');
-
-const {
-  isHTMLButton,
-  THtmlButtonsSet,
-}  = require('../html-ctrls-btn');
-
-const {
-  CSS_CLASS_SELECTED,
-  CSS_CLASS_DISABLED,
-  CSS_CLASS_HIDDEN,
-} = CSS_CLASS_STRING;
-
-const BTS_DEF_GROUP_NAME = 'all';
-
-// === module extra block (function definitions) ===
-
-// === module main block (function definitions) ===
-
-// === module main block (class definitions) ===
-
-class THtmlListButtonsController {
-  #_btnSet = null;
-  #_events = null;
-
-  constructor(opt) {
-    // load options
-    const _options = isPlainObject(opt) ? opt : {};
-    // load controls
-    let {
-      btnFirst,
-      btnPrev,
-      btnNext,
-      btnLast,
-      btn_frst, //* will deprecate
-      btn_prev, //* will deprecate
-      btn_next, //* will deprecate
-      btn_last, //* will deprecate
-    } = _options;
-    if (btnFirst === undefined) btnFirst = btn_frst;
-    if (btnPrev === undefined) btnPrev = btn_prev;
-    if (btnNext === undefined) btnNext = btn_next;
-    if (btnLast === undefined) btnLast = btn_last;
-    if (!isHTMLButton(btnFirst)) btnFirst = null;
-    if (!isHTMLButton(btnPrev)) btnPrev = null;
-    if (!isHTMLButton(btnNext)) btnNext = null;
-    if (!isHTMLButton(btnLast)) btnLast = null;
-    const controls = {
-      btnFirst,
-      btnPrev,
-      btnNext,
-      btnLast,
-    };
-    // init buttons set
-    const _btnSet = new THtmlButtonsSet();
-    this.#_btnSet = _btnSet;
-    _btnSet.addGroup('move_frwd');
-    _btnSet.addGroup('move_bkwd');
-    _btnSet.addGroup('dsbl_ctrls');
-    if (btnFirst && btnLast) {
-      _btnSet.addItem('btn_frst', btnFirst, 'move_bkwd');
-      _btnSet.addItem('btn_last', btnLast, 'move_frwd');
-      btnFirst.addEventListener('click', this.#_on_btn_frst_pressed);
-      btnLast.addEventListener('click', this.#_on_btn_last_pressed);
-    } else {
-      _btnSet.addItem('btn_frst', btnFirst, 'dsbl_ctrls');
-      _btnSet.addItem('btn_last', btnLast, 'dsbl_ctrls');
-    };
-    if (btnPrev && btnNext) {
-      _btnSet.addItem('btn_prev', btnPrev, 'move_bkwd');
-      _btnSet.addItem('btn_next', btnNext, 'move_frwd');
-      btnPrev.addEventListener('click', this.#_on_btn_prev_pressed);
-      btnNext.addEventListener('click', this.#_on_btn_next_pressed);
-    } else {
-      _btnSet.addItem('btn_prev', btnPrev, 'dsbl_ctrls');
-      _btnSet.addItem('btn_next', btnNext, 'dsbl_ctrls');
-    };
-    _btnSet.disableGroup('move_frwd');
-    _btnSet.disableGroup('move_bkwd');
-    _btnSet.disableGroup('dsbl_ctrls');
-    // init events controller
-    this.#_events = new Map();
-  }
-
-  #_on_btn_frst_pressed = (e) => {
-    //console.log('THtmlListButtonsController._on_btn_frst_pressed() ==> was called...');
-    //e.preventDefault(); /* need to reconsider reason for use */
-    let curItem = null;
-    let on_click_num = readAsNumber(e.detail, 0);
-    //console.log('CHECK: e => ditail:['+on_click_num+']');
-    //console.log('CHECK: e => phase:['+e.eventPhase+']');
-    switch (e.eventPhase) {
-      //*case 1:
-      //* // NOTE: currently on eventPhase = 2 and 3
-      case 2:
-        /**/// capturing stage
-        curItem = e.target;
-        break;
-      case 3:
-        /**/// bubblig stage
-        curItem = e.currentTarget;
-        break;
-      default:
-        break;
-    };
-    if (
-      curItem instanceof HTMLElement
-      && (on_click_num === 0 || on_click_num === 1)
-      && !curItem.classList.contains(CSS_CLASS_DISABLED)
-    ) {
-      this.#_triggerEvent('btn-first-pressed', e);
-    };
-  }
-
-  #_on_btn_last_pressed = (e) => {
-    //console.log('THtmlListButtonsController._on_btn_last_pressed() ==> was called...');
-    //e.preventDefault(); /* need to reconsider reason for use */
-    let curItem = null;
-    let on_click_num = readAsNumber(e.detail, 0);
-    //console.log('CHECK: e => ditail:['+on_click_num+']');
-    //console.log('CHECK: e => phase:['+e.eventPhase+']');
-    switch (e.eventPhase) {
-      //*case 1:
-      //* // NOTE: currently on eventPhase = 2 and 3
-      case 2:
-        /**/// capturing stage
-        curItem = e.target;
-        break;
-      case 3:
-        /**/// bubblig stage
-        curItem = e.currentTarget;
-        break;
-      default:
-        break;
-    };
-    if (
-      curItem instanceof HTMLElement
-      && (on_click_num === 0 || on_click_num === 1)
-      && !curItem.classList.contains(CSS_CLASS_DISABLED)
-    ) {
-      this.#_triggerEvent('btn-last-pressed', e);
-    };
-  }
-
-  #_on_btn_prev_pressed = (e) => {
-    //console.log('THtmlListButtonsController._on_btn_prev_pressed() ==> was called...');
-    //e.preventDefault(); /* need to reconsider reason for use */
-    let curItem = null;
-    let on_click_num = readAsNumber(e.detail, 0);
-    //console.log('CHECK: e => ditail:['+on_click_num+']');
-    //console.log('CHECK: e => phase:['+e.eventPhase+']');
-    switch (e.eventPhase) {
-      //*case 1:
-      //* // NOTE: currently on eventPhase = 2 and 3
-      case 2:
-        /**/// capturing stage
-        curItem = e.target;
-        break;
-      case 3:
-        /**/// bubblig stage
-        curItem = e.currentTarget;
-        break;
-      default:
-        break;
-    };
-    if (
-      curItem instanceof HTMLElement
-      && (on_click_num === 0 || on_click_num === 1)
-      && !curItem.classList.contains(CSS_CLASS_DISABLED)
-    ) {
-      this.#_triggerEvent('btn-prev-pressed', e);
-    };
-  }
-
-  #_on_btn_next_pressed = (e) => {
-    //console.log('THtmlListButtonsController._on_btn_next_pressed() ==> was called...');
-    //e.preventDefault(); /* need to reconsider reason for use */
-    let curItem = null;
-    let on_click_num = readAsNumber(e.detail, 0);
-    //console.log('CHECK: e => ditail:['+on_click_num+']');
-    //console.log('CHECK: e => phase:['+e.eventPhase+']');
-    switch (e.eventPhase) {
-      //*case 1:
-      //* // NOTE: currently on eventPhase = 2 and 3
-      case 2:
-        /**/// capturing stage
-        curItem = e.target;
-        break;
-      case 3:
-        /**/// bubblig stage
-        curItem = e.currentTarget;
-        break;
-      default:
-        break;
-    };
-    if (
-      curItem instanceof HTMLElement
-      && (on_click_num === 0 || on_click_num === 1)
-      && !curItem.classList.contains(CSS_CLASS_DISABLED)
-    ) {
-      this.#_triggerEvent('btn-next-pressed', e);
-    };
-  }
-
-  #_triggerEvent = (name, ...args) => {
-    const _name = typeof name === 'string' ? name.trim() : '';
-    if (_name !== '') {
-      const _events = this.#_events;
-      if (_events.has(_name)) _events.get(name)(...args);
-    };
-  }
-
-  disableAll(){
-    const _btnSet = this.#_btnSet;
-    _btnSet.disableGroup('move_bkwd');
-    _btnSet.disableGroup('move_frwd');
-  }
-
-  disableBkwd(){
-    this.#_btnSet.disableGroup('move_bkwd');
-  }
-
-  disableFrwd(){
-    this.#_btnSet.disableGroup('move_frwd');
-  }
-
-  enableAll(){
-    const _btnSet = this.#_btnSet;
-    _btnSet.enableGroup('move_bkwd');
-    _btnSet.enableGroup('move_frwd');
-  }
-
-  enableBkwd(){
-    this.#_btnSet.enableGroup('move_bkwd');
-  }
-
-  enableFrwd(){
-    this.#_btnSet.enableGroup('move_frwd');
-  }
-
-  on(name, evnt){
-    const _name = typeof name === 'string' ? name.trim() : '';
-    if (_name !== '' && typeof evnt === 'function') {
-      const _events = this.#_events;
-      if (!_events.has(_name)) {
-        _events.set(_name, evnt);
-      } else {
-        /* NOTE:
-         *    for current you can't reset or set new one on the same event
-         */
-        //console.log('THtmlListButtonsController.on() ==> event:['+name+'] - already exists...');
-      };
-    };
-  }
-};
-
-// === module exports block ===
-
-exports.THtmlListButtonsController = THtmlListButtonsController;
-
-exports.BTS_DEF_GROUP_NAME = BTS_DEF_GROUP_NAME;

package/lib/html-ctrls-btn.js

@@ -1,343 +0,0 @@
-// [v0.1.043-20220922]
-
-// === module init block ===
-
-const {
-  readAsString, readAsNumber, isNotEmptyString,
-  isPlainObject, valueToArray,
-  TItemsICollection,
-} = require('@ygracs/bsfoc-lib-js');
-
-const {
-  isHTMLElement, CSS_CLASS_STRING,
-  valueToIDString,
-} = require('./html-helper-lib.js');
-
-const {
-  CSS_CLASS_SELECTED,
-  CSS_CLASS_DISABLED,
-  CSS_CLASS_HIDDEN,
-} = CSS_CLASS_STRING;
-
-const BTS_DEF_GROUP_NAME = 'all';
-
-const etlHTagInputForBtn = new Set([
-  'button', 'submit', 'reset', 'image',
-]);
-
-// === module extra block (function definitions) ===
-
-function isHTMLButton(obj){
-  let result = false;
-  if (isHTMLElement(obj)) {
-    switch (obj.tagName.toLowerCase()) {
-      case 'button':
-        result = true;
-        break;
-      case 'input':
-        result = etlHTagInputForBtn.has(obj.type.toLowerCase());
-        break;
-      default:
-        break;
-    };
-  };
-  return result;
-}
-
-// === module main block (function definitions) ===
-
-// === module main block (class definitions) ===
-
-class THtmlButtonsSet {
-  #_btnCol = null;
-
-  constructor(){
-    // define default functions for manipulators
-    const __user_index_getter = (value) => {
-      //return readAsString(value, '', { useTrim: true, numberToString: true });
-      return valueToIDString(value);
-    };
-    const __user_item_getter = (value) => {
-      return THtmlButtonsSet.isHTMLButton(value) ? value : null;
-    };
-    this.#_btnCol = new TItemsICollection({
-      userFn: {
-        checkIndexFn: isNotEmptyString,
-        readIndexFn: __user_index_getter,
-        checkItemFn: THtmlButtonsSet.isHTMLButton,
-        readItemFn: __user_item_getter,
-      },
-    });
-  }
-
-  get ItemNames(){
-    return this.#_btnCol.ItemNames;
-  }
-
-  get GroupNames(){
-    return this.#_btnCol.CategoryNames;
-  }
-
-  hasItem(name){
-    return this.#_btnCol.hasItem(name);
-  }
-
-  addItem(...args){
-    return this.#_btnCol.addItem(...args);
-  }
-
-  addItemToGroup(...args){
-    return this.#_btnCol.addItemToCategory(...args);
-  }
-
-  delItem(name){
-    return this.#_btnCol.delItem(name);
-  }
-
-  delItemFromGroup(...args){
-    return this.#_btnCol.delItemFromGroup(...args);
-  }
-
-  renameItem(oldName, newName){
-    return this.#_btnCol.renameItem(oldName, newName, false);
-  }
-
-  enableItem(name){
-    const item = this.#_btnCol.getItem(name);
-    if (item) {
-      item.classList.remove(CSS_CLASS_DISABLED);
-      item.disabled = false;
-    };
-  }
-
-  disableItem(name){
-    const item = this.#_btnCol.getItem(name);
-    if (item) {
-      item.classList.add(CSS_CLASS_DISABLED);
-      item.disabled = true;
-    };
-  }
-
-  hasGroup(name){
-    return this.#_btnCol.hasCategory(name);
-  }
-
-  addGroup(name){
-    return this.#_btnCol.addCategory(name);
-  }
-
-  delGroup(name){
-    return this.#_btnCol.delCategory(name);
-  }
-
-  renameGroup(oldName, newName){
-    return this.#_btnCol.renameCategory(oldName, newName, false);
-  }
-
-  enableGroup(value){
-    const group = this.#_btnCol.getCategory(value);
-    valueToArray(group).forEach((item) => {
-      if (item) {
-        item.classList.remove(CSS_CLASS_DISABLED);
-        item.disabled = false;
-      };
-    });
-  }
-
-  disableGroup(value){
-    const group = this.#_btnCol.getCategory(value);
-    valueToArray(group).forEach((item) => {
-      if (item) {
-        item.classList.add(CSS_CLASS_DISABLED);
-        item.disabled = true;
-      };
-    });
-  }
-
-  static get isHTMLButton(){
-    return isHTMLButton;
-  }
-
-};
-
-class THtmlButtonsControllerARCSet {
-  #_btnSet = null;
-  #_events = null;
-
-  constructor(opt) {
-    // load options
-    const _options = isPlainObject(opt) ? opt : {};
-    // load controls
-    let {
-      btnApply,
-      btnReset,
-      btnCancel,
-    } = _options;
-    if (!isHTMLButton(btnApply)) btnApply = null;
-    if (!isHTMLButton(btnReset)) btnReset = null;
-    if (!isHTMLButton(btnCancel)) btnCancel = null;
-    const controls = {
-      btnApply,
-      btnReset,
-      btnCancel,
-    };
-    // init buttons set
-    const _btnSet = new THtmlButtonsSet();
-    this.#_btnSet = _btnSet;
-    _btnSet.addGroup('main');
-    _btnSet.addGroup('all');
-    if (btnApply) {
-      _btnSet.addItem('btn_apply', btnApply, 'main', 'all');
-      btnApply.addEventListener('click', this.#_on_btn_apply_pressed);
-    };
-    if (btnReset) {
-      _btnSet.addItem('btn_reset', btnReset, 'main', 'all');
-      btnReset.addEventListener('click', this.#_on_btn_reset_pressed);
-    };
-    if (btnCancel) {
-      _btnSet.addItem('btn_cancel', btnCancel, 'all');
-      btnCancel.addEventListener('click', this.#_on_btn_cancel_pressed);
-    };
-    _btnSet.disableGroup('main');
-    // init events controller
-    this.#_events = new Map();
-  }
-
-  #_on_btn_apply_pressed = (e) => {
-    //console.log('THtmlListButtonsController._on_btn_apply_pressed() ==> was called...');
-    //e.preventDefault(); /* need to reconsider reason for use */
-    let curItem = null;
-    let on_click_num = readAsNumber(e.detail, 0);
-    //console.log('CHECK: e => ditail:['+on_click_num+']');
-    //console.log('CHECK: e => phase:['+e.eventPhase+']');
-    switch (e.eventPhase) {
-      //*case 1:
-      //* // NOTE: currently on eventPhase = 2 and 3
-      case 2:
-        /**/// capturing stage
-        curItem = e.target;
-        break;
-      case 3:
-        /**/// bubblig stage
-        curItem = e.currentTarget;
-        break;
-      default:
-        break;
-    };
-    if (
-      curItem instanceof HTMLElement
-      && (on_click_num === 0 || on_click_num === 1)
-      && !curItem.classList.contains(CSS_CLASS_DISABLED)
-    ) {
-      this.#_triggerEvent('btn-apply-pressed', e);
-    };
-  }
-
-  #_on_btn_reset_pressed = (e) => {
-    //console.log('THtmlListButtonsController._on_btn_reset_pressed() ==> was called...');
-    //e.preventDefault(); /* need to reconsider reason for use */
-    let curItem = null;
-    let on_click_num = readAsNumber(e.detail, 0);
-    //console.log('CHECK: e => ditail:['+on_click_num+']');
-    //console.log('CHECK: e => phase:['+e.eventPhase+']');
-    switch (e.eventPhase) {
-      //*case 1:
-      //* // NOTE: currently on eventPhase = 2 and 3
-      case 2:
-        /**/// capturing stage
-        curItem = e.target;
-        break;
-      case 3:
-        /**/// bubblig stage
-        curItem = e.currentTarget;
-        break;
-      default:
-        break;
-    };
-    if (
-      curItem instanceof HTMLElement
-      && (on_click_num === 0 || on_click_num === 1)
-      && !curItem.classList.contains(CSS_CLASS_DISABLED)
-    ) {
-      this.#_triggerEvent('btn-reset-pressed', e);
-    };
-  }
-
-  #_on_btn_cancel_pressed = (e) => {
-    //console.log('THtmlListButtonsController._on_btn_cancel_pressed() ==> was called...');
-    //e.preventDefault(); /* need to reconsider reason for use */
-    let curItem = null;
-    let on_click_num = readAsNumber(e.detail, 0);
-    //console.log('CHECK: e => ditail:['+on_click_num+']');
-    //console.log('CHECK: e => phase:['+e.eventPhase+']');
-    switch (e.eventPhase) {
-      //*case 1:
-      //* // NOTE: currently on eventPhase = 2 and 3
-      case 2:
-        /**/// capturing stage
-        curItem = e.target;
-        break;
-      case 3:
-        /**/// bubblig stage
-        curItem = e.currentTarget;
-        break;
-      default:
-        break;
-    };
-    if (
-      curItem instanceof HTMLElement
-      && (on_click_num === 0 || on_click_num === 1)
-      && !curItem.classList.contains(CSS_CLASS_DISABLED)
-    ) {
-      this.#_triggerEvent('btn-cancel-pressed', e);
-    };
-  }
-
-  #_triggerEvent = (name, ...args) => {
-    const _name = typeof name === 'string' ? name.trim() : '';
-    if (_name !== '') {
-      const _events = this.#_events;
-      if (_events.has(_name)) _events.get(name)(...args);
-    };
-  }
-
-  disableMain(){
-    this.#_btnSet.disableGroup('main');
-  }
-
-  enableMain(){
-    this.#_btnSet.enableGroup('main');
-  }
-
-  disableAll(){
-    this.#_btnSet.disableGroup('all');
-  }
-
-  enableAll(){
-    this.#_btnSet.enableGroup('all');
-  }
-
-  on(name, evnt){
-    const _name = typeof name === 'string' ? name.trim() : '';
-    if (_name !== '' && typeof evnt === 'function') {
-      const _events = this.#_events;
-      if (!_events.has(_name)) {
-        _events.set(_name, evnt);
-      } else {
-        /* NOTE:
-         *    for current you can't reset or set new one on the same event
-         */
-        //console.log('THtmlListButtonsController.on() ==> event:['+name+'] - already exists...');
-      };
-    };
-  }
-};
-
-// === module exports block ===
-
-exports.THtmlButtonsSet = THtmlButtonsSet;
-exports.THtmlButtonsControllerARCSet = THtmlButtonsControllerARCSet;
-
-exports.BTS_DEF_GROUP_NAME = BTS_DEF_GROUP_NAME;
-
-exports.isHTMLButton = isHTMLButton;