@vc-shell/framework 1.0.340 → 1.1.0-alpha.2

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

@@ -2,6 +2,8 @@
   <div
     ref="target"
     class="vc-tooltip"
+    @mouseenter="showTooltip"
+    @mouseleave="hideTooltip"
   >
     <div
       ref="tooltipCompRef"
@@ -25,8 +27,7 @@
 
 <script lang="ts" setup>
 import { useFloating, shift, Placement, offset as floatingOffset } from "@floating-ui/vue";
-import { getCurrentInstance, ref, watch } from "vue";
-import { useMouseInElement } from "@vueuse/core";
+import { getCurrentInstance, ref } from "vue";
 
 export interface Props {
   placement?: Placement;
@@ -34,14 +35,16 @@ export interface Props {
     crossAxis?: number;
     mainAxis?: number;
   };
+  delay?: number;
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  placement: "bottom-end",
+  placement: "bottom",
   offset: () => ({
-    crossAxis: 5,
-    mainAxis: 5,
+    crossAxis: 0,
+    mainAxis: 0,
   }),
+  delay: 0,
 });
 
 defineSlots<{
@@ -53,9 +56,9 @@ const tooltipVisible = ref(false);
 const tooltipCompRef = ref<HTMLElement | null>(null);
 const tooltipRef = ref<HTMLElement | null>(null);
 const target = ref(null);
+let showTimeout: NodeJS.Timeout | null = null;
 
 const instance = getCurrentInstance();
-
 const appContainer = instance?.appContext.app._container.id;
 
 const { floatingStyles } = useFloating(tooltipCompRef, tooltipRef, {
@@ -63,11 +66,23 @@ const { floatingStyles } = useFloating(tooltipCompRef, tooltipRef, {
   middleware: [floatingOffset(props.offset), shift()],
 });
 
-const { isOutside } = useMouseInElement(target);
+const showTooltip = () => {
+  if (props.delay > 0) {
+    showTimeout = setTimeout(() => {
+      tooltipVisible.value = true;
+    }, props.delay);
+  } else {
+    tooltipVisible.value = true;
+  }
+};
 
-watch(isOutside, (outside) => {
-  tooltipVisible.value = !outside;
-});
+const hideTooltip = () => {
+  if (showTimeout) {
+    clearTimeout(showTimeout);
+    showTimeout = null;
+  }
+  tooltipVisible.value = false;
+};
 </script>
 
 <style lang="scss">
@@ -85,7 +100,7 @@ watch(isOutside, (outside) => {
   }
 
   &__content {
-    @apply tw-absolute tw-z-[1001] tw-bg-[color:var(--tooltip-background-color)] tw-border tw-border-solid tw-border-[color:var(--tooltip-border-color)] tw-shadow-lg tw-rounded tw-text-[color:var(--tooltip-text-color)] tw-font-normal tw-py-1 tw-px-2;
+    @apply tw-absolute tw-z-[1002] tw-bg-[color:var(--tooltip-background-color)] tw-border tw-border-solid tw-border-[color:var(--tooltip-border-color)] tw-shadow-lg tw-rounded tw-text-[color:var(--tooltip-text-color)] tw-font-normal tw-py-1 tw-px-2;
   }
 }
 </style>

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

@@ -1 +1 @@
-export { default as VcVideo } from "./vc-video.vue";
+export { default as VcVideo } from "./vc-video.vue";

package/ui/components/atoms/vc-video/vc-video.stories.ts

@@ -1,19 +1,19 @@
-import type { Meta, StoryFn } from "@storybook/vue3";
-import { VcVideo } from "./";
-
-export default {
-  title: "atoms/VcVideo",
-  component: VcVideo,
-  args: {
-    source: "https://www.youtube.com/embed/PeXX-V-dwpA",
-    label: "Video",
-  },
-} satisfies Meta<typeof VcVideo>;
-
-export const Primary: StoryFn<typeof VcVideo> = (args) => ({
-  components: { VcVideo },
-  setup() {
-    return { args };
-  },
-  template: '<vc-video v-bind="args" />',
-});
+import type { Meta, StoryFn } from "@storybook/vue3";
+import { VcVideo } from "./";
+
+export default {
+  title: "atoms/VcVideo",
+  component: VcVideo,
+  args: {
+    source: "https://www.youtube.com/embed/PeXX-V-dwpA",
+    label: "Video",
+  },
+} satisfies Meta<typeof VcVideo>;
+
+export const Primary: StoryFn<typeof VcVideo> = (args) => ({
+  components: { VcVideo },
+  setup() {
+    return { args };
+  },
+  template: '<vc-video v-bind="args" />',
+});

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

@@ -1,3 +1,3 @@
-import _Widget from "./vc-widget.vue";
-
-export const VcWidget = _Widget as typeof _Widget;
+import _Widget from "./vc-widget.vue";
+
+export const VcWidget = _Widget as typeof _Widget;

package/ui/components/atoms/vc-widget/vc-widget.stories.ts

@@ -1,20 +1,20 @@
-import type { Meta, StoryFn } from "@storybook/vue3";
-import { VcWidget } from "./";
-
-export default {
-  title: "atoms/VcWidget",
-  component: VcWidget,
-  args: {
-    icon: "fas fa-save",
-    title: "Saved",
-    value: 12,
-  },
-} satisfies Meta<typeof VcWidget>;
-
-export const Primary: StoryFn<typeof VcWidget> = (args) => ({
-  components: { VcWidget },
-  setup() {
-    return { args };
-  },
-  template: '<vc-widget v-bind="args"></vc-widget>',
-});
+import type { Meta, StoryFn } from "@storybook/vue3";
+import { VcWidget } from "./";
+
+export default {
+  title: "atoms/VcWidget",
+  component: VcWidget,
+  args: {
+    icon: "fas fa-save",
+    title: "Saved",
+    value: 12,
+  },
+} satisfies Meta<typeof VcWidget>;
+
+export const Primary: StoryFn<typeof VcWidget> = (args) => ({
+  components: { VcWidget },
+  setup() {
+    return { args };
+  },
+  template: '<vc-widget v-bind="args"></vc-widget>',
+});

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

@@ -1,39 +1,41 @@
 <template>
   <VcTooltip
+    class="vc-widget"
     :placement="$isDesktop.value ? 'bottom' : 'top'"
     :offset="{
       crossAxis: 0,
       mainAxis: -10,
     }"
+    :delay="1000"
   >
     <div
-      class="vc-widget"
+      class="vc-widget__container"
       :class="[
-        { 'vc-widget--expanded': isExpanded },
-        { 'vc-widget--collapsed': !isExpanded },
-        { 'vc-widget--mobile': $isMobile.value },
-        { 'vc-widget--disabled': disabled },
+        { 'vc-widget__container--expanded': isExpanded },
+        { 'vc-widget__container--collapsed': !isExpanded },
+        { 'vc-widget__container--disabled': disabled },
+        { 'vc-widget__container--horizontal': horizontal },
       ]"
       @click="onClick"
     >
       <VcBadge
         :content="truncateCount"
-        :size="isExpanded ? 'm' : 's'"
+        size="s"
       >
         <div class="vc-widget__icon-container">
           <VcIcon
             v-if="icon"
             class="vc-widget__icon"
             :icon="icon"
-            :size="isExpanded ? 'xxl' : 'l'"
+            size="m"
           ></VcIcon>
         </div>
       </VcBadge>
-      <div class="vc-widget__content">
-        <div
-          v-if="title && isExpanded"
-          class="vc-widget__title"
-        >
+      <div
+        v-if="title"
+        class="vc-widget__content"
+      >
+        <div class="vc-widget__title">
           {{ title }}
         </div>
       </div>
@@ -48,23 +50,37 @@
 </template>
 
 <script lang="ts" setup>
-import { computed } from "vue";
+import { computed, getCurrentInstance, inject } from "vue";
 import { VcIcon } from "./../vc-icon";
+import { useWidgets } from "../../../../core/composables";
+
 export interface Props {
   icon?: string;
   title?: string;
   value?: string | number;
   disabled?: boolean;
   isExpanded?: boolean;
+  horizontal?: boolean;
 }
 
-export interface Emits {
+const props = defineProps<Props>();
+const emit = defineEmits<{
   (event: "click"): void;
-}
+}>();
 
-const props = defineProps<Props>();
+const instance = getCurrentInstance();
 
-const emit = defineEmits<Emits>();
+const widgetService = useWidgets();
+
+function onClick() {
+  if (!props.disabled) {
+    const widgetName = instance?.parent?.type.__name;
+    if (widgetName && instance?.parent?.exposed) {
+      widgetService.setActiveWidget(instance?.parent?.exposed);
+    }
+    emit("click");
+  }
+}
 
 const truncateCount = computed(() => {
   if (
@@ -76,47 +92,50 @@ const truncateCount = computed(() => {
     return props.value;
   }
 });
-
-function onClick() {
-  if (!props.disabled) {
-    emit("click");
-  }
-}
 </script>
 
 <style lang="scss">
 :root {
-  --widget-bg-color: var(--additional-50);
-  --widget-border-color: var(--base-border-color, var(--neutrals-200));
-  --widget-bg-hover-color: var(--primary-50);
-  --widget-icon-color: var(--secondary-500);
-  --widget-icon-disabled-color: var(--neutrals-300);
-  --widget-title-color: var(--base-text-color, var(--neutrals-950));
-  --widget-title-disabled-color: var(--neutrals-300);
-  --widget-value-color: var(--primary-400);
-  --widget-value-disabled-color: var(--neutrals-300);
+  --widget-bg-color: transparent;
+  --widget-bg-hover-color: transparent;
+  --widget-icon-color: var(--neutrals-700);
+  --widget-icon-hover-color: var(--primary-600);
+  --widget-icon-disabled-color: var(--neutrals-400);
+  --widget-title-color: var(--neutrals-600);
+  --widget-title-hover-color: var(--primary-600);
+  --widget-title-disabled-color: var(--neutrals-400);
 }
 
 .vc-widget {
-  @apply tw-relative tw-shrink-0 tw-py-4 tw-px-2;
-  @apply tw-flex tw-overflow-hidden tw-box-border tw-flex-col tw-items-center tw-justify-center tw-border-b tw-border-solid tw-cursor-pointer;
-  @apply tw-bg-[color:var(--widget-bg-color)] tw-border-b-[color:var(--widget-border-color)];
-
-  &:hover {
-    @apply tw-bg-[color:var(--widget-bg-hover-color)];
-  }
+  &__container {
+    @apply tw-relative tw-shrink-0 tw-px-2 tw-w-max;
+    @apply tw-flex tw-overflow-visible tw-box-border tw-flex-col tw-items-center tw-justify-center tw-cursor-pointer;
+    @apply tw-bg-[color:var(--widget-bg-color)];
+    @apply tw-transition-colors tw-duration-200;
+
+    &--horizontal {
+      @apply tw-flex-row tw-gap-2;
+
+      .vc-widget__content {
+        @apply tw-ml-1;
+      }
+
+      .vc-widget__title {
+        @apply tw-mt-0 tw-text-left tw-whitespace-nowrap;
+      }
+    }
 
-  &--expanded {
-    @apply tw-w-32 tw-h-32;
-  }
+    &:hover {
+      @apply tw-bg-[color:var(--widget-bg-hover-color)];
 
-  &--collapsed {
-    @apply tw-w-12 tw-h-12;
-  }
+      .vc-widget__title {
+        @apply tw-text-[color:var(--widget-title-hover-color)];
+      }
 
-  &--mobile {
-    @apply tw-w-28;
-    @apply tw-border-none #{!important};
+      .vc-widget__icon {
+        @apply tw-text-[color:var(--widget-icon-hover-color)];
+      }
+    }
   }
 
   &__icon-container {
@@ -127,27 +146,35 @@ function onClick() {
     @apply tw-text-[color:var(--widget-icon-color)];
   }
 
-  &--disabled &__icon {
-    @apply tw-text-[color:var(--widget-icon-disabled-color)];
+  &__content {
+    @apply tw-w-full;
   }
 
   &__title {
-    @apply tw-font-medium tw-text-sm tw-text-[color:var(--widget-title-color)] tw-mt-2 tw-mx-0 tw-text-center tw-line-clamp-2;
+    @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;
   }
 
-  &--disabled &__title {
-    @apply tw-text-[color:var(--widget-title-disabled-color)];
-  }
+  &__container--disabled {
+    @apply tw-cursor-default tw-bg-[color:var(--widget-bg-color)];
 
-  &__content {
-    @apply tw-w-full;
-  }
+    .vc-widget__icon {
+      @apply tw-text-[color:var(--widget-icon-disabled-color)];
+    }
 
-  &--disabled {
-    @apply tw-cursor-default tw-bg-[color:var(--widget-bg-color)];
+    .vc-widget__title {
+      @apply tw-text-[color:var(--widget-title-disabled-color)];
+    }
 
     &:hover {
       @apply tw-bg-[color:var(--widget-bg-color)];
+
+      .vc-widget__icon {
+        @apply tw-text-[color:var(--widget-icon-disabled-color)];
+      }
+
+      .vc-widget__title {
+        @apply tw-text-[color:var(--widget-title-disabled-color)];
+      }
     }
   }
 }

package/ui/components/index.ts

@@ -6,3 +6,5 @@ export * from "./molecules";
 
 /* Organisms */
 export * from "./organisms";
+
+export { default as VcSkeleton } from './atoms/vc-skeleton/vc-skeleton.vue';

package/ui/components/molecules/index.ts

@@ -1,16 +1,16 @@
-export * from "./vc-breadcrumbs";
-export * from "./vc-editor";
-export * from "./vc-form";
-export * from "./vc-file-upload";
-export * from "./vc-input";
-export * from "./vc-input-currency";
-export * from "./vc-notification";
-export * from "./vc-pagination";
-export * from "./vc-rating";
-export * from "./vc-select";
-export * from "./vc-slider";
-export * from "./vc-textarea";
-export * from "./vc-multivalue";
-export * from "./vc-field";
-export * from "./vc-radio-button";
-export * from "./vc-checkbox";
+export * from "./vc-breadcrumbs";
+export * from "./vc-editor";
+export * from "./vc-form";
+export * from "./vc-file-upload";
+export * from "./vc-input";
+export * from "./vc-input-currency";
+export * from "./vc-notification";
+export * from "./vc-pagination";
+export * from "./vc-rating";
+export * from "./vc-select";
+export * from "./vc-slider";
+export * from "./vc-textarea";
+export * from "./vc-multivalue";
+export * from "./vc-field";
+export * from "./vc-radio-button";
+export * from "./vc-checkbox";

package/ui/components/molecules/vc-breadcrumbs/_internal/vc-breadcrumbs-item/vc-breadcrumbs-item.vue

@@ -1,92 +1,89 @@
-<template>
-  <div
-    class="vc-breadcrumbs-item"
-    :class="{
-      'vc-breadcrumbs-item--current': current,
-      'vc-breadcrumbs-item--light': variant === 'light',
-    }"
-    @click="onClick"
-  >
-    <VcIcon
-      v-if="icon"
-      class="vc-breadcrumbs-item__icon"
-      :icon="icon"
-      size="s"
-    />
-    <div class="vc-breadcrumbs-item__title">
-      {{ title }}
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { Breadcrumbs } from "../../../../../types";
-import { VcIcon } from "./../../../../";
-
-export interface Props extends Breadcrumbs {
-  current: boolean;
-  variant?: "default" | "light";
-}
-
-export interface Emits {
-  (event: "click"): void;
-}
-
-const props = defineProps<Props>();
-
-const emit = defineEmits<Emits>();
-
-function onClick(): void {
-  if (!props.current) {
-    if (props.clickHandler && typeof props.clickHandler === "function") {
-      props.clickHandler(props.id);
-    } else {
-      emit("click");
-    }
-  }
-}
-</script>
-
-<style lang="scss">
-:root {
-  --breadcrumbs-item-height: 28px;
-  --breadcrumbs-item-height-light: 20px;
-  --breadcrumbs-item-border-color: var(--secondary-300);
-  --breadcrumbs-item-border-color-hover: var(--secondary-400);
-  --breadcrumbs-item-border-color-current: var(--secondary-500);
-  --breadcrumbs-item-color: var(--primary-500);
-  --breadcrumbs-item-color-current: var(--primary-600);
-  --breadcrumbs-item-icon-color: var(--secondary-300);
-}
-
-.vc-breadcrumbs-item {
-  @apply tw-box-border tw-rounded-[3px] tw-border tw-border-solid tw-text-sm tw-cursor-pointer tw-inline-flex tw-items-center;
-  @apply tw-h-[var(--breadcrumbs-item-height)] tw-px-3 tw-whitespace-nowrap;
-  @apply tw-border-[color:var(--breadcrumbs-item-border-color)] tw-text-[color:var(--breadcrumbs-item-color)];
-  @apply tw-transition-colors tw-duration-300;
-
-  &--current {
-    @apply tw-text-[color:var(--breadcrumbs-item-color-current)] tw-border-[color:var(--breadcrumbs-item-border-color-current)] tw-cursor-default tw-mr-0;
-  }
-
-  &--light {
-    @apply tw-px-1 tw-h-[var(--breadcrumbs-item-height-light)];
-  }
-
-  &__icon {
-    @apply tw-mr-2 tw-text-[color:var(--breadcrumbs-item-icon-color)];
-  }
-
-  &__title {
-    @apply tw-max-w-[150px] tw-truncate;
-  }
-
-  &--error {
-    @apply tw-border-[color:var(--breadcrumbs-item-border-color-error)] tw-text-[color:var(--breadcrumbs-item-color-error)];
-  }
-
-  &:hover {
-    @apply tw-border tw-border-solid tw-border-[color:var(--breadcrumbs-item-border-color-hover)];
-  }
-}
-</style>
+<template>
+  <div
+    class="vc-breadcrumbs-item"
+    :class="{
+      'vc-breadcrumbs-item--current': current,
+      'vc-breadcrumbs-item--light': variant === 'light',
+    }"
+    @click="onClick"
+  >
+    <VcIcon
+      v-if="icon"
+      class="vc-breadcrumbs-item__icon"
+      :icon="icon"
+      size="s"
+    />
+    <div class="vc-breadcrumbs-item__title">
+      {{ title }}
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { Breadcrumbs } from "../../../../../types";
+import { VcIcon } from "./../../../../";
+
+export interface Props extends Breadcrumbs {
+  current: boolean;
+  variant?: "default" | "light";
+}
+
+export interface Emits {
+  (event: "click"): void;
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<Emits>();
+
+function onClick(): void {
+  if (!props.current) {
+    if (props.clickHandler && typeof props.clickHandler === "function") {
+      props.clickHandler(props.id);
+    } else {
+      emit("click");
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+:root {
+  --breadcrumbs-item-text-color: var(--secondary-300);
+  --breadcrumbs-item-text-color-hover: var(--neutrals-500);
+  --breadcrumbs-item-color: var(--neutrals-400);
+  --breadcrumbs-item-color-current: var(--primary-500);
+  --breadcrumbs-item-icon-color: var(--secondary-300);
+}
+
+.vc-breadcrumbs-item {
+  @apply tw-box-border tw-text-sm tw-cursor-pointer tw-inline-flex tw-items-center;
+  @apply tw-h-[var(--breadcrumbs-item-height)] tw-whitespace-nowrap;
+  @apply tw-text-[color:var(--breadcrumbs-item-color)] tw-leading-normal;
+  @apply tw-transition-colors tw-duration-300;
+
+  &--current {
+    @apply tw-text-[color:var(--breadcrumbs-item-color-current)] tw-cursor-default tw-mr-0;
+  }
+
+  &--light {
+    @apply tw-px-1;
+  }
+
+  &__icon {
+    @apply tw-mr-2 tw-text-[color:var(--breadcrumbs-item-icon-color)];
+  }
+
+  &__title {
+    @apply tw-max-w-[150px] tw-truncate;
+  }
+
+  &--error {
+    @apply tw-text-[color:var(--breadcrumbs-item-color-error)];
+  }
+
+  &:hover {
+    @apply tw-text-[color:var(--breadcrumbs-item-text-color-hover)];
+  }
+}
+</style>

package/ui/components/molecules/vc-breadcrumbs/index.ts

@@ -1 +1 @@
-export { default as VcBreadcrumbs } from "./vc-breadcrumbs.vue";
+export { default as VcBreadcrumbs } from "./vc-breadcrumbs.vue";