lupine.components 1.1.38 → 1.1.40

package/package.json

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

package/src/component-pool/i-editor/i-editor-demo.tsx

@@ -2,7 +2,7 @@ import { CssProps, RefProps } from 'lupine.web';
 import { DemoStory } from '../../demo/demo-types';
 import { IEditor } from './i-editor';
 
-export const IEditorDemoPage = () => {
+export const IEditorDemoPage = (props: { css?: CssProps }) => {
   let editor: IEditor | undefined;
 
   const ref: RefProps = {
@@ -42,6 +42,7 @@ export const IEditorDemoPage = () => {
       width: '100%',
       height: '100%',
     },
+    ...props.css,
   };
 
   return (

package/src/component-pool/index.ts

@@ -25,3 +25,6 @@ export * from './timeline';
 export * from './tooltip';
 export * from './tour';
 export * from './youtube-player';
+
+export * from './svg-icons';
+export * from './svg-props';

package/src/components/float-window.tsx

@@ -146,6 +146,8 @@ export class FloatWindow {
           padding: '15px',
           maxHeight: contentMaxHeight ? `min(${contentMaxHeight}, calc(100% - 100px))` : 'calc(100% - 100px)',
           overflowY: contentOverflowY,
+          boxSizing: 'border-box',
+          width: '100%',
         },
         '.fwin-bottom': {
           display: 'flex',

package/src/components/html-var.tsx

@@ -1,9 +1,9 @@
 import { RefProps, VNode } from 'lupine.web';
 
-export type HtmlVarValueProps = string | VNode<any> | (() => Promise<VNode<any>>);
+export type HtmlVarValueProps = string | null | undefined | VNode<any> | (() => Promise<VNode<any>>);
 export type HtmlVarResult = { value: HtmlVarValueProps; ref: RefProps; node: VNode<any> };
 export class HtmlVar implements HtmlVarResult {
-  private _value: HtmlVarValueProps;
+  private _value: string | VNode<any> | (() => Promise<VNode<any>>);
   private _dirty = false;
   private _ref: RefProps;
   private resolve!: () => void;
@@ -54,7 +54,7 @@ export class HtmlVar implements HtmlVarResult {
   }
 
   set value(value: HtmlVarValueProps) {
-    this._value = value;
+    this._value = value || '';
     if (this._dirty) {
       return;
     }

package/src/frames/responsive-frame.tsx

@@ -22,6 +22,7 @@ export interface ResponsiveFrameProps {
   maxWidth?: string;
   autoExtendSidemenu?: boolean;
   onLoad?: () => Promise<void>;
+  noSafeAreaTop?: boolean;
 }
 export const ResponsiveFrame = (props: ResponsiveFrameProps) => {
   const cssContainer: CssProps = {
@@ -35,8 +36,10 @@ export const ResponsiveFrame = (props: ResponsiveFrameProps) => {
     borderLeft: props.maxWidth ? '1px solid var(--primary-border-color)' : 'none',
     margin: '0 auto',
     overflowX: 'hidden',
-    'padding-top ': 'constant(safe-area-inset-top)',
-    'padding-top': 'env(safe-area-inset-top)',
+    ...(!props.noSafeAreaTop ? {
+      'padding-top ': 'constant(safe-area-inset-top)',
+      'padding-top': 'env(safe-area-inset-top)',
+    } : {}),
     '.frame-top-menu': {
       display: 'flex',
       flexDirection: 'column',

package/src/frames/top-frame.tsx

@@ -3,7 +3,16 @@ 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>) => {
+// TopFrame and ResponsiveFrame both contain safe-area-inset-top, so can't use them togother
+export const TopFrame = async ({
+  placeholderClassname,
+  vnode,
+  noSafeAreaTop,
+}: {
+  placeholderClassname: string;
+  vnode: VNode<any>;
+  noSafeAreaTop?: boolean;
+}) => {
   const cssContainer: CssProps = {
     display: 'flex',
     flexDirection: 'column',
@@ -16,8 +25,12 @@ export const TopFrame = async (placeholderClassname: string, vnode: VNode<any>)
       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)',
+      ...(!noSafeAreaTop
+        ? {
+            'padding-top ': 'constant(safe-area-inset-top)',
+            'padding-top': 'env(safe-area-inset-top)',
+          }
+        : {}),
     },
   };
 

package/src/lib/encode-html.ts

@@ -6,8 +6,9 @@ const htmlEscapes: Record<string, string> = {
   '"': '&quot;',
 };
 
-export const encodeHtml = (str: string): string => {
-  return str.replace(/[&<>'"]/g, (tag) => htmlEscapes[tag]);
+export const encodeHtml = (str: any): string => {
+  if (str === null || str === undefined) return '';
+  return String(str).replace(/[&<>'"]/g, (tag) => htmlEscapes[tag]);
 };
 
 const htmlUnescapes: Record<string, string> = {
@@ -19,5 +20,6 @@ const htmlUnescapes: Record<string, string> = {
 };
 
 export const decodeHtml = (str: string): string => {
-  return str.replace(/&(?:amp|lt|gt|quot|#39);/g, (tag) => htmlUnescapes[tag]);
+  if (str === null || str === undefined) return '';
+  return String(str).replace(/&(?:amp|lt|gt|quot|#39);/g, (tag) => htmlUnescapes[tag]);
 };