diff --git a/.browserslistrc b/.browserslistrc deleted file mode 100644 index 214388f..0000000 --- a/.browserslistrc +++ /dev/null @@ -1,3 +0,0 @@ -> 1% -last 2 versions -not dead diff --git a/.eslintrc.js b/.eslintrc.js index 1d9cd29..cc6e9ca 100644 --- a/.eslintrc.js +++ b/.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, - }, - }, - ], } diff --git a/.github/workflows/gh-publish.workflow.yml b/.github/workflows/gh-publish.workflow.yml index 303421c..e689f41 100644 --- a/.github/workflows/gh-publish.workflow.yml +++ b/.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}} diff --git a/.github/workflows/npm-publish.workflow.yml b/.github/workflows/npm-publish.workflow.yml index c264e3d..d155f33 100644 --- a/.github/workflows/npm-publish.workflow.yml +++ b/.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}} diff --git a/.gitignore b/.gitignore index aa5a6c8..0b9a054 100644 --- a/.gitignore +++ b/.gitignore @@ -18,7 +18,6 @@ pnpm-debug.log* # Editor directories and files .idea -.vscode *.suo *.ntvs* *.njsproj diff --git a/.prettierrc b/.prettierrc index 84445fd..91560c4 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,8 +1,8 @@ { - "trailingComma": "es5", "tabWidth": 2, "semi": false, "singleQuote": true, "printWidth": 80, - "bracketSpacing": true + "bracketSpacing": true, + "vueIndentScriptAndStyle": true } diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..1b6457c --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,4 @@ +{ + "editor.formatOnSave": true, + "editor.defaultFormatter": "esbenp.prettier-vscode" +} diff --git a/CHANGELOG.md b/CHANGELOG.md index 71cb8c6..d6deb8b 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/README.md b/README.md index b0dec5d..a0aaf40 100644 --- a/README.md +++ b/README.md @@ -1,10 +1,12 @@ -# 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... @@ -12,6 +14,8 @@ Flutter is not working inside Excel:( and its kind of complicated to work with w 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 ` + + diff --git a/src/example/HeroButton.tsx b/example/src/components/HeroButton.tsx similarity index 87% rename from src/example/HeroButton.tsx rename to example/src/components/HeroButton.tsx index 7de9b95..d31d666 100644 --- a/src/example/HeroButton.tsx +++ b/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({ diff --git a/example/src/main.ts b/example/src/main.ts new file mode 100644 index 0000000..c9bf7e8 --- /dev/null +++ b/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') diff --git a/src/example/HeroesModel.ts b/example/src/models/HeroesModel.ts similarity index 76% rename from src/example/HeroesModel.ts rename to example/src/models/HeroesModel.ts index b87ade5..6af23a0 100644 --- a/src/example/HeroesModel.ts +++ b/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) {} } diff --git a/src/example/App.tsx b/example/src/pages/Home.tsx similarity index 51% rename from src/example/App.tsx rename to example/src/pages/Home.tsx index 48ac090..5f66d43 100644 --- a/src/example/App.tsx +++ b/example/src/pages/Home.tsx @@ -1,11 +1,4 @@ -import { - Dialog, - GridView, - GridViewItem, - MultiDropdownButton, - MultiProvider, - showDialog, -} from '@/components' +import { computed, defineComponent, h, reactive, ref, watch } from 'vue' import { Align, Alignment, @@ -17,35 +10,40 @@ import { Column, Container, CrossAxisAlignment, + Dialog, DropdownButton, DropdownFieldController, DropdownMenuItem, EdgeInsets, EdgeInsetsStep, ElevatedButton, + GridView, + GridViewDelegate, + GridViewItem, ListView, MainAxisAlignment, MouseRegion, + MultiDropdownButton, MultiDropdownFieldController, + MultiProvider, + NavigationController, Padding, Row, - Scaffold, + showDialog, SizedBox, SystemMouseCursors, Text, TextButton, TextEditingController, TextField, -} from '@/index' -import { computed, defineComponent, h, reactive, ref, watch } from 'vue' -import { GridViewDelegate, NavigationController } from '../abstract' -import { HeroButton } from './HeroButton' +} from '../../../lib' +import { HeroButton } from '../components/HeroButton' type IndexedText = { id: number text: string } -export const WrapperApp = () => { +export const Home = () => { const text = ref('Hello world!') const padding = EdgeInsets.all(EdgeInsetsStep.s3) const rawText = Text({ @@ -59,7 +57,7 @@ export const WrapperApp = () => { const controller = TextEditingController.default controller.text = text - const obj = reactive>(new Map()) + const obj = reactive>(new Map()) obj.set(0, 'test') obj.set(1, 'test1') obj.set(2, 'test1') @@ -142,7 +140,7 @@ export const WrapperApp = () => { 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 }, @@ -168,7 +166,7 @@ export const WrapperApp = () => { NavigationController ) const gridViewDelegate = GridViewDelegate.use({ - gridViewItems: layoutMatrix.map((el) => + gridViewItems: layoutMatrix.value.map((el) => GridViewItem({ child: TextButton({ child: Text({ @@ -196,122 +194,120 @@ export const WrapperApp = () => { ) return () => h( - Scaffold({ - body: Align({ - toOverlay: true, - alignment: Alignment.center, - child: Container({ - padding, - decoration: new BoxDecoration({ - boxShadow: BoxShadow.xl, - borderRadius: BorderRadius.vertical({ - bottom: BorderRadiusStep.xxl, - }), + Align({ + overlay: true, + alignment: Alignment.center, + child: Container({ + padding, + decoration: new BoxDecoration({ + boxShadow: BoxShadow.xl, + borderRadius: BorderRadius.vertical({ + bottom: BorderRadiusStep.xxl, }), - child: Row({ - crossAxisAlignment: CrossAxisAlignment.center, - mainAxisAlignment: MainAxisAlignment.spaceAround, - children: [ - Column({ - children: [ - MultiDropdownButton({ - controller: multiDropdownController, - items: dropdownItems.map((el) => - DropdownMenuItem({ - child: Text({ - text: ref(el.text), - }), - value: el, - key: el.id.toString(), - title: ref(el.text), - }) - ), - }), + }), + child: Row({ + crossAxisAlignment: CrossAxisAlignment.center, + mainAxisAlignment: MainAxisAlignment.spaceAround, + children: [ + Column({ + children: [ + MultiDropdownButton({ + controller: multiDropdownController, + items: dropdownItems.map((el) => + DropdownMenuItem({ + child: Text({ + text: ref(el.text), + }), + value: el, + key: el.id.toString(), + title: ref(el.text), + }) + ), + }), - ElevatedButton({ - child: Text({ - text: ref('Show dialog'), - }), - onTap: () => { - showDialog({ - dialog: Dialog({ - child: ElevatedButton({ - child: Text({ - text: ref('Open dialog'), - }), - onTap: () => { - showDialog({ - dialog: Dialog({ - child: Column({ - children: [ - Text({ - text: ref('Second Dialog'), - }), - ElevatedButton({ - child: Text({ - text: ref('close 2 dialogs'), - }), - onTap: () => { - navigationController.pop(2) - }, + ElevatedButton({ + child: Text({ + text: ref('Show dialog'), + }), + onTap: () => { + showDialog({ + dialog: Dialog({ + child: ElevatedButton({ + child: Text({ + text: ref('Open dialog'), + }), + onTap: () => { + showDialog({ + dialog: Dialog({ + child: Column({ + children: [ + Text({ + text: ref('Second Dialog'), + }), + ElevatedButton({ + child: Text({ + text: ref('close 2 dialogs'), }), - ], - }), + onTap: () => { + navigationController.pop(2) + }, + }), + ], }), - navigationController, - }) - }, - }), + }), + navigationController, + }) + }, }), - navigationController, - }) - }, - }), - HeroButton(), - MouseRegion({ - child: textCard, - cursor: SystemMouseCursors.progress, - }), - ElevatedButton({ - child: Text({ text: ref('') }), - onTap: () => { - console.log({ dropdownFieldController }) - }, - }), - TextField({ - controller: controller, - }), - dropdown, - CheckboxListTile({ - onChanged: () => { - // isEnabled.value = !isEnabled.value; - }, - value: isEnabled, - title: rawText, - }), - dynamicItems, - ], - }), - GridView.count({ - isDraggable: ref(true), - isResizable: ref(true), - onPositionUpdate: (newPosition) => { - const i = layoutMatrix.findIndex( - (el) => el.index == newPosition?.index - ) - // console.log({ i }) - if (i) { - if (newPosition) { - layoutMatrix.splice(i, 1, newPosition) - return - } - layoutMatrix.splice(i, 1) + }), + navigationController, + }) + }, + }), + HeroButton(), + MouseRegion({ + child: textCard, + cursor: SystemMouseCursors.progress, + }), + ElevatedButton({ + child: Text({ text: ref('') }), + onTap: () => { + console.log({ dropdownFieldController }) + }, + }), + TextField({ + controller: controller, + }), + dropdown, + CheckboxListTile({ + onChanged: () => { + // isEnabled.value = !isEnabled.value; + }, + value: isEnabled, + title: rawText, + }), + dynamicItems, + ], + }), + GridView.count({ + isDraggable: ref(true), + isResizable: ref(true), + onPositionUpdate: (newPosition) => { + const i = layoutMatrix.value.findIndex( + (el) => el.index == newPosition?.index + ) + // console.log({ i }) + if (i) { + if (newPosition) { + layoutMatrix.value.splice(i, 1, newPosition) + return } - }, - delegate: gridViewDelegate, - }), - ], - }), + layoutMatrix.value.splice(i, 1) + } + }, + delegate: gridViewDelegate, + }), + ], }), }), }) diff --git a/example/src/pages/ScaffoldApp.tsx b/example/src/pages/ScaffoldApp.tsx new file mode 100644 index 0000000..7736e31 --- /dev/null +++ b/example/src/pages/ScaffoldApp.tsx @@ -0,0 +1,53 @@ +import { ref } from 'vue' +import { + AppBar, + Column, + Drawer, + ElevatedButton, + Scaffold, + Text, +} from '../../../lib' +import { Home } from './Home' + +export const ScaffoldApp = 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(), +}) diff --git a/jest.config.js b/jest.config.js deleted file mode 100644 index a948798..0000000 --- a/jest.config.js +++ /dev/null @@ -1,10 +0,0 @@ -module.exports = { - preset: '@vue/cli-plugin-unit-jest/presets/typescript-and-babel', - transform: { - '^.+\\.vue$': 'vue-jest', - }, - testMatch: [ - '/tests/unit/**/*.spec.(js|jsx|ts|tsx)', - '/src/**/*.spec.(js|jsx|ts|tsx)', - ], -} diff --git a/src/abstract/Alignment.ts b/lib/abstract/Alignment.ts similarity index 93% rename from src/abstract/Alignment.ts rename to lib/abstract/Alignment.ts index be9150d..728e1f1 100644 --- a/src/abstract/Alignment.ts +++ b/lib/abstract/Alignment.ts @@ -1,4 +1,4 @@ -enum AlignmentEdge { +export enum AlignmentEdge { top, topLeft, topCenter, @@ -15,7 +15,7 @@ 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/src/abstract/Axis.ts b/lib/abstract/Axis.ts similarity index 100% rename from src/abstract/Axis.ts rename to lib/abstract/Axis.ts diff --git a/src/abstract/BasicTypes.ts b/lib/abstract/BasicTypes.ts similarity index 73% rename from src/abstract/BasicTypes.ts rename to lib/abstract/BasicTypes.ts index 35af416..e8a8408 100644 --- a/src/abstract/BasicTypes.ts +++ b/lib/abstract/BasicTypes.ts @@ -1,3 +1,5 @@ export type ValueChanged = (value: Maybe, oldValue?: Maybe) => void export type Maybe = T | undefined | null + +//eslint-disable-next-line @typescript-eslint/no-explicit-any export type Constructor = new (...args: any[]) => T diff --git a/src/abstract/Border.ts b/lib/abstract/Border.ts similarity index 100% rename from src/abstract/Border.ts rename to lib/abstract/Border.ts diff --git a/src/abstract/BorderRadius.ts b/lib/abstract/BorderRadius.ts similarity index 100% rename from src/abstract/BorderRadius.ts rename to lib/abstract/BorderRadius.ts diff --git a/src/abstract/BorderSide.ts b/lib/abstract/BorderSide.ts similarity index 100% rename from src/abstract/BorderSide.ts rename to lib/abstract/BorderSide.ts diff --git a/src/abstract/BoxBorder.ts b/lib/abstract/BoxBorder.ts similarity index 100% rename from src/abstract/BoxBorder.ts rename to lib/abstract/BoxBorder.ts diff --git a/src/abstract/BoxConstraints.ts b/lib/abstract/BoxConstraints.ts similarity index 100% rename from src/abstract/BoxConstraints.ts rename to lib/abstract/BoxConstraints.ts diff --git a/src/abstract/BoxDecoration.ts b/lib/abstract/BoxDecoration.ts similarity index 100% rename from src/abstract/BoxDecoration.ts rename to lib/abstract/BoxDecoration.ts diff --git a/src/abstract/BoxFit.ts b/lib/abstract/BoxFit.ts similarity index 100% rename from src/abstract/BoxFit.ts rename to lib/abstract/BoxFit.ts diff --git a/src/abstract/BoxShadow.ts b/lib/abstract/BoxShadow.ts similarity index 100% rename from src/abstract/BoxShadow.ts rename to lib/abstract/BoxShadow.ts diff --git a/src/abstract/BoxShape.ts b/lib/abstract/BoxShape.ts similarity index 100% rename from src/abstract/BoxShape.ts rename to lib/abstract/BoxShape.ts diff --git a/src/abstract/ButtonStyle.ts b/lib/abstract/ButtonStyle.ts similarity index 100% rename from src/abstract/ButtonStyle.ts rename to lib/abstract/ButtonStyle.ts diff --git a/src/abstract/Color.ts b/lib/abstract/Color.ts similarity index 100% rename from src/abstract/Color.ts rename to lib/abstract/Color.ts diff --git a/src/abstract/ColorNames.ts b/lib/abstract/ColorNames.ts similarity index 100% rename from src/abstract/ColorNames.ts rename to lib/abstract/ColorNames.ts diff --git a/src/abstract/Colors.ts b/lib/abstract/Colors.ts similarity index 100% rename from src/abstract/Colors.ts rename to lib/abstract/Colors.ts diff --git a/src/abstract/CrossAxisAlignment.ts b/lib/abstract/CrossAxisAlignment.ts similarity index 100% rename from src/abstract/CrossAxisAlignment.ts rename to lib/abstract/CrossAxisAlignment.ts diff --git a/src/abstract/DividerDecoration.ts b/lib/abstract/DividerDecoration.ts similarity index 100% rename from src/abstract/DividerDecoration.ts rename to lib/abstract/DividerDecoration.ts diff --git a/src/abstract/DividerThickness.ts b/lib/abstract/DividerThickness.ts similarity index 100% rename from src/abstract/DividerThickness.ts rename to lib/abstract/DividerThickness.ts diff --git a/src/abstract/DropdownFieldController.ts b/lib/abstract/DropdownFieldController.ts similarity index 100% rename from src/abstract/DropdownFieldController.ts rename to lib/abstract/DropdownFieldController.ts diff --git a/src/abstract/DropdownMenuItem.ts b/lib/abstract/DropdownMenuItem.ts similarity index 100% rename from src/abstract/DropdownMenuItem.ts rename to lib/abstract/DropdownMenuItem.ts diff --git a/src/abstract/EdgeInsets.ts b/lib/abstract/EdgeInsets.ts similarity index 100% rename from src/abstract/EdgeInsets.ts rename to lib/abstract/EdgeInsets.ts diff --git a/src/abstract/FontSize.ts b/lib/abstract/FontSize.ts similarity index 100% rename from src/abstract/FontSize.ts rename to lib/abstract/FontSize.ts diff --git a/src/abstract/FontWeight.ts b/lib/abstract/FontWeight.ts similarity index 100% rename from src/abstract/FontWeight.ts rename to lib/abstract/FontWeight.ts diff --git a/src/abstract/Gradient.ts b/lib/abstract/Gradient.ts similarity index 100% rename from src/abstract/Gradient.ts rename to lib/abstract/Gradient.ts diff --git a/src/abstract/Grid.ts b/lib/abstract/Grid.ts similarity index 100% rename from src/abstract/Grid.ts rename to lib/abstract/Grid.ts diff --git a/src/abstract/InputDecoration.ts b/lib/abstract/InputDecoration.ts similarity index 100% rename from src/abstract/InputDecoration.ts rename to lib/abstract/InputDecoration.ts diff --git a/src/abstract/ItemBuilder.ts b/lib/abstract/ItemBuilder.ts similarity index 100% rename from src/abstract/ItemBuilder.ts rename to lib/abstract/ItemBuilder.ts diff --git a/src/abstract/Key.ts b/lib/abstract/Key.ts similarity index 100% rename from src/abstract/Key.ts rename to lib/abstract/Key.ts diff --git a/src/abstract/ListTile.ts b/lib/abstract/ListTile.ts similarity index 100% rename from src/abstract/ListTile.ts rename to lib/abstract/ListTile.ts diff --git a/src/abstract/MainAxisAlignment.ts b/lib/abstract/MainAxisAlignment.ts similarity index 100% rename from src/abstract/MainAxisAlignment.ts rename to lib/abstract/MainAxisAlignment.ts diff --git a/src/abstract/MainAxisSize.ts b/lib/abstract/MainAxisSize.ts similarity index 100% rename from src/abstract/MainAxisSize.ts rename to lib/abstract/MainAxisSize.ts diff --git a/src/abstract/MouseCursor.ts b/lib/abstract/MouseCursor.ts similarity index 100% rename from src/abstract/MouseCursor.ts rename to lib/abstract/MouseCursor.ts diff --git a/src/abstract/Navigation.ts b/lib/abstract/Navigation.ts similarity index 77% rename from src/abstract/Navigation.ts rename to lib/abstract/Navigation.ts index 30e4725..e24b23c 100644 --- a/src/abstract/Navigation.ts +++ b/lib/abstract/Navigation.ts @@ -1,15 +1,20 @@ import { Component, markRaw, reactive, ref } from 'vue' +import { Alignment } from './Alignment' import { Maybe } from './BasicTypes' export interface NavigationControllerRoute { routeName: string widget: Maybe fullscreen: boolean + alignment?: Maybe } export class NavigationController { _backgroundZIndex = ref(100) _routeZIndex = ref(110) + get _alignment() { + return this.routes[0]?.alignment ?? Alignment.center + } routes = reactive[]>([]) pop(counter = 1) { @@ -21,14 +26,17 @@ export class NavigationController { push({ widget, fullscreen, + alignment, }: { widget: T fullscreen?: Maybe + alignment?: Maybe }) { this.routes.unshift({ routeName: '', widget: markRaw(widget), fullscreen: fullscreen ?? true, + alignment, }) } } diff --git a/src/abstract/OpacityDecoration.ts b/lib/abstract/OpacityDecoration.ts similarity index 100% rename from src/abstract/OpacityDecoration.ts rename to lib/abstract/OpacityDecoration.ts diff --git a/src/abstract/PackageTypes.d.ts b/lib/abstract/PackageTypes.d.ts similarity index 100% rename from src/abstract/PackageTypes.d.ts rename to lib/abstract/PackageTypes.d.ts diff --git a/src/abstract/SizedBox.ts b/lib/abstract/SizedBox.ts similarity index 100% rename from src/abstract/SizedBox.ts rename to lib/abstract/SizedBox.ts diff --git a/src/abstract/TextAlign.ts b/lib/abstract/TextAlign.ts similarity index 100% rename from src/abstract/TextAlign.ts rename to lib/abstract/TextAlign.ts diff --git a/src/abstract/TextDecoration.ts b/lib/abstract/TextDecoration.ts similarity index 100% rename from src/abstract/TextDecoration.ts rename to lib/abstract/TextDecoration.ts diff --git a/src/abstract/TextDecorationStyle.ts b/lib/abstract/TextDecorationStyle.ts similarity index 100% rename from src/abstract/TextDecorationStyle.ts rename to lib/abstract/TextDecorationStyle.ts diff --git a/src/abstract/TextEditingController.ts b/lib/abstract/TextEditingController.ts similarity index 100% rename from src/abstract/TextEditingController.ts rename to lib/abstract/TextEditingController.ts diff --git a/src/abstract/TextInputType.ts b/lib/abstract/TextInputType.ts similarity index 100% rename from src/abstract/TextInputType.ts rename to lib/abstract/TextInputType.ts diff --git a/src/abstract/TextOverflow.ts b/lib/abstract/TextOverflow.ts similarity index 100% rename from src/abstract/TextOverflow.ts rename to lib/abstract/TextOverflow.ts diff --git a/src/abstract/TextStyle.ts b/lib/abstract/TextStyle.ts similarity index 100% rename from src/abstract/TextStyle.ts rename to lib/abstract/TextStyle.ts diff --git a/src/abstract/VerticalDirection.ts b/lib/abstract/VerticalDirection.ts similarity index 100% rename from src/abstract/VerticalDirection.ts rename to lib/abstract/VerticalDirection.ts diff --git a/src/abstract/index.ts b/lib/abstract/index.ts similarity index 100% rename from src/abstract/index.ts rename to lib/abstract/index.ts diff --git a/src/components/Align.tsx b/lib/components/Align.tsx similarity index 77% rename from src/components/Align.tsx rename to lib/components/Align.tsx index 7f4d40c..d0a0fec 100644 --- a/src/components/Align.tsx +++ b/lib/components/Align.tsx @@ -8,13 +8,13 @@ export interface AlignI { alignment: Alignment // widthFactor?: EdgeInsetsStep; // heightFactor?: EdgeInsetsStep; - toOverlay?: Maybe + overlay?: Maybe key?: Maybe } -export const Align = ({ child, toOverlay, alignment, key }: 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 new file mode 100644 index 0000000..bd6420a --- /dev/null +++ b/lib/components/AppBar.tsx @@ -0,0 +1,121 @@ +import { Component, computed, defineComponent, h } from 'vue' +import { Maybe } from '../abstract/BasicTypes' +import { BoxShadow } from '../abstract/BoxShadow' +import { Color } from '../abstract/Color' +import { Colors } from '../abstract/Colors' +import { EdgeInsets, EdgeInsetsStep } from '../abstract/EdgeInsets' +import { Key } from '../abstract/Key' +import { MainAxisAlignment } from '../abstract/MainAxisAlignment' +import { + SizeBoxStep, + SizedBoxHeight, + SizedBoxWidth, +} from '../abstract/SizedBox' +import { Column } from './Column' +import { Row } from './Row' +import { SizedBox } from './SizedBox' + +interface AppBarI { + key?: Maybe + leading?: Maybe + automaticallyImplyLeading?: Maybe + title?: Maybe + actions?: Maybe + // flexibleSpace + bottom?: Maybe + backgroundColor?: Maybe + elevation?: Maybe + hideOnScroll?: Maybe + // foregroundColor + // brightness + // centerTitle + // toolbarOpacity?: OpacityDecorationSteps + // bottomOpacity + toolbarHeight?: Maybe + leadingWidth?: Maybe + // toolbarTextStyle + // titleTextStyle +} +export const AppBar = ({ + title, + actions, + bottom, + elevation, + backgroundColor, + // brightness, + // toolbarOpacity, + // bottomOpacity, + toolbarHeight, + leadingWidth, + // toolbarTextStyle, + // titleTextStyle, + automaticallyImplyLeading, + leading, + hideOnScroll, +}: AppBarI) => { + const resolvedAutomaticallyImplyLeading = automaticallyImplyLeading ?? true + const resolvedLeading = + leading ?? (resolvedAutomaticallyImplyLeading ?
:
) + const resolvedLeadingWidth = leadingWidth ?? EdgeInsetsStep.s10 + + return defineComponent({ + name: 'AppBar', + setup() { + // const resolvedBackgroundOpacity = new OpacityDecoration({ + // opacity: toolbarOpacity ?? OpacityDecorationSteps.s100, + // }) + // const resolvedBottomOpacity = bottomOpacity ?? OpacityDecorationSteps.s100 + const classes = computed((): string[] => { + return [ + hideOnScroll ? '' : 'fixed', + (elevation ?? BoxShadow.lg).css, + (backgroundColor ?? Colors.white).backgroundCss, + new SizedBoxWidth({ + width: SizeBoxStep.max, + }).css, + new SizedBoxHeight({ + height: toolbarHeight ?? EdgeInsetsStep.s14, + }).css, + EdgeInsets.only({ bottom: EdgeInsetsStep.s2 }).marginCss, + ] + }) + return () => + h( + 'nav', + { + style: 'z-index: 50', + class: classes.value, + }, + [ + h( + Column({ + children: [ + Row({ + children: [ + SizedBox({ + child: h(resolvedLeading), + width: resolvedLeadingWidth, + }), + Row({ + mainAxisAlignment: MainAxisAlignment.center, + children: [title ? h(title) : h(
)], + }), + Row({ + mainAxisAlignment: MainAxisAlignment.end, + children: actions?.map((el) => h(el)) ?? [], + }), + ], + }), + bottom + ? Row({ + children: [...bottom], + }) + : h(
), + ], + }) + ), + ] + ) + }, + }) +} diff --git a/src/components/ButtonStyleButton.tsx b/lib/components/ButtonStyleButton.tsx similarity index 100% rename from src/components/ButtonStyleButton.tsx rename to lib/components/ButtonStyleButton.tsx diff --git a/src/components/Center.tsx b/lib/components/Center.tsx similarity index 95% rename from src/components/Center.tsx rename to lib/components/Center.tsx index d8925a6..7e680f2 100644 --- a/src/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/src/components/Checkbox.tsx b/lib/components/Checkbox.tsx similarity index 100% rename from src/components/Checkbox.tsx rename to lib/components/Checkbox.tsx diff --git a/src/components/CheckboxListTile.tsx b/lib/components/CheckboxListTile.tsx similarity index 100% rename from src/components/CheckboxListTile.tsx rename to lib/components/CheckboxListTile.tsx diff --git a/src/components/ColoredBox.tsx b/lib/components/ColoredBox.tsx similarity index 100% rename from src/components/ColoredBox.tsx rename to lib/components/ColoredBox.tsx diff --git a/src/components/Column.tsx b/lib/components/Column.tsx similarity index 100% rename from src/components/Column.tsx rename to lib/components/Column.tsx diff --git a/src/components/ConstrainedBox.tsx b/lib/components/ConstrainedBox.tsx similarity index 100% rename from src/components/ConstrainedBox.tsx rename to lib/components/ConstrainedBox.tsx diff --git a/src/components/Container.tsx b/lib/components/Container.tsx similarity index 100% rename from src/components/Container.tsx rename to lib/components/Container.tsx diff --git a/src/components/Dialog.tsx b/lib/components/Dialog.tsx similarity index 75% rename from src/components/Dialog.tsx rename to lib/components/Dialog.tsx index 3ced4ef..67f978c 100644 --- a/src/components/Dialog.tsx +++ b/lib/components/Dialog.tsx @@ -53,35 +53,34 @@ export const showDialog = ({ * * Be sure that you have Navigation widget on top of tree * - * ```typescript - * const navigationController = MultiProvider.get( - * NavigationController - * ) - * ``` + ```typescript + const navigationController = MultiProvider.get( + 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()` */ export const Dialog = ({ child, - key, backgroundColor, decoration, elevation, @@ -92,16 +91,17 @@ export const Dialog = ({ setup() { const classes = computed(() => { return [ - backgroundColor?.backgroundCss ?? Colors.white.backgroundCss, - decoration?.css ?? + (backgroundColor ?? Colors.white).backgroundCss, + ( + decoration ?? new BoxDecoration({ borderRadius: BorderRadius.all({ radius: BorderRadiusStep.md, }), - }).css, - elevation?.css ?? BoxShadow.lg.css, - insetPadding?.paddingCss ?? - EdgeInsets.all(EdgeInsetsStep.s10).paddingCss, + }) + ).css, + (elevation ?? BoxShadow.lg).css, + (insetPadding ?? EdgeInsets.all(EdgeInsetsStep.s10)).paddingCss, ] }) return () => h(
{h(child)}
) diff --git a/src/components/Divider.tsx b/lib/components/Divider.tsx similarity index 100% rename from src/components/Divider.tsx rename to lib/components/Divider.tsx diff --git a/lib/components/Drawer.ts b/lib/components/Drawer.ts new file mode 100644 index 0000000..546d7c2 --- /dev/null +++ b/lib/components/Drawer.ts @@ -0,0 +1,59 @@ +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' +import { Colors } from '../abstract/Colors' +import { EdgeInsets, EdgeInsetsStep } from '../abstract/EdgeInsets' +import { + SizeBoxStep, + SizedBoxHeight, + SizedBoxWidth, +} from '../abstract/SizedBox' + +interface DrawerI { + child: Component + backgroundColor?: Maybe + elevation?: Maybe + alignment?: Maybe +} + +export interface DrawerBuilder { + widget: Component + alignment?: Maybe +} + +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)] + ) + }, + }), + } +} diff --git a/src/components/DropdownButton.tsx b/lib/components/DropdownButton.tsx similarity index 97% rename from src/components/DropdownButton.tsx rename to lib/components/DropdownButton.tsx index 6785e0e..6e8af0f 100644 --- a/src/components/DropdownButton.tsx +++ b/lib/components/DropdownButton.tsx @@ -1,4 +1,5 @@ import { computed, defineComponent, h, ref } from 'vue' +import { Maybe } from '../abstract/BasicTypes' import { BoxDecoration } from '../abstract/BoxDecoration' import { BoxShadow } from '../abstract/BoxShadow' import { Colors } from '../abstract/Colors' @@ -26,8 +27,8 @@ export const DropdownButton = < | string | number | boolean - | { [prop: string]: any } - | { [prop: number]: any } + | { [prop: string]: Maybe } + | { [prop: number]: Maybe } >({ items, elevation, diff --git a/src/components/DropdownMenuItem.tsx b/lib/components/DropdownMenuItem.tsx similarity index 100% rename from src/components/DropdownMenuItem.tsx rename to lib/components/DropdownMenuItem.tsx diff --git a/src/components/ElevatedButton.tsx b/lib/components/ElevatedButton.tsx similarity index 100% rename from src/components/ElevatedButton.tsx rename to lib/components/ElevatedButton.tsx diff --git a/src/components/FittedBox.tsx b/lib/components/FittedBox.tsx similarity index 100% rename from src/components/FittedBox.tsx rename to lib/components/FittedBox.tsx diff --git a/src/components/Flex.tsx b/lib/components/Flex.tsx similarity index 97% rename from src/components/Flex.tsx rename to lib/components/Flex.tsx index f996472..4a84639 100644 --- a/src/components/Flex.tsx +++ b/lib/components/Flex.tsx @@ -39,7 +39,7 @@ export class FlexHelper { direction, verticalDirection, dividerDecoration, - }: GetFlexClassNames): string { + }: GetFlexClassNames): string[] { const finalDirection = direction ?? Axis.horizontal const finalAxisSize = mainAxisSize ?? MainAxisSize.min const finalMainAxisAlignment = mainAxisAlignment ?? MainAxisAlignment.start @@ -55,7 +55,7 @@ export class FlexHelper { finalMainAxisAlignment.css, finalCrossAxisAlignment.css, dividerDecoration?.css ?? '', - ].join(' ') + ] } } export const Flex = (arg: FlexI) => diff --git a/src/components/GestureDetector.tsx b/lib/components/GestureDetector.tsx similarity index 100% rename from src/components/GestureDetector.tsx rename to lib/components/GestureDetector.tsx diff --git a/src/components/GridView.tsx b/lib/components/GridView.tsx similarity index 100% rename from src/components/GridView.tsx rename to lib/components/GridView.tsx diff --git a/lib/components/GridViewBuilder.vue b/lib/components/GridViewBuilder.vue new file mode 100644 index 0000000..890de91 --- /dev/null +++ b/lib/components/GridViewBuilder.vue @@ -0,0 +1,190 @@ + + diff --git a/src/components/GridViewItem.tsx b/lib/components/GridViewItem.tsx similarity index 100% rename from src/components/GridViewItem.tsx rename to lib/components/GridViewItem.tsx diff --git a/src/components/GridViewItemBuilder.tsx b/lib/components/GridViewItemBuilder.tsx similarity index 100% rename from src/components/GridViewItemBuilder.tsx rename to lib/components/GridViewItemBuilder.tsx diff --git a/src/components/GridViewStyle.scss b/lib/components/GridViewStyle.scss similarity index 100% rename from src/components/GridViewStyle.scss rename to lib/components/GridViewStyle.scss diff --git a/src/components/Icon.tsx b/lib/components/Icon.tsx similarity index 100% rename from src/components/Icon.tsx rename to lib/components/Icon.tsx diff --git a/src/components/InkWell.tsx b/lib/components/InkWell.tsx similarity index 100% rename from src/components/InkWell.tsx rename to lib/components/InkWell.tsx diff --git a/src/components/ListTile.tsx b/lib/components/ListTile.tsx similarity index 100% rename from src/components/ListTile.tsx rename to lib/components/ListTile.tsx diff --git a/src/components/ListView.tsx b/lib/components/ListView.tsx similarity index 100% rename from src/components/ListView.tsx rename to lib/components/ListView.tsx diff --git a/lib/components/ListViewBuilder.vue b/lib/components/ListViewBuilder.vue new file mode 100644 index 0000000..7305855 --- /dev/null +++ b/lib/components/ListViewBuilder.vue @@ -0,0 +1,68 @@ + + + diff --git a/src/components/ListViewItem.tsx b/lib/components/ListViewItem.tsx similarity index 100% rename from src/components/ListViewItem.tsx rename to lib/components/ListViewItem.tsx diff --git a/src/components/Margin.tsx b/lib/components/Margin.tsx similarity index 100% rename from src/components/Margin.tsx rename to lib/components/Margin.tsx diff --git a/src/components/Material.tsx b/lib/components/Material.tsx similarity index 100% rename from src/components/Material.tsx rename to lib/components/Material.tsx diff --git a/src/components/MouseRegion.tsx b/lib/components/MouseRegion.tsx similarity index 100% rename from src/components/MouseRegion.tsx rename to lib/components/MouseRegion.tsx diff --git a/src/components/MultiDropdownButton.tsx b/lib/components/MultiDropdownButton.tsx similarity index 98% rename from src/components/MultiDropdownButton.tsx rename to lib/components/MultiDropdownButton.tsx index 0d106c7..b4f6211 100644 --- a/src/components/MultiDropdownButton.tsx +++ b/lib/components/MultiDropdownButton.tsx @@ -1,5 +1,6 @@ import { computed, defineComponent, h, ref } from 'vue' -import { BorderRadius } from '../abstract' +import { Maybe } from '../abstract/BasicTypes' +import { BorderRadius } from '../abstract/BorderRadius' import { BoxDecoration } from '../abstract/BoxDecoration' import { BoxShadow } from '../abstract/BoxShadow' import { Colors } from '../abstract/Colors' @@ -79,8 +80,8 @@ export const MultiDropdownButton = < | string | number | boolean - | { [prop: string]: any } - | { [prop: number]: any }, + | { [prop: string]: Maybe } + | { [prop: number]: Maybe }, TKeyValue extends MultiDropdownSelectedItemI >({ items, diff --git a/src/components/Navigation.tsx b/lib/components/Navigation.tsx similarity index 67% rename from src/components/Navigation.tsx rename to lib/components/Navigation.tsx index cc497ca..2c3e751 100644 --- a/src/components/Navigation.tsx +++ b/lib/components/Navigation.tsx @@ -1,4 +1,13 @@ -import { Component, defineComponent, h, reactive, ref, watch } from 'vue' +import { + Component, + computed, + defineComponent, + h, + reactive, + ref, + watch, +} from 'vue' +import { AlignmentEdge } from '../abstract/Alignment' import { Colors } from '../abstract/Colors' import { EdgeInsetsStep } from '../abstract/EdgeInsets' import { @@ -27,14 +36,14 @@ interface NavigationI { * * Add controller into MultiPorvider and Navigation widget below: * - * ```typescript - * MultiProvider.create({ - * models: [NavigationController, ...], - * child: Navigation({ - * child: ..., - * }), - * }) - * ``` + ```typescript + MultiProvider.create({ + models: [NavigationController, ...], + child: Navigation({ + child: ..., + }), + }) + ``` */ export const Navigation = ({ child }: NavigationI) => { return defineComponent({ @@ -54,7 +63,11 @@ export const Navigation = ({ child }: NavigationI) => { const isRoutesExists = ref(false) const isFullscreen = ref(false) const isNotFullscreen = ref(false) - + const alignment = computed(() => { + const finalAlignment = routeController._alignment + finalAlignment.overlay = true + return finalAlignment + }) watch( routeController.routes, (newRoutes) => { @@ -83,6 +96,7 @@ export const Navigation = ({ child }: NavigationI) => { isNotFullscreen, isRoutesExists, routeController, + alignment, } }, render() { @@ -106,6 +120,9 @@ export const Navigation = ({ child }: NavigationI) => { Visibility({ child: h(
{ + this.routeController.pop() + }} class={[ Colors.black.backgroundCss, OpacityDecoration.use({ @@ -129,17 +146,42 @@ export const Navigation = ({ child }: NavigationI) => { }} > {h( - Center({ - child: h( -
- event.stopPropagation() - } - > - {h(this.currentRoute.widget ??
)} -
- ), - }) + (() => { + switch (this.alignment.alignment) { + case AlignmentEdge.center: + return Center({ + child: ( +
+ event.stopPropagation() + } + > + {h( + this.currentRoute.widget ?? ( +
+ ) + )} +
+ ), + }) + + default: + return ( +
+ event.stopPropagation() + } + > + {h( + this.currentRoute.widget ?? ( +
+ ) + )} +
+ ) + } + })() )}
), diff --git a/lib/components/Opacity.tsx b/lib/components/Opacity.tsx new file mode 100644 index 0000000..a4aaa9a --- /dev/null +++ b/lib/components/Opacity.tsx @@ -0,0 +1,32 @@ +import { Component, defineComponent, h } from 'vue' +import { Maybe } from '../abstract/BasicTypes' +import { Key } from '../abstract/Key' +import { + OpacityDecoration, + OpacityDecorationSteps, +} from '../abstract/OpacityDecoration' + +interface OpacityI { + child: Component + key?: Maybe + opacity: OpacityDecorationSteps +} + +export const Opacity = ({ child, key, opacity }: OpacityI) => { + return defineComponent({ + name: 'Opacity', + setup() { + const resolvedOpacity = new OpacityDecoration({ + opacity, + }) + return () => + h( + 'div', + { + class: resolvedOpacity.css, + }, + [h(child)] + ) + }, + }) +} diff --git a/src/components/Padding.tsx b/lib/components/Padding.tsx similarity index 100% rename from src/components/Padding.tsx rename to lib/components/Padding.tsx diff --git a/src/components/Positioned.tsx b/lib/components/Positioned.tsx similarity index 100% rename from src/components/Positioned.tsx rename to lib/components/Positioned.tsx diff --git a/lib/components/Provider.tsx b/lib/components/Provider.tsx new file mode 100644 index 0000000..7b383c2 --- /dev/null +++ b/lib/components/Provider.tsx @@ -0,0 +1,114 @@ +import { + Component, + defineComponent, + h, + inject, + onBeforeMount, + provide, + reactive, +} from 'vue' +import { Constructor, Maybe } from '../abstract/BasicTypes' +interface MultiProviderI { + models: Maybe>[] + child: Component +} + +enum InstanceTypes { + class = 'class', + function = 'function', +} +/** + * + * Let's suppose we have a model: + * + ```typescript + export class Hero { + constructor(public name: string) {} + } + export class HeroesModel { + heroes = reactive[]>([]) + add(hero: Hero) { + this.heroes.push(hero) + } + get count() { + return this.heroes.length + } + } + ``` + * + * Create Provider on top of tree + * + ```typescript + MultiProvider.create({ + models: [HeroesModel], + child: wrapperApp(), + }) + ``` + * + * And somewhere in tree just call + * + ```typescript + const heroModel = MultiProvider.get(HeroesModel) + ``` + * + */ +export class MultiProvider { + static _allProvidersSymbols = new Map< + CallableFunction['name'] | Constructor['name'], + symbol + >() + static _checkIsFunctionOrClass( + model: CallableFunction | Constructor + ): { + instance: T + type: InstanceTypes + } { + try { + // lets suppose model is newable function + const newableModel = model as Constructor + const newModel = new newableModel() + return { instance: newModel as T, type: InstanceTypes.class } + } catch (error) { + // try as callable + const callableModel = model as CallableFunction + const newFunctionModel = callableModel() + return { instance: newFunctionModel as T, type: InstanceTypes.function } + } + } + static build({ models, child }: MultiProviderI) { + return defineComponent({ + name: 'MultiProvider', + setup() { + const initModels = reactive({}) + + onBeforeMount(() => { + for (const model of models) { + if (model == null) throw Error(`${model} cannot be null!`) + const newProviderSymbol = Symbol() + const { instance } = MultiProvider._checkIsFunctionOrClass(model) + provide(newProviderSymbol, instance) + MultiProvider._allProvidersSymbols.set( + model.name, + newProviderSymbol + ) + initModels[model.name] = instance + } + }) + return { initModels } + }, + render() { + return h(child) + }, + }) + } + static get = Constructor>( + modelName: P + ) { + const symbol = this._allProvidersSymbols.get(modelName.name) + if (symbol == null) throw Error(`${modelName} doesn't have a provider!`) + const model: Maybe = inject(symbol) + if (model == null) + throw new Error(`${modelName} have a provider but return null:(!`) + return model + } +} diff --git a/src/components/Row.tsx b/lib/components/Row.tsx similarity index 97% rename from src/components/Row.tsx rename to lib/components/Row.tsx index de16e66..395ecb9 100644 --- a/src/components/Row.tsx +++ b/lib/components/Row.tsx @@ -11,7 +11,7 @@ export const Row = ({ dividerDecoration, }: RowI) => { return defineComponent({ - name: 'Column', + name: 'Row', render() { const classNames = FlexHelper.getClassNames({ crossAxisAlignment, diff --git a/lib/components/Scaffold.tsx b/lib/components/Scaffold.tsx new file mode 100644 index 0000000..497b7fb --- /dev/null +++ b/lib/components/Scaffold.tsx @@ -0,0 +1,123 @@ +import { Component, computed, defineComponent, h } from 'vue' +import { + Alignment, + Maybe, + NavigationController, + SizeBoxStep, + SizedBoxHeight, +} from '../abstract' +import { DrawerBuilder } from './Drawer' +import { MultiProvider } from './Provider' +interface ScaffoldI { + body: Component + appBar?: Maybe + drawer?: Maybe +} + +/** + * To init Scaffold use `Scaffold.build` + * + * 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(), +}) +``` +**/ +export class Scaffold { + static _drawer?: Maybe + static openDrawer: CallableFunction = () => '' + static closeDrawer: CallableFunction = () => '' + static build({ body, appBar, drawer }: ScaffoldI) { + Scaffold._drawer = drawer + return defineComponent({ + name: 'Scaffold', + setup() { + const isAppBarExists = computed(() => appBar != null) + const classes = computed((): string[] => { + return [ + isAppBarExists.value ? 'relative' : '', + new SizedBoxHeight({ height: SizeBoxStep.screen }).css, + ] + }) + const navigationController = MultiProvider.get( + NavigationController + ) + const openDrawer = () => { + if (Scaffold._drawer == null) { + console.warn('You forgot to supply Drawer to Scaffold.') + return + } + navigationController.push({ + widget: Scaffold._drawer.widget, + alignment: Scaffold._drawer.alignment ?? Alignment.left, + fullscreen: false, + }) + } + Scaffold.openDrawer = openDrawer + Scaffold.closeDrawer = () => navigationController.pop() + return () => + h('div', {}, [ + h(appBar ??
), + h('div', { class: classes.value }, [h(body)]), + ]) + }, + }) + } +} diff --git a/src/components/SizedBox.tsx b/lib/components/SizedBox.tsx similarity index 57% rename from src/components/SizedBox.tsx rename to lib/components/SizedBox.tsx index dc9bff1..b3a6cba 100644 --- a/src/components/SizedBox.tsx +++ b/lib/components/SizedBox.tsx @@ -15,19 +15,21 @@ interface SizedBoxI { width?: Maybe } -export const SizedBox = ({ child, key, width, height }: SizedBoxI) => { - const heightBox = new SizedBoxHeight({ height }) - const widthBox = new SizedBoxWidth({ width }) +export const SizedBox = ({ child, width, height }: SizedBoxI) => { return defineComponent({ name: 'SizedBox', - render() { - return h( - 'div', - { - class: [widthBox?.css ?? '', heightBox?.css ?? ''].join(' '), - }, - [h(child ??
)] - ) + setup() { + const heightBox = new SizedBoxHeight({ height }) + const widthBox = new SizedBoxWidth({ width }) + + return () => + h( + 'div', + { + class: [widthBox?.css ?? '', heightBox?.css ?? ''], + }, + [h(child ??
)] + ) }, }) } diff --git a/src/components/Stack.tsx b/lib/components/Stack.tsx similarity index 100% rename from src/components/Stack.tsx rename to lib/components/Stack.tsx diff --git a/src/components/Text.tsx b/lib/components/Text.tsx similarity index 100% rename from src/components/Text.tsx rename to lib/components/Text.tsx diff --git a/src/components/TextButton.tsx b/lib/components/TextButton.tsx similarity index 100% rename from src/components/TextButton.tsx rename to lib/components/TextButton.tsx diff --git a/src/components/TextField.tsx b/lib/components/TextField.tsx similarity index 100% rename from src/components/TextField.tsx rename to lib/components/TextField.tsx diff --git a/src/components/VerticalDivider.tsx b/lib/components/VerticalDivider.tsx similarity index 100% rename from src/components/VerticalDivider.tsx rename to lib/components/VerticalDivider.tsx diff --git a/src/components/Visibility.tsx b/lib/components/Visibility.tsx similarity index 100% rename from src/components/Visibility.tsx rename to lib/components/Visibility.tsx diff --git a/lib/components/VueTeleport.vue b/lib/components/VueTeleport.vue new file mode 100644 index 0000000..5fadc68 --- /dev/null +++ b/lib/components/VueTeleport.vue @@ -0,0 +1,16 @@ + + diff --git a/src/components/Wrap.tsx b/lib/components/Wrap.tsx similarity index 100% rename from src/components/Wrap.tsx rename to lib/components/Wrap.tsx diff --git a/src/components/index.scss b/lib/components/index.scss similarity index 100% rename from src/components/index.scss rename to lib/components/index.scss diff --git a/src/components/index.ts b/lib/components/index.ts similarity index 96% rename from src/components/index.ts rename to lib/components/index.ts index ee31aae..def85d8 100644 --- a/src/components/index.ts +++ b/lib/components/index.ts @@ -1,4 +1,5 @@ export * from './Align' +export * from './AppBar' export * from './ButtonStyleButton' export * from './Center' export * from './Checkbox' @@ -9,6 +10,7 @@ export * from './ConstrainedBox' export * from './Container' export * from './Dialog' export * from './Divider' +export * from './Drawer' export * from './DropdownButton' export * from './DropdownMenuItem' export * from './ElevatedButton' diff --git a/src/directives/VClickOutside.ts b/lib/directives/VClickOutside.ts similarity index 97% rename from src/directives/VClickOutside.ts rename to lib/directives/VClickOutside.ts index 9d2517a..48f4ae0 100644 --- a/src/directives/VClickOutside.ts +++ b/lib/directives/VClickOutside.ts @@ -10,6 +10,7 @@ const IS_TOUCH = const EVENTS = IS_TOUCH ? ['touchstart'] : ['click'] interface ClickOutsideElement extends HTMLElement { + //eslint-disable-next-line @typescript-eslint/no-explicit-any [HANDLERS_PROPERTY]: any } @@ -81,6 +82,7 @@ const onEvent = ({ el, event, handler, middleware }: EventObject) => { // In the meanwhile, we are using el.contains for those browsers, not // the ideal solution, but using IE or EDGE is not ideal either. const path = + //eslint-disable-next-line @typescript-eslint/no-explicit-any (event as any).path || (event.composedPath && event.composedPath()) const isClickOutside = path ? path.indexOf(el) < 0 diff --git a/src/functions/createMap.ts b/lib/functions/createMap.ts similarity index 66% rename from src/functions/createMap.ts rename to lib/functions/createMap.ts index 8743224..d197166 100644 --- a/src/functions/createMap.ts +++ b/lib/functions/createMap.ts @@ -15,9 +15,11 @@ export const createKeyedMap = ({ const map = new Map() for (const value of arr) { - const rawKey = value[key] as any - const newKey = unifyValues ? unifyValue(rawKey) : rawKey - map.set(newKey as TKey, valueIsKey ? newKey : value) + const rawKey = value[key] as Maybe + if (rawKey) { + const newKey = unifyValues ? unifyValue({ str: rawKey }) : rawKey + map.set(newKey as TKey, valueIsKey ? (newKey as TValue) : value) + } } return map } @@ -33,8 +35,8 @@ export const createKeyedIndexMap = ({ const map = new Map() for (const [i, value] of arr.entries()) { - const rawKey = value[key] as any - const newKey = unifyValues ? unifyValue(rawKey) : rawKey + const rawKey = value[key] as Maybe + const newKey = unifyValues ? unifyValue({ str: rawKey }) : rawKey map.set(newKey as TKey, i) } return map diff --git a/src/functions/deepCopyObj.ts b/lib/functions/deepCopyObj.ts similarity index 100% rename from src/functions/deepCopyObj.ts rename to lib/functions/deepCopyObj.ts diff --git a/src/functions/findUnshiftSplice.ts b/lib/functions/findUnshiftSplice.ts similarity index 91% rename from src/functions/findUnshiftSplice.ts rename to lib/functions/findUnshiftSplice.ts index 351f0fc..e9e0cc0 100644 --- a/src/functions/findUnshiftSplice.ts +++ b/lib/functions/findUnshiftSplice.ts @@ -15,7 +15,8 @@ export const checkId = (e: T) => { return e case 'object': if ('id' in e) { - return e['id'] + //eslint-disable-next-line @typescript-eslint/no-explicit-any + return (e as any)['id'] } // try to search for key with id const ids: string[] = [] @@ -26,7 +27,11 @@ export const checkId = (e: T) => { } switch (ids.length) { case 1: - return (e as any)[ids[0]] + const idKey = ids[0] + if (idKey in e) { + //eslint-disable-next-line @typescript-eslint/no-explicit-any + return (e as any)[idKey] + } } default: throw Error( @@ -47,7 +52,7 @@ const getIndexById = ({ idKey, }: { arr: T[] - idToFind: any + idToFind: unknown idKey: Maybe }) => { const index = arr.findIndex((e) => { diff --git a/src/functions/getChangesFromOldAndNewArrays.spec.ts b/lib/functions/getChangesFromOldAndNewArrays.spec.ts similarity index 100% rename from src/functions/getChangesFromOldAndNewArrays.spec.ts rename to lib/functions/getChangesFromOldAndNewArrays.spec.ts diff --git a/src/functions/getChangesFromOldAndNewArrays.ts b/lib/functions/getChangesFromOldAndNewArrays.ts similarity index 90% rename from src/functions/getChangesFromOldAndNewArrays.ts rename to lib/functions/getChangesFromOldAndNewArrays.ts index 0e8fee5..3518272 100644 --- a/src/functions/getChangesFromOldAndNewArrays.ts +++ b/lib/functions/getChangesFromOldAndNewArrays.ts @@ -1,7 +1,7 @@ import { Maybe } from '../abstract/BasicTypes' import { unifyValue } from './unifyValue' -const getUnifiedValue = (val: any) => { +const getUnifiedValue = (val: Maybe) => { return typeof val == 'object' ? unifyValue({ str: val }) : val } @@ -40,12 +40,18 @@ export const getChangesFromOldAndNewArrays = ({ const compareMap = new Map() const newValues: T[] = [] // find all old values and make changes - const getValue = (el: T, valueKey: Maybe) => { + const getValue = (el: T, valueKey: Maybe): Maybe => { if (valueKey == null) return el - return (el as any)[valueKey] + if (valueKey in el) { + //eslint-disable-next-line @typescript-eslint/no-explicit-any + return (el as any)[valueKey] + } + return null } const getKey = (el: T) => { const key = getValue(el, idPropertyName) + if (typeof key !== 'string') + throw Error(`Key must have string type but it has type: ${typeof key}`) return key } @@ -133,6 +139,7 @@ export const getIsEntityChanged = ({ value: V }) => { if (key in changed) { + //eslint-disable-next-line @typescript-eslint/no-explicit-any const changedValue = (changed as any)[key] const isNotEqual = getUnifiedValue(changedValue) != getUnifiedValue(value) diff --git a/src/functions/index.ts b/lib/functions/index.ts similarity index 100% rename from src/functions/index.ts rename to lib/functions/index.ts diff --git a/src/functions/isNotNull.ts b/lib/functions/isNotNull.ts similarity index 100% rename from src/functions/isNotNull.ts rename to lib/functions/isNotNull.ts diff --git a/src/functions/reduceHtmlClasses.ts b/lib/functions/reduceHtmlClasses.ts similarity index 100% rename from src/functions/reduceHtmlClasses.ts rename to lib/functions/reduceHtmlClasses.ts diff --git a/src/functions/unifyValue.ts b/lib/functions/unifyValue.ts similarity index 100% rename from src/functions/unifyValue.ts rename to lib/functions/unifyValue.ts diff --git a/src/index.d.ts b/lib/index.d.ts similarity index 57% rename from src/index.d.ts rename to lib/index.d.ts index df7053e..3d7682b 100644 --- a/src/index.d.ts +++ b/lib/index.d.ts @@ -1 +1,3 @@ export * from './index' + +import './types' diff --git a/lib/index.scss b/lib/index.scss new file mode 100644 index 0000000..d7837b3 --- /dev/null +++ b/lib/index.scss @@ -0,0 +1 @@ +@forward './components/'; diff --git a/src/index.ts b/lib/index.ts similarity index 100% rename from src/index.ts rename to lib/index.ts diff --git a/lib/shims-vue.d.ts b/lib/shims-vue.d.ts new file mode 100644 index 0000000..a70d4e5 --- /dev/null +++ b/lib/shims-vue.d.ts @@ -0,0 +1,10 @@ +/* eslint-disable */ +declare module '*.vue' { + import type { DefineComponent } from 'vue' + const component: DefineComponent< + Record, + Record, + unknown + > + export default component +} diff --git a/src/tailwind.css b/lib/tailwind.css similarity index 100% rename from src/tailwind.css rename to lib/tailwind.css diff --git a/lib/types.d.ts b/lib/types.d.ts new file mode 100644 index 0000000..a095b62 --- /dev/null +++ b/lib/types.d.ts @@ -0,0 +1,2 @@ +declare module 'vue3-virtual-scroller' +declare module 'vue-grid-layout' diff --git a/src/utils.ts b/lib/utils.ts similarity index 100% rename from src/utils.ts rename to lib/utils.ts diff --git a/package.json b/package.json index 59f6854..e11601d 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { - "name": "@xsoulspace/vue_flutter_tailwind", - "description": "Vue3 styled like Flutter with Tailwind CSS", - "version": "0.7.2", + "name": "@xsoulspace/vuefer", + "description": "vuefer just a way to write Vue3 styled like Flutter with Tailwind CSS", + "version": "0.8.0", "private": false, "author": { "name": "Anton Malofeev", @@ -10,66 +10,71 @@ "license": "MIT", "repository": { "type": "git", - "url": "git+https://github.com/xsoulspace/vue_flutter_tailwind.git" + "url": "git+https://github.com/xsoulspace/vuefer.git" }, "bugs": { - "url": "https://github.com/xsoulspace/vue_flutter_tailwind/issues" + "url": "https://github.com/xsoulspace/vuefer/issues" }, - "homepage": "https://github.com/xsoulspace/vue_flutter_tailwind#readme", - "scripts": { - "serve": "vue-cli-service serve", - "build": "vue-cli-service build", - "build:js": "vue-cli-service build --target lib --name vft 'src/index.ts'", - "test:unit": "vue-cli-service test:unit", - "test:e2e": "vue-cli-service test:e2e", - "lint": "vue-cli-service lint" + "homepage": "https://github.com/xsoulspace/vuefer#readme", + "main": "./dist/vuefer.umd.js", + "module": "./dist/vuefer.es.js", + "exports": { + ".": { + "import": "./dist/vuefer.es.js", + "require": "./dist/vuefer.umd.js" + } }, - "main": "./dist/vft.common.js", "files": [ - "dist/*" + "dist" ], "typings": "./dist/index.d.ts", + "scripts": { + "dev": "vite", + "build": "vite build", + "serve": "vite preview", + "upgrade": "yarn yarn-upgrade-all add vue@next ant-design-vue@next", + "lint": "eslint --ext .ts,vue --ignore-path .gitignore ." + }, + "browserslist": { + "production": [ + ">0.2%", + "not dead", + "not op_mini all" + ], + "development": [ + "last 1 chrome version", + "last 1 firefox version", + "last 1 safari version" + ] + }, "dependencies": { - "core-js": "^3.6.5", - "@tailwindcss/postcss7-compat": "^2.0.3", - "postcss": "^7", - "tailwindcss": "npm:@tailwindcss/postcss7-compat", - "vue": "^3.0.5", - "vue3-virtual-scroller": "^0.2.1", - "vue-grid-layout": "3.0.0-beta1" + "tailwindcss": "^2.0.3", + "vue": "^3.0.6", + "vue-grid-layout": "^3.0.0-beta1", + "vue3-virtual-scroller": "^0.2.1" }, "devDependencies": { - "@types/jest": "^26.0.20", - "@typescript-eslint/eslint-plugin": "^4.15.1", - "@typescript-eslint/parser": "^4.15.1", - "@vue/cli-plugin-babel": "^4.5.11", - "@vue/cli-plugin-e2e-cypress": "^4.5.11", - "@vue/cli-plugin-eslint": "^4.5.11", - "@vue/cli-plugin-typescript": "^4.5.11", - "@vue/cli-plugin-unit-jest": "^4.5.11", - "@vue/cli-service": "^4.5.11", - "@vue/compiler-sfc": "^3.0.0", + "@types/node": "^14.14.31", + "@typescript-eslint/eslint-plugin": "^4.15.2", + "@typescript-eslint/parser": "^4.15.2", + "@vitejs/plugin-vue": "^1.1.4", + "@vitejs/plugin-vue-jsx": "^1.1.2", + "@vue/compiler-sfc": "^3.0.5", "@vue/eslint-config-prettier": "^6.0.0", "@vue/eslint-config-typescript": "^7.0.0", - "@vue/test-utils": "^2.0.0-0", - "eslint": "^7.20.0", - "autoprefixer": "^9", - "eslint-plugin-prettier": "^3.1.3", - "eslint-plugin-vue": "^7.0.0-0", + "autoprefixer": "^10.2.4", + "eslint": "^7.21.0", + "eslint-plugin-prettier": "^3.3.1", + "eslint-plugin-vue": "^7.6.0", + "husky": "^5.1.2", "lint-staged": "^10.5.4", "prettier": "^2.2.1", - "sass": "^1.26.5", - "sass-loader": "^10.1.1", - "typescript": "^4.1.5", - "vue-jest": "^5.0.0-0" - }, - "gitHooks": { - "pre-commit": "lint-staged" - }, - "lint-staged": { - "*.{js,jsx,vue,ts,tsx}": [ - "vue-cli-service lint", - "git add" - ] + "rollup-plugin-copy": "^3.4.0", + "rollup-plugin-typescript2": "^0.30.0", + "sass": "^1.32.8", + "tsc-prog": "^2.2.1", + "typescript": "^4.2.2", + "vite": "^2.0.1", + "yarn-upgrade-all": "^0.5.4" } } diff --git a/packagelint.md b/packagelint.md new file mode 100644 index 0000000..dcfadda --- /dev/null +++ b/packagelint.md @@ -0,0 +1,11 @@ +``` + "husky": { + "hooks": { + "pre-commit": "lint-staged" + } + }, + "lint-staged": { + "*.{ts,,tsx,vue}": "eslint --fix", + "*": "prettier -w -u" + } +``` diff --git a/public/index.html b/public/index.html deleted file mode 100644 index 5f1393c..0000000 --- a/public/index.html +++ /dev/null @@ -1,21 +0,0 @@ - - - - - - - - <%= htmlWebpackPlugin.options.title %> - - - -
- - - diff --git a/public/robots.txt b/public/robots.txt deleted file mode 100644 index eb05362..0000000 --- a/public/robots.txt +++ /dev/null @@ -1,2 +0,0 @@ -User-agent: * -Disallow: diff --git a/src/abstract/Wrap.ts b/src/abstract/Wrap.ts deleted file mode 100644 index e69de29..0000000 diff --git a/src/components/AppBar.tsx b/src/components/AppBar.tsx deleted file mode 100644 index e69de29..0000000 diff --git a/src/components/Card.tsx b/src/components/Card.tsx deleted file mode 100644 index e69de29..0000000 diff --git a/src/components/Drawer.tsx b/src/components/Drawer.tsx deleted file mode 100644 index e69de29..0000000 diff --git a/src/components/Flexible.tsx b/src/components/Flexible.tsx deleted file mode 100644 index e69de29..0000000 diff --git a/src/components/GridViewBuilder.vue b/src/components/GridViewBuilder.vue deleted file mode 100644 index 8c6dadc..0000000 --- a/src/components/GridViewBuilder.vue +++ /dev/null @@ -1,189 +0,0 @@ - - diff --git a/src/components/ListViewBuilder.vue b/src/components/ListViewBuilder.vue deleted file mode 100644 index ceb0c68..0000000 --- a/src/components/ListViewBuilder.vue +++ /dev/null @@ -1,67 +0,0 @@ - - - diff --git a/src/components/Opacity.tsx b/src/components/Opacity.tsx deleted file mode 100644 index 4fa0fea..0000000 --- a/src/components/Opacity.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import { Component, defineComponent, h } from 'vue' -import { Maybe } from '../abstract/BasicTypes' -import { Key } from '../abstract/Key' -import { OpacityDecoration } from '../abstract/OpacityDecoration' - -interface OpacityI { - child: Component - key?: Maybe - opacity: OpacityDecoration -} - -export const Opacity = ({ child, key, opacity }: OpacityI) => { - return defineComponent({ - name: 'Opacity', - render() { - return h( - 'div', - { - class: opacity.css, - }, - [h(child)] - ) - }, - }) -} diff --git a/src/components/Provider.tsx b/src/components/Provider.tsx deleted file mode 100644 index 1821ad9..0000000 --- a/src/components/Provider.tsx +++ /dev/null @@ -1,103 +0,0 @@ -import { - Component, - defineComponent, - h, - inject, - onBeforeMount, - provide, - reactive, -} from 'vue' -import { Constructor, Maybe } from '../abstract/BasicTypes' -interface MultiProviderI { - models: Maybe>[] - child: Component -} -/** - * - * Let's suppose we have a model: - * - * ```typescript - * export class Hero { - * constructor(public name: string) {} - * } - * export class HeroesModel { - * heroes = reactive[]>([]) - * add(hero: Hero) { - * this.heroes.push(hero) - * } - * get count() { - * return this.heroes.length - * } - * } - * ``` - * - * Create Provider on top of tree - * - * ```typescript - * MultiProvider.create({ - * models: [HeroesModel], - * child: wrapperApp(), - * }) - * ``` - * - * And somewhere in tree just call - * - * ```typescript - * const heroModel = MultiProvider.get(HeroesModel) - * ``` - * - */ -export class MultiProvider { - static allProvidersSymbols = new Map< - CallableFunction['name'] | Constructor['name'], - symbol - >() - - static create({ models, child }: MultiProviderI) { - // eslint-disable-next-line @typescript-eslint/no-this-alias - const providerThis = this - return defineComponent({ - name: 'MultiProvider', - setup() { - const initModels = reactive({}) - - onBeforeMount(() => { - for (const model of models) { - if (model == null) throw Error(`${model} cannot be null!`) - const newProviderSymbol = Symbol() - const finalModel = (() => { - try { - // lets suppose model is newable function - const newableModel = model as Constructor - const newModel = new newableModel() - return newModel - } catch (error) { - // try as callable - const callableModel = model as CallableFunction - const newFunctionModel = callableModel() - return newFunctionModel - } - })() - provide(newProviderSymbol, finalModel) - providerThis.allProvidersSymbols.set(model.name, newProviderSymbol) - initModels[model.name] = finalModel - } - }) - return { initModels } - }, - render() { - return h(child) - }, - }) - } - static get = Constructor>( - modelName: P - ) { - const symbol = this.allProvidersSymbols.get(modelName.name) - if (symbol == null) throw Error(`${modelName} doen't have a provider!`) - const model: Maybe = inject(symbol) - if (model == null) - throw new Error(`${modelName} have a provider but return null:(!`) - return model - } -} diff --git a/src/components/Scaffold.tsx b/src/components/Scaffold.tsx deleted file mode 100644 index af94b69..0000000 --- a/src/components/Scaffold.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { Component, defineComponent, h } from 'vue' - -export const Scaffold = ({ body }: { body: Component }) => { - return defineComponent({ - name: 'Scaffold', - render() { - return h('div', { class: '' }, h(body)) - }, - }) -} diff --git a/src/components/VueTeleport.vue b/src/components/VueTeleport.vue deleted file mode 100644 index 4a95a46..0000000 --- a/src/components/VueTeleport.vue +++ /dev/null @@ -1,16 +0,0 @@ - - diff --git a/src/example/AppProvider.tsx b/src/example/AppProvider.tsx deleted file mode 100644 index 1965b16..0000000 --- a/src/example/AppProvider.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { NavigationController } from '@/abstract' -import { MultiProvider, Navigation } from '@/components' -import { h } from 'vue' -import { WrapperApp } from '../example/App' -import { HeroesModel } from './HeroesModel' -export const AppProvider = { - setup() { - return () => - h( - MultiProvider.create({ - models: [HeroesModel, NavigationController], - child: Navigation({ - child: WrapperApp(), - }), - }) - ) - }, -} diff --git a/src/main.ts b/src/main.ts deleted file mode 100644 index 12817a9..0000000 --- a/src/main.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { createApp } from 'vue' -import vueGridLayout from 'vue-grid-layout' -import 'vue3-virtual-scroller/dist/vue3-virtual-scroller.css' -import './components/index.scss' -import { AppProvider } from './example/AppProvider' -import './tailwind.css' - -createApp(AppProvider).use(vueGridLayout).mount('#app') diff --git a/src/shims-vue.d.ts b/src/shims-vue.d.ts deleted file mode 100644 index b062ae4..0000000 --- a/src/shims-vue.d.ts +++ /dev/null @@ -1,8 +0,0 @@ -/* eslint-disable */ -declare module "*.vue" { - import type { DefineComponent } from "vue"; - const component: DefineComponent<{}, {}, any>; - export default component; -} - -declare module "vue3-virtual-scroller"; diff --git a/tailwind.config.js b/tailwind.config.js index 3d4645b..85abf1f 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,6 +1,6 @@ module.exports = { // purge: ["./public/**/*.html", "./src/**/*.{vue,js,ts,jsx,tsx}"], - darkMode: 'class', // or 'media' or 'class' + darkMode: false, // or 'media' or 'class' theme: { extend: {}, }, diff --git a/tests/e2e/.eslintrc.js b/tests/e2e/.eslintrc.js deleted file mode 100644 index a3e436b..0000000 --- a/tests/e2e/.eslintrc.js +++ /dev/null @@ -1,10 +0,0 @@ -module.exports = { - plugins: ['cypress'], - env: { - mocha: true, - 'cypress/globals': true, - }, - rules: { - strict: 'off', - }, -} diff --git a/tests/e2e/plugins/index.js b/tests/e2e/plugins/index.js deleted file mode 100644 index 3cd3f22..0000000 --- a/tests/e2e/plugins/index.js +++ /dev/null @@ -1,25 +0,0 @@ -/* eslint-disable arrow-body-style */ -// https://docs.cypress.io/guides/guides/plugins-guide.html - -// if you need a custom webpack configuration you can uncomment the following import -// and then use the `file:preprocessor` event -// as explained in the cypress docs -// https://docs.cypress.io/api/plugins/preprocessors-api.html#Examples - -// /* eslint-disable import/no-extraneous-dependencies, global-require */ -// const webpack = require('@cypress/webpack-preprocessor') - -module.exports = (on, config) => { - // on('file:preprocessor', webpack({ - // webpackOptions: require('@vue/cli-service/webpack.config'), - // watchOptions: {} - // })) - - return Object.assign({}, config, { - fixturesFolder: 'tests/e2e/fixtures', - integrationFolder: 'tests/e2e/specs', - screenshotsFolder: 'tests/e2e/screenshots', - videosFolder: 'tests/e2e/videos', - supportFile: 'tests/e2e/support/index.js', - }) -} diff --git a/tests/e2e/specs/test.js b/tests/e2e/specs/test.js deleted file mode 100644 index 479bea8..0000000 --- a/tests/e2e/specs/test.js +++ /dev/null @@ -1,8 +0,0 @@ -// https://docs.cypress.io/api/introduction/api.html - -describe('My First Test', () => { - it('Visits the app root url', () => { - cy.visit('/') - cy.contains('h1', 'Welcome to Your Vue.js + TypeScript App') - }) -}) diff --git a/tests/e2e/support/commands.js b/tests/e2e/support/commands.js deleted file mode 100644 index c1f5a77..0000000 --- a/tests/e2e/support/commands.js +++ /dev/null @@ -1,25 +0,0 @@ -// *********************************************** -// This example commands.js shows you how to -// create various custom commands and overwrite -// existing commands. -// -// For more comprehensive examples of custom -// commands please read more here: -// https://on.cypress.io/custom-commands -// *********************************************** -// -// -// -- This is a parent command -- -// Cypress.Commands.add("login", (email, password) => { ... }) -// -// -// -- This is a child command -- -// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... }) -// -// -// -- This is a dual command -- -// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... }) -// -// -// -- This is will overwrite an existing command -- -// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... }) diff --git a/tests/e2e/support/index.js b/tests/e2e/support/index.js deleted file mode 100644 index d68db96..0000000 --- a/tests/e2e/support/index.js +++ /dev/null @@ -1,20 +0,0 @@ -// *********************************************************** -// This example support/index.js is processed and -// loaded automatically before your test files. -// -// This is a great place to put global configuration and -// behavior that modifies Cypress. -// -// You can change the location of this file or turn off -// automatically serving support files with the -// 'supportFile' configuration option. -// -// You can read more here: -// https://on.cypress.io/configuration -// *********************************************************** - -// Import commands.js using ES2015 syntax: -import './commands' - -// Alternatively you can use CommonJS syntax: -// require('./commands') diff --git a/tests/unit/example.spec.ts b/tests/unit/example.spec.ts deleted file mode 100644 index cd032c3..0000000 --- a/tests/unit/example.spec.ts +++ /dev/null @@ -1,12 +0,0 @@ -// import { shallowMount } from "@vue/test-utils"; -// import HelloWorld from "@/components/HelloWorld.vue"; - -// describe("HelloWorld.vue", () => { -// it("renders props.msg when passed", () => { -// const msg = "new message"; -// const wrapper = shallowMount(HelloWorld, { -// props: { msg } -// }); -// expect(wrapper.text()).toMatch(msg); -// }); -// }); diff --git a/tsconfig.json b/tsconfig.json index 73e34d4..5e1b44b 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -2,33 +2,40 @@ "compilerOptions": { "target": "esnext", "module": "esnext", + "moduleResolution": "node", "strict": true, "jsx": "preserve", - "importHelpers": true, "noImplicitAny": false, - "moduleResolution": "node", - "experimentalDecorators": true, - "skipLibCheck": true, - "esModuleInterop": true, - "allowSyntheticDefaultImports": true, "sourceMap": true, + "resolveJsonModule": true, + "esModuleInterop": true, "declaration": true, "baseUrl": ".", - "types": ["webpack-env", "jest", "./src"], + "importHelpers": true, + "skipLibCheck": true, + "allowSyntheticDefaultImports": true, + "allowJs": false, + "noUnusedLocals": true, + "noUnusedParameters": true, + "experimentalDecorators": true, "paths": { - "@/*": ["src/*"] + "@/*": ["example/src/*"] }, "outDir": "dist", + "typeRoots": ["./lib"], "declarationDir": "dist", - "lib": ["esnext", "dom", "dom.iterable", "scripthost"] + "lib": ["esnext", "dom", "dom.iterable", "scripthost"], + "types": ["vite/client", "./lib"] }, + "exclude": ["node_modules", "dist"], "include": [ - "src/**/*.ts", - "src/**/*.d.ts", - "src/**/*.tsx", - "src/**/*.vue" - // "tests/**/*.ts", - // "tests/**/*.tsx" - ], - "exclude": ["node_modules", "dist"] + "lib/**/*.ts", + "lib/**/*.d.ts", + "lib/**/*.tsx", + "lib/**/*.vue", + "example/**/*.ts", + "example/**/*.d.ts", + "example/**/*.tsx", + "example/**/*.vue" + ] } diff --git a/vite.config.ts b/vite.config.ts new file mode 100644 index 0000000..0375b1a --- /dev/null +++ b/vite.config.ts @@ -0,0 +1,60 @@ +import vue from '@vitejs/plugin-vue' +import vueJsx from '@vitejs/plugin-vue-jsx' +import path from 'path' +import ts from 'rollup-plugin-typescript2' +import { defineConfig } from 'vite' +// const copyPlugin = copy({ +// targets: [{ src: 'example/**/*', dest: 'dist/example' }], +// }) +const tsPlugin = ts({ + tsconfig: path.resolve(__dirname, 'tsconfig.json'), + tsconfigOverride: { + compilerOptions: { + declaration: true, + declarationMap: false, + skipLibCheck: true, + }, + exclude: ['**/__tests__', '**/*.spec', 'example'], + }, + clean: true, + abortOnError: false, + rollupCommonJSResolveHack: false, +}) +// https://vitejs.dev/config/ +export default defineConfig({ + resolve: { + alias: { + '@/': path.join(__dirname, 'example/'), + }, + }, + root: './example', + plugins: [ + vue(), + vueJsx({ + // options are passed on to @vue/babel-plugin-jsx + }), + ], + optimizeDeps: { + // include: ['@ant-design/icons-vue'], + }, + build: { + lib: { + entry: path.resolve(__dirname, 'lib/index.ts'), + name: 'vuefer', + }, + rollupOptions: { + // make sure to externalize deps that shouldn't be bundled + // into your library + external: ['vue'], + plugins: [tsPlugin], + output: { + dir: './dist', + // Provide global variables to use in the UMD build + // for externalized deps + globals: { + vue: 'Vue', + }, + }, + }, + }, +}) diff --git a/vue.config.js b/vue.config.js deleted file mode 100644 index b0f99cd..0000000 --- a/vue.config.js +++ /dev/null @@ -1,30 +0,0 @@ -/** - * These are some necessary steps changing the default webpack config of the Vue CLI - * that need to be changed in order for TypeScript based components to generate their - * declaration (.d.ts) files. - * Discussed here https://github.com/vuejs/vue-cli/issues/1081 - */ -const fixEmitDeclarationFilesForTypeScript = { - chainWebpack: config => { - if (process.env.NODE_ENV === 'production') { - config.module - .rule('ts') - .use('ts-loader') - .loader('ts-loader') - .tap(options => ({ - ...options, - transpileOnly: false, - happyPackMode: false, - compilerOptions: { - declaration: true, - }, - })) - } - }, - parallel: false, -} - -module.exports = { - ...fixEmitDeclarationFilesForTypeScript, - // some other configuration -}