avo 1.2.2 → 1.3.0.pre.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a5cd3316f4906c09337ae6079468f6779b272ec800112cefa1db60a169acaddf
-  data.tar.gz: 6238d803e939ed4471cf6b67fbcf2568bc74fddd6f125eb10575d15f2ee6c244
+  metadata.gz: a62f55a2092f0dd2716cdaacc87e2eea086745d164d032ff8024757748830e54
+  data.tar.gz: a104302aecf8c7f57ac9915fe61eaf26866d3ac25678f40eee2b2244de5d3664
 SHA512:
-  metadata.gz: 3e81e69fdb6f0094ccada08f1ca66c522fbf813b9dbc310de63a8c1ed64c9155d62e2dadee337b7ea937280755b157325e07ada2de94a88e219d4f29a8c58d66
-  data.tar.gz: f82850865b3a6592364534c33b4766f808e9d869025ea57bbe8148625fd0399d46575046d86bcca9115a68f604c302628c39965ba7f36f55c9822f2b3bf41480
+  metadata.gz: 88e0ca48ccbc7ff735cbf14178e8bfce1085b34996ed3cad80238e3a625adc0eeab918092b5fee304a3fc31ab9d2465a5f0b5580aac6b5efd308b09218f340cd
+  data.tar.gz: 8b1847c9083ef9998ee2e6a49202addcb9e670c2b5fa1904672287bfa902dd886df4ed5a6ba21de1f5db9020a3a1bc1e5e868765d672677928840d9c14ad83e1

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    avo (1.2.2)
+    avo (1.3.0.pre.1)
       active_link_to
       addressable
       breadcrumbs_on_rails

data/app/components/avo/common/key_value_component.html.erb

@@ -0,0 +1,53 @@
+<div class="w-full shadow-lg rounded-lg overflow-hidden"
+  data-controller="key-value"
+  data-key-value-target="controller"
+  data-options="<%= @field.options.to_json %>"
+  data-input-classes="<%= input_classes %>"
+  data-editable="<%= @view.in?([:edit, :create]) %>"
+>
+  <div class="w-full flex flex-col">
+    <div class="flex w-full">
+      <div class="flex w-full bg-gray-800 shadow overflow-hidden">
+        <div class="w-1/2 py-3 px-3 uppercase font-semibold text-xs text-white border-gray-600 border-r">
+          <%= @field.key_label %>
+        </div>
+        <div class="w-1/2 py-3 px-3 uppercase font-semibold text-xs text-white">
+          <%= @field.value_label %>
+        </div>
+        <% if @view.in?([:edit, :create]) %>
+          <div class="flex items-center justify-center p-2 px-3 border-l border-gray-600">
+            <a href="javascript:void(0);"
+              title="<%= @field.action_text %>"
+              data-tippy="tooltip"
+              data-button="add-row"
+              data-action="click->key-value#addRow"
+              <% if @field.disable_adding_rows %>
+                class="cursor-not-allowed"
+              <% end %>
+            >
+              <%= svg 'plus-circle', class: 'text-gray-400 h-5 hover:text-gray-500' %>
+            </a>
+          </div>
+        <% end %>
+      </div>
+    </div>
+    <div data-key-value-target="rows"></div>
+  </div>
+  <% if @form.present? %>
+    <%= @form.text_area @field.id,
+      value: @field.parsed_value,
+      class: 'hidden',
+      placeholder: @field.placeholder,
+      'data-key-value-target': 'input',
+      'data-view': :edit
+    %>
+  <% else %>
+    <%= text_area_tag @field.id,
+      @field.parsed_value,
+      class: 'hidden',
+      placeholder: @field.placeholder,
+      'data-key-value-target': 'input',
+      'data-view': :edit
+    %>
+  <% end %>
+</div>

data/app/components/avo/common/key_value_component.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+class Avo::Common::KeyValueComponent < ViewComponent::Base
+  include Avo::ApplicationHelper
+
+  def initialize(field:, form: nil, view: :show)
+    @field = field
+    @form = form
+    @view = view
+  end
+end

data/app/components/avo/edit/fields/key_value_field_component.html.erb

@@ -0,0 +1,3 @@
+<%= edit_field_wrapper field: @field, index: @index, form: @form, resource: @resource, displayed_in_modal: @displayed_in_modal do %>
+  <%= render Avo::Common::KeyValueComponent.new field: @field, form: @form, view: :edit %>
+<% end %>

data/app/components/avo/edit/fields/key_value_field_component.rb

@@ -0,0 +1,4 @@
+# frozen_string_literal: true
+
+class Avo::Edit::Fields::KeyValueFieldComponent < Avo::Edit::Fields::FieldComponent
+end

data/app/components/avo/show/fields/key_value_field_component.html.erb

@@ -0,0 +1,3 @@
+<%= show_field_wrapper field: @field, index: @index do %>
+  <%= render Avo::Common::KeyValueComponent.new field: @field, view: :show %>
+<% end %>

data/app/components/avo/show/fields/key_value_field_component.rb

@@ -0,0 +1,4 @@
+# frozen_string_literal: true
+
+class Avo::Show::Fields::KeyValueFieldComponent < Avo::Show::Fields::FieldComponent
+end

data/app/packs/entrypoints/application.js

@@ -19,6 +19,19 @@ window.Turbolinks = Turbo
 
 Mousetrap.bind('r r r', () => Turbo.visit(window.location.href, { action: 'replace' }))
 
+function initTippy() {
+  tippy('[data-tippy="tooltip"]', {
+    theme: 'light',
+    content(reference) {
+      const title = reference.getAttribute('title')
+      reference.removeAttribute('title')
+
+      return title
+    },
+  })
+}
+window.initTippy = initTippy
+
 const application = Application.start()
 
 const context = require.context('./../js/controllers', true, /\.js$/)
@@ -29,16 +42,7 @@ application.load(definitionsFromContext(fieldsContext))
 
 document.addEventListener('turbo:load', () => {
   document.body.classList.remove('turbo-loading')
-
-  tippy('[data-tippy="tooltip"]', {
-    theme: 'light',
-    content(reference) {
-      const title = reference.getAttribute('title')
-      reference.removeAttribute('title')
-
-      return title
-    },
-  })
+  initTippy()
 })
 document.addEventListener('turbo:visit', () => document.body.classList.add('turbo-loading'))
 document.addEventListener('turbo:submit-start', () => document.body.classList.add('turbo-loading'))

data/app/packs/js/controllers/fields/key_value_controller.js

@@ -0,0 +1,132 @@
+import { Controller } from 'stimulus'
+import { castBoolean } from '@/js/helpers/cast_boolean'
+
+export default class extends Controller {
+  static targets = ['input', 'controller', 'rows']
+
+  fieldValue = []
+
+  options = {}
+
+  get keyInputDisabled() {
+    return !this.options.editable || this.options.disable_editing_keys
+  }
+
+  get valueInputDisabled() {
+    return !this.options.editable
+  }
+
+  connect() {
+    this.setOptions()
+
+    try {
+      const objectValue = JSON.parse(this.inputTarget.value)
+      Object.keys(objectValue).forEach((key) => this.fieldValue.push([key, objectValue[key]]))
+    } catch (error) {
+      this.fieldValue = []
+    }
+
+    this.updateKeyValueComponent()
+  }
+
+  addRow() {
+    if (this.options.disable_adding_rows || !this.options.editable) return
+    this.fieldValue.push(['', ''])
+    this.updateKeyValueComponent()
+  }
+
+  deleteRow(event) {
+    if (this.options.disable_deleting_rows || !this.options.editable) return
+    const { index } = event.target.dataset
+    this.fieldValue.splice(index, 1)
+    this.updateTextareaInput()
+    this.updateKeyValueComponent()
+  }
+
+  valueFieldUpdated(event) {
+    const { value } = event.target
+    const { index } = event.target.dataset
+    this.fieldValue[index][1] = value
+
+    this.updateTextareaInput()
+  }
+
+  keyFieldUpdated(event) {
+    const { value } = event.target
+    const { index } = event.target.dataset
+    this.fieldValue[index][0] = value
+
+    this.updateTextareaInput()
+  }
+
+  updateTextareaInput() {
+    if (!this.hasInputTarget) return
+    let result = {}
+    if (this.fieldValue && this.fieldValue.length > 0) {
+      result = Object.assign(...this.fieldValue.map(([key, val]) => ({ [key]: val })))
+    }
+    this.inputTarget.value = JSON.stringify(result)
+  }
+
+  updateKeyValueComponent() {
+    let result = ''
+    let index = 0
+    this.fieldValue.forEach((row) => {
+      const [key, value] = row
+      result += this.interpolatedRow(key, value, index)
+      index++
+    })
+    this.rowsTarget.innerHTML = result
+    window.initTippy()
+  }
+
+  interpolatedRow(key, value, index) {
+    let result = `<div class="flex"><input type="text"
+  class="${this.options.inputClasses} border-gray-600 border-r border-l-0 border-b-0 border-t-0 focus:border-gray-700 w-1/2 rounded-none focus:outline-none outline-none focus:border-none"
+  data-action="input->key-value#keyFieldUpdated"
+  placeholder="${this.options.key_label}"
+  data-index="${index}"
+  ${this.keyInputDisabled ? "disabled='disabled'" : ''}
+  value="${key}"
+  autofocus
+/>
+<input type="text"
+  class="${this.options.inputClasses} border-gray-600 border-r border-l-0 border-b-0 border-t-0 focus:border-gray-700 w-1/2 rounded-none focus:outline-none outline-none focus:border-none"
+  data-action="input->key-value#valueFieldUpdated"
+  placeholder="${this.options.value_label}"
+  data-index="${index}"
+  ${this.valueInputDisabled ? "disabled='disabled'" : ''}
+  value="${value}"
+  />`
+    if (this.options.editable) {
+      result += `<a
+  href="javascript:void(0);"
+  data-index="${index}"
+  data-action="click->key-value#deleteRow"
+  title="${this.options.delete_text}"
+  data-tippy="tooltip"
+  data-button="delete-row"
+  ${this.options.disable_deleting_rows ? "disabled='disabled'" : ''}
+  class="flex items-center justify-center p-2 px-3 border-l ${this.options.disable_deleting_rows ? 'cursor-not-allowed' : ''}"
+><svg class="pointer-events-none text-gray-500 h-5 hover:text-gray-500" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor"><path d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg></a>`
+    }
+    result += '</div>'
+
+    return result
+  }
+
+  setOptions() {
+    let fieldOptions
+
+    try {
+      fieldOptions = JSON.parse(this.controllerTarget.dataset.options)
+    } catch (error) {
+      fieldOptions = {}
+    }
+    this.options = {
+      ...fieldOptions,
+      inputClasses: this.controllerTarget.dataset.inputClasses,
+      editable: castBoolean(this.controllerTarget.dataset.editable),
+    }
+  }
+}

data/lib/avo/fields/key_value_field.rb

@@ -3,6 +3,11 @@ require "json"
 module Avo
   module Fields
     class KeyValueField < BaseField
+      attr_reader :key_label
+      attr_reader :value_label
+      attr_reader :action_text
+      attr_reader :disable_adding_rows
+
       def initialize(name, **args, &block)
         @defaults = {
           partial_name: "key-value-field"
@@ -33,7 +38,13 @@ module Avo
         [:"#{id}", "#{id}": {}]
       end
 
-      def hydrate_field(fields, model, resource, view)
+      def parsed_value
+        value.to_json
+      rescue
+        {}
+      end
+
+      def options
         {
           key_label: @key_label,
           value_label: @value_label,
@@ -44,6 +55,18 @@ module Avo
           disable_deleting_rows: @disable_deleting_rows
         }
       end
+
+      def fill_field(model, key, value)
+        begin
+          new_value = JSON.parse(value)
+        rescue
+          new_value = {}
+        end
+
+        model[key] = new_value
+
+        model
+      end
     end
   end
 end

data/lib/avo/version.rb

@@ -1,3 +1,3 @@
 module Avo
-  VERSION = "1.2.2"
+  VERSION = "1.3.0.pre.1"
 end

data/public/avo-packs/css/{application-13cc02fb.css → application-5af67922.css}

@@ -1388,7 +1388,7 @@ span.flatpickr-weekday {
   }
 }
 
-/*! tailwindcss v2.0.4 | MIT License | https://tailwindcss.com *//*! modern-normalize v1.0.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
+/*! tailwindcss v2.1.1 | MIT License | https://tailwindcss.com *//*! modern-normalize v1.0.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
 
 /*
 Document
@@ -1915,7 +1915,7 @@ object {
 
 /**
  * Constrain images and videos to the parent width and preserve
- * their instrinsic aspect ratio.
+ * their intrinsic aspect ratio.
  *
  * https://github.com/mozdevs/cssremedy/issues/14
  */
@@ -2329,6 +2329,10 @@ select {
 	z-index: 10;
 }
 
+.focus\:border-none:focus {
+	border-style: none;
+}
+
 .focus\:border-blue-300:focus {
 	--tw-border-opacity: 1;
 	border-color: rgba(147, 197, 253, var(--tw-border-opacity));
@@ -2339,6 +2343,11 @@ select {
 	border-color: rgba(148, 163, 184, var(--tw-border-opacity));
 }
 
+.focus\:border-gray-700:focus {
+	--tw-border-opacity: 1;
+	border-color: rgba(55, 65, 81, var(--tw-border-opacity));
+}
+
 .focus\:bg-white:focus {
 	--tw-bg-opacity: 1;
 	background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
@@ -4307,6 +4316,9 @@ span.CodeMirror-selectedtext { background: none; }
 .focus\:z-10:focus {
     z-index: 10;
 }
+.focus\:border-none:focus {
+    border-style: none;
+}
 .focus\:border-blue-300:focus {
     --tw-border-opacity: 1;
     border-color: rgba(147, 197, 253, var(--tw-border-opacity));
@@ -4315,6 +4327,10 @@ span.CodeMirror-selectedtext { background: none; }
     --tw-border-opacity: 1;
     border-color: rgba(148, 163, 184, var(--tw-border-opacity));
 }
+.focus\:border-gray-700:focus {
+    --tw-border-opacity: 1;
+    border-color: rgba(55, 65, 81, var(--tw-border-opacity));
+}
 .focus\:bg-white:focus {
     --tw-bg-opacity: 1;
     background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
@@ -4522,6 +4538,9 @@ span.CodeMirror-selectedtext { background: none; }
     }
 }
 
+.pointer-events-none {
+    pointer-events: none
+}
 .visible {
     visibility: visible
 }
@@ -4689,24 +4708,24 @@ span.CodeMirror-selectedtext { background: none; }
 .block {
     display: block
 }
-.inline-flex {
-    display: inline-flex
-}
-.flex {
-    display: flex
+.inline-block {
+    display: inline-block
 }
 .inline {
     display: inline
 }
-.grid {
-    display: grid
+.flex {
+    display: flex
 }
-.inline-block {
-    display: inline-block
+.inline-flex {
+    display: inline-flex
 }
 .table {
     display: table
 }
+.grid {
+    display: grid
+}
 .hidden {
     display: none
 }
@@ -4794,6 +4813,9 @@ span.CodeMirror-selectedtext { background: none; }
 .w-64 {
     width: 16rem
 }
+.w-1\/2 {
+    width: 50%
+}
 .w-11\/12 {
     width: 91.666667%
 }
@@ -4858,6 +4880,9 @@ span.CodeMirror-selectedtext { background: none; }
 .cursor-wait {
     cursor: wait
 }
+.cursor-not-allowed {
+    cursor: not-allowed
+}
 .appearance-none {
     -webkit-appearance: none;
             appearance: none
@@ -4987,6 +5012,9 @@ span.CodeMirror-selectedtext { background: none; }
 .rounded {
     border-radius: 0.25rem
 }
+.rounded-none {
+    border-radius: 0px
+}
 .rounded-full {
     border-radius: 9999px
 }
@@ -5014,6 +5042,18 @@ span.CodeMirror-selectedtext { background: none; }
 .border-r {
     border-right-width: 1px
 }
+.border-l-0 {
+    border-left-width: 0px
+}
+.border-b-0 {
+    border-bottom-width: 0px
+}
+.border-t-0 {
+    border-top-width: 0px
+}
+.border-l {
+    border-left-width: 1px
+}
 .border-pink-600 {
     --tw-border-opacity: 1;
     border-color: rgba(219, 39, 119, var(--tw-border-opacity))
@@ -5221,14 +5261,14 @@ span.CodeMirror-selectedtext { background: none; }
     padding-top: 1px;
     padding-bottom: 1px
 }
-.py-0 {
-    padding-top: 0px;
-    padding-bottom: 0px
-}
 .py-3 {
     padding-top: 0.75rem;
     padding-bottom: 0.75rem
 }
+.py-0 {
+    padding-top: 0px;
+    padding-bottom: 0px
+}
 .py-8 {
     padding-top: 2rem;
     padding-bottom: 2rem
@@ -5412,12 +5452,37 @@ span.CodeMirror-selectedtext { background: none; }
     --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
 }
+.shadow-lg {
+    --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
+}
+.shadow {
+    --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
+}
 .outline-none {
     outline: 2px solid transparent;
     outline-offset: 2px
 }
+.filter {
+    --tw-blur: var(--tw-empty,/*!*/ /*!*/);
+    --tw-brightness: var(--tw-empty,/*!*/ /*!*/);
+    --tw-contrast: var(--tw-empty,/*!*/ /*!*/);
+    --tw-grayscale: var(--tw-empty,/*!*/ /*!*/);
+    --tw-hue-rotate: var(--tw-empty,/*!*/ /*!*/);
+    --tw-invert: var(--tw-empty,/*!*/ /*!*/);
+    --tw-saturate: var(--tw-empty,/*!*/ /*!*/);
+    --tw-sepia: var(--tw-empty,/*!*/ /*!*/);
+    --tw-drop-shadow: var(--tw-empty,/*!*/ /*!*/);
+    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
+}
+.invert {
+    --tw-invert: invert(100%)
+}
 .transition {
-    transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
+    transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
+    transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+    transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     transition-duration: 150ms
 }
@@ -5612,6 +5677,9 @@ span.CodeMirror-selectedtext { background: none; }
 .focus\:z-10:focus {
     z-index: 10
 }
+.focus\:border-none:focus {
+    border-style: none
+}
 .focus\:border-blue-300:focus {
     --tw-border-opacity: 1;
     border-color: rgba(147, 197, 253, var(--tw-border-opacity))
@@ -5620,6 +5688,10 @@ span.CodeMirror-selectedtext { background: none; }
     --tw-border-opacity: 1;
     border-color: rgba(148, 163, 184, var(--tw-border-opacity))
 }
+.focus\:border-gray-700:focus {
+    --tw-border-opacity: 1;
+    border-color: rgba(55, 65, 81, var(--tw-border-opacity))
+}
 .focus\:bg-white:focus {
     --tw-bg-opacity: 1;
     background-color: rgba(255, 255, 255, var(--tw-bg-opacity))
@@ -5853,7 +5925,9 @@ html, body{
   --tw-scale-x: 1;
   --tw-scale-y: 1;
   transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
+  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
+  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
   transition-duration: 150ms;
@@ -5903,4 +5977,4 @@ html, body{
 }
 
 
-/*# sourceMappingURL=application-13cc02fb.css.map*/
+/*# sourceMappingURL=application-5af67922.css.map*/