Merge pull request #18 from anexia-it/feat/typescript-types

Feat/typescript types

docs/faq/index.md

@@ -72,4 +72,43 @@ export default {
 
 ### The components don't render correctly after integrating a new version of the *vue-ui-components* library
 
-If you have just installed a new version of the library and your project compiles without any errors but nevertheless your components don't render correctly a solution might be to delete the ```node_modules/``` folder and execute a ```npm install``` after deletion. If you still get some errors, delete your ```node_modules/``` folder and your ```package-lock.json``` file and execute ```npm install``` again.
+If you have just installed a new version of the library and your project compiles without any errors but nevertheless your components don't render correctly a solution might be to delete the ```node_modules/``` folder and execute a ```npm install``` after deletion. If you still get some errors, delete your ```node_modules/``` folder and your ```package-lock.json``` file and execute ```npm install``` again.
+
+### "Property '$anxToast' does not exist on type" when using typescript
+
+When using the [AnxToastPlugin](/#/Plugins/AnxToastPlugin) with *typescript* it might happen, that the following code
+
+```javascript
+<script lang="ts">
+import { Vue, Component } from 'vue-property-decorator'
+
+@Component({})
+export default class Component extends Vue {
+  private mounted() {
+    this.$anxToast.show('Test'); // This causes an error in the IDE
+  }
+}
+</script>
+```
+
+produces the following error in your IDE
+
+```text
+Property '$anxToast' does not exist on type 'Component'.
+```
+
+In this case, you simply have to import the **AnxToastPlugin** in your component, although you are not using it directly. This will declare the correct types for typescript and will fix the error in the IDE.
+
+```javascript
+<script lang="ts">
+import { Vue, Component } from 'vue-property-decorator'
+import { AnxToastPlugin } from '@anexia/vue-ui-components' // This fixes the error in the IDE
+
+@Component({})
+export default class Component extends Vue {
+  private mounted() {
+    this.$anxToast.show('Test');
+  }
+}
+</script>
+```

docs/plugins/anx-icons.md

@@ -1,3 +1,3 @@
 Our library contains a set of more than 150 icons. To make the usage of all those icons easier, the *AnxIconsPlugin* has been implemented.  
 
-The plugin automatically registers all the icons as components with inline SVG in your application. You don't have to care about import SVG files and can simply render all the icons. For a more detailed information and a documentation on how to use this plugin pleaser refer to the [AnxIcon Component Documentation](/#/Components?id=anxicon).
+The plugin automatically registers all the icons as components with inline SVG in your application. You don't have to care about import SVG files and can simply render all the icons. For a more detailed information and a documentation on how to use this plugin pleaser refer to the [AnxIcon Component Documentation](/#/Components/AnxIcon).

package.json

@@ -20,12 +20,15 @@
   "main": "lib/anx.common.js",
   "module": "lib/anx.umd.js",
   "style": "lib/anx.css",
+  "types": "src/index.d.ts",
   "files": [
     "lib/*",
     "nuxt/*",
     "src/lib/*",
     "src/assets/scss/_variables*",
-    "index.d.ts"
+    "src/index.d.ts",
+    "src/plugins/**/*.d.ts",
+    "src/components/**/*.d.ts"
   ],
   "peerDependencies": {
     "vue": "^2.6.11"

src/components/index.d.ts

@@ -0,0 +1,70 @@
+import Vue, { Component as VueComponent } from 'vue'
+
+export declare class AnxAlert extends Vue {}
+export declare class AnxButton extends Vue {}
+export declare class AnxCard extends Vue {}
+export declare class AnxCheckbox extends Vue {}
+export declare class AnxContact extends Vue {}
+export declare class AnxContainer extends Vue {}
+export declare class AnxContent extends Vue {}
+export declare class AnxCrudTable extends Vue {}
+export declare class AnxFooter extends Vue {}
+export declare class AnxForm extends Vue {}
+export declare class AnxFormContainer extends Vue {}
+export declare class AnxGlobal extends Vue {}
+export declare class AnxHeader extends Vue {}
+export declare class AnxHrLine extends Vue {}
+export declare class AnxIcon extends Vue {}
+export declare class AnxInput extends Vue {}
+export declare class AnxLink extends Vue {}
+export declare class AnxList extends Vue {}
+export declare class AnxLogin extends Vue {}
+export declare class AnxLanguageSwitcher extends Vue {}
+export declare class AnxModal extends Vue {}
+export declare class AnxParagraph extends Vue {}
+export declare class AnxReadonly extends Vue {}
+export declare class AnxSelect extends Vue {}
+export declare class AnxTable extends Vue {}
+export declare class AnxTableCol extends Vue {}
+export declare class AnxTableContainer extends Vue {}
+export declare class AnxTableRow extends Vue {}
+export declare class AnxTextarea extends Vue {}
+export declare class AnxTitle extends Vue {}
+export declare class AnxToast extends Vue {}
+export declare class AnxToaster extends Vue {}
+
+declare const Components: {
+  AnxAlert: VueComponent,
+  AnxButton: VueComponent,
+  AnxCard: VueComponent,
+  AnxCheckbox: VueComponent,
+  AnxContact: VueComponent,
+  AnxContainer: VueComponent,
+  AnxContent: VueComponent,
+  AnxCrudTable: VueComponent,
+  AnxFooter: VueComponent,
+  AnxForm: VueComponent,
+  AnxFormContainer: VueComponent,
+  AnxGlobal: VueComponent,
+  AnxHeader: VueComponent,
+  AnxHrLine: VueComponent,
+  AnxIcon: VueComponent,
+  AnxInput: VueComponent,
+  AnxLanguageSwitcher: VueComponent,
+  AnxLink: VueComponent,
+  AnxList: VueComponent,
+  AnxLogin: VueComponent,
+  AnxModal: VueComponent,
+  AnxParagraph: VueComponent,
+  AnxReadonly: VueComponent,
+  AnxSelect: VueComponent,
+  AnxTable: VueComponent,
+  AnxTableCol: VueComponent,
+  AnxTableContainer: VueComponent,
+  AnxTableRow: VueComponent,
+  AnxTextarea: VueComponent,
+  AnxTitle: VueComponent,
+  AnxToast: VueComponent
+}
+
+export default Components

src/index.d.ts

@@ -0,0 +1,18 @@
+import Vue from 'vue'
+import Components from './components'
+import { AnxIconsPlugin, AnxIconsNames, AnxToastPlugin, AnxVariablesPlugin } from './plugins'
+
+declare module '@anexia/vue-ui-components';
+
+declare const UIPlugin: {
+    install(_Vue: typeof Vue, options?: {}): void;
+}
+
+// Exporting all the components
+export * from './components'
+
+// Exporting plugins separately
+export { AnxIconsNames, AnxIconsPlugin, AnxToastPlugin, AnxVariablesPlugin, Components }
+
+// Default export is the UIPlugin shipping with all plugins
+export default UIPlugin

src/plugins/toast/index.d.ts

@@ -1,9 +1,14 @@
-import { PluginObject } from "vue";
+import { PluginObject, Component as VueComponent } from "vue";
 
 // Declaration
 declare module "vue/types/vue" {
   interface Vue {
-    $anxToast: Record<string, any>;
+    $anxToast: {
+      show: (message: string, options?: {}) => VueComponent
+      success: (message: string, options?: {}) => VueComponent
+      warning: (message: string, options?: {}) => VueComponent
+      error: (message: string, options?: {}) => VueComponent
+    };
   }
 }