@aerogel/cli 0.0.0-next.33c058471a47b828f174aca4d2b5aeadfeb2c627 → 0.0.0-next.376abe09458ebc4a94f0b6976e252532628ea62a
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/bin/gel +4 -0
- package/dist/aerogel-cli.d.ts +2 -2
- package/dist/aerogel-cli.js +847 -0
- package/dist/aerogel-cli.js.map +1 -0
- package/package.json +25 -32
- package/src/cli.ts +28 -8
- package/src/commands/Command.ts +14 -9
- package/src/commands/create.test.ts +3 -4
- package/src/commands/create.ts +11 -11
- package/src/commands/generate-component.test.ts +50 -3
- package/src/commands/generate-component.ts +68 -22
- package/src/commands/generate-model.test.ts +2 -2
- package/src/commands/generate-model.ts +13 -14
- package/src/commands/generate-overrides.ts +85 -0
- package/src/commands/generate-service.test.ts +2 -2
- package/src/commands/generate-service.ts +16 -17
- package/src/commands/info.ts +15 -0
- package/src/commands/install.test.ts +11 -2
- package/src/commands/install.ts +9 -9
- package/src/lib/App.ts +9 -6
- package/src/lib/Editor.ts +12 -10
- package/src/lib/File.mock.ts +7 -11
- package/src/lib/File.ts +3 -3
- package/src/lib/Log.mock.ts +4 -8
- package/src/lib/Log.test.ts +4 -4
- package/src/lib/Log.ts +7 -7
- package/src/lib/Shell.mock.ts +3 -3
- package/src/lib/Shell.ts +2 -2
- package/src/lib/Template.ts +24 -17
- package/src/lib/utils/app.ts +3 -3
- package/src/lib/utils/edit.ts +2 -2
- package/src/lib/utils/paths.ts +16 -8
- package/src/plugins/Plugin.ts +65 -12
- package/src/plugins/Solid.ts +23 -58
- package/src/plugins/Soukai.ts +4 -4
- package/src/testing/setup.ts +30 -31
- package/templates/app/.github/workflows/ci.yml +4 -4
- package/templates/app/.nvmrc +1 -1
- package/templates/app/.vscode/launch.json +1 -0
- package/templates/app/{cypress.config.ts → cypress/cypress.config.ts} +2 -4
- package/templates/app/cypress/support/e2e.ts +1 -3
- package/templates/app/cypress/tsconfig.json +7 -8
- package/templates/app/index.html +3 -2
- package/templates/app/package.json +23 -12
- package/templates/app/postcss.config.js +1 -1
- package/templates/app/src/App.vue +2 -2
- package/templates/app/src/assets/public/robots.txt +2 -0
- package/templates/app/src/main.ts +4 -4
- package/templates/app/tsconfig.json +3 -10
- package/templates/app/vite.config.ts +7 -4
- package/templates/component-button/[component.name].vue +42 -0
- package/templates/component-button-story/[component.name].story.vue +77 -0
- package/templates/component-checkbox/[component.name].vue +34 -0
- package/templates/component-checkbox-story/[component.name].story.vue +63 -0
- package/templates/component-input/[component.name].vue +17 -0
- package/templates/component-input-story/[component.name].story.vue +63 -0
- package/templates/overrides/components/index.ts +15 -0
- package/templates/overrides/components/overrides/AlertModal.vue +11 -0
- package/templates/overrides/components/overrides/ConfirmModal.vue +20 -0
- package/templates/overrides/components/overrides/ErrorReportModal.vue +35 -0
- package/templates/overrides/components/overrides/LoadingModal.vue +12 -0
- package/templates/overrides/components/overrides/ModalWrapper.vue +22 -0
- package/templates/overrides/components/overrides/SnackbarNotification.vue +34 -0
- package/templates/overrides-story/Overrides.story.vue +86 -0
- package/templates/postcss-pseudo-classes/postcss.config.js +15 -0
- package/templates/service/[service.name].ts +1 -1
- package/.eslintrc.js +0 -7
- package/bin/ag +0 -4
- package/dist/aerogel-cli.cjs.js +0 -2
- package/dist/aerogel-cli.cjs.js.map +0 -1
- package/dist/aerogel-cli.esm.js +0 -2
- package/dist/aerogel-cli.esm.js.map +0 -1
- package/src/lib/utils/format.test.ts +0 -33
- package/src/lib/utils/format.ts +0 -38
- package/templates/app/.eslintrc.js +0 -3
- package/templates/app/prettier.config.js +0 -5
- package/tsconfig.json +0 -11
- package/vite.config.ts +0 -14
- /package/src/{main.ts → index.ts} +0 -0
- /package/templates/app/src/assets/{styles.css → css/main.css} +0 -0
|
@@ -1,12 +1,11 @@
|
|
|
1
1
|
{
|
|
2
|
+
"extends": "@tsconfig/node22/tsconfig.json",
|
|
3
|
+
"include": ["**/*.ts"],
|
|
2
4
|
"compilerOptions": {
|
|
3
|
-
"target": "es5",
|
|
4
|
-
"lib": ["es5", "dom"],
|
|
5
|
-
"types": ["cypress", "node"],
|
|
6
5
|
"baseUrl": ".",
|
|
7
|
-
"
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
6
|
+
"module": "ESNext",
|
|
7
|
+
"moduleResolution": "Bundler",
|
|
8
|
+
"lib": ["DOM"],
|
|
9
|
+
"types": ["node", "cypress"]
|
|
10
|
+
}
|
|
12
11
|
}
|
package/templates/app/index.html
CHANGED
|
@@ -3,10 +3,11 @@
|
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="UTF-8" />
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
-
<title
|
|
6
|
+
<title>{{ app.name }}</title>
|
|
7
|
+
{{ socialMeta() }}
|
|
7
8
|
</head>
|
|
8
9
|
<body class="h-full w-full text-base font-normal leading-tight text-gray-900 antialiased">
|
|
9
|
-
<div id="app" class="h-full"></div>
|
|
10
|
+
<div id="app" class="loading h-full"></div>
|
|
10
11
|
<script type="module" src="./src/main.ts"></script>
|
|
11
12
|
</body>
|
|
12
13
|
</html>
|
|
@@ -2,19 +2,20 @@
|
|
|
2
2
|
"name": "<% app.slug %>",
|
|
3
3
|
"version": "0.0.0",
|
|
4
4
|
"private": true,
|
|
5
|
+
"type": "module",
|
|
5
6
|
"scripts": {
|
|
6
7
|
"build": "vite build",
|
|
7
8
|
"cy:dev": "concurrently --kill-others \"npm run test:serve-app\" \"npm run cy:open\"",
|
|
8
|
-
"cy:open": "cypress open --e2e --browser chromium",
|
|
9
|
-
"cy:run": "cypress run",
|
|
9
|
+
"cy:open": "cypress open --config-file ./cypress/cypress.config.ts --e2e --browser chromium",
|
|
10
|
+
"cy:run": "cypress run --config-file ./cypress/cypress.config.ts",
|
|
10
11
|
"cy:test": "start-server-and-test test:serve-app http-get://localhost:5001 cy:run",
|
|
11
12
|
"cy:test-snapshots": "docker run -it -u `id -u ${whoami}` -e CYPRESS_SNAPSHOTS=true -v ./:/app -w /app cypress/base:18.16.0 sh -c \"npx cypress install && npm run cy:test\"",
|
|
12
13
|
"cy:test-snapshots:ci": "docker run -e CYPRESS_SNAPSHOTS=true -v ./:/app -w /app cypress/base:18.16.0 sh -c \"npx cypress install && npm run cy:test\"",
|
|
13
14
|
"dev": "vite",
|
|
14
|
-
"lint": "noeldemartin-lint src",
|
|
15
|
+
"lint": "noeldemartin-lint src cypress",
|
|
15
16
|
"test": "vitest --run",
|
|
16
17
|
"test:ci": "vitest --run --reporter verbose",
|
|
17
|
-
"test:serve-app": "vite --port 5001"
|
|
18
|
+
"test:serve-app": "vite --port 5001 --mode testing"
|
|
18
19
|
},
|
|
19
20
|
"dependencies": {
|
|
20
21
|
"@aerogel/core": "<% &dependencies.aerogelCore %>",
|
|
@@ -37,19 +38,29 @@
|
|
|
37
38
|
"@noeldemartin/eslint-config-vue": "next",
|
|
38
39
|
"@noeldemartin/scripts": "next",
|
|
39
40
|
"@total-typescript/ts-reset": "^0.4.2",
|
|
41
|
+
"@tsconfig/node22": "^22.0.1",
|
|
40
42
|
"@types/node": "^20.3.1",
|
|
43
|
+
"@vue/tsconfig": "^0.7.0",
|
|
41
44
|
"autoprefixer": "^10.4.14",
|
|
42
45
|
"concurrently": "^8.2.0",
|
|
43
|
-
"cypress": "^
|
|
44
|
-
"eslint": "^8.40.0",
|
|
45
|
-
"prettier": "^2.8.8",
|
|
46
|
-
"prettier-eslint-cli": "^7.1.0",
|
|
47
|
-
"prettier-plugin-tailwindcss": "^0.2.8",
|
|
46
|
+
"cypress": "^14.2.0",
|
|
48
47
|
"start-server-and-test": "^2.0.0",
|
|
48
|
+
"typescript": "^5.8.2",
|
|
49
49
|
"unplugin-icons": "^0.16.3",
|
|
50
50
|
"unplugin-vue-components": "^0.24.1",
|
|
51
|
-
"vite": "^
|
|
52
|
-
"vitest": "^0.
|
|
53
|
-
"vue-tsc": "^
|
|
51
|
+
"vite": "^6.2.2",
|
|
52
|
+
"vitest": "^3.0.9",
|
|
53
|
+
"vue-tsc": "^2.2.8"
|
|
54
|
+
},
|
|
55
|
+
"eslintConfig": {
|
|
56
|
+
"extends": [
|
|
57
|
+
"@noeldemartin/eslint-config-vue"
|
|
58
|
+
]
|
|
59
|
+
},
|
|
60
|
+
"prettier": {
|
|
61
|
+
"printWidth": 120,
|
|
62
|
+
"plugins": [
|
|
63
|
+
"prettier-plugin-tailwindcss"
|
|
64
|
+
]
|
|
54
65
|
}
|
|
55
66
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<AGAppLayout>
|
|
3
|
-
<main class="flex flex-grow flex-col items-center justify-center
|
|
2
|
+
<AGAppLayout class="bg-blue-50">
|
|
3
|
+
<main class="flex flex-grow flex-col items-center justify-center">
|
|
4
4
|
<h1 class="text-4xl font-semibold">
|
|
5
5
|
{{ $t('home.title') }}
|
|
6
6
|
</h1>
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import i18n from '@aerogel/plugin-i18n';
|
|
2
2
|
import soukai from '@aerogel/plugin-soukai';
|
|
3
|
-
import {
|
|
3
|
+
import { bootstrap } from '@aerogel/core';
|
|
4
4
|
|
|
5
|
-
import './assets/
|
|
5
|
+
import './assets/css/main.css';
|
|
6
6
|
import App from './App.vue';
|
|
7
7
|
|
|
8
|
-
|
|
8
|
+
bootstrap(App, {
|
|
9
9
|
plugins: [
|
|
10
10
|
i18n({ messages: import.meta.glob('@/lang/*.yaml') }),
|
|
11
|
-
soukai({ models: import.meta.glob('@/models/*', { eager: true }) }),
|
|
11
|
+
soukai({ models: import.meta.glob(['@/models/*', '!**/*.test.ts'], { eager: true }) }),
|
|
12
12
|
],
|
|
13
13
|
});
|
|
@@ -1,16 +1,9 @@
|
|
|
1
1
|
{
|
|
2
|
+
"extends": "@vue/tsconfig/tsconfig.dom.json",
|
|
2
3
|
"compilerOptions": {
|
|
3
|
-
"target": "esnext",
|
|
4
|
-
"module": "esnext",
|
|
5
|
-
"moduleResolution": "node",
|
|
6
|
-
"strict": true,
|
|
7
|
-
"jsx": "preserve",
|
|
8
|
-
"noUncheckedIndexedAccess": true,
|
|
9
|
-
"skipLibCheck": true,
|
|
10
|
-
"resolveJsonModule": true,
|
|
11
|
-
"esModuleInterop": true,
|
|
12
|
-
"lib": ["esnext", "dom"],
|
|
13
4
|
"baseUrl": ".",
|
|
5
|
+
"module": "ESNext",
|
|
6
|
+
"moduleResolution": "Bundler",
|
|
14
7
|
"paths": {
|
|
15
8
|
"@/*": ["./src/*"]
|
|
16
9
|
}
|
|
@@ -1,19 +1,22 @@
|
|
|
1
|
+
import { URL, fileURLToPath } from 'node:url';
|
|
2
|
+
|
|
1
3
|
import Aerogel, { AerogelResolver } from '@aerogel/vite';
|
|
2
4
|
import Components from 'unplugin-vue-components/vite';
|
|
3
5
|
import I18n from '@intlify/unplugin-vue-i18n/vite';
|
|
4
6
|
import Icons from 'unplugin-icons/vite';
|
|
5
7
|
import IconsResolver from 'unplugin-icons/resolver';
|
|
6
8
|
import { defineConfig } from 'vitest/config';
|
|
7
|
-
import { resolve } from 'path';
|
|
8
9
|
|
|
9
10
|
export default defineConfig({
|
|
11
|
+
build: { sourcemap: true },
|
|
12
|
+
publicDir: fileURLToPath(new URL('./src/assets/public/', import.meta.url)),
|
|
10
13
|
plugins: [
|
|
11
|
-
Aerogel(),
|
|
14
|
+
Aerogel({ name: '<% app.name %>' }),
|
|
12
15
|
Components({
|
|
13
16
|
dts: false,
|
|
14
17
|
resolvers: [AerogelResolver(), IconsResolver()],
|
|
15
18
|
}),
|
|
16
|
-
I18n({ include:
|
|
19
|
+
I18n({ include: fileURLToPath(new URL('./src/lang/**/*.yaml', import.meta.url)) }),
|
|
17
20
|
Icons({
|
|
18
21
|
iconCustomizer(_, __, props) {
|
|
19
22
|
props['aria-hidden'] = 'true';
|
|
@@ -22,7 +25,7 @@ export default defineConfig({
|
|
|
22
25
|
],
|
|
23
26
|
resolve: {
|
|
24
27
|
alias: {
|
|
25
|
-
'@':
|
|
28
|
+
'@': fileURLToPath(new URL('./src', import.meta.url)),
|
|
26
29
|
},
|
|
27
30
|
},
|
|
28
31
|
});
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<AGHeadlessButton :class="variantClasses" :disabled="disabled">
|
|
3
|
+
<slot />
|
|
4
|
+
</AGHeadlessButton>
|
|
5
|
+
</template>
|
|
6
|
+
|
|
7
|
+
<script setup lang="ts">
|
|
8
|
+
import { Colors, booleanProp, enumProp, removeInteractiveClasses } from '@aerogel/core';
|
|
9
|
+
import { computed } from 'vue';
|
|
10
|
+
|
|
11
|
+
const props = defineProps({
|
|
12
|
+
color: enumProp(Colors, Colors.Primary),
|
|
13
|
+
disabled: booleanProp(),
|
|
14
|
+
});
|
|
15
|
+
|
|
16
|
+
const colorClasses = computed(() => {
|
|
17
|
+
switch (props.color) {
|
|
18
|
+
case Colors.Secondary:
|
|
19
|
+
// Add your custom color classes here.
|
|
20
|
+
return '';
|
|
21
|
+
case Colors.Clear:
|
|
22
|
+
// Add your custom color classes here.
|
|
23
|
+
return '';
|
|
24
|
+
case Colors.Danger:
|
|
25
|
+
// Add your custom color classes here.
|
|
26
|
+
return '';
|
|
27
|
+
case Colors.Primary:
|
|
28
|
+
default:
|
|
29
|
+
// Add your custom color classes here.
|
|
30
|
+
return '';
|
|
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
|
+
});
|
|
42
|
+
</script>
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<Story :layout="{ type: 'grid' }">
|
|
3
|
+
<Variant title="Playground">
|
|
4
|
+
<<% component.name %> :color="color">
|
|
5
|
+
{{ content }}
|
|
6
|
+
</<% component.name %>>
|
|
7
|
+
|
|
8
|
+
<template #controls>
|
|
9
|
+
<HstText v-model="content" title="Content" />
|
|
10
|
+
<HstSelect v-model="color" title="Color" :options="colorOptions" />
|
|
11
|
+
</template>
|
|
12
|
+
</Variant>
|
|
13
|
+
|
|
14
|
+
<Variant title="Default">
|
|
15
|
+
<<% component.name %>>
|
|
16
|
+
Click me!
|
|
17
|
+
</<% component.name %>>
|
|
18
|
+
</Variant>
|
|
19
|
+
|
|
20
|
+
<Variant title="Hover">
|
|
21
|
+
<<% component.name %> class=":hover">
|
|
22
|
+
Click me!
|
|
23
|
+
</<% component.name %>>
|
|
24
|
+
</Variant>
|
|
25
|
+
|
|
26
|
+
<Variant title="Focus">
|
|
27
|
+
<<% component.name %> class=":focus :focus-visible">
|
|
28
|
+
Click me!
|
|
29
|
+
</<% component.name %>>
|
|
30
|
+
</Variant>
|
|
31
|
+
|
|
32
|
+
<Variant title="Disabled">
|
|
33
|
+
<<% component.name %> disabled>
|
|
34
|
+
You can't click me
|
|
35
|
+
</<% component.name %>>
|
|
36
|
+
</Variant>
|
|
37
|
+
|
|
38
|
+
<Variant title="Colors" :layout="{ width: '300px' }">
|
|
39
|
+
<div class="flex items-center gap-2">
|
|
40
|
+
<<% component.name %> color="primary">
|
|
41
|
+
Primary
|
|
42
|
+
</<% component.name %>>
|
|
43
|
+
<<% component.name %> color="secondary">
|
|
44
|
+
Secondary
|
|
45
|
+
</<% component.name %>>
|
|
46
|
+
<<% component.name %> color="danger">
|
|
47
|
+
Danger
|
|
48
|
+
</<% component.name %>>
|
|
49
|
+
<<% component.name %> color="clear">
|
|
50
|
+
Clear
|
|
51
|
+
</<% component.name %>>
|
|
52
|
+
</div>
|
|
53
|
+
</Variant>
|
|
54
|
+
</Story>
|
|
55
|
+
</template>
|
|
56
|
+
|
|
57
|
+
<script setup lang="ts">
|
|
58
|
+
import { Colors } from '@aerogel/core';
|
|
59
|
+
import { invert } from '@noeldemartin/utils';
|
|
60
|
+
import { ref } from 'vue';
|
|
61
|
+
import type { Color } from '@aerogel/core';
|
|
62
|
+
|
|
63
|
+
const content = ref('Click me!');
|
|
64
|
+
const color = ref<Color>(Colors.Primary);
|
|
65
|
+
const colorOptions = invert(Colors);
|
|
66
|
+
</script>
|
|
67
|
+
|
|
68
|
+
<style>
|
|
69
|
+
.story-<% component.slug %> {
|
|
70
|
+
grid-template-columns: repeat(2, 300px) !important;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.story-<% component.slug %> .variant-playground,
|
|
74
|
+
.story-<% component.slug %> .variant-colors{
|
|
75
|
+
grid-column: 1 / -1;
|
|
76
|
+
}
|
|
77
|
+
</style>
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<AGHeadlessInput
|
|
3
|
+
ref="$input"
|
|
4
|
+
:name="name"
|
|
5
|
+
:class="className"
|
|
6
|
+
:label="label"
|
|
7
|
+
>
|
|
8
|
+
<AGHeadlessInputInput
|
|
9
|
+
v-bind="attrs"
|
|
10
|
+
type="checkbox"
|
|
11
|
+
/>
|
|
12
|
+
<div v-if="$slots.default">
|
|
13
|
+
<AGHeadlessInputLabel>
|
|
14
|
+
<slot />
|
|
15
|
+
</AGHeadlessInputLabel>
|
|
16
|
+
<AGHeadlessInputError />
|
|
17
|
+
</div>
|
|
18
|
+
</AGHeadlessInput>
|
|
19
|
+
</template>
|
|
20
|
+
|
|
21
|
+
<script setup lang="ts">
|
|
22
|
+
import { AGHeadlessInputLabel, componentRef, stringProp, useInputAttrs } from '@aerogel/core';
|
|
23
|
+
import type { IAGHeadlessInput } from '@aerogel/core';
|
|
24
|
+
|
|
25
|
+
defineOptions({ inheritAttrs: false });
|
|
26
|
+
defineProps({
|
|
27
|
+
name: stringProp(),
|
|
28
|
+
label: stringProp(),
|
|
29
|
+
inputClass: stringProp(''),
|
|
30
|
+
});
|
|
31
|
+
|
|
32
|
+
const $input = componentRef<IAGHeadlessInput>();
|
|
33
|
+
const [attrs, className] = useInputAttrs();
|
|
34
|
+
</script>
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<Story group="base" :layout="{ type: 'grid' }">
|
|
3
|
+
<Variant title="Playground">
|
|
4
|
+
<AGForm :form="form" class="m-1">
|
|
5
|
+
<<% component.name %> name="accept" :form="form">
|
|
6
|
+
{{ label }}
|
|
7
|
+
</<% component.name %>>
|
|
8
|
+
</AGForm>
|
|
9
|
+
|
|
10
|
+
<template #controls>
|
|
11
|
+
<HstText v-model="label" title="Label" />
|
|
12
|
+
</template>
|
|
13
|
+
</Variant>
|
|
14
|
+
|
|
15
|
+
<Variant title="Default">
|
|
16
|
+
<<% component.name %> class="m-1">
|
|
17
|
+
Accept Terms & Conditions
|
|
18
|
+
</<% component.name %>>
|
|
19
|
+
</Variant>
|
|
20
|
+
|
|
21
|
+
<Variant title="Hover">
|
|
22
|
+
<<% component.name %> class="m-1" input-class=":hover">
|
|
23
|
+
Accept Terms & Conditions
|
|
24
|
+
</<% component.name %>>
|
|
25
|
+
</Variant>
|
|
26
|
+
|
|
27
|
+
<Variant title="Focus">
|
|
28
|
+
<<% component.name %> class="m-1" input-class=":focus :focus-visible">
|
|
29
|
+
Accept Terms & Conditions
|
|
30
|
+
</<% component.name %>>
|
|
31
|
+
</Variant>
|
|
32
|
+
|
|
33
|
+
<Variant title="Error">
|
|
34
|
+
<AGForm :form="errorForm" class="m-1">
|
|
35
|
+
<<% component.name %> name="accept">
|
|
36
|
+
Accept Terms & Conditions
|
|
37
|
+
</<% component.name %>>
|
|
38
|
+
</AGForm>
|
|
39
|
+
</Variant>
|
|
40
|
+
</Story>
|
|
41
|
+
</template>
|
|
42
|
+
|
|
43
|
+
<script setup lang="ts">
|
|
44
|
+
import { requiredBooleanInput, useForm } from '@aerogel/core';
|
|
45
|
+
import { ref } from 'vue';
|
|
46
|
+
|
|
47
|
+
const form = useForm({ accept: requiredBooleanInput(true) });
|
|
48
|
+
const errorForm = useForm({ accept: requiredBooleanInput() });
|
|
49
|
+
const label = ref('Accept Terms & Conditions');
|
|
50
|
+
|
|
51
|
+
form.submit();
|
|
52
|
+
errorForm.submit();
|
|
53
|
+
</script>
|
|
54
|
+
|
|
55
|
+
<style>
|
|
56
|
+
.story-<% component.slug %> {
|
|
57
|
+
grid-template-columns: repeat(2, 300px) !important;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.story-<% component.slug %> .variant-playground {
|
|
61
|
+
grid-column: 1 / -1;
|
|
62
|
+
}
|
|
63
|
+
</style>
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<AGHeadlessInput v-bind="props">
|
|
3
|
+
<AGHeadlessInputLabel />
|
|
4
|
+
<AGHeadlessInputInput v-bind="attrs" />
|
|
5
|
+
<AGHeadlessInputDescription />
|
|
6
|
+
<AGHeadlessInputError />
|
|
7
|
+
</AGHeadlessInput>
|
|
8
|
+
</template>
|
|
9
|
+
|
|
10
|
+
<script setup lang="ts">
|
|
11
|
+
import { useInputAttrs, useInputProps } from '@aerogel/core';
|
|
12
|
+
|
|
13
|
+
defineOptions({ inheritAttrs: false });
|
|
14
|
+
|
|
15
|
+
const props = defineProps(useInputProps());
|
|
16
|
+
const [attrs] = useInputAttrs();
|
|
17
|
+
</script>
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<Story :layout="{ type: 'grid' }">
|
|
3
|
+
<Variant title="Playground">
|
|
4
|
+
<AGForm :form="form">
|
|
5
|
+
<<% component.name %> name="food" :label="label" :placeholder="placeholder" />
|
|
6
|
+
</AGForm>
|
|
7
|
+
|
|
8
|
+
<template #controls>
|
|
9
|
+
<HstText v-model="label" title="Label" />
|
|
10
|
+
<HstText v-model="placeholder" title="Placeholder" />
|
|
11
|
+
<HstCheckbox v-model="hasErrors" title="Errors" />
|
|
12
|
+
</template>
|
|
13
|
+
</Variant>
|
|
14
|
+
|
|
15
|
+
<Variant title="Default">
|
|
16
|
+
<<% component.name %> label="What's the best food?" placeholder="Ramen" />
|
|
17
|
+
</Variant>
|
|
18
|
+
|
|
19
|
+
<Variant title="Hover">
|
|
20
|
+
<<% component.name %> label="What's the best food?" placeholder="Ramen" input-class=":hover" />
|
|
21
|
+
</Variant>
|
|
22
|
+
|
|
23
|
+
<Variant title="Focus">
|
|
24
|
+
<<% component.name %> label="What's the best food?" placeholder="Ramen" input-class=":focus :focus-visible" />
|
|
25
|
+
</Variant>
|
|
26
|
+
|
|
27
|
+
<Variant title="Error">
|
|
28
|
+
<AGForm :form="errorForm">
|
|
29
|
+
<<% component.name %>
|
|
30
|
+
name="food"
|
|
31
|
+
label="What's the best food?"
|
|
32
|
+
placeholder="Ramen"
|
|
33
|
+
class=":focus :focus-visible"
|
|
34
|
+
/>
|
|
35
|
+
</AGForm>
|
|
36
|
+
</Variant>
|
|
37
|
+
</Story>
|
|
38
|
+
</template>
|
|
39
|
+
|
|
40
|
+
<script setup lang="ts">
|
|
41
|
+
import { requiredStringInput, useForm } from '@aerogel/core';
|
|
42
|
+
import { ref, watchEffect } from 'vue';
|
|
43
|
+
|
|
44
|
+
const form = useForm({ food: requiredStringInput() });
|
|
45
|
+
const errorForm = useForm({ food: requiredStringInput() });
|
|
46
|
+
const label = ref('What\'s the best food?');
|
|
47
|
+
const placeholder = ref('Ramen');
|
|
48
|
+
const hasErrors = ref(false);
|
|
49
|
+
|
|
50
|
+
errorForm.submit();
|
|
51
|
+
|
|
52
|
+
watchEffect(() => (hasErrors.value ? form.submit() : form.reset()));
|
|
53
|
+
</script>
|
|
54
|
+
|
|
55
|
+
<style>
|
|
56
|
+
.story-<% component.slug %> {
|
|
57
|
+
grid-template-columns: repeat(2, 300px) !important;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.story-<% component.slug %> .variant-playground {
|
|
61
|
+
grid-column: 1 / -1;
|
|
62
|
+
}
|
|
63
|
+
</style>
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { UIComponents } from '@aerogel/core';
|
|
2
|
+
|
|
3
|
+
import AlertModal from './overrides/AlertModal.vue';
|
|
4
|
+
import ConfirmModal from './overrides/ConfirmModal.vue';
|
|
5
|
+
import ErrorReportModal from './overrides/ErrorReportModal.vue';
|
|
6
|
+
import LoadingModal from './overrides/LoadingModal.vue';
|
|
7
|
+
import SnackbarNotification from './overrides/SnackbarNotification.vue';
|
|
8
|
+
|
|
9
|
+
export const components = {
|
|
10
|
+
[UIComponents.AlertModal]: AlertModal,
|
|
11
|
+
[UIComponents.ConfirmModal]: ConfirmModal,
|
|
12
|
+
[UIComponents.ErrorReportModal]: ErrorReportModal,
|
|
13
|
+
[UIComponents.LoadingModal]: LoadingModal,
|
|
14
|
+
[UIComponents.Snackbar]: SnackbarNotification,
|
|
15
|
+
};
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<ModalWrapper v-slot="{ close }" :title="title" :cancellable="false">
|
|
3
|
+
<AGMarkdown :text="message" :actions="actions" />
|
|
4
|
+
<div class="mt-4 flex flex-row-reverse">
|
|
5
|
+
<AGButton :color="acceptColor" @click="close(true)">
|
|
6
|
+
{{ renderedAcceptText }}
|
|
7
|
+
</AGButton>
|
|
8
|
+
<AGButton v-if="!required" :color="cancelColor" class="mr-2" @click="close(false)">
|
|
9
|
+
{{ renderedCancelText }}
|
|
10
|
+
</AGButton>
|
|
11
|
+
</div>
|
|
12
|
+
</ModalWrapper>
|
|
13
|
+
</template>
|
|
14
|
+
|
|
15
|
+
<script setup lang="ts">
|
|
16
|
+
import { useConfirmModal, useConfirmModalProps } from '@aerogel/core';
|
|
17
|
+
|
|
18
|
+
const props = defineProps(useConfirmModalProps());
|
|
19
|
+
const { renderedAcceptText, renderedCancelText } = useConfirmModal(props);
|
|
20
|
+
</script>
|
|
@@ -0,0 +1,35 @@
|
|
|
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>
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<ModalWrapper :cancellable="false">
|
|
3
|
+
<AGMarkdown :text="renderedMessage" />
|
|
4
|
+
</ModalWrapper>
|
|
5
|
+
</template>
|
|
6
|
+
|
|
7
|
+
<script setup lang="ts">
|
|
8
|
+
import { useLoadingModal, useLoadingModalProps } from '@aerogel/core';
|
|
9
|
+
|
|
10
|
+
const props = defineProps(useLoadingModalProps());
|
|
11
|
+
const { renderedMessage } = useLoadingModal(props);
|
|
12
|
+
</script>
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<AGHeadlessModal ref="$modal" v-slot="{ close }" v-bind="props">
|
|
3
|
+
<AGHeadlessModalPanel>
|
|
4
|
+
<AGHeadlessModalTitle v-if="title">
|
|
5
|
+
<AGMarkdown :text="title" inline />
|
|
6
|
+
</AGHeadlessModalTitle>
|
|
7
|
+
<slot :close="close" />
|
|
8
|
+
</AGHeadlessModalPanel>
|
|
9
|
+
</AGHeadlessModal>
|
|
10
|
+
</template>
|
|
11
|
+
|
|
12
|
+
<script setup lang="ts">
|
|
13
|
+
import { ref } from 'vue';
|
|
14
|
+
import { useModalExpose, useModalProps } from '@aerogel/core';
|
|
15
|
+
import type { IAGHeadlessModal, IAGModal } from '@aerogel/core';
|
|
16
|
+
|
|
17
|
+
const props = defineProps(useModalProps());
|
|
18
|
+
const $modal = ref<IAGHeadlessModal>();
|
|
19
|
+
|
|
20
|
+
defineOptions({ inheritAttrs: false });
|
|
21
|
+
defineExpose<IAGModal>(useModalExpose($modal));
|
|
22
|
+
</script>
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<AGHeadlessSnackbar :class="colorClasses">
|
|
3
|
+
<AGMarkdown :text="message" inline />
|
|
4
|
+
|
|
5
|
+
<AGButton
|
|
6
|
+
v-for="(action, i) of actions"
|
|
7
|
+
:key="i"
|
|
8
|
+
:color="color"
|
|
9
|
+
@click="activate(action)"
|
|
10
|
+
>
|
|
11
|
+
{{ action.text }}
|
|
12
|
+
</AGButton>
|
|
13
|
+
</AGHeadlessSnackbar>
|
|
14
|
+
</template>
|
|
15
|
+
|
|
16
|
+
<script setup lang="ts">
|
|
17
|
+
import { computed } from 'vue';
|
|
18
|
+
import { Colors, useSnackbar, useSnackbarProps } from '@aerogel/core';
|
|
19
|
+
|
|
20
|
+
const props = defineProps(useSnackbarProps());
|
|
21
|
+
const { activate } = useSnackbar(props);
|
|
22
|
+
|
|
23
|
+
const colorClasses = computed(() => {
|
|
24
|
+
switch (props.color) {
|
|
25
|
+
case Colors.Danger:
|
|
26
|
+
// Add your custom color classes here.
|
|
27
|
+
return '';
|
|
28
|
+
case Colors.Secondary:
|
|
29
|
+
default:
|
|
30
|
+
// Add your custom color classes here.
|
|
31
|
+
return '';
|
|
32
|
+
}
|
|
33
|
+
});
|
|
34
|
+
</script>
|