master: change repo

src/components/PricingTable.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="pricing-table">
+    <div class="pricing-plan" :class="{ 'is-active': plan === 'free' }">
+      <div class="plan-header">Gratuit</div>
+      Parfait pour démarrer rapidement
+      <div class="plan-price"><span class="plan-price-amount"><span class="plan-price-currency">€</span>0</span>/mois</div>
+      <div class="plan-items">
+        <div class="plan-item">jusqu'à 20 comptes</div>
+        <div class="plan-item">jusqu'à 20 amis/compte</div>
+        <div class="plan-item">jusqu'à 200 dépenses/compte</div>
+        <div class="plan-item">33 devises</div>
+      </div>
+      <div class="plan-footer">
+        <button class="button is-fullwidth" @click="choose('free')">
+          <span v-if="plan !== 'free'">Choix par défaut</span>
+          <span v-else>Sélectionné</span>
+        </button>
+      </div>
+    </div>
+
+    <div class="pricing-plan is-success" :class="{ 'is-active': plan === 'premium' }">
+      <div class="plan-header">Premium</div>
+      Vaquant sans aucune limite !
+      <div class="plan-price"><span class="plan-price-amount"><span class="plan-price-currency">€</span>3</span>/mois</div>
+      <div class="plan-items">
+        <div class="plan-item"><awe-icon icon="infinity" /> comptes</div>
+        <div class="plan-item"><awe-icon icon="infinity" /> amis/compte</div>
+        <div class="plan-item"><awe-icon icon="infinity" /> dépenses/compte</div>
+        <div class="plan-item">150+ devises</div>
+        <div class="plan-item">pièces jointes disponibles</div>
+      </div>
+      <div class="plan-footer">
+        <button class="button is-fullwidth" @click="choose('premium')" disabled>
+          Bientôt disponible
+          <!-- <span v-if="plan !== 'premium'">Passer en premium</span>
+          <span v-else>Sélectionné</span> -->
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator'
+
+@Component
+export default class PrincingTable extends Vue {
+  @Prop({ type: String, default: '' })
+  public firstPlan!: string
+  public plan: string = ''
+
+  public mounted(): void {
+    this.plan = this.firstPlan
+  }
+  public choose(plan: string): void {
+    this.plan = plan
+    this.$emit(plan)
+  }
+}
+</script>