npm package: @incom/create-widget-component
Description: Helping package to create new vue components
Author: Gormartsen
Latest version: 1.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

1. Create repository on github:InComNetworking . Example is `vue-widget-text`.
  Replace **name** with your component name. like `vue-widget-text`

2. Clone repository localy.

3. 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.