dumi 2.0.0-rc.9 → 2.0.0

package/theme-default/slots/PreviewerActions/index.less

@@ -1,168 +1,167 @@
 @import (reference) '../../styles/variables.less';
 @import '../../styles/utils.less';
 
-.@{prefix}-previewer{
-    &-actions {
-        display: flex;
-        height: 32px;
-        align-items: center;
-        justify-content: center;
-    
-        &:not(:last-child) {
-          border-bottom: 1px dashed @c-border-light;
-        }
-      }
-    
-      &-action-btn {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 24px;
-        height: 24px;
-        padding: 0;
-        border: 0;
-        background: transparent;
-        cursor: pointer;
-    
-        > svg {
-          width: 16px;
-          fill: darken(@c-border, 20%);
-          transition: fill 0.2s;
-        }
-    
-        &:hover > svg {
-          fill: darken(@c-border, 30%);
-        }
-    
-        &:not(:last-child) {
-          margin-right: 4px;
-        }
-      }
-    
-      &-tabs {
-        position: relative;
-        padding: 0 12px;
-    
-        &::after {
-          content: '';
-          position: absolute;
-          left: 0;
-          bottom: 0;
-          width: 100%;
-          height: 0;
-          border-bottom: 1px dashed @c-border-light;
-        }
-      }
+.@{prefix}-previewer {
+  &-actions {
+    display: flex;
+    height: 32px;
+    align-items: center;
+    justify-content: center;
+
+    &:not(:last-child) {
+      border-bottom: 1px dashed @c-border-light;
+    }
+  }
+
+  &-action-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    cursor: pointer;
+
+    > svg {
+      width: 16px;
+      fill: darken(@c-border, 20%);
+      transition: fill 0.2s;
+    }
+
+    &:hover > svg {
+      fill: darken(@c-border, 30%);
+    }
+
+    &:not(:last-child) {
+      margin-inline-end: 4px;
+    }
+  }
+
+  &-tabs {
+    position: relative;
+    padding: 0 12px;
+
+    &::after {
+      content: '';
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      width: 100%;
+      height: 0;
+      border-bottom: 1px dashed @c-border-light;
+    }
+  }
 }
 
 .@{prefix}-tabs {
-    overflow: hidden;
-  
-    &-top {
-      flex-direction: column;
-  
-      .@{prefix}-tabs-ink-bar {
-        bottom: 0;
-      }
+  overflow: hidden;
+
+  &-top {
+    flex-direction: column;
+
+    .@{prefix}-tabs-ink-bar {
+      bottom: 0;
     }
-  
-    &-nav {
+  }
+
+  &-nav {
+    display: flex;
+
+    &-wrap {
       display: flex;
-  
-      &-wrap {
-        display: flex;
-        white-space: nowrap;
-        overflow: hidden;
-  
-        &&-ping-left {
-          box-shadow: 5px 0 5px -5px rgb(0 0 0 / 10%) inset;
-        }
-  
-        &&-ping-right ~ * > .@{prefix}-tabs-nav-more {
-          box-shadow: 0 0 5px rgb(0 0 0 / 10%);
-        }
-      }
-  
-      &-list {
-        position: relative;
-        z-index: 1;
-        display: flex;
-        transition: transform 0.2s;
+      white-space: nowrap;
+      overflow: hidden;
+
+      &&-ping-left {
+        box-shadow: 5px 0 5px -5px rgb(0 0 0 / 10%) inset;
       }
-  
-      &-more {
-        height: 100%;
-        cursor: pointer;
-        background: none;
-        border: 0;
-        transition: box-shadow 0.2s;
+
+      &&-ping-right ~ * > .@{prefix}-tabs-nav-more {
+        box-shadow: 0 0 5px rgb(0 0 0 / 10%);
       }
     }
-  
-    &-tab {
+
+    &-list {
+      position: relative;
+      z-index: 1;
       display: flex;
-      margin: 0 12px;
-  
-      &-btn {
-        padding: 0;
-        color: @c-text-secondary;
-        font-size: 14px;
-        line-height: 36px;
-        border: 0;
-        outline: none;
-        background: transparent;
-        box-sizing: border-box;
-        cursor: pointer;
-        transition: all 0.2s;
-  
-        &:hover {
-          color: @c-text;
-        }
-      }
-  
-      &-active &-btn {
+      transition: transform 0.2s;
+    }
+
+    &-more {
+      height: 100%;
+      cursor: pointer;
+      background: none;
+      border: 0;
+      transition: box-shadow 0.2s;
+    }
+  }
+
+  &-tab {
+    display: flex;
+    margin: 0 12px;
+
+    &-btn {
+      padding: 0;
+      color: @c-text-secondary;
+      font-size: 14px;
+      line-height: 36px;
+      border: 0;
+      outline: none;
+      background: transparent;
+      box-sizing: border-box;
+      cursor: pointer;
+      transition: all 0.2s;
+
+      &:hover {
         color: @c-text;
       }
     }
-  
-    &-ink-bar {
-      position: absolute;
-      height: 1px;
-      background: @c-primary;
-      transition: left 0.2s, width 0.2s;
-      pointer-events: none;
+
+    &-active &-btn {
+      color: @c-text;
     }
-  
-    &-dropdown {
-      position: absolute;
-      background: #fff;
-      border: 1px solid @c-border;
-      max-height: 200px;
-      overflow: auto;
-  
-      > ul {
-        list-style: none;
-        margin: 0;
-        padding: 0;
-  
-        > li {
-          padding: 4px 12px;
-          font-size: 14px;
-          cursor: pointer;
-  
-          &:hover {
-            color: @c-primary;
-          }
-  
-          &:not(:last-child) {
-            border-bottom: 1px dashed @c-border;
-          }
+  }
+
+  &-ink-bar {
+    position: absolute;
+    height: 1px;
+    background: @c-primary;
+    transition: left 0.2s, width 0.2s;
+    pointer-events: none;
+  }
+
+  &-dropdown {
+    position: absolute;
+    background: #fff;
+    border: 1px solid @c-border;
+    max-height: 200px;
+    overflow: auto;
+
+    > ul {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+
+      > li {
+        padding: 4px 12px;
+        font-size: 14px;
+        cursor: pointer;
+
+        &:hover {
+          color: @c-primary;
+        }
+
+        &:not(:last-child) {
+          border-bottom: 1px dashed @c-border;
         }
       }
-  
-      &-hidden {
-        display: none;
-      }
+    }
+
+    &-hidden {
+      display: none;
     }
   }
-  
+}

package/theme-default/slots/RtlSwitch/index.d.ts

@@ -0,0 +1,4 @@
+import { type FC } from 'react';
+import './index.less';
+declare const RtlSwitch: FC;
+export default RtlSwitch;

package/theme-default/slots/RtlSwitch/index.js

@@ -0,0 +1,50 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+import { useSiteData } from 'dumi';
+import React, { useEffect, useState } from 'react';
+import "./index.less";
+var LS_RTL_KEY = 'dumi:rtl';
+
+var RtlSwitch = function RtlSwitch() {
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      rtl = _useState2[0],
+      setRtl = _useState2[1];
+
+  var _useSiteData = useSiteData(),
+      themeConfig = _useSiteData.themeConfig;
+
+  useEffect(function () {
+    if (localStorage.getItem(LS_RTL_KEY)) {
+      setRtl(true);
+      document.documentElement.setAttribute('data-direction', 'rtl');
+    }
+  }, []);
+  if (!themeConfig.rtl) return null;
+  return /*#__PURE__*/React.createElement("span", {
+    className: "dumi-default-lang-switch",
+    onClick: function onClick() {
+      if (rtl) {
+        document.documentElement.removeAttribute('data-direction');
+        localStorage.removeItem(LS_RTL_KEY);
+      } else {
+        document.documentElement.setAttribute('data-direction', 'rtl');
+        localStorage.setItem(LS_RTL_KEY, '1');
+      }
+
+      setRtl(!rtl);
+    }
+  }, rtl ? 'LTR' : 'RTL');
+};
+
+export default RtlSwitch;

package/theme-default/slots/RtlSwitch/index.less

@@ -0,0 +1,5 @@
+@import '../LangSwitch/index.less';
+
+html[data-direction='rtl'] {
+  direction: rtl;
+}

package/theme-default/slots/SearchBar/index.js

@@ -80,7 +80,7 @@ var SearchBar = function SearchBar() {
       // wait for item click
       setTimeout(function () {
         setFocusing(false);
-      }, 100);
+      }, 1);
     },
     onKeyDown: function onKeyDown(ev) {
       if (['ArrowDown', 'ArrowUp'].includes(ev.key)) ev.preventDefault(); // esc to blur input
@@ -101,7 +101,7 @@ var SearchBar = function SearchBar() {
     ref: input
   }), /*#__PURE__*/React.createElement("span", {
     className: "dumi-default-search-shortcut"
-  }, symbol, " K"), keywords.trim() && focusing && /*#__PURE__*/React.createElement("div", {
+  }, symbol, " K"), keywords.trim() && focusing && (result.length || !loading) && /*#__PURE__*/React.createElement("div", {
     className: "dumi-default-search-popover"
   }, /*#__PURE__*/React.createElement("section", null, /*#__PURE__*/React.createElement(SearchResult, {
     data: result,

package/theme-default/slots/SearchBar/index.less

@@ -9,14 +9,14 @@
   }
 
   &:not(:last-child) {
-    margin-right: 28px;
+    margin-inline-end: 28px;
   }
 
   > svg {
     position: absolute;
     top: 50%;
     margin-top: 1px;
-    left: 16px;
+    inset-inline-start: 16px;
     width: 16px;
     fill: @c-text-note;
     transform: translateY(-50%);
@@ -25,7 +25,9 @@
   > input {
     width: 280px;
     height: 40px;
-    padding: 0 12px 0 40px;
+    padding: 0;
+    padding-inline-start: 40px;
+    padding-inline-end: 12px;
     color: @c-text;
     font-size: 14px;
     border: 1px solid @c-border;
@@ -49,7 +51,7 @@
   .@{prefix}-search-shortcut {
     position: absolute;
     top: 50%;
-    right: 11px;
+    inset-inline-end: 11px;
     display: inline-block;
     padding: 4px 8px;
     color: @c-text-note;
@@ -71,10 +73,10 @@
   .@{prefix}-search-popover {
     position: absolute;
     top: 100%;
-    right: 0;
+    inset-inline-end: 0;
     display: flex;
     flex-direction: column;
-    width: 600px;
+    width: 540px;
     max-height: 460px;
     margin-top: 18px;
     background-color: #fff;
@@ -85,7 +87,7 @@
       content: '';
       position: absolute;
       bottom: 100%;
-      right: 100px;
+      inset-inline-end: 100px;
       display: inline-block;
       width: 0;
       height: 0;

package/theme-default/slots/SearchResult/index.js

@@ -146,6 +146,13 @@ var SearchResult = function SearchResult(props) {
     className: "dumi-default-search-result",
     onMouseEnter: function onMouseEnter() {
       return setActiveIndex(-1);
+    } // for ux, only hide result when mouse up
+    ,
+    onMouseDownCapture: function onMouseDownCapture(ev) {
+      return ev.preventDefault();
+    },
+    onMouseUpCapture: function onMouseUpCapture() {
+      document.activeElement.blur();
     }
   }, Boolean(props.data.length || props.loading) ? /*#__PURE__*/React.createElement("dl", null, data.map(function (item, i) {
     return item.type === 'title' ? /*#__PURE__*/React.createElement("dt", {

package/theme-default/slots/SearchResult/index.less

@@ -40,7 +40,10 @@
         height: 60px;
         flex-direction: column;
         justify-content: center;
-        padding: 6px 12px 8px 54px;
+        padding-top: 6px;
+        padding-bottom: 8px;
+        padding-inline-start: 54px;
+        padding-inline-end: 12px;
         text-decoration: none;
         box-sizing: border-box;
         border-radius: 4px;
@@ -61,8 +64,8 @@
 
         > svg {
           position: absolute;
-          top: 16px;
-          left: 14px;
+          top: 14px;
+          inset-inline-start: 14px;
           width: 32px;
           height: 32px;
           fill: darken(@c-border, 5%);
@@ -79,12 +82,12 @@
 
         > h4 {
           color: @c-text-secondary;
-          font-size: 16px;
+          font-size: 14px;
         }
 
         > p {
           margin-top: 2px;
-          font-size: 14px;
+          font-size: 13px;
           color: @c-text-note;
 
           &:empty {
@@ -99,7 +102,7 @@
     color: rgb(72 70 7);
     padding: 0 2px;
     border-radius: 2px;
-    background-color: rgb(252 249 168);
+    background-color: rgb(255 249 197);
   }
 
   .@{prefix}-search-empty {
@@ -107,13 +110,13 @@
     height: 140px;
     align-items: center;
     justify-content: center;
-    color: @c-text-secondary;
+    color: @c-text-note;
     font-size: 16px;
 
     > svg {
-      margin-right: 8px;
+      margin-inline-end: 8px;
       width: 48px;
-      fill: @c-border;
+      fill: lighten(@c-text-note, 20%);
     }
   }
 }

package/theme-default/slots/Sidebar/index.less

@@ -5,7 +5,10 @@
   top: @s-header-height;
   width: @s-sidebar-width;
   max-height: calc(100vh - @s-header-height);
-  padding: 20px 32px 24px 8px;
+  padding-top: 20px;
+  padding-bottom: 24px;
+  padding-inline-start: 8px;
+  padding-inline-end: 32px;
   box-sizing: border-box;
   overflow: auto;
 
@@ -16,7 +19,7 @@
     left: 0;
     bottom: 0;
     max-height: initial;
-    padding-left: 32px;
+    padding-inline-start: 32px;
     background-color: @c-site-bg;
     border-top: 1px solid @c-border-light;
     box-shadow: 0 0 20px rgb(0 0 0 / 10%);

package/theme-default/slots/Toc/index.less

@@ -28,14 +28,14 @@
       }
 
       &.active {
-        margin-left: -1px;
+        margin-inline-start: -1px;
         color: @c-text;
         border-left: 1px solid @c-primary;
       }
     }
 
     &[data-depth='3'] > a {
-      padding-left: 20px;
+      padding-inline-start: 20px;
     }
   }
 }