Presentation layer

Consists of Vue.js components and other UI-related code.
Desktop application is created using Electron.
Event driven as in components simply listens to events from the state and act accordingly.

Structure

/src/ presentation/: Contains all presentation related code including Vue and Electron configurations
- bootstrapping/: Registers Vue global objects including components and plugins.
- components/: Contains all Vue components and their helper classes.
  - Shared/: Contains Vue components and component helpers that are shared across other components.
- styles/: Contains shared styles used throughout different components.
- main.ts: Application entry point that mounts and starts Vue application.
- background.ts: Main process of Electron, started as first thing when app starts.
/public/: Contains static assets that will simply be copied and not go through webpack.
/vue.config.js: Global Vue CLI configurations loaded by @vue/cli-service
/postcss.config.js: PostCSS configurations that are used by Vue CLI internally
/babel.config.js: Babel configurations for polyfills used by @vue/cli-plugin-babel

Components and should use ApplicationFactory singleton to reach the application domain.
Application.ts domain model is the stateless application representation including
- available scripts, collections as defined in collection files
- package information as defined in package.json
📖 See Application data | Application layer where application data is parsed and compiled.

Stateful components mutate or/and react to state changes in ApplicationContext.
Stateless components that does not handle state extends Vue
Stateful components that depends on the collection state such as user selection, search queries and more extends StatefulVue
The single source of truth is a singleton of the state created and made available to presentation layer by StatefulVue
StatefulVue includes abstract handleCollectionState that is fired once the component is loaded and also each time collection is changed.
Do not forget to subscribe from events when component is destroyed or if needed collection is changed.
- 💡 events in base class StatefulVue makes lifecycling easier
📖 See Application state | Application layer where the state is implemented using using state pattern.

Dialog.vue is a shared component that can be used to show modal windows
Simply wrap the content inside of its slot and call .show() method on its reference.

Example:

  <Dialog ref="testDialog">
    <div>Hello world</div>
  </Dialog>
  <div @click="$refs.testDialog.show()">Show dialog</div>