@aerogel/core 0.0.0-next.bb9dcdbb118a15d146d3a1c4cf861ca2f4f1eebd → 0.0.0-next.c29ffcd25bffdbed37ecce3aac1ba14cde3e9d39

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@aerogel/core",
     "description": "The Lightest Solid",
-    "version": "0.0.0-next.bb9dcdbb118a15d146d3a1c4cf861ca2f4f1eebd",
+    "version": "0.0.0-next.c29ffcd25bffdbed37ecce3aac1ba14cde3e9d39",
     "main": "dist/aerogel-core.cjs.js",
     "module": "dist/aerogel-core.esm.js",
     "types": "dist/aerogel-core.d.ts",

package/src/components/lib/AGProgressBar.vue

@@ -1,10 +1,10 @@
 <template>
     <div class="mt-1 h-2 w-full min-w-[min(400px,80vw)] overflow-hidden rounded-full bg-gray-200">
-        <div :class="barClasses" :style="`transform:translateX(-${(1 - progress) * 100}%)`" />
+        <div :class="barClasses" :style="`transform:translateX(-${(1 - renderedProgress) * 100}%)`" />
         <span class="sr-only">
             {{
                 $td('ui.progress', '{progress}% complete', {
-                    progress: progress * 100,
+                    progress: renderedProgress * 100,
                 })
             }}
         </span>
@@ -12,19 +12,34 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, onMounted, onUnmounted, ref } from 'vue';
 
-import { requiredNumberProp, stringProp } from '@/utils/vue';
+import { numberProp, objectProp, stringProp } from '@/utils/vue';
+import type { Job } from '@/jobs';
 
 const props = defineProps({
-    progress: requiredNumberProp(),
-    class: stringProp(''),
+    progress: numberProp(),
+    barClass: stringProp(''),
+    job: objectProp<Job>(),
 });
+
+let cleanup: Function | undefined;
+const jobProgress = ref(0);
 const barClasses = computed(() => {
-    const classes = props.class ?? '';
+    const classes = props.barClass ?? '';
 
     return `h-full w-full transition-transform duration-500 ease-linear ${
         classes.includes('bg-') ? classes : `${classes} bg-gray-700`
     }`;
 });
+const renderedProgress = computed(() => {
+    if (typeof props.progress === 'number') {
+        return props.progress;
+    }
+
+    return jobProgress.value;
+});
+
+onMounted(() => (cleanup = props.job?.listeners.add({ onUpdated: (progress) => (jobProgress.value = progress) })));
+onUnmounted(() => cleanup?.());
 </script>

package/src/components/modals/AGConfirmModal.ts

@@ -3,7 +3,7 @@ import type { ExtractPropTypes } from 'vue';
 import type { ObjectWithout, Pretty, SubPartial } from '@noeldemartin/utils';
 
 import { Colors } from '@/components/constants';
-import { enumProp, objectProp, requiredStringProp, stringProp } from '@/utils';
+import { booleanProp, enumProp, objectProp, requiredStringProp, stringProp } from '@/utils';
 import { translateWithDefault } from '@/lang';
 import type { AcceptRefs } from '@/utils';
 import type { ConfirmCheckboxes } from '@/ui';
@@ -17,6 +17,7 @@ export const confirmModalProps = {
     cancelColor: enumProp(Colors, Colors.Clear),
     checkboxes: objectProp<ConfirmCheckboxes>(),
     actions: objectProp<Record<string, () => unknown>>(),
+    required: booleanProp(false),
 };
 
 export type AGConfirmModalProps = Pretty<

package/src/components/modals/AGConfirmModal.vue

@@ -6,7 +6,7 @@
             <AGButton :color="acceptColor" @click="close(true)">
                 {{ renderedAcceptText }}
             </AGButton>
-            <AGButton :color="cancelColor" @click="close()">
+            <AGButton v-if="!required" :color="cancelColor" @click="close()">
                 {{ renderedCancelText }}
             </AGButton>
         </div>

package/src/jobs/listeners.ts

@@ -1,3 +1,3 @@
 export interface JobListener {
-    onUpdated(progress: number): unknown;
+    onUpdated?(progress: number): unknown;
 }

package/src/services/App.state.ts

@@ -16,18 +16,23 @@ export default defineServiceState({
     },
     computed: {
         development: (state) => state.environment === 'development',
+        staging: (state) => state.environment === 'staging',
         testing: (state) => state.environment === 'test' || state.environment === 'testing',
         versionName(state): string {
             if (this.development) {
                 return 'dev.' + Aerogel.sourceHash.toString().substring(0, 7);
             }
 
+            if (this.staging) {
+                return 'staging.' + Aerogel.sourceHash.toString().substring(0, 7);
+            }
+
             return `v${state.version}`;
         },
         versionUrl(state): string {
             return (
                 state.sourceUrl +
-                (this.development ? `/tree/${Aerogel.sourceHash}` : `/releases/tag/${this.versionName}`)
+                (this.development || this.staging ? `/tree/${Aerogel.sourceHash}` : `/releases/tag/${this.versionName}`)
             );
         },
     },

package/src/ui/UI.ts

@@ -44,6 +44,7 @@ export type ConfirmOptions = AcceptRefs<{
     cancelText?: string;
     cancelColor?: Color;
     actions?: Record<string, () => unknown>;
+    required?: boolean;
 }>;
 
 export type LoadingOptions = AcceptRefs<{
@@ -114,15 +115,17 @@ export class UIService extends Service {
         const getProperties = (): AGConfirmModalProps => {
             if (typeof messageOrOptions !== 'string') {
                 return {
-                    message: messageOrTitle,
                     ...(messageOrOptions ?? {}),
+                    message: messageOrTitle,
+                    required: !!messageOrOptions?.required,
                 };
             }
 
             return {
+                ...(options ?? {}),
                 title: messageOrTitle,
                 message: messageOrOptions,
-                ...(options ?? {}),
+                required: !!options?.required,
             };
         };
         const properties = getProperties();

package/src/utils/index.ts

@@ -2,5 +2,6 @@ export * from './composition/events';
 export * from './composition/forms';
 export * from './composition/hooks';
 export * from './composition/persistent';
+export * from './markdown';
 export * from './tailwindcss';
 export * from './vue';