vuepress-theme-uniapp-official 1.4.11

package/components/SearchBox/index.vue

@@ -0,0 +1,337 @@
+<template>
+	<div class="search-box">
+		<input
+			ref="input"
+			aria-label="Search"
+			:value="query"
+			:class="{ focused: focused }"
+			:placeholder="placeholder"
+			class="custom-search"
+			autocomplete="off"
+			spellcheck="false"
+			@input="query = $event.target.value"
+			@focus="focused = true"
+			@blur="focused = false"
+			@keyup.enter="go(focusIndex)"
+			@keyup.up="onUp"
+			@keyup.down="onDown"
+		/>
+		<ul
+			v-if="showSuggestions"
+			class="suggestions"
+			:class="{ 'align-right': alignRight }"
+			style="z-index: 1"
+			@mouseleave="unfocus"
+		>
+			<template v-if="this.suggestions && this.suggestions.length">
+				<li
+					v-for="(s, i) in suggestions"
+					:key="i"
+					class="suggestion"
+					:class="{ focused: i === focusIndex }"
+					@mousedown="go(i)"
+					@mouseenter="focus(i)"
+				>
+					<a :href="s.path" @click.prevent>
+						<div class="suggestion-item">
+							<span class="page-title">{{ s.title || 'Document' }}</span>
+							<span v-if="s.header" class="header">{{ s.header.title }}</span>
+						</div>
+					</a>
+				</li>
+			</template>
+			<li v-else class="suggestion">
+				<div class="suggestion-item">
+					<span class="page-title">暂无结果</span>
+				</div>
+			</li>
+		</ul>
+	</div>
+</template>
+
+<script>
+	import matchQuery from './match-query';
+	/* global SEARCH_MAX_SUGGESTIONS, SEARCH_PATHS, SEARCH_HOTKEYS */
+	export default {
+		name: 'SearchBox',
+
+		data() {
+			return {
+				query: '',
+				focused: false,
+				focusIndex: 0,
+				placeholder: undefined,
+				SEARCH_PATHS: null,
+				SEARCH_HOTKEYS: ['s', '/'],
+				SEARCH_MAX_SUGGESTIONS: 5,
+			};
+		},
+
+		computed: {
+			showSuggestions() {
+				return this.focused && this.query && this.query.length; // && this.suggestions && this.suggestions.length;
+			},
+
+			suggestions() {
+				const query = this.query.trim().toLowerCase();
+				if (!query) {
+					return;
+				}
+
+				const { pages } = this.$site;
+				const max = this.$site.themeConfig.searchMaxSuggestions || this.SEARCH_MAX_SUGGESTIONS;
+				const localePath = this.$localePath;
+				const res = [];
+				for (let i = 0; i < pages.length; i++) {
+					if (res.length >= max) break;
+					const p = pages[i];
+					// filter out results that do not match current locale
+					if (this.getPageLocalePath(p) !== localePath) {
+						continue;
+					}
+
+					// filter out results that do not match searchable paths
+					if (!this.isSearchable(p)) {
+						continue;
+					}
+
+					if (matchQuery(query, p)) {
+						res.push(p);
+					} else if (p.headers) {
+						for (let j = 0; j < p.headers.length; j++) {
+							if (res.length >= max) break;
+							const h = p.headers[j];
+							if (h.title && matchQuery(query, p, h.title)) {
+								res.push(
+									Object.assign({}, p, {
+										path: p.path + '#' + h.slug,
+										header: h,
+									})
+								);
+							}
+						}
+					}
+				}
+				return res;
+			},
+
+			// make suggestions align right when there are not enough items
+			alignRight() {
+				const navCount = (this.$site.themeConfig.nav || []).length;
+				const repo = this.$site.repo ? 1 : 0;
+				return navCount + repo <= 2;
+			},
+		},
+
+		mounted() {
+			this.placeholder = this.$site.themeConfig.searchPlaceholder || '';
+			document.addEventListener('keydown', this.onHotkey);
+		},
+
+		beforeDestroy() {
+			document.removeEventListener('keydown', this.onHotkey);
+		},
+
+		methods: {
+			getPageLocalePath(page) {
+				for (const localePath in this.$site.locales || {}) {
+					if (localePath !== '/' && page.path.indexOf(localePath) === 0) {
+						return localePath;
+					}
+				}
+				return '/';
+			},
+
+			isSearchable(page) {
+				let searchPaths = this.SEARCH_PATHS;
+
+				// all paths searchables
+				if (searchPaths === null) {
+					return true;
+				}
+
+				searchPaths = Array.isArray(searchPaths) ? searchPaths : new Array(searchPaths);
+
+				return (
+					searchPaths.filter(path => {
+						return page.path.match(path);
+					}).length > 0
+				);
+			},
+
+			onHotkey(event) {
+				if (event.srcElement === document.body && this.SEARCH_HOTKEYS.includes(event.key)) {
+					this.$refs.input.focus();
+					event.preventDefault();
+				}
+			},
+
+			onUp() {
+				if (this.showSuggestions) {
+					if (this.focusIndex > 0) {
+						this.focusIndex--;
+					} else {
+						this.focusIndex = this.suggestions.length - 1;
+					}
+				}
+			},
+
+			onDown() {
+				if (this.showSuggestions) {
+					if (this.focusIndex < this.suggestions.length - 1) {
+						this.focusIndex++;
+					} else {
+						this.focusIndex = 0;
+					}
+				}
+			},
+
+			go(i) {
+				if (!this.showSuggestions) {
+					return;
+				}
+				this.$router.push(this.suggestions[i].path);
+				this.query = '';
+				this.focusIndex = 0;
+			},
+
+			focus(i) {
+				this.focusIndex = i;
+			},
+
+			unfocus() {
+				this.focusIndex = -1;
+			},
+		},
+	};
+</script>
+
+<style lang="stylus">
+	.search-box
+	  display inline-block
+	  position relative
+	  margin-right 1rem
+	  input
+	    cursor text
+	    width 10rem
+	    height: 2rem
+	    color lighten($textColor, 25%)
+	    display inline-block
+	    border 1px solid darken($borderColor, 10%)
+	    border-radius 2rem
+	    font-size 0.9rem
+	    line-height 2rem
+	    padding 0 0.5rem 0 2rem
+	    outline none
+	    transition all .2s ease
+	    background #fff url(search.svg) 0.6rem 0.5rem no-repeat
+	    background-size 1rem
+	    &:focus
+	      cursor auto
+	      border-color $accentColor
+	  .suggestions
+	    background #fff
+	    width 20rem
+	    position absolute
+	    top 2 rem
+	    border 1px solid darken($borderColor, 10%)
+	    border-radius 6px
+	    padding 0.4rem
+	    list-style-type none
+	    &.align-right
+	      right 0
+	  .suggestion
+	    line-height 1.4
+	    padding 0.4rem 0.6rem
+	    border-radius 4px
+	    cursor pointer
+	    a
+	      white-space normal
+	      color lighten($textColor, 35%)
+	      .page-title
+	        font-weight 600
+	      .header
+	        font-size 0.9em
+	        margin-left 0.25em
+	    &.focused
+	      background-color #f3f4f5
+	      a
+	        color $accentColor
+
+	@media (max-width: $MQNarrow)
+	  .search-box
+	    input
+	      cursor pointer
+	      width 0
+	      border-color transparent
+	      position relative
+	      &:focus
+	        cursor text
+	        left 0
+	        width 10rem
+
+	// Match IE11
+	@media all and (-ms-high-contrast: none)
+	  .search-box input
+	    height 2rem
+
+	@media (max-width: $MQNarrow) and (min-width: $MQMobile)
+	  .search-box
+	    .suggestions
+	      left 0
+
+	@media (max-width: $MQMobile)
+	  .search-box
+	    margin-right 0
+	    input
+	      left 1rem
+	    .suggestions
+	      right 0
+
+	@media (max-width: $MQMobileNarrow)
+	  .search-box
+	    .suggestions
+	      width calc(100vw - 4rem)
+	    input:focus
+	      width 8rem
+	// by Lxh
+	.search-box
+		.suggestions
+			width 30rem
+		.suggestion
+			$li-border-color = #f0f0f0
+			border 1px solid $li-border-color
+			border-radius 0
+			padding 0
+			&:not(:last-child)
+				border-bottom none
+			&:first-child
+				border-top-left-radius 6px
+				border-top-right-radius 6px
+			&:last-child
+				border-bottom 1px solid $li-border-color
+				border-bottom-left-radius 6px
+				border-bottom-right-radius 6px
+			a
+				width 100%
+			.suggestion-item
+				width 100%
+				display flex
+				.page-title
+					flex 1
+					width 9rem
+					background-color #f7f7f7
+					padding 10px
+					display flex
+					flex-direction column
+					justify-content center
+					text-align center
+					word-break break-all
+				.header
+					flex 2
+					padding-left 20px
+					display flex
+					flex-direction column
+					justify-content center
+					text-align left
+</style>

package/components/SearchBox/match-query.js

@@ -0,0 +1,51 @@
+
+import get from 'lodash/get'
+
+export default (query, page, additionalStr = null) => {
+  let domain = get(page, 'title', '')
+
+  if (get(page, 'frontmatter.tags')) {
+    domain += ` ${page.frontmatter.tags.join(' ')}`
+  }
+
+  if (additionalStr) {
+    domain += ` ${additionalStr}`
+  }
+
+  return matchTest(query, domain)
+}
+
+const matchTest = (query, domain) => {
+  const escapeRegExp = str => str.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&')
+
+  // eslint-disable-next-line no-control-regex
+  const nonASCIIRegExp = new RegExp('[^\x00-\x7F]')
+
+  const words = query
+    .split(/\s+/g)
+    .map(str => str.trim())
+    .filter(str => !!str)
+
+  if (!nonASCIIRegExp.test(query)) {
+    // if the query only has ASCII chars, treat as English
+    const hasTrailingSpace = query.endsWith(' ')
+    const searchRegex = new RegExp(
+      words
+      .map((word, index) => {
+        if (words.length === index + 1 && !hasTrailingSpace) {
+          // The last word - ok with the word being "startswith"-like
+          return `(?=.*\\b${escapeRegExp(word)})`
+        } else {
+          // Not the last word - expect the whole word exactly
+          return `(?=.*\\b${escapeRegExp(word)}\\b)`
+        }
+      })
+      .join('') + '.+',
+      'gi'
+    )
+    return searchRegex.test(domain)
+  } else {
+    // if the query has non-ASCII chars, treat as other languages
+    return words.some(word => domain.toLowerCase().indexOf(word) > -1)
+  }
+}

package/components/SearchBox/search.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" width="12" height="13"><g stroke-width="2" stroke="#aaa" fill="none"><path d="M11.29 11.71l-4-4"/><circle cx="5" cy="5" r="4"/></g></svg>

package/components/SidebarGroup.vue

@@ -0,0 +1,141 @@
+<template>
+  <section
+    class="sidebar-group"
+    :class="[
+      {
+        collapsable,
+        'is-sub-group': depth !== 0
+      },
+      `depth-${depth}`
+    ]"
+  >
+    <RouterLink
+      v-if="item.path"
+      class="sidebar-heading clickable"
+      :class="{
+        open,
+        'active': isActive($route, item.path)
+      }"
+      :to="item.path"
+      @click.native="$emit('toggle')"
+    >
+      <span>{{ item.title }}</span>
+      <span
+        v-if="collapsable"
+        class="arrow"
+        :class="open ? 'down' : 'right'"
+      />
+    </RouterLink>
+
+    <p
+      v-else
+      class="sidebar-heading"
+      :class="{ open }"
+      @click="$emit('toggle')"
+    >
+      <span>{{ item.title }}</span>
+      <span
+        v-if="collapsable"
+        class="arrow"
+        :class="open ? 'down' : 'right'"
+      />
+    </p>
+
+    <DropdownTransition>
+      <SidebarLinks
+        v-if="open || !collapsable"
+        class="sidebar-group-items"
+        :items="item.children"
+        :sidebar-depth="item.sidebarDepth"
+        :initial-open-group-index="item.initialOpenGroupIndex"
+        :depth="depth + 1"
+      />
+    </DropdownTransition>
+  </section>
+</template>
+
+<script>
+import { isActive } from '../util'
+import DropdownTransition from '@theme/components/DropdownTransition.vue'
+
+export default {
+  name: 'SidebarGroup',
+
+  components: {
+    DropdownTransition
+  },
+
+  props: [
+    'item',
+    'open',
+    'collapsable',
+    'depth'
+  ],
+
+  // ref: https://vuejs.org/v2/guide/components-edge-cases.html#Circular-References-Between-Components
+  beforeCreate () {
+    this.$options.components.SidebarLinks = require('@theme/components/SidebarLinks.vue').default
+  },
+
+  methods: { isActive }
+}
+</script>
+
+<style lang="stylus">
+.sidebar-group
+  .sidebar-group
+    padding-left 0.5em
+  &:not(.collapsable)
+    & > .sidebar-heading:not(.clickable)
+      cursor auto
+      color inherit
+  // refine styles of nested sidebar groups
+  &.is-sub-group
+    padding-left 0
+    & > .sidebar-heading
+      font-size 0.95em
+      line-height 1.4
+      font-weight normal
+      padding-left 2rem
+      &:not(.clickable)
+        opacity 0.5
+    & > .sidebar-group-items
+      padding-left 1rem
+      & > li > .sidebar-link
+        font-size: 0.95em;
+        border-left none
+  &.depth-2
+    & > .sidebar-heading
+      border-left none
+
+.sidebar-heading
+  color $textColor
+  transition color .15s ease
+  cursor pointer
+  font-size 1.1em
+  font-weight bold
+  // text-transform uppercase
+  padding 0.35rem 1.5rem 0.35rem 1.25rem
+  width 100%
+  box-sizing border-box
+  margin 0
+  border-left 0.25rem solid transparent
+  &.open, &:hover
+    color inherit
+  .arrow
+    position relative
+    top -0.12em
+    left 0.5em
+  &.clickable
+    &.active
+      font-weight 600
+      color $accentColor
+      border-left-color $accentColor
+    &:hover
+      color $accentColor
+
+.sidebar-group-items
+  transition height .1s ease-out
+  font-size 0.95em
+  overflow hidden
+</style>

package/components/SidebarLink.vue

@@ -0,0 +1,152 @@
+<script>
+import { isActive, hashRE, groupHeaders } from '../util'
+
+export default {
+  functional: true,
+
+  props: ['item', 'sidebarDepth'],
+
+  render (h,
+    {
+      parent: {
+        $page,
+        $site,
+        $route,
+        $themeConfig,
+        $themeLocaleConfig
+      },
+      props: {
+        item,
+        sidebarDepth
+      }
+    }) {
+    // use custom active class matching logic
+    // due to edge case of paths ending with / + hash
+    const selfActive = isActive($route, item.path)
+
+    const maxDepth = [
+      $page.frontmatter.sidebarDepth,
+      sidebarDepth,
+      $themeLocaleConfig.sidebarDepth,
+      $themeConfig.sidebarDepth,
+      1
+    ].find(depth => depth !== undefined)
+
+    // for sidebar: auto pages, a hash link should be active if one of its child
+    // matches
+    const active = item.type === 'auto'
+      ? selfActive || item.children.some(c => isActive($route, item.basePath + '#' + c.slug))
+      : selfActive
+    const link = item.type === 'external'
+      ? renderExternal(h, item.path, item.title || item.path)
+      : renderLink(h, item.path, item.title || item.path, active, undefined, item.headers)
+
+    const displayAllHeaders = $themeLocaleConfig.displayAllHeaders
+      || $themeConfig.displayAllHeaders
+
+    if (item.type === 'auto') {
+      return [link, renderChildren(h, item.children, item.basePath, $route, maxDepth)]
+    } else if ((active || displayAllHeaders) && item.headers && !hashRE.test(item.path)) {
+      const children = groupHeaders(item.headers)
+      return [link, renderChildren(h, children, item.path, $route, maxDepth)]
+    } else {
+      return link
+    }
+  }
+}
+
+let beforeActiveLinkText = ''
+function renderLink (h, to, text, active, level, headers) {
+  let VNode
+  let firstRender
+  if(headers && active){
+    firstRender = beforeActiveLinkText !== text
+    beforeActiveLinkText = text
+  }
+  const component = {
+    props: {
+      to,
+      activeClass: '',
+      exactActiveClass: ''
+    },
+    class: {
+      active,
+      'sidebar-link': true,
+      'data-no-emphasize': headers && headers.some(item => item.level < 3)
+    },
+    nativeOn: {
+      click: (e) => {
+        if (firstRender) { firstRender = false; return; }
+        if (e.target.className.indexOf('data-no-emphasize') === -1) return;
+        const child = VNode.componentOptions.children[0].elm.parentElement.nextElementSibling
+        if(!child) return
+        const originDisplay = child.style.display
+        child.style.display = originDisplay === 'none' ? 'block' : 'none'
+      }
+    }
+  }
+
+  if (level > 2) {
+    component.style = {
+      'padding-left': level + 'rem'
+    }
+  }
+  VNode = h('RouterLink', component, text)
+  return VNode
+}
+
+function renderChildren (h, children, path, route, maxDepth, depth = 1) {
+  if (!children || depth > maxDepth) return null
+  return h('ul', { class: 'sidebar-sub-headers' }, children.map(c => {
+    const active = isActive(route, path + '#' + c.slug)
+    return h('li', { class: 'sidebar-sub-header' }, [
+      renderLink(h, path + '#' + c.slug, c.title, active, c.level - 1),
+      renderChildren(h, c.children, path, route, maxDepth, depth + 1)
+    ])
+  }))
+}
+
+function renderExternal (h, to, text) {
+  return h('a', {
+    attrs: {
+      href: to,
+      target: '_blank',
+      rel: 'noopener noreferrer'
+    },
+    class: {
+      'sidebar-link': true
+    }
+  }, [text, h('OutboundLink')])
+}
+</script>
+
+<style lang="stylus">
+.sidebar .sidebar-sub-headers
+  padding-left 1rem
+  font-size 0.95em
+
+a.sidebar-link
+  font-size 1em
+  font-weight 400
+  display inline-block
+  color $textColor
+  border-left 0.25rem solid transparent
+  padding 0.35rem 1rem 0.35rem 1.25rem
+  line-height 1.4
+  width: 100%
+  box-sizing: border-box
+  &:hover
+    color $accentColor
+  &.active
+    font-weight 600
+    color $accentColor
+    border-left-color $accentColor
+  .sidebar-group &
+    padding-left 2rem
+  .sidebar-sub-headers &
+    padding-top 0.25rem
+    padding-bottom 0.25rem
+    border-left none
+    &.active
+      font-weight 500
+</style>