dumi 2.0.0-alpha.3 → 2.0.0-alpha.4

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

@@ -0,0 +1,30 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import { useLocation, useRouteMeta } from 'dumi';
+import React from 'react';
+import "./index.less";
+
+var Toc = function Toc() {
+  var _useLocation = useLocation(),
+      hash = _useLocation.hash;
+
+  var _useRouteMeta = useRouteMeta(),
+      toc = _useRouteMeta.toc;
+
+  return /*#__PURE__*/React.createElement("ul", {
+    className: "dumi-default-toc"
+  }, toc.map(function (item) {
+    var link = "#".concat(item.id);
+    return /*#__PURE__*/React.createElement("li", {
+      key: item.id,
+      "data-depth": item.depth
+    }, /*#__PURE__*/React.createElement("a", _extends({
+      href: link,
+      title: item.title
+    }, link === hash ? {
+      className: 'active'
+    } : {}), item.title));
+  }));
+};
+
+export default Toc;

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

@@ -0,0 +1,31 @@
+@import (reference) '../../styles/variables.less';
+
+.@{prefix}-toc {
+  list-style: none;
+  margin: 12px 0 0;
+  padding: 4px 0;
+  border-left: 1px solid @c-border;
+
+  &:empty {
+    display: none;
+  }
+
+  > li > a {
+    display: block;
+    margin: 6px 0;
+    padding: 2px 12px;
+    color: @c-text-secondary;
+    font-size: 13px;
+    line-height: 1;
+    text-decoration: none;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    &.active {
+      margin-left: -1px;
+      color: @c-text;
+      border-left: 1px solid @c-primary;
+    }
+  }
+}

package/theme-default/styles/utils.less

@@ -0,0 +1,46 @@
+[data-dumi-tooltip] {
+  position: relative;
+
+  &::before,
+  &::after {
+    position: absolute;
+    bottom: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    display: inline-block;
+    opacity: 0.7;
+    pointer-events: none;
+    transition: all 0.2s;
+  }
+
+  &::before {
+    content: attr(data-dumi-tooltip);
+    min-width: 30px;
+    margin-bottom: 8px;
+    padding: 6px 12px;
+    color: #fff;
+    font-size: 13px;
+    line-height: 1.2;
+    white-space: nowrap;
+    background-color: #000;
+    border-radius: 2px;
+    box-shadow: 0 4px 10px rgb(0 0 0 / 10%);
+    box-sizing: border-box;
+  }
+
+  &::after {
+    content: '';
+    width: 0;
+    height: 0;
+    border: 4px solid transparent;
+    border-top-color: #000;
+  }
+
+  &:not(:hover) {
+    &::before,
+    &::after {
+      visibility: hidden;
+      opacity: 0;
+    }
+  }
+}

package/theme-default/styles/variables.less

@@ -0,0 +1,13 @@
+@prefix: dumi-default;
+
+@s-content-width: 1392px;
+@s-sidebar-width: 184px;
+
+@c-primary: #1677ff;
+@c-text: #333;
+@c-text-secondary: #666;
+@c-text-note: #999;
+@c-border: #d0d5d8;
+@c-border-light: #e4e9ec;
+@c-site-bg: #f7f9fb;
+@c-warning: #dd9600;

package/theme-default/builtins/Previewer.js

@@ -1,11 +0,0 @@
-import React from 'react';
-
-var Previewer = function Previewer(props) {
-  return /*#__PURE__*/React.createElement("div", {
-    style: {
-      border: '1px solid #eee'
-    }
-  }, props.children);
-};
-
-export default Previewer;