lupine.api 1.0.43 → 1.1.44

package/admin/admin-frame.tsx

@@ -358,6 +358,7 @@ export const AdminFrame = (props: AdminFrameProps) => {
       width: '165px',
       // padding: '8px 16px',
       borderRight: 'var(--primary-border)',
+      overflowX: 'hidden',
       overflowY: 'auto',
       color: 'var(--sidebar-color)',
       backgroundColor: 'var(--sidebar-bg-color)',
@@ -399,7 +400,7 @@ export const AdminFrame = (props: AdminFrameProps) => {
     window.location.href = '/admin';
   };
 
-  bindGlobalStyles('admin-frame', '.admin-frame-box', css);
+  bindGlobalStyles('admin-frame-box', css);
 
   const refCloseMenu: RefProps = {};
   const adminTopMenu = adminFrameHelper.getAdminTopMenu();
@@ -456,10 +457,9 @@ export const AdminPanel = (props: AdminPanelProps) => {
   const css: CssProps = {
     height: '100%',
   };
-  bindGlobalStyles('admin-panel', '.admin-panel-box', css);
   const pages: TabsPageProps[] = [];
   return (
-    <div class='admin-panel-box'>
+    <div css={css}>
       <Tabs pages={pages} hook={props.refUpdate} pagePadding='8px'></Tabs>
     </div>
   );

package/admin/admin-table-data.tsx

@@ -124,7 +124,7 @@ export const AdminTableData = (props: { tableName: string; update?: TableDataUpd
   if (props.update) {
     props.update.refreshRef = refresh;
   }
-  bindGlobalStyles('admin-table-data', '.admin-table-data', css);
+  bindGlobalStyles('admin-table-data', css);
   const dom = new HtmlVar('');
   return (
     <div className='admin-table-data' ref={ref}>

package/admin/admin-test-animations.tsx

@@ -4,8 +4,6 @@ import {
   ButtonPushAnimation,
   ButtonPushAnimationSize,
   HtmlVar,
-  PlayButton,
-  PlayButtonSize,
   Progress,
   ProgressHookProps,
   Spinner01,
@@ -15,6 +13,10 @@ import {
   TextGlow,
   TextWave,
   CssProps,
+  ToggleButton,
+  TogglePlayButton,
+  TogglePlayButtonSize,
+  TextScale,
 } from 'lupine.components';
 
 const TestButton = () => {
@@ -125,7 +127,9 @@ const TestHtmlVar = () => {
       <>
         <div class='row-box pt-m'>
           <label class='pr-m'>Count: {count}</label>
-          <button class='button-base' onClick={onClick}>Click me</button>
+          <button class='button-base' onClick={onClick}>
+            Click me
+          </button>
         </div>
       </>
     );
@@ -160,7 +164,9 @@ const TestMountInnerComponent = () => {
       <>
         <div class='row-box pt-m'>
           <label class='pr-m'>Count: {count}</label>
-          <button class='button-base' onClick={onClick}>Click me</button>
+          <button class='button-base' onClick={onClick}>
+            Click me
+          </button>
         </div>
       </>
     );
@@ -210,7 +216,7 @@ const TestStyles = () => {
   let ref: RefProps = { id: '' };
   const onClick = () => {
     css.color = css.color === 'blue' ? 'green' : 'blue';
-    updateStyles(`[${ref.id}]`, css);
+    updateStyles(`${ref.id}`, css);
     console.log(`update styles`, css.color, css);
   };
   return (
@@ -328,10 +334,20 @@ export const AdminTestAnimationsPage = () => {
       </div>
 
       <div class='pt-m'>
-        PlayButton
-        <PlayButton size={PlayButtonSize.Small} />
-        <PlayButton size={PlayButtonSize.Medium} />
-        <PlayButton size={PlayButtonSize.Large} />
+        TextScale
+        <TextScale text='This is a sample of Text Scale' />
+      </div>
+
+      <div class='pt-m'>
+        TogglePlayButton
+        <TogglePlayButton size={TogglePlayButtonSize.Small} />
+        <TogglePlayButton size={TogglePlayButtonSize.Medium} />
+        <TogglePlayButton size={TogglePlayButtonSize.Large} />
+      </div>
+
+      <div class='pt-m'>
+        ToggleButton
+        <ToggleButton onText='On' offText='Off' />
       </div>
 
       <div class='p2'>

package/admin/design/design-block-box.tsx

@@ -51,7 +51,7 @@ export const DesignBlockBox = (props: BlockBoxProps) => {
       height: '100%',
     },
   };
-  bindGlobalStyles('design-block-box', '.design-block-box', css);
+  bindGlobalStyles('design-block-box', css);
 
   const findMsgSender = (ev: any) => {
     const msgSender = (window as any)._lj_design;

package/dev/plugin-ifelse.js

@@ -1,3 +1,16 @@
+/*
+Esbuild plugin for conditional code logic
+
+A sample:
+#if TEST || DEBUG
+console.log('test');
+#elseif PROD
+console.log('prod');
+#else
+console.log('not test');
+#endif
+
+*/
 const fs = require('fs/promises');
 const path = require('path');
 
@@ -21,7 +34,7 @@ const endifRegExp = /^\/\/\s*#endif$/;
 const ifdefRegExpMultiLine = new RegExp(`^${ifRegExp.source}`, 'gm');
 
 // if a variable is not defined, exception will be thrown
-// if a variable is '', 0, false, undefined, null, NaN, or any other value, it will be considered as false
+// if a variable is '', 0, false, undefined, null, NaN, it will be considered as false
 /*
 var vars = {
     TEST1: '', // false

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lupine.api",
-  "version": "1.0.43",
+  "version": "1.1.44",
   "license": "MIT",
   "author": "uuware.com",
   "homepage": "https://github.com/uuware/lupine.js",