lupine.components 1.0.18 → 1.0.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lupine.components",
-  "version": "1.0.18",
+  "version": "1.0.19",
   "license": "MIT",
   "author": "uuware.com",
   "homepage": "https://github.com/uuware/lupine.js",

package/src/components/menu-bar.tsx

@@ -58,7 +58,7 @@ export const MenuBar = ({
       display: 'none',
       position: 'absolute',
       backgroundColor: 'var(--menubar-sub-bg-color)', //'#f9f9f9',
-      minWidth: '160px',
+      minWidth: '165px',
       boxShadow: '0px 8px 16px 0px rgba(0,0,0,0.2)',
       zIndex: 'var(--layer-menu-sub)',
       flexDirection: 'column',

package/src/components/menu-sidebar.tsx

@@ -67,7 +67,7 @@ export const MenuSidebar = ({
       // position: 'absolute',
       // color: 'var(--sidebar-sub-color)',
       // backgroundColor: 'var(--sidebar-sub-bg-color)',
-      minWidth: '160px',
+      minWidth: '165px',
       // boxShadow: '0px 8px 16px 0px rgba(0,0,0,0.2)',
       zIndex: 'var(--layer-sidebar-sub)',
       flexDirection: 'column',

package/src/components/modal.tsx

@@ -12,6 +12,7 @@ export class ModalWindow {
     closeEvent,
     handleClicked,
     closeWhenClickOutside = true,
+    zIndex,
   }: FloatWindowShowProps): Promise<FloatWindowCloseProps> {
     return FloatWindow.show({
       title,
@@ -24,6 +25,7 @@ export class ModalWindow {
       closeEvent,
       handleClicked,
       closeWhenClickOutside,
+      zIndex,
     });
   }
 }

package/src/lib/blob-utils.ts

@@ -0,0 +1,23 @@
+export const blobToBase64 = (blob: Blob): Promise<string> => {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onloadend = () => resolve(reader.result as string); // data:audio/mpeg;base64,...
+    reader.onerror = reject;
+    reader.readAsDataURL(blob);
+  });
+};
+
+export const blobFromBase64 = (base64: string) => {
+  const [header, base64Data] = base64.split(','); // remove data:... prefix
+  const mimeMatch = header.match(/data:(.*);base64/);
+  const mimeType = mimeMatch ? mimeMatch[1] : 'application/octet-stream';
+  const byteCharacters = atob(base64Data);
+  const byteNumbers = Array.from(byteCharacters).map((c) => c.charCodeAt(0));
+  const byteArray = new Uint8Array(byteNumbers);
+  return new Blob([byteArray], { type: mimeType });
+};
+
+export const base64ToUrl = (base64: string) => {
+  const blob = blobFromBase64(base64);
+  return URL.createObjectURL(blob);
+};

package/src/lib/dom-utils.ts

@@ -0,0 +1,32 @@
+// todo: tree-shaking
+export class DomUtils {
+  public static getValue(cssSelector: string) {
+    return (document.querySelector(cssSelector) as HTMLInputElement)?.value;
+  }
+
+  public static setValue(cssSelector: string, value: string) {
+    const dom = document.querySelector(cssSelector) as HTMLInputElement;
+    if (dom) dom.value = value;
+  }
+
+  public static getChecked(cssSelector: string) {
+    return (document.querySelector(cssSelector) as HTMLInputElement)?.checked;
+  }
+
+  public static setChecked(cssSelector: string, checked: boolean) {
+    const dom = document.querySelector(cssSelector) as HTMLInputElement;
+    if (dom) dom.checked = checked;
+  }
+
+  public static joinValues(values: (string | undefined)[], joinChar = ' ') {
+    return values.filter(Boolean).join(joinChar);
+  }
+
+  public static byId(id: string) {
+    return document.querySelector(`#${id}`);
+  }
+
+  public static bySelector(selector: string) {
+    return document.querySelector(selector);
+  }
+}

package/src/lib/{dom/download.ts → download-link.ts}

@@ -1,4 +1,4 @@
-export const download = (link: string, filename?: string) => {
+export const downloadLink = (link: string, filename?: string) => {
   const dom = document.createElement('a');
   dom.setAttribute('href', link);
   dom.setAttribute('download', filename || 'true');

package/src/lib/escape-html.ts

@@ -0,0 +1,8 @@
+export const escapeHtml = (str: string) => {
+  return str
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;');
+};

package/src/lib/find-parent-tag.ts

@@ -0,0 +1,8 @@
+export const findParentTag = (dom: HTMLElement, tag: string) => {
+  const tagUpper = tag.toUpperCase();
+  let parent = dom.parentElement;
+  while (parent && parent.tagName !== tagUpper && parent.tagName !== 'BODY') {
+    parent = parent.parentElement;
+  }
+  return parent;
+};

package/src/lib/index.ts

@@ -1,14 +1,21 @@
-export * from './dom';
+export * from './blob-utils';
+export * from './calculate-text-width';
 export * from './date-utils';
 export * from './deep-merge';
 export * from './document-ready';
+export * from './dom-utils';
 export * from './download-file';
+export * from './download-link';
+export * from './download-stream';
 export * from './drag-util';
 export * from './dynamical-load';
+export * from './escape-html';
+export * from './find-parent-tag';
 export * from './format-bytes';
 export * from './lite-dom';
 export * from './message-hub';
 export * from './observable';
+export * from './path-utils';
 export * from './promise-timeout';
 export * from './simple-storage';
 export * from './stop-propagation';

package/src/lib/path-utils.ts

@@ -0,0 +1,37 @@
+export const pathUtils = {
+  join(...parts: string[]): string {
+    let joined = parts.filter(Boolean).join('/');
+    joined = joined.replace(/\/+/g, '/'); // merge duplicate slashes
+    const isAbsolute = parts[0]?.startsWith('/');
+    return isAbsolute ? '/' + joined.replace(/^\/+/, '') : joined.replace(/^\/+/, '');
+  },
+
+  dirname(p: string): string {
+    if (!p) return '.';
+    p = p.replace(/\/+$/, '');
+    const idx = p.lastIndexOf('/');
+    if (idx === -1) return '.';
+    if (idx === 0) return '/';
+    return p.slice(0, idx);
+  },
+
+  // get filename, remove ext if exists
+  basename(p: string, ext?: string): string {
+    if (!p) return '';
+    p = p.replace(/\/+$/, '');
+    const idx = p.lastIndexOf('/');
+    let base = idx === -1 ? p : p.slice(idx + 1);
+    if (ext && base.endsWith(ext)) {
+      base = base.slice(0, -ext.length);
+    }
+    return base;
+  },
+
+  // .hidden's ext is empty (Node.js behavior)
+  extname(p: string): string {
+    if (!p) return '';
+    const base = pathUtils.basename(p);
+    const idx = base.lastIndexOf('.');
+    return idx > 0 ? base.slice(idx) : '';
+  },
+};

package/src/lib/dom/index.ts

@@ -1,71 +0,0 @@
-import { clearCookie, getCookie, setCookie } from 'lupine.web';
-import { calculateTextWidth } from './calculate-text-width';
-import { download } from './download';
-import { downloadStream } from './download-stream';
-
-export class DomUtils {
-  public static calculateTextWidth(text: string, font: string) {
-    return calculateTextWidth(text, font);
-  }
-
-  public static getValue(cssSelector: string) {
-    return (document.querySelector(cssSelector) as HTMLInputElement)?.value;
-  }
-
-  public static setValue(cssSelector: string, value: string) {
-    const dom = document.querySelector(cssSelector) as HTMLInputElement;
-    if (dom) dom.value = value;
-  }
-
-  public static getChecked(cssSelector: string) {
-    return (document.querySelector(cssSelector) as HTMLInputElement)?.checked;
-  }
-
-  public static setChecked(cssSelector: string, checked: boolean) {
-    const dom = document.querySelector(cssSelector) as HTMLInputElement;
-    if (dom) dom.checked = checked;
-  }
-
-  public static joinValues(values: (string | undefined)[]) {
-    return values.filter((item) => item && item !== '').join(' ');
-  }
-
-  public static setCookie(
-    name: string,
-    value: string,
-    expireDays = 365,
-    path?: string,
-    domain?: string,
-    secure?: string
-  ) {
-    return setCookie(name, value, expireDays, path, domain, secure);
-  }
-
-  public static getCookie(key: string) {
-    return getCookie(key);
-  }
-
-  public static clearCookie(name: string, path?: string, domain?: string, secure?: string) {
-    return clearCookie(name, path, domain, secure);
-  }
-
-  public static download(link: string, filename?: string) {
-    return download(link, filename);
-  }
-
-  public static downloadStream(blob: Blob, filename?: string) {
-    return downloadStream(blob, filename);
-  }
-
-  public static byId(id: string) {
-    return document.querySelector(`#${id}`);
-  }
-
-  public static byCssPath(cssPath: string) {
-    return document.querySelector(cssPath);
-  }
-
-  public static bySelector(selector: string) {
-    return document.querySelector(selector);
-  }
-}