From f886eef1c9c8691c649078a0e55b887c0d82ea39 Mon Sep 17 00:00:00 2001 From: Imshann <851188611@qq.com> Date: Fri, 11 Feb 2022 15:18:57 +0800 Subject: [PATCH] 优化Alert、Breadcrumb --- build/Alert/Alert.html | 5 +---- build/Alert/Alert.js | 48 +++++++++++++++++++++++++++++------------------- build/Breadcrumb/Breadcrumb.js | 25 ++++++++++++------------- build/BreadcrumbItem/BreadcrumbItem.js | 26 ++++++++++++++------------ build/Common/Common.js | 15 ++++++++------- build/Icon/Icon.js | 48 ++++++++++++++++++++++-------------------------- dist/ng-antd.js | 20 ++++++++++---------- example/alert.html | 21 ++++++++++----------- example/breadcrumb.html | 8 ++++---- package.json | 2 +- src/Alert/Alert.html | 7 ++----- src/Alert/Alert.js | 34 ++++++++++++++++++++++++++-------- src/Breadcrumb/Breadcrumb.js | 6 ++++-- src/BreadcrumbItem/BreadcrumbItem.js | 17 +++++++++++++---- src/Common/Common.js | 6 ++++++ src/Icon/Icon.js | 15 +++++++++------ webpack.config.js | 4 ++-- yarn.lock | 8 ++++---- 18 files changed, 177 insertions(+), 138 deletions(-) diff --git a/build/Alert/Alert.html b/build/Alert/Alert.html index 677cfd3..568af2b 100644 --- a/build/Alert/Alert.html +++ b/build/Alert/Alert.html @@ -1,8 +1,5 @@
- - - - +
{{message}}
diff --git a/build/Alert/Alert.js b/build/Alert/Alert.js index 21afbdb..87a0562 100644 --- a/build/Alert/Alert.js +++ b/build/Alert/Alert.js @@ -1,20 +1,30 @@ -import template from "./Alert.html"; import style from "antd/lib/alert/style/index.css"; -angular.module("esNgAntd").directive("antdAlert", function (esNgAntd) { - return { - controllerAs: "antdAlert", - restrict: "E", - transclude: true, - replace: true, - scope: { - type: "@", - message: "@", - showIcon: "@", - description: "@", - }, - template: template, - link: function ($scope, $element, $attrs, $controllers, $transclude) { - esNgAntd.createStyle("ant-alert", style); - }, - }; -}); +import template from "./Alert.html"; +angular.module("esNgAntd").directive("antdAlert", ["esNgAntd", function (esNgAntd) { + return { + template: template, + restrict: "E", + replace: true, + transclude: true, + scope: { + type: "@", + message: "@", + showIcon: "=", + description: "@" + }, + controller: function ($scope) { + $scope.state = { + icons: { + warning: "ExclamationCircleFilled", + success: "CheckCircleFilled", + info: "InfoCircleFilled", + error: "CloseCircleFilled" + } + }; + }, + link: function ($scope, $element, $attrs, $controllers, $transclude) { + esNgAntd.createStyle("ant-alert", style); + esNgAntd.clearAttribute($element[0], ["ng-class", "type", "message", "show-icon", "description"]); + } + }; +}]); \ No newline at end of file diff --git a/build/Breadcrumb/Breadcrumb.js b/build/Breadcrumb/Breadcrumb.js index fc70848..91be427 100644 --- a/build/Breadcrumb/Breadcrumb.js +++ b/build/Breadcrumb/Breadcrumb.js @@ -1,14 +1,13 @@ -import template from "./Breadcrumb.html"; import style from "antd/lib/breadcrumb/style/index.css"; -angular.module("esNgAntd").directive("antdBreadcrumb", function (esNgAntd) { - return { - controllerAs: "antdBreadcrumb", - restrict: "E", - transclude: true, - replace: true, - template: template, - link: function ($scope, $element, $attrs, $controllers, $transclude) { - esNgAntd.createStyle("ant-breadcrumb", style); - }, - }; -}); +import template from "./Breadcrumb.html"; +angular.module("esNgAntd").directive("antdBreadcrumb", ["esNgAntd", function (esNgAntd) { + return { + template: template, + restrict: "E", + replace: true, + transclude: true, + link: function ($scope, $element, $attrs, $controllers, $transclude) { + esNgAntd.createStyle("ant-breadcrumb", style); + } + }; +}]); \ No newline at end of file diff --git a/build/BreadcrumbItem/BreadcrumbItem.js b/build/BreadcrumbItem/BreadcrumbItem.js index 8f78e20..72ab2fd 100644 --- a/build/BreadcrumbItem/BreadcrumbItem.js +++ b/build/BreadcrumbItem/BreadcrumbItem.js @@ -1,13 +1,15 @@ import template from "./BreadcrumbItem.html"; -angular.module("esNgAntd").directive("antdBreadcrumbItem", function () { - return { - controllerAs: "antdBreadcrumbItem", - restrict: "E", - transclude: true, - replace: true, - scope: { - href: "@", - }, - template: template, - }; -}); +angular.module("esNgAntd").directive("antdBreadcrumbItem", ["esNgAntd", function (esNgAntd) { + return { + template: template, + restrict: "E", + replace: true, + transclude: true, + scope: { + href: "@" + }, + link: function ($scope, $element, $attrs, $controllers, $transclude) { + esNgAntd.clearAttribute($element[0], ["href"]); + } + }; +}]); \ No newline at end of file diff --git a/build/Common/Common.js b/build/Common/Common.js index 1b52ee6..450362d 100644 --- a/build/Common/Common.js +++ b/build/Common/Common.js @@ -1,8 +1,10 @@ import baseStyle from "antd/lib/style/index.css"; + angular.module("esNgAntd").service("esNgAntd", [ "$compile", function ($compile) { this.styleSheets = null; + this.conflictType = null; this.createStyle = function (key, style) { @@ -12,19 +14,16 @@ angular.module("esNgAntd").service("esNgAntd", [ styleElement.setAttribute("type", "text/css"); styleElement.innerHTML = baseStyle.toString(); document.head.appendChild(styleElement); - if (this.styleSheets) { this.disableStyle("anticon"); } } - if (!document.querySelector("#" + key)) { let styleElement = document.createElement("style"); styleElement.setAttribute("id", key); styleElement.setAttribute("type", "text/css"); styleElement.innerHTML = style.toString(); document.head.appendChild(styleElement); - if (this.styleSheets) { this.disableStyle(key); } @@ -34,7 +33,6 @@ angular.module("esNgAntd").service("esNgAntd", [ this.disableStyle = function (name) { for (let i = 0; i < this.styleSheets.cssRules.length; i++) { let rule = this.styleSheets.cssRules[i]; - if ( rule.selectorText && rule.selectorText.indexOf(name) !== -1 && @@ -52,16 +50,20 @@ angular.module("esNgAntd").service("esNgAntd", [ this.conflict = function (filename, type) { this.conflictType = type; - for (let i = 0; i < document.styleSheets.length; i++) { const element = document.styleSheets[i]; - if (element.href && element.href.indexOf(filename) !== -1) { this.styleSheets = element; } } }; + this.clearAttribute = function (element, attrs) { + for (const attr of attrs) { + element.removeAttribute(attr) + } + } + this.createLayer = function (content, scope) { let div = document.createElement("div"); div.innerHTML = content; @@ -73,7 +75,6 @@ angular.module("esNgAntd").service("esNgAntd", [ if (!ele || ele.nodeType != 1) { return; } - let rect = ele.getBoundingClientRect(); let doc = ele.ownerDocument.documentElement; return { diff --git a/build/Icon/Icon.js b/build/Icon/Icon.js index 65fef12..ca0f2e1 100644 --- a/build/Icon/Icon.js +++ b/build/Icon/Icon.js @@ -1,27 +1,23 @@ -import * as iconsSvg from "@ant-design/icons-svg"; import { renderIconDefinitionToSVGElement } from "@ant-design/icons-svg/es/helpers"; -angular.module("esNgAntd").directive("antdIcon", function ($compile) { - return { - controllerAs: "antdIcon", - restrict: "E", - transclude: true, - replace: true, - scope: { - type: "@", - }, - template: ``, - link: function ($scope, $element, $attrs, $controllers, $transclude) { - let template = renderIconDefinitionToSVGElement( - iconsSvg[$scope.type], - { - extraSVGAttrs: { - width: "1em", - height: "1em", - fill: "currentColor", - }, - } - ); - $element.append(template); - }, - }; -}); +import * as iconsSvg from "@ant-design/icons-svg"; +angular.module("esNgAntd").directive("antdIcon", ["$compile", function ($compile) { + return { + template: ``, + restrict: "E", + replace: true, + transclude: true, + scope: { + type: "@" + }, + link: function ($scope, $element, $attrs, $controllers, $transclude) { + let template = renderIconDefinitionToSVGElement(iconsSvg[$scope.type], { + extraSVGAttrs: { + width: "1em", + height: "1em", + fill: "currentColor" + } + }); + $element.append(template); + } + }; +}]); \ No newline at end of file diff --git a/dist/ng-antd.js b/dist/ng-antd.js index d55dbed..21fd31e 100644 --- a/dist/ng-antd.js +++ b/dist/ng-antd.js @@ -16,7 +16,7 @@ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Alert_html__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Alert.html */ \"./build/Alert/Alert.html\");\n/* harmony import */ var antd_lib_alert_style_index_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! antd/lib/alert/style/index.css */ \"./node_modules/antd/lib/alert/style/index.css\");\n\n\nangular.module(\"esNgAntd\").directive(\"antdAlert\", function (esNgAntd) {\n return {\n controllerAs: \"antdAlert\",\n restrict: \"E\",\n transclude: true,\n replace: true,\n scope: {\n type: \"@\",\n message: \"@\",\n showIcon: \"@\",\n description: \"@\",\n },\n template: _Alert_html__WEBPACK_IMPORTED_MODULE_0__[\"default\"],\n link: function ($scope, $element, $attrs, $controllers, $transclude) {\n esNgAntd.createStyle(\"ant-alert\", antd_lib_alert_style_index_css__WEBPACK_IMPORTED_MODULE_1__[\"default\"]);\n },\n };\n});\n\n\n//# sourceURL=webpack://ng-antd/./build/Alert/Alert.js?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var antd_lib_alert_style_index_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! antd/lib/alert/style/index.css */ \"./node_modules/antd/lib/alert/style/index.css\");\n/* harmony import */ var _Alert_html__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Alert.html */ \"./build/Alert/Alert.html\");\n\n\nangular.module(\"esNgAntd\").directive(\"antdAlert\", [\"esNgAntd\", function (esNgAntd) {\n return {\n template: _Alert_html__WEBPACK_IMPORTED_MODULE_1__[\"default\"],\n restrict: \"E\",\n replace: true,\n transclude: true,\n scope: {\n type: \"@\",\n message: \"@\",\n showIcon: \"=\",\n description: \"@\"\n },\n controller: function ($scope) {\n $scope.state = {\n icons: {\n warning: \"ExclamationCircleFilled\",\n success: \"CheckCircleFilled\",\n info: \"InfoCircleFilled\",\n error: \"CloseCircleFilled\"\n }\n };\n },\n link: function ($scope, $element, $attrs, $controllers, $transclude) {\n esNgAntd.createStyle(\"ant-alert\", antd_lib_alert_style_index_css__WEBPACK_IMPORTED_MODULE_0__[\"default\"]);\n esNgAntd.clearAttribute($element[0], [\"ng-class\", \"type\", \"message\", \"show-icon\", \"description\"]);\n }\n };\n}]);\n\n//# sourceURL=webpack://ng-antd/./build/Alert/Alert.js?"); /***/ }), @@ -27,7 +27,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Ale /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Breadcrumb_html__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Breadcrumb.html */ \"./build/Breadcrumb/Breadcrumb.html\");\n/* harmony import */ var antd_lib_breadcrumb_style_index_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! antd/lib/breadcrumb/style/index.css */ \"./node_modules/antd/lib/breadcrumb/style/index.css\");\n\n\nangular.module(\"esNgAntd\").directive(\"antdBreadcrumb\", function (esNgAntd) {\n return {\n controllerAs: \"antdBreadcrumb\",\n restrict: \"E\",\n transclude: true,\n replace: true,\n template: _Breadcrumb_html__WEBPACK_IMPORTED_MODULE_0__[\"default\"],\n link: function ($scope, $element, $attrs, $controllers, $transclude) {\n esNgAntd.createStyle(\"ant-breadcrumb\", antd_lib_breadcrumb_style_index_css__WEBPACK_IMPORTED_MODULE_1__[\"default\"]);\n },\n };\n});\n\n\n//# sourceURL=webpack://ng-antd/./build/Breadcrumb/Breadcrumb.js?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var antd_lib_breadcrumb_style_index_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! antd/lib/breadcrumb/style/index.css */ \"./node_modules/antd/lib/breadcrumb/style/index.css\");\n/* harmony import */ var _Breadcrumb_html__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Breadcrumb.html */ \"./build/Breadcrumb/Breadcrumb.html\");\n\n\nangular.module(\"esNgAntd\").directive(\"antdBreadcrumb\", [\"esNgAntd\", function (esNgAntd) {\n return {\n template: _Breadcrumb_html__WEBPACK_IMPORTED_MODULE_1__[\"default\"],\n restrict: \"E\",\n replace: true,\n transclude: true,\n link: function ($scope, $element, $attrs, $controllers, $transclude) {\n esNgAntd.createStyle(\"ant-breadcrumb\", antd_lib_breadcrumb_style_index_css__WEBPACK_IMPORTED_MODULE_0__[\"default\"]);\n }\n };\n}]);\n\n//# sourceURL=webpack://ng-antd/./build/Breadcrumb/Breadcrumb.js?"); /***/ }), @@ -38,7 +38,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Bre /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _BreadcrumbItem_html__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./BreadcrumbItem.html */ \"./build/BreadcrumbItem/BreadcrumbItem.html\");\n\nangular.module(\"esNgAntd\").directive(\"antdBreadcrumbItem\", function () {\n return {\n controllerAs: \"antdBreadcrumbItem\",\n restrict: \"E\",\n transclude: true,\n replace: true,\n template: _BreadcrumbItem_html__WEBPACK_IMPORTED_MODULE_0__[\"default\"],\n };\n});\n\n\n//# sourceURL=webpack://ng-antd/./build/BreadcrumbItem/BreadcrumbItem.js?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _BreadcrumbItem_html__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./BreadcrumbItem.html */ \"./build/BreadcrumbItem/BreadcrumbItem.html\");\n\nangular.module(\"esNgAntd\").directive(\"antdBreadcrumbItem\", [\"esNgAntd\", function (esNgAntd) {\n return {\n template: _BreadcrumbItem_html__WEBPACK_IMPORTED_MODULE_0__[\"default\"],\n restrict: \"E\",\n replace: true,\n transclude: true,\n scope: {\n href: \"@\"\n },\n link: function ($scope, $element, $attrs, $controllers, $transclude) {\n esNgAntd.clearAttribute($element[0], [\"href\"]);\n }\n };\n}]);\n\n//# sourceURL=webpack://ng-antd/./build/BreadcrumbItem/BreadcrumbItem.js?"); /***/ }), @@ -93,7 +93,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Che /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Col_html__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Col.html */ \"./build/Col/Col.html\");\n/* harmony import */ var antd_lib_grid_style_index_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! antd/lib/grid/style/index.css */ \"./node_modules/antd/lib/grid/style/index.css\");\n/**\n * 列\n */\n\n\nangular.module(\"esNgAntd\").directive(\"antdCol\", function (esNgAntd) {\n return {\n controllerAs: \"antdCol\",\n restrict: \"E\",\n transclude: true,\n replace: true,\n scope: {\n span: \"@\",\n },\n template: _Col_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: [\"ant-col\"],\n };\n },\n require: [\"?^antdRow\"],\n link: function ($scope, $element, $attrs, $controllers, $transclude) {\n let [antdRow] = $controllers;\n esNgAntd.createStyle(\"ant-grid\", antd_lib_grid_style_index_css__WEBPACK_IMPORTED_MODULE_1__[\"default\"]);\n $element[0].removeAttribute(\"ng-style\");\n $element[0].removeAttribute(\"ng-transclude\");\n $element[0].removeAttribute(\"ng-class\");\n $element[0].removeAttribute(\"span\");\n\n if (antdRow) {\n $scope.antdRow = antdRow.getContext();\n }\n\n if ($scope.span) {\n $scope.state.className.push(\"ant-col-\" + $scope.span);\n } // if (this.props.xs) {\n // this.state.className.push(\"col-xs-\" + this.props.xs);\n // }\n // if (this.props.sm) {\n // this.state.className.push(\"col-sm-\" + this.props.sm);\n // }\n // if (this.props.md) {\n // this.state.className.push(\"col-md-\" + this.props.md);\n // }\n // if (this.props.lg) {\n // this.state.className.push(\"col-lg-\" + this.props.lg);\n // }\n // this.state.className = this.state.className.join(\" \");\n },\n };\n});\n\n\n//# sourceURL=webpack://ng-antd/./build/Col/Col.js?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Col_html__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Col.html */ \"./build/Col/Col.html\");\n/* harmony import */ var antd_lib_grid_style_index_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! antd/lib/grid/style/index.css */ \"./node_modules/antd/lib/grid/style/index.css\");\n/**\n * 列\n */\n\n\nangular.module(\"esNgAntd\").directive(\"antdCol\", function (esNgAntd) {\n return {\n controllerAs: \"antdCol\",\n restrict: \"E\",\n transclude: true,\n replace: true,\n scope: {\n span: \"@\",\n offset: \"@\",\n },\n template: _Col_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: [\"ant-col\"],\n };\n },\n require: [\"?^antdRow\"],\n link: function ($scope, $element, $attrs, $controllers, $transclude) {\n let [antdRow] = $controllers;\n esNgAntd.createStyle(\"ant-grid\", antd_lib_grid_style_index_css__WEBPACK_IMPORTED_MODULE_1__[\"default\"]);\n $element[0].removeAttribute(\"ng-style\");\n $element[0].removeAttribute(\"ng-transclude\");\n $element[0].removeAttribute(\"ng-class\");\n $element[0].removeAttribute(\"span\");\n\n if (antdRow) {\n $scope.antdRow = antdRow.getContext();\n }\n\n if ($scope.span) {\n $scope.state.className.push(\"ant-col-\" + $scope.span);\n } // if (this.props.xs) {\n // this.state.className.push(\"col-xs-\" + this.props.xs);\n // }\n // if (this.props.sm) {\n // this.state.className.push(\"col-sm-\" + this.props.sm);\n // }\n // if (this.props.md) {\n // this.state.className.push(\"col-md-\" + this.props.md);\n // }\n // if (this.props.lg) {\n // this.state.className.push(\"col-lg-\" + this.props.lg);\n // }\n // this.state.className = this.state.className.join(\" \");\n },\n };\n});\n\n\n//# sourceURL=webpack://ng-antd/./build/Col/Col.js?"); /***/ }), @@ -104,7 +104,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Col /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var antd_lib_style_index_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! antd/lib/style/index.css */ \"./node_modules/antd/lib/style/index.css\");\n\nangular.module(\"esNgAntd\").service(\"esNgAntd\", [\n \"$compile\",\n function ($compile) {\n this.styleSheets = null;\n this.conflictType = null;\n\n this.createStyle = function (key, style) {\n if (!document.querySelector(\"#antd\")) {\n let styleElement = document.createElement(\"style\");\n styleElement.setAttribute(\"id\", \"antd\");\n styleElement.setAttribute(\"type\", \"text/css\");\n styleElement.innerHTML = antd_lib_style_index_css__WEBPACK_IMPORTED_MODULE_0__[\"default\"].toString();\n document.head.appendChild(styleElement);\n\n if (this.styleSheets) {\n this.disableStyle(\"anticon\");\n }\n }\n\n if (!document.querySelector(\"#\" + key)) {\n let styleElement = document.createElement(\"style\");\n styleElement.setAttribute(\"id\", key);\n styleElement.setAttribute(\"type\", \"text/css\");\n styleElement.innerHTML = style.toString();\n document.head.appendChild(styleElement);\n\n if (this.styleSheets) {\n this.disableStyle(key);\n }\n }\n };\n\n this.disableStyle = function (name) {\n for (let i = 0; i < this.styleSheets.cssRules.length; i++) {\n let rule = this.styleSheets.cssRules[i];\n\n if (\n rule.selectorText &&\n rule.selectorText.indexOf(name) !== -1 &&\n rule.selectorText.indexOf(\"ant3\") === -1\n ) {\n rule.selectorText = rule.selectorText\n .split(\",\")\n .map(function (item) {\n return \".ant3 \" + item;\n })\n .join(\",\");\n }\n }\n };\n\n this.conflict = function (filename, type) {\n this.conflictType = type;\n\n for (let i = 0; i < document.styleSheets.length; i++) {\n const element = document.styleSheets[i];\n\n if (element.href && element.href.indexOf(filename) !== -1) {\n this.styleSheets = element;\n }\n }\n };\n\n this.createLayer = function (content, scope) {\n let div = document.createElement(\"div\");\n div.innerHTML = content;\n document.body.appendChild(div);\n $compile(div)(scope);\n };\n\n this.getOffset = function (ele) {\n if (!ele || ele.nodeType != 1) {\n return;\n }\n\n let rect = ele.getBoundingClientRect();\n let doc = ele.ownerDocument.documentElement;\n return {\n top: rect.top + window.pageYOffset - doc.clientTop,\n left: rect.left + window.pageXOffset - doc.clientLeft,\n };\n };\n },\n]);\n\n\n//# sourceURL=webpack://ng-antd/./build/Common/Common.js?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var antd_lib_style_index_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! antd/lib/style/index.css */ \"./node_modules/antd/lib/style/index.css\");\n\n\nangular.module(\"esNgAntd\").service(\"esNgAntd\", [\n \"$compile\",\n function ($compile) {\n this.styleSheets = null;\n\n this.conflictType = null;\n\n this.createStyle = function (key, style) {\n if (!document.querySelector(\"#antd\")) {\n let styleElement = document.createElement(\"style\");\n styleElement.setAttribute(\"id\", \"antd\");\n styleElement.setAttribute(\"type\", \"text/css\");\n styleElement.innerHTML = antd_lib_style_index_css__WEBPACK_IMPORTED_MODULE_0__[\"default\"].toString();\n document.head.appendChild(styleElement);\n if (this.styleSheets) {\n this.disableStyle(\"anticon\");\n }\n }\n if (!document.querySelector(\"#\" + key)) {\n let styleElement = document.createElement(\"style\");\n styleElement.setAttribute(\"id\", key);\n styleElement.setAttribute(\"type\", \"text/css\");\n styleElement.innerHTML = style.toString();\n document.head.appendChild(styleElement);\n if (this.styleSheets) {\n this.disableStyle(key);\n }\n }\n };\n\n this.disableStyle = function (name) {\n for (let i = 0; i < this.styleSheets.cssRules.length; i++) {\n let rule = this.styleSheets.cssRules[i];\n if (\n rule.selectorText &&\n rule.selectorText.indexOf(name) !== -1 &&\n rule.selectorText.indexOf(\"ant3\") === -1\n ) {\n rule.selectorText = rule.selectorText\n .split(\",\")\n .map(function (item) {\n return \".ant3 \" + item;\n })\n .join(\",\");\n }\n }\n };\n\n this.conflict = function (filename, type) {\n this.conflictType = type;\n for (let i = 0; i < document.styleSheets.length; i++) {\n const element = document.styleSheets[i];\n if (element.href && element.href.indexOf(filename) !== -1) {\n this.styleSheets = element;\n }\n }\n };\n\n this.clearAttribute = function (element, attrs) {\n for (const attr of attrs) {\n element.removeAttribute(attr)\n }\n }\n\n this.createLayer = function (content, scope) {\n let div = document.createElement(\"div\");\n div.innerHTML = content;\n document.body.appendChild(div);\n $compile(div)(scope);\n };\n\n this.getOffset = function (ele) {\n if (!ele || ele.nodeType != 1) {\n return;\n }\n let rect = ele.getBoundingClientRect();\n let doc = ele.ownerDocument.documentElement;\n return {\n top: rect.top + window.pageYOffset - doc.clientTop,\n left: rect.left + window.pageXOffset - doc.clientLeft,\n };\n };\n },\n]);\n\n\n//# sourceURL=webpack://ng-antd/./build/Common/Common.js?"); /***/ }), @@ -159,7 +159,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _For /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _ant_design_icons_svg__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @ant-design/icons-svg */ \"./node_modules/@ant-design/icons-svg/es/index.js\");\n/* harmony import */ var _ant_design_icons_svg_es_helpers__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @ant-design/icons-svg/es/helpers */ \"./node_modules/@ant-design/icons-svg/es/helpers.js\");\n\n\nangular.module(\"esNgAntd\").directive(\"antdIcon\", function ($compile) {\n return {\n controllerAs: \"antdIcon\",\n restrict: \"E\",\n transclude: true,\n replace: true,\n scope: {\n type: \"@\",\n },\n template: ``,\n link: function ($scope, $element, $attrs, $controllers, $transclude) {\n let template = (0,_ant_design_icons_svg_es_helpers__WEBPACK_IMPORTED_MODULE_0__.renderIconDefinitionToSVGElement)(\n _ant_design_icons_svg__WEBPACK_IMPORTED_MODULE_1__[$scope.type],\n {\n extraSVGAttrs: {\n width: \"1em\",\n height: \"1em\",\n fill: \"currentColor\",\n },\n }\n );\n $element.append(template);\n },\n };\n});\n\n\n//# sourceURL=webpack://ng-antd/./build/Icon/Icon.js?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _ant_design_icons_svg_es_helpers__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @ant-design/icons-svg/es/helpers */ \"./node_modules/@ant-design/icons-svg/es/helpers.js\");\n/* harmony import */ var _ant_design_icons_svg__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @ant-design/icons-svg */ \"./node_modules/@ant-design/icons-svg/es/index.js\");\n\n\nangular.module(\"esNgAntd\").directive(\"antdIcon\", [\"$compile\", function ($compile) {\n return {\n template: ``,\n restrict: \"E\",\n replace: true,\n transclude: true,\n scope: {\n type: \"@\"\n },\n link: function ($scope, $element, $attrs, $controllers, $transclude) {\n let template = (0,_ant_design_icons_svg_es_helpers__WEBPACK_IMPORTED_MODULE_0__.renderIconDefinitionToSVGElement)(_ant_design_icons_svg__WEBPACK_IMPORTED_MODULE_1__[$scope.type], {\n extraSVGAttrs: {\n width: \"1em\",\n height: \"1em\",\n fill: \"currentColor\"\n }\n });\n $element.append(template);\n }\n };\n}]);\n\n//# sourceURL=webpack://ng-antd/./build/Icon/Icon.js?"); /***/ }), @@ -9430,7 +9430,7 @@ eval("\n\nmodule.exports = function (i) {\n return i[1];\n};\n\n//# sourceURL=w /***/ ((__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 = \"
\\n \\n \\n \\n \\n
\\n
{{message}}
\\n
\\n
\\n
\";\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (code);\n\n//# sourceURL=webpack://ng-antd/./build/Alert/Alert.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 = \"
\\n \\n
\\n
{{message}}
\\n
\\n
\\n
\";\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (code);\n\n//# sourceURL=webpack://ng-antd/./build/Alert/Alert.html?"); /***/ }), @@ -9452,7 +9452,7 @@ eval("__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 = \"\\n \\n /\\n\";\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (code);\n\n//# sourceURL=webpack://ng-antd/./build/BreadcrumbItem/BreadcrumbItem.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 = \"\\n \\n \\n \\n /\\n\";\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (code);\n\n//# sourceURL=webpack://ng-antd/./build/BreadcrumbItem/BreadcrumbItem.html?"); /***/ }), @@ -9507,7 +9507,7 @@ eval("__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 = \"
\";\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (code);\n\n//# sourceURL=webpack://ng-antd/./build/Col/Col.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 = \"
\";\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (code);\n\n//# sourceURL=webpack://ng-antd/./build/Col/Col.html?"); /***/ }), @@ -9771,7 +9771,7 @@ eval("__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 = \"
\\n
\\n
\\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n
\\n \\n
\\n \\n
\\n \\n
\\n \\n
\\n \\n 		\\n {{column.title}}\\n
\\n {{column.title}}\\n \\n \\n \\n \\n \\n \\n
\\n
\\n \\n \\n \\n \\n \\n
\\n \\n
\\n
\\n
\\n
\";\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 = \"
\\n
\\n
\\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n
\\n \\n
\\n \\n
\\n \\n
\\n \\n
\\n \\n 		\\n {{column.title}}\\n
\\n {{column.title}}\\n \\n \\n \\n \\n \\n \\n
\\n
\\n \\n \\n \\n \\n \\n
\\n \\n
\\n
\\n
\\n
\";\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (code);\n\n//# sourceURL=webpack://ng-antd/./build/Table/Table.html?"); /***/ }), diff --git a/example/alert.html b/example/alert.html index afd38be..8235fe3 100644 --- a/example/alert.html +++ b/example/alert.html @@ -14,15 +14,15 @@
- - - - - - - - - + + + + + + + + +
@@ -30,8 +30,7 @@ diff --git a/example/breadcrumb.html b/example/breadcrumb.html index f6acd2b..6abcd70 100644 --- a/example/breadcrumb.html +++ b/example/breadcrumb.html @@ -9,10 +9,10 @@
- - Home - Article - + + Home + Article +
diff --git a/package.json b/package.json index fc3ae26..08761ab 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,7 @@ "devDependencies": { "@ant-design/icons-svg": "^4.2.1", "antd": "^4.18.2", - "beanboom": "0.8.7", + "beanboom": "^0.9.4", "css-loader": "^6.5.1", "html-loader": "^3.0.1", "style-loader": "^3.3.1", diff --git a/src/Alert/Alert.html b/src/Alert/Alert.html index 9a9d8cf..79c0a17 100644 --- a/src/Alert/Alert.html +++ b/src/Alert/Alert.html @@ -1,10 +1,7 @@
- {showIcon && type === 'warning' && } - {showIcon && type === 'success' && } - {showIcon && type === 'info' && } - {showIcon && type === 'error' && } + {showIcon && }
{message}
- {description &&
} + {description &&
}
\ No newline at end of file diff --git a/src/Alert/Alert.js b/src/Alert/Alert.js index 352469c..1640f26 100644 --- a/src/Alert/Alert.js +++ b/src/Alert/Alert.js @@ -2,18 +2,36 @@ import template from "./Alert.html"; import style from "antd/lib/alert/style/index.css"; class Alert { - props = { - type: String, - message: String, - showIcon: Boolean, - description: String, - }; - useModules = ["esNgAntd"]; - template = template; + state = { + icons: { + warning: "ExclamationCircleFilled", + success: "CheckCircleFilled", + info: "InfoCircleFilled", + error: "CloseCircleFilled", + }, + }; constructor() { esNgAntd.createStyle("ant-alert", style); + esNgAntd.clearAttribute($element[0], [ + "ng-class", + "type", + "message", + "show-icon", + "description", + ]); + } + + render() { + return template; } } + +Alert.propTypes = { + type: PropTypes.string, + message: PropTypes.string, + showIcon: PropTypes.boolean, + description: PropTypes.string, +}; diff --git a/src/Breadcrumb/Breadcrumb.js b/src/Breadcrumb/Breadcrumb.js index b8671db..7601fd0 100644 --- a/src/Breadcrumb/Breadcrumb.js +++ b/src/Breadcrumb/Breadcrumb.js @@ -5,9 +5,11 @@ class Breadcrumb { useModules = ["esNgAntd"]; - template = template; - constructor() { esNgAntd.createStyle("ant-breadcrumb", style) } + + render() { + return template; + } } \ No newline at end of file diff --git a/src/BreadcrumbItem/BreadcrumbItem.js b/src/BreadcrumbItem/BreadcrumbItem.js index 5e520d9..72cc1e0 100644 --- a/src/BreadcrumbItem/BreadcrumbItem.js +++ b/src/BreadcrumbItem/BreadcrumbItem.js @@ -1,8 +1,17 @@ import template from "./BreadcrumbItem.html"; class BreadcrumbItem { - props = { - href: String, - }; - template = template; + useModules = ["esNgAntd"]; + + constructor() { + esNgAntd.clearAttribute($element[0], ["href"]); + } + + render() { + return template; + } } + +BreadcrumbItem.propTypes = { + href: PropTypes.string, +}; diff --git a/src/Common/Common.js b/src/Common/Common.js index d1d8fc6..450362d 100644 --- a/src/Common/Common.js +++ b/src/Common/Common.js @@ -58,6 +58,12 @@ angular.module("esNgAntd").service("esNgAntd", [ } }; + this.clearAttribute = function (element, attrs) { + for (const attr of attrs) { + element.removeAttribute(attr) + } + } + this.createLayer = function (content, scope) { let div = document.createElement("div"); div.innerHTML = content; diff --git a/src/Icon/Icon.js b/src/Icon/Icon.js index 86d3c9f..a2aedad 100644 --- a/src/Icon/Icon.js +++ b/src/Icon/Icon.js @@ -2,14 +2,9 @@ import * as iconsSvg from "@ant-design/icons-svg"; import { renderIconDefinitionToSVGElement } from "@ant-design/icons-svg/es/helpers"; class Icon { + useModules = ["$compile"]; - template = `` - - props = { - type: String, - }; - constructor() { let template = renderIconDefinitionToSVGElement( iconsSvg[$scope.type], @@ -23,4 +18,12 @@ class Icon { ) $element.append(template); } + + render() { + return `` + } } + +Icon.propTypes = { + type: PropTypes.string, +}; diff --git a/webpack.config.js b/webpack.config.js index 8aeae93..075a231 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -6,13 +6,13 @@ module.exports = { entry: "./build/index.js", output: { // bpms - path: "/Users/shann/Project/essa/bpms/bpms-webapp/src/main/webapp/lib/ng-antd", + // path: "/Users/shann/Project/essa/bpms/bpms-webapp/src/main/webapp/lib/ng-antd", // boss // 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 - // path: path.resolve(__dirname, "dist"), + path: path.resolve(__dirname, "dist"), filename: "ng-antd.js", }, module: { diff --git a/yarn.lock b/yarn.lock index d8808a9..0035654 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1320,10 +1320,10 @@ babel-plugin-polyfill-regenerator@^0.2.3: dependencies: "@babel/helper-define-polyfill-provider" "^0.2.4" -beanboom@0.8.7: - version "0.8.7" - resolved "https://registry.npmmirror.com/beanboom/download/beanboom-0.8.7.tgz#64c3b6b874bd8c271ee1dfd9babfaa9a621ec1d6" - integrity sha512-/P0cRqcxybyx/ynRd9K12n++OrVj/NTUW5lJQ6ToqbrY/JPIHvGQGZnnLyQ1thzSIKl+0jaz/pvHlRF1TYOc7Q== +beanboom@^0.9.4: + version "0.9.4" + resolved "https://registry.npmmirror.com/beanboom/-/beanboom-0.9.4.tgz#efde9461228151689a82f88610ce58b80d11369f" + integrity sha512-fnz4cE8ZC5Nks8Off/vQTWYfNjLQDfGM34uoNt5+BhK6RlbgIbomQ5g37kXnViTwXrFD6nry7xcowt7wFF5nOw== dependencies: "@babel/core" "^7.12.10" "@babel/plugin-proposal-class-properties" "^7.13.0" -- libgit2 0.21.2