lupine.components 1.1.11 → 1.1.14

package/src/frames/slider-frame.tsx

@@ -1,111 +1,111 @@
-/* frame component to show pages (sliders) from right or bottom
-  const sliderFrameHook: SliderFrameHookProps = {};
-  const onClick = (event: Event) => {
-    sliderFrameHook.load!(<... />);
-    or
-    sliderFrameHook.close!(event);
-  };
-  return (
-    <div onClick={onClick}>
-      <SliderFrame hook={sliderFrameHook} />
-      ...
-    </div>
-  );
-*/
-import { VNode, CssProps, HtmlVar, RefProps, stopPropagation, MediaQueryRange } from 'lupine.components';
-
-export type SliderFramePosition = 'desktop-slide-left' | 'desktop-slide-right';
-export type SliderFrameHookProps = {
-  load?: (children: VNode<any>) => void;
-  close?: (event: Event) => void;
-  addClass?: (className: SliderFramePosition) => void;
-};
-
-export type SliderFrameProps = {
-  defaultContent?: VNode<any> | string;
-  direction?: 'right' | 'bottom';
-  hook?: SliderFrameHookProps;
-  afterClose?: () => void | Promise<void>;
-};
-export const SliderFrame = (props: SliderFrameProps) => {
-  if (props.hook) {
-    props.hook.load = (children) => {
-      dom.value = children;
-      ref.current?.classList.remove('d-none');
-      setTimeout(() => {
-        ref.current?.classList.add('show');
-      }, 1);
-    };
-    props.hook.close = (event: Event) => {
-      stopPropagation(event);
-      ref.current?.classList.remove('show');
-      setTimeout(async () => {
-        ref.current?.classList.add('d-none');
-        dom.value = '';
-        if (props.afterClose) {
-          await props.afterClose();
-        }
-      }, 400);
-    };
-    props.hook.addClass = (className) => {
-      ref.current?.classList.add(className);
-    };
-  }
-  const dom = new HtmlVar(<div class='slider-frame-default'>{props.defaultContent || '(No Content)'}</div>);
-  const ref: RefProps = {};
-  const css: CssProps = {
-    display: 'flex',
-    flexDirection: 'column',
-    position: 'fixed',
-    top: '0',
-    left: '0',
-    right: '0',
-    bottom: '0',
-    zIndex: 'var(--layer-slider)',
-    transform: props.direction === 'bottom' ? 'translateY(100%)' : 'translateX(100%)',
-    transition: 'transform 0.4s ease-in-out',
-    backgroundColor: 'var(--primary-bg-color)',
-    '&.show': {
-      transform: props.direction === 'bottom' ? 'translateY(0)' : 'translateX(0)',
-    },
-    '& > fragment': {
-      height: '100%',
-    },
-    '&.desktop-slide-left': {
-      [MediaQueryRange.TabletAbove]: {
-        '.header-back-content': {
-          width: '30%',
-        },
-      },
-    },
-    '&.desktop-slide-right': {
-      [MediaQueryRange.TabletAbove]: {
-        top: '59px',
-        left: '30%',
-        transform: 'translateX(0)',
-        // notice: here is connected with mobile-header-title-icon.tsx
-        '.mobile-header-title-icon-top': {
-          width: '100%',
-          boxShadow: 'unset',
-        },
-        '.header-back-content': {
-          width: '100%',
-        },
-        '.mhti-title': {
-          fontSize: '15px',
-        },
-        '.mhti-left, .mhti-right': {
-          display: 'none',
-        },
-        '&.d-none': {
-          display: 'unset !important',
-        },
-      },
-    },
-  };
-  return (
-    <div ref={ref} css={css} class='slider-frame d-none'>
-      {dom.node}
-    </div>
-  );
-};
+/* frame component to show pages (sliders) from right or bottom
+  const sliderFrameHook: SliderFrameHookProps = {};
+  const onClick = (event: Event) => {
+    sliderFrameHook.load!(<... />);
+    or
+    sliderFrameHook.close!(event);
+  };
+  return (
+    <div onClick={onClick}>
+      <SliderFrame hook={sliderFrameHook} />
+      ...
+    </div>
+  );
+*/
+import { VNode, CssProps, HtmlVar, RefProps, stopPropagation, MediaQueryRange } from 'lupine.components';
+
+export type SliderFramePosition = 'desktop-slide-left' | 'desktop-slide-right';
+export type SliderFrameHookProps = {
+  load?: (children: VNode<any>) => void;
+  close?: (event: Event) => void;
+  addClass?: (className: SliderFramePosition) => void;
+};
+
+export type SliderFrameProps = {
+  defaultContent?: VNode<any> | string;
+  direction?: 'right' | 'bottom';
+  hook?: SliderFrameHookProps;
+  afterClose?: () => void | Promise<void>;
+};
+export const SliderFrame = (props: SliderFrameProps) => {
+  if (props.hook) {
+    props.hook.load = (children) => {
+      dom.value = children;
+      ref.current?.classList.remove('d-none');
+      setTimeout(() => {
+        ref.current?.classList.add('show');
+      }, 100);
+    };
+    props.hook.close = (event: Event) => {
+      stopPropagation(event);
+      ref.current?.classList.remove('show');
+      setTimeout(async () => {
+        ref.current?.classList.add('d-none');
+        dom.value = '';
+        if (props.afterClose) {
+          await props.afterClose();
+        }
+      }, 400);
+    };
+    props.hook.addClass = (className) => {
+      ref.current?.classList.add(className);
+    };
+  }
+  const dom = new HtmlVar(<div class='slider-frame-default'>{props.defaultContent || '(No Content)'}</div>);
+  const ref: RefProps = {};
+  const css: CssProps = {
+    display: 'flex',
+    flexDirection: 'column',
+    position: 'fixed',
+    top: '0',
+    left: '0',
+    right: '0',
+    bottom: '0',
+    zIndex: 'var(--layer-slider)',
+    transform: props.direction === 'bottom' ? 'translateY(100%)' : 'translateX(100%)',
+    transition: 'transform 0.4s ease-in-out',
+    backgroundColor: 'var(--primary-bg-color)',
+    '&.show': {
+      transform: props.direction === 'bottom' ? 'translateY(0)' : 'translateX(0)',
+    },
+    '& > fragment': {
+      height: '100%',
+    },
+    '&.desktop-slide-left': {
+      [MediaQueryRange.TabletAbove]: {
+        '.header-back-content': {
+          width: '30%',
+        },
+      },
+    },
+    '&.desktop-slide-right': {
+      [MediaQueryRange.TabletAbove]: {
+        top: '59px',
+        left: '30%',
+        transform: 'translateX(0)',
+        // notice: here is connected with mobile-header-title-icon.tsx
+        '.mobile-header-title-icon-top': {
+          width: '100%',
+          boxShadow: 'unset',
+        },
+        '.header-back-content': {
+          width: '100%',
+        },
+        '.mhti-title': {
+          fontSize: '15px',
+        },
+        '.mhti-left, .mhti-right': {
+          display: 'none',
+        },
+        '&.d-none': {
+          display: 'unset !important',
+        },
+      },
+    },
+  };
+  return (
+    <div ref={ref} css={css} class='slider-frame d-none'>
+      {dom.node}
+    </div>
+  );
+};

package/src/frames/top-frame.tsx

@@ -1,30 +1,30 @@
-/* most top-frame for all other pages
-place to set safe-area-inset-top and other common styles
-*/
-import { VNode, CssProps } from 'lupine.components';
-
-export const TopFrame = async (placeholderClassname: string, vnode: VNode<any>) => {
-  const cssContainer: CssProps = {
-    display: 'flex',
-    flexDirection: 'column',
-    width: '100%',
-    height: '100%',
-    position: 'relative',
-    '.top-frame-box': {
-      display: 'flex',
-      flex: '1',
-      flexDirection: 'column',
-      height: '100%',
-      // trick: to put two padding-top properties
-      'padding-top ': 'constant(safe-area-inset-top)',
-      'padding-top': 'env(safe-area-inset-top)',
-    },
-  };
-
-  return (
-    <div css={cssContainer}>
-      {/* Can't put css on this placeholder node! */}
-      <div class={'top-frame-box ' + placeholderClassname}>{vnode}</div>
-    </div>
-  );
-};
+/* most top-frame for all other pages
+place to set safe-area-inset-top and other common styles
+*/
+import { VNode, CssProps } from 'lupine.components';
+
+export const TopFrame = async (placeholderClassname: string, vnode: VNode<any>) => {
+  const cssContainer: CssProps = {
+    display: 'flex',
+    flexDirection: 'column',
+    width: '100%',
+    height: '100%',
+    position: 'relative',
+    '.top-frame-box': {
+      display: 'flex',
+      flex: '1',
+      flexDirection: 'column',
+      height: '100%',
+      // trick: to put two padding-top properties
+      'padding-top ': 'constant(safe-area-inset-top)',
+      'padding-top': 'env(safe-area-inset-top)',
+    },
+  };
+
+  return (
+    <div css={cssContainer}>
+      {/* Can't put css on this placeholder node! */}
+      <div class={'top-frame-box ' + placeholderClassname}>{vnode}</div>
+    </div>
+  );
+};

package/src/index.ts

@@ -1,5 +1,5 @@
-export * from 'lupine.web';
-export * from './lib';
-export * from './styles';
-export * from './components';
-export * from './frames';
+export * from 'lupine.web';
+export * from './lib';
+export * from './styles';
+export * from './components';
+export * from './frames';

package/src/lib/back-action-helper.ts

@@ -1,54 +1,54 @@
-import { uniqueIdGenerator } from 'lupine.web';
-
-type BackFn = () => void | Promise<void>;
-
-export const backActionUniqueId = uniqueIdGenerator('bb-'); // bb means back button
-class BackActionHelper {
-  private backFn?: BackFn;
-
-  genBackActionId() {
-    return backActionUniqueId();
-  }
-
-  getAllBackActionButtons() {
-    const nodes = document.querySelectorAll('[data-back-action^="bb-"]');
-    const buttons = Array.from(nodes)
-      .map((el) => {
-        const act = el.getAttribute('data-back-action') || '';
-        return { el, ind: act.substring(3) };
-      })
-      .filter(Boolean)
-      .sort((a, b) => b.ind.localeCompare(a.ind)) // desc
-      .map((item) => item.el);
-    return buttons;
-  }
-
-  clear() {
-    this.backFn = undefined;
-  }
-  attach(back: BackFn) {
-    this.backFn = back;
-  }
-  async processBackAction(): Promise<boolean> {
-    if (this.backFn) {
-      try {
-        await this.backFn();
-        this.clear();
-        return true;
-      } catch (e) {
-        console.error('back button back failed', e);
-      }
-      return false;
-    }
-
-    const buttons = this.getAllBackActionButtons();
-    if (buttons.length) {
-      const button = buttons[0];
-      button.dispatchEvent(new Event('click'));
-      return true;
-    }
-    return false;
-  }
-}
-
-export const backActionHelper = /* @__PURE__ */ new BackActionHelper();
+import { uniqueIdGenerator } from 'lupine.web';
+
+type BackFn = () => void | Promise<void>;
+
+export const backActionUniqueId = uniqueIdGenerator('bb-'); // bb means back button
+class BackActionHelper {
+  private backFn?: BackFn;
+
+  genBackActionId() {
+    return backActionUniqueId();
+  }
+
+  getAllBackActionButtons() {
+    const nodes = document.querySelectorAll('[data-back-action^="bb-"]');
+    const buttons = Array.from(nodes)
+      .map((el) => {
+        const act = el.getAttribute('data-back-action') || '';
+        return { el, ind: act.substring(3) };
+      })
+      .filter(Boolean)
+      .sort((a, b) => b.ind.localeCompare(a.ind)) // desc
+      .map((item) => item.el);
+    return buttons;
+  }
+
+  clear() {
+    this.backFn = undefined;
+  }
+  attach(back: BackFn) {
+    this.backFn = back;
+  }
+  async processBackAction(): Promise<boolean> {
+    if (this.backFn) {
+      try {
+        await this.backFn();
+        this.clear();
+        return true;
+      } catch (e) {
+        console.error('back button back failed', e);
+      }
+      return false;
+    }
+
+    const buttons = this.getAllBackActionButtons();
+    if (buttons.length) {
+      const button = buttons[0];
+      button.dispatchEvent(new Event('click'));
+      return true;
+    }
+    return false;
+  }
+}
+
+export const backActionHelper = /* @__PURE__ */ new BackActionHelper();

package/src/lib/base62.ts

@@ -1,23 +1,23 @@
-export class Base62 {
-  private static ALPHABET = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
-  private static BASE = 62;
-  static toString(num: number) {
-    if (num === 0) return Base62.ALPHABET[0];
-
-    let result = '';
-    while (num > 0) {
-      const rem = num % Base62.BASE;
-      result = Base62.ALPHABET[rem] + result;
-      num = Math.floor(num / Base62.BASE);
-    }
-    return result;
-  }
-
-  static fromString(str: string) {
-    let result = 0;
-    for (let i = 0; i < str.length; i++) {
-      result = result * Base62.BASE + Base62.ALPHABET.indexOf(str[i]);
-    }
-    return result;
-  }
-}
+export class Base62 {
+  private static ALPHABET = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
+  private static BASE = 62;
+  static toString(num: number) {
+    if (num === 0) return Base62.ALPHABET[0];
+
+    let result = '';
+    while (num > 0) {
+      const rem = num % Base62.BASE;
+      result = Base62.ALPHABET[rem] + result;
+      num = Math.floor(num / Base62.BASE);
+    }
+    return result;
+  }
+
+  static fromString(str: string) {
+    let result = 0;
+    for (let i = 0; i < str.length; i++) {
+      result = result * Base62.BASE + Base62.ALPHABET.indexOf(str[i]);
+    }
+    return result;
+  }
+}

package/src/lib/blob-utils.ts

@@ -1,23 +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);
-};
+export const blobToBase64 = (blob: Blob, removeMeta?: boolean): Promise<string> => {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onloadend = () => resolve(removeMeta ? (reader.result as string).split(',')[1] : (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/calculate-text-width.ts

@@ -1,13 +1,13 @@
-/**
- * @param text
- * @param font, sample: italic/normal 19pt Times New Roman
- * @returns width
- */
-const calculateTextWidthSaved: { canvas: any } = { canvas: null };
-export function calculateTextWidth(text: string, font: string) {
-  let canvas = calculateTextWidthSaved.canvas || (calculateTextWidthSaved.canvas = document.createElement('canvas'));
-  let context = canvas.getContext('2d');
-  context.font = font;
-  let metrics = context.measureText(text);
-  return metrics.width;
-}
+/**
+ * @param text
+ * @param font, sample: italic/normal 19pt Times New Roman
+ * @returns width
+ */
+const calculateTextWidthSaved: { canvas: any } = { canvas: null };
+export function calculateTextWidth(text: string, font: string) {
+  let canvas = calculateTextWidthSaved.canvas || (calculateTextWidthSaved.canvas = document.createElement('canvas'));
+  let context = canvas.getContext('2d');
+  context.font = font;
+  let metrics = context.measureText(text);
+  return metrics.width;
+}