todovue-demo
v3.0.2
Published
Component demo created for the TodoVue blog
Downloads
40
Maintainers
Readme
TODOvue Demo
The TvDemo component is a useful tool for viewing and testing different variations of components on different themes.
Table of Contents
Installation
Install with npm or yarn as development dependency
npm install todovue-demo --save-dev
yarn add todovue-demo --dev
Import
import { TvDemo } from 'todovue-demo'
In your main.js file
import "vue-highlight-code/dist/style.css"; // Styles are imported to display the code
You can also import it directly in the main.js file, so you don't have to import it in the pages
import { createApp } from "vue";
import App from "./App.vue";
import "vue-highlight-code/dist/style.css"; // Styles are imported to display the code
import TvDemo from "todovue-demo";
const app = createApp(App);
app.component("TvDemo", TvDemo);
app.mount("#app");
Add the following styles to your App.vue file
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
Usage
Basic use
<template>
<tv-demo :component="component" :variants="demos"></tv-demo>
</template>
<script>
import { shallowRef } from "vue";
import TvButton from "@/component/TvButton.vue";
import { demos } from "@/utils/mocks.js";
export default {
name: "DemoButton",
setup() {
const component = shallowRef(TvButton);
return {
component,
demos
};
}
};
</script>
It is important to wrap it in a shallowRef
to update the component without throwing an error
const component = shallowRef(TvButton);
You can create the variations of the component in the same file or import them from another file utlis/mocks.js
It is important that the information is sent by propsData
, since currently it cannot be sent by slot
export const demos = [
{
id: 1,
title: "TvButton Default",
propsData: { titletextButton: "Press me!" },
html: `<tv-button>
Press me!
</tv-button>`, // It is necessary to create the html property, this will be displayed in the code
},
{
id: 2,
title: "TvButton Default",
propsData: { titletextButton: "Press me!", isOutline: true },
html: "<tv-button titletextButton='Press me!' isOutline />",
},
];
Props
| Name | Type | Default | Description | Required |
|----------------|---------|---------|-------------------------------------------|-----------|
| component | Object | | Component to display | true
|
| variants | Array | | Variations of the component | true
|
| hideBackground | Boolean | false
| Hide the background of the component demo | false
|
| demoStyle | Object | | Style of the component | false
|
| propsData | Object | | Props of the component | false
|
Customize
You can customize the component by passing the demoStyle
property
const demoStyle = ref({
dark: {
backgroundBody: "#000000",
backgroundContent: "#1f1f1f",
color: "#ffffff",
},
light: {
backgroundBody: "#ffffff",
backgroundContent: "#f5f5f5",
color: "#000000",
},
});
And you send that object to the component
<template>
<tv-demo :component="component" :variants="demos" :demoStyle="demoStyle"></tv-demo>
</template>
You can send the colors for both dark
and light
, these values are optional, so you can send only one or not send any, then it will take the default color
Development
Clone the repository
git clone [email protected]:TODOvue/todovue-demo.git
Install the dependencies
yarn install
Run the project
yarn demo
Run the tests
yarn test:unit
Run the linter
yarn lint
Run the build It is not necessary to generate build, since it is generated when you do PR to the master branch
yarn build