@vc-shell/framework 1.0.326 → 1.1.0-alpha.1

package/ui/components/organisms/vc-blade/vc-blade.vue

@@ -6,7 +6,7 @@
       {
         'vc-blade--mobile': $isMobile.value,
         'vc-blade--expanded': expanded,
-        'vc-blade--maximized': maximized,
+        'vc-blade--maximized': blade.maximized,
       },
     ]"
     :style="{ width: typeof width === 'number' ? `${width}px` : width }"
@@ -15,8 +15,6 @@
     <VcBladeHeader
       v-if="!$isMobile.value || closable"
       class="vc-blade__header"
-      :maximized="maximized"
-      :expandable="expandable"
       :closable="closable"
       :icon="icon"
       :title="title"
@@ -35,13 +33,13 @@
     </VcBladeHeader>
 
     <!-- Show error message -->
-    <template v-if="error">
+    <template v-if="blade.error">
       <div class="vc-blade__error">
         <VcIcon
           size="s"
           icon="fas fa-exclamation-triangle"
         />
-        <div class="vc-blade__error-text">{{ error }}</div>
+        <div class="vc-blade__error-text">{{ blade.error }}</div>
         <VcButton
           text
           class="vc-blade__error-button"
@@ -69,7 +67,68 @@
     <VcBladeToolbar
       class="vc-blade__toolbar"
       :items="toolbarItems"
-    ></VcBladeToolbar>
+    >
+      <template
+        v-if="$slots['widgets'] && !isWidgetContainerEmpty"
+        #widgets-container
+      >
+        <div
+          ref="widgetsRef"
+          class="vc-blade__widgets"
+          :class="[
+            {
+              'vc-blade__widgets--desktop': $isDesktop.value,
+              'vc-blade__widgets--not-expanded': $isDesktop.value && !isExpanded,
+              'vc-blade__widgets--expanded': $isDesktop.value && isExpanded,
+              'vc-blade__widgets--mobile': $isMobile.value,
+            },
+          ]"
+        >
+          <div
+            ref="widgetsContainerRef"
+            class="vc-blade__widget-container"
+            :class="{
+              'vc-blade__widget-container--desktop': $isDesktop.value,
+              'vc-blade__widget-container--mobile': $isMobile.value,
+            }"
+          >
+            <slot
+              name="widgets"
+              :is-expanded="isExpanded"
+            ></slot>
+          </div>
+
+          <div class="vc-blade__widget-more">
+            <VcIcon :icon="CircleDotsIcon" />
+            <!-- TODO: More localization -->
+            More
+          </div>
+
+          <!-- <div
+            class="vc-blade__widget-toggle"
+            :class="{
+              'vc-blade__widget-toggle--desktop': $isDesktop.value,
+              'vc-blade__widget-toggle--mobile': $isMobile.value,
+            }"
+          >
+            <VcIcon
+              class="vc-blade__toggle-icon"
+              :class="{
+                'vc-blade__toggle-icon--desktop': $isDesktop.value,
+              }"
+              :icon="`fas fa-chevron-${$isDesktop.value ? (isExpanded ? 'right' : 'left') : isExpanded ? 'up' : 'down'}`"
+              @click="toggleWidgets"
+            ></VcIcon>
+          </div> -->
+        </div>
+      </template>
+      <!-- <template #custom-container>
+        <div
+          id="vc-blade-toolbar-container"
+          class="vc-blade__toolbar-container-inner"
+        />
+      </template> -->
+    </VcBladeToolbar>
 
     <div class="vc-blade__content">
       <div
@@ -86,7 +145,7 @@
           <slot></slot>
         </div>
 
-        <div
+        <!-- <div
           v-show="$slots['widgets'] && !isWidgetContainerEmpty"
           ref="widgetsRef"
           class="vc-blade__widgets"
@@ -129,20 +188,32 @@
               @click="toggleWidgets"
             ></VcIcon>
           </div>
-        </div>
+        </div> -->
       </div>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { computed, Ref, reactive, useAttrs, toRefs, toValue, ref, onMounted, onUpdated } from "vue";
+import {
+  computed,
+  Ref,
+  reactive,
+  useAttrs,
+  toRefs,
+  toValue,
+  ref,
+  onMounted,
+  onUpdated,
+  inject,
+  ComputedRef,
+} from "vue";
 import { IBladeToolbar } from "../../../../core/types";
 import { usePopup } from "./../../../../shared";
 import { useI18n } from "vue-i18n";
 import VcBladeHeader from "./_internal/vc-blade-header/vc-blade-header.vue";
 import VcBladeToolbar from "./_internal/vc-blade-toolbar/vc-blade-toolbar.vue";
-import { VcButton, VcIcon } from "./../../";
+import { VcButton, VcIcon, CircleDotsIcon } from "./../../";
 import vcPopupError from "../../../../shared/components/common/popup/vc-popup-error.vue";
 import { useLocalStorage } from "@vueuse/core";
 
@@ -152,7 +223,6 @@ export interface Props {
   subtitle?: string;
   width?: number | string;
   expanded?: boolean;
-  expandable?: boolean;
   closable?: boolean;
   toolbarItems?: IBladeToolbar[];
   modified?: boolean;
@@ -184,8 +254,7 @@ defineSlots<{
 
 defineEmits<Emits>();
 
-const attrs = useAttrs();
-const { maximized, error }: { maximized?: Ref<boolean>; error?: Ref<string> } = toRefs(reactive(attrs));
+const blade = inject("$blade") as ComputedRef<{ expandable: boolean; maximized: boolean; error?: string }>;
 const { t } = useI18n({ useScope: "global" });
 const widgetsRef = ref<HTMLElement | null>(null);
 const widgetsContainerRef = ref<HTMLElement | null>(null);
@@ -220,7 +289,7 @@ const { open } = usePopup({
     title: t("COMPONENTS.ORGANISMS.VC_BLADE.ERROR_POPUP.TITLE"),
   },
   slots: {
-    default: computed(() => toValue(error)),
+    default: computed(() => toValue(blade.value.error)),
   },
 });
 </script>
@@ -228,7 +297,6 @@ const { open } = usePopup({
 <style lang="scss">
 :root {
   --blade-background-color: var(--additional-50);
-  --blade-border-radius: 6px;
   --blade-color-error: var(--base-error-color, var(--danger-500));
   --blade-color-unsaved-changes: var(--secondary-600);
 
@@ -243,11 +311,14 @@ const { open } = usePopup({
   --blade-shadow: 2px 2px 8px rgb(from var(--blade-shadow-color) r g b / 14%);
 
   --blade-text-color: var(--additional-50);
+
+  --blade-widgets-bg-color: var(--neutrals-100);
+  --blade-widgets-more-color: var(--neutrals-600);
 }
 
 .vc-blade {
-  @apply tw-relative tw-flex tw-shrink-0 tw-flex-col [box-shadow:var(--blade-shadow)] tw-my-4 tw-mx-2 tw-overflow-hidden tw-transition-[width] tw-duration-200;
-  @apply tw-bg-[color:var(--blade-background-color)] tw-rounded-[var(--blade-border-radius)];
+  @apply tw-relative tw-flex tw-shrink-0 tw-flex-col [box-shadow:var(--blade-shadow)] tw-overflow-hidden tw-transition-[width] tw-duration-200;
+  @apply tw-bg-[color:var(--blade-background-color)] tw-border tw-border-solid tw-border-[--blade-border-color];
 
   &--mobile {
     @apply tw-w-full #{!important};
@@ -315,36 +386,44 @@ const { open } = usePopup({
     }
   }
 
+  &__widget-more {
+    @apply tw-flex tw-flex-col tw-items-center tw-justify-center tw-bg-[color:var(--blade-widgets-bg-color)] tw-px-2 tw-text-xs tw-gap-1 tw-text-[color:var(--blade-widgets-more-color)];
+  }
+
   &__widgets {
-    @apply tw-flex;
+    @apply tw-flex tw-flex-auto tw-h-full tw-bg-[color:var(--blade-widgets-bg-color)] tw-justify-between;
+  }
 
-    &--desktop {
-      @apply tw-border-l tw-border-solid tw-border-l-[color:var(--blade-border-color)];
-    }
+  // &__widgets {
+  //   @apply tw-flex;
 
-    &--not-expanded {
-      @apply tw-w-12 tw-flex-col;
-    }
+  //   &--desktop {
+  //     @apply tw-border-l tw-border-solid tw-border-l-[color:var(--blade-border-color)];
+  //   }
 
-    &--expanded {
-      @apply tw-w-32 tw-flex-col;
-    }
+  //   &--not-expanded {
+  //     @apply tw-w-12 tw-flex-col;
+  //   }
 
-    &--mobile {
-      @apply tw-w-auto tw-border-t tw-border-solid tw-border-t-[color:var(--blade-border-color)] tw-flex-row;
-    }
-  }
+  //   &--expanded {
+  //     @apply tw-w-32 tw-flex-col;
+  //   }
+
+  //   &--mobile {
+  //     @apply tw-w-auto tw-border-t tw-border-solid tw-border-t-[color:var(--blade-border-color)] tw-flex-row;
+  //   }
+  // }
 
   &__widget-container {
-    @apply tw-flex tw-overflow-y-auto;
+    @apply tw-flex tw-overflow-y-auto tw-flex-row;
 
-    &--desktop {
-      @apply tw-flex-col tw-overflow-x-clip;
-    }
+    // &--desktop {
+    //   @apply tw-flex-col tw-overflow-x-clip;
+    // }
 
-    &--mobile {
-      @apply tw-flex-row;
-    }
+    // &--mobile {
+    //   @apply tw-flex-row;
+    // }
   }
 
   &__widget-toggle {
@@ -366,6 +445,18 @@ const { open } = usePopup({
 
   &__toggle-icon--desktop {
   }
+
+  &__spacer {
+    @apply tw-flex-1;
+  }
+
+  &__toolbar-container-inner {
+    @apply tw-flex-1 tw-justify-end;
+
+    &:empty {
+      @apply tw-hidden;
+    }
+  }
 }
 
 .vc-app_mobile .vc-blade {

package/ui/components/organisms/vc-table/_internal/vc-table-base-header/vc-table-base-header.vue

@@ -91,12 +91,12 @@ defineEmits<Emits>();
   @apply tw-shrink-0 tw-flex tw-items-center tw-justify-between tw-box-border;
 
   &--mobile {
-    @apply tw-px-4 tw-py-2 tw-border-b tw-border-solid;
+    @apply tw-px-4 tw-border-b tw-border-solid;
     border-color: var(--table-header-border-color);
   }
 
   &--desktop {
-    @apply tw-p-4;
+    @apply tw-px-4;
   }
 
   &__filter-mobile {

package/ui/components/organisms/vc-table/_internal/vc-table-cell/vc-table-cell.vue

@@ -349,7 +349,7 @@ function onBlur(args: { row: number | undefined; field: string; errors?: string[
 }
 
 .vc-table-cell {
-  @apply tw-text-sm tw-text-[color:var(--table-cell-text-base-color)];
+  @apply tw-text-sm tw-text-[color:var(--table-cell-text-base-color)] tw-leading-normal;
 
   &__not-set {
     @apply tw-truncate;

package/ui/components/organisms/vc-table/_internal/vc-table-filter/vc-table-filter.vue

@@ -1,33 +1,30 @@
 <template>
   <!-- Filter button -->
-  <VcButton
+  <VcTooltip
     ref="filterToggle"
-    icon="fas fa-filter"
-    icon-size="m"
-    class="vc-table-filter__button"
-    :disabled="disabled"
-    @click="openPanel"
+    :delay="1000"
   >
-    <template
-      v-if="title || counter"
-      #default
+    <VcButton
+      text
+      @click="openPanel"
     >
-      <div class="vc-table-filter__button-content">
-        <span
-          v-if="title"
-          class="vc-table-filter__button-title"
-        >
-          {{ title }}
-        </span>
-        <div
-          v-if="counter"
-          class="vc-table-filter__counter"
-        >
-          {{ counter }}
+      <VcBadge
+        :content="counter"
+        size="s"
+      >
+        <div class="vc-table-filter__icon-container">
+          <VcIcon
+            class="vc-table-filter__icon"
+            icon="fas fa-filter"
+            size="m"
+          />
         </div>
-      </div>
+      </VcBadge>
+    </VcButton>
+    <template #tooltip>
+      {{ title }}
     </template>
-  </VcButton>
+  </VcTooltip>
   <Sidebar
     :is-expanded="$isMobile.value ? isPanelVisible : false"
     position="left"
@@ -69,6 +66,8 @@ import { ref, watch, computed, inject, Ref } from "vue";
 import { offset, autoUpdate, useFloating, UseFloatingReturn } from "@floating-ui/vue";
 import { VcButton } from "./../../../../atoms/vc-button";
 import { Sidebar } from "./../../../../../../shared/components";
+import { VcBadge } from "./../../../../atoms/vc-badge";
+import { VcTooltip } from "./../../../../atoms/vc-tooltip";
 
 export interface Props {
   title?: string;
@@ -139,6 +138,18 @@ function closePanel() {
 .vc-table-filter {
   @apply tw-relative tw-overflow-visible;
 
+  &__icon-container {
+    @apply tw-flex tw-flex-col tw-items-center tw-justify-center;
+  }
+
+  &__icon {
+    @apply tw-text-[color:var(--widget-icon-color)];
+  }
+
+  &__title {
+    @apply tw-font-medium tw-text-xs tw-text-[color:var(--widget-title-color)] tw-mt-1 tw-mx-0 tw-text-center tw-line-clamp-2;
+  }
+
   &__button-content {
     @apply tw-flex tw-flex-row tw-items-center tw-gap-[10px];
   }

package/ui/components/organisms/vc-table/vc-table.vue

@@ -58,18 +58,19 @@
         </div>
       </div>
     </div>
-
-    <!-- Header slot with filter and searchbar -->
-    <slot
-      v-else-if="
-        ($slots['header'] || header) && (!columnsInit || searchValue || searchValue === '' || activeFilterCount)
-      "
-      name="header"
-      :header="headerComponent"
+    <Teleport
+      v-if="shouldTeleport"
+      :to="`#${toolbarContainerId}`"
+      defer
     >
-      <headerComponent></headerComponent>
-    </slot>
-
+      <!-- Header slot with filter and searchbar -->
+      <slot
+        name="header"
+        :header="headerComponent"
+      >
+        <headerComponent></headerComponent>
+      </slot>
+    </Teleport>
     <div class="vc-table__content">
       <!-- Table scroll container -->
       <VcContainer
@@ -198,7 +199,7 @@
                   >
                     <VcIcon
                       size="xs"
-                      :icon="`fas fa-caret-${sortDirection === 'DESC' ? 'down' : 'up'}`"
+                      :icon="`fas fa-chevron-${sortDirection === 'DESC' ? 'down' : 'up'}`"
                     ></VcIcon>
                   </div>
                   <div
@@ -207,11 +208,11 @@
                   >
                     <VcIcon
                       size="xs"
-                      icon="fas fa-caret-up"
+                      icon="fas fa-chevron-up"
                     ></VcIcon>
                     <VcIcon
                       size="xs"
-                      icon="fas fa-caret-down"
+                      icon="fas fa-chevron-down"
                     ></VcIcon>
                   </div>
                 </div>
@@ -421,6 +422,12 @@
           'vc-table__footer--desktop': $isDesktop.value,
         }"
       >
+        <!-- Table counter -->
+        <VcTableCounter
+          :label="totalLabel || $t('COMPONENTS.ORGANISMS.VC_TABLE.TOTALS')"
+          :value="totalCount"
+        ></VcTableCounter>
+
         <!-- Table pagination -->
         <VcPagination
           :expanded="expanded"
@@ -435,12 +442,6 @@
             }
           "
         ></VcPagination>
-
-        <!-- Table counter -->
-        <VcTableCounter
-          :label="totalLabel || $t('COMPONENTS.ORGANISMS.VC_TABLE.TOTALS')"
-          :value="totalCount"
-        ></VcTableCounter>
       </div>
     </slot>
   </div>
@@ -463,6 +464,7 @@ import {
   shallowRef,
   useSlots,
   VNode,
+  inject,
 } from "vue";
 import { useI18n } from "vue-i18n";
 import { VcButton, VcCheckbox, VcContainer, VcIcon, VcPagination, VcLabel } from "./../../";
@@ -581,6 +583,8 @@ const { t } = useI18n({ useScope: "global" });
 const instance = getCurrentInstance();
 const slots = useSlots();
 
+const toolbarContainerId = inject("toolbarContainerId", "vc-blade-toolbar-container");
+
 // template refs
 const reorderRef = ref<HTMLElement | null>();
 const tableRef = ref<HTMLElement | null>();
@@ -703,6 +707,13 @@ const hasClickListener = typeof instance?.vnode.props?.["onItemClick"] === "func
 //   return el ? el.offsetWidth : 0;
 // };
 
+const shouldTeleport = computed(() => {
+  return (
+    (slots["header"] || props.header) &&
+    (!columnsInit.value || props.searchValue || props.searchValue === "" || props.activeFilterCount)
+  );
+});
+
 const headerComponent = () =>
   h(
     VcTableBaseHeader,
@@ -1466,11 +1477,11 @@ function onRowDrop(event: DragEvent) {
 :root {
   --table-border-color: var(--base-border-color, var(--neutrals-200));
   --table-select-all-border-color: var(--base-border-color, var(--neutrals-200));
-  --table-header-bg: var(--neutrals-50);
+  --table-header-bg: var(--primary-50);
   --table-header-border-color: var(--base-border-color, var(--neutrals-200));
   --table-header-border: inset 0px 1px 0px var(--table-header-border-color),
     inset 0px -1px 0px var(--table-header-border-color);
-  --table-header-text-color: var(--secondary-700);
+  --table-header-text-color: var(--base-text-color, var(--secondary-950));
   --table-resizer-color: var(--base-border-color, var(--neutrals-200));
   --table-reorder-color: var(--primary-400);
   --table-select-all-bg: var(--primary-100);
@@ -1494,6 +1505,7 @@ function onRowDrop(event: DragEvent) {
   --table-actions-color-success: var(--success-500);
   --table-mobile-border-color: var(--secondary-200);
   --table-text-color: var(--base-text-color, var(--neutrals-950));
+  --table-sort-icon-color: var(--neutrals-400);
 }
 
 $variants: (
@@ -1561,12 +1573,15 @@ $variants: (
     @apply tw-relative tw-box-border tw-w-full tw-h-full tw-flex tw-flex-col;
   }
 
+  &__header {
+  }
+
   &__header-row {
     @apply tw-flex tw-flex-row [box-shadow:var(--table-header-border)];
   }
 
   &__header-checkbox {
-    @apply tw-flex-1 tw-flex tw-items-center tw-justify-center tw-w-9 tw-max-w-9 tw-min-w-9 tw-bg-[--table-header-bg] [box-shadow:var(--table-header-border)] tw-shadow-none tw-box-border tw-sticky tw-top-0 tw-select-none tw-overflow-hidden tw-z-[1];
+    @apply tw-flex-1 tw-flex tw-items-center tw-justify-center tw-w-9 tw-max-w-9 tw-min-w-9 tw-bg-[--table-header-bg] tw-box-border tw-sticky tw-top-0 tw-select-none tw-overflow-hidden tw-z-[1];
     @apply tw-border-0 #{!important};
   }
 
@@ -1579,7 +1594,7 @@ $variants: (
   }
 
   &__header-cell {
-    @apply tw-flex-1 tw-flex tw-items-center tw-h-10 tw-bg-[--table-header-bg] [box-shadow:var(--table-header-border)] tw-box-border tw-sticky tw-top-0 tw-select-none tw-overflow-hidden tw-z-[1];
+    @apply tw-flex-1 tw-flex tw-items-center tw-h-[60px] tw-bg-[--table-header-bg] tw-box-border tw-sticky tw-top-0 tw-select-none tw-overflow-hidden tw-z-[1];
     @apply tw-border-0 #{!important};
   }
 
@@ -1597,7 +1612,7 @@ $variants: (
   }
 
   &__header-cell__content {
-    @apply tw-flex tw-items-center tw-flex-nowrap tw-truncate tw-px-3 tw-font-bold tw-text-sm tw-text-[color:var(--table-header-text-color)];
+    @apply tw-flex tw-items-center tw-flex-nowrap tw-truncate tw-px-3 tw-font-semibold tw-text-sm tw-text-[color:var(--table-header-text-color)] tw-leading-5;
   }
 
   &__header-cell__title {
@@ -1609,11 +1624,11 @@ $variants: (
   }
 
   &__header-cell__sort-icon {
-    @apply tw-ml-1;
+    @apply tw-ml-1 tw-text-[color:var(--table-sort-icon-color)];
   }
 
   &__header-cell__sort-icons {
-    @apply tw-flex tw-flex-col tw-ml-1 tw-invisible;
+    @apply tw-flex tw-flex-col tw-ml-1 tw-invisible tw-text-[color:var(--table-sort-icon-color)];
   }
 
   &__header-cell__resizer {
@@ -1727,7 +1742,7 @@ $variants: (
   }
 
   &__footer {
-    @apply tw-bg-[--table-footer-bg] tw-border-t tw-border-solid tw-border-[--table-footer-border-color] tw-flex-shrink-0 tw-flex tw-items-center tw-justify-between;
+    @apply tw-flex-shrink-0 tw-flex tw-items-center tw-justify-between;
   }
 
   &__footer--mobile {
@@ -1735,7 +1750,7 @@ $variants: (
   }
 
   &__footer--desktop {
-    @apply tw-p-4;
+    @apply tw-py-3 tw-px-6;
   }
 
   /* Drag row styles */