0.0.6 • Published 6 months ago

vue2-seatchart v0.0.6

Weekly downloads
-
License
MIT
Repository
-
Last release
6 months ago

Vue 2 SeatChart

Based on omahili/seatchart.js

Install

Npm

npm install vue2-seatchart

Yarn

yarn add vue2-seatchart

Usage

Import SeatChart and add options:

<script setup lang="ts">
import { SeatChart } from 'vue2-seatchart';
import { type Options } from 'seatchart';
import 'seatchart/dist/seatchart.min.css';

const options: Options = {
  map: {
    rows: 7,
    columns: 7,
    seatTypes: {
      default: {
        label: 'Economy',
        cssClass: 'economy',
        price: 10,
      },
    },
  },
};

const onSubmit = (e: SubmitEvent) => {
  console.log(e)
}

</script>

<template>
  //...
  <SeatChart :options="options" @cart:submit="onSubmit" />
  //...
</template>

<style>
  .economy {
    color: white;
    background-color: #43aa8b;
  }
</style>

Or add via plugin

// ./src/main.ts

import { createApp } from 'vue'
import App from './App.vue'
import { useSeatChart } from 'vue2-seatchart';
import 'seatchart/dist/seatchart.min.css';

const app = createApp(App)
app.use(useSeatChart);
app.mount('#app')

Events

NameDescriptionReturn value
cart:submitWhen the submit button is pressedSubmitEvent
update:cartChangeWhen the cart changes. More specifically when a seat is selected, unselected, removed from the cart or on cart clear.CartChangeEvent
update:seatChangeWhen a seat changes. More specifically when a seat is selected, unselected, removed from the cart or on cart clear.SeatChangeEvent
update:cartClearWhen the cart is cleared from all its items.CartClearEvent

Exposed methods

MethodDescriptionReturn value
checkoutCartCall submit checkout cartSubmitEvent

Example

<script setup lang="ts">
import { ref } from 'vue';
import { SeatChart } from 'vue2-seatchart';
import type { Options, SubmitEvent } from 'seatchart';
import 'seatchart/dist/seatchart.min.css';

const seatChartRef = ref<typeof SeatChart>();

const options: Options = {
  // ...
  cart: {
    visible: false,
  },
  // ...
};

const onCheckout = () => {
  const checkoutData: SubmitEvent = seatChartRef.value?.checkoutCart();
  console.log(checkoutData);
}

</script>

<template>
  //...
  <SeatChart :options="options" ref="seatChartRef" />
  <button @click="onCheckout">Checkout</button>
  //...
</template>
0.0.6

6 months ago

0.0.5

6 months ago

0.0.4

7 months ago

0.0.3

7 months ago

0.0.2

7 months ago

0.0.1

7 months ago