headmin 0.3.4 → 0.4.0

data/app/assets/stylesheets/headmin.css

@@ -1,7 +1,7 @@
 @charset "UTF-8";
 @import "https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css";
 
-/* sass-plugin-0:/usr/local/var/www/headmin/src/scss/headmin.scss */
+/* sass-plugin-0:/opt/homebrew/var/www/headmin/src/scss/headmin.scss */
 :root {
   --bs-blue: #0d6efd;
   --bs-indigo: #6610f2;
@@ -260,7 +260,7 @@ small,
 mark,
 .mark {
   padding: 0.2em;
-  background-color: #fcf8e3;
+  background-color: #ffec89;
 }
 sub,
 sup {
@@ -12913,23 +12913,134 @@ span.flatpickr-weekday {
   top: 3px;
 }
 .rx-container {
+  padding: 0 !important;
+  border: 1px solid #ced4da;
+  border-radius: 0.25rem;
+}
+.rx-container.rx-in-focus {
+  color: #212529;
+  background-color: #fff;
+  border-color: #86b7fe;
+  outline: 0;
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075), 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
+}
+.rx-container.rx-in-focus.is-valid {
+  border-color: #198754;
+  box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25);
+}
+.rx-container.rx-in-focus.is-invalid {
+  border-color: #dc3545;
+  box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
+}
+.rx-container.is-valid,
+.rx-container.is-invalid {
+  background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
+}
+.rx-toolbar-container.is-rx-toolbar {
+  background: transparent;
+  border-bottom: 1px solid #ced4da;
+}
+.rx-content {
+  padding: 0.375rem 0.75rem !important;
+  position: relative;
+}
+.rx-content p {
+  font-size: 0.9rem;
+  line-height: 1.5;
+  color: #212529;
+}
+.rx-placeholder:before {
+  font-size: 0.9rem;
+  color: #6c757d;
+  opacity: 1;
+}
+.rx-control {
+  margin-left: -0.75rem;
+}
+.rx-toolbar .rx-button-icon {
+  background: #fff;
+}
+.rx-toolbar .rx-button-icon span {
+  color: #6c757d;
+}
+.rx-toolbar .rx-button-icon:hover span {
+  color: #212529;
+}
+.form-label[required=required]:after,
+.form-check-label[required=required]:after {
+  content: " *";
+  color: #dc3545;
+}
+.h-autocomplete {
+  position: absolute;
+  top: calc(100% + 2px);
+  left: 0;
+  z-index: 1000;
   width: 100%;
+  font-family: var(--bs-font-sans-serif);
+  font-style: normal;
+  font-weight: 400;
+  line-height: 1.5;
+  text-align: left;
+  text-align: start;
+  text-decoration: none;
+  text-shadow: none;
+  text-transform: none;
+  letter-spacing: normal;
+  word-break: normal;
+  word-spacing: normal;
+  white-space: normal;
+  line-break: auto;
+  font-size: 1rem;
+  word-wrap: break-word;
+  background-color: #fff;
+  background-clip: padding-box;
+  border-radius: 0.25rem !important;
+  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  overflow: hidden;
 }
-input[type=search] {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='%236c757d' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E%0A");
-  background-repeat: no-repeat;
-  background-position: 10px center;
-  padding-left: 35px;
+.h-autocomplete .list-group-flush {
+  margin: 0;
+  padding: 0;
 }
-.form-control[readonly] {
-  background-color: transparent;
+.h-form-file .h-form-file-thumbnails {
+  margin-bottom: 0.5rem;
 }
-.form-label[required=required]:after {
-  content: "*";
-  margin-left: 1px;
+.h-form-file.h-dropzone {
+  padding: 0.5rem;
 }
-.forms-group .card-footer {
-  border-top: none;
+.h-form-file.h-dropzone .h-form-file-thumbnails {
+  margin-bottom: 0;
+}
+.h-form-file-thumbnails {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+.h-form-file-thumbnail {
+  position: relative;
+  pointer-events: initial !important;
+  display: flex;
+}
+.h-form-file-thumbnail-remove {
+  position: absolute;
+  top: 0;
+  right: 0;
+  background: #dc3545;
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  border-radius: 0.25rem;
+  z-index: 3;
+  cursor: pointer;
+}
+.h-form-file-thumbnail-remove:hover {
+  background: #e15361;
 }
 .repeater {
   position: relative;
@@ -12981,50 +13092,23 @@ input[type=search] {
   visibility: hidden;
   cursor: move;
 }
-.h-form-file {
-  position: relative;
-}
-.h-form-file .h-form-file-thumbnails {
-  margin-bottom: 0.5rem;
-}
-.h-form-file.h-dropzone {
-  padding: 0.5rem;
-}
-.h-form-file.h-dropzone .h-form-file-thumbnails {
-  margin-bottom: 0;
-}
-.h-form-file-thumbnails {
-  position: relative;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.5rem;
-}
-.h-form-file-thumbnail {
-  position: relative;
-  pointer-events: initial !important;
-  display: flex;
-}
-.h-form-file-thumbnail-remove {
-  position: absolute;
-  top: 0;
-  right: 0;
-  background: #dc3545;
-  width: 20px;
-  height: 20px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: white;
-  border-radius: 0.25rem;
-  z-index: 3;
-  cursor: pointer;
+input[type=search] {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='%236c757d' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E%0A");
+  background-repeat: no-repeat;
+  background-position: 10px center;
+  padding-left: 35px !important;
 }
-.h-form-file-thumbnail-remove:hover {
-  background: #e15361;
+.form-floating input[type=search] ~ label {
+  padding-left: 35px;
 }
 html {
   height: 100%;
 }
+mark,
+.mark {
+  padding: 0;
+  box-shadow: 0 0.2em 0 #ffec89, 0 -0.2em 0 #ffec89;
+}
 .body {
   background: rgba(0, 0, 0, 0.03);
   height: 100vh;
@@ -13129,10 +13213,12 @@ body.empty {
   border: 1px solid #ced4da;
 }
 .h-dropzone {
+  position: relative;
   border: 2px dashed #ced4da;
   border-radius: 0.25rem;
 }
-.h-dropzone > *:not(input[type=file]) {
+.h-dropzone > *:not(.form-control) {
+  margin: 0.5rem;
   pointer-events: none;
   z-index: 2;
 }
@@ -13143,19 +13229,40 @@ body.empty {
 .h-dropzone.dragover input[type=file] {
   z-index: 3;
 }
-.h-dropzone.active {
+.h-dropzone.focus,
+.h-dropzone.dragover {
   border-color: #86b7fe;
   outline: 0;
   box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075), 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
 }
-.h-dropzone input[type=file] {
+.h-dropzone.focus.is-valid,
+.h-dropzone.dragover.is-valid {
+  border-color: #198754;
+  box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25);
+}
+.h-dropzone.focus.is-invalid,
+.h-dropzone.dragover.is-invalid {
+  border-color: #dc3545;
+  box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
+}
+.h-dropzone .form-control {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
-  opacity: 0;
   z-index: 1;
+  border: none;
+  box-shadow: none;
+  text-indent: -100vw;
+  color: transparent;
+  background: none;
+}
+.h-dropzone.is-invalid {
+  border-color: #dc3545;
+}
+.h-dropzone.is-valid {
+  border-color: #198754;
 }
 .h-dropzone-placeholder {
   color: #6c757d;
@@ -13232,6 +13339,7 @@ body.empty {
   background-clip: padding-box;
   border-radius: 0.3rem;
   box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+  border: 1px solid rgba(0, 0, 0, 0.2);
 }
 .h-popup.closed {
   display: none;
@@ -13254,201 +13362,93 @@ body.empty {
   left: calc(50% - 14px);
   font-size: 28px;
 }
+.h-syntax {
+  background-color: #ffffcc;
+}
+.h-syntax .hll {
+  background-color: #ffffcc;
+}
+.h-syntax {
+  background: #f8f8f8;
+}
 .h-syntax .c {
-  color: #727272;
+  color: #6a737d;
+}
+.h-syntax .k {
+  color: #d73a49;
 }
 .h-syntax .ch {
-  font-style: italic;
-  color: #60a0b0;
+  color: #6a737d;
 }
 .h-syntax .cm {
-  color: #727272;
+  color: #6a737d;
 }
 .h-syntax .cp {
-  color: #008085;
+  color: #d73a49;
 }
 .h-syntax .cpf {
-  color: #007020;
+  color: #032f62;
 }
 .h-syntax .c1 {
-  color: #727272;
+  color: #6a737d;
 }
 .h-syntax .cs {
-  color: #727272;
+  color: #6a737d;
 }
 .h-syntax .gd {
-  background-color: #fcc;
-  border: 1px solid #c00;
-}
-.h-syntax .ge {
-  font-style: italic;
-}
-.h-syntax .gr {
-  color: #f00;
+  color: #b31d28;
+  background-color: #ffeef0;
 }
 .h-syntax .gh {
-  color: #030;
+  color: #005cc5;
 }
 .h-syntax .gi {
-  background-color: #cfc;
-  border: 1px solid #0c0;
-}
-.h-syntax .go {
-  color: #aaa;
-}
-.h-syntax .gp {
-  color: #009;
+  color: #22863a;
+  background-color: #f0fff4;
 }
 .h-syntax .gs {
-  font-weight: 700;
+  font-weight: bold;
 }
 .h-syntax .gu {
-  color: #030;
+  color: #6f42c1;
+  font-weight: bold;
 }
 .h-syntax .gt {
-  color: #9c6;
-}
-.h-syntax .gl {
-  text-decoration: underline;
-}
-.h-syntax .k {
-  color: #069;
+  color: #0044DD;
 }
 .h-syntax .kc {
-  color: #069;
+  color: #005cc5;
 }
 .h-syntax .kd {
-  color: #069;
+  color: #d73a49;
 }
 .h-syntax .kn {
-  color: #069;
+  color: #d73a49;
 }
 .h-syntax .kp {
-  color: #069;
+  color: #d73a49;
 }
 .h-syntax .kr {
-  color: #069;
+  color: #d73a49;
 }
 .h-syntax .kt {
-  color: #078;
+  color: #d73a49;
 }
 .h-syntax .m {
-  color: #c24f19;
-}
-.h-syntax .mb {
-  color: #40a070;
-}
-.h-syntax .mf {
-  color: #c24f19;
-}
-.h-syntax .mh {
-  color: #c24f19;
-}
-.h-syntax .mi {
-  color: #c24f19;
-}
-.h-syntax .il {
-  color: #c24f19;
-}
-.h-syntax .mo {
-  color: #c24f19;
+  color: #666666;
 }
 .h-syntax .s {
-  color: #d73038;
-}
-.h-syntax .sa {
-  color: #4070a0;
-}
-.h-syntax .sb {
-  color: #c30;
-}
-.h-syntax .sc {
-  color: #c30;
-}
-.h-syntax .dl {
-  color: #4070a0;
-}
-.h-syntax .sd {
-  font-style: italic;
-  color: #c30;
-}
-.h-syntax .s2 {
-  color: #c30;
-}
-.h-syntax .se {
-  color: #c30;
-}
-.h-syntax .sh {
-  color: #c30;
-}
-.h-syntax .si {
-  color: #a00;
-}
-.h-syntax .sx {
-  color: #c30;
-}
-.h-syntax .sr {
-  color: #337e7e;
-}
-.h-syntax .s1 {
-  color: #c30;
-}
-.h-syntax .ss {
-  color: #fc3;
-}
-.h-syntax .na {
-  color: #006ee0;
+  color: #032f62;
 }
 .h-syntax .nb {
-  color: #366;
+  color: #005cc5;
 }
 .h-syntax .nc {
-  color: #168174;
+  color: #6f42c1;
 }
 .h-syntax .no {
-  color: #360;
+  color: #005cc5;
 }
 .h-syntax .nd {
-  color: #6b62de;
-}
-.h-syntax .ni {
-  color: #727272;
-}
-.h-syntax .ne {
-  color: #c00;
-}
-.h-syntax .nf {
-  color: #b715f4;
-}
-.h-syntax .nl {
-  color: #6b62de;
-}
-.h-syntax .nn {
-  color: #007ca5;
-}
-.h-syntax .nt {
-  color: #2f6f9f;
-}
-.h-syntax .nv {
-  color: #033;
-}
-.h-syntax .o {
-  color: #555;
-}
-.h-syntax .ow {
-  color: #000;
-}
-.h-syntax .w {
-  color: #bbb;
-}
-.h-syntax .language-bash::before,
-.h-syntax .language-sh::before {
-  color: #009;
-  content: "$ ";
-  user-select: none;
-}
-.h-syntax .language-powershell::before {
-  color: #009;
-  content: "PM> ";
-  user-select: none;
+  color: #6f42c1;
 }

data/app/assets/stylesheets/headmin.scss

@@ -53,7 +53,7 @@
 
 // Headmin
 @import "headmin/filters";
-@import "headmin/form";
+@import "headmin/forms";
 @import "headmin/general";
 @import "headmin/layout";
 @import "headmin/login";

data/app/helpers/headmin/admin_helper.rb

@@ -5,6 +5,5 @@ module Headmin
     include Headmin::FormHelper
     include Headmin::NotificationHelper
     include Headmin::RequestHelper
-    include Headmin::DocumentationHelper
   end
 end

data/app/helpers/headmin/form_helper.rb

@@ -1,22 +1,16 @@
 module Headmin
   module FormHelper
-    def form_field_valid?(form, name)
-      !form.object.errors.has_key?(name)
-    end
-
+    # TODO: cleanup after input field refactoring
     def form_field_validation_id(form, name)
       [form.object_name, name.to_s, "validation"].join("_").parameterize.underscore
     end
 
+    # TODO: cleanup after input field refactoring
     def form_field_validation_class(form, name)
       return nil if request.get?
       form.object.errors.has_key?(name) ? "is-invalid" : "is-valid"
     end
 
-    def human_attribute_name(attribute)
-      attribute.to_s.humanize
-    end
-
     # Outputs currently present query parameters as hidden fields for a given form
     #
     # https://example.com/products?amount=1&type[]=food&type[]=beverage

data/app/models/concerns/headmin/blockable.rb

@@ -3,7 +3,7 @@ module Headmin
     extend ActiveSupport::Concern
 
     included do
-      has_many :blocks, as: :blockable
+      has_many :blocks, as: :blockable, dependent: :destroy
       accepts_nested_attributes_for :blocks, allow_destroy: true
     end
   end

data/app/models/concerns/headmin/field.rb

@@ -12,6 +12,7 @@ module Headmin
       has_many :fields, foreign_key: "parent_id"
       accepts_nested_attributes_for :fields, allow_destroy: true
       has_one_attached :file
+      accepts_nested_attributes_for :file_attachment
     end
   end
 end

data/app/models/concerns/headmin/form/autocompletable.rb

@@ -0,0 +1,38 @@
+module Headmin
+  module Form
+    module Autocompletable
+      extend ActiveSupport::Concern
+
+      included do
+        def autocomplete?
+          collection.is_a?(String) || collection.is_a?(Array)
+        end
+
+        def autocomplete_options
+          {
+            collection: collection.is_a?(Array) ? collection : []
+          }
+        end
+
+        def autocomplete_input_options
+          {
+            data: {
+              autocomplete_target: autocomplete? ? "input" : nil
+            }
+          }
+        end
+
+        def autocomplete_input_group_options
+          options = {
+            data: {
+              controller: autocomplete? ? "autocomplete" : nil,
+              autocomplete_url_value: collection.is_a?(String) ? collection : nil
+            }
+          }
+          options = options.merge(bypass: false) if autocomplete?
+          options
+        end
+      end
+    end
+  end
+end

data/app/models/concerns/headmin/form/hintable.rb

@@ -0,0 +1,19 @@
+module Headmin
+  module Form
+    module Hintable
+      extend ActiveSupport::Concern
+
+      included do
+        def hint?
+          hint.present?
+        end
+
+        def hint_options
+          {
+            content: hint
+          }
+        end
+      end
+    end
+  end
+end

data/app/models/concerns/headmin/form/input_groupable.rb

@@ -0,0 +1,23 @@
+module Headmin
+  module Form
+    module InputGroupable
+      extend ActiveSupport::Concern
+
+      included do
+        def input_group_options
+          default_input_group_options.merge(@input_group || {})
+        end
+
+        private
+
+        def default_input_group_options
+          {
+            bypass: !(prepend || append || @input_group),
+            prepend: prepend,
+            append: append
+          }
+        end
+      end
+    end
+  end
+end

data/app/models/concerns/headmin/form/labelable.rb

@@ -0,0 +1,33 @@
+module Headmin
+  module Form
+    module Labelable
+      extend ActiveSupport::Concern
+      included do
+        def label?
+          label != false
+        end
+
+        def prepend_label?
+          label != false && !float
+        end
+
+        def append_label?
+          label != false && float
+        end
+
+        def label_input_group_options
+          float ? {bypass: true} : {}
+        end
+
+        def label_options
+          {
+            attribute: attribute,
+            form: form,
+            required: required,
+            text: label
+          }
+        end
+      end
+    end
+  end
+end