Remove bootstrap

src/main/glyph/config.json

@@ -77,6 +77,30 @@
         "width": 1000
       },
       "search": ["jhipster"]
+    },
+    {
+      "uid": "7034e4d22866af82bef811f52fb1ba46",
+      "css": "code",
+      "code": 61729,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "9a76bc135eac17d2c8b8ad4a5774fc87",
+      "css": "download",
+      "code": 59397,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "5717236f6134afe2d2a278a5c9b3927a",
+      "css": "play-circled",
+      "code": 61764,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "5211af474d3a9848f67f945e2ccaf143",
+      "css": "cancel",
+      "code": 59398,
+      "src": "fontawesome"
     }
   ]
 }

src/main/glyph/css/jhlite-icons-codes.css

@@ -13,15 +13,27 @@
 .jhlite-icon-jhipster:before {
   content: '\e804';
 } /* '' */
+.jhlite-icon-download:before {
+  content: '\e805';
+} /* '' */
+.jhlite-icon-cancel:before {
+  content: '\e806';
+} /* '' */
 .jhlite-icon-twitter:before {
   content: '\f099';
 } /* '' */
 .jhlite-icon-github-circled:before {
   content: '\f09b';
 } /* '' */
+.jhlite-icon-code:before {
+  content: '\f121';
+} /* '' */
 .jhlite-icon-puzzle:before {
   content: '\f12e';
 } /* '' */
+.jhlite-icon-play-circled:before {
+  content: '\f144';
+} /* '' */
 .jhlite-icon-binoculars:before {
   content: '\f1e5';
 } /* '' */

src/main/glyph/css/jhlite-icons-ie7-codes.css

@@ -13,15 +13,27 @@
 .jhlite-icon-jhipster {
   *zoom: expression(this.runtimeStyle[ 'zoom' ] = '1', this.innerHTML = ' ');
 }
+.jhlite-icon-download {
+  *zoom: expression(this.runtimeStyle[ 'zoom' ] = '1', this.innerHTML = ' ');
+}
+.jhlite-icon-cancel {
+  *zoom: expression(this.runtimeStyle[ 'zoom' ] = '1', this.innerHTML = ' ');
+}
 .jhlite-icon-twitter {
   *zoom: expression(this.runtimeStyle[ 'zoom' ] = '1', this.innerHTML = ' ');
 }
 .jhlite-icon-github-circled {
   *zoom: expression(this.runtimeStyle[ 'zoom' ] = '1', this.innerHTML = ' ');
 }
+.jhlite-icon-code {
+  *zoom: expression(this.runtimeStyle[ 'zoom' ] = '1', this.innerHTML = ' ');
+}
 .jhlite-icon-puzzle {
   *zoom: expression(this.runtimeStyle[ 'zoom' ] = '1', this.innerHTML = ' ');
 }
+.jhlite-icon-play-circled {
+  *zoom: expression(this.runtimeStyle[ 'zoom' ] = '1', this.innerHTML = ' ');
+}
 .jhlite-icon-binoculars {
   *zoom: expression(this.runtimeStyle[ 'zoom' ] = '1', this.innerHTML = ' ');
 }

src/main/glyph/css/jhlite-icons-ie7.css

@@ -26,15 +26,27 @@
 .jhlite-icon-jhipster {
   *zoom: expression(this.runtimeStyle[ 'zoom' ] = '1', this.innerHTML = ' ');
 }
+.jhlite-icon-download {
+  *zoom: expression(this.runtimeStyle[ 'zoom' ] = '1', this.innerHTML = ' ');
+}
+.jhlite-icon-cancel {
+  *zoom: expression(this.runtimeStyle[ 'zoom' ] = '1', this.innerHTML = ' ');
+}
 .jhlite-icon-twitter {
   *zoom: expression(this.runtimeStyle[ 'zoom' ] = '1', this.innerHTML = ' ');
 }
 .jhlite-icon-github-circled {
   *zoom: expression(this.runtimeStyle[ 'zoom' ] = '1', this.innerHTML = ' ');
 }
+.jhlite-icon-code {
+  *zoom: expression(this.runtimeStyle[ 'zoom' ] = '1', this.innerHTML = ' ');
+}
 .jhlite-icon-puzzle {
   *zoom: expression(this.runtimeStyle[ 'zoom' ] = '1', this.innerHTML = ' ');
 }
+.jhlite-icon-play-circled {
+  *zoom: expression(this.runtimeStyle[ 'zoom' ] = '1', this.innerHTML = ' ');
+}
 .jhlite-icon-binoculars {
   *zoom: expression(this.runtimeStyle[ 'zoom' ] = '1', this.innerHTML = ' ');
 }

src/main/glyph/css/jhlite-icons.css

@@ -1,9 +1,9 @@
 @font-face {
   font-family: 'jhlite-icons';
-  src: url('../font/jhlite-icons.eot?60203639');
-  src: url('../font/jhlite-icons.eot?60203639#iefix') format('embedded-opentype'),
-    url('../font/jhlite-icons.woff2?60203639') format('woff2'), url('../font/jhlite-icons.woff?60203639') format('woff'),
-    url('../font/jhlite-icons.ttf?60203639') format('truetype'), url('../font/jhlite-icons.svg?60203639#jhlite-icons') format('svg');
+  src: url('../font/jhlite-icons.eot?27650537');
+  src: url('../font/jhlite-icons.eot?27650537#iefix') format('embedded-opentype'),
+    url('../font/jhlite-icons.woff2?27650537') format('woff2'), url('../font/jhlite-icons.woff?27650537') format('woff'),
+    url('../font/jhlite-icons.ttf?27650537') format('truetype'), url('../font/jhlite-icons.svg?27650537#jhlite-icons') format('svg');
   font-weight: normal;
   font-style: normal;
 }
@@ -13,7 +13,7 @@
 @media screen and (-webkit-min-device-pixel-ratio:0) {
   @font-face {
     font-family: 'jhlite-icons';
-    src: url('../font/jhlite-icons.svg?60203639#jhlite-icons') format('svg');
+    src: url('../font/jhlite-icons.svg?27650537#jhlite-icons') format('svg');
   }
 }
 */
@@ -68,15 +68,27 @@
 .jhlite-icon-jhipster:before {
   content: '\e804';
 } /* '' */
+.jhlite-icon-download:before {
+  content: '\e805';
+} /* '' */
+.jhlite-icon-cancel:before {
+  content: '\e806';
+} /* '' */
 .jhlite-icon-twitter:before {
   content: '\f099';
 } /* '' */
 .jhlite-icon-github-circled:before {
   content: '\f09b';
 } /* '' */
+.jhlite-icon-code:before {
+  content: '\f121';
+} /* '' */
 .jhlite-icon-puzzle:before {
   content: '\f12e';
 } /* '' */
+.jhlite-icon-play-circled:before {
+  content: '\f144';
+} /* '' */
 .jhlite-icon-binoculars:before {
   content: '\f1e5';
 } /* '' */

src/main/style/molecule/_molecule.scss

@@ -1,2 +1,3 @@
 @import 'icon-text/icon-text';
 @import 'nav/nav';
+@import 'toast/toast';

src/main/style/molecule/molecule.pug

@@ -16,3 +16,5 @@ block content
       include:componentDoc(height=50) icon-text/icon-text.md
     .tikui-vertical-spacing--line
       include:componentDoc(height=50) nav/nav.md
+    .tikui-vertical-spacing--line
+      include:componentDoc(height=200) toast/toast.md

src/main/style/molecule/toast/_toast.scss

@@ -0,0 +1,57 @@
+$jhlite-toast-gap: 1vw;
+$jhlite-toast-padding: 2vw;
+$jhlite-toast-radius: 2vw;
+
+$jhlite-toast-medium-gap: 10px;
+$jhlite-toast-medium-padding: 10px 20px;
+$jhlite-toast-medium-radius: 20px;
+
+$jhlite-toast-color-text: $jhlite-global-color-text-light;
+$jhlite-toast-success-color-background: $jhlite-global-color-success;
+$jhlite-toast-error-color-background: $jhlite-global-color-error;
+
+.jhlite-toast {
+  padding: $jhlite-toast-padding;
+  display: flex;
+  gap: $jhlite-toast-gap;
+  border-radius: $jhlite-toast-radius;
+  align-items: center;
+  font-size: 1.5rem;
+  color: $jhlite-toast-color-text;
+
+  &.-success {
+    background-color: $jhlite-toast-success-color-background;
+  }
+
+  &.-error {
+    background-color: $jhlite-toast-error-color-background;
+  }
+
+  &--message {
+    flex-grow: 1;
+    flex-basis: 0;
+  }
+
+  &--action {
+    color: inherit;
+    cursor: pointer;
+    margin: 0;
+    padding: 0;
+    font-size: 2rem;
+    background: none;
+    border: 0;
+    opacity: 0.7;
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+}
+
+@media screen and (min-width: $jhlite-global-breakpoint-small-medium) {
+  .jhlite-toast {
+    gap: $jhlite-toast-medium-gap;
+    padding: $jhlite-toast-medium-padding;
+    border-radius: $jhlite-toast-medium-radius;
+  }
+}

src/main/style/molecule/toast/toast.code.pug

@@ -0,0 +1,4 @@
+include toast.mixin.pug
+
++jhlite-toast('success') Good message
++jhlite-toast('error') Bad message

src/main/style/molecule/toast/toast.md

@@ -0,0 +1 @@
+## Toast

src/main/style/molecule/toast/toast.mixin.pug

@@ -0,0 +1,8 @@
+include /atom/icon/icon.mixin.pug
+
+mixin jhlite-toast(type)
+  .jhlite-toast(class=`-${type}` role='alert')
+    .jhlite-toast--message
+      block
+    button.jhlite-toast--action(aria-label='Close')
+      +jhlite-icon('cancel')

src/main/style/molecule/toast/toast.render.pug

@@ -0,0 +1,4 @@
+extends /layout
+
+block body
+  include toast.code.pug

src/main/style/template/_template.scss

@@ -1 +1,2 @@
 @import 'layout/layout';
+@import 'toast-overlay/toast-overlay';

src/main/style/template/template.pug

@@ -14,3 +14,5 @@ block content
       include /documentation/atomic-design/quote/template
     .tikui-vertical-spacing--line
       include:templateDoc layout/layout.md
+    .tikui-vertical-spacing--line
+      include:templateDoc toast-overlay/toast-overlay.md

src/main/style/template/toast-overlay/_toast-overlay.scss

@@ -0,0 +1,20 @@
+$jhlite-toast-overlay-padding: 2vw;
+$jhlite-toast-overlay-medium-padding: 20px;
+
+.jhlite-toast-overlay {
+  position: fixed;
+  z-index: 1;
+  left: 0;
+  top: 0;
+  right: 0;
+  padding: 2vw;
+}
+
+@media screen and (min-width: $jhlite-global-breakpoint-small-medium) {
+  .jhlite-toast-overlay {
+    bottom: 0;
+    top: auto;
+    right: auto;
+    padding: 20px;
+  }
+}

src/main/style/template/toast-overlay/toast-overlay.code.pug

@@ -0,0 +1,4 @@
+include toast-overlay.mixin.pug
+
+include /template/layout/layout.code.pug
++jhlite-toast-overlay

src/main/style/template/toast-overlay/toast-overlay.md

@@ -0,0 +1 @@
+## Toast overlay

src/main/style/template/toast-overlay/toast-overlay.mixin.pug

@@ -0,0 +1,5 @@
+include /molecule/toast/toast.mixin.pug
+
+mixin jhlite-toast-overlay
+  .jhlite-toast-overlay
+    +jhlite-toast('success') A toast message

src/main/style/template/toast-overlay/toast-overlay.render.pug

@@ -0,0 +1,4 @@
+extends /layout
+
+block body
+  include toast-overlay.code.pug

src/main/style/token/_colors.scss

@@ -3,3 +3,5 @@ $jhlite-global-color-text-light: #fff !default;
 $jhlite-global-color-text-primary: #4ba8f8 !default;
 $jhlite-global-color-link-light: #fff !default;
 $jhlite-global-color-link-light-hover: #4ba8f8 !default;
+$jhlite-global-color-success: #480 !default;
+$jhlite-global-color-error: #902 !default;

src/main/webapp/app/common/primary/toast/Toast.component.ts

@@ -3,28 +3,33 @@ import { Unsubscribe } from '@/common/domain/alert/Unsubscribe';
 import { ToastType } from '@/common/primary/toast/ToastType';
 import { ToastMessage } from '@/common/primary/toast/ToastMessage';
 import { AlertMessage } from '@/common/domain/alert/AlertMessage';
-import { Toast } from 'bootstrap';
-import { nextTick } from '@vue/runtime-core';
 import { AlertListener } from '@/common/domain/alert/AlertListener';
+import { IconVue } from '@/common/primary/icon';
 
 export default defineComponent({
   name: 'Toast',
 
+  components: {
+    IconVue,
+  },
+
   setup() {
     const alertListener = inject('alertListener') as AlertListener;
 
     const toast = ref(null);
-    const bootstrapToast: Ref<Toast | undefined> = ref(undefined);
+    const show = ref(false);
     const type: Ref<ToastType | undefined> = ref(undefined);
     const message: Ref<ToastMessage | undefined> = ref(undefined);
 
     let unsubscribeSuccessAlertBus!: Unsubscribe;
     let unsubscribeErrorAlertBus!: Unsubscribe;
 
-    const showToast = async () => {
-      await nextTick(() => {
-        bootstrapToast.value!.show();
-      });
+    const hideToast = () => {
+      show.value = false;
+    };
+
+    const showToast = () => {
+      show.value = true;
     };
 
     const displaySuccess = (alertMessage: AlertMessage) => {
@@ -40,7 +45,6 @@ export default defineComponent({
     };
 
     onMounted(() => {
-      bootstrapToast.value = new Toast(toast.value as unknown as Element);
       unsubscribeSuccessAlertBus = alertListener.onSuccess(displaySuccess);
       unsubscribeErrorAlertBus = alertListener.onError(displayError);
     });
@@ -54,6 +58,13 @@ export default defineComponent({
       toast,
       type,
       message,
+      hideToast,
+      show,
     };
   },
+  methods: {
+    close() {
+      this.hideToast();
+    },
+  },
 });