@gitlab/duo-ui 0.1.0

package/src/vendor/bootstrap-vue/src/components/form-textarea/form-textarea.js

@@ -0,0 +1,226 @@
+import { extend } from '../../vue'
+import { NAME_FORM_TEXTAREA } from '../../constants/components'
+import { PROP_TYPE_BOOLEAN, PROP_TYPE_NUMBER_STRING, PROP_TYPE_STRING } from '../../constants/props'
+import { getCS, getStyle, isVisible, requestAF, setStyle } from '../../utils/dom'
+import { isNull } from '../../utils/inspect'
+import { mathCeil, mathMax, mathMin } from '../../utils/math'
+import { toInteger, toFloat } from '../../utils/number'
+import { sortKeys } from '../../utils/object'
+import { makeProp, makePropsConfigurable } from '../../utils/props'
+import { formControlMixin, props as formControlProps } from '../../mixins/form-control'
+import { formSelectionMixin } from '../../mixins/form-selection'
+import { formSizeMixin, props as formSizeProps } from '../../mixins/form-size'
+import { formStateMixin, props as formStateProps } from '../../mixins/form-state'
+import { formTextMixin, props as formTextProps } from '../../mixins/form-text'
+import { formValidityMixin } from '../../mixins/form-validity'
+import { idMixin, props as idProps } from '../../mixins/id'
+import { listenOnRootMixin } from '../../mixins/listen-on-root'
+import { listenersMixin } from '../../mixins/listeners'
+import { VBVisible } from '../../directives/visible/visible'
+
+// --- Props ---
+
+export const props = makePropsConfigurable(
+  sortKeys({
+    ...idProps,
+    ...formControlProps,
+    ...formSizeProps,
+    ...formStateProps,
+    ...formTextProps,
+    maxRows: makeProp(PROP_TYPE_NUMBER_STRING),
+    // When in auto resize mode, disable shrinking to content height
+    noAutoShrink: makeProp(PROP_TYPE_BOOLEAN, false),
+    // Disable the resize handle of textarea
+    noResize: makeProp(PROP_TYPE_BOOLEAN, false),
+    rows: makeProp(PROP_TYPE_NUMBER_STRING, 2),
+    // 'soft', 'hard' or 'off'
+    // Browser default is 'soft'
+    wrap: makeProp(PROP_TYPE_STRING, 'soft')
+  }),
+  NAME_FORM_TEXTAREA
+)
+
+// --- Main component ---
+
+// @vue/component
+export const BFormTextarea = /*#__PURE__*/ extend({
+  name: NAME_FORM_TEXTAREA,
+  directives: {
+    'b-visible': VBVisible
+  },
+  // Mixin order is important!
+  mixins: [
+    listenersMixin,
+    idMixin,
+    listenOnRootMixin,
+    formControlMixin,
+    formSizeMixin,
+    formStateMixin,
+    formTextMixin,
+    formSelectionMixin,
+    formValidityMixin
+  ],
+  props,
+  data() {
+    return {
+      heightInPx: null
+    }
+  },
+  computed: {
+    type() {
+      return null
+    },
+    computedStyle() {
+      const styles = {
+        // Setting `noResize` to true will disable the ability for the user to
+        // manually resize the textarea. We also disable when in auto height mode
+        resize: !this.computedRows || this.noResize ? 'none' : null
+      }
+      if (!this.computedRows) {
+        // Conditionally set the computed CSS height when auto rows/height is enabled
+        // We avoid setting the style to `null`, which can override user manual resize handle
+        styles.height = this.heightInPx
+        // We always add a vertical scrollbar to the textarea when auto-height is
+        // enabled so that the computed height calculation returns a stable value
+        styles.overflowY = 'scroll'
+      }
+      return styles
+    },
+    computedMinRows() {
+      // Ensure rows is at least 2 and positive (2 is the native textarea value)
+      // A value of 1 can cause issues in some browsers, and most browsers
+      // only support 2 as the smallest value
+      return mathMax(toInteger(this.rows, 2), 2)
+    },
+    computedMaxRows() {
+      return mathMax(this.computedMinRows, toInteger(this.maxRows, 0))
+    },
+    computedRows() {
+      // This is used to set the attribute 'rows' on the textarea
+      // If auto-height is enabled, then we return `null` as we use CSS to control height
+      return this.computedMinRows === this.computedMaxRows ? this.computedMinRows : null
+    },
+    computedAttrs() {
+      const { disabled, required } = this
+
+      return {
+        id: this.safeId(),
+        name: this.name || null,
+        form: this.form || null,
+        disabled,
+        placeholder: this.placeholder || null,
+        required,
+        autocomplete: this.autocomplete || null,
+        readonly: this.readonly || this.plaintext,
+        rows: this.computedRows,
+        wrap: this.wrap || null,
+        'aria-required': this.required ? 'true' : null,
+        'aria-invalid': this.computedAriaInvalid
+      }
+    },
+    computedListeners() {
+      return {
+        ...this.bvListeners,
+        input: this.onInput,
+        change: this.onChange,
+        blur: this.onBlur
+      }
+    }
+  },
+  watch: {
+    localValue() {
+      this.setHeight()
+    }
+  },
+  mounted() {
+    this.setHeight()
+  },
+  methods: {
+    // Called by intersection observer directive
+    /* istanbul ignore next */
+    visibleCallback(visible) {
+      if (visible) {
+        // We use a `$nextTick()` here just to make sure any
+        // transitions or portalling have completed
+        this.$nextTick(this.setHeight)
+      }
+    },
+    setHeight() {
+      this.$nextTick(() => {
+        requestAF(() => {
+          this.heightInPx = this.computeHeight()
+        })
+      })
+    },
+    /* istanbul ignore next: can't test getComputedStyle in JSDOM */
+    computeHeight() {
+      if (this.$isServer || !isNull(this.computedRows)) {
+        return null
+      }
+
+      const el = this.$el
+
+      // Element must be visible (not hidden) and in document
+      // Must be checked after above checks
+      if (!isVisible(el)) {
+        return null
+      }
+
+      // Get current computed styles
+      const computedStyle = getCS(el)
+      // Height of one line of text in px
+      const lineHeight = toFloat(computedStyle.lineHeight, 1)
+      // Calculate height of border and padding
+      const border =
+        toFloat(computedStyle.borderTopWidth, 0) + toFloat(computedStyle.borderBottomWidth, 0)
+      const padding = toFloat(computedStyle.paddingTop, 0) + toFloat(computedStyle.paddingBottom, 0)
+      // Calculate offset
+      const offset = border + padding
+      // Minimum height for min rows (which must be 2 rows or greater for cross-browser support)
+      const minHeight = lineHeight * this.computedMinRows + offset
+
+      // Get the current style height (with `px` units)
+      const oldHeight = getStyle(el, 'height') || computedStyle.height
+      // Probe scrollHeight by temporarily changing the height to `auto`
+      setStyle(el, 'height', 'auto')
+      const scrollHeight = el.scrollHeight
+      // Place the original old height back on the element, just in case `computedProp`
+      // returns the same value as before
+      setStyle(el, 'height', oldHeight)
+
+      // Calculate content height in 'rows' (scrollHeight includes padding but not border)
+      const contentRows = mathMax((scrollHeight - padding) / lineHeight, 2)
+      // Calculate number of rows to display (limited within min/max rows)
+      const rows = mathMin(mathMax(contentRows, this.computedMinRows), this.computedMaxRows)
+      // Calculate the required height of the textarea including border and padding (in pixels)
+      const height = mathMax(mathCeil(rows * lineHeight + offset), minHeight)
+
+      // Computed height remains the larger of `oldHeight` and new `height`,
+      // when height is in `sticky` mode (prop `no-auto-shrink` is true)
+      if (this.noAutoShrink && toFloat(oldHeight, 0) > height) {
+        return oldHeight
+      }
+
+      // Return the new computed CSS height in px units
+      return `${height}px`
+    }
+  },
+  render(h) {
+    return h('textarea', {
+      class: this.computedClass,
+      style: this.computedStyle,
+      directives: [
+        {
+          name: 'b-visible',
+          value: this.visibleCallback,
+          // If textarea is within 640px of viewport, consider it visible
+          modifiers: { '640': true }
+        }
+      ],
+      attrs: this.computedAttrs,
+      domProps: { value: this.localValue },
+      on: this.computedListeners,
+      ref: 'input'
+    })
+  }
+})

package/src/vendor/bootstrap-vue/src/components/form-textarea/index.js

@@ -0,0 +1,3 @@
+import { BFormTextarea } from './form-textarea'
+
+export { BFormTextarea }

package/src/vendor/bootstrap-vue/src/components/index.js

@@ -0,0 +1,11 @@
+import { pluginFactory } from '../utils/plugins'
+
+// Component group plugins
+import { ToastPlugin } from './toast'
+
+// Main plugin to install all component group plugins
+export const componentsPlugin = /*#__PURE__*/ pluginFactory({
+  plugins: {
+    ToastPlugin
+  }
+})

package/src/vendor/bootstrap-vue/src/components/index.scss

@@ -0,0 +1,12 @@
+@import "dropdown/index";
+@import "form-checkbox/index";
+@import "form-input/index";
+@import "form-radio/index";
+@import "input-group/index";
+@import "modal/index";
+@import "nav/index";
+@import "navbar/index";
+@import "popover/index";
+@import "table/index";
+@import "toast/index";
+@import "tooltip/index";

package/src/vendor/bootstrap-vue/src/components/input-group/_input-group.scss

@@ -0,0 +1,29 @@
+$bv-input-group-dropdown-patched: false !default;
+
+// Make sure to include these style definitions only once
+@if $bv-input-group-dropdown-patched == false {
+  $bv-input-group-dropdown-patched: true;
+
+  // Workaround for https://github.com/bootstrap-vue/bootstrap-vue/issues/1560
+  // Workaround for https://github.com/bootstrap-vue/bootstrap-vue/issues/2114 */
+  // Based on: `~bootstrap/scss/_input-group.scss`
+  .input-group {
+    > .input-group-prepend > .btn-group,
+    > .input-group-append:not(:last-child) > .btn-group,
+    > .input-group-append:last-child > .btn-group:not(:last-child):not(.dropdown-toggle) {
+      > .btn {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+    }
+
+    > .input-group-append > .btn-group,
+    > .input-group-prepend:not(:first-child) > .btn-group,
+    > .input-group-prepend:first-child > .btn-group:not(:first-child) {
+      > .btn {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+      }
+    }
+  }
+}

package/src/vendor/bootstrap-vue/src/components/input-group/index.js

@@ -0,0 +1,7 @@
+import { BInputGroup } from './input-group'
+import { BInputGroupAddon } from './input-group-addon'
+import { BInputGroupPrepend } from './input-group-prepend'
+import { BInputGroupAppend } from './input-group-append'
+import { BInputGroupText } from './input-group-text'
+
+export { BInputGroup, BInputGroupAddon, BInputGroupPrepend, BInputGroupAppend, BInputGroupText }

package/src/vendor/bootstrap-vue/src/components/input-group/index.scss

@@ -0,0 +1 @@
+@import "input-group";

package/src/vendor/bootstrap-vue/src/components/input-group/input-group-addon.js

@@ -0,0 +1,43 @@
+import { extend, mergeData } from '../../vue'
+import { NAME_INPUT_GROUP_ADDON } from '../../constants/components'
+import { PROP_TYPE_BOOLEAN, PROP_TYPE_STRING } from '../../constants/props'
+import { makeProp, makePropsConfigurable } from '../../utils/props'
+import { BInputGroupText } from './input-group-text'
+
+// --- Props ---
+
+export const props = makePropsConfigurable(
+  {
+    append: makeProp(PROP_TYPE_BOOLEAN, false),
+    id: makeProp(PROP_TYPE_STRING),
+    isText: makeProp(PROP_TYPE_BOOLEAN, false),
+    tag: makeProp(PROP_TYPE_STRING, 'div')
+  },
+  NAME_INPUT_GROUP_ADDON
+)
+
+// --- Main component ---
+
+// @vue/component
+export const BInputGroupAddon = /*#__PURE__*/ extend({
+  name: NAME_INPUT_GROUP_ADDON,
+  functional: true,
+  props,
+  render(h, { props, data, children }) {
+    const { append } = props
+
+    return h(
+      props.tag,
+      mergeData(data, {
+        class: {
+          'input-group-append': append,
+          'input-group-prepend': !append
+        },
+        attrs: {
+          id: props.id
+        }
+      }),
+      props.isText ? [h(BInputGroupText, children)] : children
+    )
+  }
+})

package/src/vendor/bootstrap-vue/src/components/input-group/input-group-append.js

@@ -0,0 +1,31 @@
+import { extend, mergeData } from '../../vue'
+import { NAME_INPUT_GROUP_APPEND } from '../../constants/components'
+import { omit } from '../../utils/object'
+import { makePropsConfigurable } from '../../utils/props'
+import { BInputGroupAddon, props as BInputGroupAddonProps } from './input-group-addon'
+
+// --- Props ---
+
+export const props = makePropsConfigurable(
+  omit(BInputGroupAddonProps, ['append']),
+  NAME_INPUT_GROUP_APPEND
+)
+
+// --- Main component ---
+
+// @vue/component
+export const BInputGroupAppend = /*#__PURE__*/ extend({
+  name: NAME_INPUT_GROUP_APPEND,
+  functional: true,
+  props,
+  render(h, { props, data, children }) {
+    // Pass all our data down to child, and set `append` to `true`
+    return h(
+      BInputGroupAddon,
+      mergeData(data, {
+        props: { ...props, append: true }
+      }),
+      children
+    )
+  }
+})

package/src/vendor/bootstrap-vue/src/components/input-group/input-group-prepend.js

@@ -0,0 +1,31 @@
+import { extend, mergeData } from '../../vue'
+import { NAME_INPUT_GROUP_PREPEND } from '../../constants/components'
+import { omit } from '../../utils/object'
+import { makePropsConfigurable } from '../../utils/props'
+import { BInputGroupAddon, props as BInputGroupAddonProps } from './input-group-addon'
+
+// --- Props ---
+
+export const props = makePropsConfigurable(
+  omit(BInputGroupAddonProps, ['append']),
+  NAME_INPUT_GROUP_PREPEND
+)
+
+// --- Main component ---
+
+// @vue/component
+export const BInputGroupPrepend = /*#__PURE__*/ extend({
+  name: NAME_INPUT_GROUP_PREPEND,
+  functional: true,
+  props,
+  render(h, { props, data, children }) {
+    // Pass all our data down to child, and set `append` to `true`
+    return h(
+      BInputGroupAddon,
+      mergeData(data, {
+        props: { ...props, append: false }
+      }),
+      children
+    )
+  }
+})

package/src/vendor/bootstrap-vue/src/components/input-group/input-group-text.js

@@ -0,0 +1,31 @@
+import { extend, mergeData } from '../../vue'
+import { NAME_INPUT_GROUP_TEXT } from '../../constants/components'
+import { PROP_TYPE_STRING } from '../../constants/props'
+import { makeProp, makePropsConfigurable } from '../../utils/props'
+
+// --- Props ---
+
+export const props = makePropsConfigurable(
+  {
+    tag: makeProp(PROP_TYPE_STRING, 'div')
+  },
+  NAME_INPUT_GROUP_TEXT
+)
+
+// --- Main component ---
+
+// @vue/component
+export const BInputGroupText = /*#__PURE__*/ extend({
+  name: NAME_INPUT_GROUP_TEXT,
+  functional: true,
+  props,
+  render(h, { props, data, children }) {
+    return h(
+      props.tag,
+      mergeData(data, {
+        staticClass: 'input-group-text'
+      }),
+      children
+    )
+  }
+})

package/src/vendor/bootstrap-vue/src/components/input-group/input-group.js

@@ -0,0 +1,73 @@
+import { extend, mergeData } from '../../vue'
+import { NAME_INPUT_GROUP } from '../../constants/components'
+import { PROP_TYPE_STRING } from '../../constants/props'
+import { SLOT_NAME_APPEND, SLOT_NAME_DEFAULT, SLOT_NAME_PREPEND } from '../../constants/slots'
+import { htmlOrText } from '../../utils/html'
+import { hasNormalizedSlot, normalizeSlot } from '../../utils/normalize-slot'
+import { makeProp, makePropsConfigurable } from '../../utils/props'
+import { BInputGroupAppend } from './input-group-append'
+import { BInputGroupPrepend } from './input-group-prepend'
+import { BInputGroupText } from './input-group-text'
+
+// --- Props ---
+
+export const props = makePropsConfigurable(
+  {
+    append: makeProp(PROP_TYPE_STRING),
+    appendHtml: makeProp(PROP_TYPE_STRING),
+    id: makeProp(PROP_TYPE_STRING),
+    prepend: makeProp(PROP_TYPE_STRING),
+    prependHtml: makeProp(PROP_TYPE_STRING),
+    size: makeProp(PROP_TYPE_STRING),
+    tag: makeProp(PROP_TYPE_STRING, 'div')
+  },
+  NAME_INPUT_GROUP
+)
+
+// --- Main component ---
+
+// @vue/component
+export const BInputGroup = /*#__PURE__*/ extend({
+  name: NAME_INPUT_GROUP,
+  functional: true,
+  props,
+  render(h, { props, data, slots, scopedSlots }) {
+    const { prepend, prependHtml, append, appendHtml, size } = props
+    const $scopedSlots = scopedSlots || {}
+    const $slots = slots()
+    const slotScope = {}
+
+    let $prepend = h()
+    const hasPrependSlot = hasNormalizedSlot(SLOT_NAME_PREPEND, $scopedSlots, $slots)
+    if (hasPrependSlot || prepend || prependHtml) {
+      $prepend = h(BInputGroupPrepend, [
+        hasPrependSlot
+          ? normalizeSlot(SLOT_NAME_PREPEND, slotScope, $scopedSlots, $slots)
+          : h(BInputGroupText, { domProps: htmlOrText(prependHtml, prepend) })
+      ])
+    }
+
+    let $append = h()
+    const hasAppendSlot = hasNormalizedSlot(SLOT_NAME_APPEND, $scopedSlots, $slots)
+    if (hasAppendSlot || append || appendHtml) {
+      $append = h(BInputGroupAppend, [
+        hasAppendSlot
+          ? normalizeSlot(SLOT_NAME_APPEND, slotScope, $scopedSlots, $slots)
+          : h(BInputGroupText, { domProps: htmlOrText(appendHtml, append) })
+      ])
+    }
+
+    return h(
+      props.tag,
+      mergeData(data, {
+        staticClass: 'input-group',
+        class: { [`input-group-${size}`]: size },
+        attrs: {
+          id: props.id || null,
+          role: 'group'
+        }
+      }),
+      [$prepend, normalizeSlot(SLOT_NAME_DEFAULT, slotScope, $scopedSlots, $slots), $append]
+    )
+  }
+})

package/src/vendor/bootstrap-vue/src/components/layout/col.js

@@ -0,0 +1,154 @@
+import { mergeData } from '../../vue'
+import { NAME_COL } from '../../constants/components'
+import {
+  PROP_TYPE_BOOLEAN,
+  PROP_TYPE_BOOLEAN_NUMBER_STRING,
+  PROP_TYPE_NUMBER_STRING,
+  PROP_TYPE_STRING
+} from '../../constants/props'
+import { RX_COL_CLASS } from '../../constants/regex'
+import { arrayIncludes } from '../../utils/array'
+import { getBreakpointsUpCached } from '../../utils/config'
+import { identity } from '../../utils/identity'
+import { isUndefinedOrNull } from '../../utils/inspect'
+import { memoize } from '../../utils/memoize'
+import { assign, create, keys, sortKeys } from '../../utils/object'
+import { makeProp, makePropsConfigurable, suffixPropName } from '../../utils/props'
+import { lowerCase } from '../../utils/string'
+
+// --- Constants ---
+
+const ALIGN_SELF_VALUES = ['auto', 'start', 'end', 'center', 'baseline', 'stretch']
+
+// --- Helper methods ---
+
+// Compute a breakpoint class name
+const computeBreakpoint = (type, breakpoint, value) => {
+  let className = type
+  if (isUndefinedOrNull(value) || value === false) {
+    return undefined
+  }
+  if (breakpoint) {
+    className += `-${breakpoint}`
+  }
+  // Handling the boolean style prop when accepting `[Boolean, String, Number]`
+  // means Vue will not convert `<b-col sm></b-col>` to `sm: true` for us
+  // Since the default is `false`, '' indicates the prop's presence
+  if (type === 'col' && (value === '' || value === true)) {
+    // .col-md
+    return lowerCase(className)
+  }
+  // .order-md-6
+  className += `-${value}`
+  return lowerCase(className)
+}
+
+// Memoized function for better performance on generating class names
+const computeBreakpointClass = memoize(computeBreakpoint)
+
+// Cached copy of the breakpoint prop names
+let breakpointPropMap = create(null)
+
+// --- Props ---
+
+// Prop generator for lazy generation of props
+export const generateProps = () => {
+  // Grab the breakpoints from the cached config (exclude the '' (xs) breakpoint)
+  const breakpoints = getBreakpointsUpCached().filter(identity)
+
+  // i.e. 'col-sm', 'col-md-6', 'col-lg-auto', ...
+  const breakpointCol = breakpoints.reduce((props, breakpoint) => {
+    props[breakpoint] = makeProp(PROP_TYPE_BOOLEAN_NUMBER_STRING)
+    return props
+  }, create(null))
+
+  // i.e. 'offset-md-1', 'offset-lg-12', ...
+  const breakpointOffset = breakpoints.reduce((props, breakpoint) => {
+    props[suffixPropName(breakpoint, 'offset')] = makeProp(PROP_TYPE_NUMBER_STRING)
+    return props
+  }, create(null))
+
+  // i.e. 'order-md-1', 'order-lg-12', ...
+  const breakpointOrder = breakpoints.reduce((props, breakpoint) => {
+    props[suffixPropName(breakpoint, 'order')] = makeProp(PROP_TYPE_NUMBER_STRING)
+    return props
+  }, create(null))
+
+  // For loop doesn't need to check `.hasOwnProperty()`
+  // when using an object created from `null`
+  breakpointPropMap = assign(create(null), {
+    col: keys(breakpointCol),
+    offset: keys(breakpointOffset),
+    order: keys(breakpointOrder)
+  })
+
+  // Return the generated props
+  return makePropsConfigurable(
+    sortKeys({
+      ...breakpointCol,
+      ...breakpointOffset,
+      ...breakpointOrder,
+      // Flex alignment
+      alignSelf: makeProp(PROP_TYPE_STRING, null, value => {
+        return arrayIncludes(ALIGN_SELF_VALUES, value)
+      }),
+      // Generic flexbox 'col' (xs)
+      col: makeProp(PROP_TYPE_BOOLEAN, false),
+      // i.e. 'col-1', 'col-2', 'col-auto', ...
+      cols: makeProp(PROP_TYPE_NUMBER_STRING),
+      offset: makeProp(PROP_TYPE_NUMBER_STRING),
+      order: makeProp(PROP_TYPE_NUMBER_STRING),
+      tag: makeProp(PROP_TYPE_STRING, 'div')
+    }),
+    NAME_COL
+  )
+}
+
+// --- Main component ---
+
+// We do not use extend here as that would evaluate the props
+// immediately, which we do not want to happen
+// @vue/component
+export const BCol = {
+  name: NAME_COL,
+  functional: true,
+  get props() {
+    // Allow props to be lazy evaled on first access and
+    // then they become a non-getter afterwards.
+    // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get#Smart_self-overwriting_lazy_getters
+    delete this.props
+    // eslint-disable-next-line no-return-assign
+    return (this.props = generateProps())
+  },
+  render(h, { props, data, children }) {
+    const { cols, offset, order, alignSelf } = props
+
+    const classList = []
+    // Loop through `col`, `offset`, `order` breakpoint props
+    for (const type in breakpointPropMap) {
+      // Returns colSm, offset, offsetSm, orderMd, etc.
+      const keys = breakpointPropMap[type]
+      for (let i = 0; i < keys.length; i++) {
+        // computeBreakpoint(col, colSm => Sm, value=[String, Number, Boolean])
+        const c = computeBreakpointClass(type, keys[i].replace(type, ''), props[keys[i]])
+        // If a class is returned, push it onto the array.
+        if (c) {
+          classList.push(c)
+        }
+      }
+    }
+
+    const hasColClasses = classList.some(className => RX_COL_CLASS.test(className))
+
+    classList.push({
+      // Default to .col if no other col-{bp}-* classes generated nor `cols` specified.
+      col: props.col || (!hasColClasses && !cols),
+      [`col-${cols}`]: cols,
+      [`offset-${offset}`]: offset,
+      [`order-${order}`]: order,
+      [`align-self-${alignSelf}`]: alignSelf
+    })
+
+    return h(props.tag, mergeData(data, { class: classList }), children)
+  }
+}