@aerogel/cli 0.0.0-next.3e4851f6fd2a4f0f0362da0c88820a5f4b082052 → 0.0.0-next.444e75523f9ddc8b8de7cd36b333f476ef86a46c
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
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@aerogel/cli",
|
|
3
3
|
"description": "Aerogel CLI",
|
|
4
|
-
"version": "0.0.0-next.
|
|
4
|
+
"version": "0.0.0-next.444e75523f9ddc8b8de7cd36b333f476ef86a46c",
|
|
5
5
|
"main": "dist/aerogel-cli.cjs.js",
|
|
6
6
|
"module": "dist/aerogel-cli.esm.js",
|
|
7
7
|
"types": "dist/aerogel-cli.d.ts",
|
|
@@ -1,15 +1,16 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<AGHeadlessButton :class="
|
|
2
|
+
<AGHeadlessButton :class="variantClasses" :disabled="disabled">
|
|
3
3
|
<slot />
|
|
4
4
|
</AGHeadlessButton>
|
|
5
5
|
</template>
|
|
6
6
|
|
|
7
7
|
<script setup lang="ts">
|
|
8
|
-
import { Colors, enumProp } from '@aerogel/core';
|
|
8
|
+
import { Colors, booleanProp, enumProp, removeInteractiveClasses } from '@aerogel/core';
|
|
9
9
|
import { computed } from 'vue';
|
|
10
10
|
|
|
11
11
|
const props = defineProps({
|
|
12
12
|
color: enumProp(Colors, Colors.Primary),
|
|
13
|
+
disabled: booleanProp(),
|
|
13
14
|
});
|
|
14
15
|
|
|
15
16
|
const colorClasses = computed(() => {
|
|
@@ -29,4 +30,13 @@ const colorClasses = computed(() => {
|
|
|
29
30
|
return '';
|
|
30
31
|
}
|
|
31
32
|
});
|
|
33
|
+
|
|
34
|
+
const variantClasses = computed(() => {
|
|
35
|
+
if (props.disabled) {
|
|
36
|
+
// Add additional classes for disabled state here.
|
|
37
|
+
return removeInteractiveClasses(colorClasses.value);
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
return colorClasses.value;
|
|
41
|
+
});
|
|
32
42
|
</script>
|
|
@@ -29,6 +29,12 @@
|
|
|
29
29
|
</<% component.name %>>
|
|
30
30
|
</Variant>
|
|
31
31
|
|
|
32
|
+
<Variant title="Disabled">
|
|
33
|
+
<<% component.name %> disabled>
|
|
34
|
+
You can't click me
|
|
35
|
+
</<% component.name %>>
|
|
36
|
+
</Variant>
|
|
37
|
+
|
|
32
38
|
<Variant title="Colors" :layout="{ width: '300px' }">
|
|
33
39
|
<div class="flex items-center gap-2">
|
|
34
40
|
<<% component.name %> color="primary">
|
|
@@ -61,7 +67,7 @@ const colorOptions = invert(Colors);
|
|
|
61
67
|
|
|
62
68
|
<style>
|
|
63
69
|
.story-<% component.slug %> {
|
|
64
|
-
grid-template-columns: repeat(
|
|
70
|
+
grid-template-columns: repeat(2, 300px) !important;
|
|
65
71
|
}
|
|
66
72
|
|
|
67
73
|
.story-<% component.slug %> .variant-playground,
|
|
@@ -1,50 +1,58 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<Story>
|
|
3
|
-
<
|
|
4
|
-
<
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
2
|
+
<Story :layout="{ type: 'grid', width: '90%' }">
|
|
3
|
+
<Variant title="Playground">
|
|
4
|
+
<div class="flex space-x-3">
|
|
5
|
+
<AGButton @click="$ui.alert(alertTitle, alertMessage)">
|
|
6
|
+
Alert
|
|
7
|
+
</AGButton>
|
|
8
|
+
<AGButton @click="$ui.confirm(confirmTitle, confirmMessage)">
|
|
9
|
+
Confirm
|
|
10
|
+
</AGButton>
|
|
11
|
+
<AGButton @click="$ui.loading(loadingMessage, after({ seconds: loadingDuration }))">
|
|
12
|
+
Loading
|
|
13
|
+
</AGButton>
|
|
14
|
+
<AGButton @click="$ui.showSnackbar(snackbarMessage, snackbarOptions)">
|
|
15
|
+
Snackbar
|
|
16
|
+
</AGButton>
|
|
17
|
+
<AGButton @click="$errors.inspect(errorReports)">
|
|
18
|
+
Error Report
|
|
19
|
+
</AGButton>
|
|
20
|
+
</div>
|
|
20
21
|
|
|
21
|
-
|
|
22
|
+
<AGAppOverlays />
|
|
22
23
|
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
24
|
+
<template #controls>
|
|
25
|
+
<HstText v-model="alertTitle" title="Alert Title" />
|
|
26
|
+
<HstText v-model="alertMessage" title="Alert Message" />
|
|
27
|
+
<HstText v-model="confirmTitle" title="Confirm Title" />
|
|
28
|
+
<HstText v-model="confirmMessage" title="Confirm Message" />
|
|
29
|
+
<HstText v-model="loadingMessage" title="Loading Message" />
|
|
30
|
+
<HstNumber v-model="loadingDuration" title="Loading Duration" />
|
|
31
|
+
<HstText v-model="snackbarMessage" title="Snackbar Message" />
|
|
32
|
+
<HstSelect v-model="snackbarColor" title="Snackbar Color" :options="snackbarColors" />
|
|
33
|
+
<HstText v-model="snackbarAction" title="Snackbar Action" />
|
|
34
|
+
<HstText v-model="errorReportTitle" title="Error Report Title" />
|
|
35
|
+
<HstText v-model="errorReportDescription" title="Error Report Description" />
|
|
36
|
+
</template>
|
|
37
|
+
</Variant>
|
|
34
38
|
</Story>
|
|
35
39
|
</template>
|
|
36
40
|
|
|
37
41
|
<script setup lang="ts">
|
|
38
|
-
import type { ErrorReport, ShowSnackbarOptions } from '@aerogel/core';
|
|
39
42
|
import { computed, ref } from 'vue';
|
|
40
|
-
import { after } from '@noeldemartin/utils';
|
|
43
|
+
import { after, invert } from '@noeldemartin/utils';
|
|
44
|
+
import { Colors, SnackbarColors } from '@aerogel/core';
|
|
45
|
+
import type { ErrorReport, ShowSnackbarOptions } from '@aerogel/core';
|
|
41
46
|
|
|
42
47
|
const alertTitle = ref('Something important happened');
|
|
43
48
|
const alertMessage = ref('And here you can read the details...');
|
|
44
49
|
const confirmTitle = ref('Confirmation');
|
|
45
50
|
const confirmMessage = ref('Are you sure?');
|
|
51
|
+
const loadingMessage = ref('Loading...');
|
|
46
52
|
const loadingDuration = ref(3);
|
|
47
53
|
const snackbarMessage = ref('Something happened');
|
|
54
|
+
const snackbarColor = ref(Colors.Secondary);
|
|
55
|
+
const snackbarColors = invert(SnackbarColors);
|
|
48
56
|
const snackbarAction = ref('Ok');
|
|
49
57
|
const snackbarOptions = computed((): ShowSnackbarOptions => {
|
|
50
58
|
if (!snackbarAction.value) {
|
|
@@ -52,6 +60,7 @@ const snackbarOptions = computed((): ShowSnackbarOptions => {
|
|
|
52
60
|
}
|
|
53
61
|
|
|
54
62
|
return {
|
|
63
|
+
color: snackbarColor.value,
|
|
55
64
|
actions: [
|
|
56
65
|
{
|
|
57
66
|
text: snackbarAction.value,
|
|
@@ -62,7 +71,12 @@ const snackbarOptions = computed((): ShowSnackbarOptions => {
|
|
|
62
71
|
});
|
|
63
72
|
const errorReportTitle = ref('Error');
|
|
64
73
|
const errorReportDescription = ref('Something went wrong!');
|
|
65
|
-
const
|
|
74
|
+
const errorReports = computed((): ErrorReport[] => [
|
|
75
|
+
{
|
|
76
|
+
title: errorReportTitle.value,
|
|
77
|
+
description: errorReportDescription.value,
|
|
78
|
+
details: new Error().stack,
|
|
79
|
+
},
|
|
66
80
|
{
|
|
67
81
|
title: errorReportTitle.value,
|
|
68
82
|
description: errorReportDescription.value,
|