@todovue/tv-demo 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +213 -0
- package/dist/favicon.ico +0 -0
- package/dist/tv-demo.cjs.js +2 -0
- package/dist/tv-demo.d.ts +1 -0
- package/dist/tv-demo.es.js +222 -0
- package/package.json +65 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2025 Cristhian Daza
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,213 @@
|
|
|
1
|
+
<p align="center"><img width="150" src="https://firebasestorage.googleapis.com/v0/b/todovue-blog.appspot.com/o/logo.png?alt=media&token=d8eb592f-e4a9-4b02-8aff-62d337745f41" alt="TODOvue logo">
|
|
2
|
+
</p>
|
|
3
|
+
|
|
4
|
+
# TODOvue Demo
|
|
5
|
+
###### The TvDemo component is a useful tool for viewing and testing different variations of components on different themes.
|
|
6
|
+
|
|
7
|
+
[](https://www.npmjs.com/package/@todovue/tv-demo) [](https://app.netlify.com/sites/tv-demo/deploys) [](https://www.npmjs.com/package/@todovue/tv-demo)
|
|
8
|
+
[](https://www.npmjs.com/package/@todovue/tv-demo)  
|
|
9
|
+
|
|
10
|
+
---
|
|
11
|
+
## Table of Contents
|
|
12
|
+
- [Demo](https://tv-demo.netlify.app/)
|
|
13
|
+
- [Installation](#installation)
|
|
14
|
+
- [Usage](#usage)
|
|
15
|
+
- [Props](#props)
|
|
16
|
+
- [Customize](#customize)
|
|
17
|
+
- [Development](#development)
|
|
18
|
+
- [Changelog](https://github.com/TODOvue/tv-demo/blob/main/CHANGELOG.md)
|
|
19
|
+
- [Contributing](https://github.com/TODOvue/tv-demo/blob/main/CONTRIBUTING.md)
|
|
20
|
+
- [License](https://github.com/TODOvue/tv-demo/blob/main/LICENSE)
|
|
21
|
+
|
|
22
|
+
## Installation
|
|
23
|
+
Install with npm or yarn as development dependency
|
|
24
|
+
```bash
|
|
25
|
+
npm install @todovue/tv-demo --save-dev
|
|
26
|
+
```
|
|
27
|
+
```bash
|
|
28
|
+
yarn add @todovue/tv-demo --dev
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
Import
|
|
32
|
+
```vue
|
|
33
|
+
<script setup>
|
|
34
|
+
import TvDemo from '@todovue/tv-demo';
|
|
35
|
+
</script>
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
Or import it globally in main.js:
|
|
39
|
+
```js
|
|
40
|
+
import { createApp } from "vue";
|
|
41
|
+
import App from "./App.vue";
|
|
42
|
+
import TvDemo from '@todovue/tv-demo';
|
|
43
|
+
|
|
44
|
+
const app = createApp(App);
|
|
45
|
+
app.component("TvDemo", TvDemo);
|
|
46
|
+
app.mount("#app");
|
|
47
|
+
```
|
|
48
|
+
To ensure the documentation tab displays correctly, you must import the following styles in your **Index.js** or entry file:
|
|
49
|
+
```js
|
|
50
|
+
import 'github-markdown-css';
|
|
51
|
+
```
|
|
52
|
+
This will apply the necessary styles for rendering markdown content properly.
|
|
53
|
+
|
|
54
|
+
Add the following styles to your **App.vue** file
|
|
55
|
+
```css
|
|
56
|
+
* {
|
|
57
|
+
box-sizing: border-box;
|
|
58
|
+
margin: 0;
|
|
59
|
+
padding: 0;
|
|
60
|
+
}
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
## Usage
|
|
64
|
+
## **Important**: Documentation File Placement
|
|
65
|
+
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`.
|
|
66
|
+
|
|
67
|
+
### Correct Setup
|
|
68
|
+
1. Move your `README.md` file to the `public/` folder:
|
|
69
|
+
```sh
|
|
70
|
+
mv README.md public/
|
|
71
|
+
```
|
|
72
|
+
Basic use
|
|
73
|
+
```vue
|
|
74
|
+
<script setup>
|
|
75
|
+
import { shallowRef } from "vue";
|
|
76
|
+
import TvButton from "@todovue/tvbutton";
|
|
77
|
+
import { demos } from "@/utils/mocks.js";
|
|
78
|
+
|
|
79
|
+
const component = shallowRef(TvButton);
|
|
80
|
+
</script>
|
|
81
|
+
|
|
82
|
+
<template>
|
|
83
|
+
<tv-demo
|
|
84
|
+
:component="component"
|
|
85
|
+
:variants="demos"
|
|
86
|
+
nameComponent="TvDemo"
|
|
87
|
+
npmInstall="@todovue/tv-demo"
|
|
88
|
+
sourceLink="https://github.com/TODOvue/tv-demo"
|
|
89
|
+
urlClone="https://github.com/TODOvue/tv-demo.git"
|
|
90
|
+
is-dev-component
|
|
91
|
+
version="1.0.0"
|
|
92
|
+
readmePath="./README.md"
|
|
93
|
+
></tv-demo>
|
|
94
|
+
</template>
|
|
95
|
+
```
|
|
96
|
+
It is important to wrap it in a `shallowRef` to update the component without throwing an error
|
|
97
|
+
```js
|
|
98
|
+
const component = shallowRef(TvButton);
|
|
99
|
+
```
|
|
100
|
+
|
|
101
|
+
You can create the variations of the component in the same file or import them from another file
|
|
102
|
+
**utils/mocks.js**
|
|
103
|
+
##### It is important that the information is sent by `propsData`, since currently it cannot be sent by slot
|
|
104
|
+
```js
|
|
105
|
+
import Default from './demos/default.vue?raw'
|
|
106
|
+
import IsDevComponent from './demos/isDevComponent.vue?raw';
|
|
107
|
+
import HideBackground from './demos/hideBackground.vue?raw';
|
|
108
|
+
import DemoStyle from './demos/demoStyle.vue?raw';
|
|
109
|
+
|
|
110
|
+
export const demos = [
|
|
111
|
+
{
|
|
112
|
+
id: 1,
|
|
113
|
+
title: 'Default',
|
|
114
|
+
propsData: {},
|
|
115
|
+
description: 'This is a default demo display for TODOvue components. Use this area to showcase the component\'s usage, props, variants, and live behavior in isolation.',
|
|
116
|
+
html: Default,
|
|
117
|
+
},
|
|
118
|
+
{
|
|
119
|
+
id: 2,
|
|
120
|
+
title: 'IsDevComponent',
|
|
121
|
+
propsData: { isDevComponent: true },
|
|
122
|
+
description: 'This is a demo display for TODOvue components. Use this area to showcase the component\'s usage, props, variants, and live behavior in isolation.',
|
|
123
|
+
html: IsDevComponent
|
|
124
|
+
},
|
|
125
|
+
{
|
|
126
|
+
id: 3,
|
|
127
|
+
title: 'HideBackground',
|
|
128
|
+
propsData: { hideBackground: true },
|
|
129
|
+
description: 'This is a demo display for TODOvue components. Use this area to showcase the component\'s usage, props, variants, and live behavior in isolation.',
|
|
130
|
+
html: HideBackground
|
|
131
|
+
},
|
|
132
|
+
{
|
|
133
|
+
id: 4,
|
|
134
|
+
title: 'DemoStyle',
|
|
135
|
+
propsData: { demoStyle: true },
|
|
136
|
+
description: 'This is a demo display for TODOvue components. Use this area to showcase the component\'s usage, props, variants, and live behavior in isolation.',
|
|
137
|
+
html: DemoStyle
|
|
138
|
+
}
|
|
139
|
+
];
|
|
140
|
+
```
|
|
141
|
+
|
|
142
|
+
## Props
|
|
143
|
+
| Name | Type | Default | Description | Required |
|
|
144
|
+
|----------------|---------|---------------|---------------------------------------------------------------------|----------|
|
|
145
|
+
| component | Object | | Component to display | `true` |
|
|
146
|
+
| variants | Array | | Variations of the component | `true` |
|
|
147
|
+
| hideBackground | Boolean | `false` | Hide the background of the component demo | `false` |
|
|
148
|
+
| demoStyle | Object | | Style of the component | `false` |
|
|
149
|
+
| nameComponent | String | `null` | Name of the component to display in the demo | `false` |
|
|
150
|
+
| npmInstall | String | `null` | Command to install the component (without `npm install`) | `false` |
|
|
151
|
+
| sourceLink | String | `null` | Link to the source code of the component | `false` |
|
|
152
|
+
| urlClone | String | `null` | Link to clone the repository of the component (without `git clone`) | `false` |
|
|
153
|
+
| isDevComponent | Boolean | `false` | Indicates that the component is in development (to include `-D`) | `false` |
|
|
154
|
+
| version | String | `1.0.0` | Version of the component | `false` |
|
|
155
|
+
| readmePath | String | `./README.md` | Path to the README file of the component | `false` |
|
|
156
|
+
|
|
157
|
+
## Customize
|
|
158
|
+
You can customize the component by passing the `demoStyle` property
|
|
159
|
+
```js
|
|
160
|
+
const demoStyle = ref({
|
|
161
|
+
dark: {
|
|
162
|
+
backgroundBody: "#000000",
|
|
163
|
+
backgroundContent: "#1f1f1f",
|
|
164
|
+
color: "#ffffff",
|
|
165
|
+
},
|
|
166
|
+
light: {
|
|
167
|
+
backgroundBody: "#ffffff",
|
|
168
|
+
backgroundContent: "#f5f5f5",
|
|
169
|
+
color: "#000000",
|
|
170
|
+
},
|
|
171
|
+
});
|
|
172
|
+
```
|
|
173
|
+
Use it in your component:
|
|
174
|
+
```vue
|
|
175
|
+
<script setup>
|
|
176
|
+
import { ref } from "vue";
|
|
177
|
+
|
|
178
|
+
const demoStyle = ref({
|
|
179
|
+
dark: {
|
|
180
|
+
backgroundBody: "#000000",
|
|
181
|
+
backgroundContent: "#1f1f1f",
|
|
182
|
+
color: "#ffffff",
|
|
183
|
+
},
|
|
184
|
+
light: {
|
|
185
|
+
backgroundBody: "#ffffff",
|
|
186
|
+
backgroundContent: "#f5f5f5",
|
|
187
|
+
color: "#000000",
|
|
188
|
+
},
|
|
189
|
+
});
|
|
190
|
+
</script>
|
|
191
|
+
|
|
192
|
+
<template>
|
|
193
|
+
<tv-demo
|
|
194
|
+
:component="component"
|
|
195
|
+
:variants="demos"
|
|
196
|
+
:demoStyle="demoStyle"
|
|
197
|
+
nameComponent="TvButton"
|
|
198
|
+
npmInstall="@todovue/tv-demo"
|
|
199
|
+
sourceLink="https://github.com/TODOvue/tv-demo"
|
|
200
|
+
urlClone="https://github.com/TODOvue/tv-demo.git"
|
|
201
|
+
></tv-demo>
|
|
202
|
+
</template>
|
|
203
|
+
```
|
|
204
|
+
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
|
|
205
|
+
|
|
206
|
+
## Development
|
|
207
|
+
```sh
|
|
208
|
+
git clone git@github.com:TODOvue/tv-demo.git
|
|
209
|
+
yarn install
|
|
210
|
+
yarn demo
|
|
211
|
+
```
|
|
212
|
+
## License
|
|
213
|
+
[MIT](https://github.com/TODOvue/tv-demo/blob/main/LICENSE)
|
package/dist/favicon.ico
ADDED
|
Binary file
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
(function(){"use strict";try{if(typeof document<"u"){var o=document.createElement("style");o.appendChild(document.createTextNode('@charset "UTF-8";@import"https://fonts.googleapis.com/css2?family=Kanit:wght@600&family=Lato:wght@300&display=swap";.cb[data-v-3c0bc7c1]{position:absolute;cursor:pointer;transition:.3s opacity linear;opacity:.5;height:30px;width:80px;right:0}.cb:hover .cb_tooltip[data-v-3c0bc7c1]{display:block}.cb[data-v-3c0bc7c1]:hover{opacity:1}.cb_tooltip[data-v-3c0bc7c1]{font-family:sans-serif;display:none;position:absolute;left:-96px;font-size:12px;color:#fff;width:80px;height:30px;line-height:30px;background:#000c;box-sizing:border-box;text-align:center;border-radius:4px}.cb_copy[data-v-3c0bc7c1]{position:absolute;font-family:sans-serif;display:block;font-size:12px;color:#fff;width:80px;height:30px;line-height:30px;background:#000c;box-sizing:border-box;text-align:center;border-radius:4px}.cb textarea[data-v-3c0bc7c1]{-webkit-user-select:none;user-select:none;position:absolute;padding:0;width:0;height:0;background:transparent;resize:none;opacity:0;border-color:#0000}.TL[data-v-b98f7724]{display:flex;align-items:center;justify-content:center;width:40px;height:30px;position:relative}.TL_word[data-v-b98f7724]{width:20px;height:20px;text-align:center;color:#aaa;font-size:16px}.code[data-v-f4a493be]{display:flex;flex-direction:column;font-size:0;position:relative;text-align:left;overflow:hidden}.code_header[data-v-f4a493be]{min-height:14px;position:relative}.code_area[data-v-f4a493be]{position:relative;overflow:hidden;padding-left:20px;margin:auto 0;display:flex}.code_area textarea[data-v-f4a493be]{overflow-y:hidden;box-sizing:border-box;caret-color:#7f7f7f;-webkit-text-fill-color:transparent;white-space:pre;word-wrap:normal;border:0;position:absolute;z-index:1000;top:0;left:0;width:100%;height:100%;background:none;border:none;outline:none;resize:none;padding:0 20px 20px;line-height:1.3;overflow:overlay;font-family:Consolas,Monaco,monospace}.code_area textarea[data-v-f4a493be]::-webkit-scrollbar-track{background-color:#eee}.code_area textarea[data-v-f4a493be]::-webkit-scrollbar-thumb{background:#afabab}.code_area textarea[data-v-f4a493be]::-webkit-scrollbar{width:8px;height:8px}.code_area textarea[data-v-f4a493be]::-webkit-scrollbar-corner{background-color:#eee}.code_area_link[data-v-f4a493be]{position:absolute}.code_area.change_hight[data-v-f4a493be]{height:calc(100% - 30px)}.code_area.srollbar_style[data-v-f4a493be]::-webkit-scrollbar-track{background-color:#eee}.code_area.srollbar_style[data-v-f4a493be]::-webkit-scrollbar-thumb{background:#afabab}.code_area.srollbar_style[data-v-f4a493be]::-webkit-scrollbar{width:8px;height:8px}.code_area.srollbar_style[data-v-f4a493be]::-webkit-scrollbar-corner{background-color:#eee}.code_area pre[data-v-f4a493be]{position:relative;margin:0;height:100%;overflow:hidden}.code_header[data-v-f4a493be]{position:relative;display:flex;justify-content:flex-start;width:100%}.code pre code[data-v-f4a493be]{font-family:Consolas,Monaco,monospace;line-height:1.3;position:relative;overflow-x:visible;border-radius:0;box-sizing:border-box;display:block;border:none;margin:0}.wrapper-content[data-v-f4a493be]::-webkit-scrollbar-track{background-color:#eee;border-radius:5px}.wrapper-content[data-v-f4a493be]::-webkit-scrollbar-thumb{background:#afabab;border-radius:5px}.wrapper-content[data-v-f4a493be]::-webkit-scrollbar{width:6px}.code_area_lines[data-v-f4a493be]{display:flex;flex-direction:column;width:10px;align-items:center;position:absolute;transform:translate(-18px)}.code_area_lines_item[data-v-f4a493be]{height:24px;width:10px;font-size:12px;color:#adb5bd;text-align:center;display:flex;justify-content:center;align-items:center;opacity:.6}.code_area_lines_item.dark[data-v-f4a493be]{color:#adb5bd}.code_area_lines_item.light[data-v-f4a493be]{color:#212529}.atom_one_dark.hljs,.atom_one_dark .hljs{color:#abb2bf;background:#282c34}.atom_one_dark .hljs-comment,.atom_one_dark .hljs-quote{color:#5c6370;font-style:italic}.atom_one_dark .hljs-doctag,.atom_one_dark .hljs-keyword,.atom_one_dark .hljs-formula{color:#c678dd}.atom_one_dark .hljs-section,.atom_one_dark .hljs-name,.atom_one_dark .hljs-selector-tag,.atom_one_dark .hljs-deletion,.atom_one_dark .hljs-subst{color:#e06c75}.atom_one_dark .hljs-literal{color:#56b6c2}.atom_one_dark .hljs-string,.atom_one_dark .hljs-regexp,.atom_one_dark .hljs-addition,.atom_one_dark .hljs-attribute,.atom_one_dark .hljs-meta .hljs-string{color:#98c379}.atom_one_dark .hljs-attr,.atom_one_dark .hljs-variable,.atom_one_dark .hljs-template-variable,.atom_one_dark .hljs-type,.atom_one_dark .hljs-selector-class,.atom_one_dark .hljs-selector-attr,.atom_one_dark .hljs-selector-pseudo,.atom_one_dark .hljs-number{color:#d19a66}.atom_one_dark .hljs-symbol,.atom_one_dark .hljs-bullet,.atom_one_dark .hljs-link,.atom_one_dark .hljs-meta,.atom_one_dark .hljs-selector-id,.atom_one_dark .hljs-title{color:#61aeee}.atom_one_dark .hljs-built_in,.atom_one_dark .hljs-title .class_,.atom_one_dark .hljs-class .hljs-title{color:#e6c07b}.atom_one_dark .hljs-emphasis{font-style:italic}.atom_one_dark .hljs-strong{font-weight:700}.atom_one_dark .hljs-link{text-decoration:underline}.atom_one_light.hljs,.atom_one_light .hljs{color:#383a42;background:#edf2f4}.atom_one_light .hljs-comment,.atom_one_light .hljs-quote{color:#a0a1a7;font-style:italic}.atom_one_light .hljs-doctag,.atom_one_light .hljs-keyword,.atom_one_light .hljs-formula{color:#a626a4}.atom_one_light .hljs-section,.atom_one_light .hljs-name,.atom_one_light .hljs-selector-tag,.atom_one_light .hljs-deletion,.atom_one_light .hljs-subst{color:#e45649}.atom_one_light .hljs-literal{color:#0184bb}.atom_one_light .hljs-string,.atom_one_light .hljs-regexp,.atom_one_light .hljs-addition,.atom_one_light .hljs-attribute,.atom_one_light .hljs-meta .hljs-string{color:#50a14f}.atom_one_light .hljs-attr,.atom_one_light .hljs-variable,.atom_one_light .hljs-template-variable,.atom_one_light .hljs-type,.atom_one_light .hljs-selector-class,.atom_one_light .hljs-selector-attr,.atom_one_light .hljs-selector-pseudo,.atom_one_light .hljs-number{color:#986801}.atom_one_light .hljs-symbol,.atom_one_light .hljs-bullet,.atom_one_light .hljs-link,.atom_one_light .hljs-meta,.atom_one_light .hljs-selector-id,.atom_one_light .hljs-title{color:#4078f2}.atom_one_light .hljs-built_in,.atom_one_light .hljs-title .class_,.atom_one_light .hljs-class .hljs-title{color:#c18401}.atom_one_light .hljs-emphasis{font-style:italic}.atom_one_light .hljs-strong{font-weight:700}.atom_one_light .hljs-link{text-decoration:underline}pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}.hljs{background:#272822;color:#ddd}.hljs-tag,.hljs-keyword,.hljs-selector-tag,.hljs-literal,.hljs-strong,.hljs-number,.hljs-name{color:#f92672}.hljs-code{color:#66d9ef}.hljs-attribute,.hljs-attr,.hljs-symbol,.hljs-regexp,.hljs-link{color:#bf79db}.hljs-string,.hljs-bullet,.hljs-subst,.hljs-title,.hljs-section,.hljs-emphasis,.hljs-type,.hljs-built_in,.hljs-selector-attr,.hljs-selector-pseudo,.hljs-addition,.hljs-variable,.hljs-template-tag,.hljs-template-variable{color:#a6e22e}.hljs-title.class_,.hljs-class .hljs-title{color:#fff}.hljs-comment,.hljs-quote,.hljs-deletion,.hljs-meta{color:#75715e}.hljs-keyword,.hljs-selector-tag,.hljs-literal,.hljs-doctag,.hljs-title,.hljs-section,.hljs-type,.hljs-selector-id{font-weight:700}[data-v-95f3b0ae]{box-sizing:border-box;margin:0;padding:0}body[data-v-95f3b0ae]{font-family:Lato,sans-serif;font-size:1rem}h1[data-v-95f3b0ae],h2[data-v-95f3b0ae],h3[data-v-95f3b0ae],h4[data-v-95f3b0ae],h5[data-v-95f3b0ae],h6[data-v-95f3b0ae]{font-family:Kanit,sans-serif;font-size:2rem}.dark-mode[data-v-95f3b0ae],.dark-mode body[data-v-95f3b0ae]{background-color:#7a7d7d;color:#f4faff}.dark-mode .tv-search-results[data-v-95f3b0ae]::-webkit-scrollbar-thumb{background-color:#0e131f}.dark-mode .tv-search-results[data-v-95f3b0ae]::-webkit-scrollbar-thumb:hover{background-color:#000}.light-mode[data-v-95f3b0ae],.light-mode body[data-v-95f3b0ae]{background-color:#e0e1e1;color:#000b14}.light-mode .tv-search-results[data-v-95f3b0ae]::-webkit-scrollbar-thumb{background-color:#b9c4df}.light-mode .tv-search-results[data-v-95f3b0ae]::-webkit-scrollbar-thumb:hover{background-color:#96a7cf}[data-v-95f3b0ae]::-webkit-scrollbar{width:8px}[data-v-95f3b0ae]::-webkit-scrollbar-track{background-color:#f1f9f9}[data-v-95f3b0ae]::-webkit-scrollbar-thumb{background-color:#b9c4df}[data-v-95f3b0ae]::-webkit-scrollbar-thumb:hover{background-color:#96a7cf}.markdown-body[data-v-95f3b0ae]{padding:50px 25px;border-radius:8px;color:#fff;font-size:16px}.markdown-body h1[data-v-95f3b0ae],.markdown-body h2[data-v-95f3b0ae],.markdown-body h3[data-v-95f3b0ae]{color:#3b82f6}.markdown-body pre[data-v-95f3b0ae]{background:#282c34;padding:10px;border-radius:5px;overflow-x:auto}.tv-demo-tabs[data-v-95f3b0ae]{display:flex;margin-bottom:10px}.tv-demo-tabs button[data-v-95f3b0ae]{border:none;padding:10px 15px;cursor:pointer;font-size:1rem;border-radius:5px 5px 0 0;margin-right:5px}.tv-demo-content[data-v-95f3b0ae]{padding:20px;border:1px solid #4a4a4a;border-radius:0 5px 5px}.tv-demo-content .tv-demo-description[data-v-95f3b0ae]{font-size:2rem}a[data-v-95f3b0ae],.tv-demo-links-item[data-v-95f3b0ae]{text-decoration:none;font-weight:500;display:inline-flex;align-items:center;gap:3px;cursor:pointer;font-size:1.1rem}.dark-mode .tv-demo-select[data-v-95f3b0ae]{background-color:#b9c4df;color:#0e131f;border:1px solid #B9C4DF}.dark-mode .tv-demo-option[data-v-95f3b0ae]{background:#b9c4df}.dark-mode .no-background[data-v-95f3b0ae]{background-color:#0e131f;color:#b9c4df;box-shadow:0 0 10px #0e131f}.dark-mode .tv-demo-tabs button[data-v-95f3b0ae]{background-color:#b9c4df;color:#000b14}.dark-mode .tv-demo-tabs button.active[data-v-95f3b0ae]{background:#8598c7;font-weight:700}.dark-mode .tv-demo-tabs button[data-v-95f3b0ae]:hover{background:#96a7cf}.light-mode .tv-demo-select[data-v-95f3b0ae]{background-color:#0e131f;color:#b9c4df;border:1px solid #0E131F}.light-mode .tv-demo-option[data-v-95f3b0ae]{background:#0e131f}.light-mode .no-background[data-v-95f3b0ae]{background-color:#b9c4df;color:#0e131f;box-shadow:0 0 10px #b9c4df}.light-mode .tv-demo-tabs button[data-v-95f3b0ae]{background-color:#0e131f;color:#f4faff}.light-mode .tv-demo-tabs button.active[data-v-95f3b0ae]{background:#000;font-weight:700}.light-mode .tv-demo-tabs button[data-v-95f3b0ae]:hover{background:#000}.tv-demo-body[data-v-95f3b0ae]{margin:0 auto;min-height:100vh;width:80%}.tv-demo-body.dark-mode[data-v-95f3b0ae]{background-color:#0e131f}.tv-demo-body.dark-mode .tv-demo-select[data-v-95f3b0ae]{background-color:#b9c4df;color:#0e131f;border:1px solid #B9C4DF}.tv-demo-body.dark-mode .tv-demo-option[data-v-95f3b0ae]{background:#b9c4df}.tv-demo-body.dark-mode .tv-demo-copy[data-v-95f3b0ae]{background-color:#b9c4df;color:#0e131f;box-shadow:0 0 10px #b9c4df}.tv-demo-body.dark-mode .tv-demo-links-item[data-v-95f3b0ae]{color:#b9c4df}.tv-demo-body.light-mode[data-v-95f3b0ae]{background-color:#b9c4df}.tv-demo-body.light-mode .tv-demo-select[data-v-95f3b0ae]{background-color:#0e131f;color:#b9c4df;border:1px solid #0E131F}.tv-demo-body.light-mode .tv-demo-option[data-v-95f3b0ae]{background:#0e131f}.tv-demo-body.light-mode .tv-demo-copy[data-v-95f3b0ae]{background-color:#0e131f;color:#b9c4df;box-shadow:0 0 10px #0e131f}.tv-demo-body.light-mode .tv-demo-links-item[data-v-95f3b0ae]{color:#0e131f}.tv-demo-body .tv-demo-theme[data-v-95f3b0ae]{display:inline-block;min-height:100%;padding:0 20px;width:100%}.tv-demo-body .tv-demo-links[data-v-95f3b0ae]{display:flex;gap:10px;align-content:center;align-items:center}.tv-demo-body .tv-demo-links a[data-v-95f3b0ae]{color:inherit}.tv-demo-body .tv-demo-copy[data-v-95f3b0ae]{border-radius:4px;font-size:14px;padding:5px 10px;position:absolute;top:70px;width:auto}.tv-demo-body .tv-demo-header[data-v-95f3b0ae]{padding:40px 0;display:flex;justify-content:space-between}.tv-demo-body .tv-demo-case[data-v-95f3b0ae]{padding:0 20px 20px;position:relative}.tv-demo-body .tv-demo-case-demo .demo[data-v-95f3b0ae]{margin-bottom:20px}.tv-demo-body .tv-demo-case-demo h3[data-v-95f3b0ae]{font-size:22px;padding-top:20px}.tv-demo-body .tv-demo-case-demo h1[data-v-95f3b0ae]{font-size:2.2rem;font-weight:700}.tv-demo-body .tv-demo-case-demo h1 span[data-v-95f3b0ae]{font-size:1rem;font-weight:300}.tv-demo-body .tv-demo-select[data-v-95f3b0ae]{border-radius:4px;cursor:pointer;font-size:16px;height:40px;margin-bottom:20px;margin-top:5px;padding:0 10px;width:100%}.tv-demo-body .tv-demo-select-theme[data-v-95f3b0ae]{width:150px}.tv-demo-body .tv-demo-option[data-v-95f3b0ae]{font-size:16px}.tv-demo-body .tv-demo-component[data-v-95f3b0ae]{align-items:center;display:flex;height:100%;justify-content:center;margin-top:5px;width:100%}.tv-demo-body .tv-demo-no-component[data-v-95f3b0ae]{color:inherit;font-size:1.5rem;font-weight:500;text-align:center}.tv-demo-body .tv-demo-code[data-v-95f3b0ae]{margin-top:5px;width:100%!important;height:auto!important;padding:20px 0}@media (max-width: 768px){.tv-demo-case[data-v-95f3b0ae]{padding:10px!important}.tv-demo-body[data-v-95f3b0ae]{width:90%}.tv-demo-header[data-v-95f3b0ae]{flex-direction:column;align-items:flex-start;gap:10px;padding:0}.tv-demo-header .tv-demo-theme[data-v-95f3b0ae]{width:100%;padding-left:0;padding-right:0}.tv-demo-header .tv-demo-select-theme[data-v-95f3b0ae]{width:100%}}@media (max-width: 640px){.tv-demo-case[data-v-95f3b0ae]{padding:0!important}.tv-demo-body[data-v-95f3b0ae]{width:100%}}')),document.head.appendChild(o)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
|
|
2
|
+
"use strict";const e=require("vue"),g=require("vue-highlight-code");require("github-markdown-css");const h=require("vue3-markdown-it"),E=t=>{const a=e.ref("dark"),r=e.ref(0),s=e.ref(""),d=e.ref(!1),m=e.ref(""),c=e.ref(""),u=e.ref("demo");e.onMounted(()=>{const n=localStorage.getItem("theme");n&&(a.value=n),s.value=a.value||"dark"});const v=async()=>{try{const n=await fetch(t.readmePath);if(!n.ok)throw new Error("README.md not found");c.value=await n.text()}catch{c.value="⚠️ Documentation not found."}},k=()=>{a.value=s.value,localStorage.setItem("theme",a.value)},i=e.computed(()=>{var n;return((n=t.variants)==null?void 0:n[r.value])||{}}),f=e.computed(()=>{var o,l;const n=a.value==="dark"?(o=t.demoStyle)==null?void 0:o.dark:(l=t.demoStyle)==null?void 0:l.light;return{body:{backgroundColor:(n==null?void 0:n.backgroundBody)||"",color:(n==null?void 0:n.color)||""},content:{backgroundColor:(n==null?void 0:n.backgroundContent)||"",color:(n==null?void 0:n.color)||""}}}),C=n=>{let o="";n==="npm"?o=`npm install ${t.isDevComponent?"-D ":""}${t.npmInstall}`:o=`git clone ${t.urlClone}`,navigator.clipboard.writeText(o).then(()=>{d.value=!0,m.value=`✅ Copied: ${o}`}).catch(l=>{d.value=!0,m.value=`❌ Failed to copy: ${l}`}).finally(()=>{setTimeout(()=>{d.value=!1,m.value=""},2e3)})};return e.watchEffect(v),{customStyle:f,isCopy:d,messageCopy:m,readmeContent:c,selectedTab:u,selectedTheme:s,selectedVariantIndex:r,theme:a,variant:i,setClickItem:C,toggleTheme:k}},V=(t,a)=>{const r=t.__vccOpts||t;for(const[s,d]of a)r[s]=d;return r},B={class:"tv-demo-case"},p={class:"tv-demo-header"},N={class:"tv-demo-title"},S={class:"tv-demo-links"},D=["href"],b={key:1},I={key:3},T={class:"tv-demo-theme"},$={class:"tv-demo-tabs"},w={key:0,class:"tv-demo-content"},x=["value"],z={class:"tv-demo-description"},L={key:1,class:"tv-demo-content"},M={key:0,class:"markdown-body"},R={key:1},P={__name:"TvDemo",props:{demoStyle:{type:Object,default:()=>({body:{},content:{}})},hideBackground:Boolean,component:Object,variants:Array,nameComponent:{type:String,default:"Component Demo"},sourceLink:{type:String,default:null},urlClone:{type:String,default:null},npmInstall:{type:String,default:null},isDevComponent:{type:Boolean,default:!1},version:{type:String,default:"0.0.0"},readmePath:{type:String,default:"/README.md"}},setup(t){const a=t,{customStyle:r,isCopy:s,messageCopy:d,readmeContent:m,selectedTab:c,selectedTheme:u,selectedVariantIndex:v,theme:k,variant:i,setClickItem:f,toggleTheme:C}=E(a);return(n,o)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(`${e.unref(k)}-mode`),style:e.normalizeStyle(e.unref(r).body)},[e.createElementVNode("div",{class:e.normalizeClass(["tv-demo-body",{[`${e.unref(k)}-mode`]:!t.hideBackground}]),style:e.normalizeStyle(e.unref(r).content)},[e.createElementVNode("div",B,[e.createElementVNode("div",p,[e.createElementVNode("div",null,[e.createElementVNode("h1",N,[e.createTextVNode(e.toDisplayString(t.nameComponent)+" ",1),e.createElementVNode("span",null,"v"+e.toDisplayString(t.version),1)]),e.createElementVNode("div",S,[t.sourceLink||t.npmInstall||t.urlClone?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[t.sourceLink?(e.openBlock(),e.createElementBlock("a",{key:0,href:t.sourceLink,target:"_blank",class:"tv-demo-links-item"}," 📂 Source ",8,D)):e.createCommentVNode("",!0),t.sourceLink&&(t.npmInstall||t.urlClone)?(e.openBlock(),e.createElementBlock("span",b," | ")):e.createCommentVNode("",!0),t.npmInstall?(e.openBlock(),e.createElementBlock("div",{key:2,class:"tv-demo-links-item",onClick:o[0]||(o[0]=l=>e.unref(f)("npm"))}," 📦 NPM Command ")):e.createCommentVNode("",!0),t.npmInstall&&t.urlClone?(e.openBlock(),e.createElementBlock("span",I," | ")):e.createCommentVNode("",!0),t.urlClone?(e.openBlock(),e.createElementBlock("div",{key:4,class:"tv-demo-links-item",onClick:o[1]||(o[1]=l=>e.unref(f)("clone"))}," 📝 Clone Component ")):e.createCommentVNode("",!0)],64)):e.createCommentVNode("",!0)])]),e.createElementVNode("div",null,[e.createElementVNode("div",T,[e.withDirectives(e.createElementVNode("select",{class:"tv-demo-select tv-demo-select-theme","onUpdate:modelValue":o[2]||(o[2]=l=>e.isRef(u)?u.value=l:null),onChange:o[3]||(o[3]=(...l)=>e.unref(C)&&e.unref(C)(...l))},o[7]||(o[7]=[e.createElementVNode("option",{disabled:"",value:""},"Select theme",-1),e.createElementVNode("option",{value:"dark"},"Dark",-1),e.createElementVNode("option",{value:"light"},"Light",-1)]),544),[[e.vModelSelect,e.unref(u)]])])])]),e.createElementVNode("div",$,[e.createElementVNode("button",{class:e.normalizeClass({active:e.unref(c)==="demo"}),onClick:o[4]||(o[4]=l=>c.value="demo")},"📌 Demo",2),e.createElementVNode("button",{class:e.normalizeClass({active:e.unref(c)==="docs"}),onClick:o[5]||(o[5]=l=>c.value="docs")},"📖 Documentation",2)]),e.unref(c)==="demo"?(e.openBlock(),e.createElementBlock("div",w,[o[8]||(o[8]=e.createElementVNode("h3",null,"Variations:",-1)),t.variants.length>1?e.withDirectives((e.openBlock(),e.createElementBlock("select",{key:0,class:"tv-demo-select","onUpdate:modelValue":o[6]||(o[6]=l=>e.isRef(v)?v.value=l:null)},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.variants,(l,y)=>(e.openBlock(),e.createElementBlock("option",{key:l.title,value:y},e.toDisplayString(l.title),9,x))),128))],512)),[[e.vModelSelect,e.unref(v)]]):e.createCommentVNode("",!0),e.createTextVNode(" "+e.toDisplayString(e.unref(i).description)+" ",1),e.createElementVNode("div",z,[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(t.component),e.normalizeProps(e.guardReactiveProps(e.unref(i).propsData)),null,16))]),o[9]||(o[9]=e.createElementVNode("h3",null,"Code:",-1)),(e.openBlock(),e.createBlock(e.unref(g.HighCode),{class:"tv-demo-code",codeValue:e.unref(i).html,theme:e.unref(k),lang:"html",codeLines:"",key:e.unref(i).title,height:"auto"},null,8,["codeValue","theme"])),e.unref(s)?(e.openBlock(),e.createElementBlock("div",{key:1,class:e.normalizeClass(t.hideBackground?"tv-demo-copy no-background":"tv-demo-copy")},e.toDisplayString(e.unref(d)),3)):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0),e.unref(c)==="docs"?(e.openBlock(),e.createElementBlock("div",L,[o[10]||(o[10]=e.createElementVNode("h2",null,"📖 Documentation",-1)),e.unref(m)?(e.openBlock(),e.createElementBlock("div",M,[e.createVNode(e.unref(h),{source:e.unref(m),html:""},null,8,["source"])])):(e.openBlock(),e.createElementBlock("div",R,"No documentation available."))])):e.createCommentVNode("",!0)])],6)],6))}},q=V(P,[["__scopeId","data-v-95f3b0ae"]]);module.exports=q;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {}
|
|
@@ -0,0 +1,222 @@
|
|
|
1
|
+
(function(){"use strict";try{if(typeof document<"u"){var o=document.createElement("style");o.appendChild(document.createTextNode('@charset "UTF-8";@import"https://fonts.googleapis.com/css2?family=Kanit:wght@600&family=Lato:wght@300&display=swap";.cb[data-v-3c0bc7c1]{position:absolute;cursor:pointer;transition:.3s opacity linear;opacity:.5;height:30px;width:80px;right:0}.cb:hover .cb_tooltip[data-v-3c0bc7c1]{display:block}.cb[data-v-3c0bc7c1]:hover{opacity:1}.cb_tooltip[data-v-3c0bc7c1]{font-family:sans-serif;display:none;position:absolute;left:-96px;font-size:12px;color:#fff;width:80px;height:30px;line-height:30px;background:#000c;box-sizing:border-box;text-align:center;border-radius:4px}.cb_copy[data-v-3c0bc7c1]{position:absolute;font-family:sans-serif;display:block;font-size:12px;color:#fff;width:80px;height:30px;line-height:30px;background:#000c;box-sizing:border-box;text-align:center;border-radius:4px}.cb textarea[data-v-3c0bc7c1]{-webkit-user-select:none;user-select:none;position:absolute;padding:0;width:0;height:0;background:transparent;resize:none;opacity:0;border-color:#0000}.TL[data-v-b98f7724]{display:flex;align-items:center;justify-content:center;width:40px;height:30px;position:relative}.TL_word[data-v-b98f7724]{width:20px;height:20px;text-align:center;color:#aaa;font-size:16px}.code[data-v-f4a493be]{display:flex;flex-direction:column;font-size:0;position:relative;text-align:left;overflow:hidden}.code_header[data-v-f4a493be]{min-height:14px;position:relative}.code_area[data-v-f4a493be]{position:relative;overflow:hidden;padding-left:20px;margin:auto 0;display:flex}.code_area textarea[data-v-f4a493be]{overflow-y:hidden;box-sizing:border-box;caret-color:#7f7f7f;-webkit-text-fill-color:transparent;white-space:pre;word-wrap:normal;border:0;position:absolute;z-index:1000;top:0;left:0;width:100%;height:100%;background:none;border:none;outline:none;resize:none;padding:0 20px 20px;line-height:1.3;overflow:overlay;font-family:Consolas,Monaco,monospace}.code_area textarea[data-v-f4a493be]::-webkit-scrollbar-track{background-color:#eee}.code_area textarea[data-v-f4a493be]::-webkit-scrollbar-thumb{background:#afabab}.code_area textarea[data-v-f4a493be]::-webkit-scrollbar{width:8px;height:8px}.code_area textarea[data-v-f4a493be]::-webkit-scrollbar-corner{background-color:#eee}.code_area_link[data-v-f4a493be]{position:absolute}.code_area.change_hight[data-v-f4a493be]{height:calc(100% - 30px)}.code_area.srollbar_style[data-v-f4a493be]::-webkit-scrollbar-track{background-color:#eee}.code_area.srollbar_style[data-v-f4a493be]::-webkit-scrollbar-thumb{background:#afabab}.code_area.srollbar_style[data-v-f4a493be]::-webkit-scrollbar{width:8px;height:8px}.code_area.srollbar_style[data-v-f4a493be]::-webkit-scrollbar-corner{background-color:#eee}.code_area pre[data-v-f4a493be]{position:relative;margin:0;height:100%;overflow:hidden}.code_header[data-v-f4a493be]{position:relative;display:flex;justify-content:flex-start;width:100%}.code pre code[data-v-f4a493be]{font-family:Consolas,Monaco,monospace;line-height:1.3;position:relative;overflow-x:visible;border-radius:0;box-sizing:border-box;display:block;border:none;margin:0}.wrapper-content[data-v-f4a493be]::-webkit-scrollbar-track{background-color:#eee;border-radius:5px}.wrapper-content[data-v-f4a493be]::-webkit-scrollbar-thumb{background:#afabab;border-radius:5px}.wrapper-content[data-v-f4a493be]::-webkit-scrollbar{width:6px}.code_area_lines[data-v-f4a493be]{display:flex;flex-direction:column;width:10px;align-items:center;position:absolute;transform:translate(-18px)}.code_area_lines_item[data-v-f4a493be]{height:24px;width:10px;font-size:12px;color:#adb5bd;text-align:center;display:flex;justify-content:center;align-items:center;opacity:.6}.code_area_lines_item.dark[data-v-f4a493be]{color:#adb5bd}.code_area_lines_item.light[data-v-f4a493be]{color:#212529}.atom_one_dark.hljs,.atom_one_dark .hljs{color:#abb2bf;background:#282c34}.atom_one_dark .hljs-comment,.atom_one_dark .hljs-quote{color:#5c6370;font-style:italic}.atom_one_dark .hljs-doctag,.atom_one_dark .hljs-keyword,.atom_one_dark .hljs-formula{color:#c678dd}.atom_one_dark .hljs-section,.atom_one_dark .hljs-name,.atom_one_dark .hljs-selector-tag,.atom_one_dark .hljs-deletion,.atom_one_dark .hljs-subst{color:#e06c75}.atom_one_dark .hljs-literal{color:#56b6c2}.atom_one_dark .hljs-string,.atom_one_dark .hljs-regexp,.atom_one_dark .hljs-addition,.atom_one_dark .hljs-attribute,.atom_one_dark .hljs-meta .hljs-string{color:#98c379}.atom_one_dark .hljs-attr,.atom_one_dark .hljs-variable,.atom_one_dark .hljs-template-variable,.atom_one_dark .hljs-type,.atom_one_dark .hljs-selector-class,.atom_one_dark .hljs-selector-attr,.atom_one_dark .hljs-selector-pseudo,.atom_one_dark .hljs-number{color:#d19a66}.atom_one_dark .hljs-symbol,.atom_one_dark .hljs-bullet,.atom_one_dark .hljs-link,.atom_one_dark .hljs-meta,.atom_one_dark .hljs-selector-id,.atom_one_dark .hljs-title{color:#61aeee}.atom_one_dark .hljs-built_in,.atom_one_dark .hljs-title .class_,.atom_one_dark .hljs-class .hljs-title{color:#e6c07b}.atom_one_dark .hljs-emphasis{font-style:italic}.atom_one_dark .hljs-strong{font-weight:700}.atom_one_dark .hljs-link{text-decoration:underline}.atom_one_light.hljs,.atom_one_light .hljs{color:#383a42;background:#edf2f4}.atom_one_light .hljs-comment,.atom_one_light .hljs-quote{color:#a0a1a7;font-style:italic}.atom_one_light .hljs-doctag,.atom_one_light .hljs-keyword,.atom_one_light .hljs-formula{color:#a626a4}.atom_one_light .hljs-section,.atom_one_light .hljs-name,.atom_one_light .hljs-selector-tag,.atom_one_light .hljs-deletion,.atom_one_light .hljs-subst{color:#e45649}.atom_one_light .hljs-literal{color:#0184bb}.atom_one_light .hljs-string,.atom_one_light .hljs-regexp,.atom_one_light .hljs-addition,.atom_one_light .hljs-attribute,.atom_one_light .hljs-meta .hljs-string{color:#50a14f}.atom_one_light .hljs-attr,.atom_one_light .hljs-variable,.atom_one_light .hljs-template-variable,.atom_one_light .hljs-type,.atom_one_light .hljs-selector-class,.atom_one_light .hljs-selector-attr,.atom_one_light .hljs-selector-pseudo,.atom_one_light .hljs-number{color:#986801}.atom_one_light .hljs-symbol,.atom_one_light .hljs-bullet,.atom_one_light .hljs-link,.atom_one_light .hljs-meta,.atom_one_light .hljs-selector-id,.atom_one_light .hljs-title{color:#4078f2}.atom_one_light .hljs-built_in,.atom_one_light .hljs-title .class_,.atom_one_light .hljs-class .hljs-title{color:#c18401}.atom_one_light .hljs-emphasis{font-style:italic}.atom_one_light .hljs-strong{font-weight:700}.atom_one_light .hljs-link{text-decoration:underline}pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}.hljs{background:#272822;color:#ddd}.hljs-tag,.hljs-keyword,.hljs-selector-tag,.hljs-literal,.hljs-strong,.hljs-number,.hljs-name{color:#f92672}.hljs-code{color:#66d9ef}.hljs-attribute,.hljs-attr,.hljs-symbol,.hljs-regexp,.hljs-link{color:#bf79db}.hljs-string,.hljs-bullet,.hljs-subst,.hljs-title,.hljs-section,.hljs-emphasis,.hljs-type,.hljs-built_in,.hljs-selector-attr,.hljs-selector-pseudo,.hljs-addition,.hljs-variable,.hljs-template-tag,.hljs-template-variable{color:#a6e22e}.hljs-title.class_,.hljs-class .hljs-title{color:#fff}.hljs-comment,.hljs-quote,.hljs-deletion,.hljs-meta{color:#75715e}.hljs-keyword,.hljs-selector-tag,.hljs-literal,.hljs-doctag,.hljs-title,.hljs-section,.hljs-type,.hljs-selector-id{font-weight:700}[data-v-95f3b0ae]{box-sizing:border-box;margin:0;padding:0}body[data-v-95f3b0ae]{font-family:Lato,sans-serif;font-size:1rem}h1[data-v-95f3b0ae],h2[data-v-95f3b0ae],h3[data-v-95f3b0ae],h4[data-v-95f3b0ae],h5[data-v-95f3b0ae],h6[data-v-95f3b0ae]{font-family:Kanit,sans-serif;font-size:2rem}.dark-mode[data-v-95f3b0ae],.dark-mode body[data-v-95f3b0ae]{background-color:#7a7d7d;color:#f4faff}.dark-mode .tv-search-results[data-v-95f3b0ae]::-webkit-scrollbar-thumb{background-color:#0e131f}.dark-mode .tv-search-results[data-v-95f3b0ae]::-webkit-scrollbar-thumb:hover{background-color:#000}.light-mode[data-v-95f3b0ae],.light-mode body[data-v-95f3b0ae]{background-color:#e0e1e1;color:#000b14}.light-mode .tv-search-results[data-v-95f3b0ae]::-webkit-scrollbar-thumb{background-color:#b9c4df}.light-mode .tv-search-results[data-v-95f3b0ae]::-webkit-scrollbar-thumb:hover{background-color:#96a7cf}[data-v-95f3b0ae]::-webkit-scrollbar{width:8px}[data-v-95f3b0ae]::-webkit-scrollbar-track{background-color:#f1f9f9}[data-v-95f3b0ae]::-webkit-scrollbar-thumb{background-color:#b9c4df}[data-v-95f3b0ae]::-webkit-scrollbar-thumb:hover{background-color:#96a7cf}.markdown-body[data-v-95f3b0ae]{padding:50px 25px;border-radius:8px;color:#fff;font-size:16px}.markdown-body h1[data-v-95f3b0ae],.markdown-body h2[data-v-95f3b0ae],.markdown-body h3[data-v-95f3b0ae]{color:#3b82f6}.markdown-body pre[data-v-95f3b0ae]{background:#282c34;padding:10px;border-radius:5px;overflow-x:auto}.tv-demo-tabs[data-v-95f3b0ae]{display:flex;margin-bottom:10px}.tv-demo-tabs button[data-v-95f3b0ae]{border:none;padding:10px 15px;cursor:pointer;font-size:1rem;border-radius:5px 5px 0 0;margin-right:5px}.tv-demo-content[data-v-95f3b0ae]{padding:20px;border:1px solid #4a4a4a;border-radius:0 5px 5px}.tv-demo-content .tv-demo-description[data-v-95f3b0ae]{font-size:2rem}a[data-v-95f3b0ae],.tv-demo-links-item[data-v-95f3b0ae]{text-decoration:none;font-weight:500;display:inline-flex;align-items:center;gap:3px;cursor:pointer;font-size:1.1rem}.dark-mode .tv-demo-select[data-v-95f3b0ae]{background-color:#b9c4df;color:#0e131f;border:1px solid #B9C4DF}.dark-mode .tv-demo-option[data-v-95f3b0ae]{background:#b9c4df}.dark-mode .no-background[data-v-95f3b0ae]{background-color:#0e131f;color:#b9c4df;box-shadow:0 0 10px #0e131f}.dark-mode .tv-demo-tabs button[data-v-95f3b0ae]{background-color:#b9c4df;color:#000b14}.dark-mode .tv-demo-tabs button.active[data-v-95f3b0ae]{background:#8598c7;font-weight:700}.dark-mode .tv-demo-tabs button[data-v-95f3b0ae]:hover{background:#96a7cf}.light-mode .tv-demo-select[data-v-95f3b0ae]{background-color:#0e131f;color:#b9c4df;border:1px solid #0E131F}.light-mode .tv-demo-option[data-v-95f3b0ae]{background:#0e131f}.light-mode .no-background[data-v-95f3b0ae]{background-color:#b9c4df;color:#0e131f;box-shadow:0 0 10px #b9c4df}.light-mode .tv-demo-tabs button[data-v-95f3b0ae]{background-color:#0e131f;color:#f4faff}.light-mode .tv-demo-tabs button.active[data-v-95f3b0ae]{background:#000;font-weight:700}.light-mode .tv-demo-tabs button[data-v-95f3b0ae]:hover{background:#000}.tv-demo-body[data-v-95f3b0ae]{margin:0 auto;min-height:100vh;width:80%}.tv-demo-body.dark-mode[data-v-95f3b0ae]{background-color:#0e131f}.tv-demo-body.dark-mode .tv-demo-select[data-v-95f3b0ae]{background-color:#b9c4df;color:#0e131f;border:1px solid #B9C4DF}.tv-demo-body.dark-mode .tv-demo-option[data-v-95f3b0ae]{background:#b9c4df}.tv-demo-body.dark-mode .tv-demo-copy[data-v-95f3b0ae]{background-color:#b9c4df;color:#0e131f;box-shadow:0 0 10px #b9c4df}.tv-demo-body.dark-mode .tv-demo-links-item[data-v-95f3b0ae]{color:#b9c4df}.tv-demo-body.light-mode[data-v-95f3b0ae]{background-color:#b9c4df}.tv-demo-body.light-mode .tv-demo-select[data-v-95f3b0ae]{background-color:#0e131f;color:#b9c4df;border:1px solid #0E131F}.tv-demo-body.light-mode .tv-demo-option[data-v-95f3b0ae]{background:#0e131f}.tv-demo-body.light-mode .tv-demo-copy[data-v-95f3b0ae]{background-color:#0e131f;color:#b9c4df;box-shadow:0 0 10px #0e131f}.tv-demo-body.light-mode .tv-demo-links-item[data-v-95f3b0ae]{color:#0e131f}.tv-demo-body .tv-demo-theme[data-v-95f3b0ae]{display:inline-block;min-height:100%;padding:0 20px;width:100%}.tv-demo-body .tv-demo-links[data-v-95f3b0ae]{display:flex;gap:10px;align-content:center;align-items:center}.tv-demo-body .tv-demo-links a[data-v-95f3b0ae]{color:inherit}.tv-demo-body .tv-demo-copy[data-v-95f3b0ae]{border-radius:4px;font-size:14px;padding:5px 10px;position:absolute;top:70px;width:auto}.tv-demo-body .tv-demo-header[data-v-95f3b0ae]{padding:40px 0;display:flex;justify-content:space-between}.tv-demo-body .tv-demo-case[data-v-95f3b0ae]{padding:0 20px 20px;position:relative}.tv-demo-body .tv-demo-case-demo .demo[data-v-95f3b0ae]{margin-bottom:20px}.tv-demo-body .tv-demo-case-demo h3[data-v-95f3b0ae]{font-size:22px;padding-top:20px}.tv-demo-body .tv-demo-case-demo h1[data-v-95f3b0ae]{font-size:2.2rem;font-weight:700}.tv-demo-body .tv-demo-case-demo h1 span[data-v-95f3b0ae]{font-size:1rem;font-weight:300}.tv-demo-body .tv-demo-select[data-v-95f3b0ae]{border-radius:4px;cursor:pointer;font-size:16px;height:40px;margin-bottom:20px;margin-top:5px;padding:0 10px;width:100%}.tv-demo-body .tv-demo-select-theme[data-v-95f3b0ae]{width:150px}.tv-demo-body .tv-demo-option[data-v-95f3b0ae]{font-size:16px}.tv-demo-body .tv-demo-component[data-v-95f3b0ae]{align-items:center;display:flex;height:100%;justify-content:center;margin-top:5px;width:100%}.tv-demo-body .tv-demo-no-component[data-v-95f3b0ae]{color:inherit;font-size:1.5rem;font-weight:500;text-align:center}.tv-demo-body .tv-demo-code[data-v-95f3b0ae]{margin-top:5px;width:100%!important;height:auto!important;padding:20px 0}@media (max-width: 768px){.tv-demo-case[data-v-95f3b0ae]{padding:10px!important}.tv-demo-body[data-v-95f3b0ae]{width:90%}.tv-demo-header[data-v-95f3b0ae]{flex-direction:column;align-items:flex-start;gap:10px;padding:0}.tv-demo-header .tv-demo-theme[data-v-95f3b0ae]{width:100%;padding-left:0;padding-right:0}.tv-demo-header .tv-demo-select-theme[data-v-95f3b0ae]{width:100%}}@media (max-width: 640px){.tv-demo-case[data-v-95f3b0ae]{padding:0!important}.tv-demo-body[data-v-95f3b0ae]{width:100%}}')),document.head.appendChild(o)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
|
|
2
|
+
import { ref as y, onMounted as M, computed as I, watchEffect as N, createElementBlock as d, openBlock as s, normalizeStyle as T, normalizeClass as b, unref as n, createElementVNode as l, createCommentVNode as m, createTextVNode as V, toDisplayString as p, Fragment as $, withDirectives as w, isRef as B, vModelSelect as x, createBlock as E, renderList as P, resolveDynamicComponent as R, normalizeProps as z, guardReactiveProps as A, createVNode as O } from "vue";
|
|
3
|
+
import { HighCode as j } from "vue-highlight-code";
|
|
4
|
+
import "github-markdown-css";
|
|
5
|
+
import F from "vue3-markdown-it";
|
|
6
|
+
const U = (e) => {
|
|
7
|
+
const i = y("dark"), r = y(0), v = y(""), u = y(!1), k = y(""), c = y(""), g = y("demo");
|
|
8
|
+
M(() => {
|
|
9
|
+
const o = localStorage.getItem("theme");
|
|
10
|
+
o && (i.value = o), v.value = i.value || "dark";
|
|
11
|
+
});
|
|
12
|
+
const C = async () => {
|
|
13
|
+
try {
|
|
14
|
+
const o = await fetch(e.readmePath);
|
|
15
|
+
if (!o.ok) throw new Error("README.md not found");
|
|
16
|
+
c.value = await o.text();
|
|
17
|
+
} catch {
|
|
18
|
+
c.value = "⚠️ Documentation not found.";
|
|
19
|
+
}
|
|
20
|
+
}, f = () => {
|
|
21
|
+
i.value = v.value, localStorage.setItem("theme", i.value);
|
|
22
|
+
}, h = I(() => {
|
|
23
|
+
var o;
|
|
24
|
+
return ((o = e.variants) == null ? void 0 : o[r.value]) || {};
|
|
25
|
+
}), D = I(() => {
|
|
26
|
+
var t, a;
|
|
27
|
+
const o = i.value === "dark" ? (t = e.demoStyle) == null ? void 0 : t.dark : (a = e.demoStyle) == null ? void 0 : a.light;
|
|
28
|
+
return {
|
|
29
|
+
body: {
|
|
30
|
+
backgroundColor: (o == null ? void 0 : o.backgroundBody) || "",
|
|
31
|
+
color: (o == null ? void 0 : o.color) || ""
|
|
32
|
+
},
|
|
33
|
+
content: {
|
|
34
|
+
backgroundColor: (o == null ? void 0 : o.backgroundContent) || "",
|
|
35
|
+
color: (o == null ? void 0 : o.color) || ""
|
|
36
|
+
}
|
|
37
|
+
};
|
|
38
|
+
}), S = (o) => {
|
|
39
|
+
let t = "";
|
|
40
|
+
o === "npm" ? t = `npm install ${e.isDevComponent ? "-D " : ""}${e.npmInstall}` : t = `git clone ${e.urlClone}`, navigator.clipboard.writeText(t).then(() => {
|
|
41
|
+
u.value = !0, k.value = `✅ Copied: ${t}`;
|
|
42
|
+
}).catch((a) => {
|
|
43
|
+
u.value = !0, k.value = `❌ Failed to copy: ${a}`;
|
|
44
|
+
}).finally(() => {
|
|
45
|
+
setTimeout(() => {
|
|
46
|
+
u.value = !1, k.value = "";
|
|
47
|
+
}, 2e3);
|
|
48
|
+
});
|
|
49
|
+
};
|
|
50
|
+
return N(C), {
|
|
51
|
+
customStyle: D,
|
|
52
|
+
isCopy: u,
|
|
53
|
+
messageCopy: k,
|
|
54
|
+
readmeContent: c,
|
|
55
|
+
selectedTab: g,
|
|
56
|
+
selectedTheme: v,
|
|
57
|
+
selectedVariantIndex: r,
|
|
58
|
+
theme: i,
|
|
59
|
+
variant: h,
|
|
60
|
+
setClickItem: S,
|
|
61
|
+
toggleTheme: f
|
|
62
|
+
};
|
|
63
|
+
}, H = (e, i) => {
|
|
64
|
+
const r = e.__vccOpts || e;
|
|
65
|
+
for (const [v, u] of i)
|
|
66
|
+
r[v] = u;
|
|
67
|
+
return r;
|
|
68
|
+
}, q = { class: "tv-demo-case" }, G = { class: "tv-demo-header" }, J = { class: "tv-demo-title" }, K = { class: "tv-demo-links" }, Q = ["href"], W = { key: 1 }, X = { key: 3 }, Y = { class: "tv-demo-theme" }, Z = { class: "tv-demo-tabs" }, _ = {
|
|
69
|
+
key: 0,
|
|
70
|
+
class: "tv-demo-content"
|
|
71
|
+
}, ee = ["value"], te = { class: "tv-demo-description" }, oe = {
|
|
72
|
+
key: 1,
|
|
73
|
+
class: "tv-demo-content"
|
|
74
|
+
}, ne = {
|
|
75
|
+
key: 0,
|
|
76
|
+
class: "markdown-body"
|
|
77
|
+
}, le = { key: 1 }, ae = {
|
|
78
|
+
__name: "TvDemo",
|
|
79
|
+
props: {
|
|
80
|
+
demoStyle: { type: Object, default: () => ({ body: {}, content: {} }) },
|
|
81
|
+
hideBackground: Boolean,
|
|
82
|
+
component: Object,
|
|
83
|
+
variants: Array,
|
|
84
|
+
nameComponent: { type: String, default: "Component Demo" },
|
|
85
|
+
sourceLink: { type: String, default: null },
|
|
86
|
+
urlClone: { type: String, default: null },
|
|
87
|
+
npmInstall: { type: String, default: null },
|
|
88
|
+
isDevComponent: { type: Boolean, default: !1 },
|
|
89
|
+
version: { type: String, default: "0.0.0" },
|
|
90
|
+
readmePath: { type: String, default: "/README.md" }
|
|
91
|
+
},
|
|
92
|
+
setup(e) {
|
|
93
|
+
const i = e, {
|
|
94
|
+
customStyle: r,
|
|
95
|
+
isCopy: v,
|
|
96
|
+
messageCopy: u,
|
|
97
|
+
readmeContent: k,
|
|
98
|
+
selectedTab: c,
|
|
99
|
+
selectedTheme: g,
|
|
100
|
+
selectedVariantIndex: C,
|
|
101
|
+
theme: f,
|
|
102
|
+
variant: h,
|
|
103
|
+
setClickItem: D,
|
|
104
|
+
toggleTheme: S
|
|
105
|
+
} = U(i);
|
|
106
|
+
return (o, t) => (s(), d("div", {
|
|
107
|
+
class: b(`${n(f)}-mode`),
|
|
108
|
+
style: T(n(r).body)
|
|
109
|
+
}, [
|
|
110
|
+
l("div", {
|
|
111
|
+
class: b(["tv-demo-body", { [`${n(f)}-mode`]: !e.hideBackground }]),
|
|
112
|
+
style: T(n(r).content)
|
|
113
|
+
}, [
|
|
114
|
+
l("div", q, [
|
|
115
|
+
l("div", G, [
|
|
116
|
+
l("div", null, [
|
|
117
|
+
l("h1", J, [
|
|
118
|
+
V(p(e.nameComponent) + " ", 1),
|
|
119
|
+
l("span", null, "v" + p(e.version), 1)
|
|
120
|
+
]),
|
|
121
|
+
l("div", K, [
|
|
122
|
+
e.sourceLink || e.npmInstall || e.urlClone ? (s(), d($, { key: 0 }, [
|
|
123
|
+
e.sourceLink ? (s(), d("a", {
|
|
124
|
+
key: 0,
|
|
125
|
+
href: e.sourceLink,
|
|
126
|
+
target: "_blank",
|
|
127
|
+
class: "tv-demo-links-item"
|
|
128
|
+
}, " 📂 Source ", 8, Q)) : m("", !0),
|
|
129
|
+
e.sourceLink && (e.npmInstall || e.urlClone) ? (s(), d("span", W, " | ")) : m("", !0),
|
|
130
|
+
e.npmInstall ? (s(), d("div", {
|
|
131
|
+
key: 2,
|
|
132
|
+
class: "tv-demo-links-item",
|
|
133
|
+
onClick: t[0] || (t[0] = (a) => n(D)("npm"))
|
|
134
|
+
}, " 📦 NPM Command ")) : m("", !0),
|
|
135
|
+
e.npmInstall && e.urlClone ? (s(), d("span", X, " | ")) : m("", !0),
|
|
136
|
+
e.urlClone ? (s(), d("div", {
|
|
137
|
+
key: 4,
|
|
138
|
+
class: "tv-demo-links-item",
|
|
139
|
+
onClick: t[1] || (t[1] = (a) => n(D)("clone"))
|
|
140
|
+
}, " 📝 Clone Component ")) : m("", !0)
|
|
141
|
+
], 64)) : m("", !0)
|
|
142
|
+
])
|
|
143
|
+
]),
|
|
144
|
+
l("div", null, [
|
|
145
|
+
l("div", Y, [
|
|
146
|
+
w(l("select", {
|
|
147
|
+
class: "tv-demo-select tv-demo-select-theme",
|
|
148
|
+
"onUpdate:modelValue": t[2] || (t[2] = (a) => B(g) ? g.value = a : null),
|
|
149
|
+
onChange: t[3] || (t[3] = (...a) => n(S) && n(S)(...a))
|
|
150
|
+
}, t[7] || (t[7] = [
|
|
151
|
+
l("option", {
|
|
152
|
+
disabled: "",
|
|
153
|
+
value: ""
|
|
154
|
+
}, "Select theme", -1),
|
|
155
|
+
l("option", { value: "dark" }, "Dark", -1),
|
|
156
|
+
l("option", { value: "light" }, "Light", -1)
|
|
157
|
+
]), 544), [
|
|
158
|
+
[x, n(g)]
|
|
159
|
+
])
|
|
160
|
+
])
|
|
161
|
+
])
|
|
162
|
+
]),
|
|
163
|
+
l("div", Z, [
|
|
164
|
+
l("button", {
|
|
165
|
+
class: b({ active: n(c) === "demo" }),
|
|
166
|
+
onClick: t[4] || (t[4] = (a) => c.value = "demo")
|
|
167
|
+
}, "📌 Demo", 2),
|
|
168
|
+
l("button", {
|
|
169
|
+
class: b({ active: n(c) === "docs" }),
|
|
170
|
+
onClick: t[5] || (t[5] = (a) => c.value = "docs")
|
|
171
|
+
}, "📖 Documentation", 2)
|
|
172
|
+
]),
|
|
173
|
+
n(c) === "demo" ? (s(), d("div", _, [
|
|
174
|
+
t[8] || (t[8] = l("h3", null, "Variations:", -1)),
|
|
175
|
+
e.variants.length > 1 ? w((s(), d("select", {
|
|
176
|
+
key: 0,
|
|
177
|
+
class: "tv-demo-select",
|
|
178
|
+
"onUpdate:modelValue": t[6] || (t[6] = (a) => B(C) ? C.value = a : null)
|
|
179
|
+
}, [
|
|
180
|
+
(s(!0), d($, null, P(e.variants, (a, L) => (s(), d("option", {
|
|
181
|
+
key: a.title,
|
|
182
|
+
value: L
|
|
183
|
+
}, p(a.title), 9, ee))), 128))
|
|
184
|
+
], 512)), [
|
|
185
|
+
[x, n(C)]
|
|
186
|
+
]) : m("", !0),
|
|
187
|
+
V(" " + p(n(h).description) + " ", 1),
|
|
188
|
+
l("div", te, [
|
|
189
|
+
(s(), E(R(e.component), z(A(n(h).propsData)), null, 16))
|
|
190
|
+
]),
|
|
191
|
+
t[9] || (t[9] = l("h3", null, "Code:", -1)),
|
|
192
|
+
(s(), E(n(j), {
|
|
193
|
+
class: "tv-demo-code",
|
|
194
|
+
codeValue: n(h).html,
|
|
195
|
+
theme: n(f),
|
|
196
|
+
lang: "html",
|
|
197
|
+
codeLines: "",
|
|
198
|
+
key: n(h).title,
|
|
199
|
+
height: "auto"
|
|
200
|
+
}, null, 8, ["codeValue", "theme"])),
|
|
201
|
+
n(v) ? (s(), d("div", {
|
|
202
|
+
key: 1,
|
|
203
|
+
class: b(e.hideBackground ? "tv-demo-copy no-background" : "tv-demo-copy")
|
|
204
|
+
}, p(n(u)), 3)) : m("", !0)
|
|
205
|
+
])) : m("", !0),
|
|
206
|
+
n(c) === "docs" ? (s(), d("div", oe, [
|
|
207
|
+
t[10] || (t[10] = l("h2", null, "📖 Documentation", -1)),
|
|
208
|
+
n(k) ? (s(), d("div", ne, [
|
|
209
|
+
O(n(F), {
|
|
210
|
+
source: n(k),
|
|
211
|
+
html: ""
|
|
212
|
+
}, null, 8, ["source"])
|
|
213
|
+
])) : (s(), d("div", le, "No documentation available."))
|
|
214
|
+
])) : m("", !0)
|
|
215
|
+
])
|
|
216
|
+
], 6)
|
|
217
|
+
], 6));
|
|
218
|
+
}
|
|
219
|
+
}, me = /* @__PURE__ */ H(ae, [["__scopeId", "data-v-95f3b0ae"]]);
|
|
220
|
+
export {
|
|
221
|
+
me as default
|
|
222
|
+
};
|
package/package.json
ADDED
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@todovue/tv-demo",
|
|
3
|
+
"private": false,
|
|
4
|
+
"author": "Cristhian Daza",
|
|
5
|
+
"description": "This is a default demo display for TODOvue components. Use this area to showcase the component's usage, props, variants, and live behavior in isolation.",
|
|
6
|
+
"license": "MIT",
|
|
7
|
+
"version": "1.0.0",
|
|
8
|
+
"type": "module",
|
|
9
|
+
"repository": {
|
|
10
|
+
"type": "git",
|
|
11
|
+
"url": "https://github.com/TODOvue/tv-demo.git"
|
|
12
|
+
},
|
|
13
|
+
"bugs": {
|
|
14
|
+
"url": "https://github.com/TODOvue/tv-demo/issues"
|
|
15
|
+
},
|
|
16
|
+
"keywords": [
|
|
17
|
+
"todovue",
|
|
18
|
+
"front-end",
|
|
19
|
+
"web",
|
|
20
|
+
"vue",
|
|
21
|
+
"vuejs",
|
|
22
|
+
"vue-js",
|
|
23
|
+
"demo",
|
|
24
|
+
"show-demo",
|
|
25
|
+
"vue-demo",
|
|
26
|
+
"vue-demo-component"
|
|
27
|
+
],
|
|
28
|
+
"exports": {
|
|
29
|
+
".": {
|
|
30
|
+
"import": "./dist/tv-demo.es.js",
|
|
31
|
+
"require": "./dist/tv-demo.cjs.js"
|
|
32
|
+
}
|
|
33
|
+
},
|
|
34
|
+
"main": "dist/tv-demo.cjs.js",
|
|
35
|
+
"module": "dist/tv-demo.es.js",
|
|
36
|
+
"types": "dist/tv-demo.d.ts",
|
|
37
|
+
"files": [
|
|
38
|
+
"dist",
|
|
39
|
+
"LICENSE",
|
|
40
|
+
"README.md"
|
|
41
|
+
],
|
|
42
|
+
"engines": {
|
|
43
|
+
"node": ">=16.0.0"
|
|
44
|
+
},
|
|
45
|
+
"scripts": {
|
|
46
|
+
"dev": "vite",
|
|
47
|
+
"build": "vite build",
|
|
48
|
+
"build:demo": "cp README.md public/ && VITE_BUILD_TARGET=demo vite build"
|
|
49
|
+
},
|
|
50
|
+
"peerDependencies": {
|
|
51
|
+
"vue": "^3.0.0"
|
|
52
|
+
},
|
|
53
|
+
"dependencies": {
|
|
54
|
+
"github-markdown-css": "^5.0.0",
|
|
55
|
+
"vue-highlight-code": "^0.2.0",
|
|
56
|
+
"vue3-markdown-it": "^1.0.0"
|
|
57
|
+
},
|
|
58
|
+
"devDependencies": {
|
|
59
|
+
"@vitejs/plugin-vue": "^5.0.0",
|
|
60
|
+
"sass": "^1.0.0",
|
|
61
|
+
"vite": "^5.0.0",
|
|
62
|
+
"vite-plugin-css-injected-by-js": "^3.0.0",
|
|
63
|
+
"vite-plugin-dts": "^4.0.0"
|
|
64
|
+
}
|
|
65
|
+
}
|