formstrap 0.1.3 → 0.2.0

data/app/assets/stylesheets/formstrap/{forms/autocomplete.scss → autocomplete.scss}

@@ -1,4 +1,4 @@
-.h-autocomplete {
+.formstrap-autocomplete {
   --fs-dropdown-z-index: 1000;
   --fs-dropdown-font-size: 1rem;
   --fs-dropdown-border-radius: 0.375rem;

data/app/assets/stylesheets/formstrap/{forms/file.scss → file.scss}

@@ -1,20 +1,20 @@
-.h-form-file {
+.formstrap-file {
   --fs-file-spacer-2: calc(1rem * .5);
 
-  .h-form-file-thumbnails {
+  .formstrap-file-thumbnails {
     margin-bottom: var(--fs-file-spacer-2);
   }
 
-  &.h-dropzone {
+  &.formstrap-dropzone {
     padding: var(--fs-file-spacer-2);
 
-    .h-form-file-thumbnails {
+    .formstrap-file-thumbnails {
       margin-bottom: 0;
     }
   }
 }
 
-.h-form-file-thumbnails {
+.formstrap-file-thumbnails {
   --fs-file-spacer-2: calc(1rem * .5);
   position: relative;
   display: flex;
@@ -27,23 +27,23 @@
   }
 }
 
-.h-form-file-thumbnail {
+.formstrap-file-thumbnail {
   position: relative;
   pointer-events: initial !important;
   display: flex;
 
   &:hover {
-    .h-form-file-thumbnail-actions {
+    .formstrap-file-thumbnail-actions {
       display: block;
     }
   }
 }
 
-.h-form-file-thumbnail-actions {
+.formstrap-file-thumbnail-actions {
   display: none;
 }
 
-.h-form-file-thumbnail-remove {
+.formstrap-file-thumbnail-remove {
   position: absolute;
   top: 5px;
   right: 5px;
@@ -63,7 +63,7 @@
   }
 }
 
-.h-form-file-thumbnail-edit {
+.formstrap-file-thumbnail-edit {
   position: absolute;
   top: 5px;
   right: 35px;

data/app/assets/stylesheets/formstrap/general.scss

@@ -15,4 +15,11 @@ mark {
   --fs-mark-padding: .1875em;
   padding: 0;
   box-shadow: 0 var(--fs-mark-padding) 0 var(--bs-yellow), 0 calc(-1 * #{var(--fs-mark-padding)}) 0 var(--bs-yellow);
-}
+}
+
+.form-label[required="required"], .form-check-label[required="required"] {
+  &:after {
+    content: ' *';
+    color: var(--bs-danger-rgb);
+  }
+}

data/app/assets/stylesheets/formstrap/media/_modal.scss

@@ -0,0 +1,9 @@
+.formstrap-media-modal {
+  .formstrap-thumbnail {
+    cursor: pointer;
+  }
+
+  input[type="checkbox"]:checked + label .formstrap-thumbnail {
+    background-color: #0d6efd;
+  }
+}

data/app/assets/stylesheets/formstrap/{forms/media.scss → media/_validation.scss}

@@ -1,4 +1,4 @@
-.h-form-media-validation {
+.formstrap-media-validation {
   opacity: 0;
   width: 100px;
   height: 0;
@@ -7,4 +7,4 @@
   position: absolute;
   bottom: 0;
   left: 0;
-}
+}

data/app/assets/stylesheets/formstrap/media.scss

@@ -1 +1,2 @@
-@import "media/index";
+@import "media/modal";
+@import "media/validation";

data/app/assets/stylesheets/formstrap/{forms/repeater.scss → repeater.scss}

@@ -1,26 +1,26 @@
-.repeater {
+.formstrap-repeater {
   position: relative;
 }
 
-.repeater-row {
+.formstrap-repeater-row {
   position: relative;
 
   &:hover {
-    .repeater-row-remove {
+    .formstrap-repeater-row-remove {
       visibility: visible;
     }
 
-    .repeater-row-add {
+    .formstrap-repeater-row-add {
       visibility: visible;
     }
 
-    .repeater-row-handle {
+    .formstrap-repeater-row-handle {
       visibility: visible;
     }
   }
 }
 
-.repeater-row-remove {
+.formstrap-repeater-row-remove {
   position: absolute;
   top: calc(50% - 17px);
   right: -22px;
@@ -33,7 +33,7 @@
   }
 }
 
-.repeater-row-add {
+.formstrap-repeater-row-add {
   position: absolute;
   top: calc(100% - 18px);
   right: calc(50% - 17px);
@@ -46,7 +46,7 @@
   }
 }
 
-.repeater-row-handle {
+.formstrap-repeater-row-handle {
   position: absolute;
   top: 0;
   left: 0;

data/app/assets/stylesheets/formstrap/shared/popup.scss

@@ -0,0 +1,17 @@
+.formstrap-popup {
+  padding: 10px;
+  background: var(--bs-white);
+  z-index: 1070;
+  //@include reset-text();
+  font-size: var(--bs-popover-font-size);
+  word-wrap: break-word;
+  background-color: var(--bs-body-bg);
+  background-clip: padding-box;
+  border-radius: var(--bs-popover-border-radius);
+  box-shadow: 0 .5rem 1rem rgba(var(--bs-body-color-rgb), .15);
+  border: var(--bs-border-width) solid var(--bs-border-color-translucent);
+
+  &.closed {
+    display: none;
+  }
+}

data/app/assets/stylesheets/formstrap/shared/thumbnail.scss

@@ -0,0 +1,23 @@
+.formstrap-thumbnail {
+  display: inline-block;
+  position: relative;
+}
+
+.formstrap-thumbnail-bg {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--bs-gray-100);
+  background-size: cover;
+  background-position: center center;
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.formstrap-thumbnail-icon {
+  position: absolute;
+  top: calc(50% - 20px);
+  left: calc(50% - 14px);
+  font-size: 28px;
+}

data/app/assets/stylesheets/formstrap/shared.scss

@@ -0,0 +1,2 @@
+@import "shared/thumbnail";
+@import "shared/popup";

data/app/assets/stylesheets/formstrap/utilities/dropzone.scss

@@ -1,4 +1,4 @@
-.h-dropzone {
+.formstrap-dropzone {
   --fs-input-btn-focus-blur: 0;
   --fs-input-btn-focus-width: .25rem;
   --fs-input-btn-focus-color-opacity: .25;
@@ -63,7 +63,7 @@
   }
 }
 
-.h-dropzone-placeholder {
+.formstrap-dropzone-placeholder {
   color: var(--bs-gray-600);
   display: flex;
   align-items: center;

data/app/assets/stylesheets/formstrap/utilities.scss

@@ -1,2 +1 @@
-@import "utilities/buttons";
 @import "utilities/dropzone";

data/app/assets/stylesheets/formstrap.css

@@ -1283,12 +1283,140 @@ span.flatpickr-weekday {
     transform: translate3d(0, 0, 0);
   }
 }
+html {
+  height: 100%;
+}
+.list-group-item {
+  --fs-list-group-active-color: #fff;
+}
+.list-group-item.active .text-muted {
+  color: var(--fs-list-group-active-color) !important;
+}
+mark {
+  --fs-mark-padding: .1875em;
+  padding: 0;
+  box-shadow: 0 var(--fs-mark-padding) 0 var(--bs-yellow), 0 calc(-1 * var(--fs-mark-padding)) 0 var(--bs-yellow);
+}
 .form-label[required=required]:after,
 .form-check-label[required=required]:after {
   content: " *";
   color: var(--bs-danger-rgb);
 }
-.h-autocomplete {
+.formstrap-dropzone {
+  --fs-input-btn-focus-blur: 0;
+  --fs-input-btn-focus-width: .25rem;
+  --fs-input-btn-focus-color-opacity: .25;
+  position: relative;
+  border: 2px dashed var(--bs-gray-400);
+  border-radius: var(--bs-border-radius);
+}
+.formstrap-dropzone > *:not(.form-control) {
+  margin: 0.5rem;
+  pointer-events: none;
+  z-index: 2;
+}
+.formstrap-dropzone.dragover,
+.formstrap-dropzone:hover {
+  border-color: var(--bs-gray-400);
+}
+.formstrap-dropzone.dragover input[type=file] {
+  z-index: 3;
+}
+.formstrap-dropzone.focus,
+.formstrap-dropzone.dragover {
+  border-color: var(--bs-primary-border-subtle);
+  outline: 0;
+  box-shadow: var(--bs-box-shadow);
+}
+.formstrap-dropzone.focus.is-valid,
+.formstrap-dropzone.dragover.is-valid {
+  border-color: var(--bs-success);
+  box-shadow: 0 0 var(--fs-input-btn-focus-blur) var(--fs-input-btn-focus-width) rgba(var(--bs-success), var(--fs-input-btn-focus-color-opacity));
+}
+.formstrap-dropzone.focus.is-invalid,
+.formstrap-dropzone.dragover.is-invalid {
+  border-color: var(--bs-danger);
+  box-shadow: 0 0 var(--fs-input-btn-focus-blur) var(--fs-input-btn-focus-width) rgba(var(--bs-danger), var(--fs-input-btn-focus-color-opacity));
+}
+.formstrap-dropzone .form-control {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  border: none;
+  box-shadow: none;
+  text-indent: -100vw;
+  color: transparent;
+  background: none;
+}
+.formstrap-dropzone.is-invalid {
+  border-color: var(--bs-danger);
+}
+.formstrap-dropzone.is-valid {
+  border-color: var(--bs-success);
+}
+.formstrap-dropzone-placeholder {
+  color: var(--bs-gray-600);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+}
+.formstrap-thumbnail {
+  display: inline-block;
+  position: relative;
+}
+.formstrap-thumbnail-bg {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--bs-gray-100);
+  background-size: cover;
+  background-position: center center;
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+.formstrap-thumbnail-icon {
+  position: absolute;
+  top: calc(50% - 20px);
+  left: calc(50% - 14px);
+  font-size: 28px;
+}
+.formstrap-popup {
+  padding: 10px;
+  background: var(--bs-white);
+  z-index: 1070;
+  font-size: var(--bs-popover-font-size);
+  word-wrap: break-word;
+  background-color: var(--bs-body-bg);
+  background-clip: padding-box;
+  border-radius: var(--bs-popover-border-radius);
+  box-shadow: 0 0.5rem 1rem rgba(var(--bs-body-color-rgb), 0.15);
+  border: var(--bs-border-width) solid var(--bs-border-color-translucent);
+}
+.formstrap-popup.closed {
+  display: none;
+}
+.formstrap-media-modal .formstrap-thumbnail {
+  cursor: pointer;
+}
+.formstrap-media-modal input[type=checkbox]:checked + label .formstrap-thumbnail {
+  background-color: #0d6efd;
+}
+.formstrap-media-validation {
+  opacity: 0;
+  width: 100px;
+  height: 0;
+  padding: 0;
+  margin: 0;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+}
+.formstrap-autocomplete {
   --fs-dropdown-z-index: 1000;
   --fs-dropdown-font-size: 1rem;
   --fs-dropdown-border-radius: 0.375rem;
@@ -1307,47 +1435,47 @@ span.flatpickr-weekday {
   border: var(--bs-border-width) solid var(--bs-border-color-translucent);
   overflow: hidden;
 }
-.h-autocomplete .list-group-flush {
+.formstrap-autocomplete .list-group-flush {
   margin: 0;
   padding: 0;
 }
-.h-form-file {
+.formstrap-file {
   --fs-file-spacer-2: calc(1rem * .5);
 }
-.h-form-file .h-form-file-thumbnails {
+.formstrap-file .formstrap-file-thumbnails {
   margin-bottom: var(--fs-file-spacer-2);
 }
-.h-form-file.h-dropzone {
+.formstrap-file.formstrap-dropzone {
   padding: var(--fs-file-spacer-2);
 }
-.h-form-file.h-dropzone .h-form-file-thumbnails {
+.formstrap-file.formstrap-dropzone .formstrap-file-thumbnails {
   margin-bottom: 0;
 }
-.h-form-file-thumbnails {
+.formstrap-file-thumbnails {
   --fs-file-spacer-2: calc(1rem * .5);
   position: relative;
   display: flex;
   flex-wrap: wrap;
   gap: var(--fs-file-spacer-2);
 }
-.h-form-file-thumbnails a,
-.h-form-file-thumbnails a:link,
-.h-form-file-thumbnails a:hover {
+.formstrap-file-thumbnails a,
+.formstrap-file-thumbnails a:link,
+.formstrap-file-thumbnails a:hover {
   color: inherit;
   text-decoration: inherit;
 }
-.h-form-file-thumbnail {
+.formstrap-file-thumbnail {
   position: relative;
   pointer-events: initial !important;
   display: flex;
 }
-.h-form-file-thumbnail:hover .h-form-file-thumbnail-actions {
+.formstrap-file-thumbnail:hover .formstrap-file-thumbnail-actions {
   display: block;
 }
-.h-form-file-thumbnail-actions {
+.formstrap-file-thumbnail-actions {
   display: none;
 }
-.h-form-file-thumbnail-remove {
+.formstrap-file-thumbnail-remove {
   position: absolute;
   top: 5px;
   right: 5px;
@@ -1362,10 +1490,10 @@ span.flatpickr-weekday {
   z-index: 3;
   cursor: pointer;
 }
-.h-form-file-thumbnail-remove:hover {
+.formstrap-file-thumbnail-remove:hover {
   opacity: 0.9;
 }
-.h-form-file-thumbnail-edit {
+.formstrap-file-thumbnail-edit {
   position: absolute;
   top: 5px;
   right: 35px;
@@ -1380,57 +1508,47 @@ span.flatpickr-weekday {
   cursor: pointer;
   color: white !important;
 }
-.h-form-file-thumbnail-edit:hover {
+.formstrap-file-thumbnail-edit:hover {
   background-color: rgb(0, 0, 0);
 }
-.h-form-media-validation {
-  opacity: 0;
-  width: 100px;
-  height: 0;
-  padding: 0;
-  margin: 0;
-  position: absolute;
-  bottom: 0;
-  left: 0;
-}
-.repeater {
+.formstrap-repeater {
   position: relative;
 }
-.repeater-row {
+.formstrap-repeater-row {
   position: relative;
 }
-.repeater-row:hover .repeater-row-remove {
+.formstrap-repeater-row:hover .formstrap-repeater-row-remove {
   visibility: visible;
 }
-.repeater-row:hover .repeater-row-add {
+.formstrap-repeater-row:hover .formstrap-repeater-row-add {
   visibility: visible;
 }
-.repeater-row:hover .repeater-row-handle {
+.formstrap-repeater-row:hover .formstrap-repeater-row-handle {
   visibility: visible;
 }
-.repeater-row-remove {
+.formstrap-repeater-row-remove {
   position: absolute;
   top: calc(50% - 17px);
   right: -22px;
   z-index: 2;
   visibility: hidden;
 }
-.repeater-row-remove i.bi {
+.formstrap-repeater-row-remove i.bi {
   background: white;
   border-radius: 50%;
 }
-.repeater-row-add {
+.formstrap-repeater-row-add {
   position: absolute;
   top: calc(100% - 18px);
   right: calc(50% - 17px);
   z-index: 2;
   visibility: hidden;
 }
-.repeater-row-add i.bi {
+.formstrap-repeater-row-add i.bi {
   background: white;
   border-radius: 50%;
 }
-.repeater-row-handle {
+.formstrap-repeater-row-handle {
   position: absolute;
   top: 0;
   left: 0;
@@ -1452,109 +1570,3 @@ input[type=search] {
 .form-floating input[type=search] ~ label {
   padding-left: 35px;
 }
-html {
-  height: 100%;
-}
-.list-group-item {
-  --fs-list-group-active-color: #fff;
-}
-.list-group-item.active .text-muted {
-  color: var(--fs-list-group-active-color) !important;
-}
-mark {
-  --fs-mark-padding: .1875em;
-  padding: 0;
-  box-shadow: 0 var(--fs-mark-padding) 0 var(--bs-yellow), 0 calc(-1 * var(--fs-mark-padding)) 0 var(--bs-yellow);
-}
-.btn-link {
-  text-decoration: none;
-}
-.h-btn-light {
-  color: var(--bs-gray-600);
-  background-color: var(--bs-gray-200);
-  box-shadow: none;
-}
-.h-btn-outline-light {
-  background-color: var(--bs-white);
-  color: var(--bs-gray-600);
-  border-color: var(--bs-gray-300);
-  box-shadow: none;
-}
-.h-btn-outline-light:hover,
-.h-btn-outline-light:focus {
-  background-color: var(--bs-white);
-  border-color: var(--bs-gray-300);
-}
-.h-btn-outline-transparent {
-  color: var(--bs-gray-600);
-  border: 1px solid var(--bs-gray-300);
-  box-shadow: none;
-}
-.h-dropzone {
-  --fs-input-btn-focus-blur: 0;
-  --fs-input-btn-focus-width: .25rem;
-  --fs-input-btn-focus-color-opacity: .25;
-  position: relative;
-  border: 2px dashed var(--bs-gray-400);
-  border-radius: var(--bs-border-radius);
-}
-.h-dropzone > *:not(.form-control) {
-  margin: 0.5rem;
-  pointer-events: none;
-  z-index: 2;
-}
-.h-dropzone.dragover,
-.h-dropzone:hover {
-  border-color: var(--bs-gray-400);
-}
-.h-dropzone.dragover input[type=file] {
-  z-index: 3;
-}
-.h-dropzone.focus,
-.h-dropzone.dragover {
-  border-color: var(--bs-primary-border-subtle);
-  outline: 0;
-  box-shadow: var(--bs-box-shadow);
-}
-.h-dropzone.focus.is-valid,
-.h-dropzone.dragover.is-valid {
-  border-color: var(--bs-success);
-  box-shadow: 0 0 var(--fs-input-btn-focus-blur) var(--fs-input-btn-focus-width) rgba(var(--bs-success), var(--fs-input-btn-focus-color-opacity));
-}
-.h-dropzone.focus.is-invalid,
-.h-dropzone.dragover.is-invalid {
-  border-color: var(--bs-danger);
-  box-shadow: 0 0 var(--fs-input-btn-focus-blur) var(--fs-input-btn-focus-width) rgba(var(--bs-danger), var(--fs-input-btn-focus-color-opacity));
-}
-.h-dropzone .form-control {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 1;
-  border: none;
-  box-shadow: none;
-  text-indent: -100vw;
-  color: transparent;
-  background: none;
-}
-.h-dropzone.is-invalid {
-  border-color: var(--bs-danger);
-}
-.h-dropzone.is-valid {
-  border-color: var(--bs-success);
-}
-.h-dropzone-placeholder {
-  color: var(--bs-gray-600);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-}
-.media-modal .h-thumbnail {
-  cursor: pointer;
-}
-.media-modal input[type=checkbox]:checked + label .h-thumbnail {
-  background-color: #0d6efd;
-}

data/app/assets/stylesheets/formstrap.scss

@@ -5,7 +5,11 @@
 @import "formstrap/vendor/flatpickr";
 
 // Formstrap
-@import "formstrap/forms";
 @import "formstrap/general";
 @import "formstrap/utilities";
+@import "formstrap/shared";
 @import "formstrap/media";
+@import "formstrap/autocomplete";
+@import "formstrap/file";
+@import "formstrap/repeater";
+@import "formstrap/search";

data/app/controllers/formstrap/media_controller.rb

@@ -34,14 +34,6 @@ class Formstrap::MediaController < FormstrapController
     @blob = ActiveStorage::Blob.find(params[:id])
   end
 
-  def update
-    @blob = ActiveStorage::Blob.find(params[:id])
-    media_item_params[:filename] = media_item_params[:filename] + "." + @blob.filename.to_s.rpartition(".").last
-    if @blob.update(media_item_params)
-      flash.now[:notice] = t("admin.flash.updated", name: @blob.filename)
-    end
-  end
-
   def thumbnail
     @blob = ActiveStorage::Blob.find(params[:id])
   end
@@ -52,6 +44,7 @@ class Formstrap::MediaController < FormstrapController
     blobs = filter_unattached(blobs)
     blobs = filter_by_mimetype(blobs, media_params[:mimetype]) if media_params[:mimetype].present?
     blobs = filter_excluded_models(blobs, media_params[:exclude_models]) if media_params[:exclude_models].present?
+    blobs = filter_search(blobs, media_params[:search]) if media_params[:search].present?
     blobs
   end
 
@@ -67,6 +60,10 @@ class Formstrap::MediaController < FormstrapController
     blobs.not_attached_to(model_names)
   end
 
+  def filter_search(blobs, string)
+    blobs.search(string)
+  end
+
   def sort(blobs)
     blobs.order(created_at: :desc)
   end
@@ -77,6 +74,7 @@ class Formstrap::MediaController < FormstrapController
       :mimetype,
       :min,
       :name,
+      :search,
       :page,
       :page_start,
       :per_page,
@@ -85,8 +83,4 @@ class Formstrap::MediaController < FormstrapController
       exclude_models: []
     )
   end
-
-  def media_item_params
-    params.require(:blob).permit!
-  end
 end