@vc-shell/framework 1.0.38 → 1.0.39

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

@@ -0,0 +1,106 @@
+<template>
+  <div class="vc-slider relative">
+    <swiper-component
+      :class="[
+        'vc-slider__swiper',
+        {
+          'overflow-visible': overflow,
+          '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 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 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 w-auto;
+    }
+  }
+
+  &__next,
+  &__prev {
+    @apply absolute top-2/4 -translate-y-2/4 z-[2];
+
+    &.swiper-button-disabled .vc-slider__btn {
+      @apply text-[#999999];
+    }
+  }
+
+  &__btn {
+    @apply bg-white border border-solid border-[#eaecf2]
+      box-border rounded-[3px]
+      flex items-center justify-center
+      text-[#43b0e6] w-[30px] h-[30px];
+  }
+}
+</style>

package/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/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="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 "@/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 border border-solid
+      border-[color:var(--textarea-border-color)]
+      rounded-[var(--textarea-border-radius)]
+      box-border
+      bg-[color:var(--textarea-background-color)] flex items-stretch;
+  }
+
+  &_error &__field-wrapper {
+    @apply border border-solid border-[color:var(--textarea-border-color-error)];
+  }
+
+  &__error {
+    @apply text-[color:var(--textarea-border-color-error)] mt-1 #{!important};
+  }
+
+  &__field {
+    @apply w-full resize-y box-border border-none outline-none
+    min-h-[var(--textarea-height)]
+    placeholder:text-[color:var(--textarea-placeholder-color)]
+    px-3 py-2;
+
+    &::-webkit-input-placeholder {
+      @apply text-[color:var(--textarea-placeholder-color)];
+    }
+
+    &::-moz-placeholder {
+      @apply text-[color:var(--textarea-placeholder-color)];
+    }
+
+    &::-ms-placeholder {
+      @apply text-[color:var(--textarea-placeholder-color)];
+    }
+  }
+
+  &_disabled &__field-wrapper,
+  &_disabled &__field {
+    @apply bg-[#fafafa] text-[#424242];
+  }
+}
+</style>

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

@@ -0,0 +1,146 @@
+<template>
+  <div
+    class="relative flex items-center content-between h-[var(--app-bar-height)] bg-[color:var(--app-bar-background-color)] 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 cursor-pointer"
+        :src="logo"
+        @click="$emit('logo:click')"
+      />
+
+      <!-- Show blades name when at least one blade is opened -->
+      <div
+        v-else-if="blades.length === 1"
+        class="overflow-ellipsis overflow-hidden whitespace-nowrap text-2xl 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="ml-2 text-lg">{{ $t("Back") }}</span>
+      </VcLink>
+    </template>
+
+    <!-- Logo container for desktop devices -->
+    <template v-else>
+      <img
+        class="h-3/6 cursor-pointer"
+        :src="logo"
+        @click="$emit('logo:click')"
+      />
+      <div
+        class="text-[color:var(--app-bar-version-color)] text-xs ml-[30px]"
+        @click="$emit('version:click')"
+      >
+        {{ version }}
+      </div>
+    </template>
+
+    <!-- Product name slot -->
+    <div
+      class="text-[color:var(--app-bar-product-name-color)] text-[length:var(--app-bar-product-name-size)] font-medium ml-[30px]"
+      v-if="$slots['productName']"
+    >
+      <slot name="productName"></slot>
+    </div>
+
+    <!-- Additional spacer -->
+    <div class="grow basis-0 basis-0"></div>
+
+    <!-- Toolbar container -->
+    <div class="flex h-full 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="relative flex items-center justify-center w-[var(--app-bar-button-width)] border-l border-solid border-[color:var(--app-bar-button-border-color)] cursor-pointer text-[color: var(--app-bar-button-color)] bg-[color:var(--app-bar-button-background-color)] transition-[color] duration-200 hover:text-[color:var(--app-bar-button-color-hover)] hover: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="text-[#319ed4] w-[var(--app-bar-button-width)] flex items-center justify-center h-full box-border"
+      @click="$emit('menubutton:click')"
+    >
+      <VcIcon icon="fas fa-bars"></VcIcon>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { VcIcon } from "@/components";
+import { IBladeToolbar, IBladeElement } from "@/core/types";
+
+export interface Props {
+  logo: string;
+  version: string;
+  blades: IBladeElement[];
+  buttons: IBladeToolbar[];
+}
+
+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 content-[""] block absolute right-3 top-[18px] w-[7px] h-[7px] bg-[#ff4a4a] rounded-full z-[1];
+    }
+  }
+}
+</style>

package/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 flex items-center w-full h-[var(--app-menu-item-height)]
+  border-none
+  flex-nowrap box-border cursor-pointer relative uppercase;
+
+  &_active {
+    @apply bg-[color:var(--app-menu-item-background-color-hover)]
+    rounded-[var(--app-menu-item-hover-radius)]
+    before:opacity-100;
+  }
+
+  &__handler {
+    @apply w-[var(--app-menu-item-handler-width)]
+    text-[color:var(--app-menu-item-handler-color)]
+    text-center invisible shrink-0;
+
+    &_enabled {
+      @apply cursor-move;
+    }
+  }
+
+  &__icon {
+    @apply w-[var(--app-menu-item-icon-width)]
+    text-[color:var(--app-menu-item-icon-color)]
+    overflow-hidden flex
+    justify-center shrink-0 transition-[color] duration-200;
+  }
+
+  &_active &__icon {
+    @apply text-[color:var(--app-menu-item-icon-color-active)];
+  }
+
+  &__title {
+    @apply truncate
+    text-lg
+    font-medium
+    px-3
+    text-[color:var(--app-menu-item-title-color)]
+    [transition:color_0.2s_ease] [transition:opacity_0.1s_ease]
+    opacity-100 w-full;
+  }
+
+  &__title-icon {
+    @apply text-[color:var(--app-menu-item-icon-color)] ml-3;
+  }
+
+  &_active &__title {
+    @apply text-[color:var(--app-menu-item-title-color-active)]
+    font-bold;
+  }
+
+  &_active &__title-icon {
+    @apply text-[color:var(--app-menu-item-icon-color-active)];
+  }
+
+  &:hover {
+    @apply bg-[color:var(--app-menu-item-background-color-hover)]
+    rounded-[var(--app-menu-item-hover-radius)];
+  }
+
+  &:hover &__title {
+    @apply text-[color:var(--app-menu-item-title-color-active)];
+  }
+
+  &:hover &__icon {
+    @apply text-[color:var(--app-menu-item-icon-color-active)];
+  }
+
+  &:hover &__title-icon {
+    @apply text-[color:var(--app-menu-item-icon-color-active)];
+  }
+
+  &:hover &__handler {
+    &_enabled {
+      @apply invisible;
+    }
+  }
+}
+</style>