lupine.components 1.1.37 → 1.1.39

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lupine.components",
-  "version": "1.1.37",
+  "version": "1.1.39",
   "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/components/toggle-switch.tsx

@@ -274,6 +274,16 @@ export const ToggleSwitch = (props: ToggleSwitchProps) => {
   // bindGlobalStyle('toggle-switch-theme', cssTheme, false, true);
   bindGlobalStyle('toggle-switch-component', css);
 
+  const cssTheme: CssProps = {
+    '[data-theme="light" i]': {
+      '--toggle-background-color': '#e6e6e6',
+    },
+    '[data-theme="dark" i]': {
+      '--toggle-background-color': '#232323',
+    },
+  };
+  bindGlobalStyle('toggle-switch-theme', cssTheme, false, true);
+
   const cssSize: CssProps = {
     '& .ts-on-text, & .ts-off-text': {
       display: 'none',

package/src/demo/demo-about.tsx

@@ -1,6 +1,6 @@
-import { CssProps } from 'lupine.components';
+import { CssProps, PageProps } from 'lupine.components';
 
-export const DemoAboutPage = () => {
+export const DemoAboutPage = async (props: PageProps) => {
   const css: CssProps = {};
 
   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/tsconfig.json

@@ -31,15 +31,15 @@
 
     /* Modules */
     // "module": "commonjs", amd, es2015 /* Specify what module code is generated. */,
-    "module": "amd" /* Specify what module code is generated. */,
+    "module": "esnext" /* Specify what module code is generated. */,
     // "rootDir": "./" /* Specify the root folder within your source files. */,
-    "moduleResolution": "node" /* Specify how TypeScript looks up a file from a given module specifier. */,
+    "moduleResolution": "bundler" /* Specify how TypeScript looks up a file from a given module specifier. */,
     // "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
     // "paths": {},                                      /* Specify a set of entries that re-map imports to additional lookup locations. */
     // "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */
     // "typeRoots": [],                                  /* Specify multiple folders that act like './node_modules/@types'. */
     // "types": [],                                      /* Specify type package names to be included without being referenced in a source file. */
-    "types": ["node", "lupine.web"],
+    "types": ["node"],
     // "allowUmdGlobalAccess": true,                     /* Allow accessing UMD globals from modules. */
     // "moduleSuffixes": [],                             /* List of file name suffixes to search when resolving a module. */
     // "resolveJsonModule": true /* Enable importing .json files. */,
@@ -56,7 +56,7 @@
     // "emitDeclarationOnly": true,                      /* Only output d.ts files and not JavaScript files. */
     "sourceMap": true /* Create source map files for emitted JavaScript files. */,
     // "outFile": "./",                                  /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */
-    "outFile": "./dist/build.js",
+    // "outFile": "./dist/build.js",
     "outDir": "./dist" /* Specify an output folder for all emitted files. */,
     // "removeComments": true,                           /* Disable emitting comments. */
     // "noEmit": true,                                   /* Disable emitting files from a compilation. */