npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@seatsio/seatsio-vue

v4.2.0

Published

Vue wrapper for rendering [Seats.io](https://www.seats.io) seating charts. Brought to you by the Seats.io team.

Downloads

645

Readme

seatsio-vue, the official Seats.io Vue SDK

Vue wrapper for rendering Seats.io seating charts. Brought to you by the Seats.io team.

Recommended tools

This package uses TypeScript. In order to get the best possible developer experience, you may need some Vue plugins for your IDE. If you use Visual Studio Code, we recommend the following plugins (direct extension links):

If you use a different IDE, there may be similar plugins available.

Installation

Npm
npm install --save @seatsio/seatsio-vue

Yarn
yarn add @seatsio/seatsio-vue

Usage

Regular charts

Minimal example to render a seating chart:

import { SeatsioSeatingChart } from '@seatsio/seatsio-vue';

<div style="height: 500px">
    <SeatsioSeatingChart
        workspaceKey="<yourPublicWorkspaceKey>"
        event="<yourEventKey>"
        region="eu"
    />
</div>

The chart uses 100 % of the width and height of the DOM element (e.g. a div) in which you render it. Play with the size of that element to change the chart size.

Pricing

import { SeatsioSeatingChart } from '@seatsio/seatsio-vue';
import { Pricing } from "@seatsio/seatsio-types";

const pricing: Pricing = [
    { category: 1, price: 30 },
    { category: 2, price: 40 },
    { category: 3, price: 50 }
]

<div style="height: 500px">
    <SeatsioSeatingChart
        workspaceKey="<yourPublicWorkspaceKey>"
        event="<yourEventKey>"
        region="eu"
        :pricing="pricing"
    />
</div>

Reacting to events

onRenderStarted()

onRenderStarted is fired when the chart has started loading, but hasn't rendered yet. If you store the chart object that's passed to the onRenderStarted callback, you can access the properties defined on the wrapped seatsio.SeatingChart:

// Single File Component (SFC) using SeatsioSeatingChart
export default {
    ...
    data() {
        return {
            chart: null
        }
    },
    methods: {
        onRenderStarted: (chart) => {
            this.chart = chart
            console.log(chart.selectedObjects)
        } 
    }
}

// Notice how the event handler is defined with @&lt;eventListener&gt;
// For more information, see https://vuejs.org/guide/essentials/event-handling.html
<SeatsioSeatingChart
    workspaceKey="<yourPublicWorkspaceKey>"
    event="<yourEventKey>"
    @renderStarted="onRenderStarted"
    region="eu"
/>

onChartRendered()

onChartRendered is fired when the chart is rendered successfully:

export default {
    ...
    data() {
        return {
            chart: null
        }
    },
    methods: {
        onChartRendered: function (chart) {
            this.chart = chart
            console.log(chart.selectedObjects)
        } 
    }
}

<SeatsioSeatingChart
    workspaceKey="<yourPublicWorkspaceKey>"
    event="<yourEventKey>"
    @chartRendered="onChartRendered"
    region="eu"
/>

Supported properties

Other parameters are supported as well. For a full list, check https://docs.seats.io/docs/renderer/embed-a-floor-plan

Example: Passing in a custom object color:

export default {
    ...
    data() {
        // Supports CSS color values
        objectColor: () => 'grey'
    },
}

<SeatsioSeatingChart
    workspaceKey="<yourPublicWorkspaceKey>"
    event="<yourEventKey>"
    region="eu"
    :objectColor="objectColor"
/>

Whenever one of the properties passed on to <SeatsioSeatingChart /> changes, the chart destroys itself and rerenders. To avoid such a 'full refresh', you can use chart.changeConfig() instead of updating the properties directly. Please check https://docs.seats.io/docs/renderer-chart-properties-chartchangeconfig. Note that changeConfig() only supports a subset of all available chart parameters.

Event manager

import { SeatsioEventManager } from '@seatsio/seatsio-vue';

<div style="height: 500px">
    <SeatsioEventManager
        secretKey="<yourWorkspaceSecretKey>"
        event="<yourEventKey>"
        mode="<manageObjectStatuses or another mode>"
        region="eu"
    />
</div>

Other parameters are supported as well. For a full list, check https://docs.seats.io/docs/event-manager/configuring

Seating Chart Designer

To embed the seating chart designer for the purpose of creating a new chart, do this:

import { SeatsioDesigner } from '@seatsio/seatsio-vue';

<div style="height: 500px">
    <SeatsioDesigner
        secretKey="<yourWorkspaceSecretKey>"
        region="eu"
        @chartCreated="onChartCreated"
    />
</div>

To be able to edit a chart from an embedded designer, you need to specify the chart to load:

<SeatsioDesigner
    secretKey="<yourWorkspaceSecretKey>"    
    chartKey="<yourChartKey>"
    region="eu"
/>

Other parameters are supported as well. For a full list, check https://docs.seats.io/docs/embedded-designer/introduction