@cimpress/vue-components

Cimpress MCP Vue Components

A port of the Cimpress MCP React Components for VueJs

How to use

<template>
  <div>
    <text-field v-model="msg"/>  
  </div>
</template>
<script>
import { TextField }  from '@cimpress/vue-components`
export default {
  components: { TextField },
  data() {
    return {
      msg: 'Hello World'
    }
  }
}
</script>

Notes on compatibility

• These components are a 1 on 1 port of the react components, that means you can use the documentation for those components.
• You don't pass elements as an attribute but as a named slot item.
• The onInput/onChange and value attributes have been replaced with v-model
• All events (e.g. onInput and onChange) have been changed to vue events (e.g. @input and @change)

Full example

React

import React, { Component } from 'react';
import { Modal, TextField } from '@cimpress/react-components';

export default class ModalDemo extends Component {
  state = {
    modalIsOpen: false,
    msg: 'Hello World'
  };
  
  closeModal = () => {
    this.setState({ modalIsOpen: false });
  };

  openModal = e => {
    this.setState({ modalIsOpen: true });
  };
  
  onInputChange = e => {
    this.setState({ msg: e.target.value });
  };
  
  render() {
    return (
      <Modal
        show={this.state.modalIsOpen}
        onRequestHide={this.closeModal}
        title="An example modal"
        closeButton={true}
        footer={
          <button className="btn btn-default" onClick={this.closeModal}>
            Close
          </button>
        }>
        I am a modal body!
        <TextField
          name="bar"
          label="A Text Field"
          value={this.state.msg}
          onChange={this.onInputChange}
        />
      </Modal>
    )
  }
}

Vue

<template>
  <div>
    <modal
      :show="modalIsOpen"
      title="An example modal"
      :close-button="true"
      @request-hide="closeModal"      
    >
      <div v-slot:body>
        I am a modal body!
        <text-field 
          name="bar"
          label="A Text Field"
          v-model="msg"
        />
      </div>
      <div v-slot:footer>
        <button class="btn btn-default" @click="closeModal">Close</button>
      </div>
    </modal>  
  </div>
</template>
<script>
import { Modal, TextField }  from '@cimpress/vue-components';
export default {
  components: { Modal, TextField },
  data() {
    return {
      msg: 'Hello World',
      modalIsOpen: false
    };
  },
  methods: {
    closeModal() {
      this.modalIsOpen = false;
    },
    openModal() {
      this.modalIsOpen = true;
    }
  }
};
</script>

Porting Progress

• [ ] CSS Loader
• [ ] Accordion
• [ ] Alert
• [ ] Breadcrumbs
• [ ] Button
• [ ] Button Group
• [ ] Card Header
• [ ] Card
• [ ] Carousel
• [ ] Checkbox
• [ ] Colors
• [ ] Currency Selector
• [ ] Documentation
• [ ] Drawer
• [ ] Dropdown
• [ ] 404
• [ ] Icon
• [ ] IconStack
• [ ] Label
• [x] Modal
• [ ] NavTab
• [ ] Notifications
• [ ] Pagination
• [ ] Phone
• [ ] Progress Bar
• [ ] Radio
• [ ] Robot
• [ ] Select
• [ ] Select Wrapper
• [ ] Slider
• [ ] Snackbar
• [ ] Spinner
• [ ] Stepper
• [ ] Table
• [ ] Tag
• [ ] Tab Card
• [x] Text Field
• [ ] Toggle
• [ ] Tooltip