Merge pull request #6 from xsoulspace/feat/vite

Feat/vite

.eslintrc.js

@@ -1,34 +1,28 @@
 module.exports = {
   root: true,
   env: {
+    browser: true,
+    es2021: true,
     node: true,
   },
   extends: [
-    'plugin:vue/vue3-essential',
+    'plugin:vue/vue3-recommended',
     'eslint:recommended',
     '@vue/typescript/recommended',
+    // 他のルールの下に追加
     '@vue/prettier',
     '@vue/prettier/@typescript-eslint',
   ],
   parserOptions: {
     ecmaVersion: 2021,
   },
+  plugins: [],
   rules: {
     'no-case-declarations': 'off',
     'no-fallthrough': 'off',
     quotes: ['error', 'single'],
     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    '@typescript-eslint/explicit-module-boundary-types': 'off',
   },
-  overrides: [
-    {
-      files: [
-        '**/__tests__/*.{j,t}s?(x)',
-        '**/tests/unit/**/*.spec.{j,t}s?(x)',
-      ],
-      env: {
-        mocha: true,
-      },
-    },
-  ],
 }

.github/workflows/gh-publish.workflow.yml

@@ -18,7 +18,7 @@ jobs:
           node-version: 12
           registry-url: https://npm.pkg.github.com/
       - run: yarn install
-      - run: yarn build:js
+      - run: yarn build
       - run: npm publish
         env:
           NODE_AUTH_TOKEN: ${{secrets.GH_PACKAGE}}

.github/workflows/npm-publish.workflow.yml

@@ -18,7 +18,7 @@ jobs:
           node-version: 12
           registry-url: https://registry.npmjs.org/
       - run: yarn install
-      - run: yarn build:js
+      - run: yarn build
       - run: npm publish --access public
         env:
           NODE_AUTH_TOKEN: ${{secrets.NPM_PACKAGE}}

.gitignore

@@ -18,7 +18,6 @@ pnpm-debug.log*
 
 # Editor directories and files
 .idea
-.vscode
 *.suo
 *.ntvs*
 *.njsproj

.prettierrc

@@ -1,8 +1,8 @@
 {
-  "trailingComma": "es5",
   "tabWidth": 2,
   "semi": false,
   "singleQuote": true,
   "printWidth": 80,
-  "bracketSpacing": true
+  "bracketSpacing": true,
+  "vueIndentScriptAndStyle": true
 }

.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode"
+}

CHANGELOG.md

@@ -1,3 +1,77 @@
+## 0.8.0
+
+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 `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
+
+To use Drawer you must first initialize somewhere above `Navigation` with `NavigationContorller` as below:
+
+```typescript
+MultiProvider.build({
+  models: [NavigationController],
+  child: Navigation({
+    child: ...,
+  }),
+})
+```
+
+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
 
 ### feat: MultiDropdownButton

README.md

@@ -1,17 +1,21 @@
-# Vue3 styled like Flutter with Tailwind CSS
+# vuefer just a way to write Vue3 styled like Flutter with Tailwind CSS
 
-[![Gitter chat](https://badges.gitter.im/gitterHQ/gitter.png)](https://gitter.im/xsoulspace/vft)
+[![Gitter chat](https://badges.gitter.im/gitterHQ/gitter.png)](https://gitter.im/xsoulspace/vuefer)
+
+**Please notice: this project was renamed from vuefer to independent name: vuefer**
 
 **Please notice: this project is a work in progress and completely experimental!**
 
-The reason & motivation why this project have been started is a question: Flutter & Dart awesome! Vue3 & Typescript & Tailwind awesome too!
+The reason & motivation why this project have been started is a question: Flutter & Dart awesome! Vue3 & Typescript awesome too!
 
 But...
 
 Flutter is not working inside Excel:( and its kind of complicated to work with web libraries.
 
 So, what if we will write Vue3 TS in style of Flutter, because it's just simplier and faster?
 
+Purpose: fast prototyping and fast MVP development
+
 Please notice:
 
 - It is **not** a Flutter **at all** and even close, but hopefully will be use its style of components & methods writing.
@@ -34,14 +38,14 @@ Add this package to your package.json file:
 
 ```json
 "dependencies": {
-  "@xsoulspace/vue_flutter_tailwind": "next"
+  "@xsoulspace/vuefer": "next"
 }
 ```
 
 add styling to your main.ts
 
 ```typescript
-import '@xsoulspace/vue_flutter_tailwind/dist/vft.css'
+import '@xsoulspace/vuefer/dist/vft.css'
 ```
 
 add styling to app div (temporary and will be removed during Scaffold widget refactoring)
@@ -75,7 +79,7 @@ export const wrapperApp = () => {
 
   return Scaffold({
     body: Align({
-      toOverlay: true,
+      overlay: true,
       alignment: Alignment.bottom,
       child: Container({
         padding,
@@ -306,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
@@ -330,4 +341,29 @@ MultiProvider.create({
 
 # Changelog
 
-Changelog can be found in [Releases](https://github.com/xsoulspace/vue_flutter_tailwind/releases)
+Changelog can be found in [Releases](https://github.com/xsoulspace/vuefer/releases)
+
+# Setup with Vue 3 + Typescript + Vite
+
+## Recommended IDE Setup
+
+[VSCode](https://code.visualstudio.com/) + [Vetur](https://marketplace.visualstudio.com/items?itemName=octref.vetur). Make sure to enable `vetur.experimental.templateInterpolationService` in settings!
+
+### If Using `<script setup>`
+
+[`<script setup>`](https://github.com/vuejs/rfcs/pull/227) is a feature that is currently in RFC stage. To get proper IDE support for the syntax, use [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) instead of Vetur (and disable Vetur).
+
+## Type Support For `.vue` Imports in TS
+
+Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can use the following:
+
+### If Using Volar
+
+Run `Volar: Switch TS Plugin on/off` from VSCode command palette.
+
+### If Using Vetur
+
+1. Install and add `@vuedx/typescript-plugin-vue` to the [plugins section](https://www.typescriptlang.org/tsconfig#plugins) in `tsconfig.json`
+2. Delete `src/shims-vue.d.ts` as it is no longer needed to provide module info to Typescript
+3. Open `src/main.ts` in VSCode
+4. Open the VSCode command palette 5. Search and run "Select TypeScript version" -> "Use workspace version"

example/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

src/example/HeroButton.tsx → example/src/components/HeroButton.tsx

@@ -1,13 +1,14 @@
-import { CrossAxisAlignment, EdgeInsetsStep } from '@/abstract'
+import { computed, defineComponent, h, ref } from 'vue'
 import {
+  CrossAxisAlignment,
+  EdgeInsetsStep,
   ElevatedButton,
   MultiProvider,
   Row,
   SizedBox,
   Text,
-} from '@/components'
-import { computed, defineComponent, h, ref } from 'vue'
-import { HeroesModel } from './HeroesModel'
+} from '../../../lib'
+import { HeroesModel } from '../models/HeroesModel'
 
 export const HeroButton = () => {
   return defineComponent({

example/src/main.ts

@@ -0,0 +1,16 @@
+import { createApp } from 'vue'
+import vueGridLayout from 'vue-grid-layout'
+import { MultiProvider, Navigation, NavigationController } from '../../lib'
+import '../../lib/index.scss'
+import { HeroesModel } from './models/HeroesModel'
+// import '../../lib/tailwind.css'
+import { ScaffoldApp } from './pages/ScaffoldApp'
+
+const app = MultiProvider.build({
+  models: [NavigationController, HeroesModel],
+  child: Navigation({
+    child: ScaffoldApp,
+  }),
+})
+
+createApp(app).use(vueGridLayout).mount('#app')

src/example/HeroesModel.ts → example/src/models/HeroesModel.ts

@@ -1,5 +1,5 @@
-import { reactive } from '@vue/reactivity'
-import { Maybe } from '..'
+import { reactive } from 'vue'
+import { Maybe } from '../../../lib'
 export class Hero {
   constructor(public name: string) {}
 }