amotify 0.2.125 → 0.2.127

package/demo/esbuild/app.tsx

@@ -6,22 +6,17 @@ import $$ from 'jmini'
 
 import {
   Config,
-  ReactElement,
   Row,
+  Card,
   useRouterEffect,
   LaunchReactApp,
-  RootViewController,
-  FAI,
-  Column,
   Input,
   Box,
-  Span,
+  Anchor,
   pageRouter,
-  Img,
-  Text,
-  Sheet,
   Button,
-  Tooltips
+  Plate,
+  Column,
 } from 'amotify'
 
 import '../../dist/@styles/style.css'
@@ -32,70 +27,62 @@ import {
 
 let Test = () => {
   return <Box>
+    <Plate padding={ 4 }>
+      <Column>
+        <Card>
+          Hello World
+        </Card>
+        <Card.Border>
+          Hello World
+        </Card.Border>
+        <Card.Cloud>
+          Hello World
+        </Card.Cloud>
+        <Card.Plain>
+          Hello World
+        </Card.Plain>
+        <Card.Shadow>
+          Hello World
+        </Card.Shadow>
+      </Column>
+    </Plate>
     {/* <DesignBook
     /> */}
-    <Row.Center
-      flexCenter
-      padding={ 3 }
-      gap={ 3 }
-      backgroundColor='layer.0'
+
+    {/* <Row.Center
+      padding={ 2 }
     >
-      <Input.Select
-        options={ [
-          { value: 'AAA',label: 'AAA' },
-          { value: 'BBB',label: 'BBB' },
-          { value: 'CCC',label: 'CCC' },
-        ] }
-      />
-      <Input.Select
-        SelectorMode='legacy'
-        options={ [
-          { value: 'AAA',label: 'AAA' },
-          { value: 'BBB',label: 'BBB' },
-          { value: 'CCC',label: 'CCC' },
-        ] }
-        name='test'
-        form='test'
-        required
-        onUpdateValidValue={ value => {
-          console.log( value )
-        } }
-        onUpdateValue={ value => {
-          console.log( value )
-        } }
-      />
-      <Button.Prime
-        submitOption={ {
-          formName: 'test',
-          callback: form => {
-            console.log( form )
-          }
-        } }
+      <a href='#section1'>
+        #Section1
+      </a>
+      <a href='#section2'>
+        #Section2
+      </a>
+      <Anchor.Prime
+        href='#section1'
       >
-        Submit
-      </Button.Prime>
-
-      {/* <Box
-        ssSquare={ 12 }
-        backgroundColor='layer.0'
-      />
-      <Box
-        ssSquare={ 12 }
-        backgroundColor='layer.1'
-      />
-      <Box
-        ssSquare={ 12 }
-        backgroundColor='layer.2'
-      />
-      <Box
-        ssSquare={ 12 }
-        backgroundColor='layer.3'
-      />
-      <Box
-        ssSquare={ 12 }
-        backgroundColor='cloud'
-      /> */}
+        #Section1
+      </Anchor.Prime>
+      <Anchor.Prime
+        href='#section2'
+      >
+        #Section2
+      </Anchor.Prime>
     </Row.Center>
+    <Box
+      id='section1'
+      backgroundColor='posi'
+      height={ 'viewHeight' }
+    >
+      #section1
+    </Box>
+    <Box
+      id='section2'
+      backgroundColor='nega'
+      height={ 'viewHeight' }
+    >
+      #section2
+    </Box> */}
   </Box>
 }
 
@@ -106,11 +93,11 @@ $$.scope( () => {
 
   Config.launch( {
     appRoot: root,
-    roundness: 3,
+    roundness: 4,
 
     themeColor: $$.localStrage.get( 'prf.themeColor' ) || 'battery',
-    // darkMode: $$.getLocalStrageData( 'prf.darkMode' ) || 'dark'
-    // darkMode: 'dark'
+    // darkMode: $$.getLocalStrageData( 'prf.darkMode' ) || 'dark',
+    // darkMode: 'dark',
     // darkMode: 'dim'
   } )
 
@@ -118,7 +105,13 @@ $$.scope( () => {
     let useLocation = ReactRouterDOM.useLocation()
     let useNavigate = ReactRouterDOM.useNavigate()
     useEffect( () => {
-      pageRouter.setPushEffect( ( url ) => {
+      pageRouter.setPushEffect( url => {
+        if ( url.match( /^#/ ) ) {
+          console.log( url )
+          console.log( window.location.pathname )
+          // useNavigate( url )
+          return
+        }
         useNavigate( url )
       } )
       pageRouter.setBackEffect( () => {

package/demo/esbuild/designBook.tsx

@@ -1141,17 +1141,14 @@ const Buttons = {
                 <Button.Prime>
                   Button.Prime
                 </Button.Prime>
-                Button.Button.Prime
               </>,<>
                 <Button.Sub>
                   Button.Sub
                 </Button.Sub>
-                Button.Button.Sub
               </>,<>
                 <Button.Border>
                   Button.Border
                 </Button.Border>
-                Button.Button.Border
               </>
             ] }
           />
@@ -1264,7 +1261,7 @@ const Shadows = {
     let Cell = ( p: Box.DefaultInput ) => {
       return <Box
         flexCenter
-        ssCardBox={ 'layer' }
+        ssCardBox={ 'plain' }
         textAlign={ 'center' }
         padding={ 2 }
         { ...p }
@@ -2054,13 +2051,14 @@ text5`}
   </>
 }
 const Styling = () => {
-  const SheetContent = ( type: Sheet.Sheet,index?: number ) => {
+  const SheetContent = ( type: Sheet.Sheet,index?: number,opt?: Partial<Sheet.Input> ) => {
     let sheetID = 'testModal' + index
     Sheet.open( {
       type,
       sheetID: sheetID,
       size: 'S',
       padding: 2,
+      ...opt,
       content: <Sheet.Body padding={ 1 }>
         <Box padding={ 2 }>
           Content { index || 0 }
@@ -2309,7 +2307,9 @@ const Styling = () => {
             </Button.Border>
             <Button.Border
               onClick={ () => {
-                SheetContent( 'drawer.bottom' )
+                SheetContent( 'drawer.bottom',10,{
+                  size: 'R'
+                } )
               } }
             >
               Drawer Bottom
@@ -2322,7 +2322,6 @@ const Styling = () => {
               Drawer Right
             </Button.Border>
 
-
             <Button.Border
               onClick={ ( event ) => {
                 Tooltips.open( {
@@ -2399,7 +2398,6 @@ const Tables = {
           let styles: StyleTags.Properties = {}
 
           if ( args.isHeader ) {
-            console.log( 'AAA' )
             styles = {
               ...styles,
               backgroundColor: 'cloud'