chore: Cleanup project

potato4d · Mar 3, 2019 · 8f4f096 · 8f4f096
1 parent 3db83b9
commit 8f4f096
Show file tree

Hide file tree

Showing 11 changed files with 98 additions and 78 deletions.
diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1 @@
+docs/.vuepress/dist
diff --git a/docs/.vuepress/components/SpecialLayout.vue b/docs/.vuepress/components/SpecialLayout.vue
@@ -11,12 +11,14 @@
 
 <script>
 import TheHeroArea from './parts/TheHeroArea.vue'
+import TheFooter from './parts/TheFooter.vue'
 import TheCodeSandbox from './parts/TheCodeSandbox.vue'
 
 export default {
   components: {
     TheHeroArea,
-    TheCodeSandbox
+    TheCodeSandbox,
+    TheFooter
   }
 }
 </script>

diff --git a/docs/.vuepress/components/parts/TheFooter.vue b/docs/.vuepress/components/parts/TheFooter.vue
@@ -0,0 +1,22 @@
+<template>
+  <footer>
+    <p class="text-center">
+      <small>&copy; 2018 Takuma HANATANI (@potato4d)</small>
+    </p>
+  </footer>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style scoped>
+footer {
+  padding-top: 0.5rem;
+  color: #999;
+}
+
+.text-center {
+  text-align: center;
+}
+</style>
diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
@@ -6,7 +6,7 @@ module.exports = {
   themeConfig: {
     nav: [
       { text: 'About', link: '/about/' },
-      { text: 'API', link: '/api/vue-fixed-header.md' },
+      { text: 'API', link: '/api/vue-fixed-header.md' }
     ],
     sidebar: {
       '/about/': ['/about/'],

diff --git a/docs/api/v2-fixed-header.md b/docs/api/v2-fixed-header.md
@@ -2,12 +2,15 @@
 
 This is a document on vue-fixed-header in v2.x era.
 
-## [data] fixed
+## Install
 
-- type: Variable
-- required: true
+```bash
+yarn add vue-fixed-header
+```
+
+## Usage
 
-```html
+```vue
 <template>
   <fixed-header :fixed.sync="isFixed">
     <div :class="{ 'is-fixed': isFixed }">
@@ -32,15 +35,13 @@ export default {
 </script>
 ```
 
-## [props] threshold
+## Props
 
-- type: Number
-- required: false
-- default: 0
+### threshold: number
 
 The threshold value for determining the scroll state.
 
-```html
+```vue
 <template>
   <fixed-header :fixed.sync="isFixed" :threshold="100">
     <div :class="{ 'is-fixed': isFixed }">

diff --git a/spec/components/vue-fixed-header.spec.ts b/spec/components/vue-fixed-header.spec.ts
@@ -5,10 +5,9 @@ import VueFixedHeader from '../../src/components/vue-fixed-header'
 describe('src/components/vue-fixed-header', () => {
   test('renders properly with it slot', () => {
     const message = 'My awesome content!'
-    const MyAwesomeContent = `<div>${message}</div>`
     const component = shallowMount(VueFixedHeader, {
       slots: {
-        default: MyAwesomeContent
+        default: `<div>${message}</div>`
       }
     })
     expect(component.text()).toEqual(message)

diff --git a/spec/utils/getTargetTeg.spec.ts b/spec/utils/getTargetTeg.spec.ts
@@ -19,9 +19,6 @@ describe('src/utils/getTargetTag', () => {
     describe('when given Chrome UserAgent', () => {
       it('returns "html"', () => {
         const userAgent = 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/72.0.3626.119 Safari/537.36'
-        const documentElement = {
-          style: ['WebkitAppearance']
-        }
         expect(getTargetTag(userAgent)).toBe('html')
       })
     })

diff --git a/src/components/ExampleApp.vue b/src/components/ExampleApp.vue
@@ -7,7 +7,7 @@
     >
       <nav>
         <el-menu>
-          <el-menu-item style="pointer-events: none;" index="1">
+          <el-menu-item class="menu-brand" index="1">
             Fixed Header
           </el-menu-item>
         </el-menu>
@@ -29,28 +29,34 @@
             <el-input type="text" v-model="formData.fixedClass"></el-input>
           </el-form-item>
           <el-form-item>
-            <el-button type="primary" @click="handleClickUpdate"
-              >Update</el-button
-            >
-            <el-button type="secondary" @click="handleClickCancel"
-              >Cancel</el-button
-            >
+            <div class="justify-right">
+              <el-button type="primary" @click="handleClickUpdate">
+                Update
+              </el-button>
+              <el-button type="secondary" @click="handleClickCancel">
+                Cancel
+              </el-button>
+            </div>
           </el-form-item>
         </el-form>
       </el-card>
     </div>
-    <VueFixedHeader headerClass="fixed-footer" fixedClass="isFixed">
+    <VueFixedHeader
+      :threshold="0"
+      headerClass="fixed-footer"
+      fixedClass="isFixed"
+    >
       <footer>
-        <el-menu style="background: #282C34;">
-          <div style="flex: 1;"></div>
+        <el-menu class="footer-content">
+          <div class="flex-1"></div>
           <el-menu-item class="fixed-footer__item" index="1">
-            <b>threshold: {{ propsData.threshold }}</b>
+            <b> threshold: {{ propsData.threshold }} </b>
           </el-menu-item>
           <el-menu-item class="fixed-footer__item" index="1">
-            <b>headerClass: {{ propsData.headerClass }}</b>
+            <b> headerClass: {{ propsData.headerClass }} </b>
           </el-menu-item>
           <el-menu-item class="fixed-footer__item" index="1">
-            <b>fixedClass: {{ propsData.fixedClass }}</b>
+            <b> fixedClass: {{ propsData.fixedClass }} </b>
           </el-menu-item>
         </el-menu>
       </footer>
@@ -62,24 +68,22 @@
 import Vue from 'vue'
 import VueFixedHeader from './vue-fixed-header'
 
+const createData = () => ({
+  threshold: 74,
+  headerClass: 'vue-fixed-header',
+  fixedClass: 'vue-fixed-header--isFixed'
+})
+
 export default Vue.extend({
+  components: {
+    VueFixedHeader
+  },
   data() {
     return {
-      propsData: {
-        threshold: 74,
-        headerClass: 'vue-fixed-header',
-        fixedClass: 'vue-fixed-header--isFixed'
-      },
-      formData: {
-        threshold: 74,
-        headerClass: 'vue-fixed-header',
-        fixedClass: 'vue-fixed-header--isFixed'
-      }
+      propsData: { ...createData() },
+      formData: { ...createData() }
     }
   },
-  components: {
-    VueFixedHeader
-  },
   methods: {
     handleClickUpdate() {
       this.propsData = { ...this.formData }
@@ -103,10 +107,20 @@ body,
   overflow-x: hidden;
 }
 
-* {
+.flex-1 {
+  flex: 1;
+}
+
+*,
+*::before,
+*::after {
   box-sizing: border-box;
 }
 
+.menu-brand {
+  pointer-events: none !important;
+}
+
 #app {
   font-family: 'Avenir', Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
@@ -177,4 +191,13 @@ li {
   color: #e5e5e5 !important;
   pointer-events: none;
 }
+
+.footer-content {
+  background: #282c34 !important;
+}
+
+.justify-right {
+  display: flex;
+  justify-content: flex-end;
+}
 </style>
diff --git a/src/components/vue-fixed-header.tsx b/src/components/vue-fixed-header.tsx
@@ -27,13 +27,8 @@ export default Vue.extend({
     }
   },
 
-  data() {
-    return {
-      qs: null,
-      check: null,
-      tag: null,
-      isFixed: false
-    } as LocalData
+  data(): LocalData {
+    return { qs: null, check: null, tag: null, isFixed: false }
   },
 
   mounted() {
@@ -50,11 +45,8 @@ export default Vue.extend({
       this.qs = (e: string) => document.querySelector(e)
       this.tag = getTargetTag(navigator.userAgent)
       this.check = () => {
-        const { qs, tag, threshold } = this
-        if (!tag) {
-          return
-        }
-        if (this.isFixed !== qs(tag).scrollTop > threshold) {
+        const { tag, qs, threshold } = this
+        if (tag && this.isFixed !== qs(tag).scrollTop > threshold) {
           this.isFixed = qs(tag).scrollTop > threshold
           this.$forceUpdate()
         }
@@ -70,32 +62,24 @@ export default Vue.extend({
 
   render(h: CreateElement): VNode {
     const children = this.$slots.default
-    if (!children) {
+    if (!children || !([...children][0] as VNode)) {
       return h()
     }
 
     const _child = [...children][0] as VNode
-    if (!_child) {
-      return h()
-    }
-
     const child = h(_child.tag, _child.data, _child.children || _child.text)
 
     child.data = child.data || { class: '' }
 
-    // string to string[]
     if (typeof child.data.class === 'string') {
       child.data.class = child.data.class.split(' ')
     }
 
-    // string[] to { K: V }
     if (Array.isArray(child.data.class)) {
-      child.data.class = [...child.data.class].reduce((a, b) => {
-        return {
-          ...a,
-          [b]: true
-        }
-      }, {})
+      child.data.class = [...child.data.class].reduce(
+        (a, b) => ({ ...a, [b]: true }),
+        {}
+      )
     }
 
     child.data.class = {
@@ -105,9 +89,7 @@ export default Vue.extend({
     }
 
     child.data.class = Object.entries(child.data.class)
-      .map(([k, v]) => {
-        return v ? k : null
-      })
+      .map(([k, v]) => (v ? k : null))
       .filter(v => v)
       .join(' ')
 

diff --git a/src/types/shims-tsx.d.ts b/src/types/shims-tsx.d.ts
@@ -2,9 +2,7 @@ import Vue, { VNode } from 'vue'
 
 declare global {
   namespace JSX {
-    // tslint:disable no-empty-interface
     interface Element extends VNode {}
-    // tslint:disable no-empty-interface
     interface ElementClass extends Vue {}
     interface IntrinsicElements {
       [elem: string]: any

diff --git a/src/types/window.d.ts b/src/types/window.d.ts