npm package: @gatship/gs-components
Description: GAT-Ship Vue 2 components
Latest version: 0.1.23

# gs-components

Vue 2 component library v1

This plugin library comes with a set of components and mixins for vue 2.

# Requirements
latest vuetify 2 version.
latest vue 2 version (2.7.14 or higher)

## Recommended IDE Setup

[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).

## Type Support for `.vue` Imports in TS

TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.

If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:

1. Disable the built-in TypeScript Extension
   1. Run `Extensions: Show Built-in Extensions` from VSCode's command palette
   2. Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.

## Adding the plugin exsisting project

1. npm i @gatship/gs-components

2. import the plugin in main.js/main.ts

3. call the install function with the Vue instance as an argument.

main.js / main.ts
```js
import Vue from 'vue';
import App from './App.vue';
import vuetify from './plugins/vuetify';
// The gsComponents import
import gsComponents from './gat-components/index';

// Installing the gsComponents plugin.
gsComponents.install(Vue);

new Vue({
  vuetify,
  render: (h) => h(App),
}).$mount('#app');
```
## Adding intellisense if using typescript

1. Create a components.d.ts file in your src directory.
2. copy/paste the content below into the components.d.ts

components.d.ts
```ts
declare module 'vue' {
  export interface GlobalComponents {
    GatButton: typeof import('@gatship/gs-components')['GatButton'];
    GatButtonGroup: typeof import('@gatship/gs-components')['GatButtonGroup'];
    GatDialog: typeof import('@gatship/gs-components')['GatDialog'];
    GatGrid: typeof import('@gatship/gs-components')['GatGrid'];
    GatEdit: typeof import('@gatship/gs-components')['GatEdit'];
    GatSelect: typeof import('@gatship/gs-components')['GatSelect'];
    GatMultiSelect: typeof import('@gatship/gs-components')['GatMultiSelect'];
    GatBottomPanel: typeof import('@gatship/gs-components')['GatBottomPanel'];
    GatCompactField: typeof import('@gatship/gs-components')['GatCompactField'];
    GatFieldSpacer: typeof import('@gatship/gs-components')['GatFieldSpacer'];
    GatFlex: typeof import('@gatship/gs-components')['GatFlex'];
    GatForm: typeof import('@gatship/gs-components')['GatForm'];
    GatGroup: typeof import('@gatship/gs-components')['GatGroup'];
    GatSubGroup: typeof import('@gatship/gs-components')['GatSubGroup'];
    RecordPresenter: typeof import('@gatship/gs-components')['RecordPresenter'];
    GatLookupEdit: typeof import('@gatship/gs-components')['GatLookupEdit'];
    GatTab: typeof import('@gatship/gs-components')['GatTab'];
    GatReloadBtn: typeof import('@gatship/gs-components')['GatReloadBtn'];
  }
}

export {};
```

## Project setup
```
npm install
```

### Compiles and hot-reloads for development
```
npm run serve
```

### Compiles and minifies for production
```
npm run build
```

### Run your unit tests
```
npm run test:unit
```

### Run your end-to-end tests
```
npm run test:e2e
```

### Lints and fixes files
```
npm run lint
```

### Publish to npm
```
npm run pub
```

### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).