feat: custom setting type

app/components/maglev/content/builder.rb

@@ -3,26 +3,19 @@
 module Maglev
   module Content
     module Builder
-      TYPES = {
-        text: Maglev::Content::Text,
-        image: Maglev::Content::Image,
-        link: Maglev::Content::Link,
-        checkbox: Maglev::Content::Checkbox,
-        color: Maglev::Content::Color,
-        select: Maglev::Content::Select,
-        collection_item: Maglev::Content::CollectionItem,
-        icon: Maglev::Content::Icon
-      }.freeze
-
       def build(scope, content, setting)
-        klass = TYPES[setting.type.to_sym]
+        klass = find_klass(setting.type.to_sym)
 
         raise "[Maglev] Unknown setting type: #{setting.type}" unless klass
 
         klass.new(scope, content, setting)
       end
 
-      module_function :build
+      def find_klass(type)
+        Maglev::Content.const_get(type.to_s.camelize)
+      end
+
+      module_function :build, :find_klass
     end
   end
 end

app/javascript/editor/components/dynamic-form/dynamic-input/checkbox.vue

@@ -0,0 +1,16 @@
+<template>
+  <checkbox-input
+    :label="setting.label"
+    :name="setting.id"
+    v-model="inputValue"
+  />
+</template>
+
+<script>
+import DynamicInputMixin from '@/mixins/dynamic-input'
+
+export default {
+  name: 'DynamicCheckboxInput',
+  mixins: [DynamicInputMixin],
+}
+</script>

app/javascript/editor/components/dynamic-form/dynamic-input/collection-item.vue

@@ -0,0 +1,16 @@
+<template>
+  <collection-item-input
+    :label="setting.label"
+    :name="setting.id"
+    v-model="inputValue"
+  />
+</template>
+
+<script>
+import DynamicInputMixin from '@/mixins/dynamic-input'
+
+export default {
+  name: 'DynamicCollectionItemInput',
+  mixins: [DynamicInputMixin],
+}
+</script>

app/javascript/editor/components/dynamic-form/dynamic-input/color.vue

@@ -0,0 +1,17 @@
+<template>
+  <color-picker
+    :label="setting.label"
+    :name="setting.id"
+    v-model="inputValue"
+    :presets="options.presets"
+  />
+</template>
+
+<script>
+import DynamicInputMixin from '@/mixins/dynamic-input'
+
+export default {
+  name: 'DynamicColorInput',
+  mixins: [DynamicInputMixin],
+}
+</script>

app/javascript/editor/components/dynamic-form/dynamic-input/dictionnary.js

@@ -0,0 +1,41 @@
+import DynamicInputMixin from '@/mixins/dynamic-input'
+
+import TextInput from './text'
+import ImageInput from './image'
+import ColorInput from './color'
+import LinkInput from './link'
+import CheckboxInput from './checkbox'
+import SelectInput from './select'
+import IconInput from './icon'
+import CollectionItemInput from './collection-item'
+
+let registeredInputs = {}
+
+// key names must be "underscored" (since they're coming from the Rails API)
+const CORE_INPUTS = {
+  text: TextInput,
+  image: ImageInput,
+  color: ColorInput,
+  link: LinkInput,
+  checkbox: CheckboxInput,
+  select: SelectInput,
+  icon: IconInput,
+  collection_item: CollectionItemInput,
+}
+
+export const register = (type, component) => {
+  registeredInputs[type] = component
+}
+
+export const get = (type) => {
+  const component = registeredInputs[type] || CORE_INPUTS[type]
+
+  if (!component) {
+    console.log(`[Maglev] we couldn't find a component for the "${type}" type`)
+  }
+
+  return component
+}
+
+window.registerMaglevSetting = register
+window.maglevSettingMixin = DynamicInputMixin

app/javascript/editor/components/dynamic-form/dynamic-input/icon.vue

@@ -0,0 +1,17 @@
+<template>
+  <icon-input
+    :label="setting.label"
+    :name="setting.id"
+    :isFocused="isFocused"
+    v-model="inputValue"
+  />
+</template>
+
+<script>
+import DynamicInputMixin from '@/mixins/dynamic-input'
+
+export default {
+  name: 'DynamicIconInput',
+  mixins: [DynamicInputMixin],
+}
+</script>

app/javascript/editor/components/dynamic-form/dynamic-input/image.vue

@@ -0,0 +1,17 @@
+<template>
+  <image-input
+    :label="setting.label"
+    :name="setting.id"
+    :isFocused="isFocused"
+    v-model="inputValue"
+  />
+</template>
+
+<script>
+import DynamicInputMixin from '@/mixins/dynamic-input'
+
+export default {
+  name: 'DynamicImageInput',
+  mixins: [DynamicInputMixin],
+}
+</script>

app/javascript/editor/components/dynamic-form/dynamic-input/index.vue

@@ -0,0 +1,37 @@
+<template>
+  <component
+    v-bind:is="inputComponent"
+    :setting="setting"
+    :value="value"
+    :isFocused="isFocused"
+    :options="options"
+    v-on="$listeners"
+  ></component>
+</template>
+
+<script>
+import * as InputDictionnary from './dictionnary'
+
+export default {
+  name: 'DynamicInput',
+  props: {
+    setting: { type: Object, default: () => ({ type: 'text' }) },
+    content: { type: Array, required: true },
+    isFocused: { type: Boolean, default: false },
+  },
+  computed: {
+    inputComponent() {
+      return InputDictionnary.get(this.setting.type)
+    },
+    options() {
+      return this.setting.options
+    },
+    value() {
+      const content = this.content.find(
+        (sectionContent) => sectionContent.id === this.setting.id,
+      )
+      return content?.value
+    },
+  },
+}
+</script>

app/javascript/editor/components/dynamic-form/dynamic-input/link.vue

@@ -0,0 +1,23 @@
+<template>
+  <link-input
+    :label="setting.label"
+    :name="setting.id"
+    :isFocused="isFocused"
+    :withText="withText"
+    v-model="inputValue"
+  />
+</template>
+
+<script>
+import DynamicInputMixin from '@/mixins/dynamic-input'
+
+export default {
+  name: 'DynamicLinkInput',
+  mixins: [DynamicInputMixin],
+  props: {
+    withText() {
+      return !!this.options.withText
+    },
+  },
+}
+</script>

app/javascript/editor/components/dynamic-form/dynamic-input/select.vue

@@ -0,0 +1,17 @@
+<template>
+  <simple-select
+    :label="setting.label"
+    :name="setting.id"
+    v-model="inputValue"
+    :selectOptions="options.selectOptions"
+  />
+</template>
+
+<script>
+import DynamicInputMixin from '@/mixins/dynamic-input'
+
+export default {
+  name: 'DynamicSelectInput',
+  mixins: [DynamicInputMixin],
+}
+</script>