README
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
andvalue
attributes have been replaced withv-model
- All events (e.g.
onInput
andonChange
) 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
- Modal
- NavTab
- Notifications
- Pagination
- Phone
- Progress Bar
- Radio
- Robot
- Select
- Select Wrapper
- Slider
- Snackbar
- Spinner
- Stepper
- Table
- Tag
- Tab Card
- Text Field
- Toggle
- Tooltip