@antv/dumi-theme-antv 0.2.2 → 0.3.0-beta.10

package/es/builtins/Previewer.less

@@ -1,406 +0,0 @@
-@import (reference) '../style/variables.less';
-
-.@{prefix}-previewer {
-  background-color: #fff;
-  border: 1px solid @c-border;
-  border-radius: 1px;
-
-  [data-prefers-color=dark] & {
-    background-color: @c-bg-dark;
-    border-color: @c-border-dark;
-  }
-
-  &[data-debug] {
-    margin-top: 32px;
-    border-color: #ffcb00;
-
-    &::before {
-      content: 'DEV ONLY';
-      float: left;
-      margin-left: -1px;
-      margin-top: -18px;
-      padding: 3px 6px;
-      font-size: 12px;
-      line-height: 1;
-      background-color: #ffcb00;
-      color: #735600;
-      text-shadow: 0.5px 0.5px 0 rgba(255, 255, 255, 0.5);
-      border-top-left-radius: 1px;
-      border-top-right-radius: 1px;
-    }
-  }
-
-  &[data-iframe] {
-    .@{prefix}-previewer-browser-nav {
-      padding: 2px 6px;
-      background-color: @c-border;
-
-      &::before {
-        @s-btn: 12px;
-        @s-btn-gap: 8px;
-
-        content: '';
-        display: inline-block;
-        width: @s-btn;
-        height: @s-btn;
-        border-radius: 50%;
-        background-color: #fd6458;
-        box-shadow: (@s-btn + @s-btn-gap) 0 0 #ffbf2b, (@s-btn + @s-btn-gap) * 2 0 0 #24cc3d;
-      }
-    }
-
-    .@{prefix}-previewer-demo > iframe {
-      border: 0;
-      width: 100%;
-      height: 300px;
-    }
-  }
-
-  + .@{prefix}-previewer {
-    margin-top: 32px;
-  }
-
-  &-demo {
-    padding: 40px 24px;
-  }
-
-  &-target {
-    border-color: fade(@c-primary, 50%);
-    box-shadow: 0 0 0 5px fade(@c-primary, 5%);
-
-    [data-prefers-color=dark] & {
-      box-shadow: 0 0 0 5px fade(@c-primary, 30%);
-    }
-  }
-
-  &-desc {
-    > div:last-child {
-      padding: 1.2em 1em 1em;
-      color: @c-text;
-      border-top: 1px solid @c-border;
-
-      [data-prefers-color=dark] & {
-        border-color: @c-border-dark;
-      }
-    }
-
-    .markdown > p:first-child {
-      margin-top: 0;
-    }
-
-    .markdown > p:last-child {
-      margin-bottom: 0;
-    }
-
-    &[data-title] {
-      position: relative;
-
-      > a:first-child {
-        position: absolute;
-        top: 0;
-        left: 1em;
-        margin-left: -4px;
-        padding: 0 4px;
-        color: @c-heading;
-        font-size: inherit;
-        font-weight: 500;
-        background: linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0)) 100%;
-        transform: translateY(-50%);
-        pointer-events: auto;
-        cursor: pointer;
-
-        [data-prefers-color=dark] & {
-          color: @c-heading-dark;
-          background: linear-gradient(to top, @c-bg-dark, @c-bg-dark 50%, rgba(255, 255, 255, 0)) 100%;
-        }
-      }
-
-      &:empty {
-        padding-top: 0;
-
-        // modify action area style when only has title field
-        + .@{prefix}-previewer-actions {
-          height: 46px;
-          border-top-style: solid;
-        }
-      }
-    }
-  }
-
-  &-actions {
-    display: flex;
-    height: 40px;
-    padding: 0 1em;
-    align-items: center;
-    border-top: 1px dashed @c-border;
-
-    [data-prefers-color=dark] & {
-      border-color: @c-border-dark;
-    }
-
-    > a:not(:last-child),
-    > button:not(:last-child) {
-      margin-right: 8px;
-    }
-
-    > a {
-      display: flex;
-    }
-
-    button {
-      position: relative;
-      display: inline-block;
-      width: 16px;
-      height: 16px;
-      padding: 0;
-      border: 0;
-      box-sizing: border-box;
-      cursor: pointer;
-      opacity: 0.6;
-      outline: none;
-      transition: opacity 0.2s, background 0.2s;
-
-      [data-prefers-color=dark] & {
-        opacity: 1;
-      }
-
-      // expand click area
-      &::after {
-        content: '';
-        position: absolute;
-        top: -8px;
-        left: -8px;
-        right: -8px;
-        bottom: -8px;
-      }
-
-      &:hover {
-        opacity: 0.8;
-      }
-
-      &:active {
-        opacity: 0.9;
-      }
-
-      &:disabled {
-        opacity: 0.2;
-        cursor: not-allowed;
-      }
-
-      &[role='codesandbox'] {
-        background-position: -18px 0;
-      }
-
-      &[role='codepen'] {
-        background-position: -36px 0;
-      }
-
-      &[role='source'] {
-        background-position: -72px 0;
-      }
-
-      &[role='change-jsx'] {
-        background-position: -90px 0;
-      }
-
-      &[role='change-tsx'] {
-        background-position: -108px 0;
-      }
-
-      &[role='open-demo'] {
-        background-position: -126px 0;
-      }
-
-      &[role='motions'] {
-        background-position: -162px 0;
-      }
-
-      &[role='sketch-component'] {
-        background-position: -182px 0;
-      }
-
-      &[role='sketch-group'] {
-        background-position: -200px 0;
-      }
-
-      &[role='copy'][data-status='ready'] {
-        background-position: -54px 0;
-      }
-
-      &[role='copy'][data-status='copied'] {
-        pointer-events: none;
-        background-position: -54px -16px;
-      }
-
-      &[role='refresh'] {
-        background-position-x: -144px;
-      }
-    }
-
-    // split action buttons by a blank node
-    > span {
-      flex: 1;
-      display: inline-block;
-    }
-  }
-
-  &-source {
-    border-top: 1px dashed @c-border;
-
-    [data-prefers-color=dark] & {
-      border-color: @c-border-dark;
-    }
-
-    &-tab {
-      border-top: 1px dashed @c-border;
-
-      [data-prefers-color=dark] & {
-        border-color: @c-border-dark;
-      }
-
-      .@{prefix}-tabs-tab-btn {
-        position: relative;
-        padding-left: 32px;
-
-        &::before,
-        &::after {
-          content: '';
-          position: absolute;
-          margin-right: 4px;
-          display: inline-block;
-          box-sizing: border-box;
-        }
-
-        &::before {
-          left: 16px;
-          top: 50%;
-          margin-top: -6px;
-          width: 10px;
-          height: 12px;
-          border: 1px solid @c-secondary;
-        }
-
-        &::after {
-          top: 50%;
-          left: 23px;
-          margin-top: -7px;
-          width: 4px;
-          height: 4px;
-          background: #fff;
-          border-bottom: 1px solid @c-secondary;
-          transform: rotate(45deg);
-          [data-prefers-color=dark] & {
-            background: @c-bg-dark;
-          }
-        }
-      }
-    }
-  }
-}
-
-.@{prefix}-tabs {
-  overflow: hidden;
-
-  &.@{prefix}-tabs-top {
-    flex-direction: column;
-
-    .@{prefix}-tabs-ink-bar {
-      bottom: 0;
-    }
-  }
-
-  &-nav {
-    display: flex;
-
-    &-wrap {
-      display: flex;
-      white-space: nowrap;
-      overflow: hidden;
-
-      &&-ping-left {
-        box-shadow: 5px 0 5px -5px rgba(0, 0, 0, 0.1) inset;
-      }
-
-      &&-ping-right ~ * > .@{prefix}-tabs-nav-more {
-        box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
-      }
-    }
-
-    &-list {
-      position: relative;
-      display: flex;
-      transition: transform 0.2s;
-    }
-
-    &-more {
-      height: 100%;
-      cursor: pointer;
-      background: none;
-      border: 0;
-      transition: box-shadow 0.2s;
-    }
-  }
-
-  &-tab {
-    display: flex;
-
-    &-btn {
-      padding: 0 16px;
-      font-size: 14px;
-      line-height: 36px;
-      border: 0;
-      outline: none;
-      background: transparent;
-      box-sizing: border-box;
-      cursor: pointer;
-
-      &:hover {
-        color: @c-primary;
-      }
-    }
-  }
-
-  &-ink-bar {
-    position: absolute;
-    height: 2px;
-    background: @c-primary;
-    transition: left 0.2s, width 0.2s;
-    pointer-events: none;
-
-    [data-prefers-color=dark] & {
-      background: @c-primary-dark;
-    }
-  }
-
-  &-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;
-    }
-  }
-}

package/es/builtins/SourceCode.d.ts

@@ -1,10 +0,0 @@
-import type { Language } from 'prism-react-renderer';
-import 'prismjs/themes/prism.css';
-import './SourceCode.less';
-export interface ICodeBlockProps {
-    code: string;
-    lang: Language;
-    showCopy?: boolean;
-}
-declare const _default: ({ code, lang, showCopy }: ICodeBlockProps) => JSX.Element;
-export default _default;

package/es/builtins/SourceCode.js

@@ -1,70 +0,0 @@
-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 { useCopy } from 'dumi/theme';
-import Highlight, { defaultProps } from 'prism-react-renderer';
-import 'prismjs/themes/prism.css';
-import React from 'react';
-import './SourceCode.less';
-/**
- * define DSL which can be highlighted as similar language
- */
-
-var SIMILAR_DSL = {
-  acss: 'css',
-  axml: 'xml'
-};
-export default (function (_ref) {
-  var code = _ref.code,
-      lang = _ref.lang,
-      _ref$showCopy = _ref.showCopy,
-      showCopy = _ref$showCopy === void 0 ? true : _ref$showCopy;
-
-  var _useCopy = useCopy(),
-      _useCopy2 = _slicedToArray(_useCopy, 2),
-      copyCode = _useCopy2[0],
-      copyStatus = _useCopy2[1];
-
-  return /*#__PURE__*/React.createElement("div", {
-    className: "__dumi-default-code-block"
-  }, /*#__PURE__*/React.createElement(Highlight, Object.assign({}, defaultProps, {
-    code: code,
-    language: SIMILAR_DSL[lang] || lang,
-    theme: undefined
-  }), function (_ref2) {
-    var className = _ref2.className,
-        style = _ref2.style,
-        tokens = _ref2.tokens,
-        getLineProps = _ref2.getLineProps,
-        getTokenProps = _ref2.getTokenProps;
-    return /*#__PURE__*/React.createElement("pre", {
-      className: className,
-      style: style
-    }, showCopy && /*#__PURE__*/React.createElement("button", {
-      className: "__dumi-default-icon __dumi-default-code-block-copy-btn",
-      "data-status": copyStatus,
-      onClick: function onClick() {
-        return copyCode(code);
-      }
-    }), tokens.map(function (line, i) {
-      return /*#__PURE__*/React.createElement("div", Object.assign({}, getLineProps({
-        line: line,
-        key: i
-      })), line.map(function (token, key) {
-        return /*#__PURE__*/React.createElement("span", Object.assign({}, getTokenProps({
-          token: token,
-          key: key
-        })));
-      }));
-    }));
-  }));
-});

package/es/builtins/SourceCode.less

@@ -1,103 +0,0 @@
-@import (reference) '../style/variables.less';
-
-.@{prefix}-code-block {
-  position: relative;
-  font-size: 14px;
-  background-color: @c-light-bg;
-
-  [data-prefers-color=dark] & {
-    color: @c-text-dark;
-    background: #262626;
-  }
-
-  & + &,
-  & + table {
-    margin-top: 16px;
-  }
-
-  > pre[class*='language-'] {
-    margin: 0;
-    background: transparent;
-
-    .token-line:not(:last-child) .plain:empty {
-      display: inline-block;
-      min-height: 1em;
-    }
-  }
-
-  &-copy-btn {
-    position: absolute;
-    top: 1.1em;
-    right: 1em;
-    display: inline-block;
-    width: 16px;
-    height: 16px;
-    padding: 0;
-    border: 0;
-    outline: none;
-    cursor: pointer;
-    opacity: 0.6;
-    transition: opacity 0.2s, background 0.2s;
-
-    &:hover {
-      opacity: 0.8;
-    }
-
-    &:active {
-      opacity: 0.9;
-    }
-
-    &[data-status='ready'] {
-      background-position: -54px 0;
-    }
-
-    &[data-status='copied'] {
-      opacity: 1;
-      pointer-events: none;
-      background-position: -54px -16px;
-    }
-  }
-
-  &:not(:hover) &-copy-btn {
-    visibility: hidden;
-    opacity: 0;
-  }
-}
-
-code[class*="language-"], pre[class*="language-"] {
-  &::selection, & ::selection{
-    color: inherit;
-  }
-}
-
-[data-prefers-color=dark] {
-  code[class*="language-"], pre[class*="language-"] {
-    color: @c-text-dark;
-    text-shadow: 0 1px #000;
-
-    &::selection, & ::selection{
-      background-color: #364a63;
-    }
-  }
-  .token.operator, .token.entity, .token.url, .language-css .token.string, .style .token.string {
-    background: transparent;
-  }
-  .token.property, .token.tag, .token.constant, .token.symbol, .token.deleted {
-    color: #f92672;
-  }
-  .token.selector, .token.attr-name, .token.string, .token.char, .token.builtin, .token.inserted {
-    color: #a6e22e;
-  }
-  .token.atrule, .token.attr-value, .token.keyword {
-    color: #e6db74;
-  }
-  .token.punctuation {
-    color: @c-text-dark;
-  }
-  .token.keyword {
-    color: #66d9ef;
-  }
-  .token.boolean, .token.number {
-    color: #ae81ff;
-  }
-}

package/es/builtins/Table.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import './Table.less';
-declare const Table: React.FC;
-export default Table;

package/es/builtins/Table.js

@@ -1,56 +0,0 @@
-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 React, { useEffect, useRef, useState } from 'react';
-import throttle from 'lodash.throttle';
-import './Table.less';
-
-var Table = function Table(_ref) {
-  var children = _ref.children;
-  var container = useRef();
-
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      leftFolded = _useState2[0],
-      setLeftFolded = _useState2[1];
-
-  var _useState3 = useState(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      rightFolded = _useState4[0],
-      setRightFolded = _useState4[1]; // watch content scroll to render folded shadow
-
-
-  useEffect(function () {
-    var elm = container.current;
-    var handler = throttle(function () {
-      setLeftFolded(elm.scrollLeft > 0);
-      setRightFolded(elm.scrollLeft < elm.scrollWidth - elm.offsetWidth);
-    }, 100);
-    handler();
-    elm.addEventListener('scroll', handler);
-    window.addEventListener('resize', handler);
-    return function () {
-      elm.removeEventListener('scroll', handler);
-      window.removeEventListener('resize', handler);
-    };
-  }, []);
-  return /*#__PURE__*/React.createElement("div", {
-    className: "__dumi-default-table"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "__dumi-default-table-content",
-    ref: container,
-    "data-left-folded": leftFolded || undefined,
-    "data-right-folded": rightFolded || undefined
-  }, /*#__PURE__*/React.createElement("table", null, children)));
-};
-
-export default Table;

package/es/builtins/Table.less

@@ -1,43 +0,0 @@
-.__dumi-default-table {
-  margin: 16px 0 32px;
-  transform: translate(0, 0);
-
-  &-content {
-    overflow: auto;
-
-    &::before,
-    &::after {
-      content: '';
-      display: block;
-      position: fixed;
-      z-index: 1;
-      top: 0;
-      bottom: 0;
-      width: 6px;
-      pointer-events: none;
-    }
-
-    &[data-left-folded]::before {
-      left: 0;
-      background-image: linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
-
-      [data-prefers-color=dark] & {
-        background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
-      }
-    }
-
-    &[data-right-folded]::after {
-      right: 0;
-      background-image: linear-gradient(to left, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
-
-      [data-prefers-color=dark] & {
-        background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
-      }
-    }
-
-    > table > thead > tr > th,
-    > table > tr > th {
-      white-space: nowrap;
-    }
-  }
-}

package/es/builtins/Tree.d.ts

@@ -1,4 +0,0 @@
-import type { ComponentProps } from 'react';
-import './Tree.less';
-declare const _default: (props: ComponentProps<'div'>) => JSX.Element;
-export default _default;