@massimo-cassandro/minimo 0.1.2 → 0.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@massimo-cassandro/minimo",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "Light css framework",
   "homepage": "https://github.com/massimo-cassandro/minimo#readme",
   "bugs": {
@@ -13,7 +13,8 @@
   "scripts": {
     "UPD-version": "npx update-version  # --config=./dev-utilities.config.mjs",
     "upd@m": "npx upd@m",
-    "npm-publish": "npm publish"
+    "pre-publish": "bash pre-publish.sh",
+    "npm-publish": "npm run pre-publish && (cd dist && npm publish); rm -rf dist"
   },
   "license": "MIT",
   "author": "Massimo Cassandro",
@@ -24,13 +25,9 @@
   "style": "./src/index.css",
   "main": "./src/index.js",
   "files": [
-    "./src/components/**/*.*",
-    "./src/css/**/*.*",
-    "./src/js/**/*.*",
-    "./src/*.css",
-    "./*.js"
+    "dist/**/*"
   ],
   "devDependencies": {
     "@massimo-cassandro/dev-updater": "^2.1.0"
   }
-}
+}

package/src/components/auto-datatable/auto-datatable.css

@@ -1,355 +0,0 @@
-/* stylelint-disable selector-class-pattern */
-/* @import '@massimo-cassandro/auto-datatables-bs5/css/index.css'; */
-
-@import '@massimo-cassandro/auto-datatables-bs5/css/crea-datatable.css';
-@import '@massimo-cassandro/auto-datatables-bs5/css/datatable-processing.css';
-@import '@massimo-cassandro/auto-datatables-bs5/css/datatable-controls-bs.css';
-@import '@massimo-cassandro/auto-datatables-bs5/css/datatable-table-bs.css';
-/* @import '@massimo-cassandro/auto-datatables-bs5/css/datatable-sorting.css'; */
-/* @import '@massimo-cassandro/auto-datatables-bs5/css/datatable-pagination-bs.css'; */
-@import '@massimo-cassandro/auto-datatables-bs5/css/datatables-classes.css';
-/* @import '@massimo-cassandro/auto-datatables-bs5/css/datatable-responsive.css'; */
-
-
-/*
-<div class="dt-container m-datatable" data-cdt-options="..." data-cdt_options="..." data-dt-columns="...">
-  <div class="datatable-wrapper no-footer">
-    <div class="dt-controls">
-      <div class="datatable-length">
-        <label>
-          <di class=="dt-control-label">Mostra</di>
-          <div class="dt-control">
-            <select name="cdt-dom-2_length" class="form-control form-control-sm">
-              <option value="...">...</option>
-            </select>
-          </div>
-          <div>record per pagina</div>
-        </label>
-      </div>
-      <div class="datatable-filter"><label>
-          <div class=="dt-control-label">>Filtra risultati:</div>
-          <div class="dt-control">
-            <input type="search" class="form-control form-control-sm" placeholder=""></div>
-        </label></div>
-    </div>
-    <div class="dt-table-wrapper">
-      <table  class="table table-striped table-bordered table-hover dataTable no-footer" >
-        ...
-      </table>
-    </div>
-    <div class="dataTables_processing">...</div>
-
-    <div class="dt-footer">
-      <div class="dataTables_info" role="status" aria-live="polite">Stai visualizzando...</div>
-
-      <div class="dataTables_paginate paging_simple_numbers">
-       ...
-      </div>
-
-    </div>
-
-  </div>
-</div>
-*/
-
-
-
-.m-datatable {
-
-
-  /* --datatable-responsive-border-color: #ccc; */
-  /* --datatable-processing-padding: 0; */
-  /* --datatable-processing-bg: linear-gradient(to right, rgba(#fff, 0) 0%, rgba(#fff, .9) 25%, rgba(#fff, .9) 75%, rgba(#fff, 0) 100%); */
-
-  /* --sorting-cell-base-padding: .5em; */
-
-  /* --datatable-active-sorting-color: currentColor; */
-  /* --datatable-active-sorting-bg: inherit; */
-  /* --datatable-active-sorting-border-bottom: none; */
-
-  /* --sorting-arrow-size: 4px; */
-  /* --datatable-sorting-arrows-color: currentColor; */
-  /* --sorting-cell-arrow-padding: var(--sorting-cell-base-padding) 1.5em var(--sorting-cell-base-padding) var(--sorting-cell-base-padding); */
-  /* --sorting-arrow-bottom: 50%; */
-
-  /* --pagination-padding-x: .5rem; */
-  --pagination-padding-y: .4rem;
-  /* --pagination-font-size: .875rem; */
-
-  --pagination-color: var(--text-color);
-  /* --pagination-bg: #fff; */
-  /* --pagination-border-width: 1px; */
-  --pagination-border-color: var(--stone-5);
-
-  /* --pagination-border-radius: .25rem; */
-  --pagination-hover-color: var(--accent-3-fg);
-  --pagination-hover-bg: var(--accent-3);
-  /* --pagination-hover-border-color: var(--pagination-border-color); */
-  /* --pagination-focus-color: var(--pagination-hover-color); */
-  /* --pagination-focus-bg: var(--pagination-hover-bg); */
-  /* --pagination-focus-box-shadow: 0 0 0 .25rem #06407a40; */
-  --pagination-active-color: var(--secondary-fg);
-  --pagination-active-bg: var(--secondary);
-  /* --pagination-active-border-color: #007e8a; */
-  /* --pagination-disabled-color: #ababab; */
-  /* --pagination-disabled-bg: var(--pagination-hover-bg); */
-  /* --pagination-disabled-border-color: var(--pagination-border-color); */
-
-
-  --sorting-border-size: 6px;
-  --sorting-border-color: var(--secondary);
-
-  position: relative;
-
-  .dt-controls {
-    display: flex;
-    flex-flow: row wrap;
-    gap: 1rem;
-    align-items: center;
-    justify-content: space-between;
-
-    > div {
-      max-width: 100%;
-    }
-  }
-
-  .icon {
-    width: 1.1em;
-  }
-
-
-  @media (--desktop-down) {
-    /* .dt-control-label {} */
-    .dt-controls {
-      flex-direction: column;
-      justify-content: center;
-    }
-  }
-}
-
-@media print {
-  .m-datatable {
-    .dt-controls, .dt-footer {
-      display: none;
-    }
-  }
-}
-
-
-/* https://css-tip.com/overflow-detection/ */
-/* https://csscade.com/can-you-detect-overflow-with-css/ */
-.dt-table-wrapper {
-  max-width: 100%;
-  overflow-x: auto;
-
-  /* animation-timeline: scroll(self);
-  animation: detect-scroll linear;
-  --bg-if-can-scroll: var(--can-scroll) lime;
-  --bg-if-cant-scroll: red;
-  background: var(--bg-if-can-scroll, var(--bg-if-cant-scroll)); */
-
-
-  .table thead th {
-    vertical-align: middle;
-  }
-
-  .sorting_disabled,
-  .sorting_asc_disabled,
-  .sorting_desc_disabled {
-    cursor: default;
-  }
-
-  .sorting {
-    position: relative;
-    cursor: pointer;
-
-
-    @media (--mouse) {
-      &:hover {
-        /* --datatable_active_sorting_color */
-
-        --datatable-active-sorting-bg: color-mix(in srgb, var(--accent-1) 10%, transparent);
-        /* stylelint-disable-next-line declaration-block-no-duplicate-custom-properties */
-        --datatable-active-sorting-bg: light-dark(color-mix(in srgb, var(--accent-1) 10%, transparent), color-mix(in srgb, var(--accent-1) 30%, transparent));
-
-        /* --datatable-active-sorting-border-bottom */
-      }
-    }
-  }
-
-
-  .sorting_asc, .sorting_desc{
-    &::after {
-      position: absolute;
-      right: 0;
-      left: 0;
-      display: block;
-      height: var(--sorting-border-size);
-      content: '';
-      background-color: var(--sorting-border-color);
-
-    }
-    /* border-bottom: var(--sorting-border-size) solid var(--sorting-border-color); */
-  }
-  .sorting_asc{
-    &::after {
-      top: calc(-1 * var(--sorting-border-size) / 2);
-
-    }
-  }
-  .sorting_desc{
-    &::after {
-      bottom: calc(-1 * var(--sorting-border-size) / 2);
-    }
-  }
-}
-
-/*
-@keyframes detect-scroll {
-  from, to {
-    --can-scroll:;
-  }
-} */
-
-
-.dt-footer {
-  display: flex;
-  flex-flow: column wrap;
-  gap: .5rem;
-  align-items: center;
-  justify-content: center;
-  margin-block: 1rem;
-
-  @media (--desktop-up) {
-    flex-direction: row;
-    gap: 2rem;
-    justify-content: space-between;
-  }
-}
-
-.dataTables_info {
-  font-size: var(--font-size-xs);
-  /* color: var(--text-muted-color); */
-}
-
-/*
-<div class="dataTables_paginate paging_simple_numbers">
-  <a class="paginate_button previous disabled" aria-disabled="true" role="link" data-dt-idx="previous" tabindex="-1"></a>
-
-  <span>
-    <a class="paginate_button current" role="link" aria-current="page" data-dt-idx="0" tabindex="0">1</a>
-    <a class="paginate_button " role="link" data-dt-idx="1" tabindex="0">2</a>
-    <span class="ellipsis">…</span>
-    <a class="paginate_button " role="link" data-dt-idx="9" tabindex="0">10</a>
-  </span>
-
-  <a class="paginate_button next" role="link" data-dt-idx="next" tabindex="0"></a>
-</div>
-*/
-
-.dataTables_paginate {
-  display: flex;
-  flex-flow: row nowrap;
-  gap: 0;
-  align-items: center;
-  justify-content: flex-end;
-
-  > span {
-
-    display: flex;
-    flex-flow: row nowrap;
-    gap: 0;
-    align-items: center;
-    justify-content: flex-end;
-  }
-
-  .paginate_button, .ellipsis {
-    display: flex;
-    justify-content: center;
-    padding: var(--pagination-padding-y) var(--pagination-padding-x);
-    font-size: var(--pagination-font-size);
-    font-weight: var(--font-weight-semibold);
-    line-height: 1;
-    color: var(--pagination-color);
-    border: var(--pagination-border-width) var(--pagination-border-color);
-    border-style: solid solid solid none;
-  }
-
-  .ellipsis {
-    justify-content: flex-end;
-  }
-
-  .paginate_button {
-    align-items: center;
-    text-decoration: none;
-    cursor: pointer;
-    background-color: var(--pagination-bg);
-    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
-
-    &.previous, &.next {
-      display: none;
-    }
-
-    &:first-child {
-      border-style: solid;
-      border-top-left-radius: var(--pagination-border-radius);
-      border-bottom-left-radius: var(--pagination-border-radius);
-    }
-    &:last-child {
-      border-top-right-radius: var(--pagination-border-radius);
-      border-bottom-right-radius: var(--pagination-border-radius);
-    }
-
-    &:hover {
-      z-index: 2;
-      color: var(--pagination-hover-color);
-      text-decoration: none;
-      background-color: var(--pagination-hover-bg);
-      border-color: var(--pagination-hover-border-color);
-    }
-
-    &:focus {
-      z-index: 3;
-      color: var(--pagination-focus-color);
-      background-color: var(--pagination-focus-bg);
-      outline: 0;
-      box-shadow: var(--pagination-focus-box-shadow);
-    }
-
-    &.current {
-      z-index: 3;
-      color: var(--pagination-active-color);
-      background-color: var(--pagination-active-bg);
-      border-color: var(--pagination-active-border-color);
-    }
-
-    &.disabled,
-    .disabled > & {
-      color: var(--pagination-disabled-color);
-      pointer-events: none;
-      background-color: var(--pagination-disabled-bg);
-      border-color: var(--pagination-disabled-border-color);
-    }
-  }
-
-  .page-item {
-    &:not(:first-child) .page-link {
-      margin-left: calc(-1 * var(--pagination-border-width));
-    }
-
-    &:first-child {
-      .page-link {
-        border-radius: var(--pagination-border-radius) 0 0 var(--pagination-border-radius);
-      }
-    }
-
-    &:last-child {
-      .page-link {
-        border-radius: 0 var(--pagination-border-radius) var(--pagination-border-radius) 0;
-      }
-    }
-
-  }
-
-
-}

package/src/components/auto-datatable/auto-datatable.js

@@ -1,154 +0,0 @@
-/* global process */
-
-import 'jquery?as_asset';
-import 'datatables.net/js/jquery.dataTables.js?as_asset';
-
-import { spinner } from '@minimo/spinner.js';
-import svg_icons from '@imgs/icone.svg';
-
-import { creaDT } from '@massimo-cassandro/auto-datatables-bs5';
-import './auto-datatable.css?inline';
-/*
-per personalizzazioni datatable
-da usare insieme alle opzioni globali
-
-  import {default_dt_options} from 'path/to/datatable.js';
-  import { dt_default_options, dt_classes } from '@massimo-cassandro/auto-datatables-bs5';
-
-  $.extend( $.fn.dataTable.ext.classes, dt_classes );
-  $(__table__).DataTable($.extend(true, {}, dt_default_options, ada_default_dt_options,
-
-    // opzioni specifiche, se necessarie, ad esempio per tabelle non ajax:
-    {
-      processing  : false,
-      serverSide  : false,
-      pageLength  : 25,
-      order       : [[ 1, 'asc' ]],
-      columns     : null
-    }
-  ));
-
-*/
-
-export const default_dt_options = {
-
-    dom:
-      // controlli
-      '<\'dt-controls\'lf>' +
-      // table + processing
-      //"<'position-relative'tr>" +
-      // table + processing
-      '<\'dt-table-wrapper\'t>r' +
-      // info + paginazione
-      '<\'dt-footer\'ip>',
-
-    // renderer: 'bootstrap',
-
-    // serverSide     : true,
-    // paging         : true,
-    // pageLength     : 25,
-    language: {
-      processing: spinner(),
-
-      lengthMenu:
-          '<di class"dt-control-label">Mostra</di>' +
-          '<div class="dt-control">_MENU_</div>' +
-          '<div>record per pagina</div>',
-      search:
-          '<div class="dt-control-label">Filtra risultati:</div>' +
-          '<div class="dt-control">_INPUT_</div>',
-    },
-
-    responsive       : true,
-    stateSave        : process.env.NODE_ENV === 'development',
-    stateDuration    : -1, //sessionStorage
-    // columnDefs       : [{
-    //   orderable      : true,
-    //   targets        : ['_all']
-    // }],
-    // ajax             : null,
-    // order            : [],
-    // columns          : []
-  }, // end dt_options
-
-  default_cdt_options = {
-
-    icone: {
-      ok  : `<svg class="icon text-success"><use href="${svg_icons}#check-circle-bold"></use></svg>`,
-      off : `<svg class="icon text-danger"><use href="${svg_icons}#x-circle-bold"></use></svg>`,
-    },
-
-    id_visible_default: true,
-
-    formats: {
-      decimals_class: 'data-dec',
-      euro_class: 'data-euro',
-
-      date: {
-        year: '2-digit',
-        month: 'short',
-        day: 'numeric'
-      },
-      time: {
-        hour12: false,
-        hour: '2-digit',
-        minute: '2-digit'
-      },
-      datetime: {
-        date: {
-          year: 'numeric',
-          month: 'short',
-          day: 'numeric'
-        },
-        time: {
-          hour12: false,
-          hour: '2-digit',
-          minute: '2-digit'
-        },
-        separator: ' ',  // date-time separator
-        date_wrapper: '<span class="text-nowrap"></span>', // HTML string or null or ''
-        time_wrapper: '<small></small>' // HTML string or null or ''
-      }
-    },
-
-    use_sorting_arrow: false, // se true viene aggiunta al container la classe `w-arrow` che attiva la visualizzazione delle frecce dell'ordinamento
-
-    // container_header: '', //'Risultato della ricerca', // se presente aggiunge un header prima della tabella
-
-    // container_class: 'dt-container', // classe che viene assegnata al div che contiene la tabella
-    //container_header_level: 2, // livello gerarchico dell'header (h2, h3, ecc...)
-    // table_id: 'table_result',
-    table_class: 'table table-bordered'
-    //table_caption: '',
-    //table_footer: false, // se true aggiunge una riga tfoot alla tabella, da popolare con un callback
-    //extra_info:''
-  }
-;
-
-/**
-  * _datatable
-  * crea e renderizza un datatable da un flusso json
-  *
-  */
-
-export function _datatable(container, options = {}) {
-
-  options.dt_options = {...default_dt_options, ...(options.dt_options?? {}) };
-  options.cdt_options = {...default_cdt_options, ...(options.cdt_options?? {}) };
-
-  container.innerHTML = '<div class="datatable-spinner-wrapper">' +
-      spinner() +
-    '</div>';
-
-  creaDT(container, options.cdt_options, options.dt_options, options.dt_columns?? []);
-}
-
-
-// utilizza _datatable per generare in modo automatico i datatable
-// negli elementi con classe 'dt-container'
-// i parametri datatable sono ricavati dagli attributi data di '.dt-container'
-
-document.querySelectorAll('.dt-container').forEach(container => {
-  _datatable(container);
-});
-

package/src/components/init.js

@@ -1,7 +0,0 @@
-import './modal-alert/flash-alerts.js';
-
-import '@minimo/utility/inner-nav.js';
-import '@minimo/utility/dismiss-alerts.js';
-
-
-

package/src/components/modal-alert/flash-alerts.js

@@ -1,32 +0,0 @@
-import { mAlert } from './modal-alert.js';
-
-
-/*
-twig message labels:
-  - success
-  - notice
-  - error
-  - warning
-*/
-document.querySelectorAll('.flash-alert').forEach(item => {
-
-  mAlert({
-    // test
-    // type  : 'confirm',
-    // timer: null,
-
-    type  : item.dataset.label === 'notice'? 'warning' : item.dataset.label,
-    // title : item.message,
-    mes   : item.dataset.message
-    // use_warning_icon: true, // solo confirm
-    // ok_btn_text: 'OK',
-    // cancel_btn_text: 'Annulla',
-    // callback: function(esito) {}, // confirm: console.log( esito? 'Confermato' : 'Annullato')
-    // timer: 4000 // ms
-    // extra_btn: '<button type="button" data-confirm-result="annulla" class="stop-btn btn btn-confirm">Annulla</button>',
-    // extra_btn_selector: '.stop-btn',
-    // extra_btn_focus: true,
-
-  });
-
-});

package/src/components/modal-alert/modal-alert.css

@@ -1,47 +0,0 @@
-/* NB incluso nel css principale */
-
-@import '@massimo-cassandro/modal-alert';
-
-
-.modal-alert {
-  --malert-success-color: var(--status-success-color);
-  --malert-success-color-fg: var(--status-success-fg-color);
-
-  --malert-info-color: var(--status-info-color);
-  --malert-info-color-fg: var(--status-info-fg-color);
-
-  --malert-warning-color: var(--status-warning-color);
-  --malert-warning-color-fg: var(--status-warning-fg-color);
-
-  --malert-error-color: var(--status-danger-color);
-  --malert-error-color-fg: var(--status-danger-fg-color);
-
-  --malert-confirm-color: var(--status-warning-color);
-  --malert-confirm-color-fg: var(--status-warning-fg-color);
-
-  /* --malert-marks-stroke-width: 6px; */
-  --malert-backdrop: rgb(0 0 0 / .3);
-  --malert-border-radius: var(--radius-md);
-  /* --malert-box-shadow: var(--box-shadow); */
-  --malert-heading-font-family: var(--font-family);
-  /* --malert-heading-line-height: */
-  --malert-heading-font-size: 1.8rem;
-  --malert-heading-font-weigth: var(--font-size-base);
-  --malert-body-font-family: var(--font-family);
-
-  top: 50%;
-  left: 50%;
-  translate: -50% -50%;
-}
-
-
-
-.malert-mark {
-  svg {
-    width: 7rem;
-    max-width: none;
-    height: 7rem;
-    fill: var(--malert-color-fg);
-    stroke: none;
-  }
-}