lupine.components 1.1.11 → 1.1.13

package/package.json

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

package/src/components/action-sheet.tsx

@@ -100,7 +100,7 @@ export class ActionSheet {
           borderRadius: '8px',
           backgroundColor: 'var(--cover-bg-color)', //'#fefefe',
           width: '100%',
-          maxWidth: contentMaxWidth ? contentMaxWidth : `clamp(200px, 70%, 800px)`,
+          maxWidth: contentMaxWidth ? contentMaxWidth : `clamp(200px, 90%, 600px)`,
           margin: '0 auto',
         },
         '.act-sheet-bottom-item, .act-sheet-item': {
@@ -109,7 +109,7 @@ export class ActionSheet {
           cursor: 'pointer',
           transition: 'all 0.3s ease',
           width: '100%',
-          maxWidth: contentMaxWidth ? contentMaxWidth : `clamp(200px, 70%, 800px)`,
+          maxWidth: contentMaxWidth ? contentMaxWidth : `clamp(200px, 90%, 600px)`,
           borderTop: '1px solid var(--primary-border-color)',
         },
         '.act-sheet-bottom-item': {

package/src/components/mobile-components/mobile-header-title-icon.tsx

@@ -28,9 +28,12 @@ export interface MobileHeaderTitleIconProps {
   onBack?: (event: Event) => void;
   left?: VNode<any> | HtmlVar;
   right?: VNode<any> | HtmlVar;
+  background?: string;
+  color?: string;
+  noShadow?: boolean;
 }
 // there may have a few MobileHeaderTitleIcon for different pages
-export const MobileHeaderTitleIcon = ({ title, onBack, left, right }: MobileHeaderTitleIconProps) => {
+export const MobileHeaderTitleIcon = ({ title, onBack, left, right, background, color, noShadow }: MobileHeaderTitleIconProps) => {
   // const processBack = (event: Event) => {
   //   if (onBack) {
   //     onBack(event);
@@ -43,8 +46,11 @@ export const MobileHeaderTitleIcon = ({ title, onBack, left, right }: MobileHead
     flexDirection: 'row',
     width: '100vw',
     padding: '6px 0',
-    backgroundColor: 'var(--activatable-bg-color-normal)',
-    boxShadow: 'var(--mobile-header-shadow)',
+    // backgroundColor: 'var(--activatable-bg-color-normal)',
+    // boxShadow: 'var(--mobile-header-shadow)',
+    color: color || 'var(--primary-color)',
+    background: background || 'var(--activatable-bg-color-normal)',
+    boxShadow: noShadow ? 'unset' : 'var(--mobile-header-shadow)',
     zIndex: 'var(--layer-inside)', // bring boxShadow to front
     '.mhti-title': {
       display: 'flex',

package/src/components/mobile-components/mobile-header-with-back.tsx

@@ -32,6 +32,11 @@ export const HeaderWithBackFrame = ({
   left,
   right,
   noHeader = false,
+  background,
+  color,
+  noShadow,
+  contentColor,
+  contentBackground,
 }: {
   children: VNode<any>;
   title: VNode<any> | string | HtmlVar;
@@ -39,6 +44,11 @@ export const HeaderWithBackFrame = ({
   left?: VNode<any> | HtmlVar;
   right?: VNode<any> | HtmlVar;
   noHeader?: boolean;
+  color?: string;
+  background?: string;
+  noShadow?: boolean;
+  contentColor?: string;
+  contentBackground?: string;
 }) => {
   left = left || <HeaderWithBackFrameLeft onClick={onBack} />;
   right = right || <HeaderWithBackFrameRight onClick={onBack} />;
@@ -48,6 +58,7 @@ export const HeaderWithBackFrame = ({
     width: '100%',
     height: '100%',
     minHeight: '100%',
+    background: background || 'var(--activatable-bg-color-normal)',
     '.header-back-top': {
       display: 'flex',
       flexDirection: 'row',
@@ -63,6 +74,8 @@ export const HeaderWithBackFrame = ({
       overflowY: 'auto',
       scrollbarWidth: 'none',
       position: 'relative',
+      color: contentColor || 'var(--primary-color)',
+      background: contentBackground || 'var(--activatable-bg-color-normal)',
       '&::-webkit-scrollbar': {
         display: 'none',
         // height: '0',
@@ -97,7 +110,7 @@ export const HeaderWithBackFrame = ({
   const ref: RefProps = {};
   return (
     <div ref={ref} css={css} class='header-back-frame'>
-      {!noHeader && <MobileHeaderTitleIcon onBack={onBack} left={domLeft} title={domCenter} right={domRight} />}
+      {!noHeader && <MobileHeaderTitleIcon onBack={onBack} left={domLeft} title={domCenter} right={domRight} background={background} color={color} noShadow={noShadow} />}
       <div class='header-back-content'>{children}</div>
     </div>
   );

package/src/lib/blob-utils.ts

@@ -1,7 +1,7 @@
-export const blobToBase64 = (blob: Blob): Promise<string> => {
+export const blobToBase64 = (blob: Blob, removeMeta?: boolean): Promise<string> => {
   return new Promise((resolve, reject) => {
     const reader = new FileReader();
-    reader.onloadend = () => resolve(reader.result as string); // data:audio/mpeg;base64,...
+    reader.onloadend = () => resolve(removeMeta ? (reader.result as string).split(',')[1] : reader.result as string); // data:audio/mpeg;base64,...
     reader.onerror = reject;
     reader.readAsDataURL(blob);
   });

package/src/lib/encode-html.ts

@@ -0,0 +1,27 @@
+export const encodeHtml = (str: string): string => {
+  return str.replace(
+    /[&<>'"]/g,
+    (tag) =>
+      ({
+        '&': '&amp;',
+        '<': '&lt;',
+        '>': '&gt;',
+        "'": '&#39;',
+        '"': '&quot;',
+      }[tag] || '')
+  );
+};
+
+export const decodeHtml = (str: string): string => {
+  return str.replace(
+    /&(\D+);/gi,
+    (tag) =>
+      ({
+        '&amp;': '&',
+        '&lt;': '<',
+        '&gt;': '>',
+        '&#39;': "'",
+        '&quot;': '"',
+      }[tag] || '')
+  );
+};

package/src/lib/index.ts

@@ -11,7 +11,7 @@ export * from './download-link';
 export * from './download-stream';
 export * from './drag-util';
 export * from './dynamical-load';
-export * from './escape-html';
+export * from './encode-html';
 export * from './find-parent-tag';
 export * from './format-bytes';
 export * from './lite-dom';

package/src/lib/escape-html.ts

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