feat: Drawer,AppBar

completed for release
xsoulspace · Mar 2, 2021 · 653e092 · 653e092
1 parent 97c2a87
commit 653e092
Show file tree

Hide file tree

Showing 13 changed files with 323 additions and 137 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,25 +1,75 @@
 ## 0.8.0
 
-BREAKING CHANGE: Now package name is Vuefer. vue_flutter_tailwind will be deprecated as it will reach stable version.
+BREAKING CHANGE: Now package name is `Vuefer`. `vue_flutter_tailwind` will be deprecated as it will reach stable version.
 BREAKING CHANGE: Webpack replaced with Vite
-BREAKING CHANGE: MultiProvider.create replaced to build
-BREAKING CHANGE: Scaffold now builds as Scaffold.build
+BREAKING CHANGE: `MultiProvider.create` replaced to `MultiProvider.build`
+BREAKING CHANGE: `Scaffold({})` now builds as `Scaffold.build({})`
+BREAKING CHANGE: `Alignment.toOverlay` no is `Alignment.overlay`
 
 feat: Navigation push now can align Dialog(route) window
 feat: Drawer
 feat: AppBar
+feat: Scaffold now has drawer and appBar
 
-feat: Simplified provider call
-Old:
+To use Drawer you must first initialize somewhere above `Navigation` with `NavigationContorller` as below:
 
 ```typescript
-
+MultiProvider.build({
+  models: [NavigationController],
+  child: Navigation({
+    child: ...,
+  }),
+})
 ```
 
-New:
+To open Drawer use
+`Scaffold.openDrawer()`
+To close Drawer use
+`Scaffold.closeDrawer()`
 
 ```typescript
-
+Scaffold.build({
+  drawer: Drawer({
+    child: Column({
+      children: [
+        Text({
+          text: ref('Drawer header'),
+        }),
+      ],
+    }),
+  }),
+  appBar: AppBar({
+    leading: ElevatedButton({
+      child: Text({
+        text: ref('='),
+      }),
+      onTap: () => {
+        Scaffold.openDrawer()
+      },
+    }),
+    title: Text({
+      text: ref('Title'),
+    }),
+    actions: [
+      ElevatedButton({
+        child: Text({
+          text: ref('a'),
+        }),
+      }),
+      ElevatedButton({
+        child: Text({
+          text: ref('b'),
+        }),
+      }),
+      ElevatedButton({
+        child: Text({
+          text: ref('c'),
+        }),
+      }),
+    ],
+  }),
+  body: Home(),
+})
 ```
 
 ## 0.7.0

diff --git a/README.md b/README.md
@@ -79,7 +79,7 @@ export const wrapperApp = () => {
 
   return Scaffold({
     body: Align({
-      toOverlay: true,
+      overlay: true,
       alignment: Alignment.bottom,
       child: Container({
         padding,
@@ -310,16 +310,23 @@ MultiProvider.create({
   [] Color palette
 
 - [] Scaffold
+  [x] Drawer
+  [x] AppBar
+
+- [] Drawer
+  [x] basic
+  [] animation
+
+- [] AppBar
+  [x] basic
 
 ## Next
 
 - [] Flexible
 - [] OutlinedButton
 - [] Ripple
-- [] Drawer
 - [] Progress
 - [] Card
-- [] AppBar
 - [] Icon
 - [] IconButton
 - [] Bar

diff --git a/example/src/pages/Home.tsx b/example/src/pages/Home.tsx
@@ -140,7 +140,7 @@ export const Home = () => {
   return defineComponent({
     name: 'App',
     setup() {
-      const layoutMatrix = reactive([
+      const layoutMatrix = ref([
         { x: 0, y: 0, width: 2, height: 2, index: 0 },
         { x: 2, y: 0, width: 2, height: 4, index: 1 },
         { x: 4, y: 0, width: 6, height: 8, index: 2 },
@@ -166,7 +166,7 @@ export const Home = () => {
         NavigationController
       )
       const gridViewDelegate = GridViewDelegate.use({
-        gridViewItems: layoutMatrix.map((el) =>
+        gridViewItems: layoutMatrix.value.map((el) =>
           GridViewItem({
             child: TextButton({
               child: Text({
@@ -195,7 +195,7 @@ export const Home = () => {
       return () =>
         h(
           Align({
-            toOverlay: true,
+            overlay: true,
             alignment: Alignment.center,
             child: Container({
               padding,
@@ -293,16 +293,16 @@ export const Home = () => {
                     isDraggable: ref(true),
                     isResizable: ref(true),
                     onPositionUpdate: (newPosition) => {
-                      const i = layoutMatrix.findIndex(
+                      const i = layoutMatrix.value.findIndex(
                         (el) => el.index == newPosition?.index
                       )
                       // console.log({ i })
                       if (i) {
                         if (newPosition) {
-                          layoutMatrix.splice(i, 1, newPosition)
+                          layoutMatrix.value.splice(i, 1, newPosition)
                           return
                         }
-                        layoutMatrix.splice(i, 1)
+                        layoutMatrix.value.splice(i, 1)
                       }
                     },
                     delegate: gridViewDelegate,

diff --git a/example/src/pages/ScaffoldApp.tsx b/example/src/pages/ScaffoldApp.tsx
@@ -9,7 +9,7 @@ import {
 } from '../../../lib'
 import { Home } from './Home'
 
-export const ScaffoldApp = Scaffold({
+export const ScaffoldApp = Scaffold.build({
   drawer: Drawer({
     child: Column({
       children: [
@@ -24,7 +24,9 @@ export const ScaffoldApp = Scaffold({
       child: Text({
         text: ref('='),
       }),
-      onTap: () => {},
+      onTap: () => {
+        Scaffold.openDrawer()
+      },
     }),
     title: Text({
       text: ref('Title'),

diff --git a/lib/abstract/Alignment.ts b/lib/abstract/Alignment.ts
@@ -15,7 +15,7 @@ export enum AlignmentEdge {
 }
 interface AlignmentI {
   alignment?: AlignmentEdge
-  toOverlay?: boolean
+  overlay?: boolean
 }
 // export class AlignmentHelper {
 //   static getClassNames({ alignment, heightFactor, widthFactor }: AlignI) {
@@ -25,10 +25,10 @@ interface AlignmentI {
 
 export class Alignment {
   alignment: AlignmentEdge
-  toOverlay: boolean
-  constructor({ alignment, toOverlay }: AlignmentI) {
+  overlay: boolean
+  constructor({ alignment, overlay }: AlignmentI) {
     this.alignment = alignment ?? AlignmentEdge.topLeft
-    this.toOverlay = toOverlay ?? false
+    this.overlay = overlay ?? false
   }
   static _factory(alignment: AlignmentEdge) {
     return new Alignment({ alignment })
@@ -129,8 +129,6 @@ export class Alignment {
           return 'left-0 top-0'
       }
     })()
-    return [this.toOverlay ? 'absolute ' + edge : '', relativeAlignment].join(
-      ' '
-    )
+    return [this.overlay ? 'absolute ' + edge : '', relativeAlignment].join(' ')
   }
 }
diff --git a/lib/components/Align.tsx b/lib/components/Align.tsx
@@ -8,13 +8,13 @@ export interface AlignI {
   alignment: Alignment
   // widthFactor?: EdgeInsetsStep;
   // heightFactor?: EdgeInsetsStep;
-  toOverlay?: Maybe<boolean>
+  overlay?: Maybe<boolean>
   key?: Maybe<Key>
 }
 
-export const Align = ({ child, toOverlay, alignment }: AlignI) => {
+export const Align = ({ child, overlay, alignment }: AlignI) => {
   const finalAlignment = alignment
-  finalAlignment.toOverlay = toOverlay ?? false
+  finalAlignment.overlay = overlay ?? false
   return defineComponent({
     name: 'Align',
     render() {

diff --git a/lib/components/AppBar.tsx b/lib/components/AppBar.tsx
@@ -14,6 +14,7 @@ import {
 import { Column } from './Column'
 import { Row } from './Row'
 import { SizedBox } from './SizedBox'
+
 interface AppBarI {
   key?: Maybe<Key>
   leading?: Maybe<Component>

diff --git a/lib/components/Center.tsx b/lib/components/Center.tsx
@@ -15,7 +15,7 @@ export const Center = ({ child, key }: CenterI) => {
     render() {
       return h(
         Align({
-          toOverlay: true,
+          overlay: true,
           alignment: Alignment.center,
           child,
         })

diff --git a/lib/components/Dialog.tsx b/lib/components/Dialog.tsx
@@ -53,29 +53,29 @@ export const showDialog = ({
  *
  *  Be sure that you have Navigation widget on top of tree
  *
- *  ```typescript
- *  const navigationController = MultiProvider.get<NavigationController>(
- *    NavigationController
- *  )
- *  ```
+    ```typescript
+    const navigationController = MultiProvider.get<NavigationController>(
+      NavigationController
+    )
+    ```
  *
  *  Second - call a function inside for example Button.onTap:
  *
- *  ```typescript
- *  ElevatedButton({
- *    child: Text({
- *      text: ref('Show dialog'),
- *    }),
- *    onTap: () => {
- *      showDialog({
- *        builder: Dialog({
- *          child: Text({ text: ref('Hello World') }),
- *        }),
- *        navigationController,
- *      })
- *    },
- *  }),
- *  ```
+    ```typescript
+    ElevatedButton({
+      child: Text({
+        text: ref('Show dialog'),
+      }),
+      onTap: () => {
+        showDialog({
+          builder: Dialog({
+            child: Text({ text: ref('Hello World') }),
+          }),
+          navigationController,
+        })
+      },
+    }),
+    ```
  *
  * To close Dialog, just use `navigationController.pop()`
  */

diff --git a/lib/components/Drawer.ts b/lib/components/Drawer.ts
@@ -1,4 +1,5 @@
 import { Component, computed, defineComponent, h } from 'vue'
+import { Alignment } from '../abstract/Alignment'
 import { Maybe } from '../abstract/BasicTypes'
 import { BoxShadow } from '../abstract/BoxShadow'
 import { Color } from '../abstract/Color'
@@ -14,31 +15,45 @@ interface DrawerI {
   child: Component
   backgroundColor?: Maybe<Color>
   elevation?: Maybe<BoxShadow>
+  alignment?: Maybe<Alignment>
 }
 
-export const Drawer = ({ backgroundColor, child, elevation }: DrawerI) => {
-  return defineComponent({
-    name: 'Drawer',
-    setup() {
-      const heightBox = new SizedBoxHeight({ height: SizeBoxStep.max })
-      const widthBox = new SizedBoxWidth({ width: EdgeInsetsStep.s56 })
-      const classes = computed((): string[] => {
-        return [
-          (elevation ?? BoxShadow.lg).css,
-          EdgeInsets.all(EdgeInsetsStep.s10).paddingCss,
-          heightBox.css,
-          widthBox.css,
-          (backgroundColor ?? Colors.white).backgroundCss,
-        ]
-      })
-      return () =>
-        h(
-          'div',
-          {
-            class: classes.value,
-          },
-          [h(child)]
-        )
-    },
-  })
+export interface DrawerBuilder {
+  widget: Component
+  alignment?: Maybe<Alignment>
+}
+
+export const Drawer = ({
+  backgroundColor,
+  child,
+  elevation,
+  alignment,
+}: DrawerI): DrawerBuilder => {
+  return {
+    alignment,
+    widget: defineComponent({
+      name: 'Drawer',
+      setup() {
+        const heightBox = new SizedBoxHeight({ height: SizeBoxStep.max })
+        const widthBox = new SizedBoxWidth({ width: EdgeInsetsStep.s56 })
+        const classes = computed((): string[] => {
+          return [
+            (elevation ?? BoxShadow.lg).css,
+            EdgeInsets.all(EdgeInsetsStep.s10).paddingCss,
+            heightBox.css,
+            widthBox.css,
+            (backgroundColor ?? Colors.white).backgroundCss,
+          ]
+        })
+        return () =>
+          h(
+            'div',
+            {
+              class: classes.value,
+            },
+            [h(child)]
+          )
+      },
+    }),
+  }
 }