@aerogel/cli 0.0.0-next.bf95405357e75d2e8b0268a5e8ce7b2b7dd0c895 → 0.0.0-next.c2e6acc000e97a1020c2e232678563c53884dd0e
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/package.json +1 -1
- package/src/commands/generate-component.test.ts +2 -2
- package/templates/app/package.json +3 -3
- package/templates/app/src/App.vue +2 -2
- package/templates/app/src/assets/css/main.css +1 -1
- package/templates/component-button/[component.name].vue +2 -2
- package/templates/component-checkbox/[component.name].vue +9 -9
- package/templates/component-checkbox-story/[component.name].story.vue +4 -4
- package/templates/component-input/[component.name].vue +6 -6
- package/templates/component-input-story/[component.name].story.vue +4 -4
- package/templates/overrides/components/overrides/AlertModal.vue +1 -1
- package/templates/overrides/components/overrides/ConfirmModal.vue +6 -6
- package/templates/overrides/components/overrides/LoadingModal.vue +2 -2
- package/templates/overrides/components/overrides/ModalWrapper.vue +4 -4
- package/templates/overrides/components/overrides/SnackbarNotification.vue +4 -4
- package/templates/overrides-story/Overrides.story.vue +11 -11
- package/templates/overrides/components/overrides/ErrorReportModal.vue +0 -35
package/package.json
CHANGED
|
@@ -60,7 +60,7 @@ describe('Generate Component command', () => {
|
|
|
60
60
|
await GenerateComponentCommand.run('FooBar', { input: true, story: true });
|
|
61
61
|
|
|
62
62
|
// Assert
|
|
63
|
-
FileMock.expectCreated('src/components/FooBar.vue').toContain('<
|
|
63
|
+
FileMock.expectCreated('src/components/FooBar.vue').toContain('<HeadlessInputInput v-bind="attrs" />');
|
|
64
64
|
FileMock.expectCreated('src/components/FooBar.story.vue').toContain('.story-foobar .variant-playground');
|
|
65
65
|
FileMock.expectCreated('src/components/FooBar.story.vue').toContain(
|
|
66
66
|
'<FooBar name="food" :label="label" :placeholder="placeholder" />',
|
|
@@ -82,7 +82,7 @@ describe('Generate Component command', () => {
|
|
|
82
82
|
|
|
83
83
|
// Assert
|
|
84
84
|
FileMock.expectCreated('src/components/FooBar.vue').toContain(
|
|
85
|
-
'<
|
|
85
|
+
'<HeadlessButton :class="variantClasses" :disabled="disabled">',
|
|
86
86
|
);
|
|
87
87
|
FileMock.expectCreated('src/components/FooBar.story.vue').toContain('.story-foobar .variant-playground');
|
|
88
88
|
FileMock.expectCreated('src/components/FooBar.story.vue').toContain('<FooBar :color="color">');
|
|
@@ -21,14 +21,14 @@
|
|
|
21
21
|
"@aerogel/core": "<% &dependencies.aerogelCore %>",
|
|
22
22
|
"@aerogel/plugin-i18n": "<% &dependencies.aerogelPluginI18n %>",
|
|
23
23
|
"@aerogel/plugin-soukai": "<% &dependencies.aerogelPluginSoukai %>",
|
|
24
|
-
"@intlify/unplugin-vue-i18n": "^0.
|
|
24
|
+
"@intlify/unplugin-vue-i18n": "^6.0.5",
|
|
25
25
|
"@noeldemartin/utils": "next",
|
|
26
26
|
"@tailwindcss/forms": "^0.5.10",
|
|
27
27
|
"@tailwindcss/typography": "^0.5.16",
|
|
28
28
|
"soukai": "next",
|
|
29
29
|
"tailwindcss": "^4.1.1",
|
|
30
|
-
"vue": "^3.
|
|
31
|
-
"vue-i18n": "
|
|
30
|
+
"vue": "^3.5.13",
|
|
31
|
+
"vue-i18n": "^11.1.2"
|
|
32
32
|
},
|
|
33
33
|
"devDependencies": {
|
|
34
34
|
"@aerogel/cli": "<% &dependencies.aerogelCli %>",
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<
|
|
2
|
+
<AppLayout class="bg-blue-50">
|
|
3
3
|
<main class="flex grow flex-col items-center justify-center">
|
|
4
4
|
<h1 class="text-4xl font-semibold">
|
|
5
5
|
{{ $t('home.title') }}
|
|
@@ -8,5 +8,5 @@
|
|
|
8
8
|
{{ $t('home.getStarted') }}
|
|
9
9
|
</a>
|
|
10
10
|
</main>
|
|
11
|
-
</
|
|
11
|
+
</AppLayout>
|
|
12
12
|
</template>
|
|
@@ -1,26 +1,26 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<
|
|
2
|
+
<HeadlessInput
|
|
3
3
|
ref="$input"
|
|
4
4
|
:name="name"
|
|
5
5
|
:class="className"
|
|
6
6
|
:label="label"
|
|
7
7
|
>
|
|
8
|
-
<
|
|
8
|
+
<HeadlessInputInput
|
|
9
9
|
v-bind="attrs"
|
|
10
10
|
type="checkbox"
|
|
11
11
|
/>
|
|
12
12
|
<div v-if="$slots.default">
|
|
13
|
-
<
|
|
13
|
+
<HeadlessInputLabel>
|
|
14
14
|
<slot />
|
|
15
|
-
</
|
|
16
|
-
<
|
|
15
|
+
</HeadlessInputLabel>
|
|
16
|
+
<HeadlessInputError />
|
|
17
17
|
</div>
|
|
18
|
-
</
|
|
18
|
+
</HeadlessInput>
|
|
19
19
|
</template>
|
|
20
20
|
|
|
21
21
|
<script setup lang="ts">
|
|
22
|
-
import {
|
|
23
|
-
import type {
|
|
22
|
+
import { HeadlessInputLabel, componentRef, stringProp, useInputAttrs } from '@aerogel/core';
|
|
23
|
+
import type { IHeadlessInput } from '@aerogel/core';
|
|
24
24
|
|
|
25
25
|
defineOptions({ inheritAttrs: false });
|
|
26
26
|
defineProps({
|
|
@@ -29,6 +29,6 @@ defineProps({
|
|
|
29
29
|
inputClass: stringProp(''),
|
|
30
30
|
});
|
|
31
31
|
|
|
32
|
-
const $input = componentRef<
|
|
32
|
+
const $input = componentRef<IHeadlessInput>();
|
|
33
33
|
const [attrs, className] = useInputAttrs();
|
|
34
34
|
</script>
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<Story group="base" :layout="{ type: 'grid' }">
|
|
3
3
|
<Variant title="Playground">
|
|
4
|
-
<
|
|
4
|
+
<Form :form="form" class="m-1">
|
|
5
5
|
<<% component.name %> name="accept" :form="form">
|
|
6
6
|
{{ label }}
|
|
7
7
|
</<% component.name %>>
|
|
8
|
-
</
|
|
8
|
+
</Form>
|
|
9
9
|
|
|
10
10
|
<template #controls>
|
|
11
11
|
<HstText v-model="label" title="Label" />
|
|
@@ -31,11 +31,11 @@
|
|
|
31
31
|
</Variant>
|
|
32
32
|
|
|
33
33
|
<Variant title="Error">
|
|
34
|
-
<
|
|
34
|
+
<Form :form="errorForm" class="m-1">
|
|
35
35
|
<<% component.name %> name="accept">
|
|
36
36
|
Accept Terms & Conditions
|
|
37
37
|
</<% component.name %>>
|
|
38
|
-
</
|
|
38
|
+
</Form>
|
|
39
39
|
</Variant>
|
|
40
40
|
</Story>
|
|
41
41
|
</template>
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<
|
|
3
|
-
<
|
|
4
|
-
<
|
|
5
|
-
<
|
|
6
|
-
<
|
|
7
|
-
</
|
|
2
|
+
<HeadlessInput v-bind="props">
|
|
3
|
+
<HeadlessInputLabel />
|
|
4
|
+
<HeadlessInputInput v-bind="attrs" />
|
|
5
|
+
<HeadlessInputDescription />
|
|
6
|
+
<HeadlessInputError />
|
|
7
|
+
</HeadlessInput>
|
|
8
8
|
</template>
|
|
9
9
|
|
|
10
10
|
<script setup lang="ts">
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<Story :layout="{ type: 'grid' }">
|
|
3
3
|
<Variant title="Playground">
|
|
4
|
-
<
|
|
4
|
+
<Form :form="form">
|
|
5
5
|
<<% component.name %> name="food" :label="label" :placeholder="placeholder" />
|
|
6
|
-
</
|
|
6
|
+
</Form>
|
|
7
7
|
|
|
8
8
|
<template #controls>
|
|
9
9
|
<HstText v-model="label" title="Label" />
|
|
@@ -25,14 +25,14 @@
|
|
|
25
25
|
</Variant>
|
|
26
26
|
|
|
27
27
|
<Variant title="Error">
|
|
28
|
-
<
|
|
28
|
+
<Form :form="errorForm">
|
|
29
29
|
<<% component.name %>
|
|
30
30
|
name="food"
|
|
31
31
|
label="What's the best food?"
|
|
32
32
|
placeholder="Ramen"
|
|
33
33
|
class=":focus :focus-visible"
|
|
34
34
|
/>
|
|
35
|
-
</
|
|
35
|
+
</Form>
|
|
36
36
|
</Variant>
|
|
37
37
|
</Story>
|
|
38
38
|
</template>
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<ModalWrapper v-slot="{ close }" :title="title"
|
|
3
|
-
<
|
|
2
|
+
<ModalWrapper v-slot="{ close }" :title="title" persistent>
|
|
3
|
+
<Markdown :text="message" :actions="actions" />
|
|
4
4
|
<div class="mt-4 flex flex-row-reverse">
|
|
5
|
-
<
|
|
5
|
+
<Button :variant="acceptColor" @click="close(true)">
|
|
6
6
|
{{ renderedAcceptText }}
|
|
7
|
-
</
|
|
8
|
-
<
|
|
7
|
+
</Button>
|
|
8
|
+
<Button v-if="!required" :variant="cancelColor" class="mr-2" @click="close(false)">
|
|
9
9
|
{{ renderedCancelText }}
|
|
10
|
-
</
|
|
10
|
+
</Button>
|
|
11
11
|
</div>
|
|
12
12
|
</ModalWrapper>
|
|
13
13
|
</template>
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
<AGHeadlessModal ref="$modal" v-slot="{ close }" v-bind="props">
|
|
3
3
|
<AGHeadlessModalPanel>
|
|
4
4
|
<AGHeadlessModalTitle v-if="title">
|
|
5
|
-
<
|
|
5
|
+
<Markdown :text="title" inline />
|
|
6
6
|
</AGHeadlessModalTitle>
|
|
7
7
|
<slot :close="close" />
|
|
8
8
|
</AGHeadlessModalPanel>
|
|
@@ -11,12 +11,12 @@
|
|
|
11
11
|
|
|
12
12
|
<script setup lang="ts">
|
|
13
13
|
import { ref } from 'vue';
|
|
14
|
-
import {
|
|
14
|
+
import { modalExpose, modalProps } from '@aerogel/core';
|
|
15
15
|
import type { IAGHeadlessModal, IAGModal } from '@aerogel/core';
|
|
16
16
|
|
|
17
|
-
const props = defineProps(
|
|
17
|
+
const props = defineProps(modalProps());
|
|
18
18
|
const $modal = ref<IAGHeadlessModal>();
|
|
19
19
|
|
|
20
20
|
defineOptions({ inheritAttrs: false });
|
|
21
|
-
defineExpose
|
|
21
|
+
defineExpose(modalExpose($modal));
|
|
22
22
|
</script>
|
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<AGHeadlessSnackbar :class="colorClasses">
|
|
3
|
-
<
|
|
3
|
+
<Markdown :text="message" inline />
|
|
4
4
|
|
|
5
|
-
<
|
|
5
|
+
<Button
|
|
6
6
|
v-for="(action, i) of actions"
|
|
7
7
|
:key="i"
|
|
8
|
-
:
|
|
8
|
+
:variant="color"
|
|
9
9
|
@click="activate(action)"
|
|
10
10
|
>
|
|
11
11
|
{{ action.text }}
|
|
12
|
-
</
|
|
12
|
+
</Button>
|
|
13
13
|
</AGHeadlessSnackbar>
|
|
14
14
|
</template>
|
|
15
15
|
|
|
@@ -2,24 +2,24 @@
|
|
|
2
2
|
<Story :layout="{ type: 'grid', width: '90%' }">
|
|
3
3
|
<Variant title="Playground">
|
|
4
4
|
<div class="flex space-x-3">
|
|
5
|
-
<
|
|
5
|
+
<Button @click="$ui.alert(alertTitle, alertMessage)">
|
|
6
6
|
Alert
|
|
7
|
-
</
|
|
8
|
-
<
|
|
7
|
+
</Button>
|
|
8
|
+
<Button @click="$ui.confirm(confirmTitle, confirmMessage)">
|
|
9
9
|
Confirm
|
|
10
|
-
</
|
|
11
|
-
<
|
|
10
|
+
</Button>
|
|
11
|
+
<Button @click="$ui.loading(loadingMessage, after({ seconds: loadingDuration }))">
|
|
12
12
|
Loading
|
|
13
|
-
</
|
|
14
|
-
<
|
|
13
|
+
</Button>
|
|
14
|
+
<Button @click="$ui.showSnackbar(snackbarMessage, snackbarOptions)">
|
|
15
15
|
Snackbar
|
|
16
|
-
</
|
|
17
|
-
<
|
|
16
|
+
</Button>
|
|
17
|
+
<Button @click="$errors.inspect(errorReports)">
|
|
18
18
|
Error Report
|
|
19
|
-
</
|
|
19
|
+
</Button>
|
|
20
20
|
</div>
|
|
21
21
|
|
|
22
|
-
<
|
|
22
|
+
<AppOverlays />
|
|
23
23
|
|
|
24
24
|
<template #controls>
|
|
25
25
|
<HstText v-model="alertTitle" title="Alert Title" />
|
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<ModalWrapper>
|
|
3
|
-
<AGErrorReportModalTitle
|
|
4
|
-
:report="report"
|
|
5
|
-
:current-report="activeReportIndex + 1"
|
|
6
|
-
:total-reports="reports.length"
|
|
7
|
-
/>
|
|
8
|
-
<AGButton color="clear" :disabled="activeReportIndex === 0" @click="activeReportIndex--">
|
|
9
|
-
{{ previousReportText }}
|
|
10
|
-
</AGButton>
|
|
11
|
-
<AGButton color="clear" :disabled="activeReportIndex === reports.length - 1" @click="activeReportIndex++">
|
|
12
|
-
{{ nextReportText }}
|
|
13
|
-
</AGButton>
|
|
14
|
-
<AGErrorReportModalButtons :report="report">
|
|
15
|
-
<template
|
|
16
|
-
#default="{ url, handler, iconComponent, description }: IAGErrorReportModalButtonsDefaultSlotProps"
|
|
17
|
-
>
|
|
18
|
-
<AGButton :url="url" :aria-label="description" @click="handler">
|
|
19
|
-
<component :is="iconComponent" />
|
|
20
|
-
{{ description }}
|
|
21
|
-
</AGButton>
|
|
22
|
-
</template>
|
|
23
|
-
</AGErrorReportModalButtons>
|
|
24
|
-
<AGMarkdown v-if="report.description" :text="report.description" />
|
|
25
|
-
<pre v-text="details" />
|
|
26
|
-
</ModalWrapper>
|
|
27
|
-
</template>
|
|
28
|
-
|
|
29
|
-
<script setup lang="ts">
|
|
30
|
-
import { useErrorReportModal, useErrorReportModalProps } from '@aerogel/core';
|
|
31
|
-
import type { IAGErrorReportModalButtonsDefaultSlotProps } from '@aerogel/core';
|
|
32
|
-
|
|
33
|
-
const props = defineProps(useErrorReportModalProps());
|
|
34
|
-
const { activeReportIndex, details, nextReportText, previousReportText, report } = useErrorReportModal(props);
|
|
35
|
-
</script>
|