@vc-shell/framework 1.0.293 → 1.0.295

package/tailwind.config.ts

@@ -1,145 +1,10 @@
 /** @type { import('tailwindcss').Config } */
 
-const primaryColors = {
-  DEFAULT: "rgb(from var(--primary-500) r g b / <alpha-value>)",
-  50: "rgb(from var(--primary-50) r g b / <alpha-value>)",
-  100: "rgb(from var(--primary-100) r g b / <alpha-value>)",
-  200: "rgb(from var(--primary-200) r g b / <alpha-value>)",
-  300: "rgb(from var(--primary-300) r g b / <alpha-value>)",
-  400: "rgb(from var(--primary-400) r g b / <alpha-value>)",
-  500: "rgb(from var(--primary-500) r g b / <alpha-value>)",
-  600: "rgb(from var(--primary-600) r g b / <alpha-value>)",
-  700: "rgb(from var(--primary-700) r g b / <alpha-value>)",
-  800: "rgb(from var(--primary-800) r g b / <alpha-value>)",
-  900: "rgb(from var(--primary-900) r g b / <alpha-value>)",
-  950: "rgb(from var(--primary-950) r g b / <alpha-value>)",
-};
-
-const secondaryColors = {
-  DEFAULT: "rgb(from var(--secondary-500) r g b / <alpha-value>)",
-  50: "rgb(from var(--secondary-50) r g b / <alpha-value>)",
-  100: "rgb(from var(--secondary-100) r g b / <alpha-value>)",
-  200: "rgb(from var(--secondary-200) r g b / <alpha-value>)",
-  300: "rgb(from var(--secondary-300) r g b / <alpha-value>)",
-  400: "rgb(from var(--secondary-400) r g b / <alpha-value>)",
-  500: "rgb(from var(--secondary-500) r g b / <alpha-value>)",
-  600: "rgb(from var(--secondary-600) r g b / <alpha-value>)",
-  700: "rgb(from var(--secondary-700) r g b / <alpha-value>)",
-  800: "rgb(from var(--secondary-800) r g b / <alpha-value>)",
-  900: "rgb(from var(--secondary-900) r g b / <alpha-value>)",
-  950: "rgb(from var(--secondary-950) r g b / <alpha-value>)",
-};
-
-const infoColors = {
-  DEFAULT: "rgb(from var(--info-500) r g b / <alpha-value>)",
-  50: "rgb(from var(--info-50) r g b / <alpha-value>)",
-  100: "rgb(from var(--info-100) r g b / <alpha-value>)",
-  200: "rgb(from var(--info-200) r g b / <alpha-value>)",
-  300: "rgb(from var(--info-300) r g b / <alpha-value>)",
-  400: "rgb(from var(--info-400) r g b / <alpha-value>)",
-  500: "rgb(from var(--info-500) r g b / <alpha-value>)",
-  600: "rgb(from var(--info-600) r g b / <alpha-value>)",
-  700: "rgb(from var(--info-700) r g b / <alpha-value>)",
-  800: "rgb(from var(--info-800) r g b / <alpha-value>)",
-  900: "rgb(from var(--info-900) r g b / <alpha-value>)",
-  950: "rgb(from var(--info-950) r g b / <alpha-value>)",
-};
-
-const successColors = {
-  DEFAULT: "rgb(from var(--success-500) r g b / <alpha-value>)",
-  50: "rgb(from var(--success-50) r g b / <alpha-value>)",
-  100: "rgb(from var(--success-100) r g b / <alpha-value>)",
-  200: "rgb(from var(--success-200) r g b / <alpha-value>)",
-  300: "rgb(from var(--success-300) r g b / <alpha-value>)",
-  400: "rgb(from var(--success-400) r g b / <alpha-value>)",
-  500: "rgb(from var(--success-500) r g b / <alpha-value>)",
-  600: "rgb(from var(--success-600) r g b / <alpha-value>)",
-  700: "rgb(from var(--success-700) r g b / <alpha-value>)",
-  800: "rgb(from var(--success-800) r g b / <alpha-value>)",
-  900: "rgb(from var(--success-900) r g b / <alpha-value>)",
-  950: "rgb(from var(--success-950) r g b / <alpha-value>)",
-};
-
-const warningColors = {
-  DEFAULT: "rgb(from var(--warning-500) r g b / <alpha-value>)",
-  50: "rgb(from var(--warning-50) r g b / <alpha-value>)",
-  100: "rgb(from var(--warning-100) r g b / <alpha-value>)",
-  200: "rgb(from var(--warning-200) r g b / <alpha-value>)",
-  300: "rgb(from var(--warning-300) r g b / <alpha-value>)",
-  400: "rgb(from var(--warning-400) r g b / <alpha-value>)",
-  500: "rgb(from var(--warning-500) r g b / <alpha-value>)",
-  600: "rgb(from var(--warning-600) r g b / <alpha-value>)",
-  700: "rgb(from var(--warning-700) r g b / <alpha-value>)",
-  800: "rgb(from var(--warning-800) r g b / <alpha-value>)",
-  900: "rgb(from var(--warning-900) r g b / <alpha-value>)",
-  950: "rgb(from var(--warning-950) r g b / <alpha-value>)",
-};
-
-const dangerColors = {
-  DEFAULT: "rgb(from var(--danger-500) r g b / <alpha-value>)",
-  50: "rgb(from var(--danger-50) r g b / <alpha-value>)",
-  100: "rgb(from var(--danger-100) r g b / <alpha-value>)",
-  200: "rgb(from var(--danger-200) r g b / <alpha-value>)",
-  300: "rgb(from var(--danger-300) r g b / <alpha-value>)",
-  400: "rgb(from var(--danger-400) r g b / <alpha-value>)",
-  500: "rgb(from var(--danger-500) r g b / <alpha-value>)",
-  600: "rgb(from var(--danger-600) r g b / <alpha-value>)",
-  700: "rgb(from var(--danger-700) r g b / <alpha-value>)",
-  800: "rgb(from var(--danger-800) r g b / <alpha-value>)",
-  900: "rgb(from var(--danger-900) r g b / <alpha-value>)",
-  950: "rgb(from var(--danger-950) r g b / <alpha-value>)",
-};
-
-const neutralColors = {
-  DEFAULT: "rgb(from var(--neutral-500) r g b / <alpha-value>)",
-  50: "rgb(from var(--neutral-50) r g b / <alpha-value>)",
-  100: "rgb(from var(--neutral-100) r g b / <alpha-value>)",
-  200: "rgb(from var(--neutral-200) r g b / <alpha-value>)",
-  300: "rgb(from var(--neutral-300) r g b / <alpha-value>)",
-  400: "rgb(from var(--neutral-400) r g b / <alpha-value>)",
-  500: "rgb(from var(--neutral-500) r g b / <alpha-value>)",
-  600: "rgb(from var(--neutral-600) r g b / <alpha-value>)",
-  700: "rgb(from var(--neutral-700) r g b / <alpha-value>)",
-  800: "rgb(from var(--neutral-800) r g b / <alpha-value>)",
-  900: "rgb(from var(--neutral-900) r g b / <alpha-value>)",
-  950: "rgb(from var(--neutral-950) r g b / <alpha-value>)",
-};
-
-const accentColors = {
-  DEFAULT: "rgb(from var(--accent-500) r g b / <alpha-value>)",
-  50: "rgb(from var(--accent-50) r g b / <alpha-value>)",
-  100: "rgb(from var(--accent-100) r g b / <alpha-value>)",
-  200: "rgb(from var(--accent-200) r g b / <alpha-value>)",
-  300: "rgb(from var(--accent-300) r g b / <alpha-value>)",
-  400: "rgb(from var(--accent-400) r g b / <alpha-value>)",
-  500: "rgb(from var(--accent-500) r g b / <alpha-value>)",
-  600: "rgb(from var(--accent-600) r g b / <alpha-value>)",
-  700: "rgb(from var(--accent-700) r g b / <alpha-value>)",
-  800: "rgb(from var(--accent-800) r g b / <alpha-value>)",
-  900: "rgb(from var(--accent-900) r g b / <alpha-value>)",
-  950: "rgb(from var(--accent-950) r g b / <alpha-value>)",
-};
-
-const additionalColors = {
-  50: "rgb(from var(--additional-50) r g b / <alpha-value>)",
-  950: "rgb(from var(--additional-950) r g b / <alpha-value>)",
-};
-
-const colors = {
-  transparent: "transparent",
-  current: "currentColor",
-  inherit: "inherit",
-
-  primary: primaryColors,
-  secondary: secondaryColors,
-  info: infoColors,
-  success: successColors,
-  warning: warningColors,
-  danger: dangerColors,
-  neutral: neutralColors,
-  accent: accentColors,
-  additional: additionalColors,
-};
+export const content = [
+  "../../node_modules/@vc-shell/**/*.{vue,js,ts,jsx,tsx}",
+  "./ui/components/**/*.{vue,js,ts,jsx,tsx}",
+  "./shared/**/*.{vue,js,ts,jsx,tsx}",
+];
 
 export default {
   prefix: "tw-",
@@ -147,61 +12,6 @@ export default {
     fontFamily: {
       roboto: ["Roboto", "sans-serif"],
     },
-    // fontSize: {
-    //   xs: ["11px", "14px"],
-    //   sm: ["12px", "16px"],
-    //   base: ["13px", "18px"],
-    //   lg: ["14px", "19px"],
-    //   xl: ["16px", "22px"],
-    //   "2xl": ["23px", "28px"],
-    // },
-    // lineHeight: {
-    //   xs: "14px",
-    //   sm: "16px",
-    //   base: "18px",
-    //   lg: "19px",
-    //   xl: "22px",
-    //   "2xl": "28px",
-    //   header: "28px",
-    // },
-    // colors,
-
-    // backgroundColor: {
-    //   ...colors,
-    // },
-
-    // textColor: {
-    //   ...colors,
-    // },
-
-    // textDecorationColor: {
-    //   ...colors,
-    // },
-
-    // borderColor: {
-    //   ...colors,
-    //   DEFAULT: neutralColors[200],
-    // },
-
-    // divideColor: {
-    //   ...colors,
-    //   DEFAULT: neutralColors[200],
-    // },
-
-    // outlineColor: {
-    //   ...colors,
-    //   DEFAULT: primaryColors[100],
-    // },
-
-    // ringColor: {
-    //   ...colors,
-    //   DEFAULT: primaryColors[100],
-    // },
-
-    // boxShadowColor: {
-    //   ...colors,
-    // },
-
     fontSize: {
       xxs: [
         "0.625rem", //10px
@@ -312,7 +122,5 @@ export default {
       },
     },
   },
-  content: ["./ui/components/**/*.{vue,js,ts,jsx,tsx}", "./shared/**/*.{vue,js,ts,jsx,tsx}"],
+  content,
 };
-
-export const content = ["../../node_modules/@vc-shell/**/*.{vue,js,ts,jsx,tsx}"];

package/ui/components/atoms/vc-image/index.ts

@@ -1,3 +1 @@
-import _Image from "./vc-image.vue";
-
-export const VcImage = _Image as typeof _Image;
+export { default as VcImage } from "./vc-image.vue";

package/ui/components/atoms/vc-image/vc-image.vue

@@ -39,7 +39,7 @@ export interface Props {
   bordered?: boolean;
   clickable?: boolean;
   src?: string;
-  size?: "auto" | "xs" | "s" | "m" | "l" | "xl" | "xxl";
+  size?: "auto" | "xxs" | "xs" | "s" | "m" | "l" | "xl" | "xxl";
   background?: "cover" | "contain" | "auto";
   emptyIcon?: string;
 }
@@ -73,6 +73,7 @@ function onClick(): void {
 
 <style lang="scss">
 :root {
+  --image-size-xxs: 24px;
   --image-size-xs: 32px;
   --image-size-s: 48px;
   --image-size-m: 64px;
@@ -92,7 +93,7 @@ $aspects: (
   3x2: 66.66%,
 );
 
-$sizes: xs, s, m, l, xl, xxl;
+$sizes: xxs, xs, s, m, l, xl, xxl;
 
 .vc-image {
   @apply tw-inline-block tw-relative;

package/ui/components/atoms/vc-tooltip/vc-tooltip.vue

@@ -10,7 +10,7 @@
       <slot></slot>
     </div>
 
-    <teleport to="body">
+    <teleport :to="`#${appContainer}`">
       <span
         v-if="tooltipVisible && $slots['tooltip']"
         ref="tooltipRef"
@@ -25,7 +25,7 @@
 
 <script lang="ts" setup>
 import { useFloating, shift, Placement, offset as floatingOffset } from "@floating-ui/vue";
-import { ref, nextTick, watch } from "vue";
+import { getCurrentInstance, ref, watch } from "vue";
 import { useMouseInElement } from "@vueuse/core";
 
 export interface Props {
@@ -54,6 +54,11 @@ const tooltipCompRef = ref<HTMLElement | null>(null);
 const tooltipRef = ref<HTMLElement | null>(null);
 const target = ref(null);
 
+const instance = getCurrentInstance();
+console.log(instance);
+
+const appContainer = instance?.appContext.app._container.id;
+
 const { floatingStyles } = useFloating(tooltipCompRef, tooltipRef, {
   placement: props.placement,
   middleware: [floatingOffset(props.offset), shift()],

package/ui/components/molecules/vc-field/_internal/vc-field-type/vc-field-type.vue

@@ -21,7 +21,7 @@
   <template v-if="type === 'date-ago'">
     <div class="vc-field-type">
       <div class="vc-field-type__text-wrap">
-        <p class="vc-field-type__text">{{ value instanceof Date ? moment(value).fromNow() ?? "N/A" : value }}</p>
+        <p class="vc-field-type__text">{{ value instanceof Date ? (moment(value).fromNow() ?? "N/A") : value }}</p>
       </div>
     </div>
   </template>

package/ui/components/molecules/vc-input/vc-input.vue

@@ -720,6 +720,14 @@ function focus() {
   }
 }
 
+.dp__main {
+  @apply tw-flex tw-items-center;
+
+  & > div {
+    @apply tw-w-full tw-h-full tw-flex tw-items-center;
+  }
+}
+
 .dp__pm_am_button {
   background: var(--dp-primary-color) !important;
   color: var(--dp-primary-text-color) !important;
@@ -753,4 +761,34 @@ input.dp__input::placeholder {
   min-width: var(--dp-menu-min-width);
   max-width: 100% !important;
 }
+
+.dp__theme_light {
+  --dp-background-color: var(--additional-50);
+  --dp-text-color: var(--neutrals-800);
+  --dp-hover-color: var(--neutrals-200);
+  --dp-hover-text-color: var(--neutrals-800);
+  --dp-hover-icon-color: var(--neutrals-400);
+  --dp-primary-color: var(--primary-500);
+  --dp-primary-disabled-color: var(--secondary-400);
+  --dp-primary-text-color: var(--neutrals-50);
+  --dp-secondary-color: var(--secondary-300);
+  --dp-border-color: var(--neutrals-300);
+  --dp-menu-border-color: var(--neutrals-300);
+  --dp-border-color-hover: var(--neutrals-400);
+  --dp-border-color-focus: var(--neutrals-400);
+  --dp-disabled-color: var(--neutrals-100);
+  --dp-scroll-bar-background: var(--neutrals-200);
+  --dp-scroll-bar-color: var(--neutrals-400);
+  --dp-success-color: var(--success-500);
+  --dp-success-color-disabled: var(--success-200);
+  --dp-icon-color: var(--neutrals-400);
+  --dp-danger-color: var(--danger-500);
+  --dp-marker-color: var(--danger-500);
+  --dp-tooltip-color: var(--additional-50);
+  --dp-disabled-color-text: var(--neutrals-400);
+  --dp-highlight-color: rgba(25, 118, 210, 0.1);
+  --dp-range-between-dates-background-color: var(--dp-hover-color);
+  --dp-range-between-dates-text-color: var(--dp-hover-text-color);
+  --dp-range-between-border-color: var(--dp-hover-color);
+}
 </style>

package/ui/components/molecules/vc-input-currency/vc-input-currency.vue

@@ -319,7 +319,7 @@ function handlePaste(e: ClipboardEvent) {
   }
 
   &__control {
-    @apply tw-border tw-border-solid tw-px-2 tw-py-1 tw-text-sm tw-outline-none;
+    @apply tw-border tw-border-solid tw-px-2 tw-py-1 tw-text-sm tw-outline-none tw-bg-transparent;
   }
 }
 </style>

package/ui/components/molecules/vc-select/vc-select.vue

@@ -42,7 +42,13 @@
             >
               <slot name="prepend"></slot>
             </div>
-            <div class="vc-select__field-wrapper">
+            <div
+              class="vc-select__field-wrapper"
+              :class="{
+                'vc-select__field-wrapper--default': size === 'default',
+                'vc-select__field-wrapper--small': size === 'small',
+              }"
+            >
               <div class="vc-select__field">
                 <div class="vc-select__field-inner">
                   <div class="vc-select__field-content">
@@ -62,10 +68,6 @@
                       <div
                         data-test-id="dropdown-toggle"
                         class="vc-select__input"
-                        :class="{
-                          'vc-select__input--default': size === 'default',
-                          'vc-select__input--small': size === 'small',
-                        }"
                         @click.stop="toggleDropdown"
                       >
                         <div
@@ -989,6 +991,14 @@ function onReset() {
 
   &__field-wrapper {
     @apply tw-relative tw-flex tw-flex-auto tw-overflow-x-clip tw-truncate;
+
+    &--default {
+      @apply tw-min-h-[var(--select-height)];
+    }
+
+    &--small {
+      @apply tw-min-h-[var(--select-height-small)];
+    }
   }
 
   &__field {

package/ui/components/organisms/vc-app/_internal/vc-app-bar/vc-app-bar.vue

@@ -131,7 +131,7 @@ watchDebounced(
 }
 
 .vc-app-bar {
-  @apply tw-relative tw-flex tw-items-center tw-justify-between tw-px-4 tw-z-[1002];
+  @apply tw-relative tw-flex tw-items-center tw-justify-between tw-px-4 tw-z-50;
   height: var(--app-bar-height);
   background-color: var(--app-bar-background-color);
   box-shadow: var(--app-bar-shadow);

package/ui/components/organisms/vc-app/_internal/vc-app-menu/vc-app-menu.vue

@@ -17,13 +17,6 @@
         @mouseover="!isExpanded && expandOverHandler(true)"
         @mouseleave="expandOverHandler(false)"
       >
-        <!-- Show backdrop overlay on mobile devices -->
-        <!-- <div
-          v-if="$isMobile.value"
-          class="vc-app-menu__backdrop"
-          @click="isMobileVisible = false"
-        ></div> -->
-
         <div
           class="vc-app-menu__inner"
           :class="{
@@ -32,22 +25,6 @@
             'vc-app-menu__inner--expanded': $isDesktop.value && (isExpanded || isExpandedOver),
           }"
         >
-          <!-- Show menu close handler on mobile devices -->
-          <!-- <div
-            v-if="$isMobile.value"
-            class="vc-app-menu__close-handler"
-          >
-            <button
-              class="vc-app-menu__close-button"
-              @click="isMobileVisible = false"
-            >
-              <VcIcon
-                icon="fas fa-times"
-                size="xl"
-              ></VcIcon>
-            </button>
-          </div> -->
-
           <div
             v-if="$isDesktop.value"
             class="vc-app-menu__burger-container"
@@ -104,6 +81,7 @@
           </VcContainer>
 
           <div
+            v-if="version"
             class="vc-app-menu__version"
             @click="$emit('version:click')"
           >
@@ -125,7 +103,7 @@ import { useLocalStorage } from "@vueuse/core";
 import { Sidebar } from "../../../../../../shared/components";
 
 export interface Props {
-  version: string;
+  version: string | undefined;
 }
 
 export interface Emits {

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

@@ -43,7 +43,10 @@
                   </template>
                 </VcInputCurrency>
               </template>
-              <template #tooltip>
+              <template
+                v-if="errorMessage"
+                #tooltip
+              >
                 <div class="vc-table-cell__error-tooltip">
                   {{ errorMessage }}
                 </div>
@@ -183,7 +186,10 @@
                 </template>
               </VcInput>
             </template>
-            <template #tooltip>
+            <template
+              v-if="errorMessage"
+              #tooltip
+            >
               <div class="vc-table-cell__error-tooltip">
                 {{ errorMessage }}
               </div>
@@ -252,7 +258,10 @@
                 </template>
               </VcInput>
             </template>
-            <template #tooltip>
+            <template
+              v-if="errorMessage"
+              #tooltip
+            >
               <div class="vc-table-cell__error-tooltip">
                 {{ errorMessage }}
               </div>

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

@@ -72,7 +72,7 @@ import { Sidebar } from "./../../../../../../shared/components";
 
 export interface Props {
   title?: string;
-  counter: number;
+  counter?: number;
   parentExpanded?: boolean;
   disabled?: boolean;
 }

package/ui/components/organisms/vc-table/_internal/vc-table-mobile-item/vc-table-mobile-item.vue

@@ -33,6 +33,7 @@
             class="vc-table-mobile__action"
             :class="`vc-table-mobile__item-action_${leftSwipeActions[0].type}`"
             @click.stop="leftSwipeActions?.[0].clickHandler(items[index] as T, index)"
+            @touchstart.stop
           >
             <VcIcon :icon="leftSwipeActions[0].icon" />
             <div class="vc-table-mobile__action-title">
@@ -51,6 +52,7 @@
           v-if="rightSwipeActions && rightSwipeActions.length && direction === 'left'"
           class="vc-table-mobile__swipe-actions vc-table-mobile__swipe-actions_right"
           :style="{ width: actionsWidth }"
+          @touchstart.stop
         >
           <div
             v-for="(action, idx) in rightSwipeActions.slice(0, rightSwipeActions.length > 2 ? 1 : 2)"