@supersoniks/concorde 3.1.21 → 3.1.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@supersoniks/concorde",
-  "version": "3.1.21",
+  "version": "3.1.23",
   "license": "MIT",
   "type": "module",
   "main": "",

package/src/core/components/ui/modal/modal.ts

@@ -1,4 +1,4 @@
-import { animate, fadeIn, fadeOut } from "@lit-labs/motion";
+import { animate, fadeIn, fadeOut, Options } from "@lit-labs/motion";
 import { customScroll } from "@supersoniks/concorde/core/components/ui/_css/scroll";
 import Subscriber from "@supersoniks/concorde/core/mixins/Subscriber";
 import { css, html, LitElement, nothing, PropertyValues } from "lit";
@@ -39,7 +39,12 @@ declare type ModalCreateOptions = {
   removeOnHide?: boolean;
   forceAction?: boolean;
   removeHashOnHide?: boolean;
+  fullScreen?: boolean;
+  effect?: effectType;
 };
+
+type effectType = "fade" | "slide" | "none";
+
 const tagName = "sonic-modal";
 
 @customElement(tagName)
@@ -180,10 +185,13 @@ export class Modal extends Subscriber(LitElement) {
   @property({ type: String }) width = "100%";
   @property({ type: String }) height = "auto";
   @property({ type: String }) zIndex = "var(--sc-modal-z-index)";
+  @property({ type: String }) effect?: effectType;
   @property({ type: Object }) options?: ModalCreateOptions;
   @property({ type: Boolean, reflect: true }) fullScreen = false;
   @property({ type: Boolean, reflect: true }) visible = false;
 
+  @property({ type: Object }) animation?: Options;
+
   @query(".modal-wrapper") modalWrapper!: HTMLDivElement;
   @query(".modal") modalElement!: HTMLDivElement;
 
@@ -204,6 +212,8 @@ export class Modal extends Subscriber(LitElement) {
     if (options.maxHeight) modal.maxHeight = options?.maxHeight;
     if (options.height) modal.height = options?.height;
     if (options.forceAction) modal.forceAction = true;
+    if (options.fullScreen) modal.fullScreen = options?.fullScreen;
+    if (options.effect) modal.effect = options?.effect;
 
     if (options.paddingX)
       modal.style.setProperty("--sc-modal-px", options?.paddingX);
@@ -248,6 +258,40 @@ export class Modal extends Subscriber(LitElement) {
     if (_changedProperties.has("fullScreen")) {
       this.handleFullsceen();
     }
+    if (_changedProperties.has("effect")) {
+      if (this.effect == "fade") {
+        this.animation = {
+          keyframeOptions: {
+            duration: 400,
+          },
+          in: fadeIn,
+          out: fadeOut,
+        };
+      } else if (this.effect == "none") {
+        this.animation = undefined;
+      } else {
+        this.animation = {
+          keyframeOptions: {
+            duration: 400,
+            easing: `cubic-bezier(0.250, 0.250, 0.420, 1.225)`,
+          },
+          in: [
+            {
+              transform: "translateY(25%) scale(1)",
+              boxShadow: "0 0 0 rgba(0,0,0,0)",
+              opacity: 0,
+            },
+          ],
+          out: [
+            {
+              transform: "translateY(20%) scale(1)",
+              boxShadow: "0 0 0 rgba(0,0,0,0)",
+              opacity: 0,
+            },
+          ],
+        };
+      }
+    }
     super.willUpdate(_changedProperties);
   }
 
@@ -284,26 +328,7 @@ export class Modal extends Subscriber(LitElement) {
           part="modal"
           class="modal custom-scroll"
           style=${styleMap(modalStyles)}
-          ${animate({
-            keyframeOptions: {
-              duration: 400,
-              easing: `cubic-bezier(0.250, 0.250, 0.420, 1.225)`,
-            },
-            in: [
-              {
-                transform: "translateY(25%) scale(1)",
-                boxShadow: "0 0 0 rgba(0,0,0,0)",
-                opacity: 0,
-              },
-            ],
-            out: [
-              {
-                transform: "translateY(20%) scale(1)",
-                boxShadow: "0 0 0 rgba(0,0,0,0)",
-                opacity: 0,
-              },
-            ],
-          })}
+          ${animate(this.animation)}
         >
           <div class="modal-content">
             ${!this.options?.forceAction

package/src/core/mixins/FormCheckable.ts

@@ -140,8 +140,6 @@ const Form = <T extends Constructor<FormElementInterface>>(superClass: T) => {
      * Le comportement est ici modifié fonction de son mode (checkbox, radio, unique)
      */
     getValueForFormPublisher() {
-      const formPublisher = this.getFormPublisher();
-      if (!formPublisher) return null;
       let currentValue = this.getFormPublisherValue();
 
       if (this.radio) {

package/src/core/utils/PublisherProxy.ts

@@ -294,6 +294,9 @@ export class PublisherProxy<T = any> {
    */
 
   async set(newValue: T, lockInternalMutationsTransmission = false) {
+    if(Array.isArray(newValue) && newValue.indexOf(null)!=-1){
+      console.log(newValue);
+    }
     /**
      * On retounre tout de suite si la valeur n'a pas changé
      */
@@ -368,20 +371,7 @@ export class PublisherProxy<T = any> {
     for (const key in this._value_) {
       if (this._value_[key] === undefined) delete this._value_[key];
     }
-    this._proxies_.forEach((_subProxy, key) => {
-      /**
-       * On supprime les proxys qui ne sont plus dans la nouvelle valeur si ils n'on pas d'écouteurs
-       **/
-      if ((this._value_ as any)[key] === undefined) {
-        // if (!_subProxy?.hasListener()) {
-        //   // this._proxies_.delete(key);
-        // } else {
-        if (key != "_parent_") {
-          if (prevValue[key]) (this._value_ as any)[key] = null;
-        }
-        // }
-      }
-    });
+    
     /**
      * On prévient les écouteurs que la valeur a changé
      */