@webitel/ui-sdk 0.1.3 → 0.1.4-vite

package/src/css/styleguide/spacings/_spacings.scss

@@ -0,0 +1,15 @@
+:root {
+  // Start point
+  --_spacing-multiplicator: 8px;
+
+  // Spacings
+  --spacing-3xs: calc(var(--_spacing-multiplicator) / 4);
+  --spacing-2xs: calc(var(--_spacing-multiplicator) / 2);
+  --spacing-xs: calc(var(--_spacing-multiplicator) * 1);
+  --spacing-sm: calc(var(--_spacing-multiplicator) * 2);
+  --spacing-md: calc(var(--_spacing-multiplicator) * 3);
+  --spacing-lg: calc(var(--_spacing-multiplicator) * 4);
+  --spacing-xl: calc(var(--_spacing-multiplicator) * 5);
+  --spacing-2xl: calc(var(--_spacing-multiplicator) * 6);
+  --spacing-3xl: calc(var(--_spacing-multiplicator) * 7);
+}

package/src/css/styleguide/transitions/_transitions.scss

@@ -0,0 +1 @@
+@import 'fade/fade';

package/src/css/styleguide/transitions/fade/_fade.scss

@@ -0,0 +1,8 @@
+
+.fade-enter-active, .fade-leave-active {
+  transition: opacity var(--transition);
+}
+
+.fade-enter, .fade-leave-to {
+  opacity: 0;
+}

package/src/css/styleguide/typography/_typography.scss

@@ -0,0 +1,113 @@
+/*
+NOTE:   text-transform: none; is set explicitly cause t-t is inherited from parent
+ */
+
+%typo-heading-1 {
+  font: {
+    family: 'Montserrat', monospace;
+    size: 32px;
+    weight: 600;
+  }
+  line-height: 48px;
+  text-transform: none;
+  //letter-spacing: 0.28px; // 0.02em
+}
+
+%typo-heading-2 {
+  font: {
+    family: 'Montserrat', monospace;
+    size: 24px;
+    weight: 600;
+  }
+  line-height: 40px;
+  text-transform: none;
+  //letter-spacing: 0.28px; // 0.02em
+}
+
+%typo-heading-3 {
+  font: {
+    family: 'Montserrat', monospace;
+    size: 20px;
+    weight: 600;
+  }
+  line-height: 32px;
+  text-transform: none;
+  //letter-spacing: 0.28px; // 0.02em
+}
+
+%typo-subtitle-1 {
+  font: {
+    family: 'Montserrat', monospace;
+    size: 14px;
+    weight: 500;
+  }
+  line-height: 24px;
+  text-transform: none;
+  //letter-spacing: 0.28px; // 0.02em
+}
+
+%typo-subtitle-2 {
+  font: {
+    family: 'Montserrat', monospace;
+    size: 12px;
+    weight: 500;
+  }
+  line-height: 20px;
+  text-transform: none;
+  //letter-spacing: 0.28px; // 0.02em
+}
+
+%typo-body-1 {
+  font: {
+    family: 'Montserrat', monospace;
+    size: 14px;
+    weight: 400;
+  }
+  line-height: 24px;
+  text-transform: none;
+  //letter-spacing: 0.56px; // 0.04em
+}
+
+%typo-body-2 {
+  font: {
+    family: 'Montserrat', monospace;
+    size: 12px;
+    weight: 400;
+  }
+  line-height: 16px;
+  text-transform: none;
+  //letter-spacing: 0.16px; // 0.01em
+}
+
+%typo-button {
+  font: {
+    family: 'Montserrat', monospace;
+    size: 12px;
+    weight: 600;
+  }
+  text-transform: uppercase;
+  line-height: 24px;
+  //letter-spacing: 0.96px; // 0.06em
+}
+
+%typo-caption {
+  font: {
+    family: 'Montserrat', monospace;
+    size: 10px;
+    weight: 400;
+  }
+  line-height: 16px;
+  text-transform: none;
+  //letter-spacing: 0.48px; // 0.03em
+}
+
+%typo-overline {
+  font: {
+    family: 'Montserrat', monospace;
+    size: 12px;
+    weight: 500;
+  }
+  line-height: 20px;
+  text-transform: uppercase;
+  //letter-spacing: 2.56px; // 0.16em
+}

package/src/css/styleguide/viewport-breakpoints/_viewport-breakpoints.scss

@@ -0,0 +1,25 @@
+/*
+xl: @media only screen and (min-width: $viewport-xl) {}
+lg: @media only screen and (max-width: $viewport-xl) {}
+md: @media only screen and (max-width: $viewport-lg) {}
+sm: @media only screen and (max-width: $viewport-md) {}
+xs: @media only screen and (max-width: $viewport-sm) {}
+ */
+
+// OLD, REMOVE ME
+//$viewport-xl: 1440px;
+//$viewport-lg: 1280px;
+//$viewport-md: 992px;
+//$viewport-sm: 600px;
+
+$viewport-lg: 1904px; // and lower
+$viewport-md: 1264px; // and lower
+$viewport-sm: 960px; // and lower
+$viewport-xs: 600px; // and lower
+
+$media: #{'only screen'};
+$media-width-lg: #{'min-width: '} $viewport-lg;
+$media-width-md: #{'max-width: '} $viewport-md;
+$media-width-sm: #{'max-width: '} $viewport-sm;
+$media-width-xs: #{'max-width: '} $viewport-xs;
+

package/src/directives/clickaway/clickaway.js

@@ -1,52 +1,3 @@
- /* eslint-disable */
-
-const HANDLER = '_vue_clickaway_handler';
-
-function bind(el, binding, vnode) {
-    unbind(el);
-
-    const vm = vnode.context;
-    const callback = binding.value;
-
-    // @NOTE: Vue binds directives in microtasks, while UI events are dispatched
-    //        in macrotasks. This causes the listener to be set up before
-    //        the "origin" click event (the event that lead to the binding of
-    //        the directive) arrives at the document root. To work around that,
-    //        we ignore events until the end of the "initial" macrotask.
-    // @REFERENCE: https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/
-    // @REFERENCE: https://github.com/simplesmiler/vue-clickaway/issues/8
-    let initialMacrotaskEnded = false;
-    setTimeout(function() {
-        initialMacrotaskEnded = true;
-    }, 0);
-
-    el[HANDLER] = function(ev) {
-        // @NOTE: this test used to be just `el.contains`, but working with path is better,
-        //        because it tests whether the element was there at the time of
-        //        the click, not whether it is there now, that the event has arrived
-        //        to the top.
-        // @NOTE: `.path` is non-standard, the standard way is `.composedPath()`
-        const path = ev.path || (ev.composedPath ? ev.composedPath() : undefined);
-        if (initialMacrotaskEnded && (path ? path.indexOf(el) < 0 : !el.contains(ev.target))) {
-            return callback.call(vm, ev);
-        }
-    };
-
-    document.documentElement.addEventListener('click', el[HANDLER], false);
-}
-
-function unbind(el) {
-    document.documentElement.removeEventListener('click', el[HANDLER], false);
-    delete el[HANDLER];
-}
-
-const clickaway = {
-    bind,
-    update (el, binding) {
-        if (binding.value === binding.oldValue) return;
-        bind(el, binding);
-    },
-    unbind,
-};
-
-export default clickaway;
+import { vOnClickOutside } from '@vueuse/components';
+
+export default vOnClickOutside;

package/src/directives/index.js

@@ -1,12 +1,7 @@
-import Vue from 'vue';
 import clickaway from './clickaway/clickaway';
 
 const Directives = {
   clickaway,
 };
 
-Object.keys(Directives).forEach((name) => {
-  Vue.directive(name, Directives[name]);
-});
-
 export default Directives;

package/src/enums/AbstractUserStatus/AbstractUserStatus.enum.js

@@ -0,0 +1,8 @@
+const AbstractUserStatus = Object.freeze({
+                                           ACTIVE: 'active',
+                                           DND: 'dnd',
+                                           BUSY: 'busy',
+                                           OFFLINE: 'offline',
+                                         });
+
+export default AbstractUserStatus;

package/src/enums/AgentStatus/AgentStatus.enum.js

@@ -0,0 +1,6 @@
+export default Object.freeze({
+  ONLINE: 'online',
+  PAUSE: 'pause',
+  OFFLINE: 'offline',
+  BREAK_OUT: 'break_out',
+});

package/src/enums/WebitelApplications/AdminSections.enum.js

@@ -0,0 +1,50 @@
+/* eslint-disable no-multi-spaces */
+
+const AdminSections = Object.freeze({
+  // DIRECTORY
+  LICENSE: 'license',                   // permissions: add
+  USERS: 'users',                       // scope: users
+  DEVICES: 'devices',                   // scope: devices
+
+  // ROUTING
+  FLOW: 'flow',                          // scope: flow
+  DIALPLAN: 'dialplan',                  // scope: acr_routing
+  GATEWAYS: 'gateways',                  // scope: gateways
+  CHATPLAN: 'chatplan',                  // scope: acr_routing
+  CHAT_GATEWAYS: 'chat-gateways',        // scope: chats
+
+  // LOOKUPS
+  BLACKLIST: 'blacklist',                // scope: cc_list
+  REGIONS: 'regions',                    // scope: lookups
+  CALENDARS: 'calendars',                // scope: calendars
+  COMMUNICATIONS: 'communications',      // scope: lookups
+  PAUSE_CAUSE: 'pause-cause',            // scope: lookups
+  MEDIA: 'media',                        // scope: media_file
+
+  // CONTACT CENTER
+  SKILLS: 'skills',                     // scope: lookups
+  AGENTS: 'agents',                      // scope: cc_agent
+  BUCKETS: 'buckets',                    // scope: cc_bucket
+  QUEUES: 'queues',                      // scope: cc_queue
+  MEMBERS: 'members',                    // scope: cc_queue
+  RESOURCE_GROUPS: 'resource-groups',    // scope: cc_resource_group
+  RESOURCES: 'resources',               // scope: cc_resource
+  TEAMS: 'teams',                       // scope: cc_team
+
+  // INTEGRATIONS
+  STORAGE: 'storage',                   // scope: storage_profile
+  COGNITIVE_PROFILES: 'cognitive-profiles',  // scope: cognitive_profile
+  EMAIL_PROFILES: 'email-profiles',  // scope: email_profile
+  IMPORT_CSV: 'import-csv',
+  TRIGGERS: 'triggers',
+
+  // PERMISSIONS
+  OBJECTS: 'objects',                // permissions: add
+  ROLES: 'roles',                   // scope: roles
+
+  // SYSTEM
+  CHANGELOGS: 'changelogs',
+  SETTINGS: 'settings',
+});
+
+export default AdminSections;

package/src/enums/WebitelApplications/AuditorSections.enum.js

@@ -0,0 +1,5 @@
+const AuditorSections = Object.freeze({
+  SCORECARDS: 'scorecards',
+});
+
+export default AuditorSections;

package/src/enums/WebitelApplications/CrmSections.enum.js

@@ -0,0 +1,5 @@
+const CrmSections = Object.freeze({
+  CONTACTS: 'contacts',
+});
+
+export default CrmSections;

package/src/enums/WebitelApplications/SupervisorSections.enum.js

@@ -0,0 +1,7 @@
+const SupervisorSections = Object.freeze({
+  QUEUES: 'queues',
+  AGENTS: 'agents',
+  ACTIVE_CALLS: 'activeCalls',
+});
+
+export default SupervisorSections;

package/src/enums/WebitelApplications/WebitelApplications.enum.js

@@ -0,0 +1,11 @@
+const WebitelApplications = Object.freeze({
+  ADMIN: 'admin',
+  AGENT: 'agent',
+  SUPERVISOR: 'supervisor',
+  HISTORY: 'history',
+  AUDIT: 'audit',
+  ANALYTICS: 'grafana',
+  CRM: 'crm',
+});
+
+export default WebitelApplications;