@ribajs/bs4 - npm Package Compare versions

Comparing version 1.9.0-alpha.1 to 1.9.0-alpha.2

package.json

 {
   "name": "@ribajs/bs4",
   "description": "Bootstrap 4 module for Riba.js",
-  "version": "1.9.0-alpha.1",
+  "version": "1.9.0-alpha.2",
   "author": "Pascal Garber <[e-mail]>",
@@ -45,4 +45,4 @@ "contributors": [],
   "devDependencies": {
-    "@babel/cli": "^7.10.4",
-    "@babel/core": "^7.10.4",
+    "@babel/cli": "^7.10.5",
+    "@babel/core": "^7.10.5",
     "@babel/plugin-proposal-class-properties": "^7.10.4",
@@ -52,13 +52,13 @@ "@babel/plugin-proposal-object-rest-spread": "^7.10.4",
     "@babel/plugin-syntax-export-default-from": "^7.10.4",
-    "@babel/plugin-transform-runtime": "^7.10.4",
+    "@babel/plugin-transform-runtime": "^7.10.5",
     "@babel/preset-env": "^7.10.4",
     "@babel/preset-typescript": "^7.10.4",
-    "@babel/runtime": "^7.10.4",
-    "@babel/runtime-corejs3": "^7.10.4",
-    "@ribajs/eslint-config": "1.9.0-alpha.1",
-    "@ribajs/tsconfig": "1.9.0-alpha.1",
+    "@babel/runtime": "^7.10.5",
+    "@babel/runtime-corejs3": "^7.10.5",
+    "@ribajs/eslint-config": "1.9.0-alpha.2",
+    "@ribajs/tsconfig": "1.9.0-alpha.2",
     "@ribajs/types": "1.8.3",
     "@types/jest": "^26.0.4",
-    "@typescript-eslint/eslint-plugin": "^3.6.0",
-    "@typescript-eslint/parser": "^3.6.0",
+    "@typescript-eslint/eslint-plugin": "^3.6.1",
+    "@typescript-eslint/parser": "^3.6.1",
     "@yarnpkg/pnpify": "^2.1.0",
@@ -75,4 +75,4 @@ "babel-jest": "^26.1.0",
     "prettier": "^2.0.5",
-    "ts-jest": "^26.1.1",
-    "typescript": "^3.9.6",
+    "ts-jest": "^26.1.3",
+    "typescript": "^3.9.7",
     "webpack": "^5.0.0-beta.22",
@@ -83,5 +83,5 @@ "webpack-cli": "^3.3.12"
     "@ribajs/cache": "1.9.0-alpha.1",
-    "@ribajs/core": "1.9.0-alpha.1",
-    "@ribajs/extras": "1.9.0-alpha.1",
-    "@ribajs/utils": "1.9.0-alpha.1",
+    "@ribajs/core": "1.9.0-alpha.2",
+    "@ribajs/extras": "1.9.0-alpha.2",
+    "@ribajs/utils": "1.9.0-alpha.2",
     "bootstrap": "^4.5.0",
@@ -88,0 +88,0 @@ "popper.js": "^1.16.1"

src/binders/bs4-show-toast-on.binder.ts

 import { Binder, EventDispatcher } from "@ribajs/core";
-import { ToastBinderData } from "@ribajs/bs4/src/interfaces";
+import { Toast } from "@ribajs/bs4/src/interfaces";
 
-export const showToastOnEventBinder: Binder<ToastBinderData> = {
+export const showToastOnEventBinder: Binder<Toast> = {
   name: "show-toast-on-*",
@@ -11,5 +11,7 @@ onEvent(event: CustomEvent) {
     console.debug(this.customData.toastData);
-    const toastData: ToastBinderData = this.customData.toastData;
-    const toastDispatcher = new EventDispatcher(toastData.channel || "toast");
-    toastDispatcher.trigger("show-toast", toastData);
+    const toastData: Toast = new Toast(this.customData.toastData);
+    const notificationDispatcher = new EventDispatcher(
+      toastData.channel || "toast"
+    );
+    notificationDispatcher.trigger("show-notification", toastData);
   },
@@ -21,3 +23,3 @@ bind(el: HTMLUnknownElement) {
   },
-  routine(el: HTMLUnknownElement, toastData: ToastBinderData) {
+  routine(el: HTMLUnknownElement, toastData: Toast) {
     if (this.args === null) {
@@ -24,0 +26,0 @@ throw new Error("args is null");

src/components/bs4-accordion/bs4-accordion.component.ts

@@ -7,3 +7,3 @@ import { handleizeFormatter } from "@ribajs/core";
 } from "../../services/collapse.service";
-
+import { hasChildNodesTrim } from "@ribajs/utils/src/dom";
 import { TemplatesComponent } from "../templates/templates.component";
@@ -242,3 +242,3 @@
     // Only set the component template if there no childs or the childs are templates
-    if (!this.el.hasChildNodes() || this.hasOnlyTemplateChilds()) {
+    if (!hasChildNodesTrim(this.el) || this.hasOnlyTemplateChilds()) {
       return template;
@@ -245,0 +245,0 @@ } else {

src/components/bs4-contents/bs4-contents.component.ts

 import { Component } from "@ribajs/core";
-
+import { hasChildNodesTrim } from "@ribajs/utils/src/dom";
 import template from "./bs4-contents.component.html";
@@ -178,3 +178,3 @@
     // Only set the component template if there no childs already
-    if (this.el.hasChildNodes()) {
+    if (hasChildNodesTrim(this.el)) {
       return null;
@@ -181,0 +181,0 @@ } else {

src/components/bs4-form/bs4-form.component.ts

 import { Component, HttpService, HttpMethod, HttpDataType } from "@ribajs/core";
 import template from "./bs4-form.component.html";
 import { stripHtml } from "@ribajs/utils/src/type";
-import { getUID } from "@ribajs/utils/src/dom";
+import { getUID, hasChildNodesTrim } from "@ribajs/utils/src/dom";
 
@@ -307,3 +307,3 @@ export interface ValidationObject {
   protected template() {
-    if (this.el.hasChildNodes()) {
+    if (hasChildNodesTrim(this.el)) {
       this.initForm();
@@ -310,0 +310,0 @@ return null;

src/components/bs4-scrollspy/bs4-scrollspy.component.ts

@@ -5,3 +5,3 @@ import {
 } from "../bs4-contents/bs4-contents.component";
-
+import { hasChildNodesTrim } from "@ribajs/utils/src/dom";
 import template from "./bs4-scrollspy.component.html";
@@ -72,3 +72,3 @@
     // Only set the component template if there no childs already
-    if (this.el.hasChildNodes()) {
+    if (hasChildNodesTrim(this.el)) {
       return null;
@@ -75,0 +75,0 @@ } else {

src/components/bs4-share/bs4-share.component.ts

@@ -7,2 +7,3 @@ import { Component } from "@ribajs/core";
 import { DropdownService } from "@ribajs/bs4";
+import { hasChildNodesTrim } from "@ribajs/utils/src/dom";
 
@@ -390,4 +391,4 @@ export interface Scope {
   protected template() {
-    this.debug("template", this.el, this.el.hasChildNodes());
-    if (this.el && this.el.hasChildNodes()) {
+    this.debug("template", this.el, hasChildNodesTrim(this.el));
+    if (this.el && hasChildNodesTrim(this.el)) {
       // If a child is set, this is a custom label template
@@ -394,0 +395,0 @@ this.scope.labelTemplate = this.el.innerHTML;

src/components/bs4-sidebar/bs4-sidebar.component.ts

 import { Component, EventDispatcher } from "@ribajs/core";
-import { getViewportDimensions } from "@ribajs/utils/src/dom";
+import {
+  getViewportDimensions,
+  hasChildNodesTrim,
+} from "@ribajs/utils/src/dom";
 
@@ -401,3 +404,3 @@ type State =
   protected template() {
-    if (!this.el.hasChildNodes()) {
+    if (!hasChildNodesTrim(this.el)) {
       console.warn(
@@ -404,0 +407,0 @@ "No child elements found, this component as no template so you need to define your own as child of this component."

src/components/bs4-slideshow/bs4-slideshow.component.ts

 import { TemplatesComponent } from "../templates/templates.component";
 import { EventDispatcher } from "@ribajs/core";
-
+import { hasChildNodesTrim } from "@ribajs/utils/src/dom";
 import { clone, camelCase } from "@ribajs/utils/src/type";
@@ -1278,3 +1278,3 @@
     // Only set the component template if there no childs or the childs are templates
-    if (!this.el.hasChildNodes() || this.hasOnlyTemplateChilds()) {
+    if (!hasChildNodesTrim(this.el) || this.hasOnlyTemplateChilds()) {
       // ('Full template!', this.templateIndicators);
@@ -1281,0 +1281,0 @@ return templateSlides + this.templateControls + this.templateIndicators;

src/components/bs4-tabs/bs4-tabs.component.ts

 import { handleizeFormatter } from "@ribajs/core";
 import templateHorizontal from "./bs4-tabs-horizontal.component.html";
 import templateVertical from "./bs4-tabs-vertical.component.html";
-
+import { hasChildNodesTrim } from "@ribajs/utils/src/dom";
 import { TemplatesComponent } from "../templates/templates.component";
@@ -371,3 +371,3 @@
     // Only set the component template if there no childs or the childs are templates
-    if (!this.el.hasChildNodes() || this.hasOnlyTemplateChilds()) {
+    if (!hasChildNodesTrim(this.el) || this.hasOnlyTemplateChilds()) {
       if (this.scope.optionTabsAngle === "horizontal") {
@@ -374,0 +374,0 @@ return templateHorizontal;

src/components/bs4-toast-item/bs4-toast-item.component.ts

 import { Component } from "@ribajs/core";
 
 import template from "./bs4-toast-item.component.html";
-import { Toast, ToastBinderData } from "../../interfaces";
-import { ToastService } from "../../services";
-import { Scope as Bs4ToastContainerScope } from "../bs4-toast-container/bs4-toast-container.component";
+import { Toast } from "../../interfaces";
+import { ToastService, EVENT_HIDDEN } from "../../services/toast.service";
+import { Scope as Bs4NotificationContainerScope } from "../bs4-notification-container/bs4-notification-container.component";
+import { getElementFromEvent } from "@ribajs/utils/src/dom";
 
 interface Scope {
   iconUrl?: string;
-  toast?: Toast | ToastBinderData;
-  onHide: Bs4ToastItemComponent["onHide"];
-  onDismiss: Bs4ToastItemComponent["onDismiss"];
+  toast?: Toast;
+  onHidden: Bs4ToastItemComponent["onHidden"];
+  dismiss: Bs4ToastItemComponent["dismiss"];
   index: number;
@@ -21,3 +22,3 @@ $parent?: any;
 
-  public _debug = false;
+  public _debug = true;
   protected autobind = true;
@@ -36,5 +37,6 @@
   protected scope: Scope = {
-    onHide: this.onHide,
+    onHidden: this.onHidden,
     index: -1,
-    onDismiss: this.onDismiss,
+    dismiss: this.dismiss,
+    toast: undefined,
   };
@@ -53,3 +55,6 @@
     super.afterBind();
-    // construct toast service
+    this.initToastService();
+  }
+
+  protected initToastService() {
     const toast = this.scope.toast;
@@ -59,11 +64,19 @@ const toastEl = this.el.firstElementChild as HTMLElement | null;
       this.toastService = new ToastService(toastEl, {
-        delay: toast.delay ? toast.delay : ToastService.Default.delay,
-        autohide: toast.autoHide
-          ? toast.autoHide
-          : ToastService.Default.autohide,
-        animation: toast.animation
-          ? toast.animation
-          : ToastService.Default.animation,
+        delay:
+          toast.delay !== undefined ? toast.delay : ToastService.Default.delay,
+        autohide:
+          toast.autoHide !== undefined
+            ? toast.autoHide
+            : ToastService.Default.autohide,
+        animation:
+          toast.animation !== undefined
+            ? toast.animation
+            : ToastService.Default.animation,
       });
 
+      // Call onHidden on hidden event once
+      toastEl.addEventListener(EVENT_HIDDEN, this.onHidden.bind(this), {
+        once: true,
+      });
+
       // show toast using the toastservice
@@ -75,3 +88,3 @@ this.toastService.show();
   // can be called if toast should be removed
-  public onDismiss() {
+  public dismiss() {
     this.toastService?.hide();
@@ -81,15 +94,10 @@ }
   // remove toast from dom once shown
-  public onHide(event: Event, el: HTMLElement) {
-    const toastContainer: Bs4ToastContainerScope | null =
+  public onHidden(event: Event, el?: HTMLElement) {
+    if (!el) {
+      el = getElementFromEvent(event);
+    }
+    const toastContainer: Bs4NotificationContainerScope | null =
       this.scope.$parent?.$parent || null;
-    if (
-      typeof toastContainer?.onToastItemHide === "function" &&
-      this.scope.toast
-    ) {
-      toastContainer.onToastItemHide(
-        event,
-        el,
-        this.scope.index,
-        this.scope.toast
-      );
+    if (typeof toastContainer?.onItemHide === "function" && this.scope.toast) {
+      toastContainer.onItemHide(event, el, this.scope.index, this.scope.toast);
     }
@@ -96,0 +104,0 @@ }

src/components/bs4-toggle-button/bs4-toggle-button.component.ts

@@ -11,3 +11,3 @@ /**
 import { Component, EventDispatcher } from "@ribajs/core";
-
+import { hasChildNodesTrim } from "@ribajs/utils/src/dom";
 import { TOGGLE_BUTTON } from "../../constants";
@@ -154,3 +154,3 @@
   protected template() {
-    if (!this.el.hasChildNodes()) {
+    if (!hasChildNodesTrim(this.el)) {
       console.warn(
@@ -157,0 +157,0 @@ "No child elements found, this component as no template so you need to define your own as child of this component."

src/components/index.ts

@@ -15,3 +15,4 @@ export { Bs4DropdownComponent } from "./bs4-dropdown/bs4-dropdown.component";
 export { Bs4FormComponent } from "./bs4-form/bs4-form.component";
-export { Bs4ToastContainerComponent } from "./bs4-toast-container/bs4-toast-container.component";
+export { Bs4NotificationContainerComponent } from "./bs4-notification-container/bs4-notification-container.component";
 export { Bs4ToastItemComponent } from "./bs4-toast-item/bs4-toast-item.component";
+export { Bs4ModalItemComponent } from "./bs4-modal-item/bs4-modal-item.component";

src/components/templates/templates.component.ts

 import { Component } from "@ribajs/core";
 import { camelCase } from "@ribajs/utils/src/type";
+// import { hasChildNodesTrim } from "@ribajs/utils/src/dom";
 
@@ -125,3 +126,3 @@ export type AttributeType = string; // 'string' | 'number' | 'boolean';
   //   // Only set the component template if there no childs or the childs are templates
-  //   if (!this.el.hasChildNodes() || this.hasOnlyTemplateChilds()) {
+  //   if (!hasChildNodesTrim(this.el) || this.hasOnlyTemplateChilds()) {
   //     return template;
@@ -128,0 +129,0 @@ //   } else {

src/index.ts

@@ -5,5 +5,5 @@ export * from "./services";
 // export * as formatters from './formatters/bs4.formatters';
-export * from "./services";
+export * from "./interfaces";
 // export * from './interfaces/interfaces';
 export * from "./constants";
 export * from "./bs4.module";

src/interfaces/index.ts

@@ -6,1 +6,3 @@ export * from "./carousel-class-name";
 export * from "./toast";
+export * from "./modal";
+export * from "./notification";

src/interfaces/toast.ts

 import { ToastService } from "../services";
+import { Notification } from "./notification";
 
-export interface Toast {
-  title?: string;
+export class Toast extends Notification {
   message: string;
@@ -12,8 +12,40 @@ iconUrl?: string;
   contextualClass?: string;
-}
 
-export interface ToastBinderData extends Toast {
-  channel?: string;
-  $event?: CustomEvent;
-  $context?: any;
+  constructor({
+    title,
+    message,
+    iconUrl,
+    delay,
+    autoHide,
+    animation,
+    toastService,
+    contextualClass,
+    channel,
+    $event,
+    $context,
+  }: {
+    title?: string;
+    message: string;
+    iconUrl?: string;
+    delay?: number;
+    autoHide?: boolean;
+    animation?: boolean;
+    toastService?: ToastService;
+    contextualClass?: string;
+    channel?: string;
+    $event?: CustomEvent;
+    $context?: any;
+  }) {
+    super("toast", title);
+    this.message = message;
+    this.iconUrl = iconUrl;
+    this.delay = delay;
+    this.autoHide = autoHide;
+    this.animation = animation;
+    this.toastService = toastService;
+    this.contextualClass = contextualClass;
+    this.channel = channel;
+    this.$event = $event;
+    this.$context = $context;
+  }
 }

src/services/dom/event-handler.ts

@@ -6,5 +6,5 @@ /**
   public static on<T>(
-    element: HTMLElement,
+    element: HTMLElement | Document | Window,
     eventName: string,
-    handler: (e: T) => void
+    handler: EventListenerOrEventListenerObject
   ) {
@@ -15,5 +15,5 @@ return element.addEventListener(eventName as any, handler, {});
   public static one<T>(
-    element: HTMLElement,
+    element: HTMLElement | Document | Window,
     eventName: string,
-    handler: (e: T) => void
+    handler: EventListenerOrEventListenerObject
   ) {
@@ -24,5 +24,5 @@ return element.addEventListener(eventName as any, handler, { once: true });
   public static off<T>(
-    element: HTMLElement,
+    element: HTMLElement | Document | Window,
     originalTypeEvent: string,
-    handler: (e: T) => void
+    handler: EventListenerOrEventListenerObject
   ) {
@@ -33,3 +33,3 @@ return element.removeEventListener(originalTypeEvent as any, handler);
   public static trigger<T = any>(
-    element: HTMLElement,
+    element: HTMLElement | Document | Window,
     eventName: string,
@@ -36,0 +36,0 @@ extraParameters: any = {}

src/services/index.ts

@@ -5,3 +5,4 @@ export * from "./dom";
 export { DropdownService } from "./dropdown.service";
+export { ModalService } from "./modal.service";
 export { ToastService } from "./toast.service";
 export * from "./utils.service";

src/services/toast.service.ts

@@ -1,2 +0,2 @@
-// Fork of https://raw.githubusercontent.com/twbs/bootstrap/main/js/src/toast.js
+// Fork of https://github.com/twbs/bootstrap/blob/main/js/src/toast.js
 
@@ -184,3 +184,3 @@ /**
 
-  protected _getConfig(config: any) {
+  protected _getConfig(config: Config): Config {
     config = {
@@ -187,0 +187,0 @@ ...Default,

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

275330

increased by11.51%

Number of package files

102

increased by6.25%

Lines of code

7326

increased by11.86%

Number of medium supply chain risk alerts

0

decreased by-100%

Dependency changes

• + Added@ribajs/core@1.9.0-alpha.2(transitive)

• + Added@ribajs/extras@1.9.0-alpha.2(transitive)

• + Added@ribajs/utils@1.9.0-alpha.2(transitive)

• - Removed@ribajs/core@1.9.0-alpha.1(transitive)

• - Removed@ribajs/extras@1.9.0-alpha.1(transitive)

• - Removed@ribajs/utils@1.9.0-alpha.1(transitive)

• Updated@ribajs/core@1.9.0-alpha.2

• Updated@ribajs/extras@1.9.0-alpha.2

• Updated@ribajs/utils@1.9.0-alpha.2