plutonium 0.15.19 → 0.15.21

data/docs/guide/getting-started/resources.md

@@ -85,7 +85,7 @@ class BlogDefinition < Plutonium::Resource::Definition
   # Customize how fields are displayed
   display :title, class: "col-span-full"
   display :content, class: "col-span-full" do |f|
-    f.text_tag class: "prose dark:prose-invert"
+    f.text_tag class: "format dark:format-invert"
   end
 
   # Custom column display in tables

data/lib/generators/pu/core/assets/assets_generator.rb

@@ -29,7 +29,7 @@ module Pu
       end
 
       def install_dependencies
-        run "yarn add @radioactive-labs/plutonium flowbite @tailwindcss/forms @tailwindcss/typography postcss-cli cssnano"
+        run "yarn add @radioactive-labs/plutonium flowbite @tailwindcss/forms @tailwindcss/typography flowbite-typography postcss-cli cssnano"
       end
 
       def configure_application
@@ -51,7 +51,7 @@ module Pu
 
       def import_styles
         prepend_to_file "app/assets/stylesheets/application.tailwind.css",
-          "@import \"gem:plutonium/src/css/plutonium.css\";\n"
+          "@import \"gem:plutonium/src/css/plutonium.css\";\n\n"
       end
     end
   end

data/lib/plutonium/resource/controllers/queryable.rb

@@ -15,7 +15,7 @@ module Plutonium
 
         def current_query_object
           @current_query_object ||=
-            Plutonium::Resource::QueryObject.new(resource_class, raw_resource_query_params) do |query_object|
+            Plutonium::Resource::QueryObject.new(resource_class, raw_resource_query_params, request.path) do |query_object|
               if current_definition.search_definition
                 query_object.define_search proc { |scope, search:|
                   current_definition.search_definition.call(scope, search)

data/lib/plutonium/resource/query_object.rb

@@ -7,9 +7,10 @@ module Plutonium
       #
       # @param resource_class [Object] The resource class.
       # @param params [Hash] The parameters for initialization.
-      def initialize(resource_class, params, &)
+      def initialize(resource_class, params, request_path, &)
         @resource_class = resource_class
         @params = params
+        @request_path = request_path
 
         define_standard_queries
         yield self if block_given?
@@ -74,7 +75,7 @@ module Plutonium
 
         q.merge! params.slice(*filter_definitions.keys)
         query_params = deep_compact({q: q}).to_param
-        "?#{query_params}"
+        "#{@request_path}?#{query_params}"
       end
 
       # Applies the defined filters and sorts to the given scope.

data/lib/plutonium/ui/display/base.rb

@@ -10,6 +10,10 @@ module Plutonium
           def association_tag(**, &)
             create_component(Plutonium::UI::Display::Component::Association, :association, **, &)
           end
+
+          def markdown_tag(**, &)
+            create_component(Plutonium::UI::Display::Component::Markdown, :markdown, **, &)
+          end
         end
 
         private

data/lib/plutonium/ui/display/component/markdown.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+require "redcarpet"
+
+module Plutonium
+  module UI
+    module Display
+      module Component
+        class Markdown < Phlexi::Display::Components::Base
+          include Phlexi::Display::Components::Concerns::DisplaysValue
+
+          RENDERER = Redcarpet::Markdown.new(Redcarpet::Render::HTML, autolink: true, tables: true)
+
+          def render_value(value)
+            article(**attributes) do
+              unsafe_raw RENDERER.render(value)
+            end
+          end
+        end
+      end
+    end
+  end
+end

data/lib/plutonium/ui/display/theme.rb

@@ -19,7 +19,8 @@ module Plutonium
             color_indicator: "w-10 h-10 rounded-full mr-2", # max-h-fit
             email: "flex items-center text-md text-primary-600 dark:text-primary-500 mb-1 whitespace-pre-line",
             json: "text-sm text-gray-900 dark:text-white mb-1 whitespace-pre font-mono shadow-inner p-4",
-            prefixed_icon: "w-8 h-8 mr-2"
+            prefixed_icon: "w-8 h-8 mr-2",
+            markdown: "format dark:format-invert format-primary"
           })
         end
       end

data/lib/plutonium/ui/form/base.rb

@@ -6,6 +6,21 @@ module Plutonium
       class Base < Phlexi::Form::Base
         include Plutonium::UI::Component::Behaviour
 
+        class Builder < Builder
+          include Plutonium::UI::Form::Options::InferredTypes
+
+          def easymde_tag(**, &)
+            create_component(Plutonium::UI::Form::Components::Easymde, :easymde, **, &)
+          end
+          alias_method :markdown_tag, :easymde_tag
+
+          alias_method :basic_select_tag, :select_tag
+          def slim_select_tag(**, &)
+            basic_select_tag(**, data_controller: "slim-select", class!: "", &)
+          end
+          alias_method :select_tag, :slim_select_tag
+        end
+
         private
 
         def render_actions

data/lib/plutonium/ui/form/components/easymde.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module Plutonium
+  module UI
+    module Form
+      module Components
+        class Easymde < Phlexi::Form::Components::Base
+          include Phlexi::Form::Components::Concerns::HandlesInput
+
+          def view_template
+            textarea(**attributes, data_controller: "easymde") { field.dom.value }
+          end
+        end
+      end
+    end
+  end
+end

data/lib/plutonium/ui/form/options/inferred_types.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module Plutonium
+  module UI
+    module Form
+      module Options
+        module InferredTypes
+          private
+
+          def infer_field_component
+            component = super
+            case component
+            when :select
+              :slim_select
+            else
+              component
+            end
+          end
+        end
+      end
+    end
+  end
+end

data/lib/plutonium/ui/layout/base.rb

@@ -119,15 +119,35 @@ module Plutonium
         end
 
         def render_styles
+          render_external_styles
+
           url = resource_asset_url_for(:css, resource_stylesheet_asset)
           stylesheet_link_tag(url, "data-turbo-track": "reload")
         end
 
+        def render_external_styles
+        end
+
         def render_scripts
+          render_external_scripts
+
           url = resource_asset_url_for(:js, resource_script_asset)
           javascript_include_tag(url, "data-turbo-track": "reload", type: "module")
         end
 
+        def render_external_scripts
+          script(
+            src: "https://cdn.jsdelivr.net/npm/easymde@2.18.0/dist/easymde.min.js",
+            integrity: "sha384-KtB38COewxfrhJxoN2d+olxJAeT08LF8cVZ6DQ8Poqu89zIptqO6zAXoIxpGNWYE",
+            crossorigin: "anonymous"
+          )
+          script(
+            src: "https://cdn.jsdelivr.net/npm/slim-select@2.10.0/dist/slimselect.umd.min.js",
+            integrity: "sha384-WKsmo+vSs0gqrT+es6wFEojVFn4P0kNaHpHTIkn84iHY8T4rF2V2McZeSbLPLlHy",
+            crossorigin: "anonymous"
+          )
+        end
+
         def render_body_scripts
         end
       end

data/lib/plutonium/ui/table/resource.rb

@@ -66,7 +66,10 @@ module Plutonium
               field_options = resource_definition.defined_fields[name] ? resource_definition.defined_fields[name][:options].dup : {}
               field_options = field_options.merge(**column_display_options.slice(:align))
               # field_options[:align] = align_field_to if align_field_to
-              table.column name, **field_options, sort_params: current_query_object.sort_params_for(name), &display_tag_block
+              table.column name,
+                **field_options,
+                sort_params: current_query_object.sort_params_for(name),
+                &display_tag_block
             end
 
             table.actions do |wrapped_object|

data/lib/plutonium/version.rb

@@ -1,5 +1,5 @@
 module Plutonium
-  VERSION = "0.15.19"
+  VERSION = "0.15.21"
   NEXT_MAJOR_VERSION = VERSION.split(".").tap { |v|
     v[1] = v[1].to_i + 1
     v[2] = 0

data/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@radioactive-labs/plutonium",
-  "version": "0.1.10",
+  "version": "0.1.11",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@radioactive-labs/plutonium",
-      "version": "0.1.10",
+      "version": "0.1.11",
       "license": "MIT",
       "dependencies": {
         "@hotwired/stimulus": "^3.2.2",
@@ -22,6 +22,7 @@
         "cssnano": "^7.0.2",
         "esbuild": "^0.20.1",
         "esbuild-plugin-manifest": "^1.0.3",
+        "flowbite-typography": "^1.0.5",
         "mermaid": "^11.4.0",
         "postcss": "^8.4.35",
         "postcss-cli": "^11.0.0",
@@ -3930,6 +3931,18 @@
         "mini-svg-data-uri": "^1.4.3"
       }
     },
+    "node_modules/flowbite-typography": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/flowbite-typography/-/flowbite-typography-1.0.5.tgz",
+      "integrity": "sha512-IqTwOYgGZkXTK/5ngx3A9oQwgOqnRyUKUfIiB+w6xDmiD8z3cKDIgYfFpHIMKbLVfg+QmJIPqEEPrGZbAwVT6g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "lodash.castarray": "^4.4.0",
+        "lodash.isplainobject": "^4.0.6",
+        "lodash.merge": "^4.6.2"
+      }
+    },
     "node_modules/focus-trap": {
       "version": "7.6.0",
       "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-7.6.0.tgz",

data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@radioactive-labs/plutonium",
-  "version": "0.1.10",
+  "version": "0.1.11",
   "description": "Core assets for the Plutonium gem",
   "type": "module",
   "main": "src/js/core.js",
@@ -31,6 +31,7 @@
     "cssnano": "^7.0.2",
     "esbuild": "^0.20.1",
     "esbuild-plugin-manifest": "^1.0.3",
+    "flowbite-typography": "^1.0.5",
     "mermaid": "^11.4.0",
     "postcss": "^8.4.35",
     "postcss-cli": "^11.0.0",

data/src/css/easymde.css

@@ -233,11 +233,11 @@
 
   /* Preview */
   .editor-preview {
-    @apply p-2.5 bg-gray-50 dark:bg-gray-900 prose dark:prose-invert max-w-none prose-sm sm:prose-base;
+    @apply p-2.5 bg-gray-50 dark:bg-gray-900 format dark:format-invert format-primary max-w-none;
   }
 
   .editor-preview-side {
-    @apply fixed bottom-0 w-1/2 top-[50px] right-0 z-50 overflow-auto hidden box-border border border-gray-300 dark:border-gray-600 break-words prose dark:prose-invert max-w-none prose-sm sm:prose-base;
+    @apply fixed bottom-0 w-1/2 top-[50px] right-0 z-50 overflow-auto hidden box-border border border-gray-300 dark:border-gray-600 break-words format dark:format-invert format-primary max-w-none;
   }
 
   .editor-preview-active-side {

data/src/css/plutonium.css

@@ -1,5 +1,6 @@
 @import "core.css";
 @import "easymde.css";
+@import "slim_select.css";
 
 @tailwind base;
 @tailwind components;

data/src/css/slim_select.css

@@ -0,0 +1,297 @@
+@layer components {
+  :root {
+    --ss-primary-color: theme('colors.primary.500');
+    --ss-bg-color: theme('colors.white');
+    --ss-font-color: theme('colors.gray.900');
+    --ss-font-placeholder-color: theme('colors.gray.500');
+    --ss-disabled-color: theme('colors.gray.100');
+    --ss-border-color: theme('colors.gray.300');
+    --ss-highlight-color: theme('colors.yellow.200');
+    --ss-success-color: theme('colors.green.500');
+    --ss-error-color: theme('colors.red.500');
+    --ss-focus-color: theme('colors.primary.500');
+  }
+
+  .dark {
+    --ss-primary-color: theme('colors.primary.400');
+    --ss-bg-color: theme('colors.gray.700');
+    --ss-font-color: theme('colors.white');
+    --ss-font-placeholder-color: theme('colors.gray.400');
+    --ss-disabled-color: theme('colors.gray.800');
+    --ss-border-color: theme('colors.gray.600');
+    --ss-highlight-color: theme('colors.yellow.300');
+    --ss-success-color: theme('colors.green.400');
+    --ss-error-color: theme('colors.red.400');
+    --ss-focus-color: theme('colors.primary.400');
+  }
+
+  @keyframes ss-valueIn {
+    0% {
+      @apply scale-0 opacity-0;
+    }
+
+    100% {
+      @apply scale-100 opacity-100;
+    }
+  }
+
+  @keyframes ss-valueOut {
+    0% {
+      @apply scale-100 opacity-100;
+    }
+
+    100% {
+      @apply scale-0 opacity-0;
+    }
+  }
+
+  .ss-hide {
+    @apply hidden !important;
+  }
+
+  .ss-main {
+    @apply flex flex-row relative select-none w-full p-2 border rounded-md shadow-sm font-medium text-sm border-gray-300 bg-white text-gray-900 dark:bg-gray-700 dark:border-gray-600 dark:text-white focus:ring-primary-500 focus:border-primary-500 focus:outline-none cursor-pointer transition-colors duration-200 overflow-hidden;
+  }
+
+  .ss-main:focus {
+    @apply ring-1 ring-primary-500 border-primary-500;
+  }
+
+  .ss-main.ss-disabled {
+    @apply cursor-not-allowed bg-gray-100 dark:bg-gray-800 text-gray-500 dark:text-gray-400;
+  }
+
+  .ss-main.ss-open-above {
+    @apply rounded-b-md rounded-t-none;
+  }
+
+  .ss-main.ss-open-below {
+    @apply rounded-t-md rounded-b-none;
+  }
+
+  .ss-main .ss-values {
+    @apply inline-flex flex-wrap gap-[5px] flex-1;
+  }
+
+  .ss-main .ss-values .ss-placeholder {
+    @apply flex p-0 m-0 leading-normal items-center w-full text-gray-500 dark:text-gray-400 overflow-hidden truncate whitespace-nowrap;
+  }
+
+  .ss-main .ss-values .ss-max {
+    @apply flex select-none items-center w-fit text-xs text-white dark:text-gray-900 leading-normal p-[3px_5px] bg-primary-500 rounded-md;
+  }
+
+  .ss-main .ss-values .ss-single {
+    @apply flex m-0;
+  }
+
+  .ss-main .ss-values .ss-value {
+    @apply flex select-none items-center w-fit bg-primary-500 rounded-md;
+    animation: ss-valueIn 0.2s ease-out forwards;
+  }
+
+  .ss-main .ss-values .ss-value.ss-value-out {
+    animation: ss-valueOut 0.2s ease-out forwards;
+  }
+
+  .ss-main .ss-values .ss-value .ss-value-text {
+    @apply text-xs text-white dark:text-gray-900 leading-normal p-[3px_5px];
+  }
+
+  .ss-main .ss-values .ss-value .ss-value-delete {
+    @apply flex items-center h-[7px] w-[7px] p-[3px_5px] cursor-pointer border-l border-solid border-white dark:border-gray-900 box-content;
+  }
+
+  .ss-main .ss-values .ss-value .ss-value-delete svg {
+    @apply h-[7px] w-[7px];
+  }
+
+  .ss-main .ss-values .ss-value .ss-value-delete svg path {
+    @apply fill-none stroke-white dark:stroke-gray-900;
+    stroke-width: 18;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+
+  .ss-main .ss-deselect {
+    @apply flex-none flex items-center justify-center w-fit h-auto p-[0_5px];
+  }
+
+  .ss-main .ss-deselect svg {
+    @apply w-[8px] h-[8px];
+  }
+
+  .ss-main .ss-deselect svg path {
+    @apply fill-none stroke-gray-500 dark:stroke-gray-400;
+    stroke-width: 20;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+
+  .ss-main .ss-arrow {
+    @apply flex-none flex items-center justify-end w-4 h-4 m-auto;
+  }
+
+  .ss-main .ss-arrow path {
+    @apply fill-none stroke-gray-500 dark:stroke-gray-400 transition-transform duration-200;
+    stroke-width: 2;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+
+  .ss-content {
+    @apply absolute flex h-auto flex-col w-auto max-h-[300px] box-border border rounded-b-md shadow-lg border-gray-300 bg-white dark:bg-gray-700 dark:border-gray-600 transition-all duration-200 opacity-0 scale-y-0 origin-top overflow-hidden z-[10000];
+  }
+
+  .ss-content.ss-relative {
+    @apply relative h-full;
+  }
+
+  .ss-content.ss-fixed {
+    @apply fixed;
+  }
+
+  .ss-content.ss-open-above {
+    @apply flex-col-reverse opacity-100 scale-y-100 origin-bottom rounded-t-md;
+  }
+
+  .ss-content.ss-open-below {
+    @apply opacity-100 scale-y-100 origin-top rounded-b-md;
+  }
+
+  .ss-content .ss-search {
+    @apply flex-none flex flex-row p-2;
+  }
+
+  .ss-content .ss-search input {
+    @apply inline-flex text-base leading-normal flex-auto w-full min-w-0 p-2 m-0 border rounded-md shadow-sm font-medium text-sm border-gray-300 bg-gray-100 text-gray-900 placeholder-gray-400 dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white focus:ring-primary-500 focus:border-primary-500 focus:outline-none text-left box-border;
+  }
+
+  .ss-content .ss-search .ss-addable {
+    @apply inline-flex justify-center items-center cursor-pointer flex-none h-auto ml-2 border shadow-sm border-gray-300 dark:border-gray-600;
+  }
+
+  .ss-content .ss-search .ss-addable svg {
+    @apply flex items-center justify-end flex-none w-4 h-4 m-2;
+  }
+
+  .ss-content .ss-search .ss-addable svg path {
+    @apply fill-none stroke-gray-500 dark:stroke-gray-400;
+    stroke-width: 2;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+
+  .ss-content .ss-list {
+    @apply flex-auto h-auto overflow-x-hidden overflow-y-auto;
+  }
+
+  .ss-content .ss-list .ss-error {
+    @apply text-red-500 dark:text-red-400 p-2;
+  }
+
+  .ss-content .ss-list .ss-searching {
+    @apply text-gray-900 dark:text-white p-2;
+  }
+
+  .ss-content .ss-list .ss-optgroup.ss-close .ss-option {
+    @apply hidden !important;
+  }
+
+  /* Update the specific no results style */
+  .ss-content .ss-list .ss-search {
+    @apply flex-none text-sm text-gray-500 dark:text-gray-400 p-2 font-medium;
+  }
+
+  /* The original search container styles should be scoped properly */
+  .ss-content>.ss-search {
+    @apply flex-none flex flex-row p-2;
+  }
+
+  .ss-content .ss-list .ss-optgroup .ss-optgroup-label {
+    @apply flex flex-row items-center justify-between p-2 bg-gray-50 dark:bg-gray-800;
+  }
+
+  .ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-label-text {
+    @apply flex-auto font-bold text-gray-900 dark:text-white;
+  }
+
+  .ss-content .ss-list .ss-optgroup .ss-optgroup-label:has(.ss-arrow) {
+    @apply cursor-pointer;
+  }
+
+  .ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions {
+    @apply flex-none flex flex-row items-center justify-center gap-2;
+  }
+
+  .ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall {
+    @apply flex-none flex flex-row cursor-pointer hover:opacity-50;
+  }
+
+  .ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall.ss-selected svg path {
+    @apply stroke-red-500 dark:stroke-red-400;
+  }
+
+  .ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall span {
+    @apply flex-none flex items-center justify-center text-[60%] text-center pr-1;
+  }
+
+  .ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall svg {
+    @apply flex-none w-[13px] h-[13px];
+  }
+
+  .ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall svg path {
+    @apply fill-none stroke-green-500 dark:stroke-green-400;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+
+  .ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall svg:first-child {
+    stroke-width: 5;
+  }
+
+  .ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall svg:last-child {
+    stroke-width: 11;
+  }
+
+  .ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-closable {
+    @apply flex-none flex flex-row cursor-pointer;
+  }
+
+  .ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-closable .ss-arrow {
+    @apply flex-auto w-[10px] h-[10px];
+  }
+
+  .ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-closable .ss-arrow path {
+    @apply fill-none stroke-gray-500 dark:stroke-gray-400 transition-transform duration-200;
+    stroke-width: 2;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+
+  .ss-content .ss-list .ss-optgroup .ss-option {
+    @apply p-2 pl-6;
+  }
+
+  .ss-content .ss-list .ss-option {
+    @apply block p-2 whitespace-normal text-gray-900 dark:text-white cursor-pointer select-none hover:bg-gray-100 dark:hover:bg-gray-600;
+    min-height: 0;
+  }
+
+  .ss-content .ss-list .ss-option:empty {
+    @apply hidden p-0 m-0;
+  }
+
+  .ss-content .ss-list .ss-option.ss-highlighted,
+  .ss-content .ss-list .ss-option:not(.ss-disabled).ss-selected {
+    @apply text-white dark:text-gray-900 bg-primary-500;
+  }
+
+  .ss-content .ss-list .ss-option.ss-disabled {
+    @apply cursor-not-allowed bg-gray-100 dark:bg-gray-800 text-gray-500 dark:text-gray-400;
+  }
+
+  .ss-content .ss-list .ss-option .ss-search-highlight {
+    @apply inline-block bg-yellow-200 dark:bg-yellow-300;
+  }
+}

data/src/js/controllers/easymde_controller.js

@@ -0,0 +1,14 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="easymde"
+export default class extends Controller {
+  connect() {
+    console.log(`easymde connected: ${this.element}`)
+    self.easyMDE = new EasyMDE({ element: this.element })
+  }
+
+  disconnect() {
+    self.easyMDE.toTextArea()
+    self.easyMDE = null
+  }
+}

data/src/js/controllers/register_controllers.js

@@ -21,6 +21,8 @@ import ResourceCollapseController from "./resource_collapse_controller.js"
 import ResourceDismissController from "./resource_dismiss_controller.js"
 import FrameNavigatorController from "./frame_navigator_controller.js"
 import ColorModeController from "./color_mode_controller.js"
+import EasyMDEController from "./easymde_controller.js"
+import SlimSelectController from "./slim_select_controller.js"
 
 export default function (application) {
   // Register controllers here
@@ -46,4 +48,6 @@ export default function (application) {
   application.register("resource-dismiss", ResourceDismissController)
   application.register("frame-navigator", FrameNavigatorController)
   application.register("color-mode", ColorModeController)
+  application.register("easymde", EasyMDEController)
+  application.register("slim-select", SlimSelectController)
 }

data/src/js/controllers/slim_select_controller.js

@@ -0,0 +1,16 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="slim-select"
+export default class extends Controller {
+  connect() {
+    console.log(`slim-select connected: ${this.element}`)
+    self.slimSelect = new SlimSelect({
+      select: this.element
+    })
+  }
+
+  disconnect() {
+    self.slimSelect.destroy()
+    self.slimSelect = null
+  }
+}