@vc-shell/framework 1.0.38 → 1.0.40

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

@@ -0,0 +1,106 @@
+<template>
+  <div class="vc-slider tw-relative">
+    <swiper-component
+      :class="[
+        'vc-slider__swiper',
+        {
+          'tw-overflow-visible': overflow,
+          'tw-px-[40px]': navigation,
+        },
+      ]"
+      :space-between="spaceBetweenSlides"
+      :navigation="buttonsList"
+      :slidesPerView="slidesPerView"
+      :resizeObserver="true"
+    >
+      <swiper-slide v-for="(slide, i) in slides" :key="i">
+        <slot :slide="slide"></slot>
+      </swiper-slide>
+    </swiper-component>
+    <!-- Navigation buttons-->
+    <div v-show="navigation">
+      <div class="vc-slider__prev tw-left-0">
+        <slot name="prevBtn">
+          <div class="vc-slider__btn">
+            <VcIcon icon="fas fa-chevron-left"></VcIcon>
+          </div>
+        </slot>
+      </div>
+      <div class="vc-slider__next tw-right-0">
+        <slot name="nextBtn">
+          <div class="vc-slider__btn">
+            <VcIcon icon="fas fa-chevron-right"></VcIcon>
+          </div>
+        </slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from "vue";
+import { Swiper as SwiperComponent, SwiperSlide } from "swiper/vue";
+import SwiperCore, { Navigation } from "swiper";
+import "swiper/swiper-bundle.min.css";
+import "swiper/swiper.min.css";
+import "swiper/components/navigation/navigation.min.css";
+SwiperCore.use([Navigation]);
+
+defineProps({
+  slides: {
+    type: Array,
+    default: () => [],
+  },
+
+  navigation: {
+    type: Boolean,
+    default: false,
+  },
+
+  overflow: {
+    type: Boolean,
+    default: false,
+  },
+
+  slidesPerView: {
+    type: String,
+    default: "auto",
+  },
+
+  spaceBetweenSlides: {
+    type: Number,
+    default: 10,
+  },
+});
+
+const buttonsList = computed(() => ({
+  nextEl: ".vc-slider__next",
+  prevEl: ".vc-slider__prev",
+}));
+</script>
+
+<style lang="scss" scoped>
+.vc-slider {
+  &__swiper {
+    .swiper-slide {
+      @apply tw-w-auto;
+    }
+  }
+
+  &__next,
+  &__prev {
+    @apply tw-absolute tw-top-2/4 -tw-translate-y-2/4 tw-z-[2];
+
+    &.swiper-button-disabled .vc-slider__btn {
+      @apply tw-text-[#999999];
+    }
+  }
+
+  &__btn {
+    @apply tw-bg-white tw-border tw-border-solid tw-border-[#eaecf2]
+      tw-box-border tw-rounded-[3px]
+      tw-flex tw-items-center tw-justify-center
+      tw-text-[#43b0e6] tw-w-[30px] tw-h-[30px];
+  }
+}
+</style>

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

@@ -0,0 +1,23 @@
+/**
+ * Textarea component.
+ * @author Iurii A Taranov <me@flanker72.ru>
+ */
+import { Story } from "@storybook/vue3";
+import VcTextarea from "./vc-textarea.vue";
+
+export default {
+  title: "atoms/vc-textarea",
+  component: VcTextarea,
+};
+
+const Template: Story = (args) => ({
+  components: { VcTextarea },
+  setup() {
+    return { args };
+  },
+  template: '<vc-textarea v-bind="args"></vc-textarea>',
+});
+
+export const Textarea = Template.bind({});
+Textarea.storyName = "vc-textarea";
+Textarea.args = {};

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

@@ -0,0 +1,155 @@
+<template>
+  <div
+    class="vc-textarea"
+    :class="{
+      'vc-textarea_error': errorMessage,
+      'vc-textarea_disabled': disabled,
+    }"
+  >
+    <!-- Textarea label -->
+    <VcLabel v-if="label" class="tw-mb-2" :required="isRequired">
+      <span>{{ label }}</span>
+      <template v-if="tooltip" v-slot:tooltip>
+        <span v-html="tooltip"></span>
+      </template>
+    </VcLabel>
+
+    <!-- Textarea field -->
+    <div class="vc-textarea__field-wrapper">
+      <textarea
+        class="vc-textarea__field"
+        :placeholder="placeholder"
+        :value="modelValue"
+        :disabled="disabled"
+        @input="onInput"
+        :maxlength="maxchars"
+      ></textarea>
+    </div>
+
+    <slot v-if="errorMessage" name="error">
+      <VcHint class="vc-textarea__error">
+        {{ errorMessage }}
+      </VcHint>
+    </slot>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { watch } from "vue";
+import { VcLabel } from "@/ui/components";
+
+const props = defineProps({
+  placeholder: {
+    type: String,
+    default: "",
+  },
+
+  modelValue: {
+    type: String,
+    default: undefined,
+  },
+
+  isRequired: {
+    type: Boolean,
+    default: false,
+  },
+
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+
+  label: {
+    type: String,
+    default: undefined,
+  },
+
+  tooltip: {
+    type: String,
+    default: undefined,
+  },
+
+  name: {
+    type: String,
+    default: "Field",
+  },
+
+  maxchars: {
+    type: String,
+    default: "1024",
+  },
+
+  errorMessage: {
+    type: String,
+    default: undefined,
+  },
+});
+
+const emit = defineEmits(["update:modelValue"]);
+
+watch(
+  () => props.modelValue,
+  (value) => {
+    emit("update:modelValue", value);
+  }
+);
+
+// Handle input event to propertly validate value and emit changes
+function onInput(e: InputEvent) {
+  const newValue = (e.target as HTMLInputElement).value;
+  emit("update:modelValue", newValue);
+}
+</script>
+
+<style lang="scss">
+:root {
+  --textarea-height: 120px;
+  --textarea-border-color: #d3dbe9;
+  --textarea-border-color-error: #f14e4e;
+  --textarea-border-radius: 3px;
+  --textarea-background-color: #ffffff;
+  --textarea-placeholder-color: #a5a5a5;
+}
+
+.vc-textarea {
+  &__field-wrapper {
+    @apply tw-border tw-border-solid
+      tw-border-[color:var(--textarea-border-color)]
+      tw-rounded-[var(--textarea-border-radius)]
+      tw-box-border
+      tw-bg-[color:var(--textarea-background-color)] tw-flex tw-items-stretch;
+  }
+
+  &_error &__field-wrapper {
+    @apply tw-border tw-border-solid tw-border-[color:var(--textarea-border-color-error)];
+  }
+
+  &__error {
+    @apply tw-text-[color:var(--textarea-border-color-error)] tw-mt-1 #{!important};
+  }
+
+  &__field {
+    @apply tw-w-full tw-resize-y tw-box-border tw-border-none tw-outline-none
+    tw-min-h-[var(--textarea-height)]
+    placeholder:tw-text-[color:var(--textarea-placeholder-color)]
+    tw-px-3 tw-py-2;
+
+    &::-webkit-input-placeholder {
+      @apply tw-text-[color:var(--textarea-placeholder-color)];
+    }
+
+    &::-moz-placeholder {
+      @apply tw-text-[color:var(--textarea-placeholder-color)];
+    }
+
+    &::-ms-placeholder {
+      @apply tw-text-[color:var(--textarea-placeholder-color)];
+    }
+  }
+
+  &_disabled &__field-wrapper,
+  &_disabled &__field {
+    @apply tw-bg-[#fafafa] tw-text-[#424242];
+  }
+}
+</style>

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

@@ -0,0 +1,150 @@
+<template>
+  <div
+    class="tw-relative tw-flex tw-items-center tw-content-between tw-h-[var(--app-bar-height)] tw-bg-[color:var(--app-bar-background-color)] tw-pl-4"
+  >
+    <slot name="appSwitcher"></slot>
+    <!-- Logo container for mobile devices -->
+    <template v-if="$isMobile.value">
+      <!-- Show logo on mobile dashboard -->
+      <img
+        v-if="blades.length === 0"
+        class="h-3/6 tw-cursor-pointer"
+        alt="logo"
+        :src="logo"
+        @click="$emit('logo:click')"
+      />
+
+      <!-- Show blades name when at least one blade is opened -->
+      <div
+        v-else-if="blades.length === 1"
+        class="tw-overflow-ellipsis tw-overflow-hidden tw-whitespace-nowrap tw-text-2xl tw-leading-header"
+      >
+        {{ blades[0].title }}
+      </div>
+
+      <!-- Show back link when more than one blade is opened -->
+      <VcLink v-else @click="$emit('backlink:click')">
+        <VcIcon icon="fas fa-chevron-left" size="s"></VcIcon>
+        <span class="tw-ml-2 tw-text-lg">{{ $t("Back") }}</span>
+      </VcLink>
+    </template>
+
+    <!-- Logo container for desktop devices -->
+    <template v-else>
+      <img
+        class="tw-h-3/6 tw-cursor-pointer"
+        :src="logo"
+        alt="logo"
+        @click="$emit('logo:click')"
+      />
+      <div
+        class="tw-text-[color:var(--app-bar-version-color)] tw-text-xs tw-ml-[30px]"
+        @click="$emit('version:click')"
+      >
+        {{ version }}
+      </div>
+    </template>
+
+    <!-- Product name slot -->
+    <div
+      class="tw-text-[color:var(--app-bar-product-name-color)] tw-text-[length:var(--app-bar-product-name-size)] tw-font-medium tw-ml-[30px]"
+      v-if="title"
+    >
+      {{ title }}
+    </div>
+
+    <!-- Additional spacer -->
+    <div class="tw-grow tw-basis-0 tw-basis-0"></div>
+
+    <!-- Toolbar container -->
+    <div class="tw-flex tw-h-full tw-box-border">
+      <template v-for="(item, index) in buttons" :key="index">
+        <template v-if="item.isVisible === undefined || item.isVisible">
+          <!-- Draw custom component is it is passed -->
+          <component
+            v-if="item.component"
+            :is="item.component"
+            v-bind="item.bladeOptions"
+            :isAccent="item.isAccent"
+          ></component>
+
+          <!-- Otherwise draw default toolbar button -->
+          <div
+            v-else
+            class="tw-relative tw-flex tw-items-center tw-justify-center tw-w-[var(--app-bar-button-width)] tw-border-l tw-border-solid tw-border-[color:var(--app-bar-button-border-color)] tw-cursor-pointer tw-text-[color: var(--app-bar-button-color)] tw-bg-[color:var(--app-bar-button-background-color)] tw-transition-[color] tw-duration-200 hover:tw-text-[color:var(--app-bar-button-color-hover)] hover:tw-bg-[color:var(--app-bar-button-background-color-hover)]"
+            :class="{ 'vc-app-bar__button_accent': item.isAccent }"
+            :title="item.title"
+            @click="$emit('button:click', item)"
+          >
+            <VcIcon
+              :icon="typeof item.icon === 'function' ? item.icon() : item.icon"
+              size="xl"
+            ></VcIcon>
+          </div>
+        </template>
+      </template>
+    </div>
+
+    <!-- Show menu toggler on mobile devices -->
+    <div
+      v-if="$isMobile.value"
+      class="tw-text-[#319ed4] tw-w-[var(--app-bar-button-width)] tw-flex tw-items-center tw-justify-center tw-h-full tw-box-border tw-cursor-pointer"
+      @click="$emit('menubutton:click')"
+    >
+      <VcIcon icon="fas fa-bars"></VcIcon>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { VcIcon } from "@/ui/components";
+import { IBladeToolbar } from "@/core/types";
+import { IBladeElement } from "@/shared";
+
+export interface Props {
+  logo: string;
+  version: string;
+  blades: IBladeElement[];
+  buttons: IBladeToolbar[];
+  title?: string;
+}
+
+withDefaults(defineProps<Props>(), {
+  logo: "",
+  version: "",
+  blades: () => [],
+  buttons: () => [],
+});
+
+defineEmits([
+  "logo:click",
+  "backlink:click",
+  "version:click",
+  "toolbarbutton:click",
+  "menubutton:click",
+]);
+</script>
+
+<style lang="scss">
+:root {
+  --app-bar-height: 60px;
+  --app-bar-background-color: #ffffff;
+  --app-bar-button-width: 50px;
+  --app-bar-button-border-color: var(--app-bar-background-color);
+  --app-bar-button-color: #7e8e9d;
+  --app-bar-button-background-color: var(--app-bar-background-color);
+  --app-bar-button-color-hover: #34414f;
+  --app-bar-button-background-color-hover: var(--app-bar-background-color);
+  --app-bar-version-color: #838d9a;
+  --app-bar-product-name-color: #34414f;
+  --app-bar-product-name-size: 20px;
+}
+
+.vc-app-bar {
+  &__button {
+    &_accent:before {
+      @apply tw-content-[""] tw-block tw-absolute tw-right-3 tw-top-[18px] tw-w-[7px] tw-h-[7px] tw-bg-[#ff4a4a] tw-rounded-full tw-z-[1];
+    }
+  }
+}
+</style>

package/ui/components/organisms/vc-app/_internal/vc-app-menu/_internal/vc-app-menu-item/_internal/vc-app-menu-link.vue

@@ -0,0 +1,148 @@
+<template>
+  <div
+    class="vc-app-menu-item"
+    :class="[
+      { 'vc-app-menu-item_active': isActive && !children.length },
+      { 'vc-app-menu-item_no-hover': children.length },
+    ]"
+    @click="$emit('onClick')"
+  >
+    <div
+      class="vc-app-menu-item__handler"
+      :class="{ 'vc-app-menu-item__handler_enabled': !sticky }"
+    >
+      <VcIcon icon="fas fa-ellipsis-v" size="m" />
+    </div>
+    <div v-if="icon" class="vc-app-menu-item__icon">
+      <VcIcon :icon="icon" size="m" />
+    </div>
+    <div class="vc-app-menu-item__title">
+      {{ title }}
+      <VcIcon
+        class="vc-app-menu-item__title-icon"
+        icon="fas fa-chevron-down"
+        size="xs"
+        v-if="children.length"
+      ></VcIcon>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { ExtendedComponent } from "@/shared";
+
+export interface Props {
+  isActive?: boolean;
+  children?: ExtendedComponent;
+  sticky?: boolean;
+  icon: string;
+  title: string;
+}
+
+export interface Emits {
+  (event: "onClick"): void;
+}
+
+withDefaults(defineProps<Props>(), {
+  isActive: false,
+  children: () => ({}),
+  sticky: true,
+  icon: "",
+  title: "",
+});
+
+defineEmits<Emits>();
+</script>
+
+<style lang="scss">
+:root {
+  --app-menu-item-height: 38px;
+  --app-menu-item-icon-width: 20px;
+  --app-menu-item-icon-color: #337599;
+  --app-menu-item-icon-color-active: #ffffff;
+  --app-menu-item-handler-width: 10px;
+  --app-menu-item-background-color-hover: #337599;
+  --app-menu-item-hover-radius: 4px;
+  --app-menu-item-title-color: #465769;
+  --app-menu-item-title-color-active: #ffffff;
+  --app-menu-item-handler-color: #bdd1df;
+}
+
+.vc-app-menu-item {
+  @apply tw-flex tw-items-center tw-w-full tw-h-[var(--app-menu-item-height)]
+  tw-border-none
+  tw-flex-nowrap tw-box-border tw-cursor-pointer tw-relative tw-uppercase;
+
+  &_active {
+    @apply tw-bg-[color:var(--app-menu-item-background-color-hover)]
+    tw-rounded-[var(--app-menu-item-hover-radius)]
+    before:tw-opacity-100;
+  }
+
+  &__handler {
+    @apply tw-w-[var(--app-menu-item-handler-width)]
+    tw-text-[color:var(--app-menu-item-handler-color)]
+    tw-text-center tw-invisible tw-shrink-0;
+
+    &_enabled {
+      @apply tw-cursor-move;
+    }
+  }
+
+  &__icon {
+    @apply tw-w-[var(--app-menu-item-icon-width)]
+    tw-text-[color:var(--app-menu-item-icon-color)]
+    tw-overflow-hidden tw-flex
+    tw-justify-center tw-shrink-0  tw-transition-[color]  tw-duration-200;
+  }
+
+  &_active &__icon {
+    @apply tw-text-[color:var(--app-menu-item-icon-color-active)];
+  }
+
+  &__title {
+    @apply tw-truncate
+    tw-text-lg
+    tw-font-medium
+    tw-px-3
+    tw-text-[color:var(--app-menu-item-title-color)]
+    [transition:color_0.2s_ease] [transition:opacity_0.1s_ease]
+    tw-opacity-100 tw-w-full;
+  }
+
+  &__title-icon {
+    @apply tw-text-[color:var(--app-menu-item-icon-color)] tw-ml-3;
+  }
+
+  &_active &__title {
+    @apply tw-text-[color:var(--app-menu-item-title-color-active)]
+    tw-font-bold;
+  }
+
+  &_active &__title-icon {
+    @apply tw-text-[color:var(--app-menu-item-icon-color-active)];
+  }
+
+  &:hover {
+    @apply tw-bg-[color:var(--app-menu-item-background-color-hover)]
+    tw-rounded-[var(--app-menu-item-hover-radius)];
+  }
+
+  &:hover &__title {
+    @apply tw-text-[color:var(--app-menu-item-title-color-active)];
+  }
+
+  &:hover &__icon {
+    @apply tw-text-[color:var(--app-menu-item-icon-color-active)];
+  }
+
+  &:hover &__title-icon {
+    @apply tw-text-[color:var(--app-menu-item-icon-color-active)];
+  }
+
+  &:hover &__handler {
+    &_enabled {
+      @apply tw-invisible;
+    }
+  }
+}
+</style>