@vc-shell/framework 1.0.38 → 1.0.40

package/ui/components/atoms/vc-button/vc-button.vue

@@ -0,0 +1,219 @@
+<template>
+  <button
+    class="vc-button"
+    :class="[
+      `vc-button_${variant}`,
+      {
+        'vc-button_small': small,
+        'vc-button_outline': outline,
+        'vc-button_selected': selected,
+      },
+    ]"
+    @click="onClick"
+    :disabled="disabled"
+  >
+    <VcIcon
+      v-if="icon"
+      class="vc-button__icon"
+      :icon="icon"
+      :size="small ? 'xs' : 's'"
+    ></VcIcon>
+    <span v-if="$slots['default']" class="vc-button__title">
+      <slot></slot>
+    </span>
+  </button>
+</template>
+
+<script lang="ts" setup>
+import { VcIcon } from "@/ui/components";
+
+const props = defineProps({
+  icon: {
+    type: String,
+    default: undefined,
+  },
+
+  variant: {
+    type: String,
+    enum: ["primary", "secondary", "special", "danger", "widget", "onlytext"],
+    default: "primary",
+  },
+
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+
+  small: {
+    type: Boolean,
+    default: false,
+  },
+
+  outline: {
+    type: Boolean,
+    default: false,
+  },
+
+  selected: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(["click"]);
+
+function onClick(e: Event): void {
+  if (!props.disabled) {
+    e.preventDefault();
+    emit("click", e);
+  }
+}
+</script>
+
+<style lang="scss">
+:root {
+  --button-primary-background-color: #41afe6;
+  --button-primary-background-color-hover: #319ed4;
+  --button-primary-background-color-active: #319ed4;
+  --button-primary-background-color-disabled: #a9ddf6;
+
+  --button-primary-text-color: #ffffff;
+  --button-primary-text-color-hover: #ffffff;
+  --button-primary-text-color-active: #ffffff;
+  --button-primary-text-color-disabled: #ffffff;
+
+  --button-secondary-background-color: #ffffff;
+  --button-secondary-background-color-hover: #ffffff;
+  --button-secondary-background-color-active: #ffffff;
+  --button-secondary-background-color-disabled: #ffffff;
+
+  --button-secondary-border-color: #43b0e6;
+  --button-secondary-border-color-hover: #319ed4;
+  --button-secondary-border-color-active: #319ed4;
+  --button-secondary-border-color-disabled: #a9ddf6;
+
+  --button-secondary-text-color: #43b0e6;
+  --button-secondary-text-color-hover: #319ed4;
+  --button-secondary-text-color-active: #319ed4;
+  --button-secondary-text-color-disabled: #a9ddf6;
+
+  --button-special-background-color: #f89406;
+  --button-special-background-color-hover: #eb8b03;
+  --button-special-background-color-active: #eb8b03;
+  --button-special-background-color-disabled: #fed498;
+
+  --button-danger-background-color: #ff4a4a;
+  --button-danger-background-color-hover: #d73a3a;
+  --button-danger-background-color-active: #d73a3a;
+  --button-danger-background-color-disabled: #ff5e5e;
+
+  --button-special-text-color: #ffffff;
+  --button-special-text-color-hover: #ffffff;
+  --button-special-text-color-active: #ffffff;
+  --button-special-text-color-disabled: #ffffff;
+
+  --button-widget-background-color: #ffffff;
+  --button-widget-background-color-hover: #f2faff;
+  --button-widget-background-color-active: #eaf6ff;
+  --button-widget-background-color-disabled: #fafafa;
+
+  --button-widget-border-color: #eaedf3;
+  --button-widget-border-color-hover: #d3e2ec;
+  --button-widget-border-color-active: #deecf4;
+
+  --button-border-radius: 3px;
+  --button-padding: 14px;
+  --button-padding-small: 12px;
+  --button-height: 36px;
+  --button-height-small: 28px;
+}
+
+$variants: primary, secondary, special, danger, widget;
+
+.vc-button {
+  @apply tw-inline-flex tw-items-center tw-font-medium tw-text-sm tw-cursor-pointer tw-box-border tw-transition  tw-duration-200 tw-rounded-[var(--button-border-radius)] tw-px-[var(--button-padding)] tw-h-[var(--button-height)];
+
+  &__icon + &__title {
+    @apply tw-ml-2;
+  }
+
+  @each $variant in $variants {
+    &_#{$variant} {
+      @apply tw-bg-[color:var(--button-#{$variant}-background-color)]
+      tw-text-left
+      tw-text-[color:var(--button-#{$variant}-text-color)]
+      tw-border tw-border-solid tw-border-[color:var(--button-#{$variant}-background-color)]
+      hover:tw-bg-[color:var(--button-#{$variant}-background-color-hover)]
+      hover:tw-text-[color:var(--button-#{$variant}-text-color-hover)]
+      hover:tw-border-[color:var(--button-#{$variant}-background-color-hover)]
+      focus:tw-bg-[color:var(--button-#{$variant}-background-color-active)]
+      focus:tw-text-[color:var(--button-#{$variant}-text-color-active)]
+      focus:tw-bg-[color:var(--button-#{$variant}-background-color-active)]
+      disabled:tw-cursor-not-allowed
+      disabled:tw-bg-[color:var(--button-#{$variant}-background-color-disabled)]
+      disabled:tw-text-[color:var(--button-#{$variant}-text-color-disabled)]
+      disabled:tw-border-[color:var(--button-#{$variant}-background-color-disabled)];
+    }
+  }
+
+  &_widget {
+    @apply tw-h-auto tw-border-[color:var(--button-widget-border-color)]
+    tw-shadow-[1px_4px_10px_rgba(197,206,214,0.24)]
+    tw-rounded-[4px]
+    tw-p-[15px]
+    tw-border-[color:var(--button-widget-background-color)]
+    hover:tw-bg-[color:var(--button-widget-background-color-hover)]
+    focus:tw-bg-[color:var(--button-widget-background-color-active)]
+    focus:tw-border-[color:var(--button-widget-border-color-active)]
+    disabled:tw-cursor-not-allowed
+    disabled:tw-bg-[color:var(--button-widget-background-color-disabled)]
+    disabled:tw-border-[color:var(--button-widget-background-color-disabled)];
+
+    .vc-button__icon {
+      @apply tw-text-[30px] tw-text-[color:#a9bfd2];
+    }
+  }
+
+  &_small {
+    @apply tw-h-[var(--button-height-small)]
+      tw-px-[var(--button-padding-small)]
+      tw-font-normal
+      tw-text-xs;
+
+    .vc-button__icon + .vc-button__title {
+      @apply tw-ml-1;
+    }
+  }
+
+  &_outline {
+    @apply tw-bg-transparent
+    tw-text-[color:var(--button-secondary-text-color)]
+    tw-border-[color:var(--button-secondary-border-color)]
+    hover:tw-text-[color:var(--button-secondary-text-color-hover)]
+    hover:tw-border-[color:var(--button-secondary-border-color-hover)]
+    hover:tw-bg-transparent
+    focus:tw-text-[color:var(--button-secondary-text-color-hover)]
+    focus:tw-border-[color:var(--button-secondary-border-color-active)]
+    focus:tw-bg-transparent
+    disabled:tw-cursor-not-allowed
+    disabled:tw-text-[color:var(--button-secondary-text-color-disabled)]
+    disabled:tw-border-[color:var(--button-secondary-border-color-disabled)]
+    disabled:tw-bg-transparent;
+  }
+
+  &_onlytext {
+    @apply tw-text-[color:var(--button-secondary-text-color)]
+    tw-p-0 tw-border-none tw-bg-transparent tw-h-auto
+    hover:tw-bg-transparent
+    hover:tw-text-[color:var(--button-secondary-text-color-hover)]
+    focus:tw-bg-transparent
+    focus:tw-text-[color:var(--button-secondary-text-color-hover)];
+  }
+
+  &_selected {
+    &.vc-button_widget {
+      @apply tw-bg-[color:var(--button-widget-background-color-hover)];
+    }
+  }
+}
+</style>

package/ui/components/atoms/vc-card/vc-card.vue

@@ -0,0 +1,137 @@
+<template>
+  <div
+    class="vc-card"
+    :class="[{ 'vc-card_collapsable': isCollapsable }, `vc-card_${variant}`]"
+  >
+    <div class="vc-card__header" v-if="header" @click="onHeaderClick">
+      <VcIcon v-if="icon" class="vc-card__icon" :icon="icon" size="xl"></VcIcon>
+      <div class="vc-card__title">{{ header }}</div>
+      <div v-if="$slots['actions']" class="vc-card__actions">
+        <slot name="actions"></slot>
+      </div>
+      <VcIcon
+        v-if="isCollapsable"
+        class="vc-card__collapse"
+        :icon="`fas fa-chevron-${isCollapsedInternal ? 'down' : 'up'}`"
+        size="s"
+      ></VcIcon>
+    </div>
+    <transition name="fade">
+      <div
+        :class="[{ 'vc-flex': fill }, 'vc-card__body']"
+        v-show="!isCollapsedInternal"
+      >
+        <slot></slot>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue";
+const props = defineProps({
+  header: {
+    type: String,
+    default: undefined,
+  },
+
+  icon: {
+    type: String,
+    default: undefined,
+  },
+
+  isCollapsable: {
+    type: Boolean,
+    default: false,
+  },
+
+  isCollapsed: {
+    type: Boolean,
+    default: false,
+  },
+
+  fill: {
+    type: Boolean,
+    default: false,
+  },
+
+  variant: {
+    type: String,
+    enum: ["default", "success", "danger"],
+    default: "default",
+  },
+});
+const emit = defineEmits(["header:click", "state:collapsed"]);
+const isCollapsedInternal = ref(props.isCollapsed);
+
+function onHeaderClick() {
+  if (props.isCollapsable) {
+    isCollapsedInternal.value = !isCollapsedInternal.value;
+    emit("state:collapsed", isCollapsedInternal.value);
+  }
+  emit("header:click");
+}
+</script>
+
+<style lang="scss">
+:root {
+  --card-background: #ffffff;
+  --card-border-radius: 6px;
+  --card-box-shadow: 1px 1px 7px rgba(126, 142, 157, 0.15);
+  --card-header-background: #f4f8fb;
+  --card-header-color: #83a3be;
+
+  --card-header-background-success: #e9f7df;
+  --card-header-background-danger: #ffe6e6;
+
+  --card-header-color-success: #99c17a;
+  --card-header-color-danger: #f34747;
+}
+
+$variants: success, danger;
+
+.vc-card {
+  @apply tw-bg-[color:var(--card-background)] tw-border
+  tw-border-[color:#eef0f2] tw-border-solid tw-box-border
+  tw-shadow-[1px_1px_7px_rgba(126,142,157,0.15)]
+  tw-rounded-[var(--card-border-radius)] tw-overflow-hidden
+  tw-flex-grow tw-flex tw-flex-col;
+
+  &__header {
+    @apply tw-bg-[color:var(--card-header-background)] tw-px-4 tw-py-3 tw-flex tw-items-center tw-content-between tw-w-full tw-box-border;
+  }
+
+  &_collapsable &__header {
+    @apply tw-cursor-pointer;
+  }
+
+  &__title {
+    @apply tw-uppercase tw-flex-grow
+   tw-text-[color:var(--card-header-color)]
+   tw-text-base tw-font-bold tw-uppercase;
+  }
+
+  &__icon {
+    @apply tw-text-[color:var(--card-header-color)] tw-mr-3;
+  }
+
+  &__collapse {
+    @apply tw-text-[color:var(--card-header-color)] tw-ml-3;
+  }
+
+  &__body {
+    @apply tw-flex-grow tw-box-border;
+  }
+
+  @each $variant in $variants {
+    &_#{$variant} {
+      .vc-card__header {
+        @apply tw-bg-[color:var(--card-header-background-#{$variant})];
+      }
+      .vc-card__title {
+        @apply tw-text-[color:var(--card-header-color-#{$variant})];
+      }
+    }
+  }
+}
+</style>

package/ui/components/atoms/vc-checkbox/vc-checkbox.stories.ts

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

package/ui/components/atoms/vc-checkbox/vc-checkbox.vue

@@ -0,0 +1,130 @@
+<template>
+  <div class="vc-checkbox" :class="{ 'vc-checkbox_disabled': disabled }">
+    <label class="vc-checkbox__label">
+      <input
+        type="checkbox"
+        class="vc-checkbox__input"
+        :checked="modelValue"
+        :disabled="disabled"
+        @change="onChange"
+      />
+      <span class="vc-checkbox__checkmark"></span>
+      <span v-if="$slots['default']" class="tw-ml-2">
+        <slot></slot>
+      </span>
+      <span
+        v-if="required"
+        class="tw-text-[color:var(--checkbox-required-color)] tw-ml-1"
+        >*</span
+      >
+    </label>
+
+    <slot v-if="errorMessage" name="error">
+      <VcHint class="vc-checkbox__error tw-mt-1">
+        {{ errorMessage }}
+      </VcHint>
+    </slot>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { watch } from "vue";
+
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false,
+  },
+
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+
+  required: {
+    type: Boolean,
+    default: false,
+  },
+
+  name: {
+    type: String,
+    default: "Field",
+  },
+
+  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 onChange(e: InputEvent) {
+  const newValue = (e.target as HTMLInputElement).checked;
+  emit("update:modelValue", newValue);
+}
+</script>
+
+<style lang="scss">
+:root {
+  --checkbox-size: 14px;
+  --checkbox-border-radius: 2px;
+  --checkbox-background-color: #ffffff;
+  --checkbox-image: url("data:image/svg+xml;utf8,<svg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='0.8' y='0.8' width='12.4' height='12.4' rx='1.7' stroke='%23ABC0D3' stroke-width='1.6'/></svg>");
+  --checkbox-image-checked: url("data:image/svg+xml;utf8,<svg width='15' height='14' viewBox='0 0 15 14' fill='none' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M11.91 2.49661C12.4736 1.9331 13.3872 1.9331 13.9507 2.49661C14.5142 3.06011 14.5142 3.97374 13.9507 4.53725L7.7195 10.7684C7.52877 10.9592 7.29793 11.0853 7.05413 11.147C6.56096 11.2966 6.00345 11.1765 5.61355 10.7866L3.27419 8.44723C2.71069 7.88372 2.71069 6.97009 3.27419 6.40659C3.8377 5.84308 4.75133 5.84308 5.31484 6.40658L6.65745 7.7492L11.91 2.49661Z' fill='%23ABC0D3'/><path fill-rule='evenodd' clip-rule='evenodd' d='M2.85185 0C1.27682 0 0 1.27682 0 2.85185V11.1481C0 12.7232 1.27682 14 2.85185 14H11.1481C12.7232 14 14 12.7232 14 11.1481V7.25926H12.4444V11.1481C12.4444 11.8641 11.8641 12.4444 11.1481 12.4444H2.85185C2.13593 12.4444 1.55556 11.8641 1.55556 11.1481V2.85185C1.55556 2.13593 2.13593 1.55556 2.85185 1.55556H11.1481C11.474 1.55556 11.7718 1.6758 11.9996 1.87434L13.3636 1.05592C12.8407 0.411698 12.0425 0 11.1481 0H2.85185Z' fill='%23ABC0D3'/></svg>");
+  --checkbox-color-error: #f14e4e;
+  --checkbox-required-color: #f14e4e;
+}
+
+.vc-checkbox {
+  &__label {
+    @apply tw-inline-flex tw-select-none tw-cursor-pointer tw-text-base tw-items-center;
+  }
+
+  &__input {
+    @apply tw-absolute tw-opacity-0 tw-z-[-1] tw-m-0;
+  }
+
+  &__error {
+    --hint-color: var(--checkbox-color-error);
+  }
+
+  &__checkmark {
+    @apply tw-h-[var(--checkbox-size)];
+
+    &:before {
+      @apply tw-inline-block tw-box-border
+      tw-w-[var(--checkbox-size)]
+      tw-h-[var(--checkbox-size)]
+      tw-shrink-0
+      tw-grow-0
+      tw-rounded-[var(--checkbox-border-radius)]
+      tw-bg-no-repeat
+      tw-bg-left-top
+      tw-bg-[length:auto_var(--checkbox-size)]
+      tw-bg-[color:var(--checkbox-background-color)]
+      tw-bg-[image:var(--checkbox-image)]
+      tw-content-[""];
+    }
+  }
+
+  &__input:checked ~ &__checkmark:before {
+    @apply tw-bg-[image:var(--checkbox-image-checked)];
+  }
+
+  &_disabled &__checkmark:before {
+    @apply tw-bg-[#fafafa];
+  }
+
+  &_disabled &__label {
+    @apply tw-cursor-auto;
+  }
+}
+</style>

package/ui/components/atoms/vc-col/vc-col.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="vc-col tw-flex tw-flex-col tw-min-w-0 tw-basis-0" :style="{ flexGrow: size }">
+    <slot></slot>
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineProps({
+  size: {
+    type: String,
+    default: "1",
+  },
+});
+</script>
+
+<style lang="scss">
+.vc-col {
+  .vc-app_mobile & {
+    @apply tw-grow #{!important};
+  }
+}
+</style>

package/ui/components/atoms/vc-container/vc-container.stories.ts

@@ -0,0 +1,31 @@
+/**
+ * Container component.
+ * @author Iurii A Taranov <me@flanker72.ru>
+ */
+import { Story } from "@storybook/vue3";
+import VcContainer from "./vc-container.vue";
+
+export default {
+  title: "atoms/vc-container",
+  component: VcContainer,
+};
+
+const Template: Story = (args) => ({
+  components: { VcContainer },
+  setup() {
+    return { args };
+  },
+  template: `<div style="width: 400px; height: 300px"><vc-container v-bind="args">
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus pellentesque tortor id lacus viverra, ut mollis libero auctor. Curabitur viverra, justo eu convallis pulvinar, dui nisi luctus quam, ut egestas tortor dolor quis nisi. Sed dignissim tellus ac enim dignissim dapibus. Duis vitae ipsum sit amet leo ornare fringilla sit amet a felis. Quisque finibus elementum dolor eu rhoncus. Donec dapibus non nisl blandit lobortis. Suspendisse pellentesque elit nunc, at auctor orci dignissim sed. Cras malesuada nibh id porttitor hendrerit.</p>
+    <p>Maecenas ut malesuada risus, a euismod ligula. Mauris fringilla arcu a vestibulum varius. Phasellus et quam facilisis, egestas magna ut, ultrices est. Maecenas accumsan sit amet metus sit amet laoreet. Sed at accumsan orci, id tincidunt nibh. Nam laoreet eu nisl a condimentum. Fusce ac blandit justo. Vestibulum sollicitudin eros euismod, cursus arcu ac, blandit eros. Phasellus tempor mi et iaculis pulvinar. Cras blandit, tortor sit amet fermentum aliquet, metus ipsum ultricies est, eu congue dui nunc nec ligula.</p>
+    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque porttitor felis non turpis volutpat, ut consequat nulla vestibulum. Donec ipsum dui, convallis a faucibus eget, vehicula faucibus quam. Maecenas et velit odio. Suspendisse posuere faucibus est vel condimentum. Mauris et est placerat risus tincidunt rutrum. Sed venenatis nunc a mollis dignissim. Nam felis nisl, blandit in venenatis et, sollicitudin ut eros. Quisque ornare lacus metus, sed placerat lacus malesuada et. Sed venenatis, turpis in porta suscipit, libero ex tristique erat, nec pretium lectus justo malesuada dolor.</p>
+    <p>Vivamus non nisi quis elit pellentesque pharetra quis eget augue. Donec tincidunt nunc id placerat tincidunt. Mauris ultrices quam id risus sodales, at euismod mauris convallis. Morbi quis aliquam nibh. Cras vitae mi a risus dapibus lacinia sit amet eu erat. Morbi ligula ex, aliquet ac nunc a, tempus lacinia lacus. Integer pretium arcu augue, vitae egestas libero rutrum eu.</p>
+    <p>Suspendisse malesuada nisl tempor tellus ullamcorper, ut varius enim molestie. Suspendisse eleifend at libero id ultricies. Duis sagittis quis metus eget condimentum. Praesent iaculis viverra mauris et mattis. Pellentesque cursus, turpis sed venenatis volutpat, nibh tortor eleifend eros, non varius neque lectus ut dolor. Sed eget lectus et risus hendrerit molestie. Cras lorem enim, rutrum sed pellentesque in, tristique et diam. Donec aliquet dolor sit amet cursus facilisis. Donec a placerat nibh.</p>
+  </vc-container></div>`,
+});
+
+export const Container = Template.bind({});
+Container.storyName = "vc-container";
+Container.args = {
+  shadow: false,
+};