coveragebook_components 0.5.0 → 0.5.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 04a58eafadfb3d9bee3046676b58625cb101d3e84d183127aeb4e4dea3b056c8
-  data.tar.gz: cd33aac0b97a797b050346e55f31aa4ae6cce296dc0fc20b110f5924a79b3d3a
+  metadata.gz: ca789167f2fc08234f31ced3e398aca21017d7f1ade9e98ee6e50f0538f415f5
+  data.tar.gz: d0a3d173a36a8ba61c1763946dee9156a67ff6f7c20326611bf0f5fbd1dc2a4a
 SHA512:
-  metadata.gz: 152a325a617afd527e8607a669c85a1a4e09b9542fe23d1eeae53558726af33df1a2914c9848198d454427252c80c792ac2e13588ea216451d72e0cabdc35b07
-  data.tar.gz: 4f18b57a7909ab4308497e492bc5be2a6a0f1ccfc66b36dff6675d48438c126800554e1106c53414bc225ee7092afaa463a354a4c7114d6658f24c32edd3e60d
+  metadata.gz: e7881aee94a056a450875ae8d4982cdd78b529501b88295f94efcb91f383ede55dcc5fc7e1e8ac78a6614f2f20e93bb154bb4b1f3fc3c4e0a5ef134655618072
+  data.tar.gz: 8237eeb07c6d3ebc9756ce07afd1d5502502c6a0acc80bdc667f91d5c5f1b6f56c97431cc05e5582d3e67bd4fae38c2f95e029d609ef8a6451c786900ea725e7

data/app/assets/build/coco/app.css

@@ -1104,6 +1104,8 @@ select{
 
   [data-coco][data-component="app-slide-editor"] .editor-toolbar{
     margin-bottom: 1.5rem}}
+[data-coco][data-component="app-slide-editor"] .editor-form form{
+  display: none}
 [data-coco][data-component="app-slide-editor"] .editor-slide{
   --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
@@ -1113,9 +1115,6 @@ select{
   flex: none}
 [data-coco][data-component="app-slide-editor"] .coco-button.editor-saving{
   cursor: not-allowed}
-[data-coco][data-component="app-slide-editor"] .editor-thumbnail-file{
-  pointer-events: none;
-  display: none}
 [data-coco][data-component="app-slide-editor"] .editor-screenshot-wrapper{
   position: relative;
   width: 0px;
@@ -1184,7 +1183,7 @@ select{
   line-height: 24px}
 [data-coco][data-component="app-alert"] .alert-message a{
   color: currentColor}
-[data-coco][data-component="app-alert"]:not(.with-title) .alert-message{
+[data-coco][data-component="app-alert"].with-title .alert-message{
   margin-top: 0.25rem}
 [data-coco][data-component="app-alert"] .alert-actions{
   display: flex;
@@ -3150,8 +3149,11 @@ select{
         line-height: 1.4;
         font-size: var(--text-font-size)}
 [data-coco][data-component="book-media-slide"] img{
+  height: 100%;
   width: 100%;
-  border-radius: 0.375rem}
+  border-radius: 0.375rem;
+  -o-object-fit: contain;
+     object-fit: contain}
 .static{
   position: static}
 .fixed{

data/app/assets/build/coco/app.js

@@ -21587,14 +21587,14 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
     };
   });
 
-  // import-glob:/home/runner/work/coco/coco/app/assets/js/base|@baseComponents/**/*.js
+  // import-glob:/Users/mark/Projects/coveragebook/coco/app/assets/js/base|@baseComponents/**/*.js
   var modules = [button_exports, dropdown_exports, icon_exports, image_uploader_exports];
   var __default = modules;
 
   // base/components.js
   var components_default = registerComponents(__default);
 
-  // import-glob:/home/runner/work/coco/coco/app/assets/js/book|@bookComponents/**/*.js
+  // import-glob:/Users/mark/Projects/coveragebook/coco/app/assets/js/book|@bookComponents/**/*.js
   var modules2 = [];
   var __default2 = modules2;
 
@@ -22425,6 +22425,9 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
   function stripExtension(filename) {
     return filename.substring(0, filename.lastIndexOf(".")) || filename;
   }
+  function basename(path) {
+    return path ? path.replace(/.*\//, "") : path;
+  }
 
   // helpers/file.js
   function blobToFile(blob, fileName, type) {
@@ -22498,10 +22501,21 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
     pixelRatio: 1
   };
   var slide_editor_default = CocoComponent("appSlideEditor", (data2) => {
+    const initialData = {
+      layout: data2.layout,
+      title: data2.title,
+      text1: data2.text1,
+      bgColor: data2.bgColor,
+      textColor: data2.textColor,
+      bgImage: {
+        name: data2.bgImage,
+        data: data2.bgImage
+      }
+    };
     return __spreadProps(__spreadValues({
       use: [withUndo()]
-    }, data2), {
-      saved: __spreadValues({}, data2),
+    }, initialData), {
+      saved: __spreadValues({}, initialData),
       saving: false,
       ready: false,
       dragging: false,
@@ -22511,17 +22525,19 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
         return getData(this.$root.querySelector("[data-role='bg-image-picker']"));
       },
       init() {
-        this._fields.forEach((name) => {
-          this.$watch(
-            name,
-            (value, oldValue) => this.history.add(name, value, oldValue)
-          );
-        });
         this.$watch("thumbnailFile", () => this._syncThumbnailField());
         this.$watch("errors", (errors) => {
           errors.forEach((error2) => console.error(error2.message));
         });
-        this.$nextTick(() => this.ready = true);
+        this.$nextTick(() => {
+          this._fields.forEach((name) => {
+            this.$watch(
+              name,
+              (value, oldValue) => this.history.add(name, value, oldValue)
+            );
+          });
+          this.ready = true;
+        });
       },
       undo(name, value) {
         this[name] = value;
@@ -22550,7 +22566,11 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
             return;
           }
         }
-        this.$refs.form.requestSubmit();
+        if (this.$refs.form) {
+          this.$refs.form.querySelector("form").requestSubmit();
+        } else {
+          this.submitSuccess();
+        }
       },
       submitEnd(event) {
         handler = wasSuccessful(event) ? "submitSuccess" : "submitError";
@@ -22571,11 +22591,36 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
         $event.preventDefault();
         this._handleSaveError($event.detail.error, { event: $event });
       },
+      syncImageField(el, image) {
+        const dataTransfer = new DataTransfer();
+        if (image.file && image.file instanceof File) {
+          dataTransfer.items.add(image.file);
+        }
+        el.files = dataTransfer.files;
+      },
+      input: {
+        layout: { "x-model.fill": "layout" },
+        title: { "x-model.fill": "title" },
+        text1: { "x-model.fill": "text1" },
+        bgColor: { "x-model.fill": "bgColorHex" },
+        textColor: { "x-model.fill": "textColorHex" },
+        bgImage: { "x-effect": "syncImageField($el, bgImage)" },
+        bgImagePurge: { ":checked": "!hasBgImage" }
+      },
+      get hasBgImage() {
+        return !!(this.bgImage && this.bgImage.data);
+      },
+      get bgColorHex() {
+        return this.bgColor.replace("#", "");
+      },
+      get textColorHex() {
+        return this.textColor.replace("#", "");
+      },
       get slideStyles() {
         return {
           backgroundColor: this.bgColor,
           color: this.textColor,
-          backgroundImage: this.bgImage && this.bgImage.data && `url('${this.bgImage.data}')`
+          backgroundImage: this.hasBgImage ? `url('${this.bgImage.data}')` : "none"
         };
       },
       get slideClasses() {
@@ -22585,13 +22630,13 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
         };
       },
       get isDarkBg() {
-        return this.bgImage && this.bgImage.data || this.bgColor ? isDark(this.bgColor) : false;
+        return this.hasBgImage || this.bgColor ? isDark(this.bgColor) : false;
       },
       get shouldGenerateThumbnail() {
         return !!this.$refs.thumbnail;
       },
       get _fields() {
-        return Object.keys(data2);
+        return Object.keys(initialData);
       },
       async _generateThumbnail() {
         const screenshotSlide = this.$refs.screenshot.firstElementChild;
@@ -22620,6 +22665,9 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
       },
       _handleSaveError(message2 = "Error saving slide", context = {}) {
         this.errors.push({ message: message2, context });
+        this.errors.forEach((err) => {
+          console.log(err.message);
+        });
         this.saving = false;
         this.$dispatch("slide:save-end", { success: false });
       }
@@ -24542,12 +24590,6 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
           this.$root.querySelector("[data-role='color-picker']").firstElementChild
         );
       },
-      get selectedColorHex() {
-        return this.selectedColor && this.selectedColor.replace("#", "");
-      },
-      set selectedColorHex(value) {
-        this.selectedColor == "#" + value.replace("#", "");
-      },
       onDropdownMount() {
         this.getPicker().setSelectedColor(this.selectedColor);
       }
@@ -24575,15 +24617,19 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
   __export(image_picker_exports, {
     default: () => image_picker_default
   });
-  var image_picker_default = CocoComponent("appImagePicker", ({ image }) => {
+  var image_picker_default = CocoComponent("appImagePicker", ({ src }) => {
     return {
       use: [],
-      image: null,
+      image: {
+        name: basename(src),
+        file: null,
+        data: src
+      },
       get name() {
-        return this.image && this.image.name;
+        return this.image.name;
       },
       get src() {
-        return this.image && this.image.data;
+        return this.image.data;
       },
       get hasImage() {
         return !!this.src;
@@ -24592,7 +24638,11 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
         return getComponent(this.$refs.uploader.firstElementChild);
       },
       setImage(file, silent = false) {
-        this.image = file;
+        this.image = {
+          file: file.file,
+          name: file.name,
+          data: file.data
+        };
         this.uploader.setFile(file);
         if (silent === false) {
           this.$dispatch("image-picker:select", { image: this.image });
@@ -24600,7 +24650,7 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
       },
       clearImage(silent = false) {
         this.uploader.clear();
-        this.image = null;
+        this.image = { name: null, data: null, file: null };
         if (silent === false) {
           this.$dispatch("image-picker:clear");
         }
@@ -24619,21 +24669,12 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
   __export(image_picker_button_exports, {
     default: () => image_picker_button_default
   });
-  var image_picker_button_default = CocoComponent("appImagePickerButton", ({ image }) => {
+  var image_picker_button_default = CocoComponent("appImagePickerButton", ({ src }) => {
     return {
-      selectedImage: image,
-      dropdown: null,
-      init() {
-        this.$watch("selectedImage", (file) => {
-          const dataTransfer = new DataTransfer();
-          if (file && file.file instanceof File) {
-            dataTransfer.items.add(file.file);
-          }
-          this.$refs.fileInput.files = dataTransfer.files;
-          if (this.dropdown) {
-            this.dropdown.hide();
-          }
-        });
+      selectedImage: {
+        name: basename(src),
+        file: null,
+        data: src
       },
       getPicker() {
         return getData(
@@ -24651,16 +24692,17 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
             file,
             data: reader.result
           };
+          this.dropdown.hide();
         });
         reader.readAsDataURL(file);
       },
       clearSelectedImage() {
         this.dropdown.hide();
-        this.selectedImage = null;
+        this.selectedImage = { name: null, data: null, file: null };
       },
-      setSelectedImage(image2) {
+      setSelectedImage(image) {
         this.dropdown.hide();
-        this.selectedImage = image2;
+        this.selectedImage = image;
       },
       onDropdownMount({ detail }) {
         this.dropdown = detail.dropdown;
@@ -24698,11 +24740,16 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
       height: null,
       observer: null,
       value: null,
-      get singleLine() {
-        return this.assertData("multiline", "false");
-      },
+      options: ["multiline", "focus"],
       init() {
         this.value = this.$refs.textarea.value;
+        this.$nextTick(() => {
+          this.onResize();
+          if (this.$options.focus) {
+            this.$refs.textarea.focus();
+            this.$refs.textarea.selectionStart = this.$refs.textarea.value.length;
+          }
+        });
       },
       onResize() {
         const textarea = this.$refs.textarea;
@@ -24827,7 +24874,7 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
     };
   });
 
-  // import-glob:/home/runner/work/coco/coco/app/assets/js/app|@appComponents/**/*.js
+  // import-glob:/Users/mark/Projects/coveragebook/coco/app/assets/js/app|@appComponents/**/*.js
   var modules3 = [nav_bar_exports, nav_drawer_exports, slide_editor_exports, alert_exports, button_group_exports, color_picker_exports, color_picker_button_exports, confirm_panel_exports, image_picker_exports, image_picker_button_exports, menu_button_exports, notice_exports, seamless_textarea_exports, snackbar_exports, system_banner_exports, toast_exports, toolbar_exports];
   var __default3 = modules3;
 

data/app/assets/build/coco/book.css

@@ -893,8 +893,11 @@ select {
         font-size: var(--text-font-size);
 }
 [data-coco][data-component="book-media-slide"] img {
+  height: 100%;
   width: 100%;
   border-radius: 0.375rem;
+  -o-object-fit: contain;
+     object-fit: contain;
 }
 .static {
   position: static;

data/app/assets/build/coco/book.js

@@ -19802,14 +19802,14 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
     };
   });
 
-  // import-glob:/home/runner/work/coco/coco/app/assets/js/base|@baseComponents/**/*.js
+  // import-glob:/Users/mark/Projects/coveragebook/coco/app/assets/js/base|@baseComponents/**/*.js
   var modules = [button_exports, dropdown_exports, icon_exports, image_uploader_exports];
   var __default = modules;
 
   // base/components.js
   var components_default = registerComponents(__default);
 
-  // import-glob:/home/runner/work/coco/coco/app/assets/js/book|@bookComponents/**/*.js
+  // import-glob:/Users/mark/Projects/coveragebook/coco/app/assets/js/book|@bookComponents/**/*.js
   var modules2 = [];
   var __default2 = modules2;
 

data/app/assets/js/helpers/path.js

@@ -2,4 +2,12 @@ function stripExtension(filename) {
   return filename.substring(0, filename.lastIndexOf(".")) || filename;
 }
 
-export { stripExtension };
+function dirname(path) {
+  return path ? path.match(/.*\//) : path;
+}
+
+function basename(path) {
+  return path ? path.replace(/.*\//, "") : path;
+}
+
+export { stripExtension, dirname, basename };

data/app/components/coco/app/blocks/slide_editor/slide_editor.css

@@ -8,6 +8,10 @@
       @apply mb-4 xl:mb-6;
     }
 
+    .editor-form form {
+      @apply hidden;
+    }
+
     .editor-slide {
       @apply shadow-lg;