vue-modal-dialogs with Vue 2.5 and TypeScript about vue-modal-dialogs

[hjkcai]

I cannot find out what is happening. Could you please show me the code?

By the way, there is a newer version of vue-modal-dialogs on the way. You can try it by installing vue-modal-dialogs@2. But you need to find out the usages in the examples by yourself. The docs are not ready yet.

[ambotaku]

The problem is, that since 2.5 Vue is not longer a namespace but an interface VueConstructor:
https://alligator.io/vuejs/upgrading-vue-2.5/
like in:

declare module "../vue" {
interface VueConstructor {
//a static property and method
staticProperty: string;
staticMethod(): void;
}
}

So Vue components in the legacy object-notation should look like in this example:

import Vue from "vue";

export default Vue.extend({
    props: ['buttons', 'initial'],
    data() {
        const buttonCount =  Object.keys(this.buttons).length;
        return {
            selected: this.initial,
            classes: buttonStyles(0, buttonCount),
            count: buttonCount
        }
    },
    methods: {
        select(event: Event) {
            let target = <HTMLInputElement>event.target;
            this.$emit('select', target.value);
        },
    }
});

In my code I'm using the more convenient class-notation which is possible with Typescript:

import {Vue, Component, Prop} from "vue-property-decorator";

@Component({})
export default class CarRadioButton extends Vue {
    // vue properties
    @Prop() buttons:any;
    @Prop() initial:string;

    // TS/JS properties
    buttonCount =  Object.keys(this.buttons).length;
    classes:string[] = [];

    // methods
    select(event: Event) {
        let target = <HTMLInputElement>event.target;
        this.$emit('select', target.value);
    }

    // hooks
    created() {
        const idx = Object.keys(this.buttons).indexOf(this.initial);
        if (idx >= 0) {
            this.classes = this.buttonStyles(idx, this.buttonCount);
            this.$emit('select', this.buttons[this.initial]);
        }
    }
}

So, code like ...

export default {
methods: {
cancel () {
this.$close(false)
}
}
}
... won't work any longer with Typescript, e.g. since the prototype of $close is unknown. BTW: this now has always block- context and no longer function context.

So I fear, vue-modal-dialogs currently can't be used in current (class-based) Vue applications.

[hjkcai]

I have reproduced your problem on my machine. I will start to work on it soon. Sorry for your inconvenient.

[ambotaku]

I have reproduced your problem on my machine. I will start to work on it soon. Sorry for your inconvenient.

No - problem - thank You very much. Your library in my opinion is the most versatile, flexible and lean solution for all kind of modals. On the other side since Vue 2.5 many developers will prefer class based components over prototypical based since TypeScript is similar to popular languages like C# or Java.

So the Vue developers themselves are working hard in this direction, e.g. with scaffolding TypeScript projects in upcoming releases.

Allowing an excellent solution for modals as your library is making possible may result in becoming vue-modal-dialogs a standard for this purpose.

[hjkcai]

I am sooooooo happy that you give such an appreciation on my library! I will try to make it perfectly work with TypeScript and Vue.

I came up with the idea of vue-modal-dialogs just because I would like to handle dialogs as easy as alert or confirm is. Controlling modals via a variable is okay but still too complicated. This idea has became real by the help of Promise and async functions.

This library is my very first library. There may be bad designs exist. Could you please tell me something more about its API? There is another discussion in #4. I would like to know more about developers' opinions.

Thanks for your help.

[hjkcai]

I released vue-modal-dialogs 2.0.0 just now. TypeScript support is tested! See 'TypeScript' and 'Migration from 1.x' section in the readme!