@vc-shell/framework 1.1.0-alpha.3 → 1.1.0-alpha.4

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

@@ -1,102 +1,102 @@
-import type { Meta, StoryFn } from "@storybook/vue3";
-import { VcCard } from ".";
-import { VcInput, VcCol, VcButton } from "./../../";
-
-const VARIANT = ["default", "success", "danger"];
-
-export default {
-  title: "atoms/VcCard",
-  component: VcCard,
-  args: {
-    header: "Card Title",
-    variant: "default",
-    default: "Text",
-  },
-  argTypes: {
-    default: {
-      control: "radio",
-      options: ["Text", "Component"],
-      mapping: {
-        Text: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!",
-        Component: VcInput,
-      },
-    },
-    header: { control: "text" },
-    icon: { control: "text" },
-    isCollapsable: { control: "boolean" },
-    isCollapsed: { control: "boolean" },
-    variant: {
-      control: "radio",
-      options: VARIANT,
-      table: {
-        type: {
-          summary: VARIANT.join(" | "),
-        },
-      },
-    },
-    fill: { control: "boolean" },
-  },
-} satisfies Meta<typeof VcCard>;
-
-export const Template: StoryFn<typeof VcCard> = (args) => ({
-  components: { VcCard, VcInput, VcCol },
-  setup() {
-    return { args };
-  },
-  template: `
-    <vc-card v-bind="args">
-      <template v-if="typeof args.default === 'string'">
-        <p class="tw-p-4">{{args.default}}</p>
-      </template>
-      <template v-else>
-        <component class="tw-p-4" :is="args.default" label="Input Field" placeholder="Input some text" />
-      </template>
-
-    </vc-card>`,
-});
-
-export const Header = Template.bind({});
-Header.args = { header: "Card Title" };
-
-export const Icon = Template.bind({});
-Icon.args = { icon: "fas fa-warehouse" };
-
-export const Collapsable = Template.bind({});
-Collapsable.args = { isCollapsable: true };
-
-export const Collapsed = Template.bind({});
-Collapsed.args = { isCollapsable: true, isCollapsed: true };
-
-export const Fill = Template.bind({});
-Fill.args = { fill: true, header: "Card Title" };
-
-export const Actions: StoryFn<typeof VcCard> = (args) => ({
-  components: {
-    VcCard,
-    VcButton,
-  },
-  setup: () => ({ args }),
-  template: `
-      <vc-card  :variant="variant" header="Card Title">
-        <p class="tw-p-4">{{args.default}}</p>
-
-        <template #actions>
-          <VcButton variant="danger">Action button</VcButton>
-        </template>
-      </vc-card>
-    `,
-});
-
-export const Variants: StoryFn<typeof VcCard> = (args) => ({
-  components: {
-    VcCard,
-  },
-  setup: () => ({ variants: VARIANT, args }),
-  template: `
-    <div class="tw-space-x-8 tw-flex tw-flex-row">
-      <vc-card v-for="variant in variants" :variant="variant" header="Card Title">
-        <p class="tw-p-4">{{args.default}}</p>
-      </vc-card>
-    </div>
-    `,
-});
+import type { Meta, StoryFn } from "@storybook/vue3";
+import { VcCard } from ".";
+import { VcInput, VcCol, VcButton } from "./../../";
+
+const VARIANT = ["default", "success", "danger"];
+
+export default {
+  title: "atoms/VcCard",
+  component: VcCard,
+  args: {
+    header: "Card Title",
+    variant: "default",
+    default: "Text",
+  },
+  argTypes: {
+    default: {
+      control: "radio",
+      options: ["Text", "Component"],
+      mapping: {
+        Text: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!",
+        Component: VcInput,
+      },
+    },
+    header: { control: "text" },
+    icon: { control: "text" },
+    isCollapsable: { control: "boolean" },
+    isCollapsed: { control: "boolean" },
+    variant: {
+      control: "radio",
+      options: VARIANT,
+      table: {
+        type: {
+          summary: VARIANT.join(" | "),
+        },
+      },
+    },
+    fill: { control: "boolean" },
+  },
+} satisfies Meta<typeof VcCard>;
+
+export const Template: StoryFn<typeof VcCard> = (args) => ({
+  components: { VcCard, VcInput, VcCol },
+  setup() {
+    return { args };
+  },
+  template: `
+    <vc-card v-bind="args">
+      <template v-if="typeof args.default === 'string'">
+        <p class="tw-p-4">{{args.default}}</p>
+      </template>
+      <template v-else>
+        <component class="tw-p-4" :is="args.default" label="Input Field" placeholder="Input some text" />
+      </template>
+
+    </vc-card>`,
+});
+
+export const Header = Template.bind({});
+Header.args = { header: "Card Title" };
+
+export const Icon = Template.bind({});
+Icon.args = { icon: "fas fa-warehouse" };
+
+export const Collapsable = Template.bind({});
+Collapsable.args = { isCollapsable: true };
+
+export const Collapsed = Template.bind({});
+Collapsed.args = { isCollapsable: true, isCollapsed: true };
+
+export const Fill = Template.bind({});
+Fill.args = { fill: true, header: "Card Title" };
+
+export const Actions: StoryFn<typeof VcCard> = (args) => ({
+  components: {
+    VcCard,
+    VcButton,
+  },
+  setup: () => ({ args }),
+  template: `
+      <vc-card  :variant="variant" header="Card Title">
+        <p class="tw-p-4">{{args.default}}</p>
+
+        <template #actions>
+          <VcButton variant="primary">Action button</VcButton>
+        </template>
+      </vc-card>
+    `,
+});
+
+export const Variants: StoryFn<typeof VcCard> = (args) => ({
+  components: {
+    VcCard,
+  },
+  setup: () => ({ variants: VARIANT, args }),
+  template: `
+    <div class="tw-space-x-8 tw-flex tw-flex-row">
+      <vc-card v-for="variant in variants" :variant="variant" header="Card Title">
+        <p class="tw-p-4">{{args.default}}</p>
+      </vc-card>
+    </div>
+    `,
+});

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

@@ -1,159 +1,164 @@
-<template>
-  <div
-    class="vc-card"
-    :class="[{ 'vc-card_collapsable': isCollapsable }, `vc-card_${variant}`]"
-  >
-    <div
-      v-if="header"
-      class="vc-card__header"
-      @click="onHeaderClick"
-    >
-      <VcIcon
-        v-if="icon"
-        class="vc-card__icon"
-        :icon="icon"
-        size="xl"
-      ></VcIcon>
-      <div class="vc-card__title">{{ header }}</div>
-      <div
-        v-if="$slots['actions']"
-        class="vc-card__actions"
-      >
-        <slot name="actions"></slot>
-      </div>
-      <VcIcon
-        v-if="isCollapsable"
-        class="vc-card__collapse"
-        :icon="`fas fa-chevron-${isCollapsedInternal ? 'down' : 'up'}`"
-        size="s"
-      ></VcIcon>
-    </div>
-    <transition name="fade">
-      <div
-        v-show="!isCollapsedInternal"
-        :class="[{ 'tw-flex': fill }, 'vc-card__body']"
-      >
-        <slot></slot>
-      </div>
-    </transition>
-  </div>
-</template>
-<!-- eslint-disable @typescript-eslint/no-explicit-any -->
-<script lang="ts" setup>
-import { VcIcon } from "./../vc-icon";
-import { ref, watch } from "vue";
-
-export interface Props {
-  header?: string;
-  icon?: string;
-  isCollapsable?: boolean;
-  isCollapsed?: boolean;
-  /**
-   * Card content will fill the available space
-   */
-  fill?: boolean;
-  variant?: "default" | "success" | "danger";
-}
-
-export interface Emits {
-  (event: "header:click"): void;
-  (event: "state:collapsed", isCollapsedState: boolean): void;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  variant: "default",
-});
-
-const emit = defineEmits<Emits>();
-
-defineSlots<{
-  default: (props?: any) => any;
-  actions: (props?: any) => any;
-}>();
-
-const isCollapsedInternal = ref();
-
-function onHeaderClick() {
-  if (props.isCollapsable) {
-    isCollapsedInternal.value = !isCollapsedInternal.value;
-    emit("state:collapsed", isCollapsedInternal.value);
-  }
-  emit("header:click");
-}
-
-watch(
-  () => props.isCollapsed,
-  (value) => {
-    isCollapsedInternal.value = value;
-  },
-  {
-    immediate: true,
-  },
-);
-</script>
-
-<style lang="scss">
-:root {
-  --card-background: var(--additional-50);
-  --card-border-radius: 6px;
-  --card-header-background: var(--secondary-50);
-  --card-header-color: var(--base-text-color, var(--secondary-950));
-
-  --card-header-background-success: var(--success-100);
-  --card-header-background-danger: var(--danger-100);
-
-  --card-header-color-success: var(--success-600);
-  --card-header-color-danger: var(--danger-600);
-
-  --card-header-padding-hor: 24px;
-  --card-header-padding-vert: 17px;
-
-  --card-border-color: var(--base-border-color, var(--neutrals-200));
-}
-
-$variants: success, danger;
-
-.vc-card {
-  @apply tw-bg-[color:var(--card-background)] tw-border
-  tw-border-[color:var(--card-border-color)] tw-border-solid tw-box-border
-  tw-rounded-[var(--card-border-radius)] tw-overflow-hidden
-  tw-flex-grow tw-flex tw-flex-col;
-
-  &__header {
-    @apply tw-bg-[color:var(--card-header-background)] tw-px-[var(--card-header-padding-hor)] tw-py-[var(--card-header-padding-vert)] tw-flex tw-items-center tw-content-between tw-w-full tw-box-border;
-  }
-
-  &_collapsable &__header {
-    @apply tw-cursor-pointer;
-  }
-
-  &__title {
-    @apply tw-normal-case tw-flex-grow
-   tw-text-[color:var(--card-header-color)]
-   tw-text-sm tw-font-bold;
-  }
-
-  &__icon {
-    @apply tw-text-[color:var(--card-header-color)] tw-mr-3;
-  }
-
-  &__collapse {
-    @apply tw-text-[color:var(--card-header-color)] tw-ml-3;
-  }
-
-  &__body {
-    @apply tw-flex-grow tw-box-border tw-flex-col;
-  }
-
-  @each $variant in $variants {
-    &_#{$variant} {
-      .vc-card__header {
-        @apply tw-bg-[color:var(--card-header-background-#{$variant})];
-      }
-      .vc-card__title {
-        @apply tw-text-[color:var(--card-header-color-#{$variant})];
-      }
-    }
-  }
-}
-</style>
+<template>
+  <div
+    class="vc-card"
+    :class="[{ 'vc-card_collapsable': isCollapsable }, `vc-card_${variant}`]"
+  >
+    <div
+      v-if="header"
+      class="vc-card__header"
+      @click="onHeaderClick"
+    >
+      <slot name="header">
+        <div>
+          <VcIcon
+            v-if="icon"
+            class="vc-card__icon"
+            :icon="icon"
+            size="xl"
+          ></VcIcon>
+          <div class="vc-card__title">{{ header }}</div>
+        </div>
+      </slot>
+      <div
+        v-if="$slots['actions']"
+        class="vc-card__actions"
+      >
+        <slot name="actions"></slot>
+      </div>
+      <VcIcon
+        v-if="isCollapsable"
+        class="vc-card__collapse"
+        :icon="`fas fa-chevron-${isCollapsedInternal ? 'down' : 'up'}`"
+        size="s"
+      ></VcIcon>
+    </div>
+    <transition name="fade">
+      <div
+        v-show="!isCollapsedInternal"
+        :class="[{ 'tw-flex': fill }, 'vc-card__body']"
+      >
+        <slot></slot>
+      </div>
+    </transition>
+  </div>
+</template>
+<!-- eslint-disable @typescript-eslint/no-explicit-any -->
+<script lang="ts" setup>
+import { VcIcon } from "./../vc-icon";
+import { ref, watch } from "vue";
+
+export interface Props {
+  header?: string;
+  icon?: string;
+  isCollapsable?: boolean;
+  isCollapsed?: boolean;
+  /**
+   * Card content will fill the available space
+   */
+  fill?: boolean;
+  variant?: "default" | "success" | "danger";
+}
+
+export interface Emits {
+  (event: "header:click"): void;
+  (event: "state:collapsed", isCollapsedState: boolean): void;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: "default",
+});
+
+const emit = defineEmits<Emits>();
+
+defineSlots<{
+  default: (props?: any) => any;
+  actions: (props?: any) => any;
+  header: (props?: any) => any;
+}>();
+
+const isCollapsedInternal = ref();
+
+function onHeaderClick() {
+  if (props.isCollapsable) {
+    isCollapsedInternal.value = !isCollapsedInternal.value;
+    emit("state:collapsed", isCollapsedInternal.value);
+  }
+  emit("header:click");
+}
+
+watch(
+  () => props.isCollapsed,
+  (value) => {
+    isCollapsedInternal.value = value;
+  },
+  {
+    immediate: true,
+  },
+);
+</script>
+
+<style lang="scss">
+:root {
+  --card-background: var(--additional-50);
+  --card-border-radius: 6px;
+  --card-header-background: var(--secondary-50);
+  --card-header-color: var(--base-text-color, var(--secondary-950));
+
+  --card-header-background-success: var(--success-100);
+  --card-header-background-danger: var(--danger-100);
+
+  --card-header-color-success: var(--success-600);
+  --card-header-color-danger: var(--danger-600);
+
+  --card-header-padding-hor: 24px;
+  --card-header-padding-vert: 17px;
+
+  --card-border-color: var(--base-border-color, var(--neutrals-200));
+}
+
+$variants: success, danger;
+
+.vc-card {
+  @apply tw-bg-[color:var(--card-background)] tw-border
+  tw-border-[color:var(--card-border-color)] tw-border-solid tw-box-border
+  tw-rounded-[var(--card-border-radius)] tw-overflow-hidden
+  tw-flex-grow tw-flex tw-flex-col;
+
+  &__header {
+    @apply tw-border-b tw-border-[color:var(--card-border-color)] tw-border-solid tw-bg-[color:var(--card-header-background)] tw-px-[var(--card-header-padding-hor)] tw-py-[var(--card-header-padding-vert)] tw-flex tw-items-center tw-content-between tw-w-full tw-box-border;
+  }
+
+  &_collapsable &__header {
+    @apply tw-cursor-pointer;
+  }
+
+  &__title {
+    @apply tw-normal-case tw-flex-grow
+   tw-text-[color:var(--card-header-color)]
+   tw-text-sm tw-font-bold;
+  }
+
+  &__icon {
+    @apply tw-text-[color:var(--card-header-color)] tw-mr-3;
+  }
+
+  &__collapse {
+    @apply tw-text-[color:var(--card-header-color)] tw-ml-3;
+  }
+
+  &__body {
+    @apply tw-flex-grow tw-box-border tw-flex-col;
+  }
+
+  @each $variant in $variants {
+    &_#{$variant} {
+      .vc-card__header {
+        @apply tw-bg-[color:var(--card-header-background-#{$variant})];
+      }
+      .vc-card__title {
+        @apply tw-text-[color:var(--card-header-color-#{$variant})];
+      }
+    }
+  }
+}
+</style>

package/ui/components/atoms/vc-icon/icons/GridDotsIcon.vue

@@ -0,0 +1,22 @@
+
+<template>
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" :width="width" :height="height">
+<path d="M17 18C17 18.5523 17.4477 19 18 19C18.5523 19 19 18.5523 19 18C19 17.4477 18.5523 17 18 17C17.4477 17 17 17.4477 17 18Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11 18C11 18.5523 11.4477 19 12 19C12.5523 19 13 18.5523 13 18C13 17.4477 12.5523 17 12 17C11.4477 17 11 17.4477 11 18Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5 18C5 18.5523 5.44772 19 6 19C6.55228 19 7 18.5523 7 18C7 17.4477 6.55228 17 6 17C5.44772 17 5 17.4477 5 18Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M17 12C17 12.5523 17.4477 13 18 13C18.5523 13 19 12.5523 19 12C19 11.4477 18.5523 11 18 11C17.4477 11 17 11.4477 17 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11 12C11 12.5523 11.4477 13 12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5 12C5 12.5523 5.44772 13 6 13C6.55228 13 7 12.5523 7 12C7 11.4477 6.55228 11 6 11C5.44772 11 5 11.4477 5 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M17 6C17 6.55228 17.4477 7 18 7C18.5523 7 19 6.55228 19 6C19 5.44772 18.5523 5 18 5C17.4477 5 17 5.44772 17 6Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11 6C11 6.55228 11.4477 7 12 7C12.5523 7 13 6.55228 13 6C13 5.44772 12.5523 5 12 5C11.4477 5 11 5.44772 11 6Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5 6C5 6.55228 5.44772 7 6 7C6.55228 7 7 6.55228 7 6C7 5.44772 6.55228 5 6 5C5.44772 5 5 5.44772 5 6Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  width?: number | string
+  height?: number | string
+}>()
+</script>

package/ui/components/atoms/vc-icon/icons/ShoppingCardIcon.vue

@@ -0,0 +1,16 @@
+
+<template>
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" :width="width" :height="height">
+<path d="M8 22C8.55228 22 9 21.5523 9 21C9 20.4477 8.55228 20 8 20C7.44772 20 7 20.4477 7 21C7 21.5523 7.44772 22 8 22Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M19 22C19.5523 22 20 21.5523 20 21C20 20.4477 19.5523 20 19 20C18.4477 20 18 20.4477 18 21C18 21.5523 18.4477 22 19 22Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2.0498 2.0498H4.0498L6.7098 14.4698C6.80738 14.9247 7.06048 15.3313 7.42552 15.6197C7.79056 15.908 8.24471 16.0602 8.7098 16.0498H18.4898C18.945 16.0491 19.3863 15.8931 19.7408 15.6076C20.0954 15.3222 20.3419 14.9243 20.4398 14.4798L22.0898 7.0498H5.1198" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  width?: number | string
+  height?: number | string
+}>()
+</script>

package/ui/components/atoms/vc-icon/icons/index.ts

@@ -10,10 +10,12 @@ export { default as CircleDotsIcon } from "./CircleDotsIcon.vue"
 export { default as CrossSignIcon } from "./CrossSignIcon.vue"
 export { default as DoubleArrowLeftIcon } from "./DoubleArrowLeftIcon.vue"
 export { default as DoubleArrowRightIcon } from "./DoubleArrowRightIcon.vue"
+export { default as GridDotsIcon } from "./GridDotsIcon.vue"
 export { default as LogoutIcon } from "./LogoutIcon.vue"
 export { default as MenuBurgerIcon } from "./MenuBurgerIcon.vue"
 export { default as MinusSignIcon } from "./MinusSignIcon.vue"
 export { default as PlusSignIcon } from "./PlusSignIcon.vue"
 export { default as SearchIcon } from "./SearchIcon.vue"
 export { default as SettingsBoltIcon } from "./SettingsBoltIcon.vue"
+export { default as ShoppingCardIcon } from "./ShoppingCardIcon.vue"
 export { default as VertDotsIcon } from "./VertDotsIcon.vue"

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

@@ -30,7 +30,7 @@
         <VcButton
           v-if="copyable"
           icon="far fa-copy"
-          size="m"
+          icon-size="m"
           class="vc-field__copy-button"
           text
           @click="copy(modelValue)"

package/ui/components/organisms/vc-app/_internal/composables/useAppMenuState.ts

@@ -7,7 +7,12 @@ export interface AppMenuState {
   activeButtonId: string | null;
 }
 
-const { isExpanded: isSidebarExpanded, toggleExpanded: toggleSidebarExpanded } = useMenuExpanded();
+const {
+  isExpanded: isSidebarExpanded,
+  toggleExpanded: toggleSidebarExpanded,
+  isHoverExpanded,
+  toggleHoverExpanded: toggleHoverExpandedFn,
+} = useMenuExpanded();
 
 const state = ref<AppMenuState>({
   isSidebarExpanded,
@@ -20,6 +25,10 @@ export const useAppMenuState = () => {
     toggleSidebarExpanded();
   };
 
+  const toggleHoverExpanded = (shouldExpand?: boolean) => {
+    toggleHoverExpandedFn(shouldExpand);
+  };
+
   const toggleMenu = () => {
     state.value.isMenuOpen = !state.value.isMenuOpen;
     if (!state.value.isMenuOpen) {
@@ -44,6 +53,8 @@ export const useAppMenuState = () => {
     toggleSidebar,
     toggleMenu,
     setActiveButton,
+    toggleHoverExpanded,
+    isHoverExpanded,
     closeAll,
   };
 };

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

@@ -19,13 +19,12 @@ defineProps<{
 </script>
 
 <style lang="scss">
-
 .app-bar-content {
   @apply tw-flex tw-flex-col;
   height: calc(100% - var(--app-bar-height));
 
   &--collapsed {
-    height: calc(100% - var(--app-bar-collapsed-height));
+    height: calc(100% - var(--app-bar-height));
   }
 
   &__main {

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

@@ -128,7 +128,7 @@ const hasUnread = computed(() => {
   @apply tw-flex tw-flex-row tw-items-center tw-justify-between tw-px-[var(--app-bar-padding)] tw-h-[var(--app-bar-height)] tw-py-[var(--app-bar-header-padding-top)];
 
   &--collapsed {
-    @apply tw-flex-col tw-items-center tw-justify-between tw-border-0 tw-gap-[16px] tw-h-[var(--app-bar-collapsed-height)];
+    @apply tw-flex-col tw-items-center tw-justify-between tw-border-0 tw-gap-[16px];
   }
 
   &--mobile {