1+ <script setup>
2+ import { ref , computed , onMounted } from " vue"
3+ import LocalVueUiCarouselTable from ' ../src/components/vue-ui-carousel-table.vue'
4+ import LocalVueDataUi from ' ../src/components/vue-data-ui.vue'
5+ import Box from " ./Box.vue"
6+ import convertArrayToObject from " ./convertModel"
7+ import { useArena } from " ../src/useArena"
8+
9+ const { local , build , vduiLocal , vduiBuild , toggleTable , toggleLabels , toggleStack } = useArena ()
10+
11+ const model = ref ([
12+ { key: ' responsiveBreakpoint' : 400 , type: ' number' : 300 , max: 800 },
13+ { key: ' animation.use' : true , type: ' checkbox'
14+ { key: ' animation.speedMs' : 1000 , type: ' number' : ' range' : 200 , max: 2000 },
15+ { key: ' animation.pauseOnHover' : true , type: ' checkbox'
16+ { key: ' border.size' : 0 , type: ' number' : 0 , max: 12 },
17+ { key: ' border.color' : ' #1A1A1A' : ' color'
18+
19+ { key: ' style.backgroundColor' : ' #FFFFFF' : ' color'
20+ { key: ' style.color' : ' #1A1A1A' : ' color'
21+ { key: ' style.fontFamily' : ' inherit' : ' text'
22+
23+ { key: ' caption.text' : ' Lorem ipsum dolor sit amet' : ' text'
24+
25+ { key: ' caption.padding.top' : 12 , type: ' number' : 0 , max: 24 },
26+ { key: ' caption.padding.right' : 12 , type: ' number' : 0 , max: 24 },
27+ { key: ' caption.padding.bottom' : 12 , type: ' number' : 0 , max: 24 },
28+ { key: ' caption.padding.left' : 12 , type: ' number' : 0 , max: 24 },
29+
30+ { key: ' caption.style.backgroundColor' : ' #FFFFFF' : ' color'
31+ { key: ' caption.style.color' : ' #1A1A1A' : ' color'
32+ { key: ' caption.style.fontSize' : ' 16px' : ' text'
33+ { key: ' caption.style.fontWeight' : ' bold' : ' text'
34+ { key: ' caption.style.textAlign' : ' left' : ' select' : [' left' ' center' ' right'
35+
36+ { key: ' thead.tr.style.backgroundColor' : ' #FFFFFF' : ' color'
37+ { key: ' thead.tr.style.boxShadow' : ' 0px 6px 12px -6px #1A1A1A50'
38+
39+ { key: ' thead.tr.border.size' : 0 , type: ' number' : 0 , max: 12 },
40+ { key: ' thead.tr.border.color' : ' #1A1A1A' : ' color'
41+ { key: ' thead.tr.th.border.size' : 0 , type: ' number' : 0 , max: 12 },
42+ { key: ' thead.tr.th.border.color' : ' #1A1A1A' : ' color'
43+ { key: ' thead.tr.th.style.textAlign' : ' right' : ' select' : [' left' ' center' ' right'
44+ { key: ' thead.tr.th.style.fontVariantNumeric' : ' tabular-nums' : ' text'
45+
46+ { key: ' thead.tr.th.padding.top' : 0 , type: ' number' : 0 , max: 24 },
47+ { key: ' thead.tr.th.padding.right' : 12 , type: ' number' : 0 , max: 24 },
48+ { key: ' thead.tr.th.padding.bottom' : 0 , type: ' number' : 0 , max: 24 },
49+ { key: ' thead.tr.th.padding.left' : 0 , type: ' number' : 0 , max: 24 },
50+
51+ { key: ' tbody.tr.visible' : 5 , type: ' number' : 1 , max: 100 },
52+ { key: ' tbody.tr.height' : 32 , type: ' number' : 12 , max: 100 },
53+ { key: ' tbody.tr.style.backgroundColor' : ' #FFFFFF' : ' color'
54+ { key: ' tbody.tr.style.color' : ' #1A1A1A' : ' color'
55+
56+ { key: ' tbody.tr.border.size' : 0 , type: ' number' : 0 , max: 12 },
57+ { key: ' tbody.tr.border.color' : ' #1A1A1A' : ' color'
58+
59+ { key: ' tbody.tr.td.alternateColor' : true , type: ' checkbox'
60+ { key: ' tbody.tr.td.alternateOpacity' : 0.5 , type: ' range' : 0 , max: 1 , step: 0.01 },
61+ { key: ' tbody.tr.td.style.fontVariantNumeric' : ' tabular-nums' : ' text'
62+ { key: ' tbody.tr.td.style.textAlign' : ' right' : ' select' : [' left' ' center' ' right'
63+ { key: ' tbody.tr.td.style.backgroundColor' : ' #e1e5e8' : ' color'
64+
65+ { key: ' tbody.tr.td.border.size' : 0 , type: ' number' : 0 , max: 12 },
66+ { key: ' tbody.tr.td.border.color' : ' #1A1A1A' : ' color'
67+
68+ { key: ' tbody.tr.td.padding.top' : 0 , type: ' number' : 0 , max: 24 },
69+ { key: ' tbody.tr.td.padding.right' : 12 , type: ' number' : 0 , max: 24 },
70+ { key: ' tbody.tr.td.padding.bottom' : 0 , type: ' number' : 0 , max: 24 },
71+ { key: ' tbody.tr.td.padding.left' : 0 , type: ' number' : 0 , max: 24 },
72+
73+ { key: ' userOptions.show' : true , type: ' checkbox'
74+ { key: ' userOptions.buttons.pdf' : true , type: ' checkbox'
75+ { key: ' userOptions.buttons.img' : true , type: ' checkbox'
76+ { key: ' userOptions.buttons.csv' : true , type: ' checkbox'
77+ { key: ' userOptions.buttons.animation' : true , type: ' checkbox'
78+ { key: ' userOptions.buttons.fullscreen' : true , type: ' checkbox'
79+
80+ { key: ' userOptions.buttonTitles.pdf' : ' DOWNLOAD PDF' : ' text'
81+ { key: ' userOptions.buttonTitles.csv' : ' DOWNLOAD CSV' : ' text'
82+ { key: ' userOptions.buttonTitles.img' : ' DOWNLOAD PNG' : ' text'
83+ { key: ' userOptions.buttonTitles.animation' : ' TOGGLE ANIMATION' : ' text'
84+ { key: ' userOptions.buttonTitles.fullscreen' : ' TOGGLE FULLSCREEN' : ' text'
85+ { key: ' userOptions.buttonTitles.open' : ' OPEN OPTIONS' : ' text'
86+ { key: ' userOptions.buttonTitles.close' : ' CLOSE OPTIONS' : ' text'
87+ ])
88+
89+ const config = computed (() => {
90+ const c = convertArrayToObject (model .value );
91+ return {
92+ ... c
93+ }
94+ })
95+
96+ function generateBody (n ) {
97+ let arr = [];
98+ for (let i = 0 ; i < n; i += 1 ) {
99+ arr .push ([
100+ Math .round (Math .random ()* Math .random ()* 1000000 ),
101+ Math .round (Math .random ()* Math .random ()* 1000000 ),
102+ Math .round (Math .random ()* Math .random ()* 1000000 ),
103+ Math .round (Math .random ()* Math .random ()* 1000000 ),
104+ Math .round (Math .random ()* Math .random ()* 1000000 ),
105+ Math .round (Math .random ()* Math .random ()* 1000000 ),
106+ Math .round (Math .random ()* Math .random ()* 1000000 ),
107+ ])
108+ }
109+ return arr
110+ }
111+
112+ const dataset = ref ({
113+ head: [' Column 1 has a long name' ' col2' ' col3' ' col4' ' col 5' ' col 6' ' col 7'
114+ body: generateBody (12 )
115+ })
116+
117+ const step = ref (0 )
118+
119+ const localComponent = ref (null );
120+ const buildComponent = ref (null );
121+ const vduiLocalComponent = ref (null );
122+ const vduiBuildComponent = ref (null );
123+
124+ function toggleAnimLocal () {
125+ localComponent .value .toggleAnimation ();
126+ }
127+ function pauseLocal () {
128+ localComponent .value .pauseAnimation ();
129+ }
130+ function resumeLocal () {
131+ localComponent .value .resumeAnimation ();
132+ }
133+
134+ function toggleAnimVduiLocal () {
135+ vduiLocalComponent .value .toggleAnimation ();
136+ }
137+
138+ function pauseVduiLocal () {
139+ vduiLocalComponent .value .pauseAnimation ();
140+ }
141+
142+ function resumeVduiLocal () {
143+ vduiLocalComponent .value .resumeAnimation ();
144+ }
145+
146+ function toggleAnimBuild () {
147+ if (buildComponent .value ) {
148+ buildComponent .value .toggleAnimation ();
149+ }
150+ }
151+
152+ function pauseBuild () {
153+ buildComponent .value .pauseAnimation ();
154+ }
155+
156+ function resumeBuild () {
157+ buildComponent .value .resumeAnimation ();
158+ }
159+
160+ function toggleAnimVduiBuild () {
161+ if (vduiBuildComponent .value ) {
162+ vduiBuildComponent .value .toggleAnimation ();
163+ }
164+ }
165+
166+ function pauseVduiBuild () {
167+ vduiBuildComponent .value .pauseAnimation ();
168+ }
169+
170+ function resumeVduiBuild () {
171+ vduiBuildComponent .value .resumeAnimation ();
172+ }
173+
174+ script >
175+
176+ <template >
177+ <Box >
178+ <template #title >VueUiCarouselTable</template >
179+
180+ <template #local >
181+ <button @click =" toggleAnimLocal" button >
182+ <button @click =" pauseLocal" button >
183+ <button @click =" resumeLocal" button >
184+ <LocalVueUiCarouselTable
185+ :config =" config"
186+ :dataset =" dataset"
187+ ref =" localComponent"
188+ >
189+ <template #caption >
190+ Lorem ipsum dolor
191+ </template >
192+ <template #th =" {th } " >
193+ {{ th }}
194+ </template >
195+ </LocalVueUiCarouselTable >
196+ </template >
197+
198+ <template #VDUI-local >
199+ <button @click =" toggleAnimVduiLocal" button >
200+ <button @click =" pauseVduiLocal" button >
201+ <button @click =" resumeVduiLocal" button >
202+ <LocalVueDataUi
203+ component =" VueUiCarouselTable"
204+ ref =" vduiLocalComponent"
205+ :config =" config"
206+ :dataset =" dataset"
207+ >
208+
209+ </LocalVueDataUi >
210+ </template >
211+
212+ <template #build >
213+ <button @click =" toggleAnimBuild" button >
214+ <button @click =" pauseBuild" button >
215+ <button @click =" resumeBuild" button >
216+ <VueUiCarouselTable
217+ ref =" buildComponent"
218+ :dataset =" dataset"
219+ :config =" config"
220+ >
221+ </VueUiCarouselTable >
222+ </template >
223+
224+ <template #VDUI-build >
225+ <button @click =" toggleAnimVduiBuild" button >
226+ <button @click =" pauseVduiBuild" button >
227+ <button @click =" resumeVduiBuild" button >
228+ <VueDataUi
229+ ref =" vduiBuildComponent"
230+ component =" VueUiCarouselTable"
231+ :dataset =" dataset"
232+ :config =" config"
233+ >
234+
235+ </VueDataUi >
236+ </template >
237+
238+ <template #knobs >
239+ <div
240+ style =" display flex ; flex-direction row ; flex-wrap wrap ; align-items center ; width 100% ; color #CCCCCC ; gap 24px ;"
241+ <div v-for =" knob in model"
242+ <label style =" font-size 10px " label >
243+ <div
244+ style =" display flex ; flex-direction row ; flex-wrap wrap ; align-items center ; gap 6px ; height 40px "
245+ <input v-if =" !['none', 'select'].includes(knob.type)" :step =" knob.step" :type =" knob.type" :min =" knob.min ?? 0"
246+ :max =" knob.max ?? 0" v-model =" knob.def" @change =" step += 1"
247+ <select v-if =" knob.type === 'select'" v-model =" knob.def" @change =" step += 1"
248+ <option v-for =" opt in knob.options" option >
249+ </select >
250+ </div >
251+ </div >
252+ </div >
253+ </template >
254+
255+ <template #config >
256+ {{ config }}
257+ </template >
258+
259+ </Box >
260+ </template >
0 commit comments