diff --git a/app/components/example_component/example_controller.js b/app/components/example_component/example_controller.js index 72957edffd..87aff838cc 100644 --- a/app/components/example_component/example_controller.js +++ b/app/components/example_component/example_controller.js @@ -1,4 +1,5 @@ -// This controller will be called "example-component--example", ie "component-subdirectory--js-file-name" +// This controller will be called "example", ie "js-file-name" minus the "_controller.js" +// see controller/index.js for more info import { Controller } from "stimulus"; export default class extends Controller {} diff --git a/app/components/tag_list_input_component/tag_list_input_component.html.haml b/app/components/tag_list_input_component/tag_list_input_component.html.haml index 81f4b763ce..df6e5c57fd 100644 --- a/app/components/tag_list_input_component/tag_list_input_component.html.haml +++ b/app/components/tag_list_input_component/tag_list_input_component.html.haml @@ -1,19 +1,19 @@ -%div{ "data-controller": "tag-list-input-component--tag-list-input" } +%div{ "data-controller": "tag-list-input" } .tags-input .tags - # We use display:none instead of hidden field, so changes to the value can be picked up by the bulkFormController - = f.text_field method.to_sym, value: tags.join(","), "data-tag-list-input-component--tag-list-input-target": "tagList", "style": "display: none" - %ul.tag-list{"data-tag-list-input-component--tag-list-input-target": "list"} - %template{"data-tag-list-input-component--tag-list-input-target": "template"} + = f.text_field method.to_sym, value: tags.join(","), "data-tag-list-input-target": "tagList", "style": "display: none" + %ul.tag-list{"data-tag-list-input-target": "list"} + %template{"data-tag-list-input-target": "template"} %li.tag-item .tag-template %span - %a.remove-button{ "data-action": "click->tag-list-input-component--tag-list-input#removeTag" } + %a.remove-button{ "data-action": "click->tag-list-input#removeTag" } × - tags.each do |tag| %li.tag-item .tag-template %span=tag - %a.remove-button{ "data-action": "click->tag-list-input-component--tag-list-input#removeTag" } + %a.remove-button{ "data-action": "click->tag-list-input#removeTag" } × - = text_field_tag "variant_add_tag_#{f.object.id}".to_sym, nil, class: "input", placeholder: placeholder, "data-action": "keydown.enter->tag-list-input-component--tag-list-input#addTag keyup->tag-list-input-component--tag-list-input#filterInput", "data-tag-list-input-component--tag-list-input-target": "newTag", **aria_label_option + = text_field_tag "variant_add_tag_#{f.object.id}".to_sym, nil, class: "input", placeholder: placeholder, "data-action": "keydown.enter->tag-list-input#addTag keyup->tag-list-input#filterInput", "data-tag-list-input-target": "newTag", **aria_label_option diff --git a/app/components/vertical_ellipsis_menu/component.rb b/app/components/vertical_ellipsis_menu/component.rb deleted file mode 100644 index 696f0a0ad0..0000000000 --- a/app/components/vertical_ellipsis_menu/component.rb +++ /dev/null @@ -1,6 +0,0 @@ -# frozen_string_literal: true - -module VerticalEllipsisMenu - class Component < ViewComponent::Base - end -end diff --git a/app/components/vertical_ellipsis_menu_component.rb b/app/components/vertical_ellipsis_menu_component.rb new file mode 100644 index 0000000000..4915eaafb5 --- /dev/null +++ b/app/components/vertical_ellipsis_menu_component.rb @@ -0,0 +1,4 @@ +# frozen_string_literal: true + +class VerticalEllipsisMenuComponent < ViewComponent::Base +end diff --git a/app/components/vertical_ellipsis_menu/component.html.haml b/app/components/vertical_ellipsis_menu_component/vertical_ellipsis_menu_component.html.haml similarity index 73% rename from app/components/vertical_ellipsis_menu/component.html.haml rename to app/components/vertical_ellipsis_menu_component/vertical_ellipsis_menu_component.html.haml index 5557289769..ea67c8ef00 100644 --- a/app/components/vertical_ellipsis_menu/component.html.haml +++ b/app/components/vertical_ellipsis_menu_component/vertical_ellipsis_menu_component.html.haml @@ -1,4 +1,4 @@ -.vertical-ellipsis-menu{ "data-controller": "vertical-ellipsis-menu--component" } - %i.fa.fa-ellipsis-v{ "data-action": "click->vertical-ellipsis-menu--component#toggle" } - .vertical-ellipsis-menu-content{ "data-vertical-ellipsis-menu--component-target": "content" } +.vertical-ellipsis-menu{ "data-controller": "vertical-ellipsis-menu" } + %i.fa.fa-ellipsis-v{ "data-action": "click->vertical-ellipsis-menu#toggle" } + .vertical-ellipsis-menu-content{ "data-vertical-ellipsis-menu-target": "content" } = content diff --git a/app/components/vertical_ellipsis_menu/component.scss b/app/components/vertical_ellipsis_menu_component/vertical_ellipsis_menu_component.scss similarity index 100% rename from app/components/vertical_ellipsis_menu/component.scss rename to app/components/vertical_ellipsis_menu_component/vertical_ellipsis_menu_component.scss diff --git a/app/components/vertical_ellipsis_menu/component_controller.js b/app/components/vertical_ellipsis_menu_component/vertical_ellipsis_menu_controller.js similarity index 100% rename from app/components/vertical_ellipsis_menu/component_controller.js rename to app/components/vertical_ellipsis_menu_component/vertical_ellipsis_menu_controller.js diff --git a/app/views/admin/products_v3/_product_row.html.haml b/app/views/admin/products_v3/_product_row.html.haml index 980b9980d8..0b47dd3dfe 100644 --- a/app/views/admin/products_v3/_product_row.html.haml +++ b/app/views/admin/products_v3/_product_row.html.haml @@ -24,7 +24,7 @@ %td.col-inherits_properties.align-left .content= product.inherits_properties ? 'YES' : 'NO' #TODO: consider using https://github.com/RST-J/human_attribute_values, else use I18n.t (also below) %td.align-right - = render(VerticalEllipsisMenu::Component.new) do + = render(VerticalEllipsisMenuComponent.new) do = link_to t('admin.products_page.actions.edit'), edit_admin_product_path(product), 'data-turbo': false = link_to t('admin.products_page.actions.clone'), admin_clone_product_path(product), 'data-turbo-method': :post %a{ "data-controller": "modal-link", "data-action": "click->modal-link#setModalDataSetOnConfirm click->modal-link#open", diff --git a/app/views/admin/products_v3/_variant_row.html.haml b/app/views/admin/products_v3/_variant_row.html.haml index 8d6ad68cda..d5aa876e46 100644 --- a/app/views/admin/products_v3/_variant_row.html.haml +++ b/app/views/admin/products_v3/_variant_row.html.haml @@ -84,7 +84,7 @@ %td.col-inherits_properties.align-left -# empty %td.align-right - = render(VerticalEllipsisMenu::Component.new) do + = render(VerticalEllipsisMenuComponent.new) do - if variant.persisted? = link_to t('admin.products_page.actions.edit'), edit_admin_product_variant_path(variant.product, variant) - if variant.product.variants.size > 1 diff --git a/app/webpacker/controllers/index.js b/app/webpacker/controllers/index.js index 55c57a46ce..b02807e3d8 100644 --- a/app/webpacker/controllers/index.js +++ b/app/webpacker/controllers/index.js @@ -6,14 +6,37 @@ import StimulusReflex from "stimulus_reflex"; import consumer from "../channels/consumer"; import controller from "../controllers/application_controller"; import CableReady from "cable_ready"; -import RailsNestedForm from '@stimulus-components/rails-nested-form/dist/stimulus-rails-nested-form.umd.js' // the default module entry point is broken +import RailsNestedForm from "@stimulus-components/rails-nested-form/dist/stimulus-rails-nested-form.umd.js"; // the default module entry point is broken const application = Application.start(); const context = require.context("controllers", true, /_controller\.js$/); -const contextComponents = require.context("../../components", true, /_controller\.js$/); +application.load(definitionsFromContext(context)); -application.load(definitionsFromContext(context).concat(definitionsFromContext(contextComponents))); -application.register('nested-form', RailsNestedForm); +// Load component controller, but generate a shorter controller name than "definitionsFromContext" would +// - for controller in a component subdirectory, get rid of the component folder and use +// the controller name, ie: +// ./tag_rule_group_form_component/tag_rule_group_form_controller.js -> tag-rule-group-form +// - for controller that don't match the pattern above, replace "_" by "-" and "/" by "--", ie: +// ./vertical_ellipsis_menu/component_controller.js -> vertical-ellipsis-menu--component +// +const contextComponents = require.context("../../components", true, /_controller\.js$/); +contextComponents.keys().forEach((path) => { + const module = contextComponents(path); + + // Check whether a module has the default export defined + if (!module.default) return; + + const identifier = path + .replace(/^\.\//, "") + .replace(/^\w+_component\//, "") + .replace(/_controller\.js$/, "") + .replace(/\//g, "--") + .replace(/_/g, "-"); + + application.register(identifier, module.default); +}); + +application.register("nested-form", RailsNestedForm); application.consumer = consumer; StimulusReflex.initialize(application, { controller, isolate: true }); diff --git a/app/webpacker/css/admin_v3/all.scss b/app/webpacker/css/admin_v3/all.scss index 3e3cc403bd..a9840b62f1 100644 --- a/app/webpacker/css/admin_v3/all.scss +++ b/app/webpacker/css/admin_v3/all.scss @@ -127,7 +127,7 @@ @import "components/tom_select"; // admin_v3 @import "app/components/modal_component/modal_component"; -@import "app/components/vertical_ellipsis_menu/component"; // admin_v3 and only V3 +@import "app/components/vertical_ellipsis_menu_component/vertical_ellipsis_menu_component"; // admin_v3 and only V3 @import "app/components/tag_list_input_component/tag_list_input_component"; @import "app/webpacker/css/admin/trix.scss"; diff --git a/spec/components/vertical_ellipsis_menu_component_spec.rb b/spec/components/vertical_ellipsis_menu_component_spec.rb index 3f8a37bab1..3652cfd37c 100644 --- a/spec/components/vertical_ellipsis_menu_component_spec.rb +++ b/spec/components/vertical_ellipsis_menu_component_spec.rb @@ -2,7 +2,7 @@ require "spec_helper" -RSpec.describe VerticalEllipsisMenu::Component, type: :component do +RSpec.describe VerticalEllipsisMenuComponent, type: :component do it "displays the included links" do content = "Edit" render_inline(described_class.new.with_content(content.html_safe)) diff --git a/spec/javascripts/stimulus/tag_list_input_controller_test.js b/spec/javascripts/stimulus/tag_list_input_controller_test.js index dd8461a360..7df91dd750 100644 --- a/spec/javascripts/stimulus/tag_list_input_controller_test.js +++ b/spec/javascripts/stimulus/tag_list_input_controller_test.js @@ -8,28 +8,28 @@ import tag_list_input_controller from "../../../app/components/tag_list_input_co describe("TagListInputController", () => { beforeAll(() => { const application = Application.start(); - application.register("tag-list-input-component--tag-list-input", tag_list_input_controller); + application.register("tag-list-input", tag_list_input_controller); }); beforeEach(() => { document.body.innerHTML = ` -
+
-
    -