Add folder structure

This commit is contained in:
rijkvanzanten
2020-02-05 15:07:20 -05:00
parent 8573e61015
commit ac17f3870f
10 changed files with 100 additions and 0 deletions

3
src/assets/readme.md Normal file
View File

@@ -0,0 +1,3 @@
# Assets
Static assets that are used in the app. Primarily used for logos and fonts.

19
src/components/readme.md Normal file
View File

@@ -0,0 +1,19 @@
# Components
Components are custom elements that can reused in various other places.
## Storybook / Tests
Every component should have an entry in Storybook, and should have unit tests where appropriate.
## Naming
Components must always have a `-` in the name. This makes sure we don't run into any conflicts with HTML element names.
## Base Components
The core-most base-components are prefixed with `v-` (for example `v-icon` and `v-button`). These components can not rely on any global store.
## Private Components
Every now and again, it makes sense to split up a bigger component in smaller sub-parts for code maintainability and organization reasons. These "internal private components" are prefixed with a `_` and should never be used standalone.

View File

@@ -0,0 +1,50 @@
# Compositions
Compositions are reusable snippets of functionality that can be used in Vue components.
## Table of Contents
* [Event Listener](#event-listener)
* [Window Size](#window-size)
## Event Listener
The event listener composition allows you to bound event listeners to global elements.
**Note:** You should rely on Vue's event handlers like `@click` whenever possible. This composition acts as an escape hatch for triggering things based on out-of-component events.
The composition removes the event handler whenever the component is unmounted.
### Usage
```js
import { createComponent } from '@vue/composition-api';
import useEventListener from '@/compositions/event-listener';
export default createComponent({
setup() {
useEventListener(window, 'scroll', onScroll);
function onScroll(event) {
console.log(event);
}
}
});
```
## Window Size
Returns a `ref` of `width` and `height` of the current window size. Updates the value on window resizes.
### Usage
```js
import { createComponent } from '@vue/composition-api';
import useWindowSize from '@/compositions/window-size';
export default createComponent({
setup() {
const { width, height } = useWindowSize();
}
});
```

3
src/interfaces/readme.md Normal file
View File

@@ -0,0 +1,3 @@
# Interfaces
Interfaces are the way of inputting, editing and viewing data. The most easy way to understand interface is a datepicker. It allows you to represent the date in specified format & you can validate the inputs. It renders the date in better way by providing a different UI than just a normal text. In Database terms, interface represents the column's value.

3
src/lang/readme.md Normal file
View File

@@ -0,0 +1,3 @@
# Lang (i18n)
Contains the vue-i18n configuration and constructor, and the actual translation files for each language. The language translations themselves are managed by [Crowdin](https://locales.directus.io).

3
src/layouts/readme.md Normal file
View File

@@ -0,0 +1,3 @@
# Layouts
Layouts are different ways to view and interact with collection data.

3
src/modules/readme.md Normal file
View File

@@ -0,0 +1,3 @@
# Modules
Modules are the top-level "sections" of the application. Each module has its own navigation and pages.

4
src/stores/readme.md Normal file
View File

@@ -0,0 +1,4 @@
# Stores
Global data stores that can be used to access data that's used in multiple other components. For example the available collections within the current project.

5
src/styles/readme.md Normal file
View File

@@ -0,0 +1,5 @@
# Styles
The global styles of the application. Even though everything is based around scoped styles in the components, there's still a need to have a certain set of global styles. Most importantly the global reset ([_base.scss](./_base.scss)) and CSS Custom Properties (variables) ([_variables.scss](./_variables.scss)).
There are a couple of plugins (v-tooltip / codemirror / etc) that expect their styles to be global. This folder can be used for that as well.

7
src/utils/readme.md Normal file
View File

@@ -0,0 +1,7 @@
# Utils
Various utility functions that can be reused across components.
## Testing
Please make sure that new utils have unit tests where appropriate.