@difizen/libro-common 0.3.4 → 1.0.0

package/es/react/resize/styles/index.less

@@ -0,0 +1,83 @@
+@import '../../styles/variables.less';
+
+@resize-prefix-cls: ~'@{mana-prefix}-resize';
+
+.@{resize-prefix-cls} {
+  &-handle-horizontal {
+    position: relative;
+    z-index: 2;
+    width: 4px;
+    height: 100%;
+    margin-right: -2px;
+    margin-left: -2px;
+    background: transparent;
+    cursor: col-resize;
+    transition: background-color 0.1s ease-out;
+
+    &:hover {
+      background-color: #167cdb;
+    }
+
+    &:hover.with-color::before {
+      background: none;
+    }
+
+    &::before {
+      position: absolute;
+      top: 0;
+      left: 2px;
+      width: 1px;
+      height: 100%;
+      content: '';
+    }
+  }
+
+  &-handle-vertical {
+    position: relative;
+    z-index: 2;
+    width: 100%;
+    height: 4px;
+    margin-top: -2px;
+    margin-bottom: -2px;
+    background: transparent;
+    cursor: row-resize;
+    transition: background-color 0.1s ease-out;
+
+    &:hover {
+      background-color: #167cdb;
+    }
+
+    &:hover.with-color::before {
+      background: none;
+    }
+
+    &::before {
+      position: absolute;
+      top: 2px;
+      left: 0;
+      width: 100%;
+      height: 1px;
+      content: '';
+    }
+  }
+
+  &-overflow-hidden {
+    overflow: hidden !important;
+  }
+
+  &-with-color::before {
+    background: #43484d;
+  }
+
+  &-active {
+    background-color: #167cdb;
+  }
+
+  &-active.with-color::before {
+    background: none;
+  }
+
+  &-no-resize {
+    cursor: auto;
+  }
+}

package/es/react/styles/variables.less

@@ -0,0 +1,2 @@
+@mana-prefix: mana;
+@iconfont-css-prefix: anticon;

package/es/react/tabs/index.d.ts

@@ -0,0 +1,19 @@
+import type { TabsProps as RcTabsProps } from 'rc-tabs';
+import { TabPane } from 'rc-tabs';
+import * as React from 'react';
+import './styles/index.less';
+export type { TabPaneProps } from 'rc-tabs';
+export type TabsType = 'line' | 'card' | 'editable-card';
+export type TabsPosition = 'top' | 'right' | 'bottom' | 'left';
+export interface TabsProps extends Omit<RcTabsProps, 'editable'> {
+    type?: TabsType;
+    hideAdd?: boolean;
+    centered?: boolean;
+    addIcon?: React.ReactNode;
+    onEdit?: (e: React.MouseEvent | React.KeyboardEvent | string, action: 'add' | 'remove') => void;
+}
+interface Tabs extends React.FC<TabsProps> {
+    TabPane: typeof TabPane;
+}
+export declare const Tabs: Tabs;
+//# sourceMappingURL=index.d.ts.map

package/es/react/tabs/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/react/tabs/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,IAAI,WAAW,EAAE,MAAM,SAAS,CAAC;AACxD,OAAe,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAE1C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,qBAAqB,CAAC;AAE7B,YAAY,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAC5C,MAAM,MAAM,QAAQ,GAAG,MAAM,GAAG,MAAM,GAAG,eAAe,CAAC;AACzD,MAAM,MAAM,YAAY,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE/D,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,WAAW,EAAE,UAAU,CAAC;IAC9D,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,CAAC,EAAE,CACP,CAAC,EAAE,KAAK,CAAC,UAAU,GAAG,KAAK,CAAC,aAAa,GAAG,MAAM,EAClD,MAAM,EAAE,KAAK,GAAG,QAAQ,KACrB,IAAI,CAAC;CACX;AAED,UAAU,IAAK,SAAQ,KAAK,CAAC,EAAE,CAAC,SAAS,CAAC;IACxC,OAAO,EAAE,OAAO,OAAO,CAAC;CACzB;AAED,eAAO,MAAM,IAAI,EAAE,IA2ClB,CAAC"}

package/es/react/tabs/index.js

@@ -0,0 +1,51 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _excluded = ["type", "className", "onEdit", "hideAdd", "centered", "addIcon"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import { EllipsisOutlined, CloseOutlined, PlusOutlined } from '@ant-design/icons';
+import classNames from 'classnames';
+import RcTabs, { TabPane } from 'rc-tabs';
+import * as React from 'react';
+import { getPrefixCls } from "../util";
+import "./styles/index.less";
+import { jsx as _jsx } from "react/jsx-runtime";
+export var Tabs = function Tabs(_ref) {
+  var type = _ref.type,
+    className = _ref.className,
+    _onEdit = _ref.onEdit,
+    hideAdd = _ref.hideAdd,
+    centered = _ref.centered,
+    addIcon = _ref.addIcon,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _props$moreIcon = props.moreIcon,
+    moreIcon = _props$moreIcon === void 0 ? /*#__PURE__*/_jsx(EllipsisOutlined, {}) : _props$moreIcon;
+  // const { getPrefixCls, direction } = React.useContext(ConfigContext);
+  var prefixCls = getPrefixCls('tabs');
+  var editable;
+  if (type === 'editable-card') {
+    editable = {
+      onEdit: function onEdit(editType, _ref2) {
+        var key = _ref2.key,
+          event = _ref2.event;
+        _onEdit === null || _onEdit === void 0 || _onEdit(editType === 'add' ? event : key, editType);
+      },
+      removeIcon: /*#__PURE__*/_jsx(CloseOutlined, {}),
+      addIcon: addIcon || /*#__PURE__*/_jsx(PlusOutlined, {}),
+      showAdd: hideAdd !== true
+    };
+  }
+  return /*#__PURE__*/_jsx(RcTabs
+  // direction={direction}
+  , _objectSpread(_objectSpread({}, props), {}, {
+    className: classNames(_defineProperty(_defineProperty(_defineProperty({}, "".concat(prefixCls, "-card"), ['card', 'editable-card'].includes(type)), "".concat(prefixCls, "-editable-card"), type === 'editable-card'), "".concat(prefixCls, "-centered"), centered), className),
+    editable: editable,
+    moreIcon: moreIcon,
+    prefixCls: prefixCls
+  }));
+};
+Tabs.TabPane = TabPane;

package/es/react/tabs/styles/card.less

@@ -0,0 +1,111 @@
+@import '../../styles/variables.less';
+
+@tab-prefix-cls: ~'@{mana-prefix}-tabs';
+
+.@{tab-prefix-cls}-card {
+  > .@{tab-prefix-cls}-nav,
+  > div > .@{tab-prefix-cls}-nav {
+    .@{tab-prefix-cls}-tab {
+      margin: 0;
+      padding: 4px 4px 4px 8px;
+      background-color: var(--mana-tab-inactiveBackground);
+      border-top: none;
+      border-right: 1px solid var(--mana-tab-border);
+      border-bottom: none;
+      box-sizing: border-box;
+      height: 31px;
+      transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+
+      &-active {
+        color: var(--mana-primary-color);
+        background-color: var(--mana-tab-activeBackground);
+        border-top: 1px solid var(--mana-tab-activeBorder);
+
+        .mana-tabs-tab-btn {
+          color: var(--mana-tab-activeForeground);
+          text-shadow: none;
+        }
+      }
+
+      &-tab-btn {
+        color: var(--mana-tab-inactiveForeground);
+      }
+    }
+
+    .@{tab-prefix-cls}-ink-bar {
+      visibility: hidden;
+    }
+  }
+
+  // ========================== Top & Bottom ==========================
+  &.@{tab-prefix-cls}-top,
+  &.@{tab-prefix-cls}-bottom {
+    > .@{tab-prefix-cls}-nav,
+    > div > .@{tab-prefix-cls}-nav {
+      .@{tab-prefix-cls}-tab + .@{tab-prefix-cls}-tab {
+        margin-left: 0;
+      }
+    }
+  }
+
+  &.@{tab-prefix-cls}-top {
+    > .@{tab-prefix-cls}-nav,
+    > div > .@{tab-prefix-cls}-nav {
+      .@{tab-prefix-cls}-tab {
+        border-radius: 0;
+
+        &-active {
+          border-bottom-color: var(--mana-color-bg-container);
+        }
+      }
+    }
+  }
+  &.@{tab-prefix-cls}-bottom {
+    > .@{tab-prefix-cls}-nav,
+    > div > .@{tab-prefix-cls}-nav {
+      .@{tab-prefix-cls}-tab {
+        border-radius: 0 0 2px 2px;
+
+        &-active {
+          border-top-color: var(--mana-color-bg-container);
+        }
+      }
+    }
+  }
+
+  // ========================== Left & Right ==========================
+  &.@{tab-prefix-cls}-left,
+  &.@{tab-prefix-cls}-right {
+    > .@{tab-prefix-cls}-nav,
+    > div > .@{tab-prefix-cls}-nav {
+      .@{tab-prefix-cls}-tab + .@{tab-prefix-cls}-tab {
+        margin-top: 0;
+      }
+    }
+  }
+
+  &.@{tab-prefix-cls}-left {
+    > .@{tab-prefix-cls}-nav,
+    > div > .@{tab-prefix-cls}-nav {
+      .@{tab-prefix-cls}-tab {
+        border-radius: 2px 0 0 2px;
+
+        &-active {
+          border-right-color: var(--mana-color-bg-container);
+        }
+      }
+    }
+  }
+  &.@{tab-prefix-cls}-right {
+    > .@{tab-prefix-cls}-nav,
+    > div > .@{tab-prefix-cls}-nav {
+      .@{tab-prefix-cls}-tab {
+        border-radius: 0 2px 2px 0;
+
+        &-active {
+          border-left-color: var(--mana-color-bg-container);
+        }
+      }
+    }
+  }
+}

package/es/react/tabs/styles/dropdown.less

@@ -0,0 +1,70 @@
+@import '../../styles/variables.less';
+
+@tab-prefix-cls: ~'@{mana-prefix}-tabs';
+
+.@{tab-prefix-cls}-dropdown {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  color: var(--mana-text-color);
+  font-size: 14px;
+  font-variant: tabular-nums;
+  line-height: 1.5715;
+  list-style: none;
+  font-feature-settings: 'tnum';
+  position: absolute;
+  top: -9999px;
+  left: -9999px;
+  z-index: 1050;
+  display: block;
+
+  &-hidden {
+    display: none;
+  }
+
+  &-menu {
+    max-height: 200px;
+    margin: 0;
+    padding: 4px 0;
+    overflow-x: hidden;
+    overflow-y: auto;
+    text-align: left;
+    list-style-type: none;
+    background-color: var(--mana-color-bg-container);
+    background-clip: padding-box;
+    border-radius: 2px;
+    outline: none;
+    box-shadow:
+      0 3px 6px -4px rgba(0, 0, 0, 12%),
+      0 6px 16px 0 rgba(0, 0, 0, 8%),
+      0 9px 28px 8px rgba(0, 0, 0, 5%);
+
+    &-item {
+      min-width: 120px;
+      margin: 0;
+      padding: 5px 12px;
+      overflow: hidden;
+      color: var(--mana-text-color);
+      font-weight: normal;
+      font-size: 14px;
+      line-height: 22px;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      cursor: pointer;
+      transition: all 0.3s;
+
+      &:hover {
+        background: #f5f5f5;
+      }
+
+      &-disabled {
+        &,
+        &:hover {
+          color: var(--mana-text-quaternary);
+          background: transparent;
+          cursor: not-allowed;
+        }
+      }
+    }
+  }
+}

package/es/react/tabs/styles/index.less

@@ -0,0 +1,231 @@
+@import './position';
+@import './dropdown';
+@import './card';
+@import '../../styles/variables.less';
+
+@tab-prefix-cls: ~'@{mana-prefix}-tabs';
+
+.@{tab-prefix-cls} {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  color: var(--mana-text-color);
+  font-size: 14px;
+  font-variant: tabular-nums;
+  line-height: 1.5715;
+  list-style: none;
+  font-feature-settings: 'tnum';
+  display: flex;
+  overflow: hidden;
+
+  // ========================== Navigation ==========================
+  > .@{tab-prefix-cls}-nav,
+  > div > .@{tab-prefix-cls}-nav {
+    position: relative;
+    display: flex;
+    flex: none;
+    align-items: center;
+
+    .@{tab-prefix-cls}-nav-wrap {
+      position: relative;
+      display: inline-block;
+      display: flex;
+      flex: auto;
+      align-self: stretch;
+      overflow: hidden;
+      white-space: nowrap;
+      transform: translate(0); // Fix chrome render bug
+
+      // >>>>> Ping shadow
+      &::before,
+      &::after {
+        position: absolute;
+        z-index: 1;
+        opacity: 0;
+        transition: opacity 0.3s;
+        content: '';
+        pointer-events: none;
+      }
+    }
+
+    .@{tab-prefix-cls}-nav-list {
+      position: relative;
+      display: flex;
+      transition: transform 0.3s;
+    }
+
+    // >>>>>>>> Operations
+    .@{tab-prefix-cls}-nav-operations {
+      display: flex;
+      align-self: stretch;
+
+      &-hidden {
+        position: absolute;
+        visibility: hidden;
+        pointer-events: none;
+      }
+    }
+
+    .@{tab-prefix-cls}-nav-more {
+      position: relative;
+      padding: 16px;
+      background: transparent;
+      border: 0;
+
+      &::after {
+        position: absolute;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        height: 5px;
+        transform: translateY(100%);
+        content: '';
+      }
+    }
+
+    .@{tab-prefix-cls}-nav-add {
+      min-width: 28px;
+      margin-left: 0;
+      padding: 0 8px;
+      background: hsv(0, 0, 98%);
+      border: 1px solid hsv(0, 0, 94%);
+      border-radius: 2px 2px 0 0;
+      outline: none;
+      cursor: pointer;
+      transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+
+      &:hover {
+        color: var(--mana-text-color);
+      }
+
+      &:active,
+      &:focus {
+        color: var(--mana-text-color);
+      }
+    }
+  }
+
+  &-extra-content {
+    flex: none;
+  }
+
+  &-centered {
+    > .@{tab-prefix-cls}-nav,
+    > div > .@{tab-prefix-cls}-nav {
+      .@{tab-prefix-cls}-nav-wrap {
+        &:not([class*='@{tab-prefix-cls}-nav-wrap-ping']) {
+          justify-content: center;
+        }
+      }
+    }
+  }
+
+  // ============================ InkBar ============================
+  &-ink-bar {
+    position: absolute;
+    background: var(--mana-primary-color);
+    pointer-events: none;
+  }
+
+  // ============================= Tabs =============================
+  &-tab {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    padding: 12px 0;
+    font-size: 14px;
+    background: transparent;
+    border: 0;
+    outline: none;
+    cursor: pointer;
+
+    &-btn,
+    &-remove {
+      &:focus,
+      &:active {
+        color: var(--mana-text-color);
+      }
+    }
+
+    &-btn {
+      outline: none;
+      transition: all 0.3s;
+    }
+
+    &-remove {
+      flex: none;
+      margin-right: -4px;
+      margin-left: 8px;
+      color: var(--mana-text-secondary);
+      font-size: 12px;
+      background: transparent;
+      border: none;
+      outline: none;
+      cursor: pointer;
+      transition: all 0.3s;
+
+      &:hover {
+        color: var(--mana-text-color);
+      }
+    }
+
+    &:hover {
+      color: var(--mana-text-color);
+      background-color: var(--mana-sideBar-background);
+    }
+
+    &&-tab-active:hover {
+      background-color: var(--mana-sideBar-background);
+    }
+
+    &&-active &-btn {
+      color: var(--mana-activityBar-foreground);
+      // color: @tabs-highlight-color;
+      text-shadow: 0 0 0.25px currentcolor;
+    }
+
+    &&-disabled {
+      color: var(--mana-text-quaternary);
+      cursor: not-allowed;
+    }
+
+    &&-disabled &-btn,
+    &&-disabled &-remove {
+      &:focus,
+      &:active {
+        color: var(--mana-text-quaternary);
+      }
+    }
+
+    & &-remove .@{iconfont-css-prefix} {
+      margin: 0;
+    }
+  }
+
+  &-tab + &-tab {
+    margin: 0 0 0 32px;
+  }
+
+  // =========================== TabPanes ===========================
+  &-content {
+    &-holder {
+      flex: auto;
+      min-width: 0;
+      min-height: 0;
+    }
+
+    display: flex;
+    width: 100%;
+    height: 100%;
+
+    &-animated {
+      transition: margin 0.3s;
+    }
+  }
+
+  &-tabpane {
+    flex: none;
+    width: 100%;
+    outline: none;
+  }
+}