Skip to content

Commit

Permalink
feat: brand new plugin system 🎉 (include refactoring to receive new c…
Browse files Browse the repository at this point in the history
…ustom setting type)
  • Loading branch information
did committed Oct 11, 2024
1 parent d446396 commit 377f274
Show file tree
Hide file tree
Showing 109 changed files with 1,106 additions and 717 deletions.
2 changes: 1 addition & 1 deletion .rubocop.yml
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ Documentation:
Enabled: false

AllCops:
TargetRubyVersion: 2.6
TargetRubyVersion: 3.1
Exclude:
- 'bin/*'
- 'coverage/**/*'
Expand Down
Binary file modified .yarn/install-state.gz
Binary file not shown.
6 changes: 3 additions & 3 deletions app/components/maglev/page_component.rb
Original file line number Diff line number Diff line change
Expand Up @@ -36,10 +36,10 @@ def build_section(definition, attributes)
build(
SectionComponent,
parent: self,
definition: definition,
definition:,
attributes: attributes.deep_transform_keys! { |k| k.to_s.underscore.to_sym },
templates_root_path: templates_root_path,
rendering_mode: rendering_mode
templates_root_path:,
rendering_mode:
)
end
end
Expand Down
6 changes: 3 additions & 3 deletions app/controllers/concerns/maglev/fetchers_concern.rb
Original file line number Diff line number Diff line change
Expand Up @@ -30,15 +30,15 @@ def fetch_maglev_page
path: maglev_page_path_from_params,
locale: content_locale,
default_locale: default_content_locale,
fallback_to_default_locale: fallback_to_default_locale,
fallback_to_default_locale:,
only_visible: maglev_rendering_mode == :live
)
end

def fetch_maglev_page_sections(page_sections = nil)
@fetch_maglev_page_sections ||= maglev_services.get_page_sections.call(
page: fetch_maglev_page,
page_sections: page_sections,
page_sections:,
locale: content_locale
)
end
Expand Down Expand Up @@ -106,7 +106,7 @@ def maglev_page_fullpaths
maglev_site.locale_prefixes.inject({}) do |memo, locale|
memo.merge(locale => maglev_services.get_page_fullpath.call(
page: maglev_page,
locale: locale,
locale:,
preview_mode: maglev_rendering_mode != :live
))
end
Expand Down
2 changes: 1 addition & 1 deletion app/controllers/maglev/api/page_clones_controller.rb
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ def create
private

def clone_page(page)
services.clone_page.call(page: page)
services.clone_page.call(page:)
end

def resources
Expand Down
8 changes: 4 additions & 4 deletions app/controllers/maglev/api/pages_controller.rb
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,12 @@ module Maglev
module Api
class PagesController < ::Maglev::ApiController
def index
@pages = services.search_pages.call(q: params[:q], content_locale: content_locale,
@pages = services.search_pages.call(q: params[:q], content_locale:,
default_locale: default_content_locale)
end

def show
@page = services.search_pages.call(id: params[:id], content_locale: content_locale,
@page = services.search_pages.call(id: params[:id], content_locale:,
default_locale: default_content_locale)
head :not_found if @page.nil?
end
Expand Down Expand Up @@ -45,12 +45,12 @@ def site_params
lock_version = params.dig(:site, :lock_version)
sections = params[:site].to_unsafe_hash[:sections] unless params.dig(:site, :sections).nil?
style = params.dig(:site, :style)
(lock_version && sections ? { lock_version: lock_version, sections: sections } : {}).merge(style: style)
(lock_version && sections ? { lock_version:, sections: } : {}).merge(style:)
end

def persist!(page)
services.persist_page.call(
page: page,
page:,
page_attributes: page_params,
site: maglev_site,
site_attributes: site_params
Expand Down
2 changes: 1 addition & 1 deletion app/controllers/maglev/page_preview_controller.rb
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ def use_engine_vite?
end

def extract_content_locale
_, locale = maglev_services.extract_locale.call(params: params, locales: maglev_site.locale_prefixes)
_, locale = maglev_services.extract_locale.call(params:, locales: maglev_site.locale_prefixes)
::I18n.locale = locale
end

Expand Down
121 changes: 27 additions & 94 deletions app/frontend/editor/components/dynamic-form/dynamic-input.vue
Original file line number Diff line number Diff line change
@@ -1,100 +1,16 @@
<template>
<div>
<uikit-text-input
:label="label"
:name="setting.id"
:isFocused="isFocused"
@blur="$emit('blur')"
v-model="inputValue"
v-if="
setting.type == 'text' &&
!options.html &&
parseInt(options.nbRows || 1) < 2
"
/>
<uikit-textarea-input
:label="label"
:name="setting.id"
:isFocused="isFocused"
:rows="options.nbRows"
@blur="$emit('blur')"
v-model="inputValue"
v-if="
setting.type == 'text' && !options.html && parseInt(options.nbRows) > 1
"
/>
<uikit-rich-text-input
:label="label"
:name="setting.id"
:isFocused="isFocused"
:lineBreak="options.lineBreak"
:rows="options.nbRows"
:table="options.htmlTable"
@blur="$emit('blur')"
v-model="inputValue"
v-if="setting.type == 'text' && options.html"
/>
<uikit-image-input
:label="label"
:name="setting.id"
:isFocused="isFocused"
v-model="inputValue"
v-if="setting.type == 'image'"
/>
<uikit-icon-input
:label="label"
:name="setting.id"
:isFocused="isFocused"
v-model="inputValue"
v-if="setting.type == 'icon'"
/>
<uikit-checkbox-input
:label="label"
:name="setting.id"
v-model="inputValue"
v-if="setting.type == 'checkbox'"
/>
<uikit-link-input
:label="label"
:name="setting.id"
:isFocused="isFocused"
:withText="options.withText"
v-model="inputValue"
v-if="setting.type == 'link'"
/>
<uikit-color-input
:label="label"
:name="setting.id"
v-model="inputValue"
:presets="options.presets"
v-if="setting.type == 'color'"
/>
<uikit-simple-select
:label="label"
:name="setting.id"
v-model="inputValue"
:selectOptions="options.selectOptions"
v-if="setting.type == 'select'"
/>
<uikit-collection-item-input
:label="label"
:name="setting.id"
v-model="inputValue"
:collection-id="options.collectionId"
v-if="setting.type == 'collection_item'"
/>

<uikit-divider
:text="label"
:withHint="options.withHint"
v-if="setting.type == 'divider'"
/>

<uikit-hint :text="label" v-if="setting.type == 'hint'" />
</div>
<component
:is="inputComponent"
v-bind="{...inputProps}"
v-model="inputValue"
@blur="$emit('blur')"
v-if="inputComponent"
/>
</template>

<script>
import { getInput } from '@/misc/dynamic-inputs'
export default {
name: 'DynamicInput',
props: {
Expand All @@ -104,6 +20,20 @@ export default {
i18nScope: { type: String, required: false },
},
computed: {
inputComponent() {
return getInput(this.setting.type)?.component
},
inputProps() {
const input = getInput(this.setting.type)
if (!input) return {}
return input.transformProps({
label: this.label,
name: this.name,
isFocused: this.isFocused
}, this.options)
},
label() {
// i18n key examples:
// - themes.simple.style.settings.main_color
Expand All @@ -114,9 +44,12 @@ export default {
: null
return translation || this.setting.label
},
name() {
return this.setting.id
},
options() {
return this.setting.options
},
},
value() {
const content = this.content.find(
(sectionContent) => sectionContent.id === this.setting.id,
Expand Down
4 changes: 1 addition & 3 deletions app/frontend/editor/components/kit/dropdown.vue
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,6 @@
</template>

<script>
import { ModalBus } from '@/plugins/event-bus'
export default {
name: 'UIKitDropdown',
props: {
Expand All @@ -39,7 +37,7 @@ export default {
}
},
mounted() {
ModalBus.$on('open', () => this.close())
this.modalBus.$on('open', () => this.close())
document.addEventListener('keydown', this.onEscape)
this.$once('hook:beforeDestroy', () => {
document.removeEventListener('keydown', this.onEscape)
Expand Down
2 changes: 2 additions & 0 deletions app/frontend/editor/components/kit/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import SelectInput from './select-input.vue'
import TextAreaInput from './textarea-input.vue'
import TextInput from './text-input.vue'
import RichTextInput from './rich-text-input.vue'
import PolymorphicTextInput from './polymorphic-text-input.vue'
import CheckboxInput from './checkbox-input.vue'
import SearchInput from './search-input.vue'
import Pagination from './pagination/index.vue'
Expand Down Expand Up @@ -42,6 +43,7 @@ Vue.component('uikit-select-input', SelectInput)
Vue.component('uikit-textarea-input', TextAreaInput)
Vue.component('uikit-text-input', TextInput)
Vue.component('uikit-rich-text-input', RichTextInput)
Vue.component('uikit-polymorphic-text-input', PolymorphicTextInput)
Vue.component('uikit-checkbox-input', CheckboxInput)
Vue.component('uikit-search-input', SearchInput)
Vue.component('uikit-pagination', Pagination)
Expand Down
6 changes: 2 additions & 4 deletions app/frontend/editor/components/kit/modal-root.vue
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,6 @@
</template>

<script>
import { ModalBus } from '@/plugins/event-bus'
export default {
name: 'UIKitModalRoot',
data() {
Expand All @@ -28,7 +26,7 @@ export default {
}
},
created() {
ModalBus.$on(
this.modalBus.$on(
'open',
({
component,
Expand All @@ -47,7 +45,7 @@ export default {
},
)
ModalBus.$on('close', () => this.handleClose())
this.modalBus.$on('close', () => this.handleClose())
document.addEventListener('keyup', this.handleKeyup)
},
beforeDestroy() {
Expand Down
64 changes: 64 additions & 0 deletions app/frontend/editor/components/kit/polymorphic-text-input.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
<template>
<div>
<uikit-text-input
:label="label"
:name="name"
:isFocused="isFocused"
@blur="$emit('blur')"
v-model="inputValue"
v-if="isText"
/>
<uikit-textarea-input
:label="label"
:name="name"
:isFocused="isFocused"
:rows="options.nbRows"
@blur="$emit('blur')"
v-model="inputValue"
v-else-if="isTextArea"
/>
<uikit-rich-text-input
:label="label"
:name="name"
:isFocused="isFocused"
:lineBreak="options.lineBreak"
:rows="options.nbRows"
:table="options.htmlTable"
@blur="$emit('blur')"
v-model="inputValue"
v-else-if="isRichText"
/>
</div>
</template>

<script>
export default {
name: 'UIKitPolymorphicTextInput',
props: {
label: { type: String, default: 'Label' },
name: { type: String, default: 'text' },
value: { type: String },
isFocused: { type: Boolean, default: false },
options: { type: Object, default: {} }
},
computed: {
isText() {
return !this.options.html && parseInt(this.options.nbRows || 1) < 2
},
isTextArea() {
return !this.options.html && parseInt(this.options.nbRows) > 1
},
isRichText() {
return this.options.html
},
inputValue: {
get() {
return this.value
},
set(value) {
this.$emit('input', value)
},
},
},
}
</script>
23 changes: 23 additions & 0 deletions app/frontend/editor/initializers/dynamic-inputs.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import { registerInput, getInputs } from '@/misc/dynamic-inputs'

import TextInput from '@/components/kit/polymorphic-text-input.vue'
import ImageInput from '@/components/kit/image-input.vue'
import LinkInput from '@/components/kit/link-input.vue'
import SimpleSelect from '@/components/kit/simple-select.vue'
import CollectionItemInput from '@/components/kit/collection-item-input.vue'
import CheckboxInput from '@/components/kit/checkbox-input.vue'
import ColorInput from '@/components/kit/color-input.vue'
import IconInput from '@/components/kit/icon-input.vue'
import Divider from '@/components/kit/divider.vue'
import Hint from '@/components/kit/hint.vue'

registerInput('text', TextInput, (props, options) => ({ ...props, options }))
registerInput('image', ImageInput)
registerInput('link', LinkInput, (props, options) => ({ ...props, withText: options.withText }))
registerInput('select', SimpleSelect, (props, options) => ({ ...props, selectOptions: options.selectOptions }))
registerInput('collection_item', CollectionItemInput, (props, options) => ({ ...props, collectionId: options.collectionId }))
registerInput('checkbox', CheckboxInput)
registerInput('icon', IconInput)
registerInput('color', ColorInput, (props, options) => ({ ...props, presets: options.presets }))
registerInput('divider', Divider, (props, options) => ({ text: props.label, withHint: options.withHint }))
registerInput('hint', Hint, (props, options) => ({ text: props.label }))
Loading

0 comments on commit 377f274

Please sign in to comment.