@cimpress/vue-components
v0.1.3
Published
[![npm version](https://img.shields.io/npm/v/@cimpress/vue-components.svg)](https://www.npmjs.com/package/@cimpress/vue-components)
Downloads
14
Keywords
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
- [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