@king-design/intact 3.3.1 → 3.3.3

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

@@ -0,0 +1,312 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
+import _repeatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/repeat";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import _fillInstanceProperty from "@babel/runtime-corejs3/core-js/instance/fill";
+import { Component, createRef } from 'intact';
+import template from './index.vdt';
+// A canvas box to show bezier curve
+var Bezier = /*#__PURE__*/function () {
+  function Bezier(opts) {
+    this.wrapper = null;
+    this.opts = null;
+    this.canvas = null;
+    this.pen = null;
+    this.start = [0, 0];
+    this.end = [0, 0];
+    this.leftTop = [0, 0];
+    this.rightBottom = [0, 0];
+    this.pointA = [0, 0];
+    this.pointB = [0, 0];
+    // Padding of canvas
+    this.padding = 20;
+    this.pointRadius = 6;
+    this.w = 0;
+    this.h = 0;
+    this.pointColor = '#0191EA';
+    this.topLevel = 'pointA';
+    this.staticLineColor = '#ddd';
+    this.renderAble = false;
+    this.wrapper = opts.wrapper;
+    this.opts = opts;
+    this.init();
+  }
+  var _proto = Bezier.prototype;
+  _proto.init = function init() {
+    this.canvas = document.createElement('canvas');
+    this.canvas.width = this.wrapper.clientWidth;
+    this.canvas.height = this.wrapper.clientHeight;
+    this.canvas.style.background = '#ffffff';
+    this.pen = this.canvas.getContext('2d');
+    this.pen.fillStyle = '#ffffff';
+    this.pen.fillRect(0, 0, this.canvas.width, this.canvas.height);
+    this.wrapper.appendChild(this.canvas);
+    this.initEvent();
+    this.initCoordinate();
+    this.render();
+  };
+  _proto.initEvent = function initEvent() {
+    var _this = this;
+    this.canvas.onmousedown = function (e) {
+      var pointASelected = false;
+      var pointBSelected = false;
+      var x1 = Math.abs(e.layerX - _this.pointA[0]);
+      var y1 = Math.abs(e.layerY - _this.pointA[1]);
+      var x2 = Math.abs(e.layerX - _this.pointB[0]);
+      var y2 = Math.abs(e.layerY - _this.pointB[1]);
+      pointASelected = Math.pow(x1, 2) + Math.pow(y1, 2) < Math.pow(_this.pointRadius, 2);
+      pointBSelected = Math.pow(x2, 2) + Math.pow(y2, 2) < Math.pow(_this.pointRadius, 2);
+      if (pointASelected && pointBSelected) {
+        pointASelected = pointASelected && _this.topLevel === 'pointA';
+        pointBSelected = pointBSelected && _this.topLevel === 'pointB';
+      } else {
+        pointASelected && (_this.topLevel = 'pointA');
+        pointBSelected && (_this.topLevel = 'pointB');
+      }
+      _this.renderAble = pointASelected || pointBSelected;
+      _this.canvas.onmousemove = function (e) {
+        var x = e.layerX > _this.end[0] ? _this.end[0] : e.layerX < _this.start[0] ? _this.start[0] : e.layerX;
+        var y = e.layerY > _this.start[1] ? _this.start[1] : e.layerY < _this.end[1] ? _this.end[1] : e.layerY;
+        if (pointASelected) {
+          _this.pointA = [x, y];
+        }
+        if (pointBSelected) {
+          _this.pointB = [x, y];
+        }
+        if (_this.renderAble) {
+          _this.render();
+        }
+      };
+      document.onmouseup = function () {
+        _this.canvas.onmousemove = null;
+        document.onmouseup = null;
+        if (_this.renderAble) {
+          var _this$opts, _this$opts2;
+          ((_this$opts = _this.opts) == null ? void 0 : _this$opts.onValueChange) && ((_this$opts2 = _this.opts) == null ? void 0 : _this$opts2.onValueChange(_this.getFmtValue()));
+          _this.renderAble = false;
+        }
+      };
+    };
+  };
+  _proto.initCoordinate = function initCoordinate() {
+    this.w = this.canvas.width - 2 * this.padding;
+    this.h = this.canvas.height - 2 * this.padding;
+    this.start = [this.padding, this.h + this.padding];
+    this.end = [this.padding + this.w, this.padding];
+    this.leftTop = [this.padding, this.padding];
+    this.rightBottom = [this.padding + this.w, this.padding + this.h];
+    // default
+    this.setPoint(.5, 0, .5, 1);
+  };
+  _proto.render = function render() {
+    this.clear();
+    this.drawStatic();
+    this.renderText();
+    this.drawPoint();
+    this.drawBezier();
+    this.drawEndPoint();
+  };
+  _proto.renderText = function renderText() {
+    var _context, _context2;
+    var pen = this.pen;
+    var canvas = this.canvas;
+    var _this$getValue$map = _mapInstanceProperty(_context = this.getValue()).call(_context, function (i) {
+        return i == 1 ? '1.0' : i.toFixed(2).substring(1);
+      }),
+      x1 = _this$getValue$map[0],
+      y1 = _this$getValue$map[1],
+      x2 = _this$getValue$map[2],
+      y2 = _this$getValue$map[3];
+    pen.font = "12px Arial";
+    pen.fillStyle = '#000';
+    var space = _repeatInstanceProperty(_context2 = ' ').call(_context2, 8);
+    var brackets = "(" + space + "," + space + ")";
+    pen.fillText(brackets, this.padding, this.padding - 8);
+    pen.fillText(brackets, canvas.width - 60 - this.padding, canvas.height - 8);
+    pen.fillStyle = '#FF7F22';
+    pen.fillText(x2 + "    " + y2, this.padding + 10, this.padding - 7);
+    pen.fillText(x1 + "    " + y1, canvas.width - 60 - this.padding + 8, canvas.height - 7);
+  };
+  _proto.drawStatic = function drawStatic() {
+    // Coordinate axis
+    this.line(this.start, this.leftTop, this.staticLineColor, 1);
+    this.line(this.start, this.rightBottom, this.staticLineColor, 1);
+    // Background dash line
+    var size = (this.start[1] - this.leftTop[1]) / 5;
+    for (var i = 0; i < 5; i++) {
+      var y = this.start[1] - (i + 1) * size;
+      var x1 = this.start[0];
+      var x2 = this.rightBottom[0];
+      this.dashLine(x1, y, x2, y, this.staticLineColor, 1);
+    }
+  };
+  _proto.drawPoint = function drawPoint() {
+    // Point a
+    this.line(this.start, this.pointA, '#2A2A2E', 1);
+    this.arc(this.pointA, this.pointRadius, this.pointColor, this.pointColor);
+    // Point b
+    this.line(this.end, this.pointB, '#2A2A2E', 1);
+    this.arc(this.pointB, this.pointRadius, this.pointColor, this.pointColor);
+  };
+  _proto.drawEndPoint = function drawEndPoint() {
+    // End point
+    this.arc(this.start, 5, '#AEAEAE', '#fff');
+    this.arc(this.end, 5, '#AEAEAE', '#fff');
+  };
+  _proto.setPoint = function setPoint(x1, y1, x2, y2) {
+    this.pointA = this.calcCoordinate([x1 * this.w, (1 - y1) * this.h]);
+    this.pointB = this.calcCoordinate([x2 * this.w, (1 - y2) * this.h]);
+  };
+  _proto.calcCoordinate = function calcCoordinate(coordinate) {
+    var _this2 = this;
+    return _mapInstanceProperty(coordinate).call(coordinate, function (i) {
+      return i + _this2.padding;
+    });
+  };
+  _proto.getValue = function getValue() {
+    var _this3 = this,
+      _context3;
+    var format = function format(point) {
+      return [Number(((point[0] - _this3.padding) / _this3.w).toFixed(2)), Number((1 - (point[1] - _this3.padding) / _this3.w).toFixed(2))];
+    };
+    return _concatInstanceProperty(_context3 = []).call(_context3, format(this.pointA), format(this.pointB));
+  };
+  _proto.getFmtValue = function getFmtValue() {
+    var _context4;
+    return _mapInstanceProperty(_context4 = this.getValue()).call(_context4, function (i) {
+      return Number(i.toFixed(2));
+    });
+  };
+  _proto.line = function line(pointA, pointB, color, lineWidth) {
+    if (color === void 0) {
+      color = '#000';
+    }
+    if (lineWidth === void 0) {
+      lineWidth = 2;
+    }
+    var startX = pointA[0],
+      startY = pointA[1];
+    var endX = pointB[0],
+      endY = pointB[1];
+    var pen = this.pen;
+    pen.beginPath();
+    pen.setLineDash([]);
+    pen.lineWidth = lineWidth;
+    pen.strokeStyle = color;
+    pen.moveTo(startX, startY);
+    pen.lineTo(endX, endY);
+    pen.stroke();
+  };
+  _proto.dashLine = function dashLine(startX, startY, endX, endY, color, lineWidth) {
+    if (color === void 0) {
+      color = '#000';
+    }
+    if (lineWidth === void 0) {
+      lineWidth = 2;
+    }
+    var pen = this.pen;
+    pen.beginPath();
+    pen.setLineDash([5, 5]);
+    pen.lineWidth = lineWidth;
+    pen.strokeStyle = color;
+    pen.moveTo(startX, startY);
+    pen.lineTo(endX, endY);
+    pen.stroke();
+  };
+  _proto.arc = function arc(point, r, color, bgColor) {
+    if (color === void 0) {
+      color = '#000';
+    }
+    if (bgColor === void 0) {
+      bgColor = '#000';
+    }
+    var x = point[0],
+      y = point[1];
+    var pen = this.pen;
+    pen.beginPath();
+    pen.setLineDash([]);
+    pen.arc(x, y, r, 0, 2 * Math.PI);
+    pen.lineWidth = 1;
+    pen.strokeStyle = color;
+    pen.fillStyle = bgColor;
+    _fillInstanceProperty(pen).call(pen);
+    pen.stroke();
+  };
+  _proto.drawBezier = function drawBezier() {
+    var _context5, _context6;
+    var pen = this.pen;
+    pen.beginPath();
+    pen.lineWidth = 4;
+    pen.moveTo.apply(pen, this.start);
+    var gr = pen.createLinearGradient.apply(pen, _concatInstanceProperty(_context5 = this.start).call(_context5, this.end));
+    gr.addColorStop(0, '#28BFFF');
+    gr.addColorStop(0.5, '#0139FF');
+    gr.addColorStop(1, '#28BFFF');
+    pen.strokeStyle = gr;
+    pen.bezierCurveTo.apply(pen, _concatInstanceProperty(_context6 = this.pointA).call(_context6, this.pointB, this.end));
+    pen.stroke();
+  };
+  _proto.setValue = function setValue(x1, y1, x2, y2) {
+    this.setPoint(x1, y1, x2, y2);
+    this.render();
+  };
+  _proto.clear = function clear() {
+    this.pen.clearRect(0, 0, this.canvas.width, this.canvas.height);
+  };
+  return Bezier;
+}();
+var typeDefs = {
+  value: Array
+};
+var defaults = function defaults() {
+  return {
+    value: []
+  };
+};
+export var BezierBox = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(BezierBox, _Component);
+  function BezierBox() {
+    var _context7;
+    var _this4;
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this4 = _Component.call.apply(_Component, _concatInstanceProperty(_context7 = [this]).call(_context7, args)) || this;
+    _this4.bezierBoxRef = createRef();
+    _this4.bezier = null;
+    return _this4;
+  }
+  var _proto2 = BezierBox.prototype;
+  _proto2.init = function init() {
+    var _this5 = this;
+    this.watch('value', function (coordinates) {
+      var x1 = coordinates[0],
+        y1 = coordinates[1],
+        x2 = coordinates[2],
+        y2 = coordinates[3];
+      _this5.bezier && _this5.setCoordinate(x1, y1, x2, y2);
+    });
+  };
+  _proto2.mounted = function mounted() {
+    var _this6 = this;
+    this.bezier = new Bezier({
+      wrapper: this.bezierBoxRef.value,
+      onValueChange: function onValueChange(coordinates) {
+        _this6.trigger('valueChange', coordinates);
+      }
+    });
+    var _this$get = this.get('value'),
+      x1 = _this$get[0],
+      y1 = _this$get[1],
+      x2 = _this$get[2],
+      y2 = _this$get[3];
+    this.bezier && this.setCoordinate(x1, y1, x2, y2);
+  };
+  _proto2.setCoordinate = function setCoordinate(x1, y1, x2, y2) {
+    this.bezier.setValue(x1, y1, x2, y2);
+  };
+  return BezierBox;
+}(Component);
+BezierBox.template = template;
+BezierBox.typeDefs = typeDefs;
+BezierBox.defaults = defaults;

package/es/site/src/components/BezierBox/styles.d.ts

@@ -0,0 +1 @@
+export declare function makeStyles(): string;

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

@@ -0,0 +1,5 @@
+import { css } from '@emotion/css';
+import { fullfill } from '../../styles/default';
+export function makeStyles() {
+  return /*#__PURE__*/css(fullfill(), " position:relative;");
+}

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,57 @@
+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.d.ts

@@ -0,0 +1 @@
+export declare function makeStyles(): string;

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

@@ -0,0 +1,12 @@
+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/ThemeFrame/index.d.ts

@@ -0,0 +1,15 @@
+import { Component, TypeDefs } from 'intact';
+export interface ThemeFrameProps {
+    href: string;
+    width: string | number;
+    height: string | number;
+    style: any;
+}
+export declare class ThemeFrame extends Component {
+    static template: string | import("intact").Template<any>;
+    static typeDefs: Required<TypeDefs<ThemeFrameProps>>;
+    static defaults: () => Partial<ThemeFrameProps>;
+    private frameRef;
+    reRender(val?: any): void;
+    mounted(): void;
+}

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

@@ -0,0 +1,45 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import { Component, createRef } from 'intact';
+import template from './index.vdt';
+var typeDefs = {
+  href: String,
+  width: [Number, String],
+  height: [Number, String],
+  style: Object
+};
+var defaults = function defaults() {
+  return {
+    href: '',
+    width: '',
+    height: '',
+    style: {}
+  };
+};
+export var ThemeFrame = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(ThemeFrame, _Component);
+  function ThemeFrame() {
+    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.frameRef = createRef();
+    return _this;
+  }
+  var _proto = ThemeFrame.prototype;
+  _proto.reRender = function reRender(val) {
+    this.frameRef.value.contentWindow.setValue(val);
+  };
+  _proto.mounted = function mounted() {
+    var _this2 = this;
+    this.frameRef.value.contentWindow.onload = function () {
+      _this2.reRender();
+    };
+  };
+  return ThemeFrame;
+}(Component);
+ThemeFrame.template = template;
+ThemeFrame.typeDefs = typeDefs;
+ThemeFrame.defaults = defaults;

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

@@ -0,0 +1,9 @@
+import { Component, TypeDefs } from 'intact';
+export interface WorkflowCardProps {
+    title: string;
+}
+export declare class WorkflowCard extends Component {
+    static template: string | import("intact").Template<any>;
+    static typeDefs: Required<TypeDefs<WorkflowCardProps>>;
+    static defaults: () => Partial<WorkflowCardProps>;
+}

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

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

package/es/site/src/components/WorkflowCard/styles.d.ts

@@ -0,0 +1 @@
+export declare function makeStyles(): string;

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

@@ -0,0 +1,6 @@
+import { css } from '@emotion/css';
+import global from '../../styles/default';
+import { theme } from 'kpc/styles/theme';
+export function makeStyles() {
+  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

@@ -0,0 +1,35 @@
+import { Component } from 'intact';
+export interface Demo {
+    data: Data;
+    example: boolean;
+    default: Component<any>;
+}
+export interface Data {
+    setting: Setting;
+    contents: string;
+    index: string;
+    highlighted: Highlighted[];
+}
+export interface Setting {
+    title: string;
+    order: number;
+    demo: boolean;
+}
+export interface Highlighted {
+    language: string;
+    content: string;
+    file?: string;
+}
+export interface ArticleProps {
+    demos: Demo[];
+    examples: Demo[];
+    contents: string | string[];
+}
+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

@@ -0,0 +1,107 @@
+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, render, createVNode as h } from 'intact';
+import template from './index.vdt';
+import { Blockquote } from '../blockquote';
+import { BlockquoteSlot } from '../blockquote/slot';
+var version = process.version;
+var Article = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(Article, _Component);
+  function Article() {
+    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;
+  _proto.init = function init() {
+    var _this$get = this.get(),
+      demos = _this$get.demos,
+      contents = _this$get.contents;
+    var _demos = [];
+    var examples = [];
+    demos.forEach(function (item) {
+      if (item.example) {
+        examples.push(item);
+      } else {
+        var _context2;
+        _demos.push(item);
+        // sort highlighted code
+        var orderMap = {
+          vue: 1,
+          jsx: 2,
+          ts: 3,
+          styl: 4
+        };
+        var getFile = function getFile(a) {
+          return a.file || (a.language === 'vue3' ? 'next.vue' : "index." + a.language);
+        };
+        _sortInstanceProperty(_context2 = item.data.highlighted).call(_context2, function (a, b) {
+          a.file = getFile(a);
+          b.file = getFile(b);
+          var order1 = orderMap[a.language] || 0;
+          var order2 = orderMap[b.language] || 0;
+          return order1 - order2;
+        });
+      }
+    });
+    var _contents = contents ? contents.split('<!-- example -->') : [];
+    this.set({
+      demos: _sortInstanceProperty(_demos).call(_demos, function (a, b) {
+        return a.data.setting.order - b.data.setting.order;
+      }),
+      examples: examples,
+      contents: _contents
+    });
+  };
+  _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 };
+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>;
+}