@massimo-cassandro/minimo 1.16.1 → 1.17.0

package/src/components/modal-alert/TODO modal-alert-demo/demo.js

@@ -1,155 +0,0 @@
-import mAlert from '../src/modal-alert.js';
-
-const custom_defaults = {
-
-  //settings to be applied to all dialog types
-  globals: {
-    onOpen: () => {
-      // console.log('open'); // eslint-disable-line
-      document.body.classList.add('modal-alert-is-open');
-    },
-    onClose: () => {
-      // console.log('close'); // eslint-disable-line
-      document.body.classList.remove('modal-alert-is-open');
-    },
-    cssFile: null
-  },
-
-  success: {
-    title: 'Done!',
-    mes: null,
-    ok_btn_text: 'OK',
-    heading_class: 'text-success',
-    ok_btn_class: 'btn',
-    timer: 4000, // ms
-  },
-  error: {
-    title: 'An error has occurred',
-    mes: null,
-    ok_btn_text: 'OK',
-    heading_class: null,
-    text_class: null,
-    ok_btn_class: 'btn',
-    timer: null,
-  },
-  warning: {
-    title: 'Attention!',
-    mes: null,
-    ok_btn_text: 'OK',
-    heading_class: null,
-    text_class: null,
-    ok_btn_class: 'btn',
-    timer: null,
-  },
-  info: {
-    title: null,
-    mes: null,
-    ok_btn_text: 'OK',
-    heading_class: null,
-    text_class: null,
-    ok_btn_class: 'btn',
-    timer: null,
-  },
-  confirm: {
-    title: 'Do you confirm?',
-    mes: null,
-    ok_btn_text: 'OK',
-    cancel_btn_text: 'Cancel',
-    cancel_focus: true, // false to give focus to the ok button
-    heading_class: null,
-    text_class: null,
-    ok_btn_class: 'btn btn-outline',
-    cancel_btn_class: 'btn',
-    callback: null,
-    timer: null,
-  }
-};
-
-document.querySelector('.demo-success').addEventListener('click', () => {
-  mAlert({
-    type  : 'success',
-    mes: 'Lorem ipsum dolor sit amet',
-    callback: () => alert('callback')
-  }, custom_defaults);
-}, false);
-
-document.querySelector('.demo-info').addEventListener('click', () => {
-  mAlert({
-    type  : 'info',
-    title: 'Info',
-    mes: '<strong>Lorem ipsum</strong> dolor sit amet'
-  }, custom_defaults);
-}, false);
-
-document.querySelector('.demo-error').addEventListener('click', () => {
-  mAlert({
-    type  : 'error'
-  }, custom_defaults);
-}, false);
-
-document.querySelector('.demo-error-extra-btn').addEventListener('click', () => {
-  mAlert({
-    type  : 'error',
-    ok_btn_class: 'btn btn-error btn btn-outline',
-    extra_btn: '<button type="button" data-malert-result="extra-btn-result" class="btn btn-error extra-btn">Extra btn</button>',
-    extra_btn_selector: '.extra-btn',
-    extra_btn_focus: true,
-    callback: result => alert(result === 'extra-btn-result'? 'Extra button pressed' : 'OK button pressed')
-  }, custom_defaults);
-}, false);
-
-document.querySelector('.demo-warning').addEventListener('click', () => {
-  mAlert({
-    type  : 'warning',
-    mes: '<p>Quo dolorum cumque quo placeat aperiam doloribus dolorum animi. Sunt et dolores quas autem. Porro inventore ratione. Ex facere doloremque. Consectetur enim dolor. Sint ut facere quidem et et dicta natus itaque.</p> <p>Odit in eos repellat exercitationem tempore blanditiis voluptate. Dignissimos est tempora qui ducimus at et expedita esse.</p>'
-  }, custom_defaults);
-}, false);
-
-document.querySelector('.demo-confirm').addEventListener('click', () => {
-  mAlert({
-    type  : 'confirm',
-    callback: result => alert(`${result? 'OK' : 'Cancel'} button pressed`)
-  }, custom_defaults);
-}, false);
-
-
-// forms
-// Confirm on form submit
-document.getElementById('test-form').addEventListener('submit', e => {
-  let choiceIsNeeded = true;
-
-  if(choiceIsNeeded) {
-    e.preventDefault();
-    mAlert({
-      type  : 'confirm',
-      title: 'A choice is needed',
-      mes: 'Some message...',
-      ok_btn_text: 'Continue submit',
-      cancel_btn_text: 'Stop',
-      callback: result => {
-        if(result) {
-          alert('submit');
-          e.target.submit();
-        } else {
-          alert('submit canceled');
-        }
-      }
-    }, custom_defaults);
-  }
-
-}, false);
-
-// Error on form submit
-document.getElementById('test-form2').addEventListener('submit', e => {
-  let isError = true;
-
-  if(isError) {
-    e.preventDefault();
-    mAlert({
-      type  : 'error',
-      title: 'Oh my! There is an error...',
-      mes: 'Some message'
-    }, custom_defaults);
-  }
-
-}, false);

package/src/components/modal-alert/TODO.md

@@ -1,3 +0,0 @@
-da rivedere
-spostare custom props nel dictionary
-eliminare customization-templates, gestire tutto da tokens

package/src/components/modal-alert/customization-templates/custom-modal-alert.css

@@ -1,46 +0,0 @@
-
-@import '@massimo-cassandro/modal-alert';
-
-
-.modal-alert {
-  --malert-success-color: var(--status-success-color);
-  --malert-success-color-fg: var(--status-success-fg);
-
-  --malert-info-color: var(--status-info-color);
-  --malert-info-color-fg: var(--status-info-fg);
-
-  --malert-warning-color: var(--status-warning-color);
-  --malert-warning-color-fg: var(--status-warning-fg);
-
-  --malert-danger-color: var(--status-danger-color);
-  --malert-danger-color-fg: var(--status-danger-fg);
-
-  --malert-confirm-color: var(--status-warning-color);
-  --malert-confirm-color-fg: var(--status-warning-fg);
-
-  /* --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;
-  }
-}

package/src/components/modal-alert/customization-templates/custom-modal-alert.js

@@ -1,89 +0,0 @@
-// import './modal-alert.css'; // importato direttamente dal css principale per ottimizzarne l'uso
-
-import modalAlert from '@massimo-cassandro/modal-alert';
-
-import checkIcon from './svg/check-circle-duotone.svg?inline';
-import infoIcon from './svg/info-duotone.svg?inline';
-import confirmIcon from './svg/question-duotone.svg?inline';
-import warningIcon from './svg/warning-duotone.svg?inline';
-import errorIcon from './svg/x-circle-duotone.svg?inline';
-
-const custom_defaults = {
-
-  globals: {
-    onOpen: () => {
-      document.body.classList.add('overflow-hidden');
-    },
-    onClose: () => {
-      document.body.classList.remove('overflow-hidden');
-    },
-    cssFile: null,
-    animation: true,
-    showMarks: true,
-  },
-
-  success: {
-    title: 'Operazione completata',
-    mes: null,
-    ok_btn_text: 'OK',
-    heading_class: null,
-    ok_btn_class: 'btn btn-success',
-    timer: 4000, // ms
-  },
-  error: {
-    title: 'Si è verificato un errore',
-    mes: null,
-    ok_btn_text: 'OK',
-    heading_class: null,
-    text_class: null,
-    ok_btn_class: 'btn btn-danger',
-    timer: null,
-  },
-  warning: {
-    title: 'Attenzione!',
-    mes: null,
-    ok_btn_text: 'OK',
-    heading_class: null,
-    text_class: null,
-    ok_btn_class: 'btn btn-warning',
-    timer: null,
-  },
-  info: {
-    title: null,
-    mes: null,
-    ok_btn_text: 'OK',
-    heading_class: null,
-    text_class: null,
-    ok_btn_class: 'btn btn-info',
-    timer: null,
-  },
-  confirm: {
-    title: 'Confermi?',
-    mes: null,
-    ok_btn_text: 'OK',
-    cancel_btn_text: 'Cancel',
-    cancel_focus: true, // false to give focus to the ok button
-    heading_class: null,
-    text_class: null,
-    ok_btn_class: 'btn btn-warning',
-    cancel_btn_class: 'btn btn-outline-secondary',
-    callback: null,
-    timer: null
-  }
-};
-
-const marks = {
-  success: checkIcon,
-  error: errorIcon,
-  warning: warningIcon,
-  info: infoIcon,
-  confirm: confirmIcon
-};
-
-/**
- * @param {Record<string, *>} params
- * @returns {void}
- */
-export function mAlert(params) {
-  modalAlert(params, custom_defaults, marks);
-}

package/src/components/modal-alert/defaults.js

@@ -1,58 +0,0 @@
-/**
- * Default configuration for all modal-alert dialog types.
- * Type-specific blocks can override any `globals` setting.
- */
-export const defaults = {
-
-  // settings applied to all dialog types; can be overridden per type
-  globals: {
-    extra_class: null,
-    onOpen: null,
-    onClose: null,
-    cssFile: null,    // css file to be automatically loaded // TODO remove
-    animation: true,
-    showMarks: true,
-    callback: null,
-    timer: null,
-    mes: null,
-    heading_class: null,
-    text_class: null,
-
-    // extra btn markup, ignored on confirm
-    extra_btn: null,
-    extra_btn_selector: null,
-    extra_btn_focus: true
-  },
-
-  success: {
-    title: 'Operazione completata',
-    ok_btn_text: 'OK',
-    ok_btn_class: 'btn',
-    timer: 4000 // ms
-  },
-  error: {
-    title: 'Si è verificato un errore',
-    ok_btn_text: 'OK',
-    ok_btn_class: 'btn'
-  },
-  warning: {
-    title: 'Attenzione!',
-    ok_btn_text: 'OK',
-    ok_btn_class: 'btn'
-  },
-  info: {
-    title: null,
-    ok_btn_text: 'OK',
-    ok_btn_class: 'btn'
-  },
-  confirm: {
-    title: 'Confermi?',
-    use_warning_icon: false, // when true, uses the warning icon instead of the confirm icon
-    ok_btn_text: 'OK',
-    cancel_btn_text: 'Annulla',
-    cancel_focus: true, // false to give focus to the ok button
-    ok_btn_class: 'btn btn-outline',
-    cancel_btn_class: 'btn'
-  }
-
-};

package/src/components/modal-alert/marks.js

@@ -1,9 +0,0 @@
-/* eslint-disable quotes */
-
-/*
-   This file was generated by the script `svg-to-js.mjs`
-   (https://github.com/massimo-cassandro/modal-alert/blob/main/src/svg/svg-to-js.mjs).
-   DO NOT EDIT (any changes will be overwritten)
-*/
-
-export const marks = {"confirm":"<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 132 132\"><circle cx=\"66\" cy=\"66\" r=\"63\"/><path d=\"M44 48a21.928 21.928 0 0 1 6.443-15.556A21.931 21.931 0 0 1 66 26c12.15 0 22 9.85 22 22 0 6.14-2.668 11.543-6.573 15.683-6.514 6.91-15.363 4.47-15.363 16.065v7.935M66 105.816v-6.975\"/></svg>\n","error":"<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 132 132\"><circle cx=\"66\" cy=\"66\" r=\"63\"/><path d=\"M35 39l61.4 54.4m0-54.4L35 93.2\"/></svg>\n","info":"<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 132 132\"><circle cx=\"66\" cy=\"66\" r=\"63\"/><path d=\"M74 105l-8.6.237V45.713L56 46m9.6-13.025V26\"/></svg>\n","success":"<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 132 132\"><circle cx=\"66\" cy=\"66\" r=\"63\"/><path d=\"M101.4 42L52.7 90.6 31 69.3\"/></svg>\n","warning":"<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 132 132\"><circle cx=\"66\" cy=\"66\" r=\"63\"/><path d=\"M41.839 72.475v-37.2c0-3.852 3.143-6.975 7.02-6.975s7.02 3.123 7.02 6.975V65.5m0-30.225v-9.3c0-3.852 3.143-6.975 7.02-6.975s7.02 3.123 7.02 6.975V65.5m0-30.225c0-3.852 3.143-6.975 7.02-6.975 3.878 0 7.02 3.123 7.02 6.975V65.5m0-20.925c0-3.852 3.144-6.975 7.02-6.975 3.878 0 7.021 3.123 7.021 6.975V84.1C98 99.509 85.428 112 69.92 112h-9.36c-9.896-1.357-18.517-6.496-23.401-13.95L24.522 73.637c-2.584-3.53-1.799-8.475 1.755-11.043 3.555-2.568 8.531-1.788 11.116 1.743l4.212 8.138\"/></svg>\n"};

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

@@ -1,159 +0,0 @@
-.modal-alert {
-  width: 600px;
-  max-width: 90vw;
-  padding: 0;
-  background-color: var(--malert-background-color, #fff);
-  border: none;
-  border-radius: var(--malert-border-radius, 6px);
-
-  /* https://www.joshwcomeau.com/shadow-palette/ */
-  --default-shadow-color: 0deg 0% 0%;
-  --default-box-shadow:
-    0 .4px 04px hsl(var(--default-shadow-color) / .15),
-    -.3px 3px 3.3px -.5px hsl(var(--default-shadow-color) / .15),
-    -.5px 6.1px 6.6px -.9px hsl(var(--default-shadow-color) / .14),
-    -.9px 11.2px 12.1px -1.4px hsl(var(--default-shadow-color) / .14),
-    -1.6px 19.5px 21.1px -1.9px hsl(var(--default-shadow-color) / .13),
-    -2.7px 32.7px 35.4px -2.3px hsl(var(--default-shadow-color) / .13),
-    -4.3px 52px 56.4px -2.8px hsl(var(--default-shadow-color) / .12);
-
-  box-shadow: var(--malert-box-shadow, var(--default-box-shadow));
-  /* box-shadow: 2px 2px 12px #000; */
-
-  &::backdrop {
-    overscroll-behavior: contain;
-    background-color: var(--malert-backdrop, rgba(0 0 0 / .7));
-  }
-
-  &, * {
-    box-sizing: border-box;
-  }
-
-  &.modal-alert-success {
-    --malert-color: var(--malert-success-color, hsl(123deg 51% 33%));
-    --malert-color-fg: var(--malert-success-color-fg, #fff);
-  }
-  &.modal-alert-info {
-    --malert-color: var(--malert-info-color, hsl(201deg 98% 41%));
-    --malert-color-fg: var(--malert-info-color-fg, #fff);
-  }
-  &.modal-alert-warning {
-    --malert-color: var(--malert-warning-color, hsl(29deg 99% 40%));
-    --malert-color-fg: var(--malert-warning-color-fg, #fff);
-  }
-  &.modal-alert-error {
-    --malert-color: var(--malert-error-color, hsl(0deg 100% 40%));
-    --malert-color-fg: var(--malert-error-color-fg, #fff);
-  }
-  &.modal-alert-confirm {
-    --malert-color: var(--malert-confirm-color, hsl(277deg 72% 45%));
-    --malert-color-fg: var(--malert-confirm-color-fg, #fff);
-  }
-}
-
-.malert-inner {
-  display: flex;
-  flex-flow: column nowrap;
-  /* gap: .7rem; */
-  align-items: stretch;
-  justify-content: flex-start;
-
-  @media screen and (min-width: 600px) {
-    flex-direction: row;
-  }
-}
-
-
-.malert-mark {
-  display: flex;
-  flex: 0;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  padding: .4rem;
-  background-color: var(--malert-color);
-
-  svg {
-    width: 100px;
-    aspect-ratio: 1;
-    fill: none;
-    stroke: var(--malert-color-fg);
-    stroke-linecap: round;
-    stroke-linejoin: round;
-    stroke-width: var(--malert-marks-stroke-width, 6px);
-  }
-
-  @media screen and (min-width: 600px) {
-    flex-direction: row;
-    align-items: flex-start;
-    width: auto;
-    padding: 1rem;
-    /* svg {
-      width: 100px;
-    } */
-  }
-}
-
-.malert-body {
-  display: flex;
-  flex: 1;
-  flex-flow: column nowrap;
-  gap: .5rem;
-  align-items: stretch;
-  justify-content: flex-start;
-  padding: .5rem;
-
-  text-align: center;
-
-  @media screen and (min-width: 600px) {
-    padding: 1rem;
-    text-align: left;
-  }
-}
-
-.malert-heading {
-  font-family: var(--malert-heading-font-family, sans-serif);
-  font-size: var(--malert-heading-font-size, 2rem);
-  font-weight: var(--malert-heading-font-weight, 700);
-  line-height: var(--malert-heading-line-height, 1.2);
-}
-.malert-text {
-  font-family: var(--malert-text-font-family, sans-serif);
-
-}
-.malert-btns {
-  display: flex;
-  flex-flow: column nowrap;
-  gap: 1rem;
-  align-items: center;
-  justify-content: flex-start;
-
-  padding-top: 1rem;
-  margin-top: auto;
-
-  @media screen and (min-width: 600px) {
-    flex-direction: row;
-    justify-content: space-between;
-  }
-}
-
-
-.modal-alert-animated {
-  transform: translateY(-500%);
-  animation: dialog-in .3s ease-out;
-
-  &[open] {
-    transform: none;
-  }
-}
-
-@keyframes dialog-in {
-  from {
-    opacity: 0;
-    transform: translateY(-50%);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}

package/src/components/modal-alert/svg/svg-to-js.mjs

@@ -1,26 +0,0 @@
-/* eslint-disable no-console */
-// build a js file with all svgs as variables
-
-import * as fs from 'fs';
-import * as path from 'path';
-
-const __dirname = new URL('.', import.meta.url).pathname
-  ,target_file = path.resolve(__dirname, '../marks.js')
-  ,marks = {};
-
-['confirm', 'error', 'info', 'success', 'warning'].forEach(svg => {
-  const svg_content = fs.readFileSync(path.resolve(__dirname, `./${svg}.svg`), 'utf8');
-  marks[svg] = svg_content; //.replaceAll('\'', '\\\'');
-});
-
-const content = '/* eslint-disable quotes */\n\n' +
-  '/*\n' +
-  '   This file was generated by the script `svg-to-js.mjs`\n' +
-  '   (https://github.com/massimo-cassandro/modal-alert/blob/main/src/svg/svg-to-js.mjs).\n' +
-  '   DO NOT EDIT (any changes will be overwritten)\n' +
-  '*/\n\n' +
-  'export const marks = ' + JSON.stringify(marks) + ';';
-
-fs.writeFileSync(target_file, content, 'utf-8');
-
-console.log('svg-to-js: DONE');