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

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

@@ -0,0 +1,171 @@
+<template>
+  <Sidebar
+    :is-expanded="$isMobile.value ? isOpened : false"
+    position="left"
+    render="mobile"
+    @close="$emit('update:isOpened', false)"
+  >
+    <template #header><span /></template>
+
+    <template #content>
+      <div
+        class="menu-sidebar__wrapper"
+        :class="{
+          'menu-sidebar__wrapper--expanded': $isDesktop.value && expanded,
+          'menu-sidebar__wrapper--collapsed': $isDesktop.value && !expanded,
+        }"
+      >
+        <div
+          class="menu-sidebar__header"
+          :class="{
+            'menu-sidebar__header--mobile': $isMobile.value,
+          }"
+        >
+          <div class="menu-sidebar__toolbar">
+            <slot name="toolbar" />
+          </div>
+          <div class="menu-sidebar__spacer" />
+          <div
+            v-if="$isDesktop.value"
+            class="menu-sidebar__close-button"
+          >
+            <VcButton
+              icon-class="menu-sidebar__close-button-icon"
+              :icon="CrossSignIcon"
+              icon-size="xs"
+              text
+              @click.stop="$emit('update:isOpened', false)"
+            />
+          </div>
+        </div>
+        <div class="menu-sidebar__content">
+          <div
+            v-if="$slots['active-content']"
+            class="menu-sidebar__content-main"
+          >
+            <slot name="active-content" />
+          </div>
+
+          <template v-if="$isMobile.value">
+            <div class="menu-sidebar__navmenu">
+              <slot name="navmenu" />
+            </div>
+            <div class="menu-sidebar__user">
+              <slot name="user-dropdown" />
+            </div>
+          </template>
+          <template v-else>
+            <slot name="app-switcher" />
+          </template>
+        </div>
+      </div>
+    </template>
+  </Sidebar>
+</template>
+
+<script lang="ts" setup>
+import { Sidebar } from "../../../../../../../shared/components/sidebar";
+import { CrossSignIcon } from "../../../../../atoms/vc-icon/icons";
+
+defineProps<{
+  isOpened: boolean;
+  expanded: boolean;
+}>();
+
+defineEmits<{
+  (e: "update:isOpened", value: boolean): void;
+}>();
+
+defineSlots<{
+  toolbar: () => void;
+  navmenu: () => void;
+  "user-dropdown": () => void;
+  "app-switcher": () => void;
+  "active-content": () => void;
+}>();
+</script>
+
+<style lang="scss">
+.menu-sidebar {
+  &__wrapper {
+    @apply tw-absolute tw-top-0 tw-left-0 tw-w-full  tw-bottom-0 tw-z-10 tw-flex tw-flex-col;
+
+    &--expanded {
+      @apply tw-absolute tw-top-0 tw-left-0;
+    }
+
+    &--collapsed {
+      @apply tw-w-[var(--app-bar-width)] tw-z-[12];
+    }
+  }
+
+  &__content {
+    @apply tw-flex tw-flex-col tw-h-full tw-bg-[var(--app-bar-background)] tw-flex-1 tw-relative;
+
+    &:before {
+      content: "";
+      @apply tw-absolute tw-left-0 tw-top-[-1px] tw-w-full tw-h-[1px] tw-bg-[color:var(--app-bar-border)] tw-z-[1] #{!important};
+    }
+  }
+
+  &__header {
+    @apply tw-flex;
+    background-color: var(--app-bar-background);
+    height: var(--app-bar-height);
+
+    &--mobile {
+      height: var(--app-bar-mobile-height);
+    }
+  }
+
+  &__dropdowns {
+    @apply tw-w-full tw-h-full tw-invisible;
+
+    &:not(:empty) {
+      @apply tw-visible tw-border-b-[2px] tw-border-[color:var(--app-bar-border)] tw-z-[2];
+
+      &:before {
+        content: "";
+        @apply tw-absolute tw-left-0 tw-top-[-2px] tw-w-full tw-h-[2px] tw-bg-[color:var(--app-bar-content-visible-border)] tw-z-[1] #{!important};
+      }
+    }
+  }
+
+  &__navmenu {
+    @apply tw-px-[var(--app-bar-padding)] tw-pt-6 tw-flex tw-flex-auto tw-bg-transparent;
+  }
+
+  &__user {
+    @apply tw-mt-auto;
+  }
+
+  &__content-main {
+    @apply tw-relative;
+
+    &:not(:empty) {
+      @apply tw-visible tw-border-b-[2px] tw-border-[color:var(--app-bar-border)] tw-z-[2];
+
+      &:before {
+        content: "";
+        @apply tw-absolute tw-left-0 tw-top-[-2px] tw-w-full tw-h-[2px] tw-bg-[color:var(--app-bar-content-visible-border)] tw-z-[1] #{!important};
+      }
+    }
+  }
+
+  &__spacer {
+    @apply tw-grow tw-basis-0;
+  }
+
+  &__close-button {
+    @apply tw-px-4 tw-flex tw-items-center tw-justify-center;
+
+    &-icon {
+      @apply tw-text-[color:var(--app-bar-button)];
+    }
+  }
+
+  &__toolbar {
+    @apply tw-flex tw-flex-row tw-items-center tw-justify-between tw-overflow-auto;
+  }
+}
+</style>

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

@@ -0,0 +1,213 @@
+<template>
+  <div
+    class="app-bar-button"
+    :class="{ 'app-bar-button--mobile': $isMobile.value }"
+  >
+    <VcTooltip
+      :placement="position"
+      :offset="{ crossAxis: 0, mainAxis: -10 }"
+      :delay="1000"
+      class="tw-w-full"
+    >
+      <template
+        v-if="!isContentVisible && !!title"
+        #tooltip
+        >{{ title }}</template
+      >
+      <button
+        ref="referenceButton"
+        class="app-bar-button__button"
+        @click.stop="toggleContent"
+      >
+        <div
+          :class="[
+            'app-bar-button__button-container',
+            { 'app-bar-button__button-container--active': isContentVisible && $slots['content'] },
+          ]"
+        >
+          <slot
+            name="trigger"
+            :opened="isContentVisible"
+            :toggle="toggleContent"
+          >
+            <div class="app-bar-button__button-wrap">
+              <VcIcon
+                :icon="icon"
+                size="xl"
+              ></VcIcon>
+            </div>
+          </slot>
+        </div>
+      </button>
+    </VcTooltip>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, getCurrentInstance, onUnmounted, useSlots, Slots, h, withDirectives } from "vue";
+import { useAppBarOverlay } from "./../../composables/useAppBarOverlay";
+import { vOnClickOutside } from "@vueuse/components";
+
+export interface Props {
+  title?: string;
+  icon?: string;
+  position: "bottom" | "bottom-end" | "bottom-start";
+  beforeOpen?: () => boolean;
+  overlayed?: boolean;
+}
+
+export interface Emits {
+  (event: "toggle", state: boolean): void;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  position: "bottom",
+  overlayed: false,
+});
+
+const emit = defineEmits<Emits>();
+
+defineSlots<{
+  content: (props: { opened: boolean; toggle: () => void }) => void;
+  trigger: void;
+}>();
+
+const isContentVisible = ref(false);
+const referenceButton = ref<HTMLDivElement | null>(null);
+const contentRef = ref<HTMLDivElement | null>(null);
+
+const slots = useSlots();
+const instance = getCurrentInstance();
+const { showContent, hideContent } = useAppBarOverlay();
+
+function toggleContent() {
+  if (props.beforeOpen && typeof props.beforeOpen === "function" && props.beforeOpen() === false) {
+    return;
+  }
+
+  isContentVisible.value = !isContentVisible.value;
+
+  if (isContentVisible.value && slots["content"]) {
+    const content = () => {
+      return withDirectives(
+        h(
+          "div",
+          {
+            style: {
+              height: "-webkit-fill-available",
+            },
+            ref: contentRef,
+          },
+          [
+            h(slots["content"]!, {
+              opened: isContentVisible.value,
+              toggle: toggleContent,
+            }),
+          ],
+        ),
+        [[vOnClickOutside, [onClose, { ignore: [referenceButton, contentRef] }]]],
+      );
+    };
+
+    showContent({
+      id: instance?.uid?.toString() ?? "",
+      content,
+      overlayed: props.overlayed,
+      props: {
+        opened: isContentVisible.value,
+        toggle: toggleContent,
+      },
+    });
+  } else {
+    hideContent();
+  }
+
+  emit("toggle", isContentVisible.value);
+}
+
+const onClose = () => {
+  isContentVisible.value = false;
+  hideContent();
+};
+
+onUnmounted(() => {
+  if (isContentVisible.value) {
+    hideContent();
+  }
+});
+</script>
+
+<style lang="scss">
+:root {
+  --app-bar-button-width: 52px;
+  --app-bar-button-shadow-color: var(--additional-950);
+  --app-bar-button-shadow: 0 -6px 6px var(--additional-50),
+    1px 1px 22px rgb(from var(--app-bar-button-shadow-color) r g b / 7%);
+  --app-bar-button-height: var(--app-bar-height);
+  --app-bar-button-bg-color: var(--additional-50);
+  --app-bar-button-dropdown-bg-color: var(--additional-50);
+  --app-bar-button-dropdown-button-width: var(--app-bar-button-width);
+  --app-bar-button-border-color: var(--accent-500);
+  --app-bar-button-dropdown-button-border: var(--app-bar-button-border-color);
+  --app-bar-button-dropdown-button-color: var(--app-bar-button-color);
+  --app-bar-button-dropdown-button-background-color: var(--app-bar-button-background-color);
+  --app-bar-button-dropdown-button-color-hover: var(--app-bar-button-color-hover);
+  --app-bar-button-dropdown-button-background-color-hover: var(--app-bar-button-background-color-hover);
+  --app-bar-button-mobile-bg-color: var(--neutral-500);
+
+  --app-bar-button-dropdown-button-color-hover: var(--neutrals-100);
+  --app-bar-button-dropdown-button-active-bg: var(--neutrals-200);
+  --app-bar-button-border-width: 2px;
+}
+
+.app-bar-button {
+  @apply tw-relative tw-flex tw-h-[var(--app-bar-height)];
+
+  &--mobile {
+    @apply tw-h-[var(--app-bar-mobile-height)];
+  }
+
+  &::after {
+    content: "";
+    @apply tw-absolute tw-left-0 tw-bottom-0 tw-w-full
+        tw-border-b-[2px]
+        tw-border-[color:var(--app-bar-button-border-color)]
+        tw-opacity-0 tw-transition-opacity tw-duration-200 tw-z-[2];
+  }
+
+  &:hover::after {
+    @apply tw-opacity-100;
+  }
+
+  &__button {
+    @apply tw-flex tw-text-left tw-w-full tw-box-border tw-relative tw-w-[var(--app-bar-button-width)];
+  }
+
+  &__button-container {
+    @apply tw-w-full tw-relative tw-h-full tw-flex tw-items-center tw-justify-center
+     tw-cursor-pointer
+      tw-text-[color:var(--app-bar-button-dropdown-button-color)] tw-bg-[color:var(--app-bar-button-dropdown-button-background-color)]
+      tw-transition-colors tw-duration-200 tw-box-border;
+
+    &:hover:not(&--active) {
+      @apply tw-bg-[color:var(--app-bar-button-dropdown-button-color-hover)];
+    }
+
+    &--active {
+      @apply tw-bg-[color:var(--app-bar-button-dropdown-button-active-bg)];
+    }
+  }
+
+  &__button-wrap {
+    @apply tw-w-[var(--app-bar-button-dropdown-button-width)] tw-flex tw-justify-center;
+  }
+
+  &__dropdown {
+    @apply tw-min-w-[100%];
+  }
+
+  &__menu-dropdowns {
+    //@apply tw-w-full tw-h-full tw-border-t-[2px] tw-border-[color:var(--app-bar-button-border-color)] tw-border-solid tw-border-b-[2px] tw-border-b-[color:var(--app-bar-button-border-color)];
+  }
+}
+</style>

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

@@ -0,0 +1,78 @@
+import { ref, computed, ComputedRef } from "vue";
+import type { Component } from "vue";
+
+export interface AppBarButtonContent {
+  id: string;
+  content: Component | null;
+  overlayed?: boolean;
+  props?: Record<string, unknown>;
+}
+
+export interface AppBarOverlayState {
+  isOverlayVisible: ComputedRef<boolean>;
+  overlayContent: ComputedRef<Component | null>;
+  overlayProps: ComputedRef<Record<string, unknown>>;
+  activeButtonId: ComputedRef<string | null>;
+  isOverlayed: ComputedRef<boolean>;
+  showContent: (button: AppBarButtonContent | null) => void;
+  hideContent: () => void;
+}
+
+type OverlayState = {
+  isVisible: boolean;
+  content: Component | null;
+  props: Record<string, unknown>;
+  buttonId: string | null;
+  overlayed: boolean;
+};
+
+const overlayState = ref<OverlayState>({
+  isVisible: false,
+  content: null,
+  props: {},
+  buttonId: null,
+  overlayed: false,
+});
+
+const isOverlayVisible = computed(() => overlayState.value.isVisible);
+const overlayContent = computed(() => overlayState.value.content);
+const overlayProps = computed(() => overlayState.value.props);
+const activeButtonId = computed(() => overlayState.value.buttonId);
+const isOverlayed = computed(() => overlayState.value.overlayed);
+
+export const useAppBarOverlay = (): AppBarOverlayState => {
+  const showContent = (button: AppBarButtonContent | null) => {
+    if (!button) {
+      hideContent();
+      return;
+    }
+
+    overlayState.value = {
+      isVisible: button.overlayed || false,
+      content: button.content,
+      props: button.props || {},
+      buttonId: button.id,
+      overlayed: button.overlayed || false,
+    };
+  };
+
+  const hideContent = () => {
+    overlayState.value = {
+      isVisible: false,
+      content: null,
+      props: {},
+      buttonId: null,
+      overlayed: false,
+    };
+  };
+
+  return {
+    isOverlayVisible: computed(() => isOverlayVisible.value),
+    overlayContent: computed(() => overlayContent.value),
+    overlayProps: computed(() => overlayProps.value),
+    activeButtonId: computed(() => activeButtonId.value),
+    isOverlayed: computed(() => isOverlayed.value),
+    showContent,
+    hideContent,
+  };
+};