feat(space): 实现组件

Imshann
1 parent 02b41190
Showing 13 changed files with 143 additions and 33 deletions Show diff stats
build/Space/Space.html
build/Space/Space.js
build/Spin/Spin.html
build/Spin/Spin.js
build/Table/Table.html
build/index.js
dist/ng-antd.js
example/space.html
src/Space/Space.html
src/Space/Space.js
src/Spin/Spin.html
src/Table/Table.html
webpack.config.js
-<div ng-class="'es-space es-space-align-center'+(direction==='vertical'?' es-space-vertical':'')" ng-style="{gap:size+'px'}" ng-transclude></div>
 \ No newline at end of file
+<div ng-class="'ant-space ant-space-'+state.direction+' ant-space-align-center'" ng-style="{gap:state.size+'px'}"></div>
 \ No newline at end of file
-angular.module("esNgAntd").directive("esSpace", function () {
+import template from "./Space.html";
+import style from "antd/lib/space/style/index.css";
+angular.module("esNgAntd").directive("esSpace", function (esNgAntd) {
     return {
         controllerAs: "esSpace",
         restrict: "E",
@@ -8,16 +10,36 @@ angular.module(&quot;esNgAntd&quot;).directive(&quot;esSpace&quot;, function () {
             direction: "@",
             size: "@",
         },
+        template: template,
+        controller: function ($scope, $element, $attrs) {
+            this.getContext = function () {
+                return $scope;
+            };
+
+            $scope.state = {
+                direction: $scope.direction || "horizontal",
+                size: $scope.size || 8,
+            };
+        },
         link: function ($scope, $element, $attrs, $controllers, $transclude) {
-            let childrens = $elements.children();
-            $elements.empty();
-            angular.forEach(childrens, (element, index) => {
-                let item = angular
-                    .element("<div>")
-                    .addClass("es-space-item")
-                    .append(element);
-                $elements.append(item);
-            });
+            esNgAntd.createStyle("ant-space", style);
+            $element.removeAttr("ng-class");
+            $element.removeAttr("ng-style");
+            let childrens = $transclude();
+
+            for (const key in childrens) {
+                if (Object.hasOwnProperty.call(childrens, key)) {
+                    const children = childrens[key];
+
+                    if (children.nodeType === 1) {
+                        let item = angular
+                            .element("<div>")
+                            .addClass("ant-space-item")
+                            .append(children);
+                        $element.append(item);
+                    }
+                }
+            }
         },
     };
 });
 <div>
     <div ng-if="state.hasChildren" class="ant-spin-nested-loading">
-        <div ng-if="spinning!=='false'">
+        <div ng-if="spinning==='true'">
             <div ng-class="state.className">
                 <span class="ant-spin-dot ant-spin-dot-spin">
                     <i class="ant-spin-dot-item"></i>
@@ -10,7 +10,7 @@ angular.module(&quot;esNgAntd&quot;).directive(&quot;esSpin&quot;, function () {
             spinning: "@",
         },
         template: template,
-        controller: function ($scope, $element) {
+        controller: function ($scope, $element, $attrs) {
             this.getContext = function () {
                 return $scope;
             };
@@ -42,7 +42,7 @@
                                     </td>
                         </tr>
                         <tr ng-if="state.dataSource.length===0" class="ant-table-placeholder">
-                            <td colspan="{{columns.length}}">
+                            <td colspan="{{rowSelection?columns.length+1:columns.length}}">
                                 <es-empty image="presented_image_simple"></es-empty>
                             </td>
                         </tr>
@@ -29,6 +29,7 @@ require(&quot;./Table/Table&quot;);
 require("./Textarea/Textarea");
 require("./SelectOption/SelectOption");
 require("./Select/Select");
+require("./Space/Space");
 require("./Divider/Divider");
 require("./Row/Row");
 require("./Col/Col");
@@ -371,6 +371,17 @@ eval(&quot;angular.module(\&quot;esNgAntd\&quot;).directive(\&quot;esSlot\&quot;, function ($compile) {\n
  
 /***/ }),
  
+/***/ "./build/Space/Space.js":
+/*!******************************!*\
+  !*** ./build/Space/Space.js ***!
+  \******************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Space_html__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Space.html */ \"./build/Space/Space.html\");\n/* harmony import */ var antd_lib_space_style_index_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! antd/lib/space/style/index.css */ \"./node_modules/antd/lib/space/style/index.css\");\n\n\nangular.module(\"esNgAntd\").directive(\"esSpace\", function (esNgAntd) {\n    return {\n        controllerAs: \"esSpace\",\n        restrict: \"E\",\n        transclude: true,\n        replace: true,\n        scope: {\n            direction: \"@\",\n            size: \"@\",\n        },\n        template: _Space_html__WEBPACK_IMPORTED_MODULE_0__[\"default\"],\n        controller: function ($scope, $element, $attrs) {\n            this.getContext = function () {\n                return $scope;\n            };\n\n            $scope.state = {\n                direction: $scope.direction || \"horizontal\",\n                size: $scope.size || 8,\n            };\n        },\n        link: function ($scope, $element, $attrs, $controllers, $transclude) {\n            esNgAntd.createStyle(\"ant-space\", antd_lib_space_style_index_css__WEBPACK_IMPORTED_MODULE_1__[\"default\"]);\n            $element.removeAttr(\"ng-class\");\n            $element.removeAttr(\"ng-style\");\n            let childrens = $transclude();\n\n            for (const key in childrens) {\n                if (Object.hasOwnProperty.call(childrens, key)) {\n                    const children = childrens[key];\n\n                    if (children.nodeType === 1) {\n                        let item = angular\n                            .element(\"<div>\")\n                            .addClass(\"ant-space-item\")\n                            .append(children);\n                        $element.append(item);\n                    }\n                }\n            }\n        },\n    };\n});\n\n\n//# sourceURL=webpack://ng-antd/./build/Space/Space.js?");
+
+/***/ }),
+
 /***/ "./build/Spin/Spin.js":
 /*!****************************!*\
   !*** ./build/Spin/Spin.js ***!
@@ -378,7 +389,7 @@ eval(&quot;angular.module(\&quot;esNgAntd\&quot;).directive(\&quot;esSlot\&quot;, function ($compile) {\n
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
  
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Spin_html__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Spin.html */ \"./build/Spin/Spin.html\");\n\nangular.module(\"esNgAntd\").directive(\"esSpin\", function () {\n    return {\n        controllerAs: \"esSpin\",\n        restrict: \"E\",\n        transclude: true,\n        replace: true,\n        scope: {\n            size: \"@\",\n            spinning: \"@\",\n        },\n        template: _Spin_html__WEBPACK_IMPORTED_MODULE_0__[\"default\"],\n        controller: function ($scope, $element) {\n            this.getContext = function () {\n                return $scope;\n            };\n\n            $scope.state = {\n                className: [],\n                hasChildren: false,\n            };\n        },\n        link: function ($scope, $element, $attrs, $controllers, $transclude) {\n            $scope.state.className = [\"ant-spin\", \"ant-spin-spinning\"];\n            $scope.state.hasChildren = JSON.stringify($transclude()) !== \"{}\";\n\n            if ($scope.size === \"small\") {\n                $scope.state.className.splice(1, 0, \"ant-spin-sm\");\n            }\n\n            if ($scope.size === \"large\") {\n                $scope.state.className.splice(1, 0, \"ant-spin-lg\");\n            }\n        },\n    };\n});\n\n\n//# sourceURL=webpack://ng-antd/./build/Spin/Spin.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Spin_html__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Spin.html */ \"./build/Spin/Spin.html\");\n\nangular.module(\"esNgAntd\").directive(\"esSpin\", function () {\n    return {\n        controllerAs: \"esSpin\",\n        restrict: \"E\",\n        transclude: true,\n        replace: true,\n        scope: {\n            size: \"@\",\n            spinning: \"@\",\n        },\n        template: _Spin_html__WEBPACK_IMPORTED_MODULE_0__[\"default\"],\n        controller: function ($scope, $element, $attrs) {\n            this.getContext = function () {\n                return $scope;\n            };\n\n            $scope.state = {\n                className: [],\n                hasChildren: false,\n            };\n        },\n        link: function ($scope, $element, $attrs, $controllers, $transclude) {\n            $scope.state.className = [\"ant-spin\", \"ant-spin-spinning\"];\n            $scope.state.hasChildren = JSON.stringify($transclude()) !== \"{}\";\n\n            if ($scope.size === \"small\") {\n                $scope.state.className.splice(1, 0, \"ant-spin-sm\");\n            }\n\n            if ($scope.size === \"large\") {\n                $scope.state.className.splice(1, 0, \"ant-spin-lg\");\n            }\n        },\n    };\n});\n\n\n//# sourceURL=webpack://ng-antd/./build/Spin/Spin.js?");
  
 /***/ }),
  
@@ -432,7 +443,7 @@ eval(&quot;__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Tex
   \************************/
 /***/ ((__unused_webpack_module, __unused_webpack_exports, __webpack_require__) => {
  
-eval("angular.module(\"esNgAntd\", []);\n__webpack_require__(/*! ./Icon/Icon */ \"./build/Icon/Icon.js\");\n__webpack_require__(/*! ./Common/Common */ \"./build/Common/Common.js\");\n__webpack_require__(/*! ./Slot/Slot */ \"./build/Slot/Slot.js\");\n__webpack_require__(/*! ./Button/Button */ \"./build/Button/Button.js\");\n__webpack_require__(/*! ./Modal/Modal */ \"./build/Modal/Modal.js\");\n__webpack_require__(/*! ./Input/Input */ \"./build/Input/Input.js\");\n__webpack_require__(/*! ./InputGroup/InputGroup */ \"./build/InputGroup/InputGroup.js\");\n__webpack_require__(/*! ./InputNumber/InputNumber */ \"./build/InputNumber/InputNumber.js\");\n__webpack_require__(/*! ./InputSearch/InputSearch */ \"./build/InputSearch/InputSearch.js\");\n__webpack_require__(/*! ./Checkbox/Checkbox */ \"./build/Checkbox/Checkbox.js\");\n__webpack_require__(/*! ./CheckableTag/CheckableTag */ \"./build/CheckableTag/CheckableTag.js\");\n__webpack_require__(/*! ./Popover/Popover */ \"./build/Popover/Popover.js\");\n__webpack_require__(/*! ./List/List */ \"./build/List/List.js\");\n__webpack_require__(/*! ./ListItem/ListItem */ \"./build/ListItem/ListItem.js\");\n__webpack_require__(/*! ./Form/Form */ \"./build/Form/Form.js\");\n__webpack_require__(/*! ./FormItem/FormItem */ \"./build/FormItem/FormItem.js\");\n__webpack_require__(/*! ./Radio/Radio */ \"./build/Radio/Radio.js\");\n__webpack_require__(/*! ./RadioGroup/RadioGroup */ \"./build/RadioGroup/RadioGroup.js\");\n__webpack_require__(/*! ./RadioButton/RadioButton */ \"./build/RadioButton/RadioButton.js\");\n__webpack_require__(/*! ./TabPane/TabPane */ \"./build/TabPane/TabPane.js\");\n__webpack_require__(/*! ./Tabs/Tabs */ \"./build/Tabs/Tabs.js\");\n__webpack_require__(/*! ./Empty/Empty */ \"./build/Empty/Empty.js\");\n__webpack_require__(/*! ./ImagePreviewGroup/ImagePreviewGroup */ \"./build/ImagePreviewGroup/ImagePreviewGroup.js\");\n__webpack_require__(/*! ./Image/Image */ \"./build/Image/Image.js\");\n__webpack_require__(/*! ./Spin/Spin */ \"./build/Spin/Spin.js\");\n__webpack_require__(/*! ./Card/Card */ \"./build/Card/Card.js\");\n__webpack_require__(/*! ./Table/Table */ \"./build/Table/Table.js\");\n__webpack_require__(/*! ./Textarea/Textarea */ \"./build/Textarea/Textarea.js\");\n__webpack_require__(/*! ./SelectOption/SelectOption */ \"./build/SelectOption/SelectOption.js\");\n__webpack_require__(/*! ./Select/Select */ \"./build/Select/Select.js\");\n__webpack_require__(/*! ./Divider/Divider */ \"./build/Divider/Divider.js\");\n__webpack_require__(/*! ./Row/Row */ \"./build/Row/Row.js\");\n__webpack_require__(/*! ./Col/Col */ \"./build/Col/Col.js\");\n__webpack_require__(/*! ./Pagination/Pagination */ \"./build/Pagination/Pagination.js\");\n__webpack_require__(/*! ./Message/Message */ \"./build/Message/Message.js\");\n__webpack_require__(/*! ./Alert/Alert */ \"./build/Alert/Alert.js\");\n__webpack_require__(/*! ./Breadcrumb/Breadcrumb */ \"./build/Breadcrumb/Breadcrumb.js\");\n__webpack_require__(/*! ./BreadcrumbItem/BreadcrumbItem */ \"./build/BreadcrumbItem/BreadcrumbItem.js\");\n\n\n//# sourceURL=webpack://ng-antd/./build/index.js?");
+eval("angular.module(\"esNgAntd\", []);\n__webpack_require__(/*! ./Icon/Icon */ \"./build/Icon/Icon.js\");\n__webpack_require__(/*! ./Common/Common */ \"./build/Common/Common.js\");\n__webpack_require__(/*! ./Slot/Slot */ \"./build/Slot/Slot.js\");\n__webpack_require__(/*! ./Button/Button */ \"./build/Button/Button.js\");\n__webpack_require__(/*! ./Modal/Modal */ \"./build/Modal/Modal.js\");\n__webpack_require__(/*! ./Input/Input */ \"./build/Input/Input.js\");\n__webpack_require__(/*! ./InputGroup/InputGroup */ \"./build/InputGroup/InputGroup.js\");\n__webpack_require__(/*! ./InputNumber/InputNumber */ \"./build/InputNumber/InputNumber.js\");\n__webpack_require__(/*! ./InputSearch/InputSearch */ \"./build/InputSearch/InputSearch.js\");\n__webpack_require__(/*! ./Checkbox/Checkbox */ \"./build/Checkbox/Checkbox.js\");\n__webpack_require__(/*! ./CheckableTag/CheckableTag */ \"./build/CheckableTag/CheckableTag.js\");\n__webpack_require__(/*! ./Popover/Popover */ \"./build/Popover/Popover.js\");\n__webpack_require__(/*! ./List/List */ \"./build/List/List.js\");\n__webpack_require__(/*! ./ListItem/ListItem */ \"./build/ListItem/ListItem.js\");\n__webpack_require__(/*! ./Form/Form */ \"./build/Form/Form.js\");\n__webpack_require__(/*! ./FormItem/FormItem */ \"./build/FormItem/FormItem.js\");\n__webpack_require__(/*! ./Radio/Radio */ \"./build/Radio/Radio.js\");\n__webpack_require__(/*! ./RadioGroup/RadioGroup */ \"./build/RadioGroup/RadioGroup.js\");\n__webpack_require__(/*! ./RadioButton/RadioButton */ \"./build/RadioButton/RadioButton.js\");\n__webpack_require__(/*! ./TabPane/TabPane */ \"./build/TabPane/TabPane.js\");\n__webpack_require__(/*! ./Tabs/Tabs */ \"./build/Tabs/Tabs.js\");\n__webpack_require__(/*! ./Empty/Empty */ \"./build/Empty/Empty.js\");\n__webpack_require__(/*! ./ImagePreviewGroup/ImagePreviewGroup */ \"./build/ImagePreviewGroup/ImagePreviewGroup.js\");\n__webpack_require__(/*! ./Image/Image */ \"./build/Image/Image.js\");\n__webpack_require__(/*! ./Spin/Spin */ \"./build/Spin/Spin.js\");\n__webpack_require__(/*! ./Card/Card */ \"./build/Card/Card.js\");\n__webpack_require__(/*! ./Table/Table */ \"./build/Table/Table.js\");\n__webpack_require__(/*! ./Textarea/Textarea */ \"./build/Textarea/Textarea.js\");\n__webpack_require__(/*! ./SelectOption/SelectOption */ \"./build/SelectOption/SelectOption.js\");\n__webpack_require__(/*! ./Select/Select */ \"./build/Select/Select.js\");\n__webpack_require__(/*! ./Space/Space */ \"./build/Space/Space.js\");\n__webpack_require__(/*! ./Divider/Divider */ \"./build/Divider/Divider.js\");\n__webpack_require__(/*! ./Row/Row */ \"./build/Row/Row.js\");\n__webpack_require__(/*! ./Col/Col */ \"./build/Col/Col.js\");\n__webpack_require__(/*! ./Pagination/Pagination */ \"./build/Pagination/Pagination.js\");\n__webpack_require__(/*! ./Message/Message */ \"./build/Message/Message.js\");\n__webpack_require__(/*! ./Alert/Alert */ \"./build/Alert/Alert.js\");\n__webpack_require__(/*! ./Breadcrumb/Breadcrumb */ \"./build/Breadcrumb/Breadcrumb.js\");\n__webpack_require__(/*! ./BreadcrumbItem/BreadcrumbItem */ \"./build/BreadcrumbItem/BreadcrumbItem.js\");\n\n\n//# sourceURL=webpack://ng-antd/./build/index.js?");
  
 /***/ }),
  
@@ -9313,6 +9324,17 @@ eval(&quot;__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
  
 /***/ }),
  
+/***/ "./node_modules/antd/lib/space/style/index.css":
+/*!*****************************************************!*\
+  !*** ./node_modules/antd/lib/space/style/index.css ***!
+  \*****************************************************/
+/***/ ((module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../../css-loader/dist/runtime/noSourceMaps.js */ \"./node_modules/css-loader/dist/runtime/noSourceMaps.js\");\n/* harmony import */ var _css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../../css-loader/dist/runtime/api.js */ \"./node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);\n// Imports\n\n\nvar ___CSS_LOADER_EXPORT___ = _css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, \"/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */\\n/* stylelint-disable no-duplicate-selectors */\\n/* stylelint-disable */\\n/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */\\n.ant-space {\\n  display: inline-flex;\\n}\\n.ant-space-vertical {\\n  flex-direction: column;\\n}\\n.ant-space-align-center {\\n  align-items: center;\\n}\\n.ant-space-align-start {\\n  align-items: flex-start;\\n}\\n.ant-space-align-end {\\n  align-items: flex-end;\\n}\\n.ant-space-align-baseline {\\n  align-items: baseline;\\n}\\n.ant-space-item:empty {\\n  display: none;\\n}\\n.ant-space-rtl {\\n  direction: rtl;\\n}\\n\", \"\"]);\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://ng-antd/./node_modules/antd/lib/space/style/index.css?");
+
+/***/ }),
+
 /***/ "./node_modules/antd/lib/style/index.css":
 /*!***********************************************!*\
   !*** ./node_modules/antd/lib/style/index.css ***!
@@ -9617,7 +9639,7 @@ eval(&quot;__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
  
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n// Module\nvar code = \"<ul ng-class=\\\"'ant-pagination'+(size==='small'?' mini':'')\\\">\\n    <li class=\\\"ant-pagination-total-text\\\" ng-if=\\\"showTotal()\\">{{handleShowTotal()}}</li>\n    <li ng-class=\\"'ant-pagination-prev'+(state.current===1?' ant-pagination-disabled':'')\\" ng-click=\\"handlePrev()\\">\n        <button type=\\"button\\" class=\\"ant-pagination-item-link\\">\n            <es-icon type=\\"LeftOutlined\\"></es-icon>\n        </button>\n    </li>\n    <li ng-repeat=\\"(key, value) in state.pageNumList track by key\\" ng-class=\\"''+getItemLinkClassName(value)\\" ng-click=\\"handleClick(value)\\">\n            <a ng-if=\\"value!=='prev'&&value!=='next'\\">{{value}}</a>\n            <a ng-if=\\"value==='prev'||value==='next'\\" class=\\"ant-pagination-item-link\\">\n                <div class=\\"ant-pagination-item-container\\">\n                    <es-icon ng-if=\\"value==='prev'\\" type=\\"DoubleLeftOutlined\\" class=\\"ant-pagination-item-link-icon\\"></es-icon>\n                    <es-icon ng-if=\\"value==='next'\\" type=\\"DoubleRightOutlined\\" class=\\"ant-pagination-item-link-icon\\"></es-icon>\n                    <span class=\\"ant-pagination-item-ellipsis\\">•••</span>\n                </div>\n            </a>\n        </li>\n    <li ng-class=\\"'ant-pagination-next'+(state.current===state.pageNum?' ant-pagination-disabled':'')\\" ng-click=\\"handleNext()\\">\n        <button type=\\"button\\" class=\\"ant-pagination-item-link\\">\n            <es-icon type=\\"RightOutlined\\"></es-icon>\n        </button>\n    </li>\n    <li class=\\"ant-pagination-options\\">\n        <es-select ng-if=\\"showSizeChanger==='true'\\" class=\\"ant-pagination-options-size-changer\\" size=\\"{{size}}\\" value=\\"10\\" get-popup-container=\\"getPopupContainer\\" on-change=\\"handleSelectChange(value)\\">\n            <es-select-option value=\\"10\\">10 条/页</es-select-option>\n            <es-select-option value=\\"20\\">20 条/页</es-select-option>\n            <es-select-option value=\\"30\\">30 条/页</es-select-option>\n            <es-select-option value=\\"40\\">40 条/页</es-select-option>\n        </es-select>\n        <div ng-if=\\"showQuickJumper==='true'\\" class=\\"ant-pagination-options-quick-jumper\\">\n            跳至<input type=\\"text\\" ng-blur=\\"handleBlur($event)\\" ng-keypress=\\"onKeyPress($event)\\" />页\n        </div>\n    </li>\n</ul>\";\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (code);\n\n//# sourceURL=webpack://ng-antd/./build/Pagination/Pagination.html?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n// Module\nvar code = \"<ul ng-class=\\\"'ant-pagination'+(size==='small'?' mini':'')\\\">\\n    <li ng-if=\\\"showTotal()\\\" class=\\\"ant-pagination-total-text\\">{{handleShowTotal()}}</li>\n    <li ng-class=\\"'ant-pagination-prev'+(state.current===1?' ant-pagination-disabled':'')\\" ng-click=\\"handlePrev()\\">\n        <button type=\\"button\\" class=\\"ant-pagination-item-link\\">\n            <es-icon type=\\"LeftOutlined\\"></es-icon>\n        </button>\n    </li>\n    <li ng-repeat=\\"(key, value) in state.pageNumList track by key\\" ng-class=\\"''+getItemLinkClassName(value)\\" ng-click=\\"handleClick(value)\\">\n            <a ng-if=\\"value!=='prev'&&value!=='next'\\">{{value}}</a>\n            <a ng-if=\\"value==='prev'||value==='next'\\" class=\\"ant-pagination-item-link\\">\n                <div class=\\"ant-pagination-item-container\\">\n                    <es-icon ng-if=\\"value==='prev'\\" type=\\"DoubleLeftOutlined\\" class=\\"ant-pagination-item-link-icon\\"></es-icon>\n                    <es-icon ng-if=\\"value==='next'\\" type=\\"DoubleRightOutlined\\" class=\\"ant-pagination-item-link-icon\\"></es-icon>\n                    <span class=\\"ant-pagination-item-ellipsis\\">•••</span>\n                </div>\n            </a>\n        </li>\n    <li ng-class=\\"'ant-pagination-next'+(state.current===state.pageNum?' ant-pagination-disabled':'')\\" ng-click=\\"handleNext()\\">\n        <button type=\\"button\\" class=\\"ant-pagination-item-link\\">\n            <es-icon type=\\"RightOutlined\\"></es-icon>\n        </button>\n    </li>\n    <li class=\\"ant-pagination-options\\">\n        <es-select ng-if=\\"showSizeChanger==='true'\\" class=\\"ant-pagination-options-size-changer\\" size=\\"{{size}}\\" value=\\"10\\" get-popup-container=\\"getPopupContainer\\" on-change=\\"handleSelectChange(value)\\">\n            <es-select-option value=\\"10\\">10 条/页</es-select-option>\n            <es-select-option value=\\"20\\">20 条/页</es-select-option>\n            <es-select-option value=\\"30\\">30 条/页</es-select-option>\n            <es-select-option value=\\"40\\">40 条/页</es-select-option>\n        </es-select>\n        <div ng-if=\\"showQuickJumper==='true'\\" class=\\"ant-pagination-options-quick-jumper\\">\n            跳至<input type=\\"text\\" ng-blur=\\"handleBlur($event)\\" ng-keypress=\\"onKeyPress($event)\\" />页\n        </div>\n    </li>\n</ul>\";\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (code);\n\n//# sourceURL=webpack://ng-antd/./build/Pagination/Pagination.html?");
  
 /***/ }),
  
@@ -9698,6 +9720,17 @@ eval(&quot;__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
  
 /***/ }),
  
+/***/ "./build/Space/Space.html":
+/*!********************************!*\
+  !*** ./build/Space/Space.html ***!
+  \********************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n// Module\nvar code = \"<div ng-class=\\\"'ant-space ant-space-'+state.direction+' ant-space-align-center'\\\" ng-style=\\\"{gap:state.size+'px'}\\\"></div>\";\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (code);\n\n//# sourceURL=webpack://ng-antd/./build/Space/Space.html?");
+
+/***/ }),
+
 /***/ "./build/Spin/Spin.html":
 /*!******************************!*\
   !*** ./build/Spin/Spin.html ***!
@@ -9705,7 +9738,7 @@ eval(&quot;__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
  
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n// Module\nvar code = \"<div>\\n    <div ng-if=\\\"state.hasChildren\\\" class=\\\"ant-spin-nested-loading\\\">\\n        <div ng-if=\\\"spinning!=='false'\\">\n            <div ng-class=\\"state.className\\">\n                <span class=\\"ant-spin-dot ant-spin-dot-spin\\">\n                    <i class=\\"ant-spin-dot-item\\"></i>\n                    <i class=\\"ant-spin-dot-item\\"></i>\n                    <i class=\\"ant-spin-dot-item\\"></i>\n                    <i class=\\"ant-spin-dot-item\\"></i>\n                </span>\n            </div>\n        </div>\n        <div ng-class=\\"'ant-spin-container'+(spinning==='true'?' ant-spin-blur':'')\\" ng-transclude></div>\n    </div>\n    <div ng-if=\\"!state.hasChildren\\" ng-class=\\"state.className\\">\n        <span class=\\"ant-spin-dot ant-spin-dot-spin\\">\n            <i class=\\"ant-spin-dot-item\\"></i>\n            <i class=\\"ant-spin-dot-item\\"></i>\n            <i class=\\"ant-spin-dot-item\\"></i>\n            <i class=\\"ant-spin-dot-item\\"></i>\n        </span>\n    </div>\n</div>\";\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (code);\n\n//# sourceURL=webpack://ng-antd/./build/Spin/Spin.html?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n// Module\nvar code = \"<div>\\n    <div ng-if=\\\"state.hasChildren\\\" class=\\\"ant-spin-nested-loading\\\">\\n        <div ng-if=\\\"spinning==='true'\\">\n            <div ng-class=\\"state.className\\">\n                <span class=\\"ant-spin-dot ant-spin-dot-spin\\">\n                    <i class=\\"ant-spin-dot-item\\"></i>\n                    <i class=\\"ant-spin-dot-item\\"></i>\n                    <i class=\\"ant-spin-dot-item\\"></i>\n                    <i class=\\"ant-spin-dot-item\\"></i>\n                </span>\n            </div>\n        </div>\n        <div ng-class=\\"'ant-spin-container'+(spinning==='true'?' ant-spin-blur':'')\\" ng-transclude></div>\n    </div>\n    <div ng-if=\\"!state.hasChildren\\" ng-class=\\"state.className\\">\n        <span class=\\"ant-spin-dot ant-spin-dot-spin\\">\n            <i class=\\"ant-spin-dot-item\\"></i>\n            <i class=\\"ant-spin-dot-item\\"></i>\n            <i class=\\"ant-spin-dot-item\\"></i>\n            <i class=\\"ant-spin-dot-item\\"></i>\n        </span>\n    </div>\n</div>\";\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (code);\n\n//# sourceURL=webpack://ng-antd/./build/Spin/Spin.html?");
  
 /***/ }),
  
@@ -9727,7 +9760,7 @@ eval(&quot;__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
  
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n// Module\nvar code = \"<div class=\\\"ant-table-wrapper\\\">\\n    <es-spin spinning=\\\"{{loading}}\\\">\\n        <div ng-class=\\\"'ant-table ant-table-'+state.size\\\">\\n            <div class=\\\"ant-table-content\\\">\\n                <table>\\n                    <thead class=\\\"ant-table-thead\\\">\\n                        <tr>\\n                            <th ng-if=\\\"rowSelection\\\" class=\\\"ant-table-selection-column\\\">\\n                                <span class=\\\"ant-table-header-column\\\">\\n                                    <div>\\n                                        <span class=\\\"ant-table-column-title\\\">\\n                                            <div class=\\\"ant-table-selection\\\">\\n                                                <es-checkbox on-change=\\\"handleSelectAll(event)\\\" checked=\\\"{{state.isSelectAll}}\\\" />\\n                                            </div>\\n                                        </span>\\n                                    </div>\\n                                </span>\\n                            </th>\\n                            <th ng-repeat=\\\"(key, column) in columns track by key\\\" class=\\\"ant-table-cell ant-table-column-has-sorters\\\" ng-style=\\\"{width:column.width}\\\">\\n                                    <span ng-if=\\\"!column.sorter\\\">{{column.title}}</span>\\n                                    <div ng-if=\\\"column.sorter\\\" class=\\\"ant-table-column-sorters\\\" ng-click=\\\"handleSorter(column.key)\\\">\\n                                        <span class=\\\"ant-table-column-title\\\">{{column.title}}</span>\\n                                        <span class=\\\"ant-table-column-sorter ant-table-column-sorter-full\\\">\\n                                            <span class=\\\"ant-table-column-sorter-inner\\\">\\n                                                <es-icon type=\\\"CaretUpOutlined\\\" ng-class=\\\"'ant-table-column-sorter-up'+(state.sorter.field===column.key&&state.sorter.order==='ascend'?' active':'')\\\"></es-icon>\\n                                                <es-icon type=\\\"CaretDownOutlined\\\" ng-class=\\\"'ant-table-column-sorter-down'+(state.sorter.field===column.key&&state.sorter.order==='descend'?' active':'')\\\"></es-icon>\\n                                            </span>\\n                                        </span>\\n                                    </div>\\n                                </th>\\n                        </tr>\\n                    </thead>\\n                    <tbody class=\\\"ant-table-tbody\\\">\\n                        <tr ng-repeat=\\\"(key, record) in state.dataSource track by record[state.rowKey]\\\" class=\\\"ant-table-row\\\">\\n                            <td ng-if=\\\"rowSelection\\\" class=\\\"ant-table-selection-column\\\">\\n                                <span>\\n                                    <es-checkbox checked=\\\"record.checked\\\" disabled=\\\"record.disabled\\\" on-change=\\\"handleSelect(event,$index)\\\" />\\n                                </span>\\n                            </td>\\n                                <td ng-repeat=\\\"(key, column) in columns track by key\\\" data-key=\\\"{{column.key}}\\\">\\n                                        <es-slot content=\\\"{{record[column.key]}}\\\" context=\\\"esTable.getContext().$parent\\\" />\\n                                    </td>\\n                        </tr>\\n                        <tr ng-if=\\\"state.dataSource.length===0\\\" class=\\\"ant-table-placeholder\\\">\\n                            <td colspan=\\\"{{columns.length}}\\">\n                                <es-empty image=\\"presented_image_simple\\"></es-empty>\n                            </td>\n                        </tr>\n                    </tbody>\n                </table>\n            </div>\n        </div>\n    </es-spin>\n</div>\";\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (code);\n\n//# sourceURL=webpack://ng-antd/./build/Table/Table.html?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n// Module\nvar code = \"<div class=\\\"ant-table-wrapper\\\">\\n    <es-spin spinning=\\\"{{loading}}\\\">\\n        <div ng-class=\\\"'ant-table ant-table-'+state.size\\\">\\n            <div class=\\\"ant-table-content\\\">\\n                <table>\\n                    <thead class=\\\"ant-table-thead\\\">\\n                        <tr>\\n                            <th ng-if=\\\"rowSelection\\\" class=\\\"ant-table-selection-column\\\">\\n                                <span class=\\\"ant-table-header-column\\\">\\n                                    <div>\\n                                        <span class=\\\"ant-table-column-title\\\">\\n                                            <div class=\\\"ant-table-selection\\\">\\n                                                <es-checkbox on-change=\\\"handleSelectAll(event)\\\" checked=\\\"{{state.isSelectAll}}\\\" />\\n                                            </div>\\n                                        </span>\\n                                    </div>\\n                                </span>\\n                            </th>\\n                            <th ng-repeat=\\\"(key, column) in columns track by key\\\" class=\\\"ant-table-cell ant-table-column-has-sorters\\\" ng-style=\\\"{width:column.width}\\\">\\n                                    <span ng-if=\\\"!column.sorter\\\">{{column.title}}</span>\\n                                    <div ng-if=\\\"column.sorter\\\" class=\\\"ant-table-column-sorters\\\" ng-click=\\\"handleSorter(column.key)\\\">\\n                                        <span class=\\\"ant-table-column-title\\\">{{column.title}}</span>\\n                                        <span class=\\\"ant-table-column-sorter ant-table-column-sorter-full\\\">\\n                                            <span class=\\\"ant-table-column-sorter-inner\\\">\\n                                                <es-icon type=\\\"CaretUpOutlined\\\" ng-class=\\\"'ant-table-column-sorter-up'+(state.sorter.field===column.key&&state.sorter.order==='ascend'?' active':'')\\\"></es-icon>\\n                                                <es-icon type=\\\"CaretDownOutlined\\\" ng-class=\\\"'ant-table-column-sorter-down'+(state.sorter.field===column.key&&state.sorter.order==='descend'?' active':'')\\\"></es-icon>\\n                                            </span>\\n                                        </span>\\n                                    </div>\\n                                </th>\\n                        </tr>\\n                    </thead>\\n                    <tbody class=\\\"ant-table-tbody\\\">\\n                        <tr ng-repeat=\\\"(key, record) in state.dataSource track by record[state.rowKey]\\\" class=\\\"ant-table-row\\\">\\n                            <td ng-if=\\\"rowSelection\\\" class=\\\"ant-table-selection-column\\\">\\n                                <span>\\n                                    <es-checkbox checked=\\\"record.checked\\\" disabled=\\\"record.disabled\\\" on-change=\\\"handleSelect(event,$index)\\\" />\\n                                </span>\\n                            </td>\\n                                <td ng-repeat=\\\"(key, column) in columns track by key\\\" data-key=\\\"{{column.key}}\\\">\\n                                        <es-slot content=\\\"{{record[column.key]}}\\\" context=\\\"esTable.getContext().$parent\\\" />\\n                                    </td>\\n                        </tr>\\n                        <tr ng-if=\\\"state.dataSource.length===0\\\" class=\\\"ant-table-placeholder\\\">\\n                            <td colspan=\\\"{{rowSelection?columns.length+1:columns.length}}\\">\n                                <es-empty image=\\"presented_image_simple\\"></es-empty>\n                            </td>\n                        </tr>\n                    </tbody>\n                </table>\n            </div>\n        </div>\n    </es-spin>\n</div>\";\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (code);\n\n//# sourceURL=webpack://ng-antd/./build/Table/Table.html?");
  
 /***/ }),
  
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="UTF-8" />
+    <title></title>
+    <style>
+        .container>div {
+            margin-bottom: 10px;
+        }
+    </style>
+</head>
+
+<body>
+    <div ng-app="esNgAntd" ng-controller="mainCtrl">
+        <div class="container" style="padding: 50px">
+            <es-space>
+                <es-button type="primary">AAA</es-button>
+                <es-button>BBB</es-button>
+                <es-button>CCC</es-button>
+            </es-space>
+        </div>
+    </div>
+    <script src="https://cdn.staticfile.org/angular.js/1.2.28/angular.min.js"></script>
+    <script src="../dist/ng-antd.js"></script>
+    <script>
+        angular
+            .module("esNgAntd")
+            .controller("mainCtrl", function ($scope) {
+                
+            });
+    </script>
+</body>
+
+</html>
 \ No newline at end of file
-<div className={"es-space es-space-align-center" + (direction === "vertical" ? " es-space-vertical": "")} style={{gap: size+'px'}}>{children}</div>
 \ No newline at end of file
+<div className={"ant-space ant-space-"+state.direction+" ant-space-align-center"} style={{gap: state.size+'px'}}></div>
 \ No newline at end of file
+import template from "./Space.html";
+import style from "antd/lib/space/style/index.css";
 class Space {
+    useModules = ["esNgAntd"];
+
     props = { direction: String, size: String };
+
+    state = {
+        direction: this.props.direction || "horizontal",
+        size: this.props.size || 8
+    };
+
+    template = template;
+
     constructor() {
-        let childrens = $elements.children();
-        $elements.empty();
-        angular.forEach(childrens, (element, index) => {
-            let item = angular
-                .element("<div>")
-                .addClass("es-space-item")
-                .append(element);
-            $elements.append(item);
-        });
+        esNgAntd.createStyle("ant-space", style);
+        $element.removeAttr("ng-class");
+        $element.removeAttr("ng-style");
+        let childrens = $transclude();
+        for (const key in childrens) {
+            if (Object.hasOwnProperty.call(childrens, key)) {
+                const children = childrens[key];
+                if (children.nodeType === 1) {
+                    let item = angular
+                        .element("<div>")
+                        .addClass("ant-space-item")
+                        .append(children);
+                    $element.append(item);
+                }
+            }
+        }
     }
 }
 <div>
     {state.hasChildren && <div className="ant-spin-nested-loading">
-        {spinning !== 'false' && <div>
+        {spinning === 'true' && <div>
             <div className={state.className}>
                 <span className="ant-spin-dot ant-spin-dot-spin">
                     <i className="ant-spin-dot-item"></i>
@@ -50,7 +50,7 @@
                         </tr>
                         })}
                         {state.dataSource.length === 0 && <tr className="ant-table-placeholder">
-                            <td colspan={columns.length}>
+                            <td colspan={rowSelection?columns.length+1:columns.length}>
                                 <es-empty image="presented_image_simple"></es-empty>
                             </td>
                         </tr>}
@@ -6,9 +6,9 @@ module.exports = {
     entry: "./build/index.js",
     output: {
         // bpms
-        path: "/Users/shann/Project/essa/bpms/bpms-webapp/src/main/webapp/lib/ng-antd",
+        // path: "/Usersc/shann/Project/essa/bpms/bpms-webapp/src/main/webapp/lib/ng-antd",
         // boss
-        // path: "/Users/shann/Project/essa/boss/trunk/vendor-lib/ng-antd",
+        path: "/Users/shann/Project/essa/boss/trunk/vendor-lib/ng-antd",
         // mvo
         // path: "/Users/shann/Project/essa/mvo/mvo-webapp/public/browser-vendor/ng-antd",
         // local