@vc-shell/framework 1.0.38 → 1.0.40

package/ui/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 "@/ui/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 tw-px-2 tw-bg-[color:var(--blade-toolbar-button-background-color)] tw-box-border tw-cursor-pointer;
+
+  &__wrap {
+    @apply tw-inline-flex tw-flex-col tw-justify-center tw-items-center tw-relative;
+  }
+
+  &__title {
+    @apply tw-text-sm tw-whitespace-nowrap tw-mt-1 tw-text-[color:var(--blade-toolbar-button-title-color)];
+  }
+
+  &__icon {
+    @apply tw-text-[color:var(--blade-toolbar-button-icon-color)];
+  }
+
+  &__dropdown {
+    @apply tw-absolute tw-bg-white tw-z-[9999] tw-shadow-[1px_1px_22px_rgba(126,142,157,0.2)];
+  }
+
+  &__dropdown-item {
+    @apply tw-p-3 tw-text-lg tw-text-black tw-border-l tw-border-solid
+    tw-border-l-[#eef0f2] tw-border-b tw-border-b-[#eef0f2]
+    tw-bg-white tw-cursor-pointer tw-flex tw-flex-row tw-items-center
+    hover:tw-bg-[#eff7fc];
+  }
+
+  &__dropdown-item-icon {
+    @apply tw-text-[#a9bfd2] tw-mr-2;
+  }
+
+  &:hover {
+    @apply tw-bg-[color:var(--blade-toolbar-button-background-color-hover)];
+
+    .vc-blade-toolbar-button__title {
+      @apply tw-text-[color:var(--blade-toolbar-button-title-color-hover)];
+    }
+
+    .vc-blade-toolbar-button__icon {
+      @apply tw-text-[color:var(--blade-toolbar-button-icon-color-hover)];
+    }
+  }
+
+  &_disabled,
+  &_disabled:hover {
+    @apply tw-bg-[color:var(--blade-toolbar-button-background-color-disabled)] tw-cursor-default;
+
+    .vc-blade-toolbar-button__title {
+      @apply tw-text-[color:var(--blade-toolbar-button-title-color-disabled)];
+    }
+
+    .vc-blade-toolbar-button__icon {
+      @apply tw-text-[color:var(--blade-toolbar-button-icon-color-disabled)];
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,67 @@
+<template>
+  <div
+    v-if="isToolbarVisible()"
+    class="tw-h-[var(--blade-toolbar-height)] tw-bg-[color:var(--blade-toolbar-background-color)] tw-border-b-[color:#eaedf3] tw-border-solid tw-border-b tw-flex tw-box-border tw-w-full tw-content-center tw-items-stretch tw-shrink-0"
+    :class="{ '!tw-h-[var(--blade-toolbar-height-expanded)]': isExpanded }"
+  >
+    <div
+      class="tw-grow tw-basis-0 tw-flex tw-content-start tw-items-center tw-overflow-x-auto tw-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="tw-self-center tw-justify-self-center tw-text-[#a1c0d4] tw-cursor-pointer tw-mr-4 hover:tw-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/ui/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/ui/components/organisms/vc-blade/vc-blade.vue

@@ -0,0 +1,87 @@
+<template>
+  <div
+    class="vc-blade tw-relative tw-flex tw-shrink-0 tw-flex-col tw-bg-[color:var(--blade-background-color)] tw-rounded-[var(--blade-border-radius)] tw-shadow-[2px_2px_8px_rgba(126,142,157,0.14)] tw-my-4 tw-mx-2 tw-overflow-hidden  tw-transition-[width]  tw-duration-200"
+    :style="{ width: typeof width === 'number' ? `${width}px` : width }"
+    :class="[$attrs.class, { '!tw-w-full tw-shrink': $isMobile.value || expanded }]"
+  >
+    <!-- Init blade header -->
+    <VcBladeHeader
+      class="tw-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="tw-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 tw-m-0 tw-rounded-none;
+}
+</style>