github-mirror/BookStack
2
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-06-18 18:36:07 +08:00
Code Issues Actions 17 Packages Projects Releases Wiki Activity

Updated js dev docs with latest component changes

Browse Source
This commit is contained in:
Dan Brown
2022-11-16 16:02:31 +00:00
parent be736b3939
commit 05a24ea355
2 changed files with 25 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
dev/docs/javascript-code.md
View File

@ -24,7 +24,7 @@ class Dropdown {
All usage of $refs, $manyRefs and $opts should be done at the top of the `setup` function so any requirements can be easily seen. All usage of $refs, $manyRefs and $opts should be done at the top of the `setup` function so any requirements can be easily seen.
Once defined, the component has to be registered for use. This is done in the `resources/js/components/index.js` file. You'll need to import the component class then add it to `componentMapping` object, following the pattern of other components. Once defined, the component has to be registered for use. This is done in the `resources/js/components/index.js` file by defining an additional export, following the pattern of other components.
### Using a Component in HTML ### Using a Component in HTML
@ -80,9 +80,9 @@ Will result with `this.$opts` being:
} }
``` ```
#### Component Properties #### Component Properties & Methods
A component has the below shown properties available for use. As mentioned above, most of these should be used within the `setup()` function to make the requirements/dependencies of the component clear. A component has the below shown properties & methods available for use. As mentioned above, most of these should be used within the `setup()` function to make the requirements/dependencies of the component clear.
```javascript ```javascript
// The root element that the compontent has been applied to. // The root element that the compontent has been applied to.
@ -98,6 +98,15 @@ this.$manyRefs
// Options defined for the compontent. // Options defined for the compontent.
this.$opts this.$opts
// The registered name of the component, usually kebab-case.
this.$name
// Emit a custom event from this component.
// Will be bubbled up from the dom element this is registered on,
// as a custom event with the name `<elementName>-<eventName>`,
// with the provided data in the event detail.
this.$emit(eventName, data = {})
``` ```
## Global JavaScript Helpers ## Global JavaScript Helpers
@ -132,7 +141,16 @@ window.trans_plural(translationString, count, replacements);
// Component System // Component System
// Parse and initialise any components from the given root el down. // Parse and initialise any components from the given root el down.
window.components.init(rootEl); window.$components.init(rootEl);
// Get the first active component of the given name // Register component models to be used by the component system.
window.components.first(name); // Takes a mapping of classes/constructors keyed by component names.
// Names will be converted to kebab-case.
window.$components.register(mapping);
// Get the first active component of the given name.
window.$components.first(name);
// Get all the active components of the given name.
window.$components.get(name);
// Get the first active component of the given name that's been
// created on the given element.
window.$components.firstOnElement(element, name);
``` ```

2
resources/js/services/components.js
View File

@ -158,7 +158,7 @@ export function first(name) {
* @param {String} name * @param {String} name
* @returns {Component[]} * @returns {Component[]}
*/ */
export function get(name = '') { export function get(name) {
return components[name] || []; return components[name] || [];
} }