feat(core): create configurable base global configuration (#2905)

Author: tmorehouse

docs/components/anchored-heading.js

@@ -0,0 +1,24 @@
+export default {
+  props: {
+    level: {
+      type: [Number, String],
+      default: 2
+    },
+    id: {
+      type: String,
+      default: ''
+    }
+  },
+  render(h) {
+    const $anchor = h(
+      'b-link',
+      {
+        staticClass: 'anchorjs-link',
+        attrs: { to: { hash: `#${this.id}` }, 'aria-label': 'Anchor' }
+      },
+      [h(false)]
+    )
+    const $content = h('span', { staticClass: 'bd-content-title' }, [this.$slots.default, $anchor])
+    return h(`h${this.level}`, { attrs: { id: this.id, tabindex: '-1' } }, [$content])
+  }
+}

docs/components/componentdoc.vue

@@ -5,7 +5,9 @@
   >
     <b-row tag="header" align-v="center">
       <b-col sm="9">
-        <h2 :id="`comp-ref-${componentName}`"><code>{{ tag }}</code></h2>
+        <anchored-heading :id="`comp-ref-${componentName}`" level="2">
+          <code>{{ tag }}</code>
+        </anchored-heading>
       </b-col>
       <b-col sm="3" class="text-sm-right">
         <b-btn variant="outline-secondary" size="sm" :href="githubURL" target="_blank">
@@ -15,30 +17,66 @@
     </b-row>
 
     <article v-if="aliases && aliases.length > 0">
-      <h4 :id="`comp-ref-${componentName}-aliases`">Component aliases</h4>
+      <anchored-heading :id="`comp-ref-${componentName}-aliases`" level="4">
+        Component aliases
+      </anchored-heading>
       <p><code>{{ tag }}</code> can also be used via the following aliases:</p>
       <ul>
         <li v-for="alias in aliases" :key="alias"><code>&lt;{{ kebabCase(alias) }}&gt;</code></li>
       </ul>
     </article>
 
     <article v-if="propsItems && propsItems.length > 0">
-      <h4 :id="`comp-ref-${componentName}-props`">Properties</h4>
+      <anchored-heading :id="`comp-ref-${componentName}-props`" level="4">
+        Properties
+      </anchored-heading>
       <b-table
         :items="propsItems"
         :fields="propsFields"
         small
         head-variant="default"
         striped
       >
-        <template slot="default" slot-scope="field">
-          <code v-if="field.value">{{ field.value }}</code>
+        <template slot="prop" slot-scope="{ value }">
+          <code>{{ value }}</code>
+        </template>
+        <template slot="row-details" slot-scope="{ item }">
+          <b-badge variant="warning">
+            {{ typeof item.deprecated === 'string' ? 'deprecation' : 'deprecated' }}
+          </b-badge>
+          <!-- if deprecated is a string, show the string value -->
+          <small v-if="typeof item.deprecated === 'string'">{{ item.deprecated }}</small>
+        </template>
+        <template slot="defaultValue" slot-scope="{ value }">
+          <code v-if="value">{{ value }}</code>
         </template>
       </b-table>
+
+      <template v-if="componentVModel">
+        <anchored-heading :id="`comp-ref-${componentName}-v-model`" level="4">
+          V-Model
+        </anchored-heading>
+        <b-table
+          :items="[componentVModel]"
+          :fields="['prop', 'event']"
+          small
+          head-variant="default"
+          striped
+        >
+          <template slot="prop" slot-scope="{ value }">
+            <code>{{ kebabCase(value) }}</code>
+          </template>
+          <template slot="event" slot-scope="{ value }">
+            <code>{{ value }}</code>
+          </template>
+        </b-table>
+      </template>
     </article>
 
     <article v-if="slots && slots.length > 0">
-      <h4 :id="`comp-ref-${componentName}-slots`">Slots</h4>
+      <anchored-heading :id="`comp-ref-${componentName}-slots`" level="4">
+        Slots
+      </anchored-heading>
       <b-table
         :items="slots"
         :fields="slotsFields"
@@ -49,28 +87,32 @@
     </article>
 
     <article v-if="events && events.length > 0">
-      <h4 :id="`comp-ref-${componentName}-events`">Events</h4>
+      <anchored-heading :id="`comp-ref-${componentName}-events`" level="4">
+        Events
+      </anchored-heading>
       <b-table
         :items="events"
         :fields="eventsFields"
         small
         head-variant="default"
         striped
       >
-        <template slot="args" slot-scope="field">
+        <template slot="args" slot-scope="{ value, item }">
           <div
-            v-for="arg in field.value"
-            :key="`event-${field.item.event}-${arg.arg ? arg.arg : 'none'}`"
+            v-for="arg in value"
+            :key="`event-${item.event}-${arg.arg ? arg.arg : 'none'}`"
           >
             <template v-if="arg.arg"><code>{{ arg.arg }}</code> - </template>
-            <span v-html="arg.description" />
+            <span v-html="arg.description"></span>
           </div>
         </template>
       </b-table>
     </article>
 
     <article v-if="rootEventListeners && rootEventListeners.length > 0">
-      <h4 :id="`comp-ref-${componentName}-rootEventListeners`">$root Event Listeners</h4>
+      <anchored-heading :id="`comp-ref-${componentName}-rootEventListeners`" level="4">
+        $root Event Listeners
+      </anchored-heading>
       <p>You can control <code>{{ tag }}</code> by emitting the following events on <samp>$root</samp>:</p>
       <b-table
         :items="rootEventListeners"
@@ -79,13 +121,13 @@
         head-variant="default"
         striped
       >
-        <template slot="args" slot-scope="field">
+        <template slot="args" slot-scope="{ value, item }">
           <div
-            v-for="arg in field.value"
-            :key="`event-${field.item.event}-${arg.arg ? arg.arg : 'none'}`"
+            v-for="arg in value"
+            :key="`event-${item.event}-${arg.arg ? arg.arg : 'none'}`"
           >
             <template v-if="arg.arg"><code>{{ arg.arg }}</code> - </template>
-            <span v-html="arg.description" />
+            <span v-html="arg.description"></span>
           </div>
         </template>
       </b-table>
@@ -106,8 +148,12 @@ h5 {
 <script>
 import Vue from 'vue'
 import kebabCase from 'lodash/kebabCase'
+import AnchoredHeading from './anchored-heading'
 
 export default {
+  components: {
+    AnchoredHeading
+  },
   props: {
     component: {},
     slots: {
@@ -130,56 +176,73 @@ export default {
   computed: {
     componentOptions() {
       const component = Vue.options.components[this.component]
-      return component && component.options ? component.options : {}
-    },
-    propsFields() {
-      const component = Vue.options.components[this.component]
-      let props = []
-      if (component) {
-        props = component.options.props
+      if (!component) {
+        return {}
       }
-      const hasRequired = props.length > 0 && props.filter(p => p.required).length > 0
 
-      const fields = {
-        prop: { label: 'Property' },
-        type: { label: 'Type' },
-        default: { label: 'Default Value' }
+      let options = {}
+      if (!component.options && typeof component === 'function') {
+        // Async component that hans't been resolved yet
+        component(opts => {
+          options = opts ? { ...opts } : {}
+        })
+      } else {
+        // Regular component
+        options = component.options || {}
+      }
+
+      return options
+    },
+    componentVModel() {
+      const model = this.componentOptions.model
+      if (model && model.prop && model.event) {
+        return model
+      } else {
+        return false
       }
+    },
+    componentProps() {
+      return this.componentOptions.props || {}
+    },
+    propsFields() {
+      const props = this.componentProps
+
+      const hasRequired = Object.keys(props).some(p => props[p].required)
+
+      const fields = [
+        { key: 'prop', label: 'Property' },
+        { key: 'type', label: 'Type' },
+        { key: 'defaultValue', label: 'Default Value' }
+      ]
 
       // Add the required column if there are required field(s)
       if (hasRequired) {
-        fields.required = { label: 'Required' }
+        // Insert required field after prop name
+        fields.splice(1, 0, { key: 'required', label: 'Required' })
       }
 
       return fields
     },
     eventsFields() {
-      return {
-        event: { label: 'Event' },
-        args: { label: 'Arguments' },
-        description: { label: 'Description' }
-      }
+      return [
+        { key: 'event', label: 'Event' },
+        { key: 'args', label: 'Arguments' },
+        { key: 'description', label: 'Description' }
+      ]
     },
     rootEventListenersFields() {
-      return {
-        event: { label: 'Event' },
-        args: { label: 'Arguments' },
-        description: { label: 'Description' }
-      }
+      return [
+        { key: 'event', label: 'Event' },
+        { key: 'args', label: 'Arguments' },
+        { key: 'description', label: 'Description' }
+      ]
     },
     slotsFields() {
-      return {
-        name: { label: 'Slot' },
-        description: { label: 'Description' }
-      }
+      return [{ key: 'name', label: 'Slot' }, { key: 'description', label: 'Description' }]
     },
     propsItems() {
-      const component = Vue.options.components[this.component]
-      if (!component) {
-        return {}
-      }
+      const props = this.componentProps
 
-      const props = component.options.props
       return Object.keys(props).map(prop => {
         const p = props[prop]
 
@@ -213,13 +276,17 @@ export default {
 
         // Requied prop?
         const required = p.required ? 'Yes' : ''
+        // Deprecation?
+        const deprecated = p.deprecated || false
 
         return {
           prop: kebabCase(prop),
           type,
           required,
           typeClass,
-          default: defaultVal
+          defaultValue: defaultVal,
+          deprecated,
+          _showDetails: !!deprecated
         }
       })
     },