Copy paste a long text only with the mouse doesn't resize itself.

(P408-123)

Originally posted by @jacob1992 in https://github.com/ulaval/modul-components/diffs

This component should allow to drag and drop a HTML content type element on a page and to reorder these dropped elements.

Reduce the size of the triangle in the dropdown menu.

(P408-106)

A progress bar to be used when uploading files.

(P408-128)

• [ x] Provide a description of the issue
  Hi guys, I'd like to use the m-icon component with my own icons, but I can't find a way to do it...
  On the doc, there's a link to explain how to do it but it redirects to a 404 page...

I'm able to add a sprite using SpriteService, but it doesn't return the created id so I could use it in the m-icon component...

I could create a MR with addSprite returning the id if you think it's a good way to use it. Otherwise, could you explain to me what I should do?

Developers are forced to cast services returned value from Promise (Promise)

The font used with the button isn't the right one. It's supposed to be Source Sans Pro and it actually shows Arial.

<m-button v-on:onClick="createSomething">Create something</m-button>

should be
<m-button v-on:click="createSomething">Create something</m-button>
then we can use
<m-button @click="createSomething">Create something</m-button>

ref: P408-2

@ulaval/modul-components

Issue Checklist

• [x ] Provide a description of the issue
  Lorsqu'on fournit une valeur booléenne à la prop open du component MAccordion, l'ouverture ou la fermeture du component ne devrait déprendre que de cette valeur.

• [x ] Provide a step by step way to reproduce the problem with screenshot or video

1. Passez la valeur "false" à la prop open
2. Clickez sur l'accordéon

L'accordéon s'ouvre tout de même alors qu'il ne devrait pas.

• [x ] Provide the expected behaviour
  L'accordéon ne devrait pas s'ouvrir.

• [x ] I'm not an internal contributor

The label with the textarea isn't aligned at the top of the field.

Looks like the binary is used instead of the resource itself:

ref: P408-34, P408-7

• [x ] Provide a description of the issue
  La directive v-m-i18n avec attribut placeholder ne place pas l'attribut au bon endroit avec m-textfield ou m-textarea
• [x ] Provide the expected behaviour
  Le placeholder devrait se mettre sur l'input/textarea a l'intérieur de la div du component

@ulaval/modul-components

Issue Checklist

• [x ] Provide a description of the issue
  En utilisant la librarie vuex-i18n, le component MDatePicker lance l'erreur suivante:

TypeError: this.$i18n.currentLang is not a function
    at VueComponent.MDatepicker.created (datepicker.js?83f9:62)
    at callHook (vue.esm.js?a026:2921)
    at VueComponent.Vue._init (vue.esm.js?a026:4630)
    at new MDatepicker (vue.esm.js?a026:4798)
    at createComponentInstanceForVnode (vue.esm.js?a026:4310)
    at init (vue.esm.js?a026:4131)
    at createComponent (vue.esm.js?a026:5608)
    at createElm (vue.esm.js?a026:5555)
    at createChildren (vue.esm.js?a026:5682)
    at createElm (vue.esm.js?a026:5584)

En effet, l'attribut currentLang n'est pas supporté dans la spécification officielle. On peut facilement résoudre le problème en utilisant l'attribut locale:

    MDatepicker.prototype.created = function () {
    - moment.locale([this.$i18n.currentLang(), 'en-ca']);
    + moment.locale([this.$i18n.locale(), 'en-ca']);
    this.selectedMomentDate = this.valueIsValid() ? moment(this.value) : moment();
    };

If submitting a bug

• [ x] Provide a step by step way to reproduce the problem with screenshot or video

main.ts

Vue.use(VuexI18n.plugin, Store);

const lang = {
    hello: 'Bonjour!'
}

Vue.i18n.add('fr', lang);
Vue.i18n.set('fr');

component.html

...
<m-datepicker :value="today" label="Date"></m-datepicker>
...

component.ts

import moment from 'moment';

export default class Component extends Vue {
...
    public get today() {
        return moment();
    }
...
}

...
    "dependencies": {
        ...
        "@ulaval/modul-components": "^1.0.0-beta.32",
        "moment": "^2.22.1",
        "vuex-i18n": "^1.10.5",
        "@types/vuex-i18n": "^1.7.0",
        ...
    },
...

• Provide the expected behaviour

Ne devrait pas crasher / devrait respecter la spécification officielle.

• [x ] I'm not an internal contributor

console.debug should be replaced by a function that will call the console.debug only if the debug mode is set (in dev mode for example)

P408-126

See https://router.vuejs.org/en/api/router-link.html

Setting append prop always appends the relative path to the current path. For example, assuming we are navigating from /a to a relative link b, without append we will end up at /b, but with append we will end up at /a/b.

(P408-121)

I would be nice for the m-link component to support named routes.

Exemple from vue router-link:

<!-- named route -->
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

https://router.vuejs.org/en/api/router-link.html

Should be possible to turn off though.

Some external partners wish to use modul as a library since they don't bundle their application with webpack for instance.

A POC has been made here.

However, it looks like some of our services ($http for example) conflicts with other Vue libraries. We might need to resolve these conflicts by adding a prefix or group the modul services:

$m-http
$m-i18n

or

$modul.http
$modul.i18n

The descenders, the part of a character (g, j, p, q, y) that descends below the baseline, are not visible in the text area.

Boilerplate script (add component files, meta, etc.)

@ulaval/modul-components

Issue Checklist

• [ x] Provide a description of the issue

Lors de l'initialisation du component m-datepicker, la date passée au prop value n'est pas affichée dans l'input. En effet, on doit forcer la mise à jour via l'interface. On peut régler le problème de la façon suivante:

datepicker.js

    MDatepicker.prototype.created = function () {
        moment.locale([this.$i18n.currentLang(), 'en-ca']);
        this.selectedMomentDate = this.valueIsValid() ? moment(this.value) : moment();

        + if(this.value && this.valueIsValid()) {
        +   this.as().internalValue = this.value;
        + }
    };

If submitting a bug

• [x ] Provide a step by step way to reproduce the problem with screenshot or video

component.ts

import moment from 'moment';

@WithRender
@Component
export default class Component extends props {
    data: Object = {
        billingDate: moment()
    }
}

component.html

<div>
    <m-datepicker :value="data.billingDate" label="Billing date"></m-datepicker>
</div>

• [ x] Provide the expected behaviour

On devrait initialement afficher la date reçue via le prop value.

• [x ] I'm not an internal contributor

We would like to have a property which allow us to have the tooltip open by default.

3field component :

• YYYY
• MM
• DD

Can be used independently or jointly.

(P408-104)

Phone number components with 4 country types:

• Canada
• USA
• France
• Other

(P408-103)

@ulaval/modul-components

Issue Checklist

• [x ] Provide a description of the issue
  Lorsque les enfants (MAccordion) d'un composant MAccordionGroup ont un rendu conditionnel, celui-ci lance une exception lorsqu'un des enfants qui, auparavant était affiché, ne l'est plus.

TypeError: Cannot read property 'propOpen' of undefined
    at VueComponent.get (accordion-group.js?2ca6:52)
    at Watcher.get (vue.esm.js?a026:3142)
    at Watcher.evaluate (vue.esm.js?a026:3249)
    at Proxy.computedGetter (vue.esm.js?a026:3507)
    at Proxy.render (accordion-group.html?11af:1)
    at VueComponent.Vue._render (vue.esm.js?a026:4544)
    at VueComponent.updateComponent (vue.esm.js?a026:2788)
    at Watcher.get (vue.esm.js?a026:3142)
    at Watcher.run (vue.esm.js?a026:3219)
    at flushSchedulerQueue (vue.esm.js?a026:2981)

If submitting a bug

• [x ] Provide a step by step way to reproduce the problem with screenshot or video

component.html

<m-accordion-group>
    <m-accordion v-for="item in items">
        <span>{{ item }}</span>
    </m-accordion>
</m-accordion-group>

component.ts

items: Array<string> = ["Foo", "Bar"]

removeItem() {
    this.items.pop();
}

• [ x] Provide the expected behaviour
  On devrait pouvoir ajouter et enlever des accordéons de la liste de façon dynamique. Il serait également bien si on gardait en mémoire l'état de l'accordéon (ouvert ou fermé) à sa réintroduction dans la liste. À noter qu'on peut gérer ce comportement sans utiliser ce composant. On peut donc remettre sa nécessité en question.
• [x ] I'm not an internal contributor

This has been done for m-spinner. Check if the same behavior can be applied to dialogs.

The close-button in sidebar is not displayed in browser Edge when the window is small.

see https://jira.dti.ulaval.ca/browse/ENA2-626

Ex 1: blabla{0} blabla{1}
Ex 2: blabla${myVar1} blabla${myVar2}
Ex 2: blabla%(myVar1)s blabla%(myVar2)

Probably a parser/resolver injection should be a good idea,.

• add prop modifier

• add v-m-i18n directive

• implement sprintf

  • modifying MessagesPluginOptions class to add a parameter format = vsprintf, sprintf
  • modifying Messages.format class to comply with the format parameter

ENA-724

When m-menu-item is used to open m-sidebar, a sidebar is added in Modul.prototype.pushElement stack (line 72) but is immediatly popped in Modul.prototype.popElement (line 78), resulting in the menu being the only element left in the stack. The opposite should occur.

P408-122

A global uploader files

On the beforeDestroy event, getting this error in the console
[Vue warn]: Error in beforeDestroy hook: "NotFoundError: Node was not found"

found in

--->





P408-124

@ulaval/modul-components

Issue Checklist

• [x ] Provide a description of the issue
  Le backdrop n'est pas détruit lorsqu'on utilise un m-spinner (en mode processing) dans un component dont le rendu est conditionnel et que le component se fait détruire.

If submitting a bug

• [x ] Provide a step by step way to reproduce the problem with screenshot or video

parent.html

<div v-if="shouldRenderChild">
    <child></child>
</div>

parent.ts

...
get shouldRenderChild() {
    return this.$store.state.shouldRenderChild;
}
...

child.html

<div>
   <m-spinner v-if="shouldRenderSpinner" :processing="true"></m-spinner>
   <button v-on:click="onClick"></button>
</div>

child.ts

shouldRenderSpinner = false;

onClick() {
    this.shouldRenderSpinner = true;

    setTimeout(() => {
        this.$store.commit('HIDE_CHILD');
    }, 1000)
}

mutations.ts

const mutations = {
    HIDE_CHILD: (state) {
        state.shouldRenderChild = false;
    }
}

• [x ] Provide the expected behaviour

Le backdrop devrait disparaitre lorsque le component se fait détruire. On peut régler le problème de la manière suivante:

spinner.js

MSpinner.prototype.beforeDestroy = function () {
    if (this.processing) {
      + this.removeBackdrop();
        var el = document.getElementById(this.spinnerId);
        if (el) {
            document.body.removeChild(el);
        }
    }
};

• [x ] I'm not an internal contributor

https://github.com/Microsoft/TypeScript/wiki/Using-the-Compiler-API

We should define service typings at one place and import a single file to acces them.

declare module 'vue/types/vue' {
    interface Vue {
        $http: HttpService;
    }
}

If working, we should be able to delete the base Modul class that declare these types.

Guys are using the text area in Prisme and there are alignment issues.

For example, on this page, use the Designer View and click the Add Module link at the bottom of the page. The "Description" field is not aligned.

In addition, when you use the text area in a form with data already pre-populated (here), you do not see the text in the area until you click in the form field, and sometimes you also need to start typing on your keyboard.

Lors de l'ajout de la librairie en tant que dépendance externe dans un projet, le processus usuel d'installation ne fonctionne pas. En effet nous serions supposés pouvoir:

npm install --save @ulaval/modul-components

Dans le fichier d'entrée, de l'application:
import Modul from "@ulaval/modul-component";
import "@ulaval/modul-component/style.min.css";
Vue.use(Modul)

Par la suite, les composants seraient exposés dans l'application. Nous serions également supposés pouvoir importer les composants au besoin plutôt que d'installer la librairie globalement.

Il est cependant impossible de procéder de cette façon puisque:

1. import Modul from "@ulaval/modul-component" retourne undefined alors que Modul devrait être un objet exposant une fonction install
2. Le dossier de la librairie ne possède pas une version minifée du style. En d'autres mots, @ulaval/modul-component/style.min.css n'existe pas.

La seule façon de faire fonctionner la librairie est en incluant les loaders appropriés dans la configuration webpack de l'application développée. En procédant de cette façon, on rencontre plusieurs problèmes:

1. Il est impossible d'utiliser la librairie dans une application qui utilise des single-file-components (la façon la plus commune de développer en Vue). En effet, il est impossible de faire cohabiter vue-loader et vue-template-loader dans un même processus de build.

2. L'installation de la librairie ne respecte pas la façon usuelle de faire (celle décrite plus haut). En effet, on doit plutôt: import Modul from "@ulaval/modul-components/dist/components"; Modul.install(Vue);

3. Il est impossible de choisir les composants à utiliser. En effet, seule une installation globale fonctionne. Cela force également l'installation globale de tous les icônes puisque plusieurs composants les utilisent. Si les icône ne sont pas importés globalement mais que les composants le sont, les composants qui les utilisent ne les affichent pas et on obtient des warnings dans la console.

4. On force l'utilisation de SASS. En effet, il est obligatoire d'importer "@ulaval/modul-components/dist/styles/main.scss" dans le fichier d'entrée de l'application pour que l'ensemble des styles de la librairie se chargent correctement.

Somme toute, il est quasi impossible d'utiliser la librairie en tant que dépendance sans faire d'importants compromis et sans procéder d'une manière non documentée qui est source de nombreux problèmes.

P408-116

Add two states of process progress:

• gray spinner border turns yellow as process progresses
• the process progress percentage is displayed digitally in the center of the spinner circle

(P408-127)