@koumoul/vjsf 2.23.2 → 3.0.0-alpha.1

package/lib/mixins/FileProperty.js

@@ -1,81 +0,0 @@
-const getFileDataUrl = (file) => {
-  return new Promise(resolve => {
-    const reader = new FileReader()
-    reader.onload = () => resolve(reader.result)
-    reader.readAsDataURL(file)
-  })
-}
-
-const getFileResult = async (file, schema, filesAsDataUrl) => {
-  let data = file
-  if (schema.type === 'string' || (schema.properties && schema.properties.data && schema.properties.data.type === 'string')) {
-    const dataUrl = await getFileDataUrl(file)
-    data = filesAsDataUrl ? dataUrl : dataUrl.split(';base64,')[1]
-  }
-  if (schema.type === 'string') return data
-  return {
-    name: file.name,
-    lastModified: new Date(file.lastModified).toISOString(),
-    size: file.size,
-    type: file.type,
-    data
-  }
-}
-
-export default {
-  computed: {
-    isFileProp() {
-      if (!this.fullSchema) return
-      if (this.fullSchema.type === 'string' &&
-        (this.fullSchema.contentMediaType || this.display === 'file')) return true
-      if (this.fullSchema.type === 'array' && this.fullSchema.items && this.fullSchema.items.type === 'string' &&
-        (this.fullSchema.items.contentMediaType || this.display === 'file' || this.fullSchema.items['x-display'] === 'file')) return true
-      if (this.fullSchema.type === 'object' &&
-        (this.fullSchema.contentMediaType || this.display === 'file')) return true
-      if (this.fullSchema.type === 'array' && this.fullSchema.items && this.fullSchema.items.type === 'object' &&
-        (this.fullSchema.items.contentMediaType || this.display === 'file' || this.fullSchema.items['x-display'] === 'file')) return true
-      return false
-    }
-  },
-  watch: {
-    isFileProp() {
-      if (this.isFileProp && !this.fullSchema.writeOnly) {
-        console.warn('File property should always be used with writeOnly attribute. Files are uploaded but not read in existing data.')
-      }
-    }
-  },
-  methods: {
-    renderFileProp(h) {
-      if (!this.isFileProp) return
-      const props = { ...this.commonFieldProps, ...this.fullOptions.fileInputProps }
-      delete props.value
-      if (this.value && this.value.name) {
-        props.placeholder = this.value.name
-        props.persistentPlaceholder = true
-      }
-      const attrs = {}
-      if (this.fullSchema.contentMediaType) attrs.accept = this.fullSchema.contentMediaType
-      if (this.fullSchema.items && this.fullSchema.items.contentMediaType) attrs.accept = this.fullSchema.items.contentMediaType
-      if (this.fullSchema.type === 'array') attrs.multiple = true
-      const children = [...this.renderPropSlots(h)]
-      const on = {
-        change: async files => {
-          if (this.fullSchema.type === 'array') {
-            const contents = await Promise.all(files.map(file => getFileResult(file, this.fullSchema.items, this.fullOptions.filesAsDataUrl)))
-            this.input(contents)
-            this.change()
-          } else {
-            const content = await getFileResult(files, this.resolvedSchema, this.fullOptions.filesAsDataUrl)
-            this.input(content)
-            this.change()
-          }
-        }
-      }
-      if (this.htmlDescription) {
-        children.push(this.renderTooltip(h, 'append-outer'))
-      }
-
-      return [h('v-file-input', { props, attrs, on, scopedSlots: this.$scopedSlots }, children)]
-    }
-  }
-}

package/lib/mixins/MarkdownEditor.js

@@ -1,183 +0,0 @@
-export default {
-  computed: {
-    isMarkdownProp() {
-      if (!this.fullSchema) return
-      return this.fullSchema['x-display'] === 'markdown'
-    }
-  },
-  methods: {
-    renderMarkdownProp(h) {
-      if (!this.isMarkdownProp) return
-
-      const children = [this.renderTooltip(h, 'append')]
-
-      if (this.disabled) {
-        children.push(h('v-card', { props: { flat: true }, class: 'px-0' }, [
-          h('v-card-text', { domProps: { innerHTML: this.fullOptions.markdown(this.value) }, class: 'px-0 py-1' })
-        ]))
-      } else {
-        children.push(h('v-card', { props: { outlined: true } }, [
-          h('textarea', { attrs: { id: `${this.fullOptions.idPrefix}${this.dashKey}--easymde` } })
-        ]))
-        this.$nextTick(() => this.initEasyMDE())
-      }
-
-      return [h('v-input', {
-        props: {
-          value: this.value,
-          name: this.fullKey,
-          label: this.label,
-          required: this.required,
-          rules: this.rules,
-          disabled: this.disabled,
-          ...this.fullOptions.fieldProps
-        },
-        class: 'vjsf-markdown-input'
-      }, children)]
-    },
-    initEasyMDE() {
-      if (this.easymde) return
-      if (!global.EasyMDE) {
-        console.error('VJSF requires EasyMDE to be available to handle the markdown format.')
-        return
-      }
-      const EasyMDE = global.EasyMDE
-
-      const config = {
-        element: this.$el.querySelector('textarea'),
-        initialValue: this.value,
-        renderingConfig: {},
-        status: false,
-        autoDownloadFontAwesome: false,
-        spellChecker: false,
-        minHeight: '300px',
-        insertTexts: {
-          link: [this.fullOptions.messages.mdeLink1, this.fullOptions.messages.mdeLink2],
-          image: [this.fullOptions.messages.mdeImg1, this.fullOptions.messages.mdeImg2],
-          table: [this.fullOptions.messages.mdeTable1, this.fullOptions.messages.mdeTable2],
-          horizontalRule: ['', '\n\n-----\n\n']
-        },
-        // cf https://github.com/Ionaru/easy-markdown-editor/blob/master/src/js/easymde.js#L1380
-        toolbar: [{
-          name: 'bold',
-          action: EasyMDE.toggleBold,
-          className: 'mdi mdi-format-bold',
-          title: this.fullOptions.messages.bold
-        }, {
-          name: 'italic',
-          action: EasyMDE.toggleItalic,
-          className: 'mdi mdi-format-italic',
-          title: this.fullOptions.messages.italic
-        }, {
-          name: 'heading',
-          action: EasyMDE.toggleHeadingSmaller,
-          className: 'mdi mdi-format-title',
-          title: this.fullOptions.messages.heading
-        }, /* {
-          name: 'heading-1',
-          action: EasyMDE.toggleHeading1,
-          className: 'mdi mdi-format-title',
-          title: 'Titre 1'
-        }, {
-          name: 'heading-2',
-          action: EasyMDE.toggleHeading2,
-          className: 'mdi mdi-format-title',
-          title: 'Titre 2'
-        }, {
-          name: 'heading-3',
-          action: EasyMDE.toggleHeading3,
-          className: 'mdi mdi-format-title',
-          title: 'Titre 3'
-        }, */
-        '|',
-        {
-          name: 'quote',
-          action: EasyMDE.toggleBlockquote,
-          className: 'mdi mdi-format-quote-open',
-          title: this.fullOptions.messages.quote
-        },
-        {
-          name: 'unordered-list',
-          action: EasyMDE.toggleUnorderedList,
-          className: 'mdi mdi-format-list-bulleted',
-          title: this.fullOptions.messages.unorderedList
-        },
-        {
-          name: 'ordered-list',
-          action: EasyMDE.toggleOrderedList,
-          className: 'mdi mdi-format-list-numbered',
-          title: this.fullOptions.messages.orderedList
-        },
-        '|',
-        {
-          name: 'link',
-          action: EasyMDE.drawLink,
-          className: 'mdi mdi-link',
-          title: this.fullOptions.messages.createLink
-        },
-        {
-          name: 'image',
-          action: EasyMDE.drawImage,
-          className: 'mdi mdi-image',
-          title: this.fullOptions.messages.insertImage
-        },
-        {
-          name: 'table',
-          action: EasyMDE.drawTable,
-          className: 'mdi mdi-table',
-          title: this.fullOptions.messages.createTable
-        },
-        '|',
-        {
-          name: 'preview',
-          action: EasyMDE.togglePreview,
-          className: 'mdi mdi-eye accent--text',
-          title: this.fullOptions.messages.preview,
-          noDisable: true
-        },
-        '|',
-        {
-          name: 'undo',
-          action: EasyMDE.undo,
-          className: 'mdi mdi-undo',
-          title: this.fullOptions.messages.undo,
-          noDisable: true
-        },
-        {
-          name: 'redo',
-          action: EasyMDE.redo,
-          className: 'mdi mdi-redo',
-          title: this.fullOptions.messages.redo,
-          noDisable: true
-        },
-        '|',
-        {
-          name: 'guide',
-          action: 'https://simplemde.com/markdown-guide',
-          className: 'mdi mdi-help-circle success--text',
-          title: this.fullOptions.messages.mdeGuide,
-          noDisable: true
-        }
-        ],
-        ...this.fullOptions.easyMDEOptions
-      }
-      this.easymde = new EasyMDE(config)
-
-      let changed = false
-      this.easymde.codemirror.on('change', () => {
-        changed = true
-        this.input(this.easymde.value())
-      })
-      this.easymde.codemirror.on('blur', () => {
-        // timeout to prevent triggering save when clicking on a menu button
-        this.blurTimeout = setTimeout(() => {
-          if (changed) this.change()
-          changed = false
-        }, 500)
-      })
-      this.easymde.codemirror.on('focus', () => {
-        clearTimeout(this.blurTimeout)
-      })
-    }
-  }
-}

package/lib/mixins/ObjectContainer.js

@@ -1,351 +0,0 @@
-import copy from 'fast-copy'
-
-export default {
-  data() {
-    return {
-      currentOneOf: null,
-      currentTab: null,
-      showCurrentOneOf: true,
-      subModels: {}, // a container for objects from root subSchemass and allOfs
-      currentStep: 1,
-      steps: []
-    }
-  },
-  computed: {
-    isObjectContainer() {
-      if (!this.fullSchema) return
-      if (this.fullSchema.type !== 'object' && !Array.isArray(this.fullSchema.items)) return false
-      if (this.isSelectProp) return false
-      if (this.isFileProp) return false
-      return true
-    },
-    subSchemas() {
-      if (!this.fullSchema) return
-      return this.fullSchema.oneOf || this.fullSchema.anyOf
-    },
-    subSchemasConstProp() {
-      if (!this.subSchemas) return
-      const props = this.subSchemas[0].properties
-      const key = Object.keys(props).find(p => !!props[p].const)
-      if (!key) return
-      return { ...props[key], key, htmlDescription: this.fullOptions.memMarkdown(props[key].description) }
-    },
-    subSchemasRequired() {
-      if (!this.subSchemas || !this.subSchemasConstProp) return false
-      if (this.fullSchema.oneOf) return true
-      if (this.fullSchema.anyOf && this.fullSchema.required && this.fullSchema.required.find(r => r === this.oneOfConstProp.key)) return true
-    },
-    subSchemasRules() {
-      if (!this.fullSchema) return
-      const rules = []
-      if (this.subSchemasRequired) rules.push((val) => (val !== undefined && val !== null && val !== '') || this.fullOptions.messages.required)
-      return rules
-    }
-  },
-  watch: {
-    currentOneOf(newVal, oldVal) {
-      // use this boolean to force removing then re-creating the object property
-      // based on the currentOneOf sub schema. If we don't the component is reused and reactivity creates some difficult bugs.
-      this.showCurrentOneOf = false
-      this.$nextTick(() => {
-        this.showCurrentOneOf = true
-        if (!this.currentOneOf) this.$set(this.subModels, 'currentOneOf', {})
-        else this.input(this.fixProperties(this.value), false, false)
-        if (this.triggerChangeCurrentOneOf) {
-          this.$nextTick(() => {
-            this.triggerChangeCurrentOneOf = false
-            this.change()
-          })
-        }
-      })
-    },
-    subModels: {
-      handler() {
-        this.input(this.fixProperties(this.value), false, false)
-      },
-      deep: true
-    }
-  },
-  methods: {
-    isSection(prop, insideAllOf) {
-      if (!prop) return false
-      if (!prop.title) return false
-      if (prop['x-fromUrl'] || prop['x-fromData'] || prop['contentMediaType'] || prop['x-display'] === 'file') return false
-      if (prop.allOf) return true
-      if (insideAllOf && (prop.anyOf || prop.oneOf)) return true
-      if (prop.properties || Array.isArray(prop.items)) return true
-      return false
-    },
-    initObjectContainer(model) {
-      if (this.fullSchema.type !== 'object') return
-
-      // Init subModels for allOf subschemas
-      if (this.fullSchema.allOf) {
-        this.fullSchema.allOf.forEach((allOf, i) => {
-          this.$set(this.subModels, 'allOf-' + i, copy(model))
-        })
-      }
-
-      // Case of a sub type selection based on a subSchemas
-      this.currentOneOf = null
-      if (this.subSchemas && !this.currentOneOf && this.subSchemasConstProp) {
-        if (model && model[this.subSchemasConstProp.key]) {
-          this.currentOneOf = this.subSchemas.find(item => item.properties[this.subSchemasConstProp.key].const === model[this.subSchemasConstProp.key])
-        } else if (this.fullSchema.default) {
-          this.currentOneOf = this.subSchemas.find(item => item.properties[this.subSchemasConstProp.key].const === this.fullSchema.default[this.subSchemasConstProp.key])
-        }
-      }
-
-      // Init subModel for current subSchemas
-      if (this.currentOneOf) {
-        this.$set(this.subModels, 'currentOneOf', copy(model))
-      } else {
-        this.$set(this.subModels, 'currentOneOf', {})
-      }
-    },
-    renderStepperStep(h, schema, subModelKey, childProp, step, isLast) {
-      if (!childProp) return
-      const modelKey = subModelKey || schema.key
-      const hasError = this.dedupChildrenWithValidatedErrors.includes(modelKey)
-      const props = {
-        step,
-        editable: step < this.currentStep,
-        complete: step < this.currentStep,
-        rules: [() => !hasError]
-      }
-      return [h('v-stepper-step', { props }, [schema.title]), isLast ? null : h('v-divider')]
-    },
-    renderSection(h, schema, subModelKey, childProp, step, isLast) {
-      if (!childProp) return
-      const modelKey = subModelKey || schema.key
-      const key = 'section-' + modelKey
-
-      if (schema['x-display'] === 'hidden' || (schema.readOnly && this.fullOptions.hideReadOnly)) {
-        return [childProp]
-      }
-      if (this.display === 'expansion-panels') {
-        return [h('v-expansion-panel', { key }, [
-          h('v-expansion-panel-header', { class: { 'error--text': this.dedupChildrenWithValidatedErrors.includes(modelKey) } }, [schema.title]),
-          h('v-expansion-panel-content', { props: { eager: true } }, [childProp])
-        ])]
-      } else if (this.display === 'tabs') {
-        return [
-          h('v-tab', { key, props: { href: `#tab-${this.fullOptions.idPrefix}${this.dashKey}-${modelKey}` } }, [
-            h('span', { class: { 'error--text': this.dedupChildrenWithValidatedErrors.includes(modelKey) } }, [schema.title])
-          ]),
-          h('v-tab-item',
-            { key, props: { value: `tab-${this.fullOptions.idPrefix}${this.dashKey}-${modelKey}`, eager: true } },
-            [h('v-card', { props: { tile: true, flat: true } }, [h('v-card-text', [childProp])])]
-          )
-        ]
-      } else if (this.display === 'stepper' || this.display === 'vertical-stepper') {
-        return [
-          h('v-stepper-content',
-            { key, props: { step, eager: true } },
-            [h('v-card', { props: { tile: true, flat: true } }, [
-              h('v-card-text', { class: { 'pa-0': true } }, [childProp]),
-              isLast ? null : h('v-card-actions', { class: { 'px-0': true } }, [h('v-btn', { props: { color: 'primary' },
-                on: { click: () => {
-                  if (childProp.componentInstance.validate(true)) {
-                    this.currentStep += 1
-                  }
-                } } }, this.fullOptions.messages.stepperContinue)])
-            ])]
-          )
-        ]
-      }
-    },
-    renderChildProp(h, schema, subModelKey, sectionDepth, forceRequired, showSectionTitle) {
-      this.objectContainerChildrenCount += 1
-      let wrapper
-      if (subModelKey) wrapper = this.subModels
-      else if (Array.isArray(this.value)) wrapper = [...this.value]
-      else wrapper = { ...this.value }
-
-      const modelKey = subModelKey || schema.key
-
-      // Manage default values
-      let value = wrapper[modelKey]
-      value = this.fixValueType(value, schema)
-      if (value === undefined) {
-        value = this.defaultValue(schema)
-        if (schema.default !== undefined) value = copy(schema.default)
-        if (value !== undefined && value !== null) {
-          this.$set(wrapper, modelKey, value)
-          if (!subModelKey) this.input(wrapper, false, false)
-        }
-      }
-      return h('v-jsf', {
-        props: {
-          schema: { readOnly: this.fullSchema.readOnly, ...schema },
-          value,
-          modelRoot: this.modelRoot || this.value,
-          modelKey,
-          parentKey: `${this.fullKey}.`,
-          required: forceRequired || !!(this.fullSchema.required && this.fullSchema.required.includes(schema.key)),
-          options: { ...this.fullOptions, autofocus: this.fullOptions.autofocus && this.objectContainerChildrenCount === 1 },
-          optionsRoot: this.initialOptions,
-          sectionDepth,
-          sharedData: this.sharedData,
-          showSectionTitle
-        },
-        class: this.fullOptions.childrenClass,
-        scopedSlots: this.childScopedSlots(modelKey),
-        key: modelKey,
-        on: {
-          error: e => this.$emit('error', e),
-          input: v => {
-            if (v === undefined) {
-              // set empty value instead of deleting key in the special case of the parts
-              // of a tuple (except the last part), otherwise we move last parts of the array to the beginning of the array
-              if (Array.isArray(wrapper) && parseInt(modelKey) < (wrapper.length - 1)) {
-                this.$set(wrapper, modelKey, v)
-              } else {
-                this.$delete(wrapper, modelKey)
-              }
-            } else {
-              this.$set(wrapper, modelKey, v)
-            }
-            if (!subModelKey) this.input(wrapper, false, false)
-          },
-          change: v => this.change(false)
-        }
-      }, this.childSlots(h, schema.key))
-    },
-    renderObjectContainer(h) {
-      if (!this.isObjectContainer) return
-      if ([undefined, null].includes(this.value)) return []
-
-      const flatChildren = []
-      this.objectContainerChildrenCount = 0
-      const sections = []
-      if (this.fullSchema.properties) {
-        this.fullSchema.properties.forEach((schema) => {
-          if (this.isSection(schema)) {
-            sections.push({ schema, subModelKey: null, forceRequired: false })
-          } else {
-            flatChildren.push(this.renderChildProp(h, schema, null, this.sectionDepth, false, false))
-          }
-        })
-      }
-      if (Array.isArray(this.fullSchema.items)) {
-        this.fullSchema.items.forEach((schema, i) => {
-          const forceRequired = this.value.length > i || (this.fullSchema.minItems && this.fullSchema.minItems > i)
-          if (this.isSection(schema)) {
-            sections.push({ schema, subModelKey: null, forceRequired })
-          } else {
-            flatChildren.push(this.renderChildProp(h, schema, null, this.sectionDepth, forceRequired, false))
-          }
-        })
-      }
-      if (this.fullSchema.allOf) {
-        this.fullSchema.allOf.forEach((allOf, i) => {
-          const schema = { ...allOf, type: 'object', key: '' + i }
-          if (this.isSection(allOf, true)) {
-            sections.push({ schema, subModelKey: 'allOf-' + i, forceRequired: false })
-          } else {
-            flatChildren.push(this.renderChildProp(h, schema, 'allOf-' + i, this.sectionDepth, false, false))
-          }
-        })
-      }
-
-      let sectionsChildren = []
-      let stepperSteps = []
-      sections.forEach((section, i) => {
-        const isSimpleSection = !['expansion-panels', 'tabs', 'stepper', 'vertical-stepper'].includes(this.display)
-        const childProp = this.renderChildProp(h, section.schema, section.subModelKey, this.sectionDepth + 1, section.forceRequired, isSimpleSection)
-        if (isSimpleSection) sectionsChildren.push(childProp)
-        else sectionsChildren = sectionsChildren.concat(this.renderSection(h, section.schema, section.subModelKey, childProp, i + 1, i === sections.length - 1))
-        if (this.display === 'stepper' || this.display === 'vertical-stepper') stepperSteps = stepperSteps.concat(this.renderStepperStep(h, section.schema, section.subModelKey, childProp, i + 1, i === sections.length - 1))
-      })
-
-      if (this.display === 'expansion-panels' && sectionsChildren.length) {
-        const props = { ...this.fullOptions.expansionPanelsProps, ...this.fullSchema['x-props'] }
-        sectionsChildren = [h('v-expansion-panels', { props }, sectionsChildren)]
-      }
-      if (this.display === 'tabs' && sectionsChildren.length) {
-        const props = { ...this.fullOptions.tabsProps, ...this.fullSchema['x-props'] }
-        if (this.currentTab && this.dedupChildrenWithValidatedErrors.includes(this.currentTab)) {
-          props.sliderColor = 'error'
-        }
-        sectionsChildren = [h('v-tabs', { props, on: { change: value => { this.currentTab = value.split('-').pop() } } }, sectionsChildren)]
-      }
-      if (this.display === 'stepper' && sectionsChildren.length) {
-        const props = { ...this.fullOptions.stepperProps, ...this.fullSchema['x-props'], value: this.currentStep }
-        sectionsChildren = [h('v-stepper', { props, style: 'width: 100%;', on: { change: value => { this.currentStep = value } } }, [
-          h('v-stepper-header', {}, stepperSteps),
-          h('v-stepper-items', {}, sectionsChildren)
-        ])]
-      }
-      if (this.display === 'vertical-stepper' && sectionsChildren.length) {
-        const props = { ...this.fullOptions.verticalStepperProps, ...this.fullSchema['x-props'], vertical: true, value: this.currentStep }
-        const stepperChildren = []
-        for (let i = 0; i < sectionsChildren.length; i++) {
-          stepperChildren.push(stepperSteps[i * 2])
-          stepperChildren.push(sectionsChildren[i])
-        }
-        sectionsChildren = [h('v-stepper', { props, style: 'width: 100%;', on: { change: value => { this.currentStep = value } } }, stepperChildren)]
-      }
-
-      if (this.subSchemas && this.subSchemas.length) {
-        const props = {
-          ...this.commonFieldProps,
-          ...((this.subSchemasConstProp && this.subSchemasConstProp['x-props']) || {}),
-          disabled: this.disabled || (this.subSchemasConstProp && this.subSchemasConstProp.readOnly),
-          value: this.currentOneOf,
-          label: (this.subSchemasConstProp && this.subSchemasConstProp.title) || this.fullSchema.title,
-          items: this.subSchemas
-            .filter(item => !item['x-if'] || !!this.getFromExpr(item['x-if']))
-            .filter(item => item.properties && item.properties[this.subSchemasConstProp.key]),
-          required: this.subSchemasRequired,
-          clearable: !this.subSchemasRequired,
-          itemValue: item => item.properties[this.subSchemasConstProp.key].const,
-          itemText: item => item.title || item.properties[this.subSchemasConstProp.key].const,
-          rules: this.subSchemasRules,
-          returnObject: true
-        }
-        const on = {
-          input: value => {
-            this.currentOneOf = value
-            this.triggerChangeCurrentOneOf = true
-          }
-        }
-        flatChildren.push(h('v-select', { props, on, style: (this.subSchemasConstProp && this.subSchemasConstProp['x-style']) || '' }, [this.renderTooltip(h, 'append-outer')]))
-        if (this.currentOneOf && this.showCurrentOneOf) {
-          flatChildren.push(this.renderChildProp(h, { ...this.currentOneOf, type: 'object', title: null }, 'currentOneOf', this.sectionDepth + 1))
-        }
-      }
-      return [h('v-row', { class: `ma-0 ${this.fullOptions.objectContainerClass}` }, [
-        (this.showSectionTitle && h('v-col', { props: { cols: 12 }, class: 'pa-0' }, [h('span', {
-          class: 'py-2 ' + (this.fullOptions.sectionsTitlesClasses[this.sectionDepth - 1] || this.fullOptions.sectionsTitlesClasses[this.fullOptions.sectionsTitlesClasses.length - 1])
-        }, [`${this.fullSchema.title}\xa0`])])),
-        // display a local error only we don't already have an error displayed in the children
-        (this.localRuleError && !this.dedupChildrenWithValidatedErrors.length) && h('v-col', { props: { cols: 12 }, class: { 'px-0': true, 'error--text': true } }, this.localRuleError),
-        // display the description as block of text on top of section
-        this.fullSchema.description && !this.subSchemasConstProp && h('v-col', { props: { cols: 12 }, class: { 'pa-0': true }, domProps: { innerHTML: this.htmlDescription } })]
-        .concat(flatChildren).concat(sectionsChildren))
-      ]
-    },
-    // pass an  extract of $slots from current container to a child by matching then removing the prefix
-    childSlots(h, childKey) {
-      return Object.keys(this.$slots)
-        .filter(slot => slot.startsWith(`${childKey}.`) || slot.startsWith(`${childKey}-`))
-        .map(slot => {
-          const childSlot = slot.startsWith(`${childKey}.`) ? slot.replace(`${childKey}.`, '') : slot.replace(`${childKey}-`, '')
-          return h('template', { slot: childSlot }, this.$slots[slot])
-        })
-    },
-    childScopedSlots(childKey) {
-      return Object.keys(this.$scopedSlots)
-        .filter(slot => slot.startsWith('custom-') || slot.startsWith(`${childKey}.`) || slot.startsWith(`${childKey}-`) || slot === childKey)
-        .reduce((a, slot) => {
-          let childSlot = 'default'
-          if (slot.startsWith(`${childKey}.`)) childSlot = slot.replace(`${childKey}.`, '')
-          if (slot.startsWith(`${childKey}-`)) childSlot = slot.replace(`${childKey}-`, '')
-          if (slot.startsWith(`custom-`)) childSlot = slot
-          a[childSlot] = this.$scopedSlots[slot]
-          return a
-        }, {})
-    }
-  }
-}