refactor(typography): make all components not functional since it can't get context's theme

nano.save

@@ -1 +0,0 @@
-z

src/Typography/src/a.vue

@@ -1,34 +1,35 @@
+<template>
+  <router-link
+    v-if="to"
+    class="n-a"
+    :to="to"
+    :class="{
+      [`n-${syntheticTheme}-theme`]: syntheticTheme
+    }"
+  >
+    <slot />
+  </router-link>
+  <a
+    v-else
+    class="n-a"
+    :class="{
+      [`n-${syntheticTheme}-theme`]: syntheticTheme
+    }"
+  ><slot /></a>
+</template>
+
 <script>
-import getTheme from './getTheme'
+import withapp from '../../_mixins/withapp'
+import themeable from '../../_mixins/themeable'
 
 export default {
   name: 'NA',
-  functional: true,
-  render (h, context) {
-    const on = context.listeners
-    const attrs = context.data.attrs || {}
-    const theme = getTheme(context.parent)
-    const defaultSlot = context.slots.default || (context.scopedSlots.default && context.scopedSlots.default())
-    const to = attrs.to
-    if (to) delete attrs.to
-    return to ? h('router-link', {
-      staticClass: 'n-a',
-      class: {
-        [`n-${theme}-theme`]: theme
-      },
-      props: {
-        to: to
-      },
-      ...context.data,
-      on
-    }, defaultSlot) : h('a', {
-      staticClass: 'n-a',
-      class: {
-        [`n-${theme}-theme`]: theme
-      },
-      attrs,
-      on
-    }, defaultSlot)
+  mixins: [ withapp, themeable ],
+  props: {
+    to: {
+      type: String,
+      default: null
+    }
   }
 }
 </script>

src/Typography/src/blockquote.vue

@@ -1,28 +1,27 @@
+<template>
+  <blockquote
+    class="n-blockquote"
+    :class="{
+      [`n-${syntheticTheme}-theme`]: syntheticTheme,
+      'n-blockquote--align-text': alignText
+    }"
+  >
+    <slot />
+  </blockquote>
+</template>
+
 <script>
-import getTheme from './getTheme'
+import withapp from '../../_mixins/withapp'
+import themeable from '../../_mixins/themeable'
 
 export default {
   name: 'NBlockquote',
-  functional: true,
+  mixins: [withapp, themeable],
   props: {
     alignText: {
       type: Boolean,
       default: false
     }
-  },
-  render (h, context) {
-    const on = context.listeners
-    const theme = getTheme(context.parent)
-    const defaultSlot = context.slots.default || (context.scopedSlots.default && context.scopedSlots.default())
-    return h('blockquote', {
-      staticClass: 'n-blockquote',
-      class: {
-        [`n-${theme}-theme`]: theme,
-        'n-blockquote--align-text': context.props.alignText
-      },
-      ...context.data,
-      on
-    }, defaultSlot)
   }
 }
 </script>

src/Typography/src/getTheme.js

@@ -1,11 +0,0 @@
-function getTheme (cursor) {
-  while (cursor) {
-    if (cursor.syntheticTheme) {
-      return cursor.syntheticTheme
-    }
-    cursor = cursor.$parent
-  }
-  return null
-}
-
-export default getTheme

src/Typography/src/header.js

@@ -1,8 +1,8 @@
-import getTheme from './getTheme'
+import withapp from '../../_mixins/withapp'
+import themeable from '../../_mixins/themeable'
 
 export default level => ({
   name: 'NH' + level,
-  functional: true,
   props: {
     type: {
       type: String,
@@ -17,21 +17,18 @@ export default level => ({
       default: false
     }
   },
-  render (h, context) {
-    const props = context.props
-    const on = context.listeners
-    const theme = getTheme(context.parent)
-    const defaultSlot = context.slots.default || (context.scopedSlots.default && context.scopedSlots.default())
+  mixins: [withapp, themeable],
+  render (h) {
+    const props = this.$props
+    const defaultSlot = this.$slots.default
     return h(`h${level}`, {
       class: {
         [`n-h${level}`]: true,
-        [`n-${theme}-theme`]: theme,
+        [`n-${this.syntheticTheme}-theme`]: this.syntheticTheme,
         [`n-h${level}--${props.type}-type`]: props.type,
         [`n-h${level}--prefix-bar`]: props.prefix,
         [`n-h${level}--align-text`]: props.alignText
-      },
-      ...context.data,
-      on
+      }
     }, defaultSlot)
   }
 })

src/Typography/src/hr.vue

@@ -1,21 +1,20 @@
+<template>
+  <ul
+    class="n-hr"
+    :class="{
+      [`n-${syntheticTheme}-theme`]: syntheticTheme
+    }"
+  >
+    <slot />
+  </ul>
+</template>
+
 <script>
-import getTheme from './getTheme'
+import withapp from '../../_mixins/withapp'
+import themeable from '../../_mixins/themeable'
 
 export default {
   name: 'NHr',
-  functional: true,
-  render (h, context) {
-    const on = context.listeners
-    const theme = getTheme(context.parent)
-    const defaultSlot = context.slots.default || (context.scopedSlots.default && context.scopedSlots.default())
-    return h('hr', {
-      staticClass: 'n-hr',
-      class: {
-        [`n-${theme}-theme`]: theme
-      },
-      ...context.data,
-      on
-    }, defaultSlot)
-  }
+  mixins: [withapp, themeable]
 }
 </script>

src/Typography/src/li.vue

@@ -1,21 +1,27 @@
+<template>
+  <li
+    class="n-li"
+    :class="{
+      [`n-${syntheticTheme}-theme`]: syntheticTheme,
+      'n-li--align-text': alignText
+    }"
+  >
+    <slot />
+  </li>
+</template>
+
 <script>
-import getTheme from './getTheme'
+import withapp from '../../_mixins/withapp'
+import themeable from '../../_mixins/themeable'
 
 export default {
   name: 'NLi',
-  functional: true,
-  render (h, context) {
-    const on = context.listeners
-    const theme = getTheme(context.parent)
-    const defaultSlot = context.slots.default || (context.scopedSlots.default && context.scopedSlots.default())
-    return h('li', {
-      staticClass: 'n-li',
-      class: {
-        [`n-${theme}-theme`]: theme
-      },
-      ...context.data,
-      on
-    }, defaultSlot)
+  mixins: [withapp, themeable],
+  props: {
+    alignText: {
+      type: Boolean,
+      default: false
+    }
   }
 }
 </script>

src/Typography/src/ol.vue

@@ -1,28 +1,28 @@
+<template>
+  <ol
+    class="n-ol"
+    :class="{
+      [`n-${syntheticTheme}-theme`]: syntheticTheme,
+      'n-ol--align-text': alignText
+    }"
+    v-on="$listeners"
+  >
+    <slot />
+  </ol>
+</template>
+
 <script>
-import getTheme from './getTheme'
+import withapp from '../../_mixins/withapp'
+import themeable from '../../_mixins/themeable'
 
 export default {
   name: 'NOl',
-  functional: true,
+  mixins: [withapp, themeable],
   props: {
     alignText: {
       type: Boolean,
       default: false
     }
-  },
-  render (h, context) {
-    const on = context.listeners
-    const theme = getTheme(context.parent)
-    const defaultSlot = context.slots.default || (context.scopedSlots.default && context.scopedSlots.default())
-    return h('ol', {
-      staticClass: 'n-ol',
-      class: {
-        [`n-${theme}-theme`]: theme,
-        [`n-ol--align-text`]: context.props.alignText
-      },
-      ...context.data,
-      on
-    }, defaultSlot)
   }
 }
 </script>

src/Typography/src/p.vue

@@ -1,9 +1,22 @@
+<template>
+  <p
+    class="n-p"
+    :class="{
+      [`n-${syntheticTheme}-theme`]: syntheticTheme,
+      [`n-p--${depth}-depth`]: depth
+    }"
+  >
+    <slot />
+  </p>
+</template>
+
 <script>
-import getTheme from './getTheme'
+import withapp from '../../_mixins/withapp'
+import themeable from '../../_mixins/themeable'
 
 export default {
   name: 'NP',
-  functional: true,
+  mixins: [withapp, themeable],
   props: {
     depth: {
       validator (value) {
@@ -11,22 +24,6 @@ export default {
       },
       default: null
     }
-  },
-  render (h, context) {
-    const on = context.listeners
-    const theme = getTheme(context.parent)
-    const props = context.props
-    const defaultSlot = context.slots.default || (context.scopedSlots.default && context.scopedSlots.default())
-    const depth = props.depth
-    return h('p', {
-      staticClass: 'n-p',
-      class: {
-        [`n-${theme}-theme`]: theme,
-        [`n-p--${depth}-depth`]: depth
-      },
-      ...context.data,
-      on
-    }, defaultSlot)
   }
 }
 </script>

src/Typography/src/text.vue

@@ -1,9 +1,60 @@
+<template>
+  <code
+    v-if="code"
+    class="n-text"
+    :class="{
+      [`n-${syntheticTheme}-theme`]: syntheticTheme,
+      'n-text--code': code,
+      [`n-text--${type}-type`]: type,
+      'n-text--delete': $props.delete,
+      'n-text--strong': strong,
+      'n-text--italic': italic,
+      'n-text--disabled': disabled,
+      'n-text--underline': underline,
+      [`n-text--${depth}-depth`]: depth
+    }"
+    v-on="$listeners"
+  ><template v-if="!$props.delete"><slot /></template><del v-else><slot /></del></code>
+  <del
+    v-else-if="$props.delete"
+    class="n-text"
+    :class="{
+      [`n-${syntheticTheme}-theme`]: syntheticTheme,
+      'n-text--code': code,
+      [`n-text--${type}-type`]: type,
+      'n-text--delete': $props.delete,
+      'n-text--strong': strong,
+      'n-text--italic': italic,
+      'n-text--disabled': disabled,
+      'n-text--underline': underline,
+      [`n-text--${depth}-depth`]: depth
+    }"
+    v-on="$listeners"
+  ><slot /></del>
+  <span
+    v-else
+    class="n-text"
+    :class="{
+      [`n-${syntheticTheme}-theme`]: syntheticTheme,
+      'n-text--code': code,
+      [`n-text--${type}-type`]: type,
+      'n-text--delete': $props.delete,
+      'n-text--strong': strong,
+      'n-text--italic': italic,
+      'n-text--disabled': disabled,
+      'n-text--underline': underline,
+      [`n-text--${depth}-depth`]: depth
+    }"
+  ><slot /></span>
+</template>
+
 <script>
-import getTheme from './getTheme'
+import withapp from '../../_mixins/withapp'
+import themeable from '../../_mixins/themeable'
 
 export default {
   name: 'NText',
-  functional: true,
+  mixins: [withapp, themeable],
   props: {
     code: {
       type: Boolean,
@@ -39,38 +90,6 @@ export default {
       },
       default: null
     }
-  },
-  render (h, context) {
-    const props = context.props
-    const type = props.type
-    const isCode = props.code
-    const isDelete = props.delete
-    const isStrong = props.strong
-    const isItalic = props.italic
-    const isDisabled = props.disabled
-    const isUnderline = props.underline
-    const depth = props.depth
-    const on = context.listeners
-    const theme = getTheme(context.parent)
-    const defaultSlot = context.slots.default || (context.scopedSlots.default && context.scopedSlots.default())
-    return h(isCode ? 'code' : isDelete ? 'del' : 'span', {
-      staticClass: 'n-text',
-      class: {
-        [`n-${theme}-theme`]: theme,
-        'n-text--code': isCode,
-        [`n-text--${type}-type`]: type,
-        'n-text--delete': isDelete,
-        'n-text--strong': isStrong,
-        'n-text--italic': isItalic,
-        'n-text--disabled': isDisabled,
-        'n-text--underline': isUnderline,
-        [`n-text--${depth}-depth`]: depth
-      },
-      ...context.data,
-      on
-    }, isDelete && isCode ? [
-      h('del', {}, defaultSlot)
-    ] : defaultSlot)
   }
 }
 </script>

src/Typography/src/ul.vue

@@ -1,28 +1,27 @@
+<template>
+  <ul
+    class="n-ul"
+    :class="{
+      [`n-${syntheticTheme}-theme`]: syntheticTheme,
+      'n-ul--align-text': alignText
+    }"
+  >
+    <slot />
+  </ul>
+</template>
+
 <script>
-import getTheme from './getTheme'
+import withapp from '../../_mixins/withapp'
+import themeable from '../../_mixins/themeable'
 
 export default {
   name: 'NUl',
-  functional: true,
+  mixins: [withapp, themeable],
   props: {
     alignText: {
       type: Boolean,
       default: false
     }
-  },
-  render (h, context) {
-    const on = context.listeners
-    const theme = getTheme(context.parent)
-    const defaultSlot = context.slots.default || (context.scopedSlots.default && context.scopedSlots.default())
-    return h('ul', {
-      staticClass: 'n-ul',
-      class: {
-        [`n-${theme}-theme`]: theme,
-        [`n-ul--align-text`]: context.props.alignText
-      },
-      ...context.data,
-      on
-    }, defaultSlot)
   }
 }
 </script>