@king-design/intact 2.0.0-beta.1 → 2.0.2

package/es/site/data/docs/design/pattern-6/index.js

@@ -0,0 +1,42 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _keysInstanceProperty from "@babel/runtime-corejs3/core-js/instance/keys";
+import _startsWithInstanceProperty from "@babel/runtime-corejs3/core-js/instance/starts-with";
+import Article from '~/../src/components/article';
+import data from './index.json';
+import sidebar from '~/design.json';
+
+var r = require.context('./', true, /demos.*(index|demo).ts/);
+
+var keys = _keysInstanceProperty(r).call(r);
+
+var demos = [];
+
+for (var i = 0; i < keys.length; i++) {
+  var file = keys[i];
+  if (!_startsWithInstanceProperty(file).call(file, '.')) continue; // if we found demo.js then ignore index.js
+
+  if (/demo.ts$/.test(file)) i++;
+  demos.push(r(file));
+}
+
+var default_1 = /*#__PURE__*/function (_Article) {
+  _inheritsLoose(default_1, _Article);
+
+  function default_1() {
+    return _Article.apply(this, arguments) || this;
+  }
+
+  return default_1;
+}(Article);
+
+default_1.sidebar = sidebar;
+default_1.data = data;
+
+default_1.defaults = function () {
+  return _extends({}, Article.defaults, data, {
+    demos: demos
+  });
+};
+
+export { default_1 as default };

package/es/site/data/docs/design/{navigator → principle}/index.d.ts

@@ -2,25 +2,31 @@ import { Component } from 'intact';
 import Article from '~/../src/components/article';
 export default class extends Article {
     static sidebar: {
-        undefined: ({
+        undefined: {
             title: string;
             order: number;
             sidebar: string;
             path: string;
-            disabled?: undefined;
-        } | {
+        }[];
+        设计指南: {
             title: string;
             order: number;
             sidebar: string;
-            disabled: boolean;
+            category: string;
             path: string;
-        })[];
-        组件: {
+        }[];
+        设计评估: {
             title: string;
             order: number;
+            sidebar: string;
             category: string;
+            path: string;
+        }[];
+        设计模式: {
+            title: string;
+            order: number;
             sidebar: string;
-            disabled: boolean;
+            category: string;
             path: string;
         }[];
     };
@@ -28,9 +34,7 @@ export default class extends Article {
         setting: {
             title: string;
             order: number;
-            category: string;
             sidebar: string;
-            disabled: boolean;
         };
         contents: string;
         index: string;
@@ -45,9 +49,7 @@ export default class extends Article {
         setting: {
             title: string;
             order: number;
-            category: string;
             sidebar: string;
-            disabled: boolean;
         };
         contents: string;
         index: string;

package/es/site/data/docs/design/principle/index.js

@@ -0,0 +1,42 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _keysInstanceProperty from "@babel/runtime-corejs3/core-js/instance/keys";
+import _startsWithInstanceProperty from "@babel/runtime-corejs3/core-js/instance/starts-with";
+import Article from '~/../src/components/article';
+import data from './index.json';
+import sidebar from '~/design.json';
+
+var r = require.context('./', true, /demos.*(index|demo).ts/);
+
+var keys = _keysInstanceProperty(r).call(r);
+
+var demos = [];
+
+for (var i = 0; i < keys.length; i++) {
+  var file = keys[i];
+  if (!_startsWithInstanceProperty(file).call(file, '.')) continue; // if we found demo.js then ignore index.js
+
+  if (/demo.ts$/.test(file)) i++;
+  demos.push(r(file));
+}
+
+var default_1 = /*#__PURE__*/function (_Article) {
+  _inheritsLoose(default_1, _Article);
+
+  function default_1() {
+    return _Article.apply(this, arguments) || this;
+  }
+
+  return default_1;
+}(Article);
+
+default_1.sidebar = sidebar;
+default_1.data = data;
+
+default_1.defaults = function () {
+  return _extends({}, Article.defaults, data, {
+    demos: demos
+  });
+};
+
+export { default_1 as default };

package/es/site/data/docs/design/{tip → value}/index.d.ts

@@ -2,25 +2,31 @@ import { Component } from 'intact';
 import Article from '~/../src/components/article';
 export default class extends Article {
     static sidebar: {
-        undefined: ({
+        undefined: {
             title: string;
             order: number;
             sidebar: string;
             path: string;
-            disabled?: undefined;
-        } | {
+        }[];
+        设计指南: {
             title: string;
             order: number;
             sidebar: string;
-            disabled: boolean;
+            category: string;
             path: string;
-        })[];
-        组件: {
+        }[];
+        设计评估: {
             title: string;
             order: number;
+            sidebar: string;
             category: string;
+            path: string;
+        }[];
+        设计模式: {
+            title: string;
+            order: number;
             sidebar: string;
-            disabled: boolean;
+            category: string;
             path: string;
         }[];
     };
@@ -28,9 +34,7 @@ export default class extends Article {
         setting: {
             title: string;
             order: number;
-            category: string;
             sidebar: string;
-            disabled: boolean;
         };
         contents: string;
         index: string;
@@ -45,9 +49,7 @@ export default class extends Article {
         setting: {
             title: string;
             order: number;
-            category: string;
             sidebar: string;
-            disabled: boolean;
         };
         contents: string;
         index: string;

package/es/site/data/docs/design/value/index.js

@@ -0,0 +1,42 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _keysInstanceProperty from "@babel/runtime-corejs3/core-js/instance/keys";
+import _startsWithInstanceProperty from "@babel/runtime-corejs3/core-js/instance/starts-with";
+import Article from '~/../src/components/article';
+import data from './index.json';
+import sidebar from '~/design.json';
+
+var r = require.context('./', true, /demos.*(index|demo).ts/);
+
+var keys = _keysInstanceProperty(r).call(r);
+
+var demos = [];
+
+for (var i = 0; i < keys.length; i++) {
+  var file = keys[i];
+  if (!_startsWithInstanceProperty(file).call(file, '.')) continue; // if we found demo.js then ignore index.js
+
+  if (/demo.ts$/.test(file)) i++;
+  demos.push(r(file));
+}
+
+var default_1 = /*#__PURE__*/function (_Article) {
+  _inheritsLoose(default_1, _Article);
+
+  function default_1() {
+    return _Article.apply(this, arguments) || this;
+  }
+
+  return default_1;
+}(Article);
+
+default_1.sidebar = sidebar;
+default_1.data = data;
+
+default_1.defaults = function () {
+  return _extends({}, Article.defaults, data, {
+    demos: demos
+  });
+};
+
+export { default_1 as default };

package/es/site/data/docs/theme/index.d.ts

@@ -28,7 +28,6 @@ export default class extends Article {
             title: string;
             order: number;
             sidebar: string;
-            disabled: boolean;
         };
         contents: string;
         index: string;
@@ -44,7 +43,6 @@ export default class extends Article {
             title: string;
             order: number;
             sidebar: string;
-            disabled: boolean;
         };
         contents: string;
         index: string;

package/es/site/src/client.js

@@ -2,7 +2,10 @@ import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
 import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
 import router from './router';
 import { render, createVNode as h } from 'intact';
-import { history } from './history';
+import { history } from './history'; // import {localize} from 'kpc';
+// import i18n from 'kpc/i18n/en-US';
+// localize(i18n);
+
 var container = document.getElementById('page');
 var unlisten;
 

package/es/site/src/components/ImgBox/index.d.ts

@@ -0,0 +1,21 @@
+import { Component, TypeDefs } from 'intact';
+export interface ImgBoxProps {
+    imgList: any[];
+    show: boolean;
+    curImgIndex: number;
+    baseWidth: number;
+    imgWidth: number;
+}
+export interface ImgBoxEvents {
+    closebox: [boolean];
+}
+export declare class ImgBox extends Component<ImgBoxProps, ImgBoxEvents> {
+    static template: string | import("intact").Template<any>;
+    static typeDefs: Required<TypeDefs<ImgBoxProps>>;
+    static defaults: () => Partial<ImgBoxProps>;
+    handleShadowClick(): void;
+    handleLeftArrowClick(e: MouseEvent): void;
+    handleRightArrowClick(e: MouseEvent): void;
+    setBaseWidth(): void;
+    init(): void;
+}

package/es/site/src/components/ImgBox/index.js

@@ -0,0 +1,69 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import { Component } from 'intact';
+import template from './index.vdt';
+var typeDefs = {
+  imgList: Array,
+  show: Boolean,
+  curImgIndex: Number,
+  baseWidth: Number,
+  imgWidth: Number
+};
+
+var defaults = function defaults() {
+  return {
+    imgList: [],
+    show: false,
+    curImgIndex: 0,
+    baseWidth: 0,
+    imgWidth: 950
+  };
+};
+
+export var ImgBox = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(ImgBox, _Component);
+
+  function ImgBox() {
+    return _Component.apply(this, arguments) || this;
+  }
+
+  var _proto = ImgBox.prototype;
+
+  _proto.handleShadowClick = function handleShadowClick() {
+    this.trigger('closebox', false);
+    this.set('curImgIndex', 0);
+  };
+
+  _proto.handleLeftArrowClick = function handleLeftArrowClick(e) {
+    e.stopPropagation();
+    this.set('curImgIndex', this.get('curImgIndex') + 1);
+  };
+
+  _proto.handleRightArrowClick = function handleRightArrowClick(e) {
+    e.stopPropagation();
+    this.set('curImgIndex', this.get('curImgIndex') - 1);
+  };
+
+  _proto.setBaseWidth = function setBaseWidth() {
+    this.set('baseWidth', Math.round((document.body.clientWidth - this.get('imgWidth')) / 2));
+  };
+
+  _proto.init = function init() {
+    var _this = this;
+
+    var handleWindowResize = this.setBaseWidth.bind(this);
+    this.watch('show', function (v) {
+      if (v) {
+        _this.setBaseWidth();
+
+        window.addEventListener('resize', handleWindowResize);
+      } else {
+        window.removeEventListener('resize', handleWindowResize);
+      }
+    });
+  };
+
+  return ImgBox;
+}(Component);
+ImgBox.template = template;
+ImgBox.typeDefs = typeDefs;
+ImgBox.defaults = defaults;

package/es/site/src/components/ImgBox/styles.js

@@ -0,0 +1,13 @@
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+
+import { css } from '@emotion/css';
+export function makeStyles() {
+  return /*#__PURE__*/css(process.env.NODE_ENV === "production" ? {
+    name: "1clrmlx",
+    styles: "position:fixed;left:0;top:0;background:rgba(0, 0, 0, .6);z-index:1000;width:100%;height:100%;.img-wrapper{position:relative;height:100%;}.img-box{display:flex;align-items:center;transform:translateX(0px);transition:transform .5s ease-in-out;height:100%;&>div{flex-shrink:0;}.img-item{text-align:center;margin:0 25px;img{margin:0 auto;max-width:900px;max-height:calc(100vh - 100px);display:block;}}}.img-with-shadow{position:relative;display:inline-block;&>div{position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(0, 0, 0, 0.3);transition:opacity .5s ease-in-out;}&>div.active{opacity:0;}}.icon-arrow{position:absolute;top:50%;margin-top:-25px;}.icon-arrow:hover{color:#0191EA;}.arrow-left{left:150px;}.arrow-right{right:150px;}"
+  } : {
+    name: "1clrmlx",
+    styles: "position:fixed;left:0;top:0;background:rgba(0, 0, 0, .6);z-index:1000;width:100%;height:100%;.img-wrapper{position:relative;height:100%;}.img-box{display:flex;align-items:center;transform:translateX(0px);transition:transform .5s ease-in-out;height:100%;&>div{flex-shrink:0;}.img-item{text-align:center;margin:0 25px;img{margin:0 auto;max-width:900px;max-height:calc(100vh - 100px);display:block;}}}.img-with-shadow{position:relative;display:inline-block;&>div{position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(0, 0, 0, 0.3);transition:opacity .5s ease-in-out;}&>div.active{opacity:0;}}.icon-arrow{position:absolute;top:50%;margin-top:-25px;}.icon-arrow:hover{color:#0191EA;}.arrow-left{left:150px;}.arrow-right{right:150px;}",
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+  });
+}

package/es/site/src/components/WorkflowCard/styles.js

@@ -1,13 +1,6 @@
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
-
 import { css } from '@emotion/css';
+import global from '../../styles/default';
+import { theme } from 'kpc/styles/theme';
 export function makeStyles() {
-  return /*#__PURE__*/css(process.env.NODE_ENV === "production" ? {
-    name: "cox7db",
-    styles: "background:#FFFFFF;border-radius:4px;display:inline-block;.title{height:40px;line-height:40px;border-bottom:1px solid #E3E3E3;font-weight:600;font-size:14px;color:#000;padding:0 16px;}.content{padding:16px;}"
-  } : {
-    name: "cox7db",
-    styles: "background:#FFFFFF;border-radius:4px;display:inline-block;.title{height:40px;line-height:40px;border-bottom:1px solid #E3E3E3;font-weight:600;font-size:14px;color:#000;padding:0 16px;}.content{padding:16px;}",
-    toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-  });
+  return /*#__PURE__*/css("background:#FFFFFF;border-radius:4px;display:inline-block;transition:box-shadow ", theme.transition.large, ";&:hover{box-shadow:", global.cardBoxShadow, ";}.title{height:40px;line-height:40px;border-bottom:1px solid #E3E3E3;font-weight:600;font-size:14px;color:#000;padding:0 16px;}.content{padding:16px;}");
 }

package/es/site/src/components/article/index.d.ts

@@ -1,5 +1,4 @@
 import { Component } from 'intact';
-import './index.styl';
 export interface Demo {
     data: Data;
     example: boolean;
@@ -28,5 +27,9 @@ export interface ArticleProps {
 }
 export default class Article extends Component<ArticleProps> {
     static template: string | import("intact").Template<any>;
+    private blockquote;
+    private blockquoteSlot;
     init(): void;
+    mounted(): void;
+    beforeUnmount(): void;
 }

package/es/site/src/components/article/index.js

@@ -1,15 +1,28 @@
 import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
 import _sortInstanceProperty from "@babel/runtime-corejs3/core-js/instance/sort";
-import { Component } from 'intact';
+import { Component, render, createVNode as h } from 'intact';
 import template from './index.vdt';
-import './index.styl';
+import { Blockquote } from '../blockquote';
+import { BlockquoteSlot } from '../blockquote/slot';
 var version = process.version;
 
 var Article = /*#__PURE__*/function (_Component) {
   _inheritsLoose(Article, _Component);
 
   function Article() {
-    return _Component.apply(this, arguments) || this;
+    var _context;
+
+    var _this;
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
+    _this.blockquote = null;
+    _this.blockquoteSlot = null;
+    return _this;
   }
 
   var _proto = Article.prototype;
@@ -25,7 +38,7 @@ var Article = /*#__PURE__*/function (_Component) {
       if (item.example) {
         examples.push(item);
       } else {
-        var _context;
+        var _context2;
 
         _demos.push(item); // sort highlighted code
 
@@ -37,7 +50,7 @@ var Article = /*#__PURE__*/function (_Component) {
           styl: 4
         };
 
-        _sortInstanceProperty(_context = item.data.highlighted).call(_context, function (a, b) {
+        _sortInstanceProperty(_context2 = item.data.highlighted).call(_context2, function (a, b) {
           a.file = a.file || "index." + a.language;
           b.file = b.file || "index." + b.language;
           var order1 = orderMap[a.language] || 0;
@@ -58,8 +71,61 @@ var Article = /*#__PURE__*/function (_Component) {
     });
   };
 
+  _proto.mounted = function mounted() {
+    var eventDom = document.getElementById(encodeURIComponent('事件'));
+
+    if (eventDom) {
+      var blockquote = this.blockquote = document.createElement('div');
+      eventDom.parentNode.insertBefore(blockquote, eventDom.nextElementSibling);
+      render(h(Blockquote), blockquote);
+    }
+
+    var slotDom = document.getElementById(encodeURIComponent('扩展点'));
+
+    if (slotDom) {
+      var _blockquote = this.blockquoteSlot = document.createElement('div');
+
+      slotDom.parentNode.insertBefore(_blockquote, slotDom.nextElementSibling); // find the first slot name from table
+
+      var table = siblings(slotDom, 'k-table');
+      var name = null;
+
+      if (table) {
+        name = table.querySelector('tbody td').textContent;
+      }
+
+      render(h(BlockquoteSlot, {
+        name: name || 'name'
+      }), _blockquote);
+    }
+  };
+
+  _proto.beforeUnmount = function beforeUnmount() {
+    removeBlockquote(this.blockquote);
+    removeBlockquote(this.blockquoteSlot);
+  };
+
   return Article;
 }(Component);
 
 Article.template = template;
-export { Article as default };
+export { Article as default };
+
+function removeBlockquote(blockquote) {
+  if (blockquote) {
+    render(null, blockquote);
+    blockquote.parentNode.removeChild(blockquote);
+  }
+}
+
+function siblings(dom, className) {
+  var nextElementSibling = dom;
+
+  while (nextElementSibling = nextElementSibling.nextElementSibling) {
+    if (nextElementSibling.classList.contains(className)) {
+      return nextElementSibling;
+    }
+  }
+
+  return null;
+}

package/es/site/src/components/blockquote/index.d.ts

@@ -0,0 +1,4 @@
+import { Component } from 'intact';
+export declare class Blockquote extends Component {
+    static template: string | import("intact").Template<any>;
+}

package/es/site/src/components/blockquote/index.js

@@ -0,0 +1,13 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import { Component } from 'intact';
+import template from './index.vdt';
+export var Blockquote = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(Blockquote, _Component);
+
+  function Blockquote() {
+    return _Component.apply(this, arguments) || this;
+  }
+
+  return Blockquote;
+}(Component);
+Blockquote.template = template;

package/es/site/src/components/blockquote/slot.d.ts

@@ -0,0 +1,11 @@
+import { Component } from 'intact';
+interface Props {
+    name?: string;
+}
+export declare class BlockquoteSlot extends Component<Props> {
+    static template: string | import("intact").Template<any>;
+    static defaults(): {
+        name: string;
+    };
+}
+export {};

package/es/site/src/components/blockquote/slot.js

@@ -0,0 +1,19 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import { Component } from 'intact';
+import template from './slot.vdt';
+export var BlockquoteSlot = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(BlockquoteSlot, _Component);
+
+  function BlockquoteSlot() {
+    return _Component.apply(this, arguments) || this;
+  }
+
+  BlockquoteSlot.defaults = function defaults() {
+    return {
+      name: 'name'
+    };
+  };
+
+  return BlockquoteSlot;
+}(Component);
+BlockquoteSlot.template = template;

package/es/site/src/components/card/index.d.ts

@@ -8,5 +8,5 @@ export declare class Card extends Component {
     static template: string | import("intact").Template<any>;
     static typeDefs: Required<TypeDefs<CardProps>>;
     static defaults: () => Partial<CardProps>;
-    init(): void;
+    goHref(): void;
 }

package/es/site/src/components/card/index.js

@@ -1,6 +1,7 @@
 import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
 import { Component } from 'intact';
 import template from './index.vdt';
+import { Link } from '../link';
 var typeDefs = {
   mainTitle: String,
   subTitle: String,
@@ -20,7 +21,9 @@ export var Card = /*#__PURE__*/function (_Component) {
 
   var _proto = Card.prototype;
 
-  _proto.init = function init() {};
+  _proto.goHref = function goHref() {
+    Link.to(this.get('href'));
+  };
 
   return Card;
 }(Component);

package/es/site/src/components/card/styles.js

@@ -1,13 +1,5 @@
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
-
 import { css } from '@emotion/css';
+import { theme } from 'kpc/styles/theme';
 export function makeStyles() {
-  return /*#__PURE__*/css(process.env.NODE_ENV === "production" ? {
-    name: "10y768m",
-    styles: "width:590px;background:#EFF3FA;border-radius:8px;height:100%;display:inline-block;margin-right:20px;padding:24px 48px;font-family:PingFang SC;vertical-align:top;.title{height:45px;display:flex;font-weight:600;font-size:32px;color:#000000;&>div:first-child{flex-grow:1;}button{width:40px;height:40px;border-radius:50%;color:#16325C;background:#EFF3FA;border:none;.k-icon{margin-right:0;}}}.sub-title{font-size:16px;margin-top:8px;height:22px;color:#797979;}.content-box{width:100%;height:176px;margin-top:36px;}"
-  } : {
-    name: "10y768m",
-    styles: "width:590px;background:#EFF3FA;border-radius:8px;height:100%;display:inline-block;margin-right:20px;padding:24px 48px;font-family:PingFang SC;vertical-align:top;.title{height:45px;display:flex;font-weight:600;font-size:32px;color:#000000;&>div:first-child{flex-grow:1;}button{width:40px;height:40px;border-radius:50%;color:#16325C;background:#EFF3FA;border:none;.k-icon{margin-right:0;}}}.sub-title{font-size:16px;margin-top:8px;height:22px;color:#797979;}.content-box{width:100%;height:176px;margin-top:36px;}",
-    toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-  });
+  return /*#__PURE__*/css("width:590px;background:#EFF3FA;border-radius:8px;height:100%;display:inline-block;margin-right:20px;padding:24px 48px;font-family:PingFang SC;vertical-align:top;transition:box-shadow ", theme.transition.middle, ";&:hover{box-shadow:0 0 8px rgba(0, 0, 0, .15);}.title{height:45px;display:flex;font-weight:600;font-size:32px;color:#000000;&>div:first-child{flex-grow:1;}.k-btn:hover{background:#fff;}}.sub-title{font-size:16px;margin-top:8px;height:22px;color:#797979;}.content-box{width:100%;height:176px;margin-top:36px;}@media (max-width: 768px){width:auto;display:block;margin-right:0;margin-bottom:20px;padding:20px;.content-box{height:auto;}}");
 }

package/es/site/src/components/catalogue/index.js

@@ -4,7 +4,7 @@ import { __decorate } from "tslib";
 import { Component } from 'intact';
 import template from './index.vdt';
 import { bind } from 'kpc';
-var TOP = 74;
+var TOP = 84;
 export var Catalogue = /*#__PURE__*/function (_Component) {
   _inheritsLoose(Catalogue, _Component);
 
@@ -27,7 +27,7 @@ export var Catalogue = /*#__PURE__*/function (_Component) {
     var dom = document.getElementById(data.id);
     if (!dom) return;
     var top = dom.getBoundingClientRect().top + window.pageYOffset;
-    window.scrollTo(0, top - 74);
+    window.scrollTo(0, top - TOP);
   };
 
   _proto.onScroll = function onScroll() {

package/es/site/src/components/catalogue/styles.js

@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
 import { theme } from 'kpc/styles/theme';
 export function makeStyles() {
-  return /*#__PURE__*/css("position:absolute;top:0;right:-200px;width:200px;.k-affix{.k-tabs{width:100%;border-right:none;border-left:1px solid ", theme.color.border, ";.k-tab{text-align:left;}.k-tabs-active-bar{left:0;}}}.senior{font-size:14px!important;}.k-affix-wrapper{max-height:calc(100% - 120px);overflow:auto;}");
+  return /*#__PURE__*/css("position:absolute;top:0;right:-200px;width:200px;.k-affix{.k-tabs{width:100%;border-right:none;border-left:1px solid ", theme.color.border, ";.k-tab{text-align:left;height:auto;}.k-tabs-active-bar{left:0;}}}.senior{font-size:14px!important;}.k-affix-wrapper{max-height:calc(100% - 120px);overflow:auto;}");
 }