@incom/create-widget-component v1.0.7
Create widget component
Provides Building blocks(create basic files and folders required for start and develop. Also provide environment to test this component bare bone) to create a new component which will be shared among all apps.
Template details
Component file src/YourNameComponent.vue
- widget - accept function with first option app or object.
Use
app.$interface.getText
to apply translation options return object:{ name: `Name Of the Widget. Will be visible on a list of widgets`, description: `Widget description, will be visible on AddWidget interface`, icon: `fontawesome icon for sidebar widget list`, settings: `Object with default settings used when widget is dropped or added`, order: `not required`, }
- form - accept function with first option app
Use
app.$interface.getText
to apply translation options return object:{ `NameOfWidgetSettigsOption`: { type: "`TypeOfItem`", attributes: { `Attributes passed to form-component based by type` label: label, describe: describe, placeholder: placeholder, }, /* validate - dynamic validation for provided data paramenters: value - data to validate formData - all form data */ // eslint-disable-next-line no-unused-vars validate: function (value, formData) { if (value === "" || value === undefined) { return { status: false, message: validationMessage }; } return { status: true }; }, }, };
Component file src/translations.js
This is scope based variables. TO use them in code - you use YourNameComponent.VariableName
Instalation
Create repository on github:InComNetworking . Example is
vue-widget-text
. Replace name with your component name. likevue-widget-text
Clone repository localy.
Init default component structure. You have to run this command from folder above your local folder for repository
npm create @incom/widget-component vue-widget-text
Need to install the following packages: github:InComNetworking/create-widget-component Ok to proceed? (y) ? What is the name of the new project vue-widget-text ? How would you descripe the new project Vue component project info Created vue-widget-text/.eslintignore info Created vue-widget-text/.eslintrc.cjs info Created vue-widget-text/.gitattributes info Created vue-widget-text/.editorconfig info Created vue-widget-text/vite.config.js info Created vue-widget-text/package.json info Created vue-widget-text/index.html info Created vue-widget-text/src/index.js info Created vue-widget-text/src/App.vue info Created vue-widget-text/src/vue-widget-component.html info Created vue-widget-text/src/vue-widget-component.scss info Created vue-widget-text/src/main.js info Created vue-widget-text/src/vue-widget-component.vue info Moved vue-widget-text/src/vue-widget-component.vue -> vue-widget-text/src/vue-widget-text.vue info Moved vue-widget-text/src/vue-widget-component.scss -> vue-widget-text/src/vue-widget-text.scss info Moved vue-widget-text/src/vue-widget-component.html -> vue-widget-text/src/vue-widget-text.html success Initialized empty Git repository success Installed packages success Generated into /Users/gor/incomrealestate.com/vue-widget-text
4. Start your local dev server:
cd vue-widget-text npm run dev
VITE v3.0.2 ready in 363 ms
➜ Local: http://localhost:5173/ ➜ Network: use --host to expose
5. Your component code is in src folder file : vue-widget-text.vue
Next files is help files to develop component:
App.vue index.js main.js
6. Will be updated later.