@drumee/ui-toolkit 0.0.17 → 0.0.19

package/index.js

@@ -1,31 +1,7 @@
 
-let loaded = 0;
-function start() {
-  if (loaded) return;
-  Kind.registerAddons({
-    'dtk_otp': import('./widgets/otp'),
-    'dtk_dialog': import('./widgets/dialog'),
-    'dtk_pwsetter': import('./widgets/pwsetter'),
-  })
-  loaded = 1;
-}
-
-
 /**
  * 
  */
-export function loadWidgets() {
-  if (document.readyState == 'complete') {
-    start()
-  } else {
-    if (location.hash) {
-      document.addEventListener('drumee:plugins:ready', start);
-    } else {
-      document.addEventListener('drumee:router:ready', start);
-    }
-  }
+export function loadSeeds() {
+  Kind.registerAddons(require('./seeds'))
 }
-
-export * from './utils/index';
-export * from './utils/validator';
-export * from './utils/contextmenu';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drumee/ui-toolkit",
-  "version": "0.0.17",
+  "version": "0.0.19",
   "description": "",
   "main": "./index.js",
   "repository": {

package/seeds.js

@@ -0,0 +1,5 @@
+module.exports = {
+  'dtk_otp': import('./widgets/otp'),
+  'dtk_dialog': import('./widgets/dialog'),
+  'dtk_pwsetter': import('./widgets/pwsetter'),
+}

package/templates/progress.js

@@ -0,0 +1,13 @@
+const { arcLength } = require("@drumee/ui-essentials")
+module.exports = function(ui){
+  let html;
+  const id   = ui._id; 
+  const val  = arcLength(ui.mget(_a.percent)); 
+  return html = `
+  <svg id="${id}-main" viewBox="0 0 200 200" class="${ui.fig.family}__progress outer"> 
+    <circle id="${id}-bg" class="${ui.fig.family}__progress bg" cx="100" cy="95" r="68" stroke-dashoffset="0" stroke-dasharray="502.4"></circle> 
+    <circle id="${id}-fg" class="${ui.fig.family}__progress fg" cx="95" cy="90" r="72" stroke-dashoffset="${val}" stroke-dasharray="502.4" transform="rotate(270, 100, 90)"></circle> 
+    <circle class="${ui.fig.family}__progress inner" cx="100" cy="95" r="66" stroke-dashoffset="0" fill="#FFFFFF"></circle> 
+  </svg>
+`;
+};

package/utils/constants.js

@@ -1,60 +0,0 @@
-export const STATE = {
-  1: 1,
-  on: 1,
-  in: 1,
-  yes: 1,
-  true: 1,
-  sms: 1,
-  email: 1,
-  0: 0,
-  off: 0,
-  out: 0,
-  no: 0,
-  fasle: 0,
-  undefined: 0,
-  null: 0,
-};
-
-export const RADIO = {
-  1: "on",
-  on: "on",
-  in: "on",
-  yes: "on",
-  true: "on",
-  0: "off",
-  off: "off",
-  out: "off",
-  no: "off",
-  fasle: "off",
-  undefined: "off",
-  null: "off",
-};
-
-export const BOOLEAN = {
-  1: true,
-  on: true,
-  in: true,
-  yes: true,
-  true: true,
-  0: false,
-  off: false,
-  out: false,
-  no: false,
-  fasle: false,
-  undefined: false,
-  null: false,
-};
-
-export const LOG_LEVEL = {
-  info: 2,
-  debug: 3,
-  verbose: 4,
-  gossip: 5
-}
-
-export const LOG_NAME = {
-  info: 'info',
-  debug: 'debug',
-  verbose: 'verbose',
-  gossip: 'gossip'
-}

package/utils/contextmenu.js

@@ -1,27 +0,0 @@
-
-export function buildContextmenu(p, trigger, e) {
-  let kids;
-  if (_.isFunction(p.contextmenuSkeleton)) {
-    kids = p.contextmenuSkeleton(p, trigger, e);
-  } else if (_.isArray(p.contextmenuSkeleton)) {
-    kids = p.contextmenuSkeleton;
-  } else if (_.isObject(p.contextmenuSkeleton)) {
-    kids = [p.contextmenuSkeleton];
-  }
-  if (_.isString(kids) || _.isEmpty(kids)) {
-    return Skeletons.Box.Y({ volatility: 1, style: { display: _a.none } });
-  } else if (!_.isArray(kids)) {
-    kids = [kids];
-  }
-  return Skeletons.Box.Y({
-    volatility: 4,
-    className: `drumee-contextmenu ${p.fig.family}`,
-    kids,
-    uiHandler: [p],
-    style: {
-      left: e.pageX,
-      top: e.pageY,
-      zIndex: 100000
-    }
-  })
-}

package/utils/index.js

@@ -1,715 +0,0 @@
-const Filesize = require("filesize");
-
-let VERBOSITY = parseInt(localStorage.logLevel) || 0;
-const { LOG_LEVEL, BOOLEAN, STATE, RADIO } = require("./constants")
-
-
-
-/**
- * 
- * @param {*} name 
- * @returns 
- */
-export function log(name) {
-  if (!name) return VERBOSITY;
-  return VERBOSITY >= LOG_LEVEL[name];
-};
-
-
-
-/**
- *
- * @param {*} c
- * @returns
- */
-export function clarityToAlpha(c) {
-  let a = (100 - c) / 100;
-  if (a > 1) {
-    a = 1;
-  }
-  if (a < 0) {
-    a = 0;
-  }
-  return a;
-}
-
-/**
- * 
- * @returns 
- */
-export function colon() {
-  switch (Visitor.language()) {
-    case "fr":
-      return " :";
-    default:
-      return ":";
-  }
-}
-
-
-/**
- * 
- * @param {*} name 
- * @param {*} s 
- * @param {*} l 
- * @returns 
- */
-export function colorFromName(name, s, l) {
-  if (s == null) {
-    s = 40;
-  }
-  if (l == null) {
-    l = 60;
-  }
-  let hash = 0;
-  let i = 0;
-  while (i < name.length) {
-    hash = name.charCodeAt(i) + (hash << 5) - hash;
-    i++;
-  }
-  const h = hash % 360;
-  const r = `hsl(${h}, ${s}%, ${l}%)`;
-  return r;
-}
-
-/**
- * 
- * @param {*} format 
- * @returns 
- */
-export function today(format) {
-  const f = format || Visitor.dateformat();
-  return Dayjs().format(f);
-}
-
-
-
-/**
- * 
- * @param {*} val 
- * @param {*} opt 
- * @returns 
- */
-export function filesize(val, opt) {
-  if (val == null || val == undefined) val = 0;
-  return Filesize(val, { locale: Visitor.language(), ...opt });
-}
-
-
-
-/**
- * 
- * @param {*} text
- */
-export async function copyToClipboard(text) {
-  // Try using modern Clipboard API first
-  if (navigator.clipboard && navigator.clipboard.writeText) {
-    try {
-      // await navigator.clipboard.writeText(data);
-      // return true;
-      const blob = new Blob([text], { type: 'text/plain' });
-      // Create a ClipboardItem with the Blob
-      const clipboardItem = new ClipboardItem({ [blob.type]: blob });
-      // Write the item to the clipboard
-      await navigator.clipboard.write([clipboardItem]);
-      return true;
-    } catch (err) {
-      console.error('Clipboard API failed:', err);
-      // Fall back to execCommand method
-    }
-  }
-
-  // Fallback for older browsers
-  const el = document.createElement("textarea");
-  el.value = text;
-  el.setAttribute("readonly", "");
-  el.style.position = "absolute";
-  el.style.left = "-9999px";
-  document.body.appendChild(el);
-
-  el.select();
-  const success = document.execCommand("copy");
-  document.body.removeChild(el);
-
-  return success;
-}
-/**
- * 
- * @param {*} val 
- * @returns 
- */
-export function toOnOff(val) {
-  if (val) {
-    return _a.on;
-  }
-  return _a.off;
-}
-
-
-
-/**
- * 
- * 
- * @param {*} str 
- * @returns 
- */
-export function isHTML(str) {
-  const a = document.createElement("div");
-  a.innerHTML = str;
-  for (let c of Array.from(a.childNodes)) {
-    if (c.nodeType === 1) {
-      return true;
-    }
-  }
-  return false;
-}
-
-
-/**
- * 
- * @param {*} sec 
- * @returns 
- */
-export function timestamp(sec) {
-  if (sec == null) {
-    sec = 0;
-  }
-  const ts = new Date().getTime();
-  if (sec) {
-    return Math.round(ts / 1000);
-  }
-  return ts;
-}
-
-
-/**
- * 
- * @param {*} format 
- * @returns 
- */
-export function timeNow(format) {
-  if (format == null) {
-    format = "YY-MM-DD-hh-mm";
-  }
-  const d = new Date();
-  return Dayjs(d.getTime()).format(format);
-}
-
-/**
- * 
- * @param {*} time 
- * @param {*} format 
- * @returns 
- */
-export function dayOfTime(time, format) {
-  if (format == null) {
-    format = "DD/MM/YYYY";
-  }
-  return Dayjs(time, "X").format(format);
-}
-
-/**
- * 
- * @param {*} url 
- * @returns 
- */
-export function loadJS(url) {
-  const a = new Promise(function (resolve, reject) {
-    const xhr = new XMLHttpRequest();
-    xhr.open("GET", url, true);
-    xhr.onload = function (e) {
-      const el = document.createElement(_a.script);
-      el.setAttribute(_a.text, "text/javascript");
-      el.type = "text/javascript";
-      el.setAttribute("charset", "utf-8");
-      el.setAttribute("async", "");
-      el.innerHTML = xhr.responseText;
-      document.head.appendChild(el);
-      resolve(xhr);
-    };
-
-    xhr.onerror = function (e) {
-      reject(xhr);
-    };
-
-    xhr.send();
-    return xhr;
-  });
-  return a;
-}
-
-/**
- * 
- * @param {*} v 
- * @returns 
- */
-export function toggleState(v) {
-  if (STATE[v] != null) {
-    return STATE[v];
-  }
-  if (v) {
-    return 1;
-  }
-  return 0;
-}
-
-/**
- * 
- * @param {*} v 
- * @returns 
- */
-export function radioState(v) {
-  if (RADIO[v] != null) {
-    return RADIO[v];
-  }
-  return 0;
-}
-
-/**
- * 
- * @param {*} v 
- * @returns 
- */
-export function toBoolean(v) {
-  if (BOOLEAN[v] != null) {
-    return BOOLEAN[v];
-  }
-  return false;
-}
-
-
-/**
- * 
- * @param {*} x 
- * @returns 
- */
-export function isNumeric(x) {
-  if (_.isNumber(x)) {
-    return true;
-  }
-  if (_.isString(x)) {
-    if (x.match(/^[0-9]+(\.)*[0-9]\%$/)) {
-      return false;
-    }
-    return x.match(/[0-9]\.*[0-9]*/) || x.match(/([0-9]\.*[0-9]*)px/i);
-  }
-  return false;
-}
-
-/**
- * 
- * @param {*} outer 
- * @param {*} inner 
- * @returns 
- */
-export function fitBoxes(outer, inner) {
-  let hi, wi;
-  outer.height = parseInt(outer.height);
-  outer.width = parseInt(outer.width);
-  inner.height = parseInt(inner.height) || outer.height;
-  inner.width = parseInt(inner.width) || outer.width;
-  const innerRatio = inner.width / inner.height;
-  const outerRatio = outer.width / outer.height;
-  if (outerRatio > innerRatio) {
-    wi = (inner.width * outer.height) / inner.height;
-    hi = outer.height;
-  } else {
-    wi = outer.width;
-    hi = (inner.height * outer.width) / inner.width;
-  }
-  const scaled = outerRatio / innerRatio;
-  const _box = {
-    width: wi,
-    height: hi,
-    scaled,
-  };
-  return _box;
-}
-
-/**
- * 
- * @param {*} string 
- * @returns 
- */
-export function capFirst(string) {
-  return string.charAt(0).toUpperCase() + string.slice(1);
-}
-
-/**
- * 
- * @param {*} sortByFunction 
- * @returns 
- */
-export function reverseSortBy(sortByFunction) {
-  return function (left, right) {
-    var l = sortByFunction(left);
-    var r = sortByFunction(right);
-
-    if (l === void 0) return -1;
-    if (r === void 0) return 1;
-
-    return l < r ? 1 : l > r ? -1 : 0;
-  };
-}
-
-/**
- * 
- * @param {*} name 
- * @returns 
- */
-export function modelComparator(name) {
-  return function modelComparator(model) {
-    let v = model.get(name);
-    if (v.toLowerCase) {
-      return v.toLowerCase();
-    }
-    return v;
-  }
-}
-
-/**
- * 
- * @param {*} size 
- * @returns 
- */
-export function toPercent(size) {
-  size = size * 100;
-  return `${Math.round(size)}%`;
-}
-
-
-
-
-/**
- * 
- * @param {*} val 
- * @returns 
- */
-export function arcLength(val) {
-  const c = Math.PI * (80 * 2);
-
-  if (val < 0) {
-    val = 0;
-  }
-  if (val > 100) {
-    val = 100;
-  }
-
-  const pct = ((100 - val) / 100) * c;
-  return `${pct}`;
-}
-
-/**
- *
- * @param {*} msg
- */
-export function openUserMailAgent(msg) {
-  let subject = msg.subject || msg.title || "";
-  let body = msg.body || msg.message || "";
-  subject = encodeURIComponent(subject);
-  body = encodeURIComponent(body);
-  var mailToLink = `?subject=${subject}&body=${body}`;
-  if (msg.recipients) {
-    if (_.isString(msg.recipients)) {
-      mailToLink = `mailto:${msg.recipients}${mailToLink}`;
-    } else if (_.isArray(msg.recipients)) {
-      let r = msg.recipients.join(";");
-      mailToLink = `mailto:${r}${mailToLink}`;
-    }
-  } else {
-    mailToLink = `mailto:${mailToLink}`;
-  }
-  const a = document.createElement(_K.tag.a);
-  a.hidden = "";
-  a.setAttribute(_a.href, mailToLink);
-  a.setAttribute(_a.target, "_blank");
-  a.style.position = _a.absolute;
-  a.style.opacity = 0;
-  a.style.width = "10px";
-  a.style.height = "10px";
-  var clickHandler = () => {
-    const f = () => {
-      a.removeEventListener(_e.click, clickHandler);
-      a.remove();
-    };
-    setTimeout(f, 300);
-  };
-  console.log("AAA:427", a)
-  window.CLIKK = a;
-  a.addEventListener(_e.click, clickHandler, false);
-  setTimeout(() => {
-    a.click();
-  }, 300);
-}
-
-
-/**
- * 
- * @param {*} link 
- * @returns 
- */
-export function openLink(link) {
-  if (window.open(link, "_blank") == null) {
-    return alert(LOCALE.WINDOW_BLOCKED);
-  }
-}
-
-/**
- * 
- * @param {*} len 
- * @param {*} sep 
- * @returns 
- */
-export function randomString(len, sep) {
-  if (len == null) {
-    len = 1;
-  }
-  if (sep == null) {
-    sep = "";
-  }
-  const a = new Uint32Array(len);
-  const b = window.crypto.getRandomValues(a);
-  const c = [];
-  b.forEach((e) => c.push(e.toString(16)));
-  return c.join(sep);
-}
-
-/**
- * 
- * @param {*} e 
- * @returns 
- */
-export function dataTransfer(e) {
-  let item;
-  let res = { folders: [], files: [] };
-  switch (e.type) {
-    case _e.drop:
-      var dt = e.originalEvent.dataTransfer;
-      if (dt == null) {
-        return res;
-      }
-      var items = dt.items || dt.files || [];
-
-      var folders = [];
-      var entries = [];
-      var files = [];
-
-      for (item of Array.from(items)) {
-        if (_.isFunction(item.getAsEntry)) {
-          entries.push(item.getAsEntry());
-        } else if (_.isFunction(item.webkitGetAsEntry)) {
-          entries.push(item.webkitGetAsEntry());
-        }
-      }
-
-      for (let entry of Array.from(entries)) {
-        if (entry && entry.isDirectory) {
-          folders.push(entry);
-        } else if (entry && entry.isFile) {
-          files.push(entry);
-        }
-      }
-      res = { folders, files };
-      break;
-    case _e.change:
-      items = e.target.items || [];
-      files = e.target.files || [];
-      folders = [];
-      for (item of Array.from(items)) {
-        if (_.isFunction(item.getAsEntry)) {
-          folders.push(item.getAsEntry());
-        } else if (_.isFunction(item.webkitGetAsEntry)) {
-          folders.push(item.webkitGetAsEntry());
-        }
-      }
-      res = { folders, files };
-      break;
-    default:
-      console.warn("Got wrong type", e);
-  }
-  return res;
-}
-
-/**
-* 
-* @param {*} fonts 
-* @param {*} id 
-* @returns 
-*/
-export function appendFontFace(fonts, id) {
-  if (!_.isArray(fonts)) {
-    return;
-  }
-  const { main_domain } = bootstrap();
-  id = id || Host.get(_a.id);
-  id = `--font-face-${id}`;
-  let el = document.getElementById(id);
-  if (el != null) {
-    document.head.removeChild(el);
-  }
-  el = document.createElement(_a.style);
-  el.setAttribute(_a.id, id);
-  el.setAttribute(_a.type, "text/css");
-  el.setAttribute("rel", _a.stylesheet);
-  el.setAttribute(_a.media, _a.screen);
-  const list = [];
-  const { protocol } = bootstrap()
-  for (let f of Array.from(fonts)) {
-    var l1, url;
-    if (_.isEmpty(f.local1)) {
-      l1 = f.name;
-    } else {
-      l1 = f.local1;
-    }
-    url = `${protocol}://${main_domain}${f.url}`
-    const src = `local('${l1}'), local('${f.local2}'), url(${url}) format('${f.format}')`;
-    const fn = f.name || f.family;
-    const str = `@font-face {\n \
-font-family:'${fn}';\n \
-font-style: ${f.style};\n \
-font-weight: ${f.weight};\n \
-src: ${src};\n \
-}\n`;
-    list.push(str);
-  }
-  el.appendChild(document.createTextNode(list.join(" ")));
-  return document.head.appendChild(el);
-}
-
-
-/**
- * 
- * @param {*} url 
- * @returns 
- */
-export function appendLink(url) {
-  return new Promise((resolve, reject) => {
-    const id = this._ensureEl(url, "link");
-    // id  = opt.id
-    if (id == null || id === undefined) {
-      this.debug("Injecting undefined link", url);
-      return reject();
-    }
-    const el = document.createElement(_a.link);
-    el.setAttribute("id", id);
-    el.setAttribute("rel", _a.stylesheet);
-    el.setAttribute("href", url);
-    el.setAttribute("media", "screen");
-    const xhr = new XMLHttpRequest();
-    xhr.allowCORS(xhr, url);
-    xhr.open("GET", url, true);
-    xhr.send();
-    return (xhr.onloadend = function (e) {
-      document.head.appendChild(el);
-      resolve(e);
-    });
-  });
-}
-
-
-/**
- * 
- * @param {*} url 
- * @returns 
- */
-export function createQrcode(opt) {
-  const p = 50;
-  const { id, text = "", maxWidth = window.innerWidth - p, maxHeight = window.innerHeight - p } = opt;
-  let count = 0;
-  return new Promise((resolve, reject) => {
-    let i = setInterval(async () => {
-      count++;
-      const canvas = document.getElementById(id);
-      if (canvas) {
-        clearInterval(i);
-        let { toDataURL } = require("qrcode");
-        let src = await toDataURL(text);
-        if (canvas.width > maxWidth) {
-          canvas.width = maxWidth;
-        }
-        if (canvas.height > maxHeight) {
-          canvas.height = maxHeight;
-        }
-        canvas.src = src;
-        resolve(canvas)
-      } else {
-        if (count > 100) {
-          console.warn(`Failed to find provided element id=${id}`);
-          reject({ error: `Element not found` })
-        }
-      }
-    }, 300);
-  });
-}
-
-export function createSafeObject(initial = {}) {
-  const data = { ...initial };
-
-  const handler = {
-    get(target, prop) {
-      // Handle method calls
-      if (methods.hasOwnProperty(prop)) {
-        return methods[prop].bind(proxy);
-      }
-
-      // Handle property access
-      if (prop in data) {
-        return data[prop];
-      }
-
-      // Return key as string for missing properties
-      return String(prop);
-    },
-
-    set(target, prop, value) {
-      // Don't allow overriding methods
-      if (prop in methods) {
-        console.warn(`Cannot override method "${prop}"`);
-        return false;
-      }
-      data[prop] = value;
-      return true;
-    }
-  };
-
-  // Built-in methods
-  const methods = {
-    set(key, value) {
-      data[key] = value;
-      return this;
-    },
-
-    get(key) {
-      return key in data ? data[key] : String(key);
-    },
-
-    extend(newProps) {
-      Object.assign(data, newProps);
-      return this;
-    },
-
-    delete(key) {
-      delete data[key];
-      return this;
-    },
-
-    has(key) {
-      return key in data;
-    },
-
-    keys() {
-      return Object.keys(data);
-    },
-
-    values() {
-      return Object.values(data);
-    },
-
-    toObject() {
-      return { ...data };
-    }
-  };
-
-  const proxy = new Proxy({}, handler);
-  return proxy;
-}

package/utils/validator.js

@@ -1,56 +0,0 @@
-const identRegExp = /^([a-zA-Z0-9_\-])([a-zA-Z0-9_\.\-])([a-zA-Z0-9_\.\-])*$/;
-const hostRegExp = /^[a-zA-Z0-9_\-]+$/;
-const nameRegExp = /^([a-zA-Z0-9_\.\-\'\ xC0-\xFF])+$/;
-
-const validator = {
-  require(v) {
-    if (v.trim() === '') {
-      return false;
-    }
-    return true;
-  },
-
-  email(v) {
-    if (v.trim() !== '') {
-      return v.isEmail();
-    }
-    return true;
-  },
-
-  phone(v) {
-    if (v.trim() !== '') {
-      return v.isPhoneNumber();
-    }
-    return true;
-  },
-
-  emailOrIdent(v) {
-    if (v.trim() !== '') {
-      return v.isEmail() || identRegExp.test(v);
-    }
-    return true;
-  },
-
-  ident(v) {
-    if (v.trim() !== '') {
-      return identRegExp.test(v);
-    }
-    return true;
-  },
-
-  host(v) {
-    if (v.trim() !== '') {
-      return hostRegExp.test(v);
-    }
-    return true;
-  },
-
-  name(v) {
-    if (v.trim() !== '') {
-      return nameRegExp.test(v);
-    }
-    return true;
-  }
-};
-
-module.exports = validator;