@vc-shell/framework 1.0.38 → 1.0.39

package/components/atoms/vc-loading/vc-loading.vue

@@ -0,0 +1,30 @@
+<template>
+  <div
+    class="absolute items-center justify-center flex-col z-[9998] hidden w-full h-full box-border"
+    :class="{
+      '!flex backdrop-blur-[3px] bg-[rgba(255, 255, 255, 0.5)]': active,
+    }"
+  >
+    <div class="relative w-[142px] h-[40px] z-[1]">
+      <span
+        class="absolute w-4 h-4 top-[12px] left-[15px] bg-[#319ed4] rounded-full translate-x-0 animate-loadingMarker"
+      ></span>
+      <div class="translate-x-0 mt-3 ml-[31px] animate-loadingMarkers">
+        <span
+          class="block float-left w-4 h-4 bg-[#319ed4] rounded-full ml-4"
+          v-for="item in 3"
+          :key="`marker_${item}`"
+        ></span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineProps({
+  active: {
+    type: Boolean,
+    default: false,
+  },
+});
+</script>

package/components/atoms/vc-progress/vc-progress.stories.ts

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

package/components/atoms/vc-progress/vc-progress.vue

@@ -0,0 +1,65 @@
+<template>
+  <div
+    :class="[
+      'vc-progress border border-[length:var(--progressbar-border-width)] border-[color:var(--progressbar-border-color)] rounded-[var(--progressbar-border-radius)] h-[var(--progressbar-height)] transition duration-200 box-border bg-[color:var(--progressbar-background-color)]',
+      variant,
+    ]"
+  >
+    <div
+      class="vc-progress__value bg-[color:var(--progressbar-foreground-color)] transition duration-200 h-full"
+      :style="`width: ${value}%`"
+    ></div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineProps({
+  value: {
+    type: Number,
+    default: 0,
+  },
+
+  variant: {
+    type: String,
+    default: "default",
+    enum: ["default", "striped"],
+  },
+});
+</script>
+
+<style lang="scss">
+:root {
+  --progressbar-height: 16px;
+  --progressbar-border-radius: 2px;
+  --progressbar-background-color: #ffffff;
+  --progressbar-foreground-color: #e1eff9;
+  --progressbar-border-width: 1px;
+  --progressbar-border-color: #e1eff9;
+}
+
+@keyframes change {
+  from {
+    background-position: 0 0, left;
+  }
+  to {
+    background-position: 30px 0, left;
+  }
+}
+
+.vc-progress {
+  &.striped {
+    .vc-progress__value {
+      background: linear-gradient(
+            45deg,
+            transparent 50%,
+            #acd2f2 50%,
+            #acd2f2 75%,
+            transparent 75%
+          )
+          left/30px 30px repeat-x,
+        #e1f0fe;
+      animation: change 1s linear infinite;
+    }
+  }
+}
+</style>

package/components/atoms/vc-row/vc-row.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="vc-row flex-nowrap flex items-stretch">
+    <slot></slot>
+  </div>
+</template>
+
+<style lang="scss">
+.vc-row {
+  .vc-app_mobile & {
+    display: block;
+  }
+}
+</style>

package/components/atoms/vc-status/vc-status.stories.ts

@@ -0,0 +1,26 @@
+/**
+ * Status component.
+ * @author Iurii A Taranov <me@flanker72.ru>
+ */
+import { Story } from "@storybook/vue3";
+import VcStatus from "./vc-status.vue";
+
+export default {
+  title: "atoms/vc-status",
+  component: VcStatus,
+};
+
+const Template: Story = (args) => ({
+  components: { VcStatus },
+  setup() {
+    return { args };
+  },
+  template: '<vc-status v-bind="args">Status text</vc-status>',
+});
+
+export const Status = Template.bind({});
+Status.storyName = "vc-status";
+Status.args = {
+  disabled: false,
+  clickable: true,
+};

package/components/atoms/vc-status/vc-status.vue

@@ -0,0 +1,78 @@
+<template>
+  <div
+    class="vc-status"
+    :class="[
+      `vc-status_${variant}`,
+      { 'vc-status_outline': outline },
+      { 'vc-status_extended': extend },
+    ]"
+  >
+    <slot></slot>
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineProps({
+  variant: {
+    type: String,
+    default: "info",
+    enum: ["info", "warning", "danger", "success", "light-danger"],
+  },
+
+  outline: {
+    type: Boolean,
+    default: true,
+  },
+
+  extend: {
+    type: Boolean,
+    default: false,
+  },
+});
+</script>
+
+<style lang="scss">
+:root {
+  --status-padding: 4px 14px;
+  --status-padding-extended: 12px;
+
+  --status-border-radius: 2px;
+  --status-border-radius-extended: 4px;
+  --status-border-width: 1px;
+
+  --status-info-color: #ffffff;
+  --status-info-main-color: #bdd1df;
+
+  --status-warning-color: #ffffff;
+  --status-warning-main-color: #f89406;
+
+  --status-danger-color: #ffffff;
+  --status-danger-main-color: #ef796f;
+
+  --status-success-color: #ffffff;
+  --status-success-main-color: #87b563;
+
+  --status-light-danger-color: #333333;
+  --status-light-danger-main-color: #ffefef;
+}
+
+$variants: info, warning, danger, success, light-danger;
+
+.vc-status {
+  @apply inline-block rounded-[var(--status-border-radius)] py-1 px-3.5 text-base font-normal whitespace-nowrap;
+
+  @each $variant in $variants {
+    &_#{$variant} {
+      @apply text-[color:var(--status-#{$variant}-color)] border border-solid border-[color:var(--status-#{$variant}-main-color)] bg-[color:var(--status-#{$variant}-main-color)];
+
+      &.vc-status_outline {
+        @apply text-[color:var(--status-#{$variant}-main-color)] border border-solid border-[color:var(--status-#{$variant}-main-color)] bg-white;
+      }
+    }
+  }
+
+  &.vc-status_extended {
+    @apply whitespace-normal p-[var(--status-padding-extended)] rounded-[var(--status-border-radius-extended)];
+  }
+}
+</style>

package/components/atoms/vc-status-icon/vc-status-icon.vue

@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <template v-if="status">
+      <VcIcon icon="fas fa-check-circle" class="text-[color:#87b563]"></VcIcon>
+    </template>
+    <template v-else>
+      <VcIcon icon="fas fa-times-circle" class="text-[color:#bdd1df]"></VcIcon>
+    </template>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { VcIcon } from "@/components";
+
+defineProps({
+  status: {
+    type: Boolean,
+    default: false,
+  },
+});
+</script>

package/components/atoms/vc-switch/vc-switch.stories.ts

@@ -0,0 +1,27 @@
+/**
+ * Switch component.
+ * @author Iurii A Taranov <me@flanker72.ru>
+ */
+import { Story } from "@storybook/vue3";
+import VcSwitch from "./vc-switch.vue";
+import VcHint from "../vc-hint/vc-hint.vue";
+
+export default {
+  title: "atoms/vc-switch",
+  component: VcSwitch,
+};
+
+const Template: Story = (args) => ({
+  components: { VcSwitch, VcHint },
+  setup() {
+    return { args };
+  },
+  template: '<vc-switch v-bind="args"></vc-switch>',
+});
+
+export const Switch = Template.bind({});
+Switch.storyName = "vc-switch";
+Switch.args = {
+  checked: false,
+  disabled: false,
+};

package/components/atoms/vc-switch/vc-switch.vue

@@ -0,0 +1,100 @@
+<template>
+  <div>
+    <!-- Switch label -->
+    <VcLabel v-if="label" class="mb-2" :required="required">
+      <span>{{ label }}</span>
+    </VcLabel>
+    <div class="relative inline-block w-[54px] h-[18px]">
+      <label>
+        <input
+          type="checkbox"
+          class="vc-switch__input"
+          :checked="modelValue"
+          :disabled="disabled"
+          @input="onInput"
+        />
+        <span class="vc-switch__slider"></span>
+      </label>
+      <VcHint class="mt-2 w-max" v-if="tooltip">
+        {{ tooltip }}
+      </VcHint>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false,
+  },
+
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+
+  tooltip: {
+    type: String,
+    default: "",
+  },
+
+  required: {
+    type: Boolean,
+    default: false,
+  },
+
+  label: {
+    type: String,
+    default: undefined,
+  },
+});
+
+const emit = defineEmits(["update:modelValue"]);
+
+function onInput(e: InputEvent) {
+  const newValue = (e.target as HTMLInputElement).checked;
+  emit("update:modelValue", newValue);
+}
+</script>
+
+<style lang="scss">
+:root {
+  --switch-main-color: #43b0e6;
+  --switch-secondary-color: #565656;
+  --switch-transition: all 0.2s ease-in-out;
+  --switch-icon-transition: opacity 0.3s ease-in-out;
+  --switch-active-icon: url("data:image/svg+xml;utf8,<svg width='10' height='8' viewBox='0 0 10 8' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M3.73609 7.34288L0.161085 3.85628C-0.0536949 3.64681 -0.0536949 3.30718 0.161085 3.09769L0.938884 2.3391C1.15366 2.12961 1.50193 2.12961 1.71671 2.3391L4.125 4.68782L8.28329 0.657101C8.49807 0.447633 8.84634 0.447633 9.06112 0.657101L9.83892 1.41569C10.0537 1.62516 10.0537 1.96479 9.83892 2.17428L4.51391 7.3429C4.29911 7.55237 3.95087 7.55237 3.73609 7.34288Z' fill='white'/></svg>");
+  --switch-disabled-icon: url("data:image/svg+xml;utf8,<svg width='8' height='8' viewBox='0 0 8 8' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M5.51636 4L7.79068 1.72568C8.06977 1.44659 8.06977 0.994091 7.79068 0.714773L7.28523 0.209318C7.00614 -0.0697727 6.55364 -0.0697727 6.27432 0.209318L4 2.48364L1.72568 0.209318C1.44659 -0.0697727 0.994091 -0.0697727 0.714773 0.209318L0.209318 0.714773C-0.0697727 0.993864 -0.0697727 1.44636 0.209318 1.72568L2.48364 4L0.209318 6.27432C-0.0697727 6.55341 -0.0697727 7.00591 0.209318 7.28523L0.714773 7.79068C0.993864 8.06977 1.44659 8.06977 1.72568 7.79068L4 5.51636L6.27432 7.79068C6.55341 8.06977 7.00614 8.06977 7.28523 7.79068L7.79068 7.28523C8.06977 7.00614 8.06977 6.55364 7.79068 6.27432L5.51636 4Z' fill='white'/></svg>");
+}
+
+.vc-switch {
+  &__input {
+    @apply w-0 h-0 opacity-0;
+
+    &:checked + .vc-switch__slider:before {
+      @apply translate-x-[29px];
+    }
+
+    &:checked + .vc-switch__slider {
+      @apply bg-[color:var(--switch-main-color)] after:bg-[image:var(--switch-active-icon)] after:bg-[position:10px] after:bg-[length:10px_7px];
+    }
+
+    &:disabled + .vc-switch__slider {
+      @apply bg-[color:var(--switch-secondary-color)];
+    }
+  }
+
+  &__slider {
+    @apply absolute top-0 right-0 bottom-0 left-0 bg-[color:var(--switch-secondary-color)] rounded-[3px] cursor-pointer transition duration-200;
+
+    &:after {
+      @apply inline-block w-full h-full bg-[image:var(--switch-disabled-icon)] bg-[position:calc(100%-11px)] bg-no-repeat bg-[length:8px_8px] content-[""];
+    }
+
+    &:before {
+      @apply absolute bottom-px left-px flex justify-center items-center w-[23px] h-[16px] bg-white rounded-sm text-[color:#d2d2d2] text-[10px] transition duration-200 content-["|||"];
+    }
+  }
+}
+</style>

package/components/atoms/vc-widget/vc-widget.vue

@@ -0,0 +1,85 @@
+<template>
+  <div
+    class="vc-widget"
+    :class="{ 'vc-widget_disabled': disabled }"
+    @click="onClick"
+  >
+    <VcIcon
+      v-if="icon"
+      class="vc-widget__icon"
+      :icon="icon"
+      size="xxl"
+    ></VcIcon>
+    <div v-if="title" class="vc-widget__title">{{ title }}</div>
+    <div v-if="value !== undefined" class="vc-widget__value">{{ value }}</div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+const props = defineProps({
+  icon: {
+    type: String,
+    default: undefined,
+  },
+
+  title: {
+    type: String,
+    default: undefined,
+  },
+
+  value: {
+    type: [String, Number],
+    default: undefined,
+  },
+
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+const emit = defineEmits(["click"]);
+
+function onClick() {
+  if (!props.disabled) {
+    emit("click");
+  }
+}
+</script>
+
+<style lang="scss">
+.vc-widget {
+  @apply flex w-[100px] overflow-hidden p-5
+    box-border flex-col items-center
+    justify-center border-b border-solid
+    border-b-[#eaedf3] cursor-pointer bg-white
+    hover:bg-[#eff7fc];
+
+  &_disabled {
+    @apply cursor-default hover:bg-white;
+  }
+
+  &__icon {
+    @apply text-[#a9bfd2];
+  }
+
+  &_disabled &__icon {
+    @apply text-[#d2d4d7];
+  }
+
+  &__title {
+    @apply font-medium text-sm text-[#333333] mt-3 mb-1 mx-0;
+  }
+
+  &_disabled &__title {
+    @apply text-[#d2d4d7];
+  }
+
+  &__value {
+    @apply font-medium text-[22px] text-[#43b0e6];
+  }
+
+  &_disabled &__value {
+    @apply text-[#d2d4d7];
+  }
+}
+</style>

package/components/index.ts

@@ -0,0 +1,43 @@
+/* Atoms */
+export { default as VcBadge } from "./atoms/vc-badge/vc-badge.vue";
+export { default as VcButton } from "./atoms/vc-button/vc-button.vue";
+export { default as VcCard } from "./atoms/vc-card/vc-card.vue";
+export { default as VcCheckbox } from "./atoms/vc-checkbox/vc-checkbox.vue";
+export { default as VcCol } from "./atoms/vc-col/vc-col.vue";
+export { default as VcContainer } from "./atoms/vc-container/vc-container.vue";
+export { default as VcHint } from "./atoms/vc-hint/vc-hint.vue";
+export { default as VcIcon } from "./atoms/vc-icon/vc-icon.vue";
+export { default as VcInfoRow } from "./atoms/vc-info-row/vc-info-row.vue";
+export { default as VcImage } from "./atoms/vc-image/vc-image.vue";
+export { default as VcLabel } from "./atoms/vc-label/vc-label.vue";
+export { default as VcLink } from "./atoms/vc-link/vc-link.vue";
+export { default as VcLoading } from "./atoms/vc-loading/vc-loading.vue";
+export { default as VcProgress } from "./atoms/vc-progress/vc-progress.vue";
+export { default as VcRow } from "./atoms/vc-row/vc-row.vue";
+export { default as VcStatus } from "./atoms/vc-status/vc-status.vue";
+export { default as VcStatusIcon } from "./atoms/vc-status-icon/vc-status-icon.vue";
+export { default as VcSwitch } from "./atoms/vc-switch/vc-switch.vue";
+export { default as VcWidget } from "./atoms/vc-widget/vc-widget.vue";
+
+/* Molecules */
+export { default as VcBreadcrumbs } from "./molecules/vc-breadcrumbs/vc-breadcrumbs.vue";
+export { default as VcEditor } from "./molecules/vc-editor/vc-editor.vue";
+export { default as VcForm } from "./molecules/vc-form/vc-form.vue";
+export { default as VcFileUpload } from "./molecules/vc-file-upload/vc-file-upload.vue";
+export { default as VcInput } from "./molecules/vc-input/vc-input.vue";
+export { default as VcMultivalue } from "./molecules/vc-multivalue/vc-multivalue.vue";
+export { default as VcNotification } from "./molecules/vc-notification/vc-notification.vue";
+export { default as VcPagination } from "./molecules/vc-pagination/vc-pagination.vue";
+export { default as VcRating } from "./molecules/vc-rating/vc-rating.vue";
+export { default as VcSelect } from "./molecules/vc-select/vc-select.vue";
+export { default as VcSlider } from "./molecules/vc-slider/vc-slider.vue";
+export { default as VcTextarea } from "./molecules/vc-textarea/vc-textarea.vue";
+
+/* Organisms */
+export { default as VcApp } from "./organisms/vc-app/vc-app.vue";
+export { default as VcBlade } from "./organisms/vc-blade/vc-blade.vue";
+export { default as VcDynamicProperty } from "./organisms/vc-dynamic-property/vc-dynamic-property.vue";
+export { default as VcGallery } from "./organisms/vc-gallery/vc-gallery.vue";
+export { default as VcLoginForm } from "./organisms/vc-login-form/vc-login-form.vue";
+export { default as VcPopup } from "./organisms/vc-popup/vc-popup.vue";
+export { default as VcTable } from "./organisms/vc-table/vc-table.vue";

package/components/molecules/vc-breadcrumbs/_internal/vc-breadcrumbs-item/vc-breadcrumbs-item.vue

@@ -0,0 +1,103 @@
+<template>
+  <div
+    class="vc-breadcrumbs-item"
+    :class="{
+      'vc-breadcrumbs-item_current': current,
+    }"
+    @click="onClick"
+  >
+    <VcIcon
+      v-if="icon"
+      class="vc-breadcrumbs-item__icon"
+      :icon="icon"
+      size="s"
+    />
+    <div class="vc-breadcrumbs-item__title">
+      {{ title }}
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { VcIcon } from "@/components";
+
+const props = defineProps({
+  current: {
+    type: Boolean,
+    default: false,
+  },
+
+  icon: {
+    type: String,
+    default: undefined,
+  },
+
+  title: {
+    type: String,
+    default: undefined,
+  },
+
+  clickHandler: {
+    type: Function,
+    default: undefined,
+  },
+
+  id: {
+    type: String,
+    default: undefined,
+  },
+});
+
+const emit = defineEmits(["click"]);
+
+function onClick(): void {
+  if (!props.current) {
+    if (props.clickHandler && typeof props.clickHandler === "function") {
+      props.clickHandler(props.id);
+    } else {
+      emit("click");
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+:root {
+  --breadcrumbs-item-height: 28px;
+  --breadcrumbs-item-border-color: #a1c0d4;
+  --breadcrumbs-item-border-color-hover: #8fb0c6;
+  --breadcrumbs-item-border-color-current: #838d9a;
+  --breadcrumbs-item-color: #43b0e6;
+  --breadcrumbs-item-color-current: #465769;
+  --breadcrumbs-item-icon-color: #a1c0d4;
+}
+
+.vc-breadcrumbs-item {
+  @apply h-[var(--breadcrumbs-item-height)]
+  box-border rounded-[calc(var(--breadcrumbs-item-height)/2)]
+  border border-solid
+  border-[color:var(--breadcrumbs-item-border-color)]
+  text-[color:var(--breadcrumbs-item-color)]
+  whitespace-nowrap
+  px-3 mr-2
+  text-sm cursor-pointer inline-flex items-center
+  hover:border
+  hover:border-solid
+  hover:border-[color:var(--breadcrumbs-item-border-color-hover)];
+
+  &__icon {
+    @apply mr-2 text-[color:var(--breadcrumbs-item-icon-color)];
+  }
+
+  &_disabled {
+    @apply opacity-[0.4];
+  }
+
+  &_current,
+  &_current:hover {
+    @apply text-[color:var(--breadcrumbs-item-color-current)]
+    border border-solid border-[color:var(--breadcrumbs-item-border-color-current)]
+    cursor-default mr-0;
+  }
+}
+</style>

package/components/molecules/vc-breadcrumbs/vc-breadcrumbs.stories.ts

@@ -0,0 +1,39 @@
+/**
+ * Breadcrumbs component.
+ * @author Iurii A Taranov <me@flanker72.ru>
+ */
+import { Story } from "@storybook/vue3";
+import VcBreadcrumbs from "./vc-breadcrumbs.vue";
+
+export default {
+  title: "molecules/vc-breadcrumbs",
+  component: VcBreadcrumbs,
+};
+
+const Template: Story = (args) => ({
+  components: { VcBreadcrumbs },
+  setup() {
+    return { args };
+  },
+  template: '<vc-breadcrumbs v-bind="args"></vc-breadcrumbs>',
+});
+
+export const Breadcrumbs = Template.bind({});
+Breadcrumbs.storyName = "vc-breadcrumbs";
+Breadcrumbs.args = {
+  items: [
+    {
+      id: 0,
+      title: "Back",
+      icon: "fas fa-arrow-left",
+    },
+    {
+      id: 1,
+      title: "Electronics",
+    },
+    {
+      id: 2,
+      title: "Desktop",
+    },
+  ],
+};

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

@@ -0,0 +1,21 @@
+<template>
+  <div v-if="items" class="flex items-center flex-nowrap">
+    <VcBreadcrumbsItem
+      v-for="(item, i) in items"
+      :key="item.id"
+      v-bind="item"
+      :current="i === items.length - 1"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import VcBreadcrumbsItem from "./_internal/vc-breadcrumbs-item/vc-breadcrumbs-item.vue";
+
+defineProps({
+  items: {
+    type: Array,
+    default: () => [],
+  },
+});
+</script>