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

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

@@ -1,43 +1,43 @@
-import type { Meta, StoryFn } from "@storybook/vue3";
-import { VcBreadcrumbs } from "./";
-
-export default {
-  title: "molecules/VcBreadcrumbs",
-  component: VcBreadcrumbs,
-  args: {
-    items: [
-      {
-        id: "0",
-        title: "Back",
-        icon: "fas fa-arrow-left",
-      },
-      {
-        id: "1",
-        title: "Electronics",
-      },
-      {
-        id: "2",
-        title: "Desktop",
-      },
-    ],
-  },
-  argTypes: {
-    items: {
-      control: "object",
-      table: {
-        type: {
-          summary:
-            "{ id: string, title: string, icon?: string, clickHandler?: (id: string) => void | Promise<void> }[]",
-        },
-      },
-    },
-  },
-} satisfies Meta<typeof VcBreadcrumbs>;
-
-export const Primary: StoryFn<typeof VcBreadcrumbs> = (args) => ({
-  components: { VcBreadcrumbs },
-  setup() {
-    return { args };
-  },
-  template: '<vc-breadcrumbs v-bind="args"></vc-breadcrumbs>',
-});
+import type { Meta, StoryFn } from "@storybook/vue3";
+import { VcBreadcrumbs } from "./";
+
+export default {
+  title: "molecules/VcBreadcrumbs",
+  component: VcBreadcrumbs,
+  args: {
+    items: [
+      {
+        id: "0",
+        title: "Back",
+        icon: "fas fa-arrow-left",
+      },
+      {
+        id: "1",
+        title: "Electronics",
+      },
+      {
+        id: "2",
+        title: "Desktop",
+      },
+    ],
+  },
+  argTypes: {
+    items: {
+      control: "object",
+      table: {
+        type: {
+          summary:
+            "{ id: string, title: string, icon?: string, clickHandler?: (id: string) => void | Promise<void> }[]",
+        },
+      },
+    },
+  },
+} satisfies Meta<typeof VcBreadcrumbs>;
+
+export const Primary: StoryFn<typeof VcBreadcrumbs> = (args) => ({
+  components: { VcBreadcrumbs },
+  setup() {
+    return { args };
+  },
+  template: '<vc-breadcrumbs v-bind="args"></vc-breadcrumbs>',
+});

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

@@ -4,162 +4,194 @@
     ref="el"
     class="vc-breadcrumbs"
   >
-    <VcBreadcrumbsItem
-      v-if="items.length"
-      :id="items[0]?.id"
-      class="vc-breadcrumbs__item"
-      :title="items[0]?.title"
-      :current="items.length === 1"
-      :variant="variant"
-      @click="items[0]?.clickHandler && items[0]?.clickHandler(items[0]?.id)"
-    />
-
-    <VcIcon
-      v-if="withArrow && canExpand"
-      class="vc-breadcrumbs__chevron-icon"
-      :icon="arrowIcon"
-      :size="arrowSize"
-    />
-
-    <VcBreadcrumbsItem
-      v-if="canExpand"
-      id="Expand"
-      class="vc-breadcrumbs__expand-button"
-      :current="false"
-      title="..."
-      :variant="variant"
-      @click="expand"
-    />
-
-    <template
-      v-for="(item, i) in visibleBreadcrumbs"
-      :key="item?.id ?? `breadcrumb-item-${i}`"
-    >
-      <div
-        v-if="item && item.title && item.isVisible"
-        class="vc-breadcrumbs__item-wrapper"
+    <div class="vc-breadcrumbs__measure">
+      <template
+        v-for="(item, i) in items"
+        :key="`measure-${item?.id}`"
       >
-        <VcIcon
-          v-if="withArrow && i < items.length - 1"
-          class="vc-breadcrumbs__item-chevron"
-          :icon="arrowIcon"
-          :size="arrowSize"
-        />
-        <VcBreadcrumbsItem
-          class="vc-breadcrumbs__item"
-          v-bind="item"
-          :current="i === items.length - 1"
-          :variant="variant"
-        />
-      </div>
-    </template>
+        <div
+          v-if="item && item.title"
+          :ref="
+            (el) =>
+              el && '$el' in el
+                ? setElementRef(item.id!, el?.$el as HTMLElement)
+                : el
+                  ? setElementRef(item.id!, el as HTMLElement)
+                  : null
+          "
+          class="vc-breadcrumbs__item-wrapper"
+        >
+          <span
+            v-if="withArrow && i !== 0"
+            class="vc-breadcrumbs__item-chevron"
+          >
+            /
+          </span>
+          <VcBreadcrumbsItem
+            class="vc-breadcrumbs__item"
+            v-bind="item"
+            :current="false"
+            :variant="variant"
+          />
+        </div>
+      </template>
+      <!-- <VcBreadcrumbsItem
+        v-for="item in items"
+        :key="`measure-${item?.id}`"
+        :ref="(el) => (el && '$el' in el ? setElementRef(item.id!, el?.$el) : null)"
+        v-bind="item"
+        :current="false"
+        :variant="variant"
+      /> -->
+    </div>
+
+    <div class="vc-breadcrumbs__content">
+      <GenericDropdown
+        v-if="showMoreButton"
+        :items="hiddenItems"
+        :opened="showBreadcrumbs"
+        floating
+        variant="light"
+        placement="bottom-start"
+        @item:click="onItemClick"
+        @update:opened="showBreadcrumbs = $event"
+      >
+        <template #trigger="{ isActive }">
+          <slot
+            name="trigger"
+            :click="toggleBreadcrumbs"
+            :is-active="isActive"
+          >
+            <!-- <VcBreadcrumbsItem
+              id="Expand"
+              class="vc-breadcrumbs__expand-button"
+              :class="{
+                'vc-breadcrumbs__expand-button--active': isActive,
+              }"
+              :current="false"
+              :variant="variant"
+              @click="toggleBreadcrumbs"
+            /> -->
+
+            <VcButton
+              text
+              :icon="VertDotsIcon"
+              icon-size="m"
+              class="vc-breadcrumbs__expand-button"
+              :class="{
+                'vc-breadcrumbs__expand-button--active': isActive,
+              }"
+              @click="toggleBreadcrumbs"
+            />
+          </slot>
+        </template>
+        <template #item="{ item, click }">
+          <VcBreadcrumbsItem
+            v-bind="item"
+            :current="false"
+            :variant="variant"
+            @click="click"
+          />
+        </template>
+      </GenericDropdown>
+
+      <template
+        v-for="(item, i) in displayedItems"
+        :key="item?.id ?? `breadcrumb-item-${i}`"
+      >
+        <div
+          v-if="item && item.title"
+          class="vc-breadcrumbs__item-wrapper"
+        >
+          <span
+            v-if="withArrow && i !== 0"
+            class="vc-breadcrumbs__item-chevron"
+          >
+            /
+          </span>
+          <VcBreadcrumbsItem
+            class="vc-breadcrumbs__item"
+            v-bind="item"
+            :current="i === displayedItems.length - 1"
+            :variant="variant"
+          />
+        </div>
+      </template>
+    </div>
   </div>
 </template>
 
 <script lang="ts" setup>
+import { ref, computed, toRef, VNode } from "vue";
+import { useElementBounding } from "@vueuse/core";
 import { Breadcrumbs } from "../../../types";
 import VcBreadcrumbsItem from "./_internal/vc-breadcrumbs-item/vc-breadcrumbs-item.vue";
-import { VcIcon } from "./../../atoms/vc-icon";
-import { useElementBounding } from "@vueuse/core";
-import { MaybeRef, Ref, computed, ref, toRefs, toValue, watch } from "vue";
-import * as _ from "lodash-es";
+import { GenericDropdown } from "./../../../../shared/components/generic-dropdown";
+import { useVisibleElements } from "./../../../composables/useVisibleElements";
+import { VertDotsIcon } from "./../../atoms/vc-icon/icons";
 
 export interface Props {
   items?: Breadcrumbs[];
   variant?: "default" | "light";
   withArrow?: boolean;
-  arrowIcon?: string;
-  arrowSize?: InstanceType<typeof VcIcon>["$props"]["size"];
-}
-
-interface InternalBreadcrumbs extends Breadcrumbs {
-  isVisible?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
   items: () => [],
   variant: "default",
-  arrowIcon: "fas fa-chevron-right",
-  arrowSize: "xs",
+  withArrow: false,
 });
 
+defineSlots<{
+  trigger: (props: { click: () => void; isActive: boolean }) => VNode;
+}>();
+
 const el = ref<HTMLElement | null>(null);
-const visibleBreadcrumbs = ref([]) as Ref<InternalBreadcrumbs[]>;
-
-const { width } = useElementBounding(el);
-const { items } = toRefs(props);
-
-const canExpand = computed(
-  () =>
-    visibleBreadcrumbs.value &&
-    _.some(
-      visibleBreadcrumbs.value,
-      (breadcrumb) => !(typeof breadcrumb?.isVisible === "undefined" ? true : breadcrumb.isVisible),
-    ),
-);
-
-watch(items, computeVisibleBreadcrumbs, { deep: true });
-
-function computeVisibleBreadcrumbs(breadcrumbs: InternalBreadcrumbs[]) {
-  if (!(breadcrumbs && breadcrumbs.length)) return [];
-
-  const expanderWidth = 40;
-  const availableWidth = width.value;
-  let widthOfItems = calculateTotalWidth(breadcrumbs[0].title);
-
-  const items = _.tail(_.cloneDeep(breadcrumbs)).reverse();
-
-  for (let i = 0; i < items.length; i++) {
-    const x = items[i];
-    const elWidth = calculateTotalWidth(x.title);
-    if (widthOfItems + elWidth <= availableWidth) {
-      x.isVisible = true;
-      widthOfItems += elWidth;
-    } else {
-      if (i > 0) items[i - 1].isVisible = false;
-      widthOfItems += expanderWidth;
-      if (widthOfItems > availableWidth) break;
-    }
-  }
+const showBreadcrumbs = ref(false);
+
+const {
+  setElementRef,
+  displayedItems,
+  overflowItems: hiddenItems,
+  showMoreButton,
+  setupResizeObserver,
+} = useVisibleElements({
+  containerRef: el,
+  items: toRef(props, "items"),
+  getItemId: (item) => item.id!,
+  moreButtonWidth: 100,
+  reverseCalculation: true,
+});
 
-  visibleBreadcrumbs.value = items.reverse();
+function toggleBreadcrumbs() {
+  showBreadcrumbs.value = !showBreadcrumbs.value;
 }
 
-function calculateTotalWidth(title: MaybeRef<string | undefined>) {
-  const unrefTitle = toValue(title);
-  if (!unrefTitle) return 0;
-
-  const maxChars = 27;
-  const paddings = 40;
-  const averageCharacterWidth = 4.87;
-
-  const wordWidth =
-    Math.floor((unrefTitle.length > maxChars ? maxChars : unrefTitle.length) * averageCharacterWidth) + paddings;
-
-  return wordWidth;
+function onItemClick(item: Breadcrumbs) {
+  item.clickHandler?.(item.id);
 }
 
-function expand() {
-  visibleBreadcrumbs.value.forEach((breadcrumb) => {
-    breadcrumb.isVisible = true;
-  });
-}
+setupResizeObserver();
 </script>
 
 <style lang="scss">
 :root {
-  --chevron-color: var(--secondary-500);
+  --separator-color: var(--neutrals-400);
+  --breadcrumbs-item-border-color: var(--secondary-300);
+  --breadcrumbs-item-border-color-hover: var(--secondary-400);
+  --breadcrumbs-expand-button-color: var(--neutrals-500);
+  --breadcrumbs-expand-button-color-hover: var(--neutrals-600);
 }
 
 .vc-breadcrumbs {
   @apply tw-flex tw-items-center tw-flex-wrap tw-gap-2.5;
 
-  &__chevron-icon {
-    @apply tw-text-[color:var(--chevron-color)];
+  &__measure {
+    @apply tw-absolute tw-invisible tw-pointer-events-none tw-flex tw-h-0 tw-overflow-hidden;
   }
 
-  &__expand-button {
-    @apply tw-text-[color:var(--chevron-color)] tw-cursor-pointer hover:tw-text-[color:var(--chevron-color)];
+  &__content {
+    @apply tw-flex tw-items-center;
   }
 
   &__item-wrapper {
@@ -167,7 +199,11 @@ function expand() {
   }
 
   &__item-chevron {
-    @apply tw-text-[color:var(--chevron-color)] tw-mr-2.5;
+    @apply tw-text-[color:var(--separator-color)] tw-mx-2.5;
+  }
+
+  &__expand-button {
+    @apply tw-mr-1 tw-border-solid  tw-rounded-[3px] tw-text-[color:var(--breadcrumbs-expand-button-color)] tw-cursor-pointer hover:tw-text-[color:var(--breadcrumbs-expand-button-color-hover)] #{!important};
   }
 }
 </style>

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

@@ -1,3 +1,3 @@
-import _Checkbox from "./vc-checkbox.vue";
-
-export const VcCheckbox = _Checkbox as typeof _Checkbox;
+import _Checkbox from "./vc-checkbox.vue";
+
+export const VcCheckbox = _Checkbox as typeof _Checkbox;

package/ui/components/molecules/vc-checkbox/vc-checkbox.stories.ts

@@ -1,84 +1,84 @@
-import type { Meta, StoryFn } from "@storybook/vue3";
-import { VcCheckbox } from "./";
-import { VcLabel } from "../../atoms/vc-label";
-
-export default {
-  title: "molecules/VcCheckbox",
-  component: VcCheckbox,
-  args: {
-    modelValue: true,
-    label: "Checkbox label",
-    default: "Checkbox text content",
-  },
-  argTypes: {
-    modelValue: {
-      control: "boolean",
-      table: {
-        type: {
-          summary: "boolean",
-        },
-      },
-    },
-    disabled: {
-      control: "boolean",
-    },
-    required: {
-      control: "boolean",
-    },
-    name: {
-      control: "text",
-    },
-    errorMessage: {
-      control: "text",
-    },
-    trueValue: {
-      control: "boolean",
-    },
-    falseValue: {
-      control: "boolean",
-    },
-    label: {
-      control: "text",
-    },
-    tooltip: {
-      control: "text",
-    },
-    default: {
-      control: "text",
-    },
-  },
-} satisfies Meta<typeof VcCheckbox>;
-
-export const Template: StoryFn<typeof VcCheckbox> = (args) => ({
-  components: { VcCheckbox, VcLabel },
-  setup() {
-    return { args };
-  },
-  template: '<vc-checkbox v-bind="args">{{args.default}}</vc-checkbox>',
-});
-
-export const Basic = Template.bind({});
-
-export const Disabled = Template.bind({});
-Disabled.args = { disabled: true };
-
-export const Required = Template.bind({});
-Required.args = { required: true };
-
-export const Error = Template.bind({});
-Error.args = { errorMessage: "This is an error message", modelValue: false };
-
-export const Tooltip = Template.bind({});
-Tooltip.args = { tooltip: "This is a tooltip" };
-
-export const Label = Template.bind({});
-Label.args = { label: "Checkbox label" };
-
-export const Name = Template.bind({});
-Name.args = { name: "checkbox-name" };
-
-export const TrueValue = Template.bind({});
-TrueValue.args = { trueValue: false };
-
-export const FalseValue = Template.bind({});
-FalseValue.args = { falseValue: true };
+import type { Meta, StoryFn } from "@storybook/vue3";
+import { VcCheckbox } from "./";
+import { VcLabel } from "../../atoms/vc-label";
+
+export default {
+  title: "molecules/VcCheckbox",
+  component: VcCheckbox,
+  args: {
+    modelValue: true,
+    label: "Checkbox label",
+    default: "Checkbox text content",
+  },
+  argTypes: {
+    modelValue: {
+      control: "boolean",
+      table: {
+        type: {
+          summary: "boolean",
+        },
+      },
+    },
+    disabled: {
+      control: "boolean",
+    },
+    required: {
+      control: "boolean",
+    },
+    name: {
+      control: "text",
+    },
+    errorMessage: {
+      control: "text",
+    },
+    trueValue: {
+      control: "boolean",
+    },
+    falseValue: {
+      control: "boolean",
+    },
+    label: {
+      control: "text",
+    },
+    tooltip: {
+      control: "text",
+    },
+    default: {
+      control: "text",
+    },
+  },
+} satisfies Meta<typeof VcCheckbox>;
+
+export const Template: StoryFn<typeof VcCheckbox> = (args) => ({
+  components: { VcCheckbox, VcLabel },
+  setup() {
+    return { args };
+  },
+  template: '<vc-checkbox v-bind="args">{{args.default}}</vc-checkbox>',
+});
+
+export const Basic = Template.bind({});
+
+export const Disabled = Template.bind({});
+Disabled.args = { disabled: true };
+
+export const Required = Template.bind({});
+Required.args = { required: true };
+
+export const Error = Template.bind({});
+Error.args = { errorMessage: "This is an error message", modelValue: false };
+
+export const Tooltip = Template.bind({});
+Tooltip.args = { tooltip: "This is a tooltip" };
+
+export const Label = Template.bind({});
+Label.args = { label: "Checkbox label" };
+
+export const Name = Template.bind({});
+Name.args = { name: "checkbox-name" };
+
+export const TrueValue = Template.bind({});
+TrueValue.args = { trueValue: false };
+
+export const FalseValue = Template.bind({});
+FalseValue.args = { falseValue: true };

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

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

package/ui/components/molecules/vc-editor/vc-editor.stories.ts

@@ -1,29 +1,29 @@
-import type { Meta, StoryFn } from "@storybook/vue3";
-import { VcEditor } from "./";
-
-export default {
-  title: "molecules/VcEditor",
-  component: VcEditor,
-  args: {
-    assetsFolder: "folder",
-    placeholder: "Editor text placeholder",
-  },
-  argTypes: {
-    modelValue: {
-      control: "text",
-      table: {
-        type: {
-          summary: "string | number | Date",
-        },
-      },
-    },
-  },
-} satisfies Meta<typeof VcEditor>;
-
-export const Primary: StoryFn<typeof VcEditor> = (args) => ({
-  components: { VcEditor },
-  setup() {
-    return { args };
-  },
-  template: '<vc-editor v-bind="args"></vc-editor>',
-});
+import type { Meta, StoryFn } from "@storybook/vue3";
+import { VcEditor } from "./";
+
+export default {
+  title: "molecules/VcEditor",
+  component: VcEditor,
+  args: {
+    assetsFolder: "folder",
+    placeholder: "Editor text placeholder",
+  },
+  argTypes: {
+    modelValue: {
+      control: "text",
+      table: {
+        type: {
+          summary: "string | number | Date",
+        },
+      },
+    },
+  },
+} satisfies Meta<typeof VcEditor>;
+
+export const Primary: StoryFn<typeof VcEditor> = (args) => ({
+  components: { VcEditor },
+  setup() {
+    return { args };
+  },
+  template: '<vc-editor v-bind="args"></vc-editor>',
+});

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

@@ -400,12 +400,12 @@ defineExpose({
   --md-bk-color: var(--additional-50);
   --md-bk-color-outstand: var(--neutrals-100);
   --md-bk-hover-color: var(--secondary-50);
-  --md-border-color: var(--neutrals-200);
+  --md-border-color: var(--base-border-color, var(--neutrals-200));
   --md-border-hover-color: var(--neutrals-400);
   --md-border-active-color: var(--neutrals-400);
   --md-modal-mask: rgba(0, 0, 0, 0.45);
   --md-modal-shadow: 0px 6px 24px 2px rgba(0, 0, 0, 0.1);
-  --md-scrollbar-bg-color: var(--neutrals-200);
+  --md-scrollbar-bg-color: var(--base-border-color, var(--neutrals-200));
   --md-scrollbar-thumb-color: rgba(0, 0, 0, 0.3);
   --md-scrollbar-thumb-hover-color: rgba(0, 0, 0, 0.35);
   --md-scrollbar-thumb-active-color: rgba(0, 0, 0, 0.38);