@todovue/tvdemo v1.3.1

TODOvue Demo

The TvDemo component is a useful tool for viewing and testing different variations of components on different themes.

Table of Contents

• Demo
• Installation
• Usage
• Props
• Customize
• Development
• Changelog
• Contributing
• License

Installation

Install with npm or yarn as development dependency

npm install @todovue/tvdemo --save-dev

yarn add @todovue/tvdemo --dev

Import

<script setup>
  import TvDemo from '@todovue/tvdemo';
</script>

Or import it globally in main.js:

import { createApp } from "vue";
import App from "./App.vue";
import TvDemo from '@todovue/tvdemo';

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

Important: Documentation File Placement

To properly display the documentation within the demo, the README file must be placed inside the public/ folder of your project. This ensures it is accessible when using TvDemo.

Correct Setup

1. Move your README.md file to the public/ folder:

  mv README.md public/

Basic use

<script setup>
import { shallowRef } from "vue";
import TvButton from "@todovue/tvbutton";
import { demos } from "@/utils/mocks.js";

const component = shallowRef(TvButton);
</script>

<template>
  <tv-demo
    :component="component"
    :variants="demos"
    nameComponent="TvDemo"
    npmInstall="@todovue/tvdemo"
    sourceLink="https://github.com/TODOvue/todovue-demo"
    urlClone="https://github.com/TODOvue/todovue-demo.git"
    is-dev-component
    version="1.0.0"
    readmePath="./README.md"
  ></tv-demo>
</template>

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 utils/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

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",
  },
});

Use it in your component:

<script setup>
import { ref } from "vue";

const demoStyle = ref({
  dark: {
    backgroundBody: "#000000",
    backgroundContent: "#1f1f1f",
    color: "#ffffff",
  },
  light: {
    backgroundBody: "#ffffff",
    backgroundContent: "#f5f5f5",
    color: "#000000",
  },
});
</script>

<template>
  <tv-demo
    :component="component"
    :variants="demos"
    :demoStyle="demoStyle"
    nameComponent="TvButton"
    npmInstall="@todovue/tvdemo"
    sourceLink="https://github.com/TODOvue/todovue-demo"
    urlClone="https://github.com/TODOvue/todovue-demo.git"
  ></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

git clone git@github.com:TODOvue/todovue-demo.git
yarn install
yarn demo

License

MIT