Ajouter une tâche

Pour ajouter une tâche, nous allons :

Ajouter un bouton flottant en bas de la page PageTaches.vue
Ajouter une boîte de dialogue qui s'affichera au click du nouveau bouton.
Créer un composant TaskDialog.vue qui contiendra le formulaire d'ajout et sera intégrer à la boîte de dialogue.

Bouton flottant

Floating Action Button | Quasar FrameworkQuasar Framework

Utiliser le code ci-dessous pour le bouton:

PageTaches.vue

<template>
  <q-page padding>
    <!-- ... -->
    <q-page-sticky position="bottom" class="q-mb-lg">
      <q-btn fab icon="add" color="primary" />
    </q-page-sticky>
  </q-page>
</template>

Boîte de dialogue

Nous allons utiliser un composant pour la boite de dialogue et non un plugin.

Dialog | Quasar FrameworkQuasar Framework

Récupérer le code de la dialog Basic et l'ajouter après le bouton flottant que nous venons de créer </q-page-sticky>.

<template>
  <q-page padding>
    <!-- ... -->
    <q-dialog v-model="alert">
      <q-card>
        <q-card-section>
          <div class="text-h6">Alert</div>
        </q-card-section>
    
        <q-card-section class="q-pt-none">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum repellendus sit voluptate voluptas eveniet porro. Rerum blanditiis perferendis totam, ea at omnis vel numquam exercitationem aut, natus minima, porro labore.
        </q-card-section>
    
        <q-card-actions align="right">
          <q-btn flat label="OK" color="primary" v-close-popup />
        </q-card-actions>
      </q-card>
    </q-dialog>
  </q-page>
</template>

La dialog utilise une directive v-model pour s'afficher ou se cacher :

<!-- Si alert est vrais, la dialog s'affiche -->
<q-dialog v-model="alert">

Nous allons créer une référence, ref, afficherTaskDialog initialisée à false.

import { ref } from "vue"

// ...

const afficherTaskDialog = ref(false)

Puis, lier cette donnée au v-model de la dialog.

<q-dialog v-model="afficherTaskDialog">

Finalement, au clic du bouton "Ajouter" changer la valeur de afficherTaskDialog à true.

<q-page-sticky position="bottom" class="q-mb-lg">
  <q-btn @click="() => afficherTaskDialog = true"
         fab
         icon="add"
         color="primary" />
</q-page-sticky>

On ajouter encore l'attribut persistent à <q-dialog> pour quelle ne se ferme pas si l'utilisateur clique à coté de la dialog.

<q-dialog
  v-model="afficherTaskDialog"
  persistent
>

Composant `TaskDialog`.vue

Créer le composant src/components/TaskDialog.vue et y couper-coller l'élément <q-card> de la dialog.

<template>
  <q-card>
    <q-card-section>
      <div class="text-h6">Alert</div>
    </q-card-section>

    <q-card-section class="q-pt-none">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum repellendus sit voluptate voluptas eveniet porro. Rerum blanditiis perferendis totam, ea at omnis vel numquam exercitationem aut, natus minima, porro labore.
    </q-card-section>

    <q-card-actions align="right">
      <q-btn flat label="OK" color="primary" v-close-popup />
    </q-card-actions>
  </q-card>
</template>

<script setup>

</script>

<style scoped lang="scss">

</style>

Importer le composant dans PageTaches.vue

Injecter le composant TaskDialog.vue à la page PageTaches.vue. Le nom de la balise contenant un tiret, il faut le mettre sous forme de chaine de caractère en l'entourant de guillemets simples.

import TaskDialog from 'components/TaskDialog.vue'

Ajouter le composant <TaskDialog /> à la dialog.

<q-dialog v-model="afficherTaskDialog">
  <TaskDialog />
</q-dialog>

Le composant s'affiche dans la dialog.

Customisation de la boîte de dialogue

Changer le titre de la dialog

<div class="text-h6">Ajouter une tâche</div>

Bouton de fermeture

Ajout d'un bouton de fermeture dans le coin supérieur droite de la dialog. On va utiliser le même style de bouton que pour la suppression. On y ajoute l'attibut dense et l'icône close.

Button | Quasar FrameworkQuasar Framework

<q-btn
  dense
  flat
  round
  icon="close"
/>

Affichage en ligne

Pour afficher le tire et le bouton sur la même ligne, on ajouter la classe CSS .row à la section.

<q-card-section class="row">

Gestion des esapces

Le titre et le bouton s'affichent sur la même ligne, mais sont trop proches. Pour créer un espace entre le titre et le bouton on va utiliser un composant <q-space /> .

Ce composant est spécialement conçu pour créer des espaces entre les éléments des lignes utilisant la technique CSS Flexbox.

QSpace | Quasar FrameworkQuasar Framework

<q-card-section class="row">
  <div class="text-h6">Ajouter une tâche</div>
  <q-space />
  <q-btn
    dense
    flat
    round
    icon="close"
  />
</q-card-section>

Fermeture

Pour que le bouton ferme la dialog, on va utiliser la directive Quasar v-close-popup, très pratique et facile à utiliser pour fermer tous les éléments flottants.

Close Popup Directive | Quasar FrameworkQuasar Framework

<q-btn
  dense
  flat
  round
  icon="close"
  v-close-popup
/>

Changer texte du bouton

Pour terminer, on renomme le bouton OK en Ajouter.

<q-btn flat label="Ajouter"
       color="primary"
       v-close-popup
/>

Résultat

TaskDialog.vue

<template>
  <q-card>
    <q-card-section class="row">
      <div class="text-h6">Ajouter une tâche</div>
      <q-space/>
      <q-btn
        dense
        flat
        round
        icon="close"
        v-close-popup
      />
    </q-card-section>

    <q-card-section class="q-pt-none">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum repellendus sit voluptate voluptas eveniet porro. Rerum blanditiis perferendis totam, ea at omnis vel numquam exercitationem aut, natus minima, porro labore.
    </q-card-section>

    <q-card-actions align="right">
      <q-btn flat label="Ajouter" color="primary" v-close-popup />
    </q-card-actions>
  </q-card>
</template>

<script setup>

</script>

<style scoped lang="scss">

</style>

Champs du formulaire

Notre formulaire contiendra les champs suivants :

Champ texte obligatoire : pour le nom de la tâche :
Date Piker optionnel : pour la date d'échéance
Time Piker optionnel : optionnel, pour l'heure d'échéance

Objet `tache` du composant

Les champs du formulaire seront directement liés aux propriétés de l'objet tache du composant.

Commençons par créer l'objet tache dans notre composant TaskDialog.vue.

TaskDialog.vue

<script setup>
import { ref } from 'vue'

const tache = ref({
    nom: '',
    dateFin: '',
    heureFin: '',
    terminee: false
})
</script>

Champ texte pour le nom

Input | Quasar FrameworkQuasar Framework

Copier la version outlined des exemples, à la place du texte de la dialog.

Renommer le label et faire le lien avec la propriété nom de l'objet tache.

TaskDialog.vue

<q-card-section class="q-pt-none">
  <q-input
    outlined
    v-model="tache.nom"
    label="Nom"
  />
</q-card-section>

Date Picker

QDate | Quasar FrameworkQuasar Framework

Copier la version With QInput et la coller après le <q-input> du nom de la tâche.

Retirer les attributs mask et :rules, remplacer filled par outlined pour avoir le même style que notre premier champ, et ajouter label="Date".

Retirer la div pour ne garder que l'élément de base.

Lier les deux v-model avec tache.dateFin.

Changer le format de la date pour <q-date> avec l'attribut mask="D.M.YYYY".

TaskDialog.vue

<q-input
  outlined
  v-model="tache.dateFin"
  label="Date">
  <template v-slot:append>
    <q-icon name="event" class="cursor-pointer">
      <q-popup-proxy cover transition-show="scale" transition-hide="scale">
        <q-date
          v-model="tache.dateFin"
          mask="D.M.YYYY"
        />
      </q-popup-proxy>
    </q-icon>
  </template>
</q-input>

Time Picker

QTime | Quasar FrameworkQuasar Framework

Copier la version With QInput et la coller après le Date Picker.

Retirer les attributs mask et :rules, remplacer filled par outlined et ajouter label="Heure".

Retirer la div pour ne garder que la structure de base de q-time

Lier les deux v-models avec tache.heureFin

src/components/Taches/Dialog/FormTache.vue | ligne 31

<q-input
  outlined
  v-model="tache.heureFin"
  label="Heure"
>
  <template v-slot:append>
    <q-icon name="access_time" class="cursor-pointer">
      <q-popup-proxy transition-show="scale" transition-hide="scale">
        <q-time v-model="tache.heureFin" />
      </q-popup-proxy>
    </q-icon>
  </template>
</q-input>

Boutons d'action

Afin de valider ou annuler le choix de l'heure, nous allons y ajouter des boutons.

QTime | Quasar FrameworkQuasar Framework

Pour ce faire il faut créer une donnée pour y stocker l'heure de manière temporaire. Créer un donnée heureTemp.

const heureTemp = ref('')

Ensuite remplacer le <q-popup-proxy> actuel par le code suivant.

2 : Avant le chargement de la fenêtre de sélection de l'heure, on initialise heureTemp avec l'heure actuelle de la tâche.
6 : L'élément <q-time> est lié à la donnée heureTemp avec la directive v-model.
13 : Quand on clique sur le bouton OK, l'heure temporaire est affectée à la tâche.

<q-popup-proxy
  cover
  transition-show="scale"
  transition-hide="scale"
  @before-show="() => heureTemp = tache.heureFin"
>
  <q-time v-model="heureTemp">
    <div class="row items-center justify-end q-gutter-sm">
      <q-btn label="Annuler" color="primary" flat v-close-popup />
      <q-btn
        label="OK"
        color="primary"
        flat
        @click="() => tache.heureFin = heureTemp"
        v-close-popup
      />
    </div>
  </q-time>
</q-popup-proxy>

Définir la langue pour Quasar

Actuellement, le choix de l'heure se fait au format anglo-saxon (AM / PM).

Pour activer le format 24H, nous pouvons le forcer en ajoutant l'attribut format24h à <q-time> ou en paramétrant le Quasar Language Packs.

Quasar Language Packs | Quasar FrameworkQuasar Framework

Cette variant à l'avantage de définir les réglages pour tous les composants de l'application.

Pour changer la langue modifier la ligne de code suivante dans le fichier quasar.conf.js à la racine du projet.

quasar.conf.js | ligne 99

lang: 'fr', // Quasar language pack

Non seulement le choix de l'heure est maintenant au format 24H, mais en plus, le calendrier est en français 🇫🇷

Un peu de style

Pour aérer les éléments du formulaire, ajouter une marge supérieure avec le helper class="q-mt-sm" au Date Picker et au Time Picker.

On va également augmenter la largeur max de la dialog en créer un style pour <q-card>.

Quasar applique à ses composant une classe CSS portant le nom du composant.

<q-card> devient <div class="q-card">

TaskDialog.vue

<style scoped lang="scss">
.q-card {
  max-width: 80vw;
  width: 400px;
}
</style>

Résultat

src/components/Taches/Dialog/FormTache.vue | ligne 31

<q-card-section class="q-pt-none">
  <q-input
    outlined
    v-model="tache.nom"
    label="Nom"
  />

  <q-input
    outlined
    v-model="tache.dateFin"
    label="Date"
    class="q-mt-sm">
    <template v-slot:append>
      <q-icon name="event" class="cursor-pointer">
        <q-popup-proxy cover transition-show="scale" transition-hide="scale">
          <q-date
            v-model="tache.dateFin"
            mask="D.M.YYYY"
          />
        </q-popup-proxy>
      </q-icon>
    </template>
  </q-input>

  <q-input
    label="Heure"
    outlined
    v-model="tache.heureFin"
    class="q-mt-sm">
    <template v-slot:append>
      <q-icon name="access_time" class="cursor-pointer">
        <q-popup-proxy
          cover
          transition-show="scale"
          transition-hide="scale"
          @before-show="() => heureTemp = tache.heureFin"
        >
          <q-time v-model="heureTemp">
            <div class="row items-center justify-end q-gutter-sm">
              <q-btn label="Annuler" color="primary" flat v-close-popup />
              <q-btn
                label="OK"
                color="primary"
                flat
                @click="() => tache.heureFin = heureTemp"
                v-close-popup
              />
            </div>
          </q-time>
        </q-popup-proxy>
      </q-icon>
    </template>
  </q-input>
</q-card-section>

Validation

La date et l'heure sont optionnels, mais le nom de la tâche, lui est obligatoire.

Ajoutons cette règle en copiant l'attribut :rules de l'exemple ci-après :

Input | Quasar FrameworkQuasar Framework

TaskDialog.vue

<!-- NOM -->
<q-input
  outlined
  v-model="tache.nom"
  label="Nom"
  :rules="[val => !!val || 'Le nom est obligatoire']"
/>

Envoi du formulaire

Première chose, créer une méthode formSubmit() qui sera appelée lors de l'envoi du formulaire. Pour le moment cette méthode affiche une simple alert.

TaskDialog.vue

<script setup>
const formSubmit = () => {
    alert('Tache ajoutée !')
}
</script>

Ensuite il faut créer un formulaire <q-form> qui englobera la section qui contient les champs et celle qui contient le bouton.

Appeler la méthode formSubmit() à l'envoi du formulaire avec @submit.

Définir le bouton de la dialog comme bouton d'envoi type="submit".

Supprimer l'attribut v-close-popup du bouton pour éviter la fermeture de la dialog.

On en profite pour supprimer l'attribut flat du bouton pour le rendre plus visible.

Form | Quasar FrameworkQuasar Framework

TaskDialog.vue

<q-form
  @submit="formSubmit"
>
  <q-card-section class="q-pt-none">
    <q-input
      outlined
      v-model="tache.nom"
      label="Nom"
      :rules="[val => !!val || 'Le nom est obligatoire']"
    />

    <q-input
      outlined
      v-model="tache.dateFin"
      label="Date"
      class="q-mt-sm">
      <template v-slot:append>
        <q-icon name="event" class="cursor-pointer">
          <q-popup-proxy cover transition-show="scale" transition-hide="scale">
            <q-date
              v-model="tache.dateFin"
              mask="D.M.YYYY"
            />
          </q-popup-proxy>
        </q-icon>
      </template>
    </q-input>

    <q-input
      label="Heure"
      outlined
      v-model="tache.heureFin"
      class="q-mt-sm">
      <template v-slot:append>
        <q-icon name="access_time" class="cursor-pointer">
          <q-popup-proxy
            cover
            transition-show="scale"
            transition-hide="scale"
            @before-show="() => heureTemp = tache.heureFin"
          >
            <q-time v-model="heureTemp">
              <div class="row items-center justify-end q-gutter-sm">
                <q-btn label="Annuler" color="primary" flat v-close-popup />
                <q-btn
                  label="OK"
                  color="primary"
                  flat
                  @click="() => tache.heureFin = heureTemp"
                  v-close-popup
                />
              </div>
            </q-time>
          </q-popup-proxy>
        </q-icon>
      </template>
    </q-input>
  </q-card-section>

  <q-card-actions align="right">
    <q-btn label="Ajouter" color="primary" type="submit" />
  </q-card-actions>
</q-form>

Lors du clic sur le bouton Ajouter, le formulaire valide la saisie :

Saisie OK : le formulaire est envoyé et notre méthode formSubmit est appelée.
Saisie KO : les messages d’erreurs s'affichent et l'envoi est annulé.

Fermeture de la dialog

Après l'envoi du formulaire, il faut fermer la dialog. Comme la dialog est créée dans un composant parent, il faudra émettre une événement pour demander au parent de fermer la dialog.

Émet un événement 'fermer' dans la méthode formSubmit de TaskDialog.vue.

TaskDialog.vue

const emit = defineEmits(['close'])

const formSubmit = () => {
  alert('Tache ajoutée !')
  emit('close')
}

Ajout de l'écoute de l'événement 'fermer' dans le parent PageTaches.vue et fermeture de la dialog.

PageTaches.vue

<q-dialog v-model="afficherTaskDialog">
  <TaskDialog
    @close="() => afficherTaskDialog = false"
  />
</q-dialog>

La dialog se ferme après validation de la fenêtre d'alerte.

Ajout de la tâche au magasin

Pour ajouter la tâche à notre magasin Pinia, nous allons :

Créer une action ajouterTache qui va
- Créer un id pour la nouvelle tâche
- Ajouter la tache au tableau
Appeler l'action ajouterTache et lui passer la nouvelle tâche.

Action

Générer un id unique

Pour notre applications, nous allons simplement récupérer l'id le plus élevé du tableau des taches et l'incrémenter de 1.

Mais si vous devez générer un id unique, Quasar peut vous aider.

Dans la section "Quasar Utils" du menu de la doc Quasar, vous trouverez des objets utilitaires (Dates, couleurs, scrolling, ... ) dont un pour générer des id uniques :

Other Utils | Quasar FrameworkQuasar Framework

Pour récupérer l'id MAX du tableau nous utilisons la méthode map() et l'affectation par décomposition.

store-taches.js

const ajouterTache = (tache) => {
  let uId = 1

  if (taches.value.length > 0) {
    uId = Math.max(...taches.value.map(v => v.id)) + 1
  }

  taches.value.push({
    ...tache,
    id: uId,
    terminee: false
  })
}

return {
  // ...
  ajouterTache
}

Attention!

L'ordre des propriétés dans l'objet passé à push est très important! Ainsi, si on reçoit une tache avec un id ou une propriété terminée déjà initialisée, on les remplace par celles qu'on a défini

Mappage et appel

Il ne reste plus qu'à mapper et appeler l'action ajouterTache dans notre composant TaskDialog.vue.

TaskDialog.vue

import { useTachesStore } from 'stores/store-taches'

const store = useTachesStore()

//...

const formSubmit = () => {
    // Appel l'action ajouterTache et lui passe la tache
    store.ajouterTache(tache.value)
    // Demande la fermeture de la dialog au parent
    emit('close')
}

Résultat

<template>
  <q-card>
    <q-card-section class="row">
      <div class="text-h6">Ajouter une tâche</div>
      <q-space/>
      <q-btn
        dense
        flat
        round
        icon="close"
        v-close-popup
      />
    </q-card-section>

    <q-form
      @submit="formSubmit"
    >
      <q-card-section class="q-pt-none">
        <q-input
          outlined
          v-model="tache.nom"
          label="Nom"
          :rules="[val => !!val || 'Le nom est obligatoire']"
        />

        <q-input
          outlined
          v-model="tache.dateFin"
          label="Date"
          class="q-mt-sm">
          <template v-slot:append>
            <q-icon name="event" class="cursor-pointer">
              <q-popup-proxy cover transition-show="scale" transition-hide="scale">
                <q-date
                  v-model="tache.dateFin"
                  mask="D.M.YYYY"
                />
              </q-popup-proxy>
            </q-icon>
          </template>
        </q-input>

        <q-input
          label="Heure"
          outlined
          v-model="tache.heureFin"
          class="q-mt-sm">
          <template v-slot:append>
            <q-icon name="access_time" class="cursor-pointer">
              <q-popup-proxy
                cover
                transition-show="scale"
                transition-hide="scale"
                @before-show="() => heureTemp = tache.heureFin"
              >
                <q-time v-model="heureTemp">
                  <div class="row items-center justify-end q-gutter-sm">
                    <q-btn label="Annuler" color="primary" flat v-close-popup />
                    <q-btn
                      label="OK"
                      color="primary"
                      flat
                      @click="() => tache.heureFin = heureTemp"
                      v-close-popup
                    />
                  </div>
                </q-time>
              </q-popup-proxy>
            </q-icon>
          </template>
        </q-input>
      </q-card-section>

      <q-card-actions align="right">
        <q-btn label="Ajouter" color="primary" type="submit" />
      </q-card-actions>
    </q-form>
  </q-card>
</template>

<script setup>
import { ref } from 'vue'
import { useTachesStore } from 'stores/store-taches'

const store = useTachesStore()

const heureTemp = ref('')

const tache = ref({
  nom: '',
  dateFin: '',
  heureFin: '',
  terminee: false
})

const emit = defineEmits(['close'])

const formSubmit = () => {
  store.ajouterTache(tache.value)
  emit('close')
}
</script>

<style scoped lang="scss">
.q-card {
  max-width: 80vw;
  width: 400px;
}
</style>

<template>
  <q-page padding>
    <q-list separator bordered>
      <Task
        v-for="(tache, index) in store.taches"
        :key="tache.id"
        :tache="tache"
        @toggle="() => store.taches[index].terminee = !store.taches[index].terminee"
      />
    </q-list>
    <q-page-sticky position="bottom" class="q-mb-lg">
      <q-btn
        @click="() => afficherTaskDialog = true"
        fab
        icon="add"
        color="primary" />
    </q-page-sticky>
    <q-dialog v-model="afficherTaskDialog">
      <TaskDialog
        @close="() => afficherTaskDialog = false"
      />
    </q-dialog>
  </q-page>
</template>

<script setup>
import { useTachesStore } from 'stores/store-taches'
import Task from 'components/TaskComponent.vue'
import { ref } from 'vue'
import TaskDialog from 'components/TaskDialog.vue'

const store = useTachesStore()

const afficherTaskDialog = ref(false)
</script>

<style>
.text-barre {
  text-decoration: line-through;
}
</style>

import { defineStore } from 'pinia'
import { ref } from 'vue'

export const useTachesStore = defineStore('taches', () => {
  const taches = ref([
    {
      id: 1,
      nom: 'Acheter des oranges',
      terminee: false,
      dateFin: '06.06.2020',
      heureFin: '12:00'
    },
    {
      id: 2,
      nom: 'Manger des oranges',
      terminee: false,
      dateFin: '15.06.2020',
      heureFin: '22:00'
    },
    {
      id: 3,
      nom: 'Digérer des oranges',
      terminee: false,
      dateFin: '16.06.2020',
      heureFin: '14:00'
    }
  ])

  const modifierTache = (id) => {
    const index = taches.value.findIndex((tache) => tache.id === id)
    taches.value[index].terminee = !taches.value[index].terminee
  }

  const supprimerTache = (id) => {
    const index = taches.value.findIndex((tache) => tache.id === id)
    taches.value.splice(index, 1)
  }

  const ajouterTache = (tache) => {
    let uId = 1

    if (taches.value.length > 0) {
      uId = Math.max(...taches.value.map(v => v.id)) + 1
    }

    taches.value.push({
      ...tache,
      id: uId,
      terminee: false
    })
  }

  return {
    taches,
    modifierTache,
    supprimerTache,
    ajouterTache
  }
})

/* eslint-env node */

/*
 * This file runs in a Node context (it's NOT transpiled by Babel), so use only
 * the ES6 features that are supported by your Node version. https://node.green/
 */

// Configuration for your app
// https://v2.quasar.dev/quasar-cli-vite/quasar-config-js

const { configure } = require('quasar/wrappers')

module.exports = configure(function (/* ctx */) {
  return {
    eslint: {
      // fix: true,
      // include: [],
      // exclude: [],
      // rawOptions: {},
      warnings: true,
      errors: true
    },

    // https://v2.quasar.dev/quasar-cli-vite/prefetch-feature
    // preFetch: true,

    // app boot file (/src/boot)
    // --> boot files are part of "main.js"
    // https://v2.quasar.dev/quasar-cli-vite/boot-files
    boot: [

      'axios'
    ],

    // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#css
    css: [
      'app.scss'
    ],

    // https://github.com/quasarframework/quasar/tree/dev/extras
    extras: [
      // 'ionicons-v4',
      // 'mdi-v5',
      // 'fontawesome-v6',
      // 'eva-icons',
      // 'themify',
      // 'line-awesome',
      // 'roboto-font-latin-ext', // this or either 'roboto-font', NEVER both!

      'roboto-font', // optional, you are not bound to it
      'material-icons' // optional, you are not bound to it
    ],

    // Full list of options: https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#build
    build: {
      target: {
        browser: ['es2019', 'edge88', 'firefox78', 'chrome87', 'safari13.1'],
        node: 'node16'
      },

      vueRouterMode: 'hash', // available values: 'hash', 'history'
      // vueRouterBase,
      // vueDevtools,
      // vueOptionsAPI: false,

      // rebuildCache: true, // rebuilds Vite/linter/etc cache on startup

      // publicPath: '/',
      // analyze: true,
      // env: {},
      // rawDefine: {}
      // ignorePublicFolder: true,
      // minify: false,
      // polyfillModulePreload: true,
      // distDir

      // extendViteConf (viteConf) {},
      // viteVuePluginOptions: {},

      // vitePlugins: [
      //   [ 'package-name', { ..options.. } ]
      // ]
      alias: {
        "~": "/src"
      }
    },

    // Full list of options: https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#devServer
    devServer: {
      // https: true
      open: true // opens browser window automatically
    },

    // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#framework
    framework: {
      config: {},

      // iconSet: 'material-icons', // Quasar icon set
      lang: 'fr', // Quasar language pack

      // For special cases outside of where the auto-import strategy can have an impact
      // (like functional components as one of the examples),
      // you can manually specify Quasar components/directives to be available everywhere:
      //
      // components: [],
      // directives: [],

      // Quasar plugins
      plugins: [
        'Dialog'
      ]
    },

    // animations: 'all', // --- includes all animations
    // https://v2.quasar.dev/options/animations
    animations: [],

    // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#sourcefiles
    // sourceFiles: {
    //   rootComponent: 'src/App.vue',
    //   router: 'src/router/index',
    //   store: 'src/store/index',
    //   registerServiceWorker: 'src-pwa/register-service-worker',
    //   serviceWorker: 'src-pwa/custom-service-worker',
    //   pwaManifestFile: 'src-pwa/manifest.json',
    //   electronMain: 'src-electron/electron-main',
    //   electronPreload: 'src-electron/electron-preload'
    // },

    // https://v2.quasar.dev/quasar-cli-vite/developing-ssr/configuring-ssr
    ssr: {
      // ssrPwaHtmlFilename: 'offline.html', // do NOT use index.html as name!
      // will mess up SSR

      // extendSSRWebserverConf (esbuildConf) {},
      // extendPackageJson (json) {},

      pwa: false,

      // manualStoreHydration: true,
      // manualPostHydrationTrigger: true,

      prodPort: 3000, // The default port that the production server should use
      // (gets superseded if process.env.PORT is specified at runtime)

      middlewares: [
        'render' // keep this as last one
      ]
    },

    // https://v2.quasar.dev/quasar-cli-vite/developing-pwa/configuring-pwa
    pwa: {
      workboxMode: 'generateSW', // or 'injectManifest'
      injectPwaMetaTags: true,
      swFilename: 'sw.js',
      manifestFilename: 'manifest.json',
      useCredentialsForManifestTag: false
      // useFilenameHashes: true,
      // extendGenerateSWOptions (cfg) {}
      // extendInjectManifestOptions (cfg) {},
      // extendManifestJson (json) {}
      // extendPWACustomSWConf (esbuildConf) {}
    },

    // Full list of options: https://v2.quasar.dev/quasar-cli-vite/developing-cordova-apps/configuring-cordova
    cordova: {
      // noIosLegacyBuildFlag: true, // uncomment only if you know what you are doing
    },

    // Full list of options: https://v2.quasar.dev/quasar-cli-vite/developing-capacitor-apps/configuring-capacitor
    capacitor: {
      hideSplashscreen: true
    },

    // Full list of options: https://v2.quasar.dev/quasar-cli-vite/developing-electron-apps/configuring-electron
    electron: {
      // extendElectronMainConf (esbuildConf)
      // extendElectronPreloadConf (esbuildConf)

      inspectPort: 5858,

      bundler: 'packager', // 'packager' or 'builder'

      packager: {
        // https://github.com/electron-userland/electron-packager/blob/master/docs/api.md#options

        // OS X / Mac App Store
        // appBundleId: '',
        // appCategoryType: '',
        // osxSign: '',
        // protocol: 'myapp://path',

        // Windows only
        // win32metadata: { ... }
      },

      builder: {
        // https://www.electron.build/configuration/configuration

        appId: 'quasar-demo'
      }
    },

    // Full list of options: https://v2.quasar.dev/quasar-cli-vite/developing-browser-extensions/configuring-bex
    bex: {
      contentScripts: [
        'my-content-script'
      ]

      // extendBexScriptsConf (esbuildConf) {}
      // extendBexManifestJson (json) {}
    }
  }
})

PrécédentSupprimer tâche SuivantAméliorations

Mis à jour il y a 2 ans

Ce contenu vous a-t-il été utile ?

hashtagBouton flottant

hashtagBoîte de dialogue

hashtagComposant TaskDialog.vue

hashtagImporter le composant dans PageTaches.vue

hashtagCustomisation de la boîte de dialogue

hashtagChanger le titre de la dialog

hashtagBouton de fermeture

hashtagAffichage en ligne

hashtagGestion des esapces

hashtagFermeture

hashtagChanger texte du bouton

hashtagRésultat

hashtagChamps du formulaire

hashtagObjet tache du composant

hashtagChamp texte pour le nom

hashtagDate Picker

hashtagTime Picker

hashtagBoutons d'action

hashtagDéfinir la langue pour Quasar

hashtagUn peu de style

hashtagRésultat

hashtagValidation

hashtagEnvoi du formulaire

hashtagFermeture de la dialog

hashtagAjout de la tâche au magasin

hashtagAction

hashtagGénérer un id unique

hashtagMappage et appel

hashtagRésultat

Bouton flottant

Boîte de dialogue

Composant `TaskDialog`.vue

Importer le composant dans PageTaches.vue

Customisation de la boîte de dialogue

Changer le titre de la dialog

Bouton de fermeture

Affichage en ligne

Gestion des esapces

Fermeture

Changer texte du bouton

Résultat

Champs du formulaire

Objet `tache` du composant

Champ texte pour le nom

Date Picker

Time Picker

Boutons d'action

Définir la langue pour Quasar

Un peu de style

Résultat

Validation

Envoi du formulaire

Fermeture de la dialog

Ajout de la tâche au magasin

Action

Générer un id unique

Mappage et appel

Résultat