@zeedhi/zd-user-info-common 1.0.0

package/coverage/lcov.info

@@ -0,0 +1,101 @@
+TN:
+SF:src/index.ts
+FNF:0
+FNH:0
+DA:1,1
+DA:2,1
+LF:2
+LH:2
+BRF:0
+BRH:0
+end_of_record
+TN:
+SF:src/user-info.ts
+FN:121,(anonymous_0)
+FN:152,(anonymous_1)
+FN:176,(anonymous_2)
+FN:190,(anonymous_3)
+FN:200,(anonymous_4)
+FN:208,(anonymous_5)
+FN:212,(anonymous_6)
+FNF:7
+FNH:7
+FNDA:4,(anonymous_0)
+FNDA:3,(anonymous_1)
+FNDA:3,(anonymous_2)
+FNDA:1,(anonymous_3)
+FNDA:1,(anonymous_4)
+FNDA:1,(anonymous_5)
+FNDA:1,(anonymous_6)
+DA:1,1
+DA:2,1
+DA:5,1
+DA:14,4
+DA:19,4
+DA:24,4
+DA:29,4
+DA:34,4
+DA:39,4
+DA:44,4
+DA:49,4
+DA:54,4
+DA:59,4
+DA:64,4
+DA:69,4
+DA:74,4
+DA:79,4
+DA:84,4
+DA:89,4
+DA:94,4
+DA:99,4
+DA:122,4
+DA:123,4
+DA:124,4
+DA:125,4
+DA:127,4
+DA:128,4
+DA:129,4
+DA:130,4
+DA:131,4
+DA:132,4
+DA:133,4
+DA:134,4
+DA:135,4
+DA:136,4
+DA:137,4
+DA:138,4
+DA:139,4
+DA:141,4
+DA:142,4
+DA:143,4
+DA:144,4
+DA:145,4
+DA:146,4
+DA:147,4
+DA:149,4
+DA:153,3
+DA:177,3
+DA:190,1
+DA:200,1
+DA:209,1
+DA:213,1
+DA:217,1
+LF:53
+LH:53
+BRDA:141,0,0,4
+BRDA:141,0,1,3
+BRDA:142,1,0,4
+BRDA:142,1,1,3
+BRDA:143,2,0,4
+BRDA:143,2,1,3
+BRDA:144,3,0,4
+BRDA:144,3,1,3
+BRDA:145,4,0,4
+BRDA:145,4,1,3
+BRDA:146,5,0,4
+BRDA:146,5,1,3
+BRDA:147,6,0,4
+BRDA:147,6,1,4
+BRF:14
+BRH:14
+end_of_record

package/dist/user-info-common.esm.js

@@ -0,0 +1,176 @@
+import { ComponentRender } from '@zeedhi/common';
+import { Messages } from '@zeedhi/core';
+
+class UserInfo extends ComponentRender {
+    constructor(props) {
+        super(props);
+        /**
+         * Props to be passed to the ZdAvatar component
+         */
+        this.avatarProps = {};
+        /**
+         * Components to be rendered on the bottom slot
+         */
+        this.bottomSlot = [];
+        /**
+         * Components to be rendered on the center slot
+         */
+        this.centerSlot = [];
+        /**
+         * Show the profile change option
+         */
+        this.showProfileChange = true;
+        /**
+         * Components to be rendered on the top slot
+         */
+        this.topSlot = [];
+        /**
+         * User name
+         */
+        this.user = '';
+        /**
+         * User image
+         */
+        this.userImage = '';
+        /**
+        * Designates if menu should close on outside-activator click.
+        */
+        this.closeOnClick = true;
+        /**
+        * Designates if menu should close when its content is clicked.
+        */
+        this.closeOnContentClick = true;
+        /**
+        * Applies position fixed to the dropdown.
+        */
+        this.fixed = false;
+        /**
+        * Components to be rendered on the menu header
+        */
+        this.headerSlot = [];
+        /**
+        * Props to be passed to the ZdImage component (rendered inside the avatar)
+        */
+        this.imageProps = {};
+        /**
+        * Offset the menu on the x-axis.
+        */
+        this.offsetX = false;
+        /**
+        * Offset the menu on the x-axis.
+        */
+        this.offsetY = true;
+        /**
+        * Designates whether menu should open on activator click.
+        */
+        this.openOnClick = true;
+        /**
+        * Designates whether menu should open on activator hover.
+        */
+        this.openOnHover = false;
+        /**
+        * Controls whether the component is visible or hidden.
+        */
+        this.value = false;
+        /**
+         * Sets the height for the dropdown.
+         */
+        this.height = 'auto';
+        this.showProfileChange = this.getInitValue('showProfileChange', props.showProfileChange, this.showProfileChange);
+        this.user = this.getInitValue('user', props.user, this.user);
+        this.userImage = this.getInitValue('userImage', props.userImage, this.userImage);
+        this.closeOnClick = this.getInitValue('closeOnClick', props.closeOnClick, this.closeOnClick);
+        this.closeOnContentClick = this.getInitValue('closeOnContentClick', props.closeOnContentClick, this.closeOnContentClick);
+        this.fixed = this.getInitValue('fixed', props.fixed, this.fixed);
+        this.offsetX = this.getInitValue('offsetX', props.offsetX, this.offsetX);
+        this.offsetY = this.getInitValue('offsetY', props.offsetY, this.offsetY);
+        this.openOnClick = this.getInitValue('openOnClick', props.openOnClick, this.openOnClick);
+        this.openOnHover = this.getInitValue('openOnHover', props.openOnHover, this.openOnHover);
+        this.value = this.getInitValue('value', props.value, this.value);
+        this.height = this.getInitValue('height', props.height, this.height);
+        this.maxHeight = this.getInitValue('maxHeight', props.maxHeight, this.maxHeight);
+        this.minHeight = this.getInitValue('minHeight', props.minHeight, this.minHeight);
+        this.maxWidth = this.getInitValue('maxWidth', props.maxWidth, this.maxWidth);
+        this.minWidth = this.getInitValue('minWidth', props.minWidth, this.minWidth);
+        this.avatarProps = props.avatarProps || this.avatarProps;
+        this.imageProps = props.imageProps || this.imageProps;
+        this.activator = props.activator || this.getActivator();
+        this.bottomSlot = props.bottomSlot || this.bottomSlot;
+        this.centerSlot = props.centerSlot || this.getCenterSlot();
+        this.topSlot = props.topSlot || this.topSlot;
+        this.headerSlot = props.headerSlot || this.headerSlot;
+        this.createAccessors();
+    }
+    getActivator() {
+        return {
+            name: `${this.name}_activator_tooltip`,
+            component: 'ZdTooltip',
+            bottom: true,
+            label: this.user,
+            children: [
+                Object.assign({ name: `${this.name}_activator`, component: 'ZdAvatar', avatarSlot: [
+                        Object.assign({ name: `${this.name}_image`, component: 'ZdImage', src: this.userImage }, this.imageProps),
+                    ] }, this.avatarProps),
+            ],
+        };
+    }
+    getCenterSlot() {
+        return [
+            {
+                name: `${this.name}_center_list`,
+                component: 'ZdList',
+                dense: true,
+                items: [
+                    {
+                        name: `${this.name}_change_profile`,
+                        component: 'ZdListItem',
+                        title: 'USERINFO_CHANGE_PROFILE',
+                        prependIcon: 'mdi-account',
+                        cssClass: 'zd-px-2',
+                        events: {
+                            click: ({ event, element }) => this.onProfileChange(event, element),
+                        },
+                    },
+                    {
+                        name: `${this.name}_logout`,
+                        component: 'ZdListItem',
+                        title: 'USERINFO_LOGOUT',
+                        prependIcon: 'mdi-logout-variant',
+                        cssClass: 'zd-px-2',
+                        events: {
+                            click: ({ event, element }) => this.onLogoutClick(event, element),
+                        },
+                    },
+                ],
+            },
+        ];
+    }
+    onLogoutClick(event, element) {
+        this.callEvent('onLogoutClick', { event, element, component: this });
+    }
+    onProfileChange(event, element) {
+        this.callEvent('onProfileChange', { event, element, component: this });
+    }
+}
+Messages.add({
+    'pt-BR': {
+        translation: {
+            USERINFO_CHANGE_PROFILE: 'Alterar perfil',
+            USERINFO_LOGOUT: 'Sair',
+        },
+    },
+    'en-US': {
+        translation: {
+            USERINFO_CHANGE_PROFILE: 'Change profile',
+            USERINFO_LOGOUT: 'Sign out',
+        },
+    },
+    'es-ES': {
+        translation: {
+            USERINFO_CHANGE_PROFILE: 'Cambiar el perfil',
+            USERINFO_LOGOUT: 'Salir',
+        },
+    },
+});
+
+export { UserInfo };

package/dist/user-info-common.umd.js

@@ -0,0 +1,183 @@
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@zeedhi/common'), require('@zeedhi/core')) :
+  typeof define === 'function' && define.amd ? define(['exports', '@zeedhi/common', '@zeedhi/core'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["@zeedhi/zd-user-info-common"] = {}, global["@zeedhi/common"], global["@zeedhi/core"]));
+})(this, (function (exports, common, core) { 'use strict';
+
+  class UserInfo extends common.ComponentRender {
+      constructor(props) {
+          super(props);
+          /**
+           * Props to be passed to the ZdAvatar component
+           */
+          this.avatarProps = {};
+          /**
+           * Components to be rendered on the bottom slot
+           */
+          this.bottomSlot = [];
+          /**
+           * Components to be rendered on the center slot
+           */
+          this.centerSlot = [];
+          /**
+           * Show the profile change option
+           */
+          this.showProfileChange = true;
+          /**
+           * Components to be rendered on the top slot
+           */
+          this.topSlot = [];
+          /**
+           * User name
+           */
+          this.user = '';
+          /**
+           * User image
+           */
+          this.userImage = '';
+          /**
+          * Designates if menu should close on outside-activator click.
+          */
+          this.closeOnClick = true;
+          /**
+          * Designates if menu should close when its content is clicked.
+          */
+          this.closeOnContentClick = true;
+          /**
+          * Applies position fixed to the dropdown.
+          */
+          this.fixed = false;
+          /**
+          * Components to be rendered on the menu header
+          */
+          this.headerSlot = [];
+          /**
+          * Props to be passed to the ZdImage component (rendered inside the avatar)
+          */
+          this.imageProps = {};
+          /**
+          * Offset the menu on the x-axis.
+          */
+          this.offsetX = false;
+          /**
+          * Offset the menu on the x-axis.
+          */
+          this.offsetY = true;
+          /**
+          * Designates whether menu should open on activator click.
+          */
+          this.openOnClick = true;
+          /**
+          * Designates whether menu should open on activator hover.
+          */
+          this.openOnHover = false;
+          /**
+          * Controls whether the component is visible or hidden.
+          */
+          this.value = false;
+          /**
+           * Sets the height for the dropdown.
+           */
+          this.height = 'auto';
+          this.showProfileChange = this.getInitValue('showProfileChange', props.showProfileChange, this.showProfileChange);
+          this.user = this.getInitValue('user', props.user, this.user);
+          this.userImage = this.getInitValue('userImage', props.userImage, this.userImage);
+          this.closeOnClick = this.getInitValue('closeOnClick', props.closeOnClick, this.closeOnClick);
+          this.closeOnContentClick = this.getInitValue('closeOnContentClick', props.closeOnContentClick, this.closeOnContentClick);
+          this.fixed = this.getInitValue('fixed', props.fixed, this.fixed);
+          this.offsetX = this.getInitValue('offsetX', props.offsetX, this.offsetX);
+          this.offsetY = this.getInitValue('offsetY', props.offsetY, this.offsetY);
+          this.openOnClick = this.getInitValue('openOnClick', props.openOnClick, this.openOnClick);
+          this.openOnHover = this.getInitValue('openOnHover', props.openOnHover, this.openOnHover);
+          this.value = this.getInitValue('value', props.value, this.value);
+          this.height = this.getInitValue('height', props.height, this.height);
+          this.maxHeight = this.getInitValue('maxHeight', props.maxHeight, this.maxHeight);
+          this.minHeight = this.getInitValue('minHeight', props.minHeight, this.minHeight);
+          this.maxWidth = this.getInitValue('maxWidth', props.maxWidth, this.maxWidth);
+          this.minWidth = this.getInitValue('minWidth', props.minWidth, this.minWidth);
+          this.avatarProps = props.avatarProps || this.avatarProps;
+          this.imageProps = props.imageProps || this.imageProps;
+          this.activator = props.activator || this.getActivator();
+          this.bottomSlot = props.bottomSlot || this.bottomSlot;
+          this.centerSlot = props.centerSlot || this.getCenterSlot();
+          this.topSlot = props.topSlot || this.topSlot;
+          this.headerSlot = props.headerSlot || this.headerSlot;
+          this.createAccessors();
+      }
+      getActivator() {
+          return {
+              name: `${this.name}_activator_tooltip`,
+              component: 'ZdTooltip',
+              bottom: true,
+              label: this.user,
+              children: [
+                  Object.assign({ name: `${this.name}_activator`, component: 'ZdAvatar', avatarSlot: [
+                          Object.assign({ name: `${this.name}_image`, component: 'ZdImage', src: this.userImage }, this.imageProps),
+                      ] }, this.avatarProps),
+              ],
+          };
+      }
+      getCenterSlot() {
+          return [
+              {
+                  name: `${this.name}_center_list`,
+                  component: 'ZdList',
+                  dense: true,
+                  items: [
+                      {
+                          name: `${this.name}_change_profile`,
+                          component: 'ZdListItem',
+                          title: 'USERINFO_CHANGE_PROFILE',
+                          prependIcon: 'mdi-account',
+                          cssClass: 'zd-px-2',
+                          events: {
+                              click: ({ event, element }) => this.onProfileChange(event, element),
+                          },
+                      },
+                      {
+                          name: `${this.name}_logout`,
+                          component: 'ZdListItem',
+                          title: 'USERINFO_LOGOUT',
+                          prependIcon: 'mdi-logout-variant',
+                          cssClass: 'zd-px-2',
+                          events: {
+                              click: ({ event, element }) => this.onLogoutClick(event, element),
+                          },
+                      },
+                  ],
+              },
+          ];
+      }
+      onLogoutClick(event, element) {
+          this.callEvent('onLogoutClick', { event, element, component: this });
+      }
+      onProfileChange(event, element) {
+          this.callEvent('onProfileChange', { event, element, component: this });
+      }
+  }
+  core.Messages.add({
+      'pt-BR': {
+          translation: {
+              USERINFO_CHANGE_PROFILE: 'Alterar perfil',
+              USERINFO_LOGOUT: 'Sair',
+          },
+      },
+      'en-US': {
+          translation: {
+              USERINFO_CHANGE_PROFILE: 'Change profile',
+              USERINFO_LOGOUT: 'Sign out',
+          },
+      },
+      'es-ES': {
+          translation: {
+              USERINFO_CHANGE_PROFILE: 'Cambiar el perfil',
+              USERINFO_LOGOUT: 'Salir',
+          },
+      },
+  });
+
+  exports.UserInfo = UserInfo;
+
+  Object.defineProperty(exports, '__esModule', { value: true });
+
+}));

package/jest.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+    preset: 'ts-jest',
+    testEnvironment: 'jsdom',
+    verbose: true,
+    collectCoverage: true,
+    moduleNameMapper: {
+      "\.(css|less)$": "<rootDir>/../../styleMock.js",
+    }
+  };
+  

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@zeedhi/zd-user-info-common",
+  "version": "1.0.0",
+  "description": "Implementation of UserInfo componente using Zeedhi Next",
+  "main": "dist/user-info-common.umd.js",
+  "module": "dist/user-info-common.esm.js",
+  "typings": "types/src/index.d.ts",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "rollup -c",
+    "lint": "eslint . --fix --ext .ts",
+    "test": "jest",
+    "watch": "npm run build -- -w"
+  },
+  "devDependencies": {
+    "@types/jest": "^26.0.19",
+    "jest": "^26.6.3",
+    "ts-jest": "^26.4.4"
+  },
+  "peerDependencies": {
+    "@zeedhi/common": "*",
+    "@zeedhi/core": "*"
+  },
+  "gitHead": "27e18bb3b09807d56dd5823a827f18b50b74da3c"
+}

package/tests/unit/user-info.spec.ts

@@ -0,0 +1,145 @@
+import { ListItem } from '@zeedhi/common';
+import { UserInfo } from '../../src';
+
+describe('UserInfo', () => {
+  describe('constructor()', () => {
+    it('when called, should assign the default values', () => {
+      const instance = new UserInfo({
+        name: 'UserInfo',
+        component: 'UserInfo',
+      });
+      expect(instance.activator).toEqual({
+        name: 'UserInfo_activator_tooltip',
+        component: 'ZdTooltip',
+        bottom: true,
+        label: '',
+        children: [
+          {
+            name: 'UserInfo_activator',
+            component: 'ZdAvatar',
+            avatarSlot: [
+              {
+                name: 'UserInfo_image',
+                component: 'ZdImage',
+                src: '',
+              },
+            ],
+          },
+        ],
+      });
+      expect(instance.bottomSlot).toEqual([]);
+      expect(instance.headerSlot).toEqual([]);
+      expect(instance.avatarProps).toEqual({});
+      expect(instance.imageProps).toEqual({});
+      expect(instance.centerSlot).toMatchObject([{
+        component: 'ZdList',
+        items: [{ component: 'ZdListItem' }, { component: 'ZdListItem' }],
+      },
+      ]);
+      expect(instance.showProfileChange).toBeTruthy();
+      expect(instance.topSlot).toEqual([]);
+      expect(instance.user).toBe('');
+      expect(instance.userImage).toBe('');
+      expect(instance.closeOnClick).toBeTruthy();
+      expect(instance.closeOnContentClick).toBeTruthy();
+      expect(instance.fixed).toBeFalsy();
+      expect(instance.offsetX).toBeFalsy();
+      expect(instance.offsetY).toBeTruthy();
+      expect(instance.openOnClick).toBeTruthy();
+      expect(instance.openOnHover).toBeFalsy();
+      expect(instance.value).toBeFalsy();
+      expect(instance.height).toBe('auto');
+      expect(instance.maxHeight).toBeUndefined();
+      expect(instance.minHeight).toBeUndefined();
+      expect(instance.maxWidth).toBeUndefined();
+      expect(instance.minWidth).toBeUndefined();
+    });
+
+    it('when called with props, should assign the new values', () => {
+      const instance = new UserInfo({
+        name: 'UserInfo',
+        component: 'UserInfo',
+        activator: { name: 'activator', component: 'ZdText' },
+        avatarProps: { size: 62 },
+        imageProps: { height: '100px' },
+        bottomSlot: [{ name: 'bottom', component: 'ZdText' }],
+        centerSlot: [{ name: 'center', component: 'ZdText' }],
+        showProfileChange: false,
+        topSlot: [{ name: 'top', component: 'ZdText' }],
+        user: 'zeedhi',
+        userImage: 'image',
+        closeOnClick: false,
+        closeOnContentClick: false,
+        fixed: true,
+        offsetX: true,
+        offsetY: false,
+        openOnClick: false,
+        openOnHover: true,
+        value: true,
+        height: '300px',
+        maxHeight: '300px',
+        minHeight: '300px',
+        maxWidth: '300px',
+        minWidth: '300px',
+      });
+      expect(instance.activator).toEqual({ name: 'activator', component: 'ZdText' });
+      expect(instance.bottomSlot).toEqual([{ name: 'bottom', component: 'ZdText' }]);
+      expect(instance.centerSlot).toEqual([{ name: 'center', component: 'ZdText' }]);
+      expect(instance.showProfileChange).toBeFalsy();
+      expect(instance.topSlot).toEqual([{ name: 'top', component: 'ZdText' }]);
+      expect(instance.user).toBe('zeedhi');
+      expect(instance.userImage).toBe('image');
+      expect(instance.closeOnClick).toBeFalsy();
+      expect(instance.closeOnContentClick).toBeFalsy();
+      expect(instance.fixed).toBeTruthy();
+      expect(instance.offsetX).toBeTruthy();
+      expect(instance.offsetY).toBeFalsy();
+      expect(instance.openOnClick).toBeFalsy();
+      expect(instance.openOnHover).toBeTruthy();
+      expect(instance.value).toBeTruthy();
+      expect(instance.avatarProps).toEqual({ size: 62 });
+      expect(instance.imageProps).toEqual({ height: '100px' });
+      expect(instance.height).toBe('300px');
+      expect(instance.maxHeight).toBe('300px');
+      expect(instance.minHeight).toBe('300px');
+      expect(instance.maxWidth).toBe('300px');
+      expect(instance.minWidth).toBe('300px');
+    });
+  });
+
+  describe('events', () => {
+    it('when change profile button is clicked, should call onProfileChange', () => {
+      const fn = jest.fn();
+      const instance = new UserInfo({
+        name: 'UserInfo',
+        component: 'UserInfo',
+        events: {
+          onProfileChange: fn,
+        },
+      });
+      const item = new ListItem({ ...instance.centerSlot[0].items[0] });
+      const event = new MouseEvent('click');
+      const element = {} as HTMLElement;
+      item.click(event, element);
+
+      expect(fn).toHaveBeenCalledWith({ event, element, component: instance });
+    });
+
+    it('when logout button is clicked, should call onLogoutClick', () => {
+      const fn = jest.fn();
+      const instance = new UserInfo({
+        name: 'UserInfo',
+        component: 'UserInfo',
+        events: {
+          onLogoutClick: fn,
+        },
+      });
+      const item = new ListItem({ ...instance.centerSlot[0].items[1] });
+      const event = new MouseEvent('click');
+      const element = {} as HTMLElement;
+      item.click(event, element);
+
+      expect(fn).toHaveBeenCalledWith({ event, element, component: instance });
+    });
+  });
+});

package/tsconfig.eslint.json

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "include": [
+    "./src/**/*.ts",
+    "./tests/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}

package/types/tests/unit/user-info.spec.d.ts

@@ -0,0 +1 @@
+export {};