@vc-shell/framework 1.0.38 → 1.0.39

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

@@ -0,0 +1,223 @@
+<template>
+  <div
+    class="vc-blade-toolbar-button"
+    :class="{ 'vc-blade-toolbar-button_disabled': disabled || isWaiting }"
+    @click="onClick"
+    :title="title"
+  >
+    <div ref="dropButtonRef">
+      <div class="vc-blade-toolbar-button__wrap" ref="bladeDropToggle">
+        <VcIcon
+          class="vc-blade-toolbar-button__icon"
+          :icon="icon"
+          size="m"
+        ></VcIcon>
+        <div v-if="isExpanded" class="vc-blade-toolbar-button__title">
+          {{ title }}
+        </div>
+      </div>
+      <teleport to="#app">
+        <div
+          class="vc-blade-toolbar-button__dropdown"
+          v-if="isDropActive"
+          ref="bladeDropRef"
+        >
+          <div
+            class="vc-blade-toolbar-button__dropdown-item"
+            v-for="(item, i) in dropdownItems"
+            :key="i"
+            @click="handleDropItemClick(item)"
+          >
+            <VcIcon
+              :icon="item.icon"
+              class="vc-blade-toolbar-button__dropdown-item-icon"
+            />
+            {{ item.title }}
+          </div>
+        </div>
+      </teleport>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, nextTick, PropType, ref } from "vue";
+
+export default defineComponent({
+  inheritAttrs: false,
+});
+</script>
+
+<script lang="ts" setup>
+import { VcIcon } from "@/components";
+import { createPopper, Instance } from "@popperjs/core";
+import { IBladeDropdownItem } from "@/core/types";
+
+const props = defineProps({
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+
+  isExpanded: {
+    type: Boolean,
+    default: true,
+  },
+
+  icon: {
+    type: String,
+    default: "fas fa-question-circle",
+  },
+
+  title: {
+    type: String,
+    default: undefined,
+  },
+
+  dropdownItems: {
+    type: Array as PropType<IBladeDropdownItem[]>,
+    default: () => [],
+  },
+
+  clickHandler: {
+    type: Function,
+    default: undefined,
+  },
+});
+const emit = defineEmits(["click"]);
+
+const popper = ref<Instance>();
+const isWaiting = ref(false);
+const isDropActive = ref(false);
+const bladeDropToggle = ref();
+const dropButtonRef = ref();
+const bladeDropRef = ref();
+
+async function onClick(): Promise<void> {
+  console.debug("vc-blade-toolbar-item#onClick()");
+
+  if (!props.disabled && !isWaiting.value) {
+    if (props.clickHandler && typeof props.clickHandler === "function") {
+      isWaiting.value = true;
+      try {
+        await props.clickHandler();
+      } finally {
+        isWaiting.value = false;
+      }
+    } else if (props.dropdownItems?.length) {
+      toggleDropdown();
+    } else {
+      emit("click");
+    }
+  }
+}
+
+function toggleDropdown() {
+  if (props.dropdownItems?.length) {
+    if (isDropActive.value) {
+      isDropActive.value = false;
+      popper.value?.destroy();
+    } else {
+      isDropActive.value = true;
+      nextTick(() => {
+        popper.value = createPopper(bladeDropToggle.value, bladeDropRef.value, {
+          placement: "bottom",
+          modifiers: [
+            {
+              name: "offset",
+              options: {
+                offset: [70, 5],
+              },
+            },
+          ],
+        });
+      });
+    }
+  }
+}
+
+function handleDropItemClick(item: IBladeDropdownItem) {
+  if (item.clickHandler && typeof item.clickHandler === "function") {
+    item.clickHandler();
+    toggleDropdown();
+  }
+}
+</script>
+
+<style lang="scss">
+:root {
+  --blade-toolbar-button-title-color: #465769;
+  --blade-toolbar-button-title-color-hover: #465769;
+  --blade-toolbar-button-title-color-disabled: #9fa2a6;
+
+  --blade-toolbar-button-icon-color: #319ed4;
+  --blade-toolbar-button-icon-color-hover: #257fad;
+  --blade-toolbar-button-icon-color-disabled: #d2d4d7;
+
+  --blade-toolbar-button-background-color: var(
+    --blade-toolbar-background-color
+  );
+  --blade-toolbar-button-background-color-hover: var(
+    --blade-toolbar-background-color
+  );
+  --blade-toolbar-button-background-color-disabled: var(
+    --blade-toolbar-background-color
+  );
+}
+
+.vc-blade-toolbar-button {
+  @apply px-2 bg-[color:var(--blade-toolbar-button-background-color)] box-border cursor-pointer;
+
+  &__wrap {
+    @apply inline-flex flex-col justify-center items-center relative;
+  }
+
+  &__title {
+    @apply text-sm whitespace-nowrap mt-1 text-[color:var(--blade-toolbar-button-title-color)];
+  }
+
+  &__icon {
+    @apply text-[color:var(--blade-toolbar-button-icon-color)];
+  }
+
+  &__dropdown {
+    @apply absolute bg-white z-[9999] shadow-[1px_1px_22px_rgba(126,142,157,0.2)];
+  }
+
+  &__dropdown-item {
+    @apply p-3 text-lg text-black border-l border-solid
+    border-l-[#eef0f2] border-b border-b-[#eef0f2]
+    bg-white cursor-pointer flex flex-row items-center
+    hover:bg-[#eff7fc];
+  }
+
+  &__dropdown-item-icon {
+    @apply text-[#a9bfd2] mr-2;
+  }
+
+  &:hover {
+    @apply bg-[color:var(--blade-toolbar-button-background-color-hover)];
+
+    .vc-blade-toolbar-button__title {
+      @apply text-[color:var(--blade-toolbar-button-title-color-hover)];
+    }
+
+    .vc-blade-toolbar-button__icon {
+      @apply text-[color:var(--blade-toolbar-button-icon-color-hover)];
+    }
+  }
+
+  &_disabled,
+  &_disabled:hover {
+    @apply bg-[color:var(--blade-toolbar-button-background-color-disabled)] cursor-default;
+
+    .vc-blade-toolbar-button__title {
+      @apply text-[color:var(--blade-toolbar-button-title-color-disabled)];
+    }
+
+    .vc-blade-toolbar-button__icon {
+      @apply text-[color:var(--blade-toolbar-button-icon-color-disabled)];
+    }
+  }
+}
+</style>

package/components/organisms/vc-blade/_internal/vc-blade-toolbar/vc-blade-toolbar.vue

@@ -0,0 +1,67 @@
+<template>
+  <div
+    v-if="isToolbarVisible()"
+    class="h-[var(--blade-toolbar-height)] bg-[color:var(--blade-toolbar-background-color)] border-b-[color:#eaedf3] border-solid border-b flex box-border w-full content-center items-stretch shrink-0"
+    :class="{ '!h-[var(--blade-toolbar-height-expanded)]': isExpanded }"
+  >
+    <div
+      class="grow basis-0 flex content-start items-center overflow-x-auto px-2"
+    >
+      <template v-for="item in items" :key="item.id">
+        <VcBladeToolbarButton
+          v-if="item.isVisible === undefined || item.isVisible"
+          v-bind="item"
+          :isExpanded="isExpanded"
+        />
+      </template>
+    </div>
+    <VcIcon
+      class="self-center justify-self-center text-[#a1c0d4] cursor-pointer mr-4 hover:text-[#7ea8c4]"
+      :icon="`fas fa-chevron-${isExpanded ? 'up' : 'down'}`"
+      @click="toggleToolbar"
+    ></VcIcon>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue";
+import VcBladeToolbarButton from "./_internal/vc-blade-toolbar-button/vc-blade-toolbar-button.vue";
+
+const props = defineProps({
+  items: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const isExpanded = ref(true);
+try {
+  isExpanded.value =
+    localStorage.getItem("VC_BLADE_TOOLBAR_IS_EXPANDED") === "true";
+} catch (err) {
+  isExpanded.value = true;
+}
+
+function toggleToolbar() {
+  isExpanded.value = !isExpanded.value;
+  localStorage.setItem(
+    "VC_BLADE_TOOLBAR_IS_EXPANDED",
+    isExpanded.value.toString()
+  );
+}
+
+function isToolbarVisible() {
+  const visibleItems = (props.items as { isVisible: boolean }[]).filter(
+    (item) => item.isVisible === undefined || item.isVisible
+  );
+  return !!visibleItems.length;
+}
+</script>
+
+<style lang="scss">
+:root {
+  --blade-toolbar-height: 36px;
+  --blade-toolbar-height-expanded: 50px;
+  --blade-toolbar-background-color: #ffffff;
+}
+</style>

package/components/organisms/vc-blade/vc-blade.stories.ts

@@ -0,0 +1,46 @@
+/**
+ * Blade component.
+ * @author Iurii A Taranov <me@flanker72.ru>
+ */
+import { Story } from "@storybook/vue3";
+import VcBlade from "./vc-blade.vue";
+
+export default {
+  title: "organisms/vc-blade",
+  component: VcBlade,
+  argTypes: {
+    collapse: { action: "collapse", name: "collapse" },
+    expand: { action: "expand", name: "expand" },
+  },
+};
+
+const Template: Story = (args) => ({
+  components: { VcBlade },
+  setup() {
+    return { args };
+  },
+  template:
+    '<vc-blade v-bind="args"><div class="p-4">Blade Contents</div></vc-blade>',
+});
+
+export const Blade = Template.bind({});
+Blade.storyName = "vc-blade";
+Blade.args = {
+  icon: "fas fa-star",
+  title: "My Awesome Blade",
+  subtitle: "Optional Subtitle",
+  width: 700,
+  closable: false,
+  searchable: false,
+
+  toolbarItems: [
+    { id: 1, icon: "fas fa-sync-alt", title: "Refresh" },
+    { id: 2, icon: "fas fa-plus", title: "Add" },
+    { id: 3, icon: "fas fa-trash", title: "Delete", disabled: true },
+    { id: 4, icon: "fas fa-download", title: "Import" },
+    { id: 5, icon: "fas fa-upload", title: "Export" },
+    { id: 6, icon: "fas fa-cut", title: "Cut", disabled: true },
+    { id: 7, icon: "fas fa-paste", title: "Paste", disabled: true },
+    { id: 8, icon: "fas fa-cubes", title: "Bulk export", disabled: true },
+  ],
+};

package/components/organisms/vc-blade/vc-blade.vue

@@ -0,0 +1,87 @@
+<template>
+  <div
+    class="vc-blade relative flex shrink-0 flex-col bg-[color:var(--blade-background-color)] rounded-[var(--blade-border-radius)] shadow-[2px_2px_8px_rgba(126,142,157,0.14)] my-4 mx-2 overflow-hidden transition-[width] duration-200"
+    :style="{ width: typeof width === 'number' ? `${width}px` : width }"
+    :class="[$attrs.class, { '!w-full shrink': $isMobile.value || expanded }]"
+  >
+    <!-- Init blade header -->
+    <VcBladeHeader
+      class="shrink-0"
+      v-if="!$isMobile.value || closable"
+      :expanded="expanded"
+      :closable="closable"
+      :icon="icon"
+      :title="title"
+      :subtitle="subtitle"
+      @close="$emit('close')"
+    >
+      <template v-slot:actions v-if="$slots['actions']">
+        <slot name="actions"></slot>
+      </template>
+    </VcBladeHeader>
+
+    <!-- Set up blade toolbar -->
+    <VcBladeToolbar class="shrink-0" :items="toolbarItems"></VcBladeToolbar>
+
+    <slot></slot>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from "vue";
+
+export default defineComponent({
+  inheritAttrs: false,
+});
+</script>
+
+<script lang="ts" setup>
+import VcBladeHeader from "./_internal/vc-blade-header/vc-blade-header.vue";
+import VcBladeToolbar from "./_internal/vc-blade-toolbar/vc-blade-toolbar.vue";
+import { IBladeToolbar } from "@/core/types";
+
+defineProps({
+  icon: {
+    type: String,
+  },
+
+  title: {
+    type: String,
+  },
+
+  subtitle: {
+    type: String,
+  },
+
+  width: {
+    type: [Number, String],
+    default: "30%",
+  },
+
+  expanded: {
+    type: Boolean,
+    default: false,
+  },
+
+  closable: {
+    type: Boolean,
+    default: true,
+  },
+
+  toolbarItems: {
+    type: Array as PropType<IBladeToolbar[]>,
+    default: () => [],
+  },
+});
+</script>
+
+<style lang="scss">
+:root {
+  --blade-background-color: #ffffff;
+  --blade-border-radius: 6px;
+}
+
+.vc-app_mobile .vc-blade {
+  @apply m-0 rounded-none;
+}
+</style>