@antify/ui 3.0.0 → 3.1.0

package/dist/components/AntToast.vue

@@ -43,15 +43,15 @@ const icons = {
 const _icon = computed(() => icons[props.state]);
 const classes = computed(() => {
   const variants: Record<InputState, string> = {
-    [InputState.base]: 'bg-base-100 border-base-500 text-base-500',
-    [InputState.danger]: 'bg-danger-100 border-danger-500 text-danger-500',
-    [InputState.info]: 'bg-info-100 border-info-500 text-info-500',
-    [InputState.success]: 'bg-success-100 border-success-500 text-success-500',
-    [InputState.warning]: 'bg-warning-100 border-warning-500 text-warning-500',
+    [InputState.base]: 'border-base-500 text-base-500',
+    [InputState.danger]: 'border-danger-500 text-danger-500',
+    [InputState.info]: 'border-info-500 text-info-500',
+    [InputState.success]: 'border-success-500 text-success-500',
+    [InputState.warning]: 'border-warning-500 text-warning-500',
   };
 
   return {
-    'inline-flex flex-col gap-2 rounded-md p-2 border transition-colors shadow-md': true,
+    'bg-white inline-flex flex-col gap-2 rounded-md p-2 border transition-colors shadow-md': true,
     [variants[props.state]]: true,
   };
 });

package/dist/components/AntToaster.vue

@@ -21,6 +21,24 @@ const props = withDefaults(defineProps<{
   position: CornerPosition.bottomLeft,
 });
 
+const _toasts = computed(() => {
+  if(props.position === CornerPosition.topLeft || props.position === CornerPosition.topRight) {
+    return props.toasts;
+  }
+
+  return [
+    ...props.toasts,
+  ].reverse();
+});
+
+const transitionName = computed(() => {
+  if(props.position === CornerPosition.topLeft || props.position === CornerPosition.topRight) {
+    return 'list-top';
+  }
+
+  return 'list-bottom';
+});
+
 const classes = computed(() => ({
   'left-0 top-0 items-start': props.position === CornerPosition.topLeft,
   'right-0 top-0 items-end': props.position === CornerPosition.topRight,
@@ -35,9 +53,9 @@ const classes = computed(() => ({
     :class="classes"
     data-e2e="toaster"
   >
-    <TransitionGroup name="list">
+    <TransitionGroup :name="transitionName">
       <AntToast
-        v-for="toast of toasts"
+        v-for="toast of _toasts"
         :key="`ant-toast-${toast.id}`"
         :title="toast.title"
         :state="toast.type"
@@ -56,24 +74,33 @@ const classes = computed(() => ({
 </template>
 
 <style>
-.list-move {
-  transition: all 0.5s ease;
+.list-top-move, .list-bottom-move {
+  transition: transform 0.3s ease, opacity 0.3s ease;
+}
+.list-top-enter-active,
+.list-top-leave-active,
+.list-bottom-enter-active,
+.list-bottom-leave-active {
+  transition: opacity 0.3s, transform 0.3s;
 }
 
-.list-enter-active {
-  animation: fade-in .6s;
+.list-top-enter-from,
+.list-top-leave-to {
+  opacity: 0;
+  transform: scale(0.8) translateY(-20px);
 }
 
-.list-leave-active {
-  animation: fade-in .4s reverse;
+.list-bottom-enter-from,
+.list-bottom-leave-to {
+  opacity: 0;
+  transform: scale(0.8) translateY(20px);
 }
 
-@keyframes fade-in {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
+.list-top-enter-to,
+.list-top-leave-from,
+.list-bottom-enter-to,
+.list-bottom-leave-from {
+  opacity: 1;
+  transform: scale(1) translateY(0);
 }
 </style>

package/dist/components/__stories/AntToaster.stories.js

@@ -60,7 +60,7 @@ const Docs = exports.Docs = {
     },
     template: `
       <div class="dashed h-60 relative">
-        <AntToaster v-bind="args"/>
+        <AntToaster v-bind="args" />
       </div>
     `
   }),
@@ -122,7 +122,7 @@ const UseToaster = exports.UseToaster = {
         </AntButton>
       </AntFormGroup>
 
-      <AntToaster v-bind="args" :toasts="toaster.getToasts()"/>
+      <AntToaster v-bind="args" :toasts="toaster.getToasts()" />
     `
   })
 };

package/dist/components/__stories/AntToaster.stories.mjs

@@ -60,7 +60,7 @@ export const Docs = {
     },
     template: `
       <div class="dashed h-60 relative">
-        <AntToaster v-bind="args"/>
+        <AntToaster v-bind="args" />
       </div>
     `
   }),
@@ -130,7 +130,7 @@ export const UseToaster = {
         </AntButton>
       </AntFormGroup>
 
-      <AntToaster v-bind="args" :toasts="toaster.getToasts()"/>
+      <AntToaster v-bind="args" :toasts="toaster.getToasts()" />
     `
   })
 };

package/dist/composables/useToaster.d.ts

@@ -18,4 +18,5 @@ export declare const useToaster: () => {
     toastCreated(): void;
     toastUpdated(): void;
     toastDuplicated(): void;
+    toastInvalidFormInfo(): void;
 };

package/dist/composables/useToaster.js

@@ -56,16 +56,19 @@ const useToaster = () => {
       });
     },
     toastDeleted() {
-      this.toastSuccess("Deleted");
+      this.toastSuccess("Gel\xF6scht");
     },
     toastCreated() {
-      this.toastSuccess("Saved");
+      this.toastSuccess("Gespeichert");
     },
     toastUpdated() {
-      this.toastSuccess("Saved");
+      this.toastSuccess("Gespeichert");
     },
     toastDuplicated() {
-      this.toastSuccess("Duplicated");
+      this.toastSuccess("Dupliziert");
+    },
+    toastInvalidFormInfo() {
+      this.toastInfo("Das Formular enth\xE4lt Fehler.\nBitte \xFCberpr\xFCfe alle Felder und behebe die Fehler.");
     }
   };
 };

package/dist/composables/useToaster.mjs

@@ -56,16 +56,19 @@ export const useToaster = () => {
       });
     },
     toastDeleted() {
-      this.toastSuccess("Deleted");
+      this.toastSuccess("Gel\xF6scht");
     },
     toastCreated() {
-      this.toastSuccess("Saved");
+      this.toastSuccess("Gespeichert");
     },
     toastUpdated() {
-      this.toastSuccess("Saved");
+      this.toastSuccess("Gespeichert");
     },
     toastDuplicated() {
-      this.toastSuccess("Duplicated");
+      this.toastSuccess("Dupliziert");
+    },
+    toastInvalidFormInfo() {
+      this.toastInfo("Das Formular enth\xE4lt Fehler.\nBitte \xFCberpr\xFCfe alle Felder und behebe die Fehler.");
     }
   };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antify/ui",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "private": false,
   "type": "module",
   "exports": {