coveragebook_components 0.5.0 → 0.5.1

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

@@ -6,119 +6,70 @@ module Coco
         include Coco::BookHelper
         include Coco::FormatHelper
 
-        renders_one :bg_color, ->(name: :bg_color_hex, **input_options) do
-          add_field(:bg_color, name, input_options)
-        end
-
-        renders_one :text_color, ->(name: :text_color_hex, **input_options) do
-          add_field(:text_color, name, input_options)
-        end
-
-        renders_one :bg_image, ->(name: :bg_image, **input_options) do
-          add_field(:bg_image, name, input_options)
-        end
+        renders_one :form
 
-        renders_one :thumbnail, ->(name: :thumbnail_image, **input_options) do
-          add_field(:thumbnail, name, input_options)
+        renders_one :title, ->(value = nil, **textarea_options) do
+          Coco::App::Elements::SeamlessTextarea.new(**textarea_options,
+            value: value,
+            multiline: false,
+            focus: true,
+            data: {role: "title-editor"},
+            x: {modelable: "value", model: "title"})
         end
 
-        renders_one :title, ->(name: :title, **input_options) do
-          add_field(:title, name, input_options)
+        renders_one :text_1, ->(value = nil, **textarea_options) do
+          Coco::App::Elements::SeamlessTextarea.new(**textarea_options,
+            value: value,
+            multiline: false,
+            data: {role: "text-1-editor"},
+            x: {modelable: "value", model: "text1"})
         end
 
-        renders_one :text_1, ->(name: :text_1, **input_options) do
-          add_field(:text_1, name, input_options)
+        renders_one :bg_color, ->(value = nil, **input_options) do
+          @bg_color_options = {selected: value, **input_options}
         end
 
-        renders_one :layout, ->(name: :layout, **input_options) do
-          add_field(:layout, name, input_options)
+        renders_one :text_color, ->(value = nil, **input_options) do
+          @text_color_options = {selected: value, **input_options}
         end
 
-        before_render do
-          with_layout(value: "basic") unless layout?
+        renders_one :bg_image, ->(src = nil, **input_options) do
+          @bg_image_options = {src: src, **input_options}
         end
 
-        attr_reader :fields
-
-        def initialize(form: nil, **kwargs)
-          @form_args = form.to_h
-          @model = @form_args[:model]
-          @fields = {}
-        end
-
-        def form_args(attrs = {})
-          html_args = @form_args.fetch(:html, {})
-          attrs[:class] = class_names(html_args[:class], attrs[:class])
-          html_args.merge!(attrs)
-          @form_args.merge({html: html_args})
-        end
+        # renders_one :thumbnail, ->(name: :thumbnail_image, **input_options) do
+        #   add_field(:thumbnail, name, input_options)
+        # end
 
         def slide_args
           {
-            bg_image: bg_image_value,
-            bg_color_hex: bg_color_value,
-            text_color_hex: text_color_value,
-            layout: layout_value,
+            bg_image: bg_image_src,
+            bg_color_hex: bg_color_css,
+            text_color_hex: text_color_css,
             render_empty: true
           }
         end
 
         def alpine_props
           {
-            bg_color: format_css_hex_color(bg_color_value),
-            text_color: format_css_hex_color(text_color_value),
-            title: title_value,
-            text_1: text_1_value,
-            layout: layout_value,
-            bg_image: {
-              name: ((field?(:bg_image) && bg_image_value.present?) && File.basename(bg_image_value)),
-              data: (bg_image_value if field?(:bg_image))
-            }
+            bg_color: bg_color_css,
+            text_color: text_color_css,
+            title: title&.value,
+            text_1: text_1&.value,
+            bg_image: bg_image_src
           }
         end
 
-        def method_missing(name, *args, &block)
-          name.match(/_(value|options|name)/) do |matches|
-            field_name = name.to_s.gsub(matches[0], "").to_sym
-            method = matches[1].to_sym
-            if field?(field_name)
-              fields[field_name].public_send(method)
-            end
-          end
+        def bg_color_css
+          @bg_color_options[:selected] if @bg_color_options
         end
 
-        def respond_to_missing?(name, include_private = false)
-          field_name = name.to_s.gsub(/_(value|options|name)/, "")
-          field?(field_name.to_sym)
+        def text_color_css
+          @text_color_options[:selected] if @text_color_options
         end
 
-        def field?(name)
-          fields.key?(name)
-        end
-
-        private
-
-        def add_field(field_name, name, options = {})
-          model_value = @model&.public_send(name) if @model&.respond_to?(name)
-          fields[field_name] = SlideInput.new(name, model_value, options)
-        end
-
-        SlideInput = Data.define(:name, :model_value, :input_options) do
-          def value
-            input_options.fetch(:value, model_value)
-          end
-
-          def options
-            input_options.tap do |options|
-              options[:value] = value
-            end
-          end
-
-          def to_json
-            "\"#{value}\"" if value.present?
-          end
-
-          alias_method :to_s, :value
+        def bg_image_src
+          @bg_image_options[:src] if @bg_image_options
         end
       end
     end

data/app/components/coco/app/elements/alert/alert.css

@@ -34,7 +34,7 @@
       }
     }
 
-    &:not(.with-title) .alert-message {
+    &.with-title .alert-message {
       @apply mt-1;
     }
 

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

@@ -1,23 +1,24 @@
 <%= render component_tag(x: {
   data: x_data("appColorPickerButton", {selected: selected}),
-  "@dropdown:mount": "onDropdownMount()"
+  "@dropdown:mount": "onDropdownMount"
 }) do %> 
-  <%= input %>
-  <%= render button do |btn| %>
-    <% btn.with_icon do %>
-      <%= icon %>
-    <% end %>
+  <div x-effect="$dispatch('color-picker:change', {color: selectedColor})">
+    <%= render button do |btn| %>
+      <% btn.with_icon do %>
+        <%= icon %>
+      <% end %>
 
-    <% btn.with_dropdown do %>
-      <div
-        @color-picker:select="selectedColor = $event.detail.selectedColor;"
-        x-cloak>
-        <div data-role="color-picker">
-          <%= picker %>
+      <% btn.with_dropdown do %>
+        <div
+          @color-picker:select="selectedColor = $event.detail.selectedColor;"
+          x-cloak>
+          <div data-role="color-picker">
+            <%= picker %>
+          </div>
         </div>
-      </div>
-    <% end %>
+      <% end %>
 
-    <%= button_text %>
-  <% end %>
+      <%= button_text %>
+    <% end %>
+  </div>
 <% end %>

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

@@ -12,14 +12,6 @@ export default CocoComponent("appColorPickerButton", ({ selected }) => {
       );
     },
 
-    get selectedColorHex() {
-      return this.selectedColor && this.selectedColor.replace("#", "");
-    },
-
-    set selectedColorHex(value) {
-      this.selectedColor == "#" + value.replace("#", "");
-    },
-
     onDropdownMount() {
       this.getPicker().setSelectedColor(this.selectedColor);
     },

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

@@ -26,7 +26,7 @@ module Coco
         end
 
         renders_one :icon, ->(&block) do
-          tag.span class: "picker-icon", ":style": "{color: selectedColor}", &block
+          tag.span class: "picker-icon", style: "color: #{@selected}", ":style": "{color: selectedColor}", &block
         end
 
         before_render do
@@ -40,26 +40,13 @@ module Coco
 
         attr_reader :selected
 
-        def initialize(selected: nil, input_name: nil, form_builder: nil, **kwargs)
+        def initialize(selected: nil, **kwargs)
           @selected = selected
 
           @size = kwargs.fetch(:size, :default)&.to_sym
           if @size.in?(Coco::App::Elements::Button::SIZE_ALIASES.keys) && !kwargs.key?(:resize)
             @size, @resize = Coco::App::Elements::Button::SIZE_ALIASES.fetch(@size)
           end
-
-          @form_builder = form_builder
-          @input_name = input_name
-        end
-
-        def input
-          if @input_name
-            if @form_builder
-              @form_builder.hidden_field(@input_name, value: @selected, "x-model": "selectedColorHex")
-            else
-              hidden_field_tag(@input_name, @selected, "x-model": "selectedColorHex")
-            end
-          end
         end
 
         def button_text

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

@@ -1,4 +1,4 @@
-<%= render component_tag(x: {data: x_data("appImagePicker", alpine_props), ":class": "hasImage && 'has-image'"}) do %>  
+<%= render component_tag(x: {data: x_data("appImagePicker", {src: src}), ":class": "hasImage && 'has-image'"}) do %>  
   <div class="picker-file-name" x-show="hasImage">
     <label x-text="name"></label>
   </div>
@@ -6,7 +6,7 @@
     <%= render Coco::ImageUploader.new(
       **uploader_args,
       click: false) do %>
-      <div class="picker-blank-state" x-show="!fileData">
+      <div class="picker-blank-state" x-show="!$parent.src">
         <% if blank_state_text? %>
           <div class="picker-placeholder-text">
             <%= blank_state_text %>
@@ -18,8 +18,8 @@
           <% end %>
         </div>
       </div>
-      <div x-show="fileData" x-cloak>
-        <img :src="fileData" class="picker-thumbnail">
+      <div x-show="$parent.src" x-cloak>
+        <img :src="$parent.src" class="picker-thumbnail">
       </div>
     <% end %>
   </div>

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

@@ -1,17 +1,23 @@
 import { CocoComponent } from "@js/coco";
 import { getComponent } from "@helpers/alpine";
+import { basename } from "@helpers/path";
 
-export default CocoComponent("appImagePicker", ({ image }) => {
+export 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() {
@@ -23,8 +29,14 @@ export default CocoComponent("appImagePicker", ({ image }) => {
     },
 
     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 });
       }
@@ -32,7 +44,7 @@ export default CocoComponent("appImagePicker", ({ image }) => {
 
     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");
       }

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/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/lib/coco.rb

@@ -1,3 +1,3 @@
 module Coco
-  VERSION = "0.5.0"
+  VERSION = "0.5.1"
 end