@vc-shell/framework 1.0.38 → 1.0.40

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

@@ -0,0 +1,222 @@
+<template>
+  <div
+    :class="[
+      'vc-container',
+      {
+        'vc-container_shadow': shadow && scroll,
+        'vc-container_nopadding': noPadding,
+      },
+    ]"
+    @touchstart="touchStart"
+    @touchmove="touchMove"
+    @touchend="touchEnd"
+  >
+    <div
+      ref="component"
+      class="vc-container__inner"
+      :style="{
+        transform: dist ? `translate3d(0, ${dist}px, 0)` : '',
+      }"
+    >
+      <div
+        class="vc-container__overscroll"
+        :class="{ 'vc-container__overscroll_passed': status === 'loosing' }"
+        :style="{ height: dist ? `${dist}px` : '0px' }"
+      >
+        <VcIcon
+          icon="fas fa-spinner"
+          :style="{ 'tw-font-size': `${dist / 2}px` }"
+          class="vc-container__overscroll-icon"
+        ></VcIcon>
+      </div>
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted, computed, nextTick } from "vue";
+const props = defineProps({
+  shadow: {
+    type: Boolean,
+    default: false,
+  },
+
+  noPadding: {
+    type: Boolean,
+    default: false,
+  },
+
+  usePtr: {
+    type: Boolean,
+    default: false,
+  },
+});
+const emit = defineEmits(["scroll:ptr", "scroll:infinite"]);
+const component = ref<HTMLElement>();
+const scroll = ref(false);
+const startY = ref(0);
+const ceiling = ref();
+const pullDist = ref(60);
+const dist = ref(0);
+const status = ref("normal");
+const delta = ref(0);
+
+onMounted(() => {
+  const observer = new ResizeObserver(() => {
+    scroll.value = (component.value &&
+      component.value.clientHeight < component.value.scrollHeight) as boolean;
+  });
+
+  if (component.value) {
+    observer.observe(component.value);
+  }
+});
+
+const touchable = computed(
+  () => status.value !== "refresh" && status.value !== "success"
+);
+
+const scrollTop = () => {
+  if (component.value) {
+    component.value.scroll(0, 0);
+  }
+};
+
+function touchStart(e: TouchEvent): void {
+  if (!touchable.value) {
+    return;
+  }
+  checkPullStart(e);
+}
+
+function touchMove(e: TouchEvent): void {
+  if (props.usePtr) {
+    const touch = e.touches[0];
+    if (!touchable.value) {
+      return;
+    }
+
+    if (!ceiling.value) {
+      checkPullStart(e);
+    }
+
+    delta.value = touch.clientY - startY.value;
+
+    if (ceiling.value && delta.value >= 0 && delta.value < 80) {
+      e.preventDefault();
+
+      setStatus(ease(delta.value));
+    }
+  }
+}
+
+function touchEnd(): void {
+  if (delta.value && touchable.value) {
+    if (status.value === "loosing") {
+      nextTick(() => emit("scroll:ptr"));
+    }
+    setStatus(0);
+  }
+}
+
+function getScrollTop(el: HTMLElement) {
+  const top = el.scrollTop;
+
+  return Math.max(top, 0);
+}
+
+function checkPullStart(e: TouchEvent) {
+  ceiling.value = getScrollTop(component.value as HTMLElement) === 0;
+
+  if (ceiling.value) {
+    startY.value = e.touches[0].clientY;
+  }
+}
+
+function setStatus(distance: number) {
+  let stat;
+  if (distance === 0) {
+    stat = "normal";
+  } else {
+    stat = distance < pullDist.value ? "pulling" : "loosing";
+  }
+  dist.value = distance;
+  if (stat !== status.value) {
+    status.value = stat;
+  }
+}
+
+function ease(distance: number) {
+  const pullDistance = +pullDist.value;
+  if (distance > pullDistance) {
+    if (distance < pullDistance * 2) {
+      distance = pullDistance + (distance - pullDistance) / 2;
+    } else {
+      distance = pullDistance * 1.5 + (distance - pullDistance * 2) / 4;
+    }
+  }
+  return Math.round(distance);
+}
+
+defineExpose({
+    scrollTop,
+    component,
+});
+</script>
+
+<style lang="scss">
+:root {
+  --container-scroll-color: #e1eff9;
+  --container-scroll-color-hover: #cce4f5;
+  --container-scroll-width: 8px;
+  --container-scroll-padding: 8px;
+  --container-scroll-shadow: 0 3px 2px rgba(0, 0, 0, 0.1) inset,
+    0 -3px 2px rgba(0, 0, 0, 0.1) inset;
+}
+
+.vc-container {
+  @apply tw-w-full tw-h-full tw-overflow-hidden tw-box-border tw-flex tw-flex-col tw-relative;
+
+  &_shadow {
+    @apply tw-shadow-[0_3px_2px_rgba(0,0,0,0.1)_inset];
+  }
+
+  &__overscroll {
+    @apply tw-relative tw-w-full tw-flex tw-items-start tw-justify-center tw-overflow-hidden;
+
+    &-icon {
+      @apply tw-text-[color:#a1c0d4] tw-animate-spin;
+    }
+
+    &_passed &-icon {
+      @apply tw-text-[#43b0e6];
+    }
+  }
+
+  &__inner {
+    @apply tw-relative tw-overflow-y-auto tw-overflow-x-hidden
+    tw-flex-1 tw-p-[var(--container-scroll-padding)]
+     tw-transition-transform [scrollbar-color:var(--container-scroll-color)] [scrollbar-width:thin];
+
+    &::-webkit-scrollbar {
+      @apply tw-w-[var(--container-scroll-width)] tw-bg-transparent;
+    }
+
+    &::-webkit-scrollbar-track {
+      @apply tw-bg-transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      @apply tw-bg-[color:var(--container-scroll-color)]
+      tw-rounded-[calc(var(--container-scroll-width)/2)]
+      tw-overflow-x-hidden
+      hover:tw-bg-[color:var(--container-scroll-color-hover)];
+    }
+  }
+
+  &_nopadding &__inner {
+    @apply tw-p-0;
+  }
+}
+</style>

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

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

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

@@ -0,0 +1,11 @@
+<template>
+  <div class="tw-text-[color:var(--hint-color)] tw-text-xs">
+    <slot></slot>
+  </div>
+</template>
+
+<style lang="scss">
+:root {
+  --hint-color: #a5a5a5;
+}
+</style>

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

@@ -0,0 +1,32 @@
+/**
+ * Icon component.
+ * @author Iurii A Taranov <me@flanker72.ru>
+ */
+import { Story } from "@storybook/vue3";
+import VcIcon from "./vc-icon.vue";
+
+export default {
+  title: "atoms/vc-icon",
+  component: VcIcon,
+  argTypes: {
+    size: {
+      options: ["xs", "s", "m", "l", "xl"],
+      control: { type: "radio" },
+    },
+  },
+};
+
+const Template: Story = (args) => ({
+  components: { VcIcon },
+  setup() {
+    return { args };
+  },
+  template: '<vc-icon v-bind="args"></vc-icon>',
+});
+
+export const Icon = Template.bind({});
+Icon.storyName = "vc-icon";
+Icon.args = {
+  icon: "fas fa-star",
+  size: "m",
+};

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

@@ -0,0 +1,36 @@
+<template>
+  <i :class="`vc-icon vc-icon_${size} ${icon.toLowerCase()}`" />
+</template>
+
+<script lang="ts" setup>
+export interface Props {
+  icon?: string;
+  size?: "xs" | "s" | "m" | "l" | "xl" | "xxl";
+}
+
+withDefaults(defineProps<Props>(), {
+  icon: "fas fa-square-full",
+  size: "m",
+});
+</script>
+
+<style lang="scss">
+:root {
+  --icon-size-xs: 12px;
+  --icon-size-s: 14px;
+  --icon-size-m: 18px;
+  --icon-size-l: 20px;
+  --icon-size-xl: 22px;
+  --icon-size-xxl: 30px;
+}
+
+$sizes: xs, s, m, l, xl, xxl;
+
+.vc-icon {
+  @each $size in $sizes {
+    &_#{$size} {
+      @apply tw-text-[length:var(--icon-size-#{$size})];
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,40 @@
+/**
+ * Image component.
+ * @author Iurii A Taranov <me@flanker72.ru>
+ */
+import { Story } from "@storybook/vue3";
+import VcImage from "./vc-image.vue";
+
+export default {
+  title: "atoms/vc-image",
+  component: VcImage,
+  argTypes: {
+    aspect: {
+      options: ["1x1", "3x2", "4x3", "16x9"],
+      control: { type: "radio" },
+    },
+    size: {
+      options: ["auto", "xs", "s", "m", "l", "xl"],
+      control: { type: "radio" },
+    },
+  },
+};
+
+const Template: Story = (args) => ({
+  components: { VcImage },
+  setup() {
+    return { args };
+  },
+  template:
+    '<div style="width: 400px"><vc-image v-bind="args"></vc-image></div>',
+});
+
+export const Image = Template.bind({});
+Image.storyName = "vc-image";
+Image.args = {
+  aspect: "1x1",
+  rounded: false,
+  clickable: false,
+  src: "https://placekitten.com/800/600",
+  size: "auto",
+};

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

@@ -0,0 +1,122 @@
+<template>
+  <div class="vc-image" :class="[`vc-image_${size}`]">
+    <div
+      :class="[
+        `vc-image_${aspect}`,
+        {
+          'tw-rounded-full tw-pb-[var(--image-padding-bottom-1x1)]': rounded,
+          'tw-rounded-[3px] tw-border tw-border-solid tw-border-[color:#efefef]': bordered,
+          'tw-cursor-pointer': clickable,
+        },
+        'tw-relative',
+      ]"
+      :style="imageHandler"
+      @click="onClick"
+    >
+      <div
+        v-if="!src"
+        class="tw-absolute tw-w-full tw-h-full tw-flex tw-items-center tw-justify-center tw-text-[#83a3be]"
+      >
+        <VcIcon icon="fas fa-image" size="xl"></VcIcon>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from "vue";
+
+const props = defineProps({
+  aspect: {
+    type: String,
+    default: "1x1",
+  },
+
+  rounded: {
+    type: Boolean,
+    default: false,
+  },
+
+  bordered: {
+    type: Boolean,
+    default: false,
+  },
+
+  clickable: {
+    type: Boolean,
+    default: false,
+  },
+
+  src: {
+    type: String,
+    default: undefined,
+  },
+
+  size: {
+    type: String,
+    default: "auto",
+  },
+
+  background: {
+    type: String,
+    default: "cover",
+  },
+});
+
+const emit = defineEmits(["click"]);
+
+const imageHandler = computed(() => {
+  if (props.src) {
+    return `background: url(${encodeURI(props.src)}) center / ${
+      props.background
+    } no-repeat`;
+  }
+  return undefined;
+});
+
+function onClick(): void {
+  if (props.clickable) {
+    emit("click");
+  }
+}
+</script>
+
+<style lang="scss">
+:root {
+  --image-size-xs: 32px;
+  --image-size-s: 48px;
+  --image-size-m: 64px;
+  --image-size-l: 96px;
+  --image-size-xl: 128px;
+  --image-size-xxl: 145px;
+}
+
+$aspects: (
+  1x1: 100%,
+  16x9: 56.25%,
+  4x3: 75%,
+  3x2: 66.66%,
+);
+
+$paddings: xs, s, m, l, xl, xxl;
+
+.vc-image {
+  @apply tw-inline-block tw-relative;
+
+  @each $name, $aspect in $aspects {
+    &_#{$name} {
+      @apply tw-pb-[#{$aspect}];
+    }
+  }
+
+  @each $padding in $paddings {
+    &_#{$padding} {
+      @apply tw-w-[var(--image-size-#{$padding})];
+    }
+  }
+
+  &_auto {
+    @apply tw-w-full;
+  }
+}
+</style>

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

@@ -0,0 +1,42 @@
+<template>
+  <div class="tw-mb-[11px] last-of-type:tw-mb-0">
+    <VcRow>
+      <VcCol>
+        <VcLabel>
+          <span>{{ label }}</span>
+          <template v-if="tooltip" v-slot:tooltip>{{ tooltip }}</template>
+        </VcLabel>
+      </VcCol>
+      <VcCol size="2">
+        <p class="tw-m-0" v-if="type === 'default'">{{ value }}</p>
+        <VcLink v-else-if="type === 'email'">{{ value }}</VcLink>
+      </VcCol>
+    </VcRow>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { VcLabel, VcRow, VcCol } from "@/ui/components";
+
+defineProps({
+  label: {
+    type: String,
+    default: "",
+  },
+
+  value: {
+    type: String,
+    default: "",
+  },
+
+  tooltip: {
+    type: String,
+    default: "",
+  },
+
+  type: {
+    type: String,
+    default: "default",
+  },
+});
+</script>

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

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

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

@@ -0,0 +1,49 @@
+<template>
+  <div class= "tw-flex tw-flex-nowrap tw-font-bold">
+    <span><slot></slot></span>
+    <span v-if="required" class="tw-text-[color:var(--label-required-color)] tw-ml-1"
+      >*</span
+    >
+    <span v-if="$slots['tooltip']" class="tw-grow tw-basis-0 tw-ml-1">
+      <VcIcon
+        class="tw-text-[color:var(--label-tooltip-color)]"
+        :icon="tooltipIcon"
+        size="s"
+        @mouseenter="tooltipVisible = true"
+        @mouseleave="tooltipVisible = false"
+      ></VcIcon>
+      <span
+        class="tw-absolute tw-z-10 tw-bg-white tw-border tw-border-solid tw-border-[color:#eef0f2] tw-shadow-[1px_1px_8px_rgba(126,142,157,0.25)] tw-rounded-[3px] tw-text-[color:#8e9daa] tw-font-normal tw-py-1 tw-px-2 tw-ml-4"
+        v-if="tooltipVisible"
+      >
+        <slot name="tooltip"></slot>
+      </span>
+    </span>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { VcIcon } from "@/ui/components";
+import { ref } from "vue";
+
+defineProps({
+  required: {
+    type: Boolean,
+    default: false,
+  },
+
+  tooltipIcon: {
+    type: String,
+    default: "fas fa-info-circle",
+  },
+});
+
+const tooltipVisible = ref(false);
+</script>
+
+<style lang="scss">
+:root {
+  --label-required-color: #f14e4e;
+  --label-tooltip-color: #d3e0ee;
+}
+</style>

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

@@ -0,0 +1,30 @@
+/**
+ * Link component.
+ * @author Iurii A Taranov <me@flanker72.ru>
+ */
+import { Story } from "@storybook/vue3";
+import VcLink from "./vc-link.vue";
+
+export default {
+  title: "atoms/vc-link",
+  component: VcLink,
+  argTypes: {
+    click: { action: "click", name: "click" },
+  },
+};
+
+const Template: Story = (args) => ({
+  components: { VcLink },
+  setup() {
+    return { args };
+  },
+  template: '<vc-link v-bind="args">This is a link</vc-link>',
+});
+
+export const Link = Template.bind({});
+Link.storyName = "vc-link";
+Link.args = {
+  to: undefined,
+  active: false,
+  disabled: false,
+};

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

@@ -0,0 +1,46 @@
+<template>
+  <div
+    class="vc-link"
+    :class="{
+      'tw-text-[color:var(--link-text-color-active)] tw-no-underline': active,
+      'tw-cursor-not-allowed tw-text-[color:var(--link-text-color-disabled)] hover:tw-text-[color:var(--link-text-color-disabled)] tw-no-underline':
+        disabled,
+    }"
+    @click="onClick"
+  >
+    <slot></slot>
+  </div>
+</template>
+
+<script lang="ts" setup>
+const props = defineProps({
+  active: {
+    type: Boolean,
+    default: false,
+  },
+
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+const emit = defineEmits(["click"]);
+function onClick(): void {
+  if (!props.disabled) {
+    emit("click");
+  }
+}
+</script>
+
+<style lang="scss">
+:root {
+  --link-text-color: hsl(200, 77%, 58%);
+  --link-text-color-hover: hsl(200, 77%, 48%);
+  --link-text-color-active: hsl(200, 77%, 48%);
+  --link-text-color-disabled: hsl(200, 77%, 73%);
+}
+
+.vc-link {
+  @apply tw-text-[color:var(--link-text-color)] tw-no-underline tw-cursor-pointer tw-transition  tw-duration-200 tw-inline-block hover:tw-text-[color:var(--link-text-color-hover)] hover:tw-underline;
+}
+</style>