coveragebook_components 0.5.0 → 0.5.2

data/app/components/coco/app/elements/image_picker/image_picker.rb

@@ -15,18 +15,9 @@ module Coco
 
         attr_reader :uploader_args, :src
 
-        def initialize(input_name: nil, src: nil, accept: "image/*", form_builder: nil, **kwargs)
+        def initialize(src: nil, accept: "image/*", **kwargs)
           @src = src
-          @uploader_args = {name: input_name, accept: accept, form_builder: form_builder}
-        end
-
-        def alpine_props
-          {
-            image: {
-              name: (src.present? && File.basename(src)),
-              data: src
-            }
-          }
+          @uploader_args = {accept: accept}
         end
       end
     end

data/app/components/coco/app/elements/image_picker_button/image_picker_button.html.erb

@@ -1,20 +1,21 @@
 <%= render component_tag(x: {
-  data: x_data("appImagePickerButton", alpine_props),
-  "@dropdown:mount": "onDropdownMount"
-}) do %> 
-  <%= input %>
+  data: x_data("appImagePickerButton", {src: src}),
+  "@dropdown:mount": "onDropdownMount",
+  effect: "$dispatch('image-picker:change', {image: selectedImage})"
+}) do %>
   <%= render button do |btn| %>
-    <% btn.with_dropdown do %>
+  
+    <% btn.with_dropdown do %>    
       <div
-        @image-picker:select="setSelectedImage($event.detail.image)"
-        @image-picker:clear="clearSelectedImage"
+        @image-picker:select="$parent.setSelectedImage($event.detail.image)"
+        @image-picker:clear="$parent.clearSelectedImage"
         x-cloak>
         <div data-role="image-picker">
           <%= picker %>
         </div>
       </div>
     <% end %>
-
+  
     <%= button_text %>
   <% end %>
 <% end %>

data/app/components/coco/app/elements/image_picker_button/image_picker_button.js

@@ -1,24 +1,13 @@
 import { CocoComponent } from "@js/coco";
 import { getData } from "@helpers/alpine";
+import { basename } from "@helpers/path";
 
-export default CocoComponent("appImagePickerButton", ({ image }) => {
+export 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() {
@@ -37,21 +26,19 @@ export default CocoComponent("appImagePickerButton", ({ image }) => {
       reader.addEventListener("load", () => {
         this.selectedImage = {
           name: file.name,
-          file: file,
+          file,
           data: reader.result,
         };
-      });
 
-      // reader.addEventListener("error", () => {
-      //   this.errors.push(`Error reading file: ${file.name}`);
-      // });
+        this.dropdown.hide();
+      });
 
       reader.readAsDataURL(file);
     },
 
     clearSelectedImage() {
       this.dropdown.hide();
-      this.selectedImage = null;
+      this.selectedImage = { name: null, data: null, file: null };
     },
 
     setSelectedImage(image) {

data/app/components/coco/app/elements/image_picker_button/image_picker_button.rb

@@ -29,13 +29,10 @@ module Coco
           with_picker(src: @src) unless picker?
         end
 
-        attr_reader :src, :input_name
+        attr_reader :src
 
-        def initialize(src: nil, input_name: nil, form_builder: nil, direct_upload: false, **kwargs)
+        def initialize(src: nil, **kwargs)
           @src = src
-          @form_builder = form_builder
-          @input_name = input_name
-          @direct_upload = direct_upload
 
           @size = kwargs.fetch(:size, :default)&.to_sym
           if @size.in?(Coco::App::Elements::Button::SIZE_ALIASES.keys) && !kwargs.key?(:resize)
@@ -43,38 +40,25 @@ module Coco
           end
         end
 
-        def direct_upload?
-          @direct_upload
-        end
-
-        def alpine_props
-          {
-            image: {
-              name: (src.present? && File.basename(src)),
-              data: src
-            }
-          }
-        end
+        # def input
+        #   if input_name
+        #     kwargs = {
+        #       class: "picker-file-input",
+        #       "x-ref": "fileInput",
+        #       direct_upload: @direct_upload
+        #     }
 
-        def input
-          if input_name
-            kwargs = {
-              class: "picker-file-input",
-              "x-ref": "fileInput",
-              direct_upload: @direct_upload
-            }
+        #     if direct_upload? && !helpers.respond_to?(:rails_direct_uploads_url)
+        #       kwargs[:data] = {direct_upload_url: @direct_upload}
+        #     end
 
-            if direct_upload? && !helpers.respond_to?(:rails_direct_uploads_url)
-              kwargs[:data] = {direct_upload_url: @direct_upload}
-            end
-
-            if @form_builder
-              @form_builder.file_field(input_name, **kwargs)
-            else
-              file_field_tag(input_name, **kwargs)
-            end
-          end
-        end
+        #     if @form_builder
+        #       @form_builder.file_field(input_name, **kwargs)
+        #     else
+        #       file_field_tag(input_name, **kwargs)
+        #     end
+        #   end
+        # end
 
         def button_text
           text || content

data/app/components/coco/app/elements/seamless_textarea/seamless_textarea.html.erb

@@ -1,12 +1,15 @@
-<%= render component_tag(x: {data: "appSeamlessTextarea"}) do %>
-  <%= text_area(
+<%= render component_tag(x: {data: "appSeamlessTextarea", options: "options"}) do %>
+  <%= text_area_tag(nil, value,
+      id: nil,
+      placeholder: placeholder,
       spellcheck: false,
       rows: 1,
       **x_attrs({
         "@keydown.enter.prevent": (true unless multiline?),
         "@input": "onResize",
         ref: "textarea",
-        "model.debounce": "value"
-      })
+        "model.fill.debounce": "value"
+      }),
+      **@textarea_args
     ) %>
 <% end %>

data/app/components/coco/app/elements/seamless_textarea/seamless_textarea.js

@@ -9,12 +9,18 @@ export default CocoComponent("appSeamlessTextarea", () => {
     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() {

data/app/components/coco/app/elements/seamless_textarea/seamless_textarea.rb

@@ -3,22 +3,17 @@ module Coco
     module Elements
       class SeamlessTextarea < Coco::Component
         include TagHelper
-        include Concerns::WrapsComponent
         include Concerns::AcceptsOptions
 
-        wraps_component :textarea
-
         accepts_option :multiline, from: [true, false]
+        accepts_option :focus, from: [true, false]
 
-        attr_reader :name, :id
+        attr_reader :placeholder
 
-        def initialize(name:, value: nil, id: nil, placeholder: nil, textarea: nil, form_builder: nil, **kwargs)
-          @name = name
-          @value = value
-          @form_builder = form_builder
+        def initialize(textarea: nil, value: nil, placeholder: nil, **kwargs)
           @textarea_args = textarea.to_h
-          @textarea_args[:id] = id
-          @textarea_args[:placeholder] = placeholder
+          @value = value
+          @placeholder = placeholder
         end
 
         def multiline?
@@ -28,16 +23,6 @@ module Coco
         def value
           (@value.presence || content.presence || "").strip_heredoc.strip
         end
-
-        def text_area(**html_args)
-          args = @textarea_args.merge(html_args.compact)
-
-          if @form_builder
-            @form_builder.text_area(name, value: value, **args)
-          else
-            text_area_tag(name, value, **args)
-          end
-        end
       end
     end
   end

data/app/components/coco/base/button/button.css

@@ -41,7 +41,7 @@
 
     /* loading */
 
-    &[data-state="loading"] .button-icon {
+    &[data-state="loading"] > .button-element .button-icon {
       @apply animate-spin;
     }
 
@@ -53,7 +53,7 @@
 
     /* Icons */
 
-    &[data-icon-position="end"] {
+    &[data-icon-position="end"] > .button-element {
       .button-content {
         @apply order-1;
       }
@@ -67,7 +67,7 @@
       }
     }
 
-    &.with-icon[data-collapsed="true"] {
+    &.with-icon[data-collapsed="true"] > .button-element {
       .button-content {
         display: none;
       }

data/app/components/coco/base/button/button.js

@@ -31,11 +31,8 @@ export default CocoComponent("button", (data = {}) => {
           return;
         }
 
-        this.setTooltipText();
         this.$root.setAttribute("data-collapsed", collapsed ? "true" : "false");
       });
-
-      this.$watch("$options.state", () => this.setTooltipText());
     },
 
     setTooltipText() {
@@ -178,6 +175,7 @@ export default CocoComponent("button", (data = {}) => {
     root: {
       "x-options": "options",
       "x-tooltip": "tooltipText",
+      "x-effect": "setTooltipText",
       "@confirmation:confirm": "approveAndRun",
       "@confirmation:cancel": "cancelConfirmation",
       "@dropdown:show": "setState('active')",

data/app/components/coco/base/image_uploader/image_uploader.html.erb

@@ -7,11 +7,12 @@
   "@drop.stop.prevent": "active = false; handleDrop($event)",
   ":data-active": "active && droppable"
 }) do %>
-  <%= file_field accept: accept,
+  <%= file_field_tag(nil,
+    accept: accept,
     class: "uploader-input",
     "x-ref": "input",
     "@click.stop": "",
-    "@change": "handleFiles($el.files)" %>
+    "@change": "handleFiles($el.files)") %>
   <%= content %>
 <% end %>
 

data/app/components/coco/base/image_uploader/image_uploader.rb

@@ -5,20 +5,10 @@ module Coco
     accepts_option :click, from: [true, false], default: true
     accepts_option :drop, from: [true, false], default: true
 
-    attr_reader :name, :accept, :form_builder
+    attr_reader :name, :accept
 
-    def initialize(name: nil, accept: "image/*", form_builder: nil, **kwargs)
-      @name = name || random_id
+    def initialize(accept: "image/*", **kwargs)
       @accept = accept
-      @form_builder = form_builder
-    end
-
-    def file_field(**kwargs)
-      if form_builder
-        form_builder.file_field(@name, **kwargs)
-      else
-        file_field_tag(@name, **kwargs)
-      end
     end
 
     def clickable?

data/app/components/coco/book/blocks/slides/media_slide/media_slide.css

@@ -1,7 +1,7 @@
 @layer components {
   [data-coco][data-component="book-media-slide"] {
     img {
-      @apply w-full rounded-md;
+      @apply w-full h-full object-contain rounded-md;
     }
   }
 }

data/app/components/coco/component.rb

@@ -2,6 +2,7 @@ module Coco
   class Component < ViewComponent::Base
     include Concerns::AcceptsTagAttributes
     include Concerns::HasName
+    include Concerns::Translatable
     include Coco::ComponentHelper
     include Coco::AlpineHelper
 

data/app/components/coco/concerns/has_name.rb

@@ -19,7 +19,7 @@ module Coco
           end
         end
 
-        private
+        protected
 
         def component_group
           @_component_group ||= component_path.split("::").first.underscore.tr("_", "-")

data/app/components/coco/concerns/translatable.rb

@@ -0,0 +1,18 @@
+module Coco
+  module Concerns
+    module Translatable
+      extend ActiveSupport::Concern
+
+      def tt(key)
+        t("coco.#{self.class.i18n_path}.#{key}")
+      end
+
+      class_methods do
+        def i18n_path(path = nil)
+          @_i18n_path = path unless path.nil?
+          @_i18n_path ||= component_path.underscore.tr("/", ".")
+        end
+      end
+    end
+  end
+end

data/config/credentials/production.key

@@ -0,0 +1 @@
+265f649a303f0c2cbbfc9cfece75a181

data/config/credentials/production.yml.enc

@@ -0,0 +1 @@
+j8VyKMx4mwRZArG1zS/oqUw1F6/UD0hQQ5sujzeTTBlNAuCTkLiuoiyAXnJV9FtR90T765ll/50wFbw0MFtk8nAzPJg=--TOqZsXP2UCs2CSMx--xYL00fHdXoCd+/xpGro01g==