mirror of
https://github.com/directus/directus.git
synced 2026-02-08 20:44:57 -05:00
Add folder structure
This commit is contained in:
3
src/assets/readme.md
Normal file
3
src/assets/readme.md
Normal 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
19
src/components/readme.md
Normal 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.
|
||||
50
src/compositions/readme.md
Normal file
50
src/compositions/readme.md
Normal 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
3
src/interfaces/readme.md
Normal 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
3
src/lang/readme.md
Normal 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
3
src/layouts/readme.md
Normal file
@@ -0,0 +1,3 @@
|
||||
# Layouts
|
||||
|
||||
Layouts are different ways to view and interact with collection data.
|
||||
3
src/modules/readme.md
Normal file
3
src/modules/readme.md
Normal 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
4
src/stores/readme.md
Normal 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
5
src/styles/readme.md
Normal 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
7
src/utils/readme.md
Normal 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.
|
||||
Reference in New Issue
Block a user