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

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

@@ -1,96 +1,109 @@
 <template>
-  <div class="vc-blade-header">
-    <div
-      v-if="typeof modified !== 'undefined'"
-      ref="tooltipIconRef"
-      :class="{
-        'vc-blade-header__status-not-edited': !modified,
-        'vc-blade-header__status-edited': modified,
-      }"
-      class="vc-blade-header__status"
-      @mouseenter="tooltipVisible = true"
-      @mouseleave="tooltipVisible = false"
-    >
-      <teleport to="body">
-        <span
-          v-if="tooltipVisible"
-          ref="tooltipRef"
-          :style="floatingStyles"
-          class="vc-blade-header__tooltip"
-        >
-          {{
-            modified
-              ? $t("COMPONENTS.ORGANISMS.VC_BLADE_HEADER.UNSAVED_CHANGES")
-              : $t("COMPONENTS.ORGANISMS.VC_BLADE_HEADER.NO_CHANGES")
-          }}
-        </span>
-      </teleport>
-    </div>
+  <div
+    class="vc-blade-header"
+    :class="{
+      'vc-blade-header--mobile': $isMobile.value,
+    }"
+  >
+    <slot name="prepend"></slot>
 
-    <div
-      v-if="icon"
-      class="vc-blade-header__icon"
-    >
-      <VcIcon
-        :icon="icon"
-        size="xxl"
-      />
-    </div>
-
-    <div class="vc-blade-header__content">
+    <div class="vc-blade-header__status-container">
       <div
-        class="vc-blade-header__title"
-        :class="{ 'vc-blade-header__title-no-subtitle': !subtitle }"
+        v-if="typeof modified !== 'undefined'"
+        ref="tooltipIconRef"
+        :class="{
+          'vc-blade-header__status-not-edited': !modified,
+          'vc-blade-header__status-edited': modified,
+        }"
+        class="vc-blade-header__status"
+        @mouseenter="tooltipVisible = true"
+        @mouseleave="tooltipVisible = false"
       >
-        {{ title }}
+        <teleport to="body">
+          <span
+            v-if="tooltipVisible"
+            ref="tooltipRef"
+            :style="floatingStyles"
+            class="vc-blade-header__tooltip"
+          >
+            {{
+              modified
+                ? $t("COMPONENTS.ORGANISMS.VC_BLADE_HEADER.UNSAVED_CHANGES")
+                : $t("COMPONENTS.ORGANISMS.VC_BLADE_HEADER.NO_CHANGES")
+            }}
+          </span>
+        </teleport>
       </div>
+
       <div
-        v-if="subtitle"
-        class="vc-blade-header__subtitle"
+        v-if="icon"
+        class="vc-blade-header__icon"
       >
-        {{ subtitle }}
+        <VcIcon
+          :icon="icon"
+          size="xxl"
+        />
       </div>
-    </div>
 
-    <div
-      v-if="$slots['actions']"
-      class="vc-blade-header__actions"
-    >
-      <slot name="actions"></slot>
-    </div>
+      <div class="vc-blade-header__wrapper">
+        <div class="vc-blade-header__content">
+          <div
+            class="vc-blade-header__title"
+            :class="{
+              'vc-blade-header__title-no-subtitle': !subtitle,
+            }"
+          >
+            {{ title }}
+          </div>
+          <div
+            v-if="subtitle"
+            class="vc-blade-header__subtitle"
+          >
+            {{ subtitle }}
+          </div>
+        </div>
 
-    <div
-      v-if="!$isMobile.value"
-      class="vc-blade-header__controls"
-    >
-      <template v-if="blade.expandable">
         <div
-          v-if="blade.maximized"
-          class="vc-blade-header__button"
-          @click="onCollapse"
+          v-if="$slots['actions']"
+          class="vc-blade-header__actions"
         >
-          <VcIcon
-            icon="fas fa-window-minimize"
-            size="s"
-          />
+          <slot name="actions"></slot>
         </div>
+      </div>
+
+      <div
+        v-if="!$isMobile.value"
+        class="vc-blade-header__controls"
+      >
+        <template v-if="blade.expandable">
+          <div
+            v-if="blade.maximized"
+            class="vc-blade-header__button"
+            @click="onCollapse"
+          >
+            <VcIcon
+              icon="fas fa-window-minimize"
+              size="s"
+            />
+          </div>
+          <div
+            v-else
+            class="vc-blade-header__button"
+            @click="onExpand"
+          >
+            <VcIcon :icon="AppWindowIcon" />
+          </div>
+        </template>
         <div
-          v-else
+          v-if="closable"
           class="vc-blade-header__button"
-          @click="onExpand"
+          @click="onClose"
         >
-          <VcIcon :icon="AppWindowIcon" />
+          <VcIcon
+            :icon="CrossSignIcon"
+            size="xs"
+          />
         </div>
-      </template>
-      <div
-        v-if="closable"
-        class="vc-blade-header__button"
-        @click="onClose"
-      >
-        <VcIcon
-          :icon="CrossSignIcon"
-          size="xs"
-        />
       </div>
     </div>
   </div>
@@ -98,9 +111,12 @@
 
 <script lang="ts" setup>
 import { VcIcon } from "./../../../../";
-import { ComputedRef, inject, ref } from "vue";
+import { ComputedRef, computed, inject, ref } from "vue";
 import { useFloating, shift } from "@floating-ui/vue";
 import { CrossSignIcon, AppWindowIcon } from "../../../../atoms/vc-icon/icons";
+import { BladeInstance } from "../../../../../../injection-keys";
+import { Breadcrumbs } from "./../../../../../../ui/types";
+import VertDotsIcon from "../../../../atoms/vc-icon/icons/VertDotsIcon.vue";
 
 export interface Props {
   closable?: boolean;
@@ -113,7 +129,17 @@ const props = defineProps<Props>();
 
 const emit = defineEmits(["close", "expand", "collapse"]);
 
-const blade = inject("$blade") as ComputedRef<{ expandable: boolean; maximized: boolean }>;
+const blade = inject(
+  BladeInstance,
+  computed(() => ({
+    id: "fallback-blade-id",
+    error: undefined,
+    expandable: false,
+    maximized: false,
+    navigation: undefined,
+    breadcrumbs: undefined,
+  })),
+);
 const tooltipVisible = ref(false);
 const tooltipIconRef = ref<HTMLElement | null>(null);
 const tooltipRef = ref<HTMLElement | null>(null);
@@ -143,12 +169,16 @@ function onClose(): void {
 
 <style lang="scss">
 :root {
-  --blade-header-height: 82px;
+  --blade-header-height: 70px;
+  --blade-header-mobile-height: 60px;
   --blade-header-background-color: var(--additional-50);
 
   --blade-header-button-color: var(--secondary-500);
   --blade-header-button-color-hover: var(--secondary-600);
 
+  --blade-header-breadcrumbs-button-color: var(--neutrals-500);
+  --blade-header-breadcrumbs-button-color-hover: var(--neutrals-700);
+
   --blade-header-icon-color: var(--secondary-500);
 
   --blade-header-title-font-size: 19px;
@@ -166,14 +196,34 @@ function onClose(): void {
 }
 
 .vc-blade-header {
-  @apply tw-shrink-0 tw-h-[var(--blade-header-height)] tw-bg-[color:var(--blade-header-background-color)] tw-flex tw-items-center tw-py-0 tw-px-5 tw-border-solid tw-border-b tw-border-b-[color:var(--blade-header-border-color)];
+  @apply tw-shrink-0 tw-h-[var(--blade-header-height)] tw-bg-[color:var(--blade-header-background-color)] tw-flex tw-items-center tw-py-0 tw-px-6 tw-border-solid tw-border-b tw-border-b-[color:var(--blade-header-border-color)];
+
+  &--mobile {
+    @apply tw-h-[var(--blade-header-mobile-height)];
+
+    .vc-blade-header__title {
+      @apply tw-text-lg/[22px];
+    }
+  }
+
+  &--hidden {
+    @apply tw-hidden;
+  }
+
+  &__wrapper {
+    @apply tw-flex tw-items-center tw-justify-between tw-grow tw-basis-0 tw-overflow-hidden;
+  }
 
   &__actions {
-    @apply tw-grow tw-basis-0 tw-overflow-hidden tw-flex tw-justify-end;
+    @apply tw-overflow-hidden;
   }
 
   &__status {
-    @apply tw-block tw-w-2 tw-h-2 tw-rounded-full tw-z-[1] tw-mr-2;
+    @apply tw-block tw-w-2 tw-h-2 tw-rounded-full tw-z-[1] tw-mr-[14px];
+  }
+
+  &__status-container {
+    @apply tw-flex tw-flex-1 tw-flex-row tw-items-center;
   }
 
   &__status-not-edited {
@@ -193,7 +243,7 @@ function onClose(): void {
   }
 
   &__content {
-    @apply tw-overflow-hidden tw-grow tw-basis-0 tw-shrink-0;
+    @apply tw-overflow-hidden;
   }
 
   &__title {

package/ui/components/organisms/vc-blade/_internal/vc-blade-toolbar/_internal/vc-blade-toolbar-buttons/_internal/vc-blade-toolbar-button/vc-blade-toolbar-base-button.vue

@@ -0,0 +1,136 @@
+<template>
+  <VcTooltip
+    placement="bottom"
+    :offset="{ crossAxis: 0, mainAxis: 0 }"
+    :delay="1000"
+  >
+    <template #tooltip>{{ title }}</template>
+    <button
+      class="vc-blade-toolbar-base-button"
+      :class="{
+        'vc-blade-toolbar-base-button--disabled': disabled || isWaiting,
+        'vc-blade-toolbar-base-button--with-separator-left': separator === 'left',
+        'vc-blade-toolbar-base-button--with-separator-right': separator === 'right',
+        'vc-blade-toolbar-base-button--with-separator-both': separator === 'both',
+      }"
+      :data-test-id="id ?? 'vc-blade-toolbar-button'"
+      v-bind="$attrs"
+      @click="handleClick"
+    >
+      <div
+        class="vc-blade-toolbar-base-button__content"
+        :style="{ flexDirection: contentDirection }"
+      >
+        <VcIcon
+          class="vc-blade-toolbar-base-button__icon"
+          :class="iconClassName"
+          :icon="icon"
+          :size="size"
+        />
+        <span
+          class="vc-blade-toolbar-base-button__title"
+          :class="titleClassName"
+        >
+          {{ title }}
+        </span>
+      </div>
+    </button>
+  </VcTooltip>
+</template>
+
+<script lang="ts" setup>
+import { ref, ComputedRef, Ref } from "vue";
+import { VcIcon, VcTooltip } from "../../../../../../../../";
+
+export interface Props {
+  id?: string;
+  icon?: string | (() => string);
+  disabled?: boolean | ComputedRef<boolean | undefined>;
+  title?: string | Ref<string> | ComputedRef<string>;
+  size?: "s" | "m";
+  separator?: "left" | "right" | "both";
+  contentDirection?: "row" | "row-reverse" | "column";
+  iconClassName?: string;
+  titleClassName?: string;
+  onClick?: () => Promise<void> | void;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  disabled: false,
+  size: "m",
+  separator: undefined,
+  contentDirection: "column",
+});
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const isWaiting = ref(false);
+
+async function handleClick(): Promise<void> {
+  if (props.disabled || isWaiting.value || !props.onClick) return;
+
+  isWaiting.value = true;
+  try {
+    await props.onClick();
+  } finally {
+    isWaiting.value = false;
+  }
+}
+</script>
+
+<style lang="scss">
+:root {
+  --blade-toolbar-base-button-separator-color: var(--base-border-color, var(--neutrals-200));
+  --blade-toolbar-base-button-title-color: var(--neutrals-600);
+  --blade-toolbar-base-button-hover-color: var(--primary-600);
+  --blade-toolbar-base-button-disabled-color: var(--neutrals-400);
+  --blade-toolbar-base-button-icon-color: var(--neutrals-700);
+}
+
+.vc-blade-toolbar-base-button {
+  @apply tw-px-3 tw-bg-transparent tw-border-0 tw-cursor-pointer tw-shrink;
+
+  &__content {
+    @apply tw-inline-flex tw-items-center tw-gap-2;
+  }
+
+  &__icon {
+    @apply tw-text-[var(--blade-toolbar-base-button-icon-color)];
+    @apply tw-flex #{!important};
+  }
+
+  &__title {
+    @apply tw-text-xs tw-text-[var(--blade-toolbar-base-button-title-color)] tw-text-nowrap;
+  }
+
+  &--with-separator-left {
+    @apply tw-border-l tw-border-solid tw-border-[var(--blade-toolbar-base-button-separator-color)];
+  }
+
+  &--with-separator-right {
+    @apply tw-border-r tw-border-solid tw-border-[var(--blade-toolbar-base-button-separator-color)];
+  }
+
+  &--with-separator-both {
+    @apply tw-border-l tw-border-r tw-border-solid tw-border-[var(--blade-toolbar-base-button-separator-color)];
+  }
+
+  &:hover:not(&--disabled) {
+    .vc-blade-toolbar-base-button__icon,
+    .vc-blade-toolbar-base-button__title {
+      @apply tw-text-[var(--blade-toolbar-base-button-hover-color)];
+    }
+  }
+
+  &--disabled {
+    @apply tw-cursor-default;
+
+    .vc-blade-toolbar-base-button__icon,
+    .vc-blade-toolbar-base-button__title {
+      @apply tw-text-[var(--blade-toolbar-base-button-disabled-color)];
+    }
+  }
+}
+</style>

package/ui/components/organisms/vc-blade/_internal/vc-blade-toolbar/_internal/{vc-blade-toolbar-button → vc-blade-toolbar-buttons/_internal/vc-blade-toolbar-button}/vc-blade-toolbar-button.vue

@@ -13,26 +13,27 @@
       :class="{
         'vc-blade-toolbar-button_disabled': disabled || isWaiting,
         'vc-blade-toolbar-button_separator-left': separator === 'left',
+        'vc-blade-toolbar-button_horizontal': horizontal,
+        'vc-blade-toolbar-button_circle': circle,
+        'vc-blade-toolbar-button_main-action': mainAction,
       }"
       :data-test-id="id ?? 'vc-blade-toolbar-button'"
       @click="onClick"
     >
-      <div>
+      <div
+        type="button"
+        class="vc-blade-toolbar-button__wrap"
+      >
+        <VcIcon
+          class="vc-blade-toolbar-button__icon"
+          :icon="icon as string"
+          :size="circle ? 's' : 'm'"
+        ></VcIcon>
         <div
-          type="button"
-          class="vc-blade-toolbar-button__wrap"
+          v-if="isExpanded || horizontal"
+          class="vc-blade-toolbar-button__title"
         >
-          <VcIcon
-            class="vc-blade-toolbar-button__icon"
-            :icon="icon as string"
-            size="m"
-          ></VcIcon>
-          <div
-            v-if="isExpanded"
-            class="vc-blade-toolbar-button__title"
-          >
-            {{ title }}
-          </div>
+          {{ title }}
         </div>
       </div>
     </div>
@@ -41,7 +42,7 @@
 
 <script lang="ts" setup>
 import { ref } from "vue";
-import { VcIcon, VcTooltip } from "./../../../../../../";
+import { VcIcon, VcTooltip } from "../../../../../../../../";
 
 export interface Props {
   isExpanded: boolean;
@@ -51,6 +52,9 @@ export interface Props {
   clickHandler?(): void;
   separator?: "left" | "right" | "both";
   id?: string;
+  horizontal?: boolean;
+  circle?: boolean;
+  mainAction?: boolean;
 }
 
 export interface Emits {
@@ -68,6 +72,8 @@ const props = withDefaults(defineProps<Props>(), {
   title: undefined,
   dropdownItems: () => [],
   clickHandler: undefined,
+  horizontal: false,
+  circle: false,
 });
 
 const emit = defineEmits<Emits>();
@@ -117,12 +123,22 @@ async function onClick(): Promise<void> {
 }
 
 .vc-blade-toolbar-button {
-  @apply tw-px-2 tw-bg-[color:var(--blade-toolbar-button-background-color)] tw-box-border tw-cursor-pointer;
+  @apply tw-px-2 tw-bg-[color:var(--blade-toolbar-button-background-color)] tw-box-border tw-cursor-pointer tw-justify-center tw-flex;
 
   &__wrap {
     @apply tw-inline-flex tw-flex-col tw-justify-center tw-items-center tw-relative;
   }
 
+  &_horizontal {
+    .vc-blade-toolbar-button__wrap {
+      @apply tw-flex-row tw-gap-2;
+    }
+
+    .vc-blade-toolbar-button__title {
+      @apply tw-mt-0 tw-ml-1;
+    }
+  }
+
   &__title {
     @apply tw-text-xs tw-whitespace-nowrap tw-mt-1 tw-text-[color:var(--blade-toolbar-button-title-color)];
   }
@@ -172,8 +188,28 @@ async function onClick(): Promise<void> {
     }
   }
 
-  &.vc-blade-toolbar-button_separator-left {
+  &_separator-left {
     @apply tw-border-l tw-border-solid tw-border-[color:var(--blade-toolbar-button-border-color)];
   }
+
+  &_circle {
+    .vc-blade-toolbar-button__wrap {
+      @apply tw-flex-row-reverse;
+    }
+
+    .vc-blade-toolbar-button__icon {
+      @apply tw-w-9 tw-h-9 tw-bg-[var(--neutrals-500)] tw-rounded-full tw-flex tw-items-center tw-justify-center tw-text-[var(--additional-50)];
+    }
+
+    .vc-blade-toolbar-button__title {
+      @apply tw-text-[var(--additional-50)] tw-text-xs;
+    }
+  }
+
+  &_main-action {
+    .vc-blade-toolbar-button__icon {
+      @apply tw-w-[46px] tw-h-[46px] tw-bg-[var(--primary-500)] tw-rounded-full tw-flex tw-items-center tw-justify-center tw-text-[var(--additional-50)];
+    }
+  }
 }
 </style>

package/ui/components/organisms/vc-blade/_internal/vc-blade-toolbar/_internal/vc-blade-toolbar-buttons/_internal/vc-blade-toolbar-button/vc-blade-toolbar-circle-button.vue

@@ -0,0 +1,101 @@
+<template>
+  <VcBladeToolbarBaseButton
+    v-bind="$props"
+    class="vc-blade-toolbar-circle-button"
+    :class="{
+      'vc-blade-toolbar-circle-button--main': isMain,
+      'vc-blade-toolbar-circle-button--mobile': isMobile,
+      'vc-blade-toolbar-circle-button--expanded': isExpanded,
+    }"
+    :content-direction="contentDirection"
+    :icon-class-name="iconClassName"
+    :title-class-name="titleClassName"
+  />
+</template>
+
+<script lang="ts" setup>
+import { computed } from "vue";
+import VcBladeToolbarBaseButton from "./vc-blade-toolbar-base-button.vue";
+import type { Props as BaseButtonProps } from "./vc-blade-toolbar-base-button.vue";
+
+export interface Props extends Omit<BaseButtonProps, "size" | "contentDirection" | "iconClassName"> {
+  isMain?: boolean;
+  isMobile?: boolean;
+  isExpanded?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  isMain: false,
+  isMobile: false,
+  isExpanded: false,
+  size: "s",
+});
+
+const contentDirection = computed(() => {
+  if (props.isMobile && props.isMain && !props.isExpanded) {
+    return "row";
+  }
+  return "row-reverse";
+});
+
+const iconClassName = computed(() => {
+  const classes = ["vc-blade-toolbar-circle-button__icon"];
+  if (props.isMain) {
+    classes.push("vc-blade-toolbar-circle-button__icon--main");
+  }
+  if (props.isExpanded) {
+    classes.push("vc-blade-toolbar-circle-button__icon--main-expanded");
+  }
+  return classes.join(" ");
+});
+
+const titleClassName = computed(() => {
+  const classes = ["vc-blade-toolbar-circle-button__title"];
+  if (props.isMain) {
+    classes.push("vc-blade-toolbar-circle-button__title--main");
+  }
+
+  return classes.join(" ");
+});
+</script>
+
+<style lang="scss">
+:root {
+  --blade-toolbar-circle-button-text-color: var(--additional-50);
+  --blade-toolbar-circle-button-bg-color: var(--neutrals-500);
+  --blade-toolbar-circle-button-main-bg-color: var(--primary-500);
+}
+
+.vc-blade-toolbar-circle-button {
+  &:hover:not(.vc-blade-toolbar-base-button--disabled) {
+    .vc-blade-toolbar-base-button__title,
+    .vc-blade-toolbar-base-button__icon {
+      @apply tw-text-[var(--blade-toolbar-circle-button-text-color)] #{!important};
+    }
+  }
+
+  &__icon {
+    @apply tw-w-9 tw-h-9 tw-bg-[var(--blade-toolbar-circle-button-bg-color)] tw-rounded-full tw-flex tw-items-center tw-justify-center tw-text-[var(--blade-toolbar-circle-button-text-color)];
+
+    &--main {
+      @apply tw-flex tw-w-auto tw-bg-[var(--blade-toolbar-circle-button-main-bg-color)] tw-ml-2;
+    }
+
+    &--main-expanded {
+      @apply tw-flex tw-w-[46px] tw-h-[46px] tw-bg-[var(--blade-toolbar-circle-button-main-bg-color)] tw-ml-0;
+    }
+  }
+
+  &__title {
+    @apply tw-text-xs tw-text-[var(--blade-toolbar-circle-button-text-color)];
+
+    &--main {
+      @apply tw-text-[var(--blade-toolbar-circle-button-text-color)];
+    }
+  }
+
+  &--main {
+    @apply tw-px-2;
+  }
+}
+</style>