@webitel/ui-sdk 24.10.48 → 24.10.49

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "24.10.48",
+  "version": "24.10.49",
   "private": false,
   "scripts": {
     "dev": "vite",
@@ -9,8 +9,8 @@
     "test:unit": "vitest",
     "lint-all": "npx @biomejs/biome check --write ./src",
     "lint-all:unsafe": "npx @biomejs/biome check --write --unsafe ./src",
-    "lint-changed:unsafe": "npx @biomejs/biome check --write --unsafe --changed",
-    "lint:pre-commit": "npx @biomejs/biome check --write --unsafe --changed --no-errors-on-unmatched",
+    "lint-changed:unsafe": "npx @biomejs/biome check --write --unsafe --changed ./src",
+    "lint:pre-commit": "npx @biomejs/biome check --write ./src --unsafe --changed --no-errors-on-unmatched",
     "publish-lib": "npm run test:unit && npm run build && npm publish --access public",
     "publish-lib:testless": "npm run build && npm publish --access public",
     "docs:dev": "vitepress dev docs --port 8080",
@@ -28,6 +28,10 @@
       "import": "./src/store/new/index.js",
       "require": "./src/store/new/index.js"
     },
+    "./enums": {
+      "import": "./src/enums/index.js",
+      "require": "./src/enums/index.js"
+    },
     "./dist*": {
       "import": "./dist*"
     },

package/src/components/index.js

@@ -1,3 +1,4 @@
+import WtActionBar from './wt-action-bar/wt-action-bar.vue';
 import WtAppHeader from './wt-app-header/wt-app-header.vue';
 import WtAppNavigator from './wt-app-header/wt-app-navigator.vue';
 import WtHeaderActions from './wt-app-header/wt-header-actions.vue';
@@ -64,6 +65,7 @@ import WtTimepicker from './wt-timepicker/wt-timepicker.vue';
 import WtTooltip from './wt-tooltip/wt-tooltip.vue';
 
 const Components = {
+  WtActionBar,
   WtImage,
   WtEmpty,
   WtLogo,

package/src/components/wt-action-bar/WtActionBarActionsOrder.js

@@ -0,0 +1,15 @@
+import IconAction from '../../enums/IconAction/IconAction.enum.js';
+
+export const tableActionsOrder = [
+  IconAction.ADD,
+  IconAction.COLUMNS,
+  IconAction.COPY,
+  IconAction.DOWNLOAD,
+  IconAction.UPLOAD,
+  IconAction.FILTERS,
+  IconAction.DELETE,
+  IconAction.REFRESH,
+];
+
+// TODO
+export const cardActionsOrder = tableActionsOrder;

package/src/components/wt-action-bar/wt-action-bar.vue

@@ -1,14 +1,27 @@
 <template>
   <div class="wt-action-bar">
-    <!--    @slot -->
-    <slot name="search-bar" />
+    <!--    @slot searchbar here
+            @scope `{ size<ComponentSize> }`
+     -->
+    <slot
+      name="search-bar"
+      v-bind="{ size }"
+    />
+
+    <!--    @slot custom actions here
+            @scope `{ size<ComponentSize> }`
+     -->
+    <slot
+      v-bind="{ size }"
+    />
 
-    <!--    @slot
-            @scope="{ `action`: IconAction enum string }"
+    <!--    @slot May be useful to set complex component which draws the same `wt-icon-action`
+            @scope `{ action<IconAction>, size<ComponentSize> }`
       -->
     <slot
       v-for="action in shownActions"
-      v-bind="{ action }"
+      :name="action"
+      v-bind="{ action, size }"
     >
       <wt-icon-action
         :action="action"
@@ -22,45 +35,38 @@
 import { computed } from 'vue';
 import IconAction from '../../enums/IconAction/IconAction.enum.js';
 import WtIconAction from '../wt-icon-action/wt-icon-action.vue';
+import { tableActionsOrder, cardActionsOrder } from './WtActionBarActionsOrder.js';
 
 const props = defineProps({
-  // options: [`table`, `card`]
+  /**
+   * [`'table'`, `'card'`]
+   * */
   mode: {
     type: String,
     default: 'table',
     validator: (v) => ['table', 'card'].includes(v),
   },
   /**
-   * see IconAction enum
+   * see `IconAction` enum
    */
   actions: {
     type: Array,
     default: () => [],
     validator: (v) => v.every((action) => Object.values(IconAction).includes(action)),
   },
+
+  /**
+   * Not implemented
+   */
   size: {
     type: String,
-    default: 'md',
-    validator: (v) => ['xs', 'sm', 'md', 'lg', 'xl'].includes(v),
+    // default: 'md',
+    // validator: (v) => ['sm', 'md', 'lg'].includes(v),
   },
 });
 
 const emit = defineEmits(Object.values(IconAction).map((action) => `click:${action}`));
 
-const tableActionsOrder = [
-  IconAction.ADD,
-  IconAction.COLUMNS,
-  IconAction.COPY,
-  IconAction.DOWNLOAD,
-  IconAction.UPLOAD,
-  IconAction.FILTERS,
-  IconAction.DELETE,
-  IconAction.REFRESH,
-];
-
-// TODO
-const cardActionsOrder = tableActionsOrder;
-
 const shownActions = computed(() => {
   const actionsOrder = props.mode === 'card' ? cardActionsOrder : tableActionsOrder;
 

package/src/components/wt-empty/_variables.scss

@@ -0,0 +1,5 @@
+:root {
+  --wt-empty-min-width: 280px;
+  --wt-empty-width: 600px;
+  --wt-empty-max-width: 80vw;
+}

package/src/components/wt-empty/wt-empty.vue

@@ -1,63 +1,119 @@
 <template>
   <section
-    :class="[`wt-empty--${size}`]"
+    :class="[`wt-empty--size-${size}`]"
     class="wt-empty"
   >
     <div
-      v-if="image || slots.media"
+      v-if="showMedia"
       class="wt-empty__media"
     >
-      <slot name="media">
+      <!--         @slot for custom media, replaces image
+                  @scope `{ size: mediaSize }`
+       -->
+      <slot name="media" v-bind="{ size: mediaSize }">
         <wt-image
           :src="image"
+          :size="mediaSize"
           alt="empty-state"
         />
       </slot>
     </div>
 
+    <div
+      v-if="showHeadline || showTitle || showText"
+      class="wt-empty__info"
+    >
     <h2
-      v-if="headline || slots.headline"
+      v-if="showHeadline"
       class="wt-empty__headline"
     >
-      <slot name="headline">
+
+
+      <!--         @slot for custom headline, replaces headline
+                  @scope `{ headline }`
+       -->
+      <slot name="headline" v-bind="{ headline }">
         {{ headline }}
       </slot>
     </h2>
 
     <h3
-      v-if="title || slots.title"
+      v-if="showTitle"
       class="wt-empty__title"
     >
-      <slot name="title">
+
+      <!--         @slot for custom title, replaces title
+                  @scope `{ title }`
+       -->
+      <slot name="title" v-bind="{ title }">
         {{ title }}
       </slot>
     </h3>
 
-    <slot></slot>
-
     <p
-      v-if="text || slots.text"
+      v-if="showText"
       class="wt-empty__text"
     >
-      <slot name="text">
+
+      <!--         @slot for custom text, replaces text
+                  @scope `{ text }`
+       -->
+      <slot name="text" v-bind="{ text }">
         {{ text }}
       </slot>
     </p>
+    </div>
+
+    <!--         @slot custom content, between text and actions
+                @scope `{ size }`
+     -->
+    <slot v-bind="{ size }"></slot>
 
     <div
-      v-if="actionText || slots.actions"
+      v-if="showActions"
       class="wt-empty__actions"
     >
+      <!--         @slot for custom actions, replaces primary and secondary actions
+                  @scope `{ onPrimaryClick, onSecondaryClick }`
+       -->
       <slot
         name="actions"
-        v-bind="{ onClick }"
+        v-bind="{ onPrimaryClick, onSecondaryClick }"
       >
-        <wt-button
-          :color="actionColor"
-          @click="onClick"
+
+        <!--         @slot for custom primary action, replaces primaryAction
+                    @scope `{ onPrimaryClick }`
+         -->
+        <slot
+          name="primary-action"
+          v-bind="{ onPrimaryClick }"
         >
-          {{ actionText }}
-        </wt-button>
+          <wt-button
+            v-if="primaryActionText"
+            :size="buttonSize"
+            color="primary"
+            @click="() => onPrimaryClick()"
+          >
+            {{ primaryActionText }}
+          </wt-button>
+        </slot>
+
+        <!--         @slot for custom secondary action, replaces secondaryAction
+                    @scope `{ onSecondaryClick }`
+         -->
+        <slot
+          name="secondary-action"
+          v-bind="{ onSecondaryClick }"
+        >
+          <wt-button
+            v-if="secondaryActionText"
+            :size="buttonSize"
+            color="secondary"
+            @click="() => onSecondaryClick()"
+          >
+            {{ secondaryActionText }}
+          </wt-button>
+        </slot>
       </slot>
     </div>
   </section>
@@ -66,51 +122,125 @@
 <script setup>
 // based on https://vuetifyjs.com/en/components/empty-states/
 
-import { useSlots } from 'vue';
+import { computed, useSlots } from 'vue';
+import ComponentSize from '../../enums/ComponentSize/ComponentSize.enum.js';
+import { greaterOrEqual, smallerOrEqual } from '../../scripts/compareSize.js';
 import WtImage from '../wt-image/wt-image.vue';
 
 const props = defineProps({
   image: {
     type: [Object, null],
   },
+  /**
+   * @values 'sm', 'md', 'lg'
+   */
   size: {
     type: String,
-    default: 'md',
-    validator: (v) => ['xs', 'sm', 'md', 'lg', 'xl'].includes(v),
+    default: ComponentSize.MD,
+    validator: (v) => [ComponentSize.SM, ComponentSize.MD, ComponentSize.LG].includes(v),
   },
+  /**
+   * shown only if prop or slot is provided
+   */
   headline: {
     type: [String, null],
     default: '',
   },
+  /**
+   * shown only if prop or slot is provided
+   */
   title: {
     type: [String, null],
     default: '',
   },
+  /**
+   * shown only if prop or slot is provided
+   */
   text: {
     type: [String, null],
     default: '',
   },
-  actionText: {
+  /**
+   * primary action is shown only if prop or slot is provided
+   */
+  primaryActionText: {
     type: [String, null],
     default: '',
   },
-  actionColor: {
+  /**
+   * secondary action shown only if prop or slot is provided
+   */
+  secondaryActionText: {
     type: [String, null],
-    default: 'primary',
+    default: '',
   },
 });
 
 const emit = defineEmits([
-  'click:action',
+  /**
+   * emitted without a parameter, but could accept one, if used in a slot
+   */
+  'click:primary',
+
+  /**
+   * emitted without a parameter, but could accept one, if used in a slot
+   */
+  'click:secondary',
 ]);
 
 const slots = useSlots();
 
-const onClick = (params) => {
-  return emit('click:action', params);
+const showMedia = computed(() => props.image || slots.media);
+
+const showHeadline = computed(() => props.headline || slots.headline);
+
+const showTitle = computed(() => props.title || slots.title);
+
+const showText = computed(() => props.text || slots.text);
+
+const showActions = computed(() => {
+  return [
+    props.primaryActionText,
+    props.secondaryActionText,
+    slots.actions,
+    slots['primary-action'],
+    slots['secondary-action'],
+  ].some((v) => v);
+});
+
+const mediaSize = computed(() => {
+  if (smallerOrEqual(props.size, ComponentSize.SM)) {
+    return ComponentSize.XXS;
+  }
+
+  if (greaterOrEqual(props.size, ComponentSize.LG)) {
+    return ComponentSize.MD;
+  }
+
+  return ComponentSize.SM;
+});
+
+const buttonSize = computed(() => {
+  if (smallerOrEqual(props.size, ComponentSize.SM)) {
+    return ComponentSize.SM;
+  }
+
+  return ComponentSize.MD;
+});
+
+const onClick = (action) => (params) => {
+  emit(`click:${action}`, params);
 };
+
+const onPrimaryClick = onClick('primary');
+
+const onSecondaryClick = onClick('secondary');
 </script>
 
+<style lang="scss">
+@import './variables.scss';
+</style>
+
 <style lang="scss" scoped>
 @import '../../../src/css/main.scss';
 
@@ -118,23 +248,96 @@ const onClick = (params) => {
   display: flex;
   align-items: center;
   flex-direction: column;
+  flex-wrap: wrap;
   justify-content: center;
+  width: var(--wt-empty-width);
+  min-width: var(--wt-empty-min-width);
+  max-width: var(--wt-empty-max-width);
+  padding: var(--spacing-md);
   text-align: center;
-  gap: var(--spacing-sm);
+  gap: var(--spacing-md);
+
+  &__info {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    gap: var(--spacing-sm);
+  }
 
-  &__media {
+  &__headline,
+  &__title,
+  &__text {
+    text-align: center;
   }
 
   &__headline {
+    @extend %typo-heading-4;
   }
 
   &__title {
+    @extend %typo-subtitle-1;
   }
 
   &__text {
+    @extend %typo-body-1;
   }
 
   &__actions {
+    display: flex;
+    gap: var(--spacing-sm);
+  }
+
+  &--size {
+    &-sm.wt-empty {
+      padding: var(--spacing-sm);
+      gap: var(--spacing-sm);
+
+      &__headline {
+        @extend %typo-heading-4;
+      }
+
+      &__title {
+        @extend %typo-subtitle-2;
+      }
+
+      &__text {
+        @extend %typo-body-2;
+      }
+    }
+
+    &-md.wt-empty {
+      padding: var(--spacing-md);
+      gap: var(--spacing-md);
+
+      &__headline {
+        @extend %typo-heading-4;
+      }
+
+      &__title {
+        @extend %typo-subtitle-1;
+      }
+
+      &__text {
+        @extend %typo-body-1;
+      }
+    }
+
+    &-lg.wt-empty {
+      padding: var(--spacing-lg);
+      gap: var(--spacing-lg);
+
+      &__headline {
+        @extend %typo-heading-4;
+      }
+
+      &__title {
+        @extend %typo-subtitle-1;
+      }
+
+      &__text {
+        @extend %typo-body-1;
+      }
+    }
   }
 }
 </style>

package/src/components/wt-icon-action/IActionData.js

@@ -0,0 +1,36 @@
+import IconAction from '../../enums/IconAction/IconAction.enum.js';
+
+const IActionData = Object.freeze({
+  [IconAction.ADD]: {
+    value: IconAction.ADD,
+    icon: 'plus',
+    hint: 'webitelUI.iconAction.addActionHint',
+  },
+  [IconAction.DELETE]: {
+    value: IconAction.DELETE,
+    icon: 'bucket',
+    hint: 'webitelUI.iconAction.deleteActionHint',
+  },
+  [IconAction.DOWNLOAD]: {
+    value: IconAction.DOWNLOAD,
+    icon: 'download',
+    hint: 'webitelUI.iconAction.downloadActionHint',
+  },
+  [IconAction.EDIT]: {
+    value: IconAction.EDIT,
+    icon: 'edit',
+    hint: 'webitelUI.iconAction.editActionHint',
+  },
+  [IconAction.HISTORY]: {
+    value: IconAction.HISTORY,
+    icon: 'history',
+    hint: 'webitelUI.iconAction.historyActionHint',
+  },
+  [IconAction.REFRESH]: {
+    value: IconAction.REFRESH,
+    icon: 'refresh',
+    hint: 'reusable.refresh',
+  },
+});
+
+export { IActionData };

package/src/components/wt-icon-action/wt-icon-action.vue

@@ -1,24 +1,25 @@
 <template>
-  <component
-    :is="actionComponent"
-    :disabled="disabled"
-    @click="emit('click')"
-  />
+  <wt-tooltip>
+    <template #activator>
+      <wt-icon-btn
+        :disabled="disabled"
+        :icon="iconAction.icon"
+        @click="emit('click')"
+      />
+    </template>
+    {{ t(iconAction.hint) }}
+  </wt-tooltip>
 </template>
 
 <script setup>
 import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { IActionData } from './IActionData.js';
 import IconAction from '../../enums/IconAction/IconAction.enum.js';
-import WtAddIconAction from './_internals/wt-add-icon-action.vue';
-import WtDeleteIconAction from './_internals/wt-delete-icon-action.vue';
-import WtDownloadIconAction from './_internals/wt-download-icon-action.vue';
-import WtEditIconAction from './_internals/wt-edit-icon-action.vue';
-import WtHistoryIconAction from './_internals/wt-history-icon-action.vue';
-import WtRefreshIconAction from './_internals/wt-refresh-icon-action.vue';
 
 const props = defineProps({
   /**
-   * available actions: IconAction.DELETE, IconAction.EDIT, IconAction.ADD, IconAction.HISTORY, IconAction.DOWNLOAD, IconAction.REFRESH
+   * `IconAction` enum value
    */
   action: {
     type: String,
@@ -40,24 +41,17 @@ const props = defineProps({
 
 const emit = defineEmits(['click']);
 
-const actionComponent = computed(() => {
-  switch (props.action) {
-    case IconAction.EDIT:
-      return WtEditIconAction;
-    case IconAction.DELETE:
-      return WtDeleteIconAction;
-    case IconAction.ADD:
-      return WtAddIconAction;
-    case IconAction.HISTORY:
-      return WtHistoryIconAction;
-    case IconAction.DOWNLOAD:
-      return WtDownloadIconAction;
-    case IconAction.REFRESH:
-      return WtRefreshIconAction;
-    default:
-      console.error(`Unknown action for wt-icon-action component: ${props.action}`);
-      return WtEditIconAction;
+const { t } = useI18n();
+
+const iconAction = computed(() => {
+  const data = IActionData[props.action];
+
+  if (!data) {
+    console.error(`Unknown action for wt-icon-action component: ${props.action}`);
+    return { icon: 'edit', hint: props.action };
   }
+
+  return data;
 });
 </script>
 

package/src/composables/useAccessControl/useAccessControl.js

@@ -0,0 +1,33 @@
+import { computed } from 'vue';
+import { useRoute } from 'vue-router';
+import { useStore } from 'vuex';
+
+export const useAccessControl = () => {
+  const store = useStore();
+  const route = useRoute();
+
+  const hasReadAccess = computed(() => store.getters['userinfo/HAS_READ_ACCESS']({ route }));
+  const hasCreateAccess = computed(() => store.getters['userinfo/HAS_CREATE_ACCESS']({ route }));
+  const hasEditAccess = computed(() => store.getters['userinfo/HAS_EDIT_ACCESS']({ route }));
+  const hasDeleteAccess = computed(() => store.getters['userinfo/HAS_DELETE_ACCESS']({ route }));
+
+  const hasSaveActionAccess = computed(() => {
+    if (route.params.id === 'new') return hasEditAccess.value;
+    return hasCreateAccess.value;
+  });
+
+  const disableUserInput = computed(() => {
+    if (route.params.id === 'new') return !hasEditAccess.value;
+    return !hasCreateAccess.value;
+  });
+
+  return {
+    hasReadAccess,
+    hasCreateAccess,
+    hasEditAccess,
+    hasDeleteAccess,
+
+    hasSaveActionAccess,
+    disableUserInput,
+  };
+};