@reskin/core 0.0.21 → 0.1.0

package/bundles/reskin-core-directives.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs/operators'), require('@reskin/core/services')) :
-    typeof define === 'function' && define.amd ? define('@reskin/core/directives', ['exports', '@angular/core', 'rxjs/operators', '@reskin/core/services'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.reskin = global.reskin || {}, global.reskin.core = global.reskin.core || {}, global.reskin.core.directives = {}), global.ng.core, global.rxjs.operators, global.reskin.core.services));
-})(this, (function (exports, i0, operators, i1) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs'), require('rxjs/operators'), require('@reskin/core/services')) :
+    typeof define === 'function' && define.amd ? define('@reskin/core/directives', ['exports', '@angular/core', 'rxjs', 'rxjs/operators', '@reskin/core/services'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.reskin = global.reskin || {}, global.reskin.core = global.reskin.core || {}, global.reskin.core.directives = {}), global.ng.core, global.rxjs, global.rxjs.operators, global.reskin.core.services));
+})(this, (function (exports, i0, rxjs, operators, i1) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -25,18 +25,41 @@
     var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
     var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
 
+    /**
+     * 权限指令
+     * 根据权限标识符控制模板的显示与隐藏
+     *
+     * @example
+     * ```html
+     * <!-- 基础用法 -->
+     * <div *rkAuth="'user:edit'">有编辑权限才显示</div>
+     *
+     * <!-- 多个权限（或关系） -->
+     * <div *rkAuth="['user:edit', 'user:delete']">有任一权限即显示</div>
+     *
+     * <!-- 使用 then/else 模板 -->
+     * <ng-container *rkAuth="'user:edit'; then hasAuth; else noAuth"></ng-container>
+     * <ng-template #hasAuth let-menu>
+     *   <p>有权限，菜单信息：{{ menu | json }}</p>
+     * </ng-template>
+     * <ng-template #noAuth>
+     *   <p>无权限</p>
+     * </ng-template>
+     * ```
+     */
     var RkAuthDirective = /** @class */ (function () {
-        function RkAuthDirective(menu, viewContainerRef, templateRef) {
-            this.menu = menu;
+        function RkAuthDirective(menuService, viewContainerRef, templateRef) {
+            this.menuService = menuService;
             this.viewContainerRef = viewContainerRef;
             this.templateRef = templateRef;
             this.condition = '';
+            this.destroy$ = new rxjs.Subject();
             this.thenTemplateRef = templateRef;
         }
         Object.defineProperty(RkAuthDirective.prototype, "rkAuth", {
             /**
-             * 传递多个标识符时，逗号分隔，匹配按"或者"运算
-             * @param condition
+             * 权限标识符
+             * 传递多个标识符时，匹配按"或"运算
              */
             set: function (condition) {
                 this.condition = condition;
@@ -46,6 +69,9 @@
             configurable: true
         });
         Object.defineProperty(RkAuthDirective.prototype, "rkAuthThen", {
+            /**
+             * 有权限时显示的模板
+             */
             set: function (templateRef) {
                 this.thenTemplateRef = templateRef;
                 this.updateView();
@@ -54,6 +80,9 @@
             configurable: true
         });
         Object.defineProperty(RkAuthDirective.prototype, "rkAuthElse", {
+            /**
+             * 无权限时显示的模板
+             */
             set: function (templateRef) {
                 this.elseTemplateRef = templateRef;
                 this.updateView();
@@ -62,37 +91,48 @@
             configurable: true
         });
         RkAuthDirective.prototype.ngOnDestroy = function () {
-            var _a;
-            (_a = this.authSubscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+            this.destroy$.next();
+            this.destroy$.complete();
         };
+        /**
+         * 更新视图显示
+         */
         RkAuthDirective.prototype.updateView = function () {
             var _this = this;
-            var _a;
-            (_a = this.authSubscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
-            this.authSubscription = this.hasAuth(this.condition).subscribe(function (context) {
-                _this.viewContainerRef.clear();
-                if (context.status) {
-                    if (_this.thenTemplateRef) {
-                        _this.viewContainerRef.createEmbeddedView(_this.thenTemplateRef, context);
-                    }
-                }
-                else {
-                    if (_this.elseTemplateRef) {
-                        _this.viewContainerRef.createEmbeddedView(_this.elseTemplateRef, context);
-                    }
-                }
+            if (!this.condition) {
+                this.viewContainerRef.clear();
+                return;
+            }
+            this.checkAuth(this.condition)
+                .pipe(operators.takeUntil(this.destroy$))
+                .subscribe(function (context) {
+                _this.renderView(context);
             });
         };
-        RkAuthDirective.prototype.hasAuth = function (tags) {
-            var tagList = typeof tags === 'string' ? [tags] : tags;
-            return this.menu.requestData().pipe(operators.map(function (json) {
-                var menus = json.data.filter(function (menu) { return tagList.includes(menu.SYSTEM_RESOURCE_GUARD_ID); });
-                if (!menus.length)
-                    return { $implicit: [], status: false };
-                return {
-                    $implicit: typeof tags === 'string' ? menus[0] : menus,
-                    status: !!menus.length,
+        /**
+         * 渲染视图
+         */
+        RkAuthDirective.prototype.renderView = function (context) {
+            this.viewContainerRef.clear();
+            if (context.status && this.thenTemplateRef) {
+                this.viewContainerRef.createEmbeddedView(this.thenTemplateRef, context);
+            }
+            else if (!context.status && this.elseTemplateRef) {
+                this.viewContainerRef.createEmbeddedView(this.elseTemplateRef, context);
+            }
+        };
+        /**
+         * 检查权限
+         */
+        RkAuthDirective.prototype.checkAuth = function (tags) {
+            var tagList = Array.isArray(tags) ? tags : [tags];
+            return this.menuService.requestData().pipe(operators.map(function (response) {
+                var matchedMenus = response.data.filter(function (menu) { return tagList.includes(menu.SYSTEM_RESOURCE_GUARD_ID); });
+                var context = {
+                    $implicit: Array.isArray(tags) ? matchedMenus : matchedMenus[0] || null,
+                    status: matchedMenus.length > 0,
                 };
+                return context;
             }));
         };
         return RkAuthDirective;
@@ -112,6 +152,155 @@
                     type: i0.Input
                 }] } });
 
+    /**
+     * 字符串模板输出上下文
+     */
+    var RkStringTemplateOutletContext = /** @class */ (function () {
+        function RkStringTemplateOutletContext() {
+            /** 隐式上下文值 */
+            this.$implicit = null;
+        }
+        return RkStringTemplateOutletContext;
+    }());
+    /**
+     * 字符串模板输出指令
+     * 支持动态渲染字符串或 TemplateRef
+     *
+     * @example
+     * ```html
+     * <!-- 渲染字符串 -->
+     * <ng-container *rkStringTemplateOutlet="'Hello World'">
+     *   <ng-template>默认模板</ng-template>
+     * </ng-container>
+     *
+     * <!-- 渲染 TemplateRef -->
+     * <ng-container *rkStringTemplateOutlet="customTemplate; context: { $implicit: data }">
+     * </ng-container>
+     * <ng-template #customTemplate let-item>
+     *   <div>{{ item }}</div>
+     * </ng-template>
+     *
+     * <!-- 动态切换 -->
+     * <ng-container *rkStringTemplateOutlet="isTemplate ? templateRef : 'Static Text'">
+     * </ng-container>
+     * ```
+     */
+    var RkStringTemplateOutletDirective = /** @class */ (function () {
+        function RkStringTemplateOutletDirective(viewContainerRef, templateRef) {
+            this.viewContainerRef = viewContainerRef;
+            this.templateRef = templateRef;
+            this.embeddedViewRef = null;
+            this.context = new RkStringTemplateOutletContext();
+            /**
+             * 输出内容
+             * 可以是字符串或 TemplateRef
+             */
+            this.rkStringTemplateOutlet = null;
+            /**
+             * 模板上下文
+             * 当 rkStringTemplateOutlet 是 TemplateRef 时使用
+             */
+            this.rkStringTemplateOutletContext = null;
+        }
+        /**
+         * 类型守卫
+         * 用于 Angular 模板类型检查
+         */
+        RkStringTemplateOutletDirective.rkTemplateContextGuard = function (_dir, _ctx) {
+            return true;
+        };
+        RkStringTemplateOutletDirective.prototype.ngOnChanges = function (changes) {
+            var rkStringTemplateOutlet = changes.rkStringTemplateOutlet, rkStringTemplateOutletContext = changes.rkStringTemplateOutletContext;
+            // 更新隐式上下文
+            if (rkStringTemplateOutlet) {
+                this.context.$implicit = rkStringTemplateOutlet.currentValue;
+            }
+            // 判断是否需要重建视图
+            if (this.shouldRecreateView(rkStringTemplateOutlet, rkStringTemplateOutletContext)) {
+                this.recreateView();
+            }
+            else {
+                this.updateContext();
+            }
+        };
+        /**
+         * 判断是否需要重建视图
+         */
+        RkStringTemplateOutletDirective.prototype.shouldRecreateView = function (outletChange, contextChange) {
+            // 首次变更需要创建视图
+            if (outletChange === null || outletChange === void 0 ? void 0 : outletChange.firstChange) {
+                return true;
+            }
+            // outlet 在 TemplateRef 和非 TemplateRef 之间切换时需要重建
+            if (outletChange && this.isOutletTypeChanged(outletChange)) {
+                return true;
+            }
+            // 上下文结构变化时需要重建
+            if (contextChange && this.isContextShapeChanged(contextChange)) {
+                return true;
+            }
+            return false;
+        };
+        /**
+         * 检查 outlet 类型是否变化
+         */
+        RkStringTemplateOutletDirective.prototype.isOutletTypeChanged = function (change) {
+            var isPreviousTemplate = change.previousValue instanceof i0.TemplateRef;
+            var isCurrentTemplate = change.currentValue instanceof i0.TemplateRef;
+            return isPreviousTemplate !== isCurrentTemplate;
+        };
+        /**
+         * 检查上下文结构是否变化
+         */
+        RkStringTemplateOutletDirective.prototype.isContextShapeChanged = function (change) {
+            var prevKeys = Object.keys(change.previousValue || {});
+            var currKeys = Object.keys(change.currentValue || {});
+            if (prevKeys.length !== currKeys.length) {
+                return true;
+            }
+            return currKeys.some(function (key) { return !prevKeys.includes(key); });
+        };
+        /**
+         * 重建视图
+         */
+        RkStringTemplateOutletDirective.prototype.recreateView = function () {
+            this.viewContainerRef.clear();
+            var isTemplateRef = this.rkStringTemplateOutlet instanceof i0.TemplateRef;
+            var templateRef = isTemplateRef ? this.rkStringTemplateOutlet : this.templateRef;
+            var context = isTemplateRef ? this.rkStringTemplateOutletContext : this.context;
+            this.embeddedViewRef = this.viewContainerRef.createEmbeddedView(templateRef, context || this.context);
+        };
+        /**
+         * 更新视图上下文
+         */
+        RkStringTemplateOutletDirective.prototype.updateContext = function () {
+            if (!this.embeddedViewRef) {
+                return;
+            }
+            var isTemplateRef = this.rkStringTemplateOutlet instanceof i0.TemplateRef;
+            var newContext = isTemplateRef ? this.rkStringTemplateOutletContext : this.context;
+            var viewContext = this.embeddedViewRef.context;
+            if (newContext) {
+                Object.keys(newContext).forEach(function (key) {
+                    viewContext[key] = newContext[key];
+                });
+            }
+        };
+        return RkStringTemplateOutletDirective;
+    }());
+    RkStringTemplateOutletDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: RkStringTemplateOutletDirective, deps: [{ token: i0__namespace.ViewContainerRef }, { token: i0__namespace.TemplateRef }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    RkStringTemplateOutletDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: RkStringTemplateOutletDirective, selector: "[rkStringTemplateOutlet]", inputs: { rkStringTemplateOutlet: "rkStringTemplateOutlet", rkStringTemplateOutletContext: "rkStringTemplateOutletContext" }, usesOnChanges: true, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: RkStringTemplateOutletDirective, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        selector: '[rkStringTemplateOutlet]',
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.ViewContainerRef }, { type: i0__namespace.TemplateRef }]; }, propDecorators: { rkStringTemplateOutlet: [{
+                    type: i0.Input
+                }], rkStringTemplateOutletContext: [{
+                    type: i0.Input
+                }] } });
+
     /******************************************************************************
     Copyright (c) Microsoft Corporation.
 
@@ -589,149 +778,100 @@
         __disposeResources: __disposeResources,
     };
 
-    var RkStringTemplateOutletDirective = /** @class */ (function () {
-        function RkStringTemplateOutletDirective(viewContainer, templateRef) {
-            this.viewContainer = viewContainer;
-            this.templateRef = templateRef;
-            this.embeddedViewRef = null;
-            this.context = new RkStringTemplateOutletContext();
-            this.rkStringTemplateOutletContext = null;
-            this.rkStringTemplateOutlet = null;
-        }
-        RkStringTemplateOutletDirective.rkTemplateContextGuard = function (_dir, _ctx) {
-            return true;
-        };
-        RkStringTemplateOutletDirective.prototype.recreateView = function () {
-            this.viewContainer.clear();
-            var isTemplateRef = this.rkStringTemplateOutlet instanceof i0.TemplateRef;
-            var templateRef = (isTemplateRef ? this.rkStringTemplateOutlet : this.templateRef);
-            this.embeddedViewRef = this.viewContainer.createEmbeddedView(templateRef, isTemplateRef ? this.rkStringTemplateOutletContext : this.context);
-        };
-        RkStringTemplateOutletDirective.prototype.updateContext = function () {
-            var e_1, _a;
-            var isTemplateRef = this.rkStringTemplateOutlet instanceof i0.TemplateRef;
-            var newCtx = isTemplateRef ? this.rkStringTemplateOutletContext : this.context;
-            var oldCtx = this.embeddedViewRef.context;
-            if (newCtx) {
-                try {
-                    for (var _b = __values(Object.keys(newCtx)), _c = _b.next(); !_c.done; _c = _b.next()) {
-                        var propName = _c.value;
-                        oldCtx[propName] = newCtx[propName];
-                    }
-                }
-                catch (e_1_1) { e_1 = { error: e_1_1 }; }
-                finally {
-                    try {
-                        if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
-                    }
-                    finally { if (e_1) throw e_1.error; }
-                }
-            }
-        };
-        RkStringTemplateOutletDirective.prototype.ngOnChanges = function (changes) {
-            var rkStringTemplateOutletContext = changes.rkStringTemplateOutletContext, rkStringTemplateOutlet = changes.rkStringTemplateOutlet;
-            var shouldRecreateView = function () {
-                var shouldOutletRecreate = false;
-                if (rkStringTemplateOutlet) {
-                    if (rkStringTemplateOutlet.firstChange) {
-                        shouldOutletRecreate = true;
-                    }
-                    else {
-                        var isPreviousOutletTemplate = rkStringTemplateOutlet.previousValue instanceof i0.TemplateRef;
-                        var isCurrentOutletTemplate = rkStringTemplateOutlet.currentValue instanceof i0.TemplateRef;
-                        shouldOutletRecreate = isPreviousOutletTemplate || isCurrentOutletTemplate;
-                    }
-                }
-                var hasContextShapeChanged = function (ctxChange) {
-                    var e_2, _a;
-                    var prevCtxKeys = Object.keys(ctxChange.previousValue || {});
-                    var currCtxKeys = Object.keys(ctxChange.currentValue || {});
-                    if (prevCtxKeys.length === currCtxKeys.length) {
-                        try {
-                            for (var currCtxKeys_1 = __values(currCtxKeys), currCtxKeys_1_1 = currCtxKeys_1.next(); !currCtxKeys_1_1.done; currCtxKeys_1_1 = currCtxKeys_1.next()) {
-                                var propName = currCtxKeys_1_1.value;
-                                if (prevCtxKeys.indexOf(propName) === -1) {
-                                    return true;
-                                }
-                            }
-                        }
-                        catch (e_2_1) { e_2 = { error: e_2_1 }; }
-                        finally {
-                            try {
-                                if (currCtxKeys_1_1 && !currCtxKeys_1_1.done && (_a = currCtxKeys_1.return)) _a.call(currCtxKeys_1);
-                            }
-                            finally { if (e_2) throw e_2.error; }
-                        }
-                        return false;
-                    }
-                    else {
-                        return true;
-                    }
-                };
-                var shouldContextRecreate = rkStringTemplateOutletContext && hasContextShapeChanged(rkStringTemplateOutletContext);
-                return shouldContextRecreate || shouldOutletRecreate;
-            };
-            if (rkStringTemplateOutlet) {
-                this.context.$implicit = rkStringTemplateOutlet.currentValue;
-            }
-            var recreateView = shouldRecreateView();
-            if (recreateView) {
-                /** recreate view when context shape or outlet change **/
-                this.recreateView();
-            }
-            else {
-                /** update context **/
-                this.updateContext();
-            }
-        };
-        return RkStringTemplateOutletDirective;
-    }());
-    RkStringTemplateOutletDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: RkStringTemplateOutletDirective, deps: [{ token: i0__namespace.ViewContainerRef }, { token: i0__namespace.TemplateRef }], target: i0__namespace.ɵɵFactoryTarget.Directive });
-    RkStringTemplateOutletDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: RkStringTemplateOutletDirective, selector: "[rkStringTemplateOutlet]", inputs: { rkStringTemplateOutletContext: "rkStringTemplateOutletContext", rkStringTemplateOutlet: "rkStringTemplateOutlet" }, usesOnChanges: true, ngImport: i0__namespace });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: RkStringTemplateOutletDirective, decorators: [{
-                type: i0.Directive,
-                args: [{
-                        selector: '[rkStringTemplateOutlet]',
-                    }]
-            }], ctorParameters: function () { return [{ type: i0__namespace.ViewContainerRef }, { type: i0__namespace.TemplateRef }]; }, propDecorators: { rkStringTemplateOutletContext: [{
-                    type: i0.Input
-                }], rkStringTemplateOutlet: [{
-                    type: i0.Input
-                }] } });
-    var RkStringTemplateOutletContext = /** @class */ (function () {
-        function RkStringTemplateOutletContext() {
-        }
-        return RkStringTemplateOutletContext;
-    }());
-
+    /**
+     * 样式按需加载指令
+     * 在指令初始化时加载指定的样式文件，销毁时自动卸载
+     *
+     * @example
+     * ```html
+     * <!-- 加载单个样式 -->
+     * <div [rkLoadStyles]="'assets/styles/theme.css'">内容</div>
+     *
+     * <!-- 加载多个样式 -->
+     * <div [rkLoadStyles]="['assets/styles/theme.css', 'assets/styles/components.css']">内容</div>
+     *
+     * <!-- 监听加载完成事件 -->
+     * <div [rkLoadStyles]="styleUrls" (stylesLoaded)="onLoaded($event)">内容</div>
+     * ```
+     */
     var RkLoadStylesDirective = /** @class */ (function () {
-        function RkLoadStylesDirective(styleLoader) {
-            this.styleLoader = styleLoader;
+        function RkLoadStylesDirective(styleLoaderService) {
+            this.styleLoaderService = styleLoaderService;
+            this.destroy$ = new rxjs.Subject();
+            this.styleUrls = [];
+            /**
+             * 样式文件路径
+             * 可以是单个路径字符串或路径数组
+             */
             this.hrefs = [];
-            // (可选) 输出加载完成事件，以便父组件可以响应
+            /**
+             * 样式加载完成事件
+             * 返回每个样式文件的加载结果
+             */
             this.stylesLoaded = new i0.EventEmitter();
-            this.styleUrls = [];
         }
         RkLoadStylesDirective.prototype.ngOnInit = function () {
+            this.loadStyles();
+        };
+        RkLoadStylesDirective.prototype.ngOnDestroy = function () {
+            this.destroy$.next();
+            this.destroy$.complete();
+            this.unloadStyles();
+        };
+        /**
+         * 加载样式文件
+         */
+        RkLoadStylesDirective.prototype.loadStyles = function () {
             var _a;
             var _this = this;
-            this.styleUrls = Array.isArray(this.hrefs) ? this.hrefs : [this.hrefs];
-            if (this.styleUrls.length > 0) {
-                this.subscription = (_a = this.styleLoader).load.apply(_a, __spreadArray([], __read(this.styleUrls))).subscribe(function (results) {
-                    _this.stylesLoaded.emit(results);
-                });
+            this.styleUrls = this.normalizeHrefs(this.hrefs);
+            if (this.styleUrls.length === 0) {
+                return;
             }
+            (_a = this.styleLoaderService)
+                .load.apply(_a, __spreadArray([], __read(this.styleUrls))).pipe(operators.takeUntil(this.destroy$))
+                .subscribe({
+                next: function (results) {
+                    _this.stylesLoaded.emit(results);
+                    _this.logLoadResults(results);
+                },
+                error: function (error) {
+                    console.error('[RkLoadStyles] 样式加载失败:', error);
+                },
+            });
         };
-        RkLoadStylesDirective.prototype.ngOnDestroy = function () {
+        /**
+         * 卸载样式文件
+         */
+        RkLoadStylesDirective.prototype.unloadStyles = function () {
             var _a;
-            if (this.subscription) {
-                this.subscription.unsubscribe();
-            }
-            // 指令销毁时，自动调用 unload，服务内部会处理引用计数
             if (this.styleUrls.length > 0) {
-                (_a = this.styleLoader).unload.apply(_a, __spreadArray([], __read(this.styleUrls)));
+                (_a = this.styleLoaderService).unload.apply(_a, __spreadArray([], __read(this.styleUrls)));
             }
         };
+        /**
+         * 标准化 hrefs 输入为数组
+         */
+        RkLoadStylesDirective.prototype.normalizeHrefs = function (hrefs) {
+            if (!hrefs) {
+                return [];
+            }
+            return Array.isArray(hrefs) ? hrefs : [hrefs];
+        };
+        /**
+         * 记录加载结果（仅在开发模式）
+         */
+        RkLoadStylesDirective.prototype.logLoadResults = function (results) {
+            // 开发模式下记录加载结果
+            results.forEach(function (result) {
+                if (result.success) {
+                    console.log("[RkLoadStyles] \u6837\u5F0F\u52A0\u8F7D\u6210\u529F: " + result.href);
+                }
+                else {
+                    console.error("[RkLoadStyles] \u6837\u5F0F\u52A0\u8F7D\u5931\u8D25: " + result.href, result.error);
+                }
+            });
+        };
         return RkLoadStylesDirective;
     }());
     RkLoadStylesDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: RkLoadStylesDirective, deps: [{ token: i1__namespace.RkStyleLoaderService }], target: i0__namespace.ɵɵFactoryTarget.Directive });