README

`@skoda-dms/component-lib`

Skoda DMS component VUE library

Includes:

components

directives

filters

Usage

Install:

$  npm i

Build:

$ npm run build

Publish to repo:

Commit changes git commit
Make tag git tag *.*.*
Push to repository git push origin master
Publish to NPM npm publish

Link to main project in developement

When you develop new feature and want to update main project in the same time use npm link to create symlink between main project and this library project.

cd ~/projects/skoda-dms-component
npm link  # Step 1.
cd ~/projects/MPOV/VUE
npm link @skoda-dms/component-lib  # Step 2.

# Back to normal dependency
cd  ~/projects/MPOV/VUE
npm uninstall --no-save @skoda-dms/component-lib && npm install

# Clean global Link
cd ~/projects/skoda-dms-componen
npm uninstall

Library

See doc/ directory for api.

Registrations of new component

!!! Important to note that all components, directives and filters must be registered in lib/(components | directives | filters)/names.ts file !!!

Components

Components which extends BaseComponent have access to main project Vuex object via this.$store attribute

Follow file format rules for each type of component:

Components: *.component.ts
Directives: *.directive.ts
Filters: *.filter.ts

AuthComponent //check if user is authentificated, fires success or failed event
auth:success | auth:success
<SKDMSAuthComponent />

PageLoaderComponent // Page loader component
<MpovPageLoader>
    <template #text>
        Loading
    </template>
</MpovPageLoader>

Forms

Forms include basic components and CustomRules

Custom rules can be dfined in components/forms/rules.ts

// Basic form Components
TextBasicComponent - basic text input field
CheckboxBasicComponent - basic checkbox
ListBasicComponent - basic select
CheckboxGroupComponent - multi checkboxes

***TextExternalListComponent***
Text box with popup external list window (list)

| Attribute   | Description                                         |
| ----------- | -----------------------------------------------     |
| host        | Host name including protocol                        |
| tenantPath  | Path to DMS page                                    |
| prop        | Prop name must be unique                            |
| extraParams | Object of route params which will be added to query |

Example:
<MpovTextExternal v-model="..//" prop="..//" host="https://some-tenant.com" tenantPath="/path/to/site"  :extraParams="{ partnerType: 'leasing' }" :placeholder="..//" />

Example with slot prepend text inputs (one or two text fields supported):
<MpovTextExternal v-model="model.criteria1.carTypeDMKPart3" prop="carTypeDMKPart3" :disabled="false" >
    <template #prepend>
        <MpovText v-model="model.criteria1.carTypeDMKPart1" prop="carTypeDMKPar1" />
        <MpovText v-model="model.criteria1.carTypeDMKPart2" prop="carTypeDMKPar2" />
    </template>
</MpovTextExternal>

//Classes
SKDMSBaseFormComponent - abstract class for form manipulation extended by main form component

Directives

demo  // demo directive

Filters

to-upper // demo filter

@skoda-dms/component-lib

Usage no npm install needed!