Skip to content
This repository was archived by the owner on Nov 1, 2023. It is now read-only.

Commit f587372

Browse files
blro0319blro0319
committed
chore(nuxt): Update test pages (Copy from vue test pages)
1 parent bbffbc1 commit f587372

File tree

15 files changed

+286
-32
lines changed

15 files changed

+286
-32
lines changed

‎packages/nuxt/playground/pages/component/checkbox-group.vue‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
<script setup lang="ts">
2-
import { maxLength, required } from "@blro/ui-primitives-vue";
3-
import { VForm } from "#components";
2+
import { VForm } from "@blro/ui-primitives-vue";
43
54
const form = ref<InstanceType<typeof VForm>>();
65
const disabled = ref(false);
76
87
const value1 = ref([1]);
98
const value2 = ref(new Set());
109
const value3 = ref([]);
10+
const value4 = ref([]);
1111
</script>
1212

1313
<template>
@@ -70,6 +70,16 @@ const value3 = ref([]);
7070
</VForm>
7171
{{ value3 }}
7272
</article>
73+
<article>
74+
<h2>Max Length</h2>
75+
<VCheckboxGroup v-model="value4" :disabled="disabled" :max-length="3">
76+
<VField v-for="i in [1, 2, 3, 4, 5]">
77+
<VCheckbox :value="i" />
78+
<VFieldLabel>Item {{ i }}</VFieldLabel>
79+
</VField>
80+
</VCheckboxGroup>
81+
{{ value4 }}
82+
</article>
7383
</div>
7484
</template>
7585

‎packages/nuxt/playground/pages/component/checkbox.vue‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
11
<script setup lang="ts">
2-
import { required } from "@blro/ui-primitives-vue";
3-
42
const value1 = ref(false);
53
const value2 = ref("on");
64
const value3 = ref([]);
75
const value4 = ref(new Set());
86
const value5 = ref(false);
7+
const value6 = ref([]);
98
</script>
109

1110
<template>
@@ -56,5 +55,13 @@ const value5 = ref(false);
5655
<button>Submit</button>
5756
</VForm>
5857
</article>
58+
<article>
59+
<h2>Max Length</h2>
60+
<VField v-for="i in [1, 2, 3]">
61+
<VCheckbox v-model="value6" :value="i" :max-length="2" />
62+
<VFieldLabel>{{ i }}</VFieldLabel>
63+
</VField>
64+
{{ value6 }}
65+
</article>
5966
</div>
6067
</template>

‎packages/nuxt/playground/pages/component/dialog.vue‎

Lines changed: 20 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script setup lang="ts">
2-
import { VDialog } from "#components";
2+
import { VDialog } from "@blro/ui-primitives-vue";
33
44
const basic = ref<InstanceType<typeof VDialog>>();
55
const transition = ref<InstanceType<typeof VDialog>>();
@@ -9,6 +9,8 @@ const cancelEscape = ref<InstanceType<typeof VDialog>>();
99
const cancelHistory = ref<InstanceType<typeof VDialog>>();
1010
const preventCancel = ref<InstanceType<typeof VDialog>>();
1111
const halfPreventCancel = ref<InstanceType<typeof VDialog>>();
12+
const nested = ref<InstanceType<typeof VDialog>>();
13+
const nested2 = ref<InstanceType<typeof VDialog>>();
1214
1315
function preventCancelHalf(event: Event) {
1416
if (Math.random() < 0.5) event.preventDefault();
@@ -35,10 +37,12 @@ function preventCancelHalf(event: Event) {
3537
<button @click="transition?.show()">Show</button>
3638
<button @click="transition?.showModal()">Show Modal</button>
3739
</div>
38-
<VDialog :transition="{ name: 'dialog__transition' }" ref="transition">
39-
Hello, Transition Dialog!
40-
<button @click="transition?.close()">Close</button>
41-
</VDialog>
40+
<VTransition name="dialog__transition">
41+
<VDialog ref="transition">
42+
Hello, Transition Dialog!
43+
<button @click="transition?.close()">Close</button>
44+
</VDialog>
45+
</VTransition>
4246
</article>
4347
<article>
4448
<h2>Title & Description</h2>
@@ -88,6 +92,17 @@ function preventCancelHalf(event: Event) {
8892
<button @click="halfPreventCancel?.cancel()">Cancel</button>
8993
</VDialog>
9094
</article>
95+
<article>
96+
<h2>Nested Dialog</h2>
97+
<div class="dialog__button-group">
98+
<button @click="nested?.showModal()">Show</button>
99+
</div>
100+
<VDialog ref="nested">
101+
This is a dialog.
102+
<button @click="nested2?.showModal()">Show Nested</button>
103+
<VDialog ref="nested2">This is a nested dialog.</VDialog>
104+
</VDialog>
105+
</article>
91106
</div>
92107
</template>
93108

‎packages/nuxt/playground/pages/component/field.vue‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
<script setup lang="ts">
2-
import { maxLength, required } from "@blro/ui-primitives-vue";
3-
import { VField, VForm } from "#components";
2+
import { VField, VForm } from "@blro/ui-primitives-vue";
43
54
const value1 = ref("");
65
const value2 = ref("");
@@ -57,7 +56,7 @@ const form2 = ref<InstanceType<typeof VForm>>();
5756
<article>
5857
<h2>Reset</h2>
5958
<VForm ref="form2">
60-
<VField report-when="change submit">
59+
<VField :report-when="['change', 'submit']">
6160
<VTextInput v-model="value5" :rules="[required(), maxLength(8)]" />
6261
<VFieldError />
6362
</VField>

‎packages/nuxt/playground/pages/component/form.vue‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
11
<script setup lang="ts">
2-
import { integer, pattern, required } from "@blro/ui-primitives-vue";
3-
42
const value1 = ref("");
53
const value2 = ref("");
64
</script>

‎packages/nuxt/playground/pages/component/number-input.vue‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<script setup lang="ts">
2+
const value1 = ref(0);
3+
const invalid1 = ref(false);
4+
5+
const value2 = ref(0);
6+
const value3 = ref(0);
7+
const value4 = ref(0);
8+
const value5 = ref(0);
9+
</script>
10+
11+
<template>
12+
<div class="text-input">
13+
<h1>VNumberInput</h1>
14+
<article>
15+
<h2>Basic Usage</h2>
16+
<VField report-when="change">
17+
<VFieldLabel>Label</VFieldLabel>
18+
<VFieldDescription>Description</VFieldDescription>
19+
<VNumberInput
20+
v-model="value1"
21+
:rules="[min(5)]"
22+
@valid="invalid1 = false"
23+
@invalid="invalid1 = true"
24+
/>
25+
</VField>
26+
<output class="out">{{ value1 }}</output>
27+
<output class="out">{{ invalid1 }}</output>
28+
</article>
29+
<article>
30+
<h2>Min/Max</h2>
31+
<VNumberInput v-model="value2" :min="-100" :max="100" />
32+
<output class="out">{{ value2 }}</output>
33+
</article>
34+
<article>
35+
<h2>Integer Only</h2>
36+
<VNumberInput v-model="value3" :step="1" />
37+
<output class="out">{{ value3 }}</output>
38+
</article>
39+
<article>
40+
<h2>Positive Only</h2>
41+
<VNumberInput v-model="value4" :min="0" />
42+
<output class="out">{{ value4 }}</output>
43+
</article>
44+
<article>
45+
<h2>Control Step</h2>
46+
<VNumberInput
47+
v-model="value5"
48+
:min="-9950"
49+
:max="550"
50+
:control-step="100"
51+
/>
52+
<output class="out">{{ value5 }}</output>
53+
</article>
54+
</div>
55+
</template>
56+
57+
<style lang="scss" scoped>
58+
.out {
59+
display: block;
60+
}
61+
</style>

‎packages/nuxt/playground/pages/component/popover.vue‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<template>
2+
<div class="popover">
3+
<h1>VPopover</h1>
4+
<article>
5+
<h2>Basic Usage</h2>
6+
<VPopover>
7+
<VPopoverTrigger>Trigger</VPopoverTrigger>
8+
<VPopoverContent>Content</VPopoverContent>
9+
</VPopover>
10+
</article>
11+
<article>
12+
<h2>Transition</h2>
13+
<VPopover>
14+
<VPopoverTrigger>Trigger</VPopoverTrigger>
15+
<VTransition name="popover">
16+
<VPopoverContent>Content</VPopoverContent>
17+
</VTransition>
18+
</VPopover>
19+
</article>
20+
</div>
21+
</template>
22+
23+
<style lang="scss" scoped>
24+
.popover {
25+
&-enter-active,
26+
&-leave-active {
27+
transition: opacity 300ms;
28+
}
29+
&-enter-from,
30+
&-leave-to {
31+
opacity: 0;
32+
}
33+
}
34+
</style>

‎packages/nuxt/playground/pages/component/progress.vue‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<template>
2+
<div>
3+
<h1>VProgress</h1>
4+
<h2>Basic</h2>
5+
<VProgress :value="5" :min="0" :max="10" class="progress" />
6+
</div>
7+
</template>
8+
9+
<style lang="scss" scoped>
10+
.progress {
11+
width: 128px;
12+
height: 128px;
13+
14+
background-color: black;
15+
}
16+
</style>

‎packages/nuxt/playground/pages/component/radio-group.vue‎

Lines changed: 30 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,47 @@
11
<script setup lang="ts">
2-
import { VRadioGroup } from "#components";
2+
import { VRadioGroup } from "@blro/ui-primitives-vue";
33
44
const group = ref<InstanceType<typeof VRadioGroup>>();
55
6-
const value1 = ref("");
6+
const value1 = ref(1);
7+
const value2 = ref("1");
78
</script>
89

910
<template>
1011
<div class="radio-group">
1112
<h1>VRadioGroup</h1>
1213
<article>
13-
<h2>Basic Usage</h2>
14+
<h2>Basic Usage - Number</h2>
1415
<VRadioGroup v-model="value1" ref="group">
1516
<VRadioGroupTitle>Group Title</VRadioGroupTitle>
1617
<VRadioGroupDescription>Group description</VRadioGroupDescription>
17-
<VField v-for="i in [1, 2, 3, 4, 5]" :key="i">
18-
<div style="display: block">
19-
<VRadio :value="`${i}`" />
20-
<VFieldLabel>Item {{ i }}</VFieldLabel>
21-
</div>
22-
</VField>
18+
<template v-for="i in 5" :key="i">
19+
<VField>
20+
<div style="display: block">
21+
<VRadio :value="i" />
22+
<VFieldLabel>Item {{ i }}</VFieldLabel>
23+
</div>
24+
</VField>
25+
</template>
2326
</VRadioGroup>
27+
{{ value1 }}
28+
<button @click="group?.focus()">Focus</button>
29+
</article>
30+
<article>
31+
<h2>Basic Usage - String</h2>
32+
<VRadioGroup v-model="value2" ref="group">
33+
<VRadioGroupTitle>Group Title</VRadioGroupTitle>
34+
<VRadioGroupDescription>Group description</VRadioGroupDescription>
35+
<template v-for="i in 5" :key="i">
36+
<VField>
37+
<div style="display: block">
38+
<VRadio :value="String(i)" />
39+
<VFieldLabel>Item {{ i }}</VFieldLabel>
40+
</div>
41+
</VField>
42+
</template>
43+
</VRadioGroup>
44+
{{ value2 }}
2445
<button @click="group?.focus()">Focus</button>
2546
</article>
2647
</div>

‎packages/nuxt/playground/pages/component/radio.vue‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script setup lang="ts">
2-
import { VRadio } from "#components";
2+
import { VRadio } from "@blro/ui-primitives-vue";
33
44
const input = ref<InstanceType<typeof VRadio>>();
55
@@ -21,7 +21,12 @@ const value1 = ref("1");
2121
</VField>
2222
<VField v-for="i in [2, 3, 4, 5]" :key="i">
2323
<div style="display: block">
24-
<VRadio v-model="value1" name="1" :value="`${i}`" />
24+
<VRadio
25+
v-model="value1"
26+
name="1"
27+
:value="`${i}`"
28+
:disabled="i === 4"
29+
/>
2530
<VFieldLabel>Item {{ i }}</VFieldLabel>
2631
</div>
2732
</VField>

0 commit comments

Comments
 (0)