vuepress-theme-uniapp-official 1.4.11

package/components/Navbar.vue

@@ -0,0 +1,322 @@
+<template>
+  <header class="navbar" :class="{ 'navbar-fixed': fixedNavbar }">
+    <div class="main-navbar">
+      <!-- <SidebarButton @toggle-sidebar="$emit('toggle-sidebar')" /> -->
+
+      <NavbarLogo />
+
+      <div class="main-navbar-links can-hide">
+        <template v-for="(item, index) in customNavBar">
+          <div :class="mainNavLinkClass(index)" :key="item.text">
+            <MainNavbarLink v-if="item.type" :item='item' />
+            <a v-else href="javascript:;" @click="changeUserNav(index)">{{item.text}}</a>
+          </div>
+        </template>
+      </div>
+
+      <div class="mobile-main-navbar">
+        <div class="mobile-links_mobile">
+          <a href="javascript:;" class="mobile-links__btn" @click="toggleMobilePanel">{{mainNavBarText}}</a>
+        </div>
+        <div class="mobile-links__panel" :class="{open: showMobilePanel}">
+          <template v-for="(item, index) in customNavBar">
+            <div :class="mainNavLinkClass(index)" :key="item.text">
+              <MainNavbarLink v-if="item.type" :item='item' @click.native="toggleMobilePanel" />
+              <a v-else href="javascript:;" @click="changeUserNav(index),toggleMobilePanel()">{{item.text}}</a>
+            </div>
+          </template>
+        </div>
+      </div>
+
+      <div class="dropdown-language" @click="switchLanguage">
+        <div style="display: flex;align-items: center;">
+          <span>{{navbarLanguage[navConfig.languageIndex].text}}</span>
+          <svg t="1629441415944" viewBox="0 20 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3713"
+            width="16" height="16" class="icon">
+            <path
+              d="M508.025406 655.446718c-14.45307 0-28.183486-5.781228-39.023289-15.898376l-231.249118-231.249118c-10.117149-10.117149-10.117149-26.015526 0-36.132675s26.015526-10.117149 36.132675 0l231.249118 231.249118c2.16796 2.16796 4.335921 2.16796 5.781228 0l231.971771-231.971771c10.117149-10.117149 26.015526-10.117149 35.410021 0 10.117149 10.117149 10.117149 26.015526 0 36.132674l-231.971771 231.971772c-9.394495 10.117149-23.124912 15.898377-38.300635 15.898376z"
+              p-id="3714"></path>
+          </svg>
+        </div>
+        <div v-if="showLanguage" class="dropdown-content">
+          <div
+            v-for="(item,index) in navbarLanguage"
+            :key="item.link"
+            @click="() => { typeof item.click === 'function' && item.click(index === navConfig.languageIndex) }"
+          >
+            <a :href="index === navConfig.languageIndex ? 'javascript:;' : item.link" target="_self" :key="item.text"
+              :class="[index === navConfig.languageIndex ? 'clickDisabled' : '']">
+              {{item.text}}
+            </a>
+          </div>
+        </div>
+      </div>
+
+      <div class="links" :style="SearchBoxStyle">
+        <!-- <a class="switch-version" href="javascript:void(0)">回到旧版</a> -->
+        <DcloudSearchPage v-if="isAlgoliaSearch" ref="dcloudSearchPage" :options="algolia" />
+        <AlgoliaSearchBox v-if="isAlgoliaSearch" />
+        <SearchBox v-else-if="$site.themeConfig.search !== false && $page.frontmatter.search !== false" />
+      </div>
+    </div>
+
+    <div class="sub-navbar">
+      <DropdownLink class="custom-main-navbar can-hide" v-if="showSubNavBar && fixedNavbar" :item="{
+          text: customNavBarKeys[navConfig.userNavIndex],
+          items: customNavBar
+        }" />
+      <NavLinks class="can-hide" />
+      <div class="mobile-sub-navbar">
+        <div class="subnavbar__item" @click="$emit('toggle-sidebar')">
+          <a href="javascript:;">{{subNavBarText}}</a>
+        </div>
+      </div>
+    </div>
+  </header>
+</template>
+
+<script>
+import AlgoliaSearchBox from './AlgoliaSearchBox'
+import SearchBox from './SearchBox'
+import SidebarButton from '@theme/components/SidebarButton.vue'
+import NavLinks from '@theme/components/NavLinks.vue'
+import MainNavbarLink from './MainNavbarLink.vue';
+import NavbarLogo from './NavbarLogo.vue';
+import DcloudSearchPage from './DcloudSearchPage';
+import navInject from '../mixin/navInject';
+import DropdownLink from '@theme/components/DropdownLink.vue'
+import { forbidScroll, os } from '../util';
+
+export default {
+  name: 'Navbar',
+
+  mixins: [ navInject ],
+
+  components: {
+    SidebarButton,
+    NavLinks,
+    MainNavbarLink,
+    SearchBox,
+    AlgoliaSearchBox,
+    NavbarLogo,
+    DcloudSearchPage,
+    DropdownLink
+  },
+
+  data () {
+    return {
+      linksWrapMaxWidth: null,
+      showMobilePanel: false,
+      fixedNavbar: false,
+      SearchBoxTop: 0,
+      showLanguage: false
+    }
+  },
+
+  computed: {
+    algolia () {
+      return this.$themeLocaleConfig.algolia || this.$site.themeConfig.algolia || {}
+    },
+
+    isAlgoliaSearch () {
+      return this.algolia && this.algolia.apiKey && this.algolia.indexName
+    },
+
+    SearchBoxStyle () {
+      const initStyle = {
+        top: `${this.SearchBoxTop}px`,
+        zIndex: 100
+      };
+      return this.linksWrapMaxWidth
+        ? Object.assign({}, initStyle, {
+            'max-width': this.linksWrapMaxWidth + 'px',
+          })
+        : initStyle;
+    },
+
+    languageBoxStyle () {
+      return {right:(this.linksWrapMaxWidth + 10) + 'px'}
+    }
+  },
+
+  mounted () {
+    const MOBILE_DESKTOP_BREAKPOINT = 719 // refer to config.styl
+    const NAVBAR_VERTICAL_PADDING = parseInt(css(this.$el, 'paddingLeft')) + parseInt(css(this.$el, 'paddingRight'))
+    const handleLinksWrapWidth = () => {
+      if (document.documentElement.clientWidth < MOBILE_DESKTOP_BREAKPOINT) {
+        this.linksWrapMaxWidth = null
+      } else {
+        this.linksWrapMaxWidth = this.$el.offsetWidth - NAVBAR_VERTICAL_PADDING
+          - (this.$refs.siteName && this.$refs.siteName.offsetWidth || 0)
+      }
+      this.$nextTick(this.initNavBar)
+    }
+    handleLinksWrapWidth()
+    window.addEventListener('resize', handleLinksWrapWidth, false)
+    window.addEventListener('click',(e)=> {
+      this.showLanguage = false
+    })
+    this.initNavBar()
+  },
+
+  methods: {
+    initNavBar () {
+      os.init()
+      this.sideBar = document.querySelector('.sidebar')
+      this.navbar = document.querySelector('.navbar')
+      this.mainNavBar = document.querySelector('.main-navbar')
+      this.subNavBar = document.querySelector('.sub-navbar')
+      this.pageContainer = document.querySelector('.page')
+      this.vuepressToc = document.querySelector('.vuepress-toc')
+      this.navbarHeight = this.navbar.clientHeight
+      this.subNavBarHeight = this.subNavBar.clientHeight
+      this.mainNavBarHeight = this.mainNavBar.clientHeight
+      this.scrollBehavior()
+    },
+    scrollBehavior () {
+      this.removeWindowScroll()
+      this.onWindowScroll()
+      if(this.showSubNavBar) {
+        this.addWindowScroll()
+      } else {
+        this.fixedNavbar = true
+        this.SearchBoxTop = 0
+      }
+    },
+    addWindowScroll () {
+      if (os.pc) {
+        window.addEventListener('scroll', this.onWindowScroll, false)
+      }
+    },
+    removeWindowScroll () {
+      window.removeEventListener('scroll', this.onWindowScroll)
+      this.fixedNavbar = false
+      this.sideBar && this.sideBar.removeAttribute('style')
+      this.vuepressToc && this.vuepressToc.removeAttribute('style')
+      this.navbar && this.navbar.removeAttribute('style')
+      if (this.pageContainer) {
+        this.pageContainer.style.marginTop = this.showSubNavBar || !os.pc ? 'auto' : `${this.navbarHeight}px`
+      }
+    },
+    onWindowScroll () {
+      const scrollTop = !this.showSubNavBar ? 0 : document.documentElement.scrollTop || document.body.scrollTop;
+
+      if (!this.fixedNavbar) {
+        let sideTop = this.navbarHeight - scrollTop
+        sideTop <= this.subNavBarHeight && (sideTop = this.subNavBarHeight)
+        this.sideBar && (this.sideBar.style.top = `${sideTop + 1}px`)
+        this.vuepressToc && (this.vuepressToc.style.top = `${sideTop + 1}px`)
+      }
+
+      if (scrollTop >= this.mainNavBarHeight) {
+        if (!this.fixedNavbar) {
+          this.fixedNavbar = true
+          this.navbar.style.top = `-${this.mainNavBarHeight}px`
+          this.SearchBoxTop = this.mainNavBarHeight + (this.subNavBarHeight - this.mainNavBarHeight) / 2
+          this.$nextTick(() => {
+            this.pageContainer && (this.pageContainer.style.marginTop = `${this.navbarHeight}px`)
+          })
+        }
+      } else if (scrollTop < this.mainNavBarHeight) {
+        if (this.fixedNavbar) {
+          this.fixedNavbar = false
+          this.pageContainer && (this.pageContainer.style.marginTop = 'auto')
+          this.SearchBoxTop = 0
+        }
+      }
+    },
+    fixedSideBarHeight () {
+      if(!os.pc) return
+      const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
+      this.navbarHeight = this.navbar.clientHeight
+      this.subNavBarHeight = this.subNavBar.clientHeight
+      const setHeight = !!scrollTop || this.fixedNavbar ? this.subNavBarHeight : this.navbarHeight
+      this.sideBar.style.top = `${setHeight + 1}px`
+      this.vuepressToc.style.top = `${setHeight + 1}px`
+    },
+    mainNavLinkClass (index) {
+      return ['main-navbar-item', this.navConfig.userNavIndex === index ? 'active' : '']
+    },
+    toggleMobilePanel () {
+      this.showMobilePanel = !this.showMobilePanel
+      forbidScroll(this.showMobilePanel)
+    },
+    switchLanguage (e) {
+      e.stopPropagation()
+      this.showLanguage = !this.showLanguage
+    }
+  },
+
+  watch: {
+    fixedNavbar () {
+      this.fixedSideBarHeight()
+      this.scrollBehavior()
+    },
+    'navConfig.userNavIndex' () {
+      this.$nextTick(()=>{
+        this.fixedSideBarHeight()
+        this.scrollBehavior()
+      })
+    }
+  }
+}
+
+function css (el, property) {
+  // NOTE: Known bug, will return 'auto' if style value is 'auto'
+  const win = el.ownerDocument.defaultView
+  // null means not to return pseudo styles
+  return win.getComputedStyle(el, null)[property]
+}
+</script>
+
+<style lang="stylus">
+$navbar-vertical-padding = 0.7rem
+$navbar-horizontal-padding = 1.5rem
+@import '../styles/navbar'
+
+.navbar
+  // padding $navbar-vertical-padding $navbar-horizontal-padding
+  line-height $navbar-main-navbar-height // $navbarHeight - 1.4rem
+  a, span, img
+    display inline-block
+  .title-logo
+  .logo
+    height $navbar-logo-height // $navbarHeight - 1.4rem
+    // min-width $navbar-main-navbar-height // $navbarHeight - 1.4rem
+    margin-right 0.8rem
+    vertical-align top
+  .site-name
+    font-size 1.3rem
+    font-weight 600
+    color $textColor
+    position relative
+  .links
+    height 100%
+    // padding-left 1.5rem
+    box-sizing border-box
+    // background-color white
+    white-space nowrap
+    font-size 0.9rem
+    position absolute
+    right $navbar-horizontal-padding
+    top 0 //$navbar-vertical-padding
+    transition: top 0.1s ease 0s
+    display flex
+    .search-box
+      flex: 0 0 auto
+      vertical-align top
+
+@media (max-width: $MQMobile)
+  .navbar
+    // padding-left 4rem
+    .can-hide
+      display none !important
+    .links
+      padding-left 0rem // 1.5rem
+      top 0 !important
+    .site-name
+      width calc(100vw - 9.4rem)
+      overflow hidden
+      white-space nowrap
+      text-overflow ellipsis
+</style>

package/components/NavbarLogo.vue

@@ -0,0 +1,24 @@
+<template>
+	<a href="https://www.dcloud.io" class="home-link">
+		<img
+			v-if="$site.themeConfig.logo"
+			class="logo"
+			:src="$withBase($site.themeConfig.logo)"
+			:alt="$siteTitle"
+		/>
+		<img
+			v-if="$site.themeConfig.titleLogo"
+			class="title-logo can-hide"
+			:src="$withBase($site.themeConfig.titleLogo)"
+			:alt="$siteTitle"
+		/>
+		<span
+			v-else-if="$siteTitle"
+			ref="siteName"
+			class="site-name"
+			:class="{ 'can-hide': $site.themeConfig.logo }"
+		>
+			{{ $siteTitle }}
+		</span>
+	</a>
+</template>

package/components/OutboundLink.vue

@@ -0,0 +1,45 @@
+<template>
+  <span>
+    <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px"
+      viewBox="0 0 100 100" width="15" height="15">
+      <path fill="currentColor"
+        d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z" />
+      <polygon fill="currentColor"
+        points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9" />
+    </svg>
+    <!-- <span class="sr-only">{{ openInNewWindowTitle }}</span> -->
+  </span>
+</template>
+
+<script>
+export default {
+  computed: {
+    openInNewWindowTitle() {
+      return this.$themeLocaleConfig.openNewWindowText || '(opens new window)'
+    }
+  }
+}
+</script>
+
+<style>
+.icon.outbound {
+  color: #aaa;
+  display: inline-block;
+  vertical-align: middle;
+  position: relative;
+  top: -1px;
+}
+</style>
+
+<style lang="stylus">
+.sr-only
+  position absolute
+  width 1px
+  height 1px
+  padding 0
+  margin -1px
+  overflow hidden
+  clip rect(0, 0, 0, 0)
+  white-space nowrap
+  border-width 0
+</style>

package/components/SearchBox/dist/match-query.dev.js

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _get = _interopRequireDefault(require("lodash/get"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var _default = function _default(query, page) {
+  var additionalStr = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+  var domain = (0, _get["default"])(page, 'title', '');
+
+  if ((0, _get["default"])(page, 'frontmatter.tags')) {
+    domain += " ".concat(page.frontmatter.tags.join(' '));
+  }
+
+  if (additionalStr) {
+    domain += " ".concat(additionalStr);
+  }
+
+  return matchTest(query, domain);
+};
+
+exports["default"] = _default;
+
+var matchTest = function matchTest(query, domain) {
+  var escapeRegExp = function escapeRegExp(str) {
+    return str.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&');
+  }; // eslint-disable-next-line no-control-regex
+
+
+  var nonASCIIRegExp = new RegExp('[^\x00-\x7F]');
+  var words = query.split(/\s+/g).map(function (str) {
+    return str.trim();
+  }).filter(function (str) {
+    return !!str;
+  });
+
+  if (!nonASCIIRegExp.test(query)) {
+    // if the query only has ASCII chars, treat as English
+    var hasTrailingSpace = query.endsWith(' ');
+    var searchRegex = new RegExp(words.map(function (word, index) {
+      if (words.length === index + 1 && !hasTrailingSpace) {
+        // The last word - ok with the word being "startswith"-like
+        return "(?=.*\\b".concat(escapeRegExp(word), ")");
+      } else {
+        // Not the last word - expect the whole word exactly
+        return "(?=.*\\b".concat(escapeRegExp(word), "\\b)");
+      }
+    }).join('') + '.+', 'gi');
+    return searchRegex.test(domain);
+  } else {
+    // if the query has non-ASCII chars, treat as other languages
+    return words.some(function (word) {
+      return domain.toLowerCase().indexOf(word) > -1;
+    });
+  }
+};