@vc-shell/framework 1.0.38 → 1.0.40

package/ui/components/organisms/vc-gallery/vc-gallery.vue

@@ -0,0 +1,186 @@
+<template>
+  <div class="vc-gallery">
+    <VcLabel
+      v-if="label"
+      :tooltip="tooltip"
+      :required="required"
+      :tooltip-icon="tooltipIcon"
+    >
+      {{ label }}
+    </VcLabel>
+
+    <template v-if="(images && images.length) || !disabled">
+      <div class= "tw-flex tw-flex-wrap">
+        <draggable
+          :list="images"
+          class= "tw-flex tw-flex-wrap tw-w-full"
+          tag="transition-group"
+          v-bind="dragOptions"
+          @change="updateOrder"
+          :component-data="{
+            tag: 'div',
+          }"
+        >
+          <template #item="{ element, index }">
+            <VcGalleryItem
+              class="tw-m-2"
+              :key="element.sortOrder"
+              :image="element"
+              :readonly="disabled"
+              @preview="onPreviewClick(index)"
+              @edit="$emit('item:edit', $event)"
+              @remove="$emit('item:remove', $event)"
+              :actions="itemActions"
+              :disableDrag="disableDrag"
+            ></VcGalleryItem>
+          </template>
+          <template #footer>
+            <VcFileUpload
+              v-if="!disabled && !hideAfterUpload"
+              class="tw-m-2"
+              :icon="uploadIcon"
+              @upload="onUpload"
+              :variant="variant"
+              :multiple="multiple"
+              :rules="rules"
+              :name="name"
+            ></VcFileUpload>
+          </template>
+        </draggable>
+      </div>
+    </template>
+    <div v-else class= "tw-flex tw-justify-center tw-p-5">
+      <VcHint>Gallery is empty</VcHint>
+    </div>
+
+    <VcGalleryPreview
+      v-if="preview"
+      :images="images"
+      :index="previewImageIndex"
+      @close="preview = false"
+    ></VcGalleryPreview>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, PropType, ref } from "vue";
+import { VcLabel, VcFileUpload } from "@/ui/components";
+import VcGalleryItem from "./_internal/vc-gallery-item/vc-gallery-item.vue";
+import VcGalleryPreview from "./_internal/vc-gallery-preview/vc-gallery-preview.vue";
+import { IImage } from "@/core/types";
+
+const props = defineProps({
+  images: {
+    type: Array as PropType<IImage[]>,
+    default: () => [],
+  },
+
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+
+  required: {
+    type: Boolean,
+    default: false,
+  },
+
+  label: {
+    type: String,
+    default: undefined,
+  },
+
+  tooltip: {
+    type: String,
+    default: undefined,
+  },
+
+  tooltipIcon: {
+    type: String,
+    default: "fas fa-info",
+  },
+
+  uploadIcon: {
+    type: String,
+    default: "fas fa-upload",
+  },
+
+  multiple: {
+    type: Boolean,
+    default: false,
+  },
+
+  variant: {
+    type: String,
+    default: "gallery",
+  },
+
+  itemActions: {
+    type: Object,
+    default: () => ({
+      preview: true,
+      edit: true,
+      remove: true,
+    }),
+  },
+
+  disableDrag: {
+    type: Boolean,
+    default: false,
+  },
+
+  hideAfterUpload: {
+    type: Boolean,
+    default: false,
+  },
+
+  rules: {
+    type: [String, Object],
+  },
+
+  name: {
+    type: String,
+    default: "Gallery",
+  },
+});
+
+const emit = defineEmits([
+  "upload",
+  "sort",
+  "item:preview",
+  "item:edit",
+  "item:remove",
+  "item:move",
+]);
+
+const preview = ref(false);
+const previewImageIndex = ref();
+const dragOptions = computed(() => {
+  return {
+    animation: 200,
+    group: "description",
+    disabled: props.disableDrag,
+    ghostClass: "ghost",
+  };
+});
+
+const onUpload = (files: FileList) => {
+  if (files && files.length) {
+    emit("upload", files);
+  }
+};
+
+const onPreviewClick = (index: number) => {
+  preview.value = true;
+  previewImageIndex.value = index;
+};
+
+const updateOrder = () => {
+  const images = props.images;
+  const sortedImgs = images.map((item, index) => {
+    item.sortOrder = index;
+    return item;
+  });
+  emit("sort", ref(sortedImgs).value);
+};
+</script>

package/ui/components/organisms/vc-login-form/vc-login-form.stories.ts

@@ -0,0 +1,55 @@
+/**
+ * Login Form component.
+ * @author Iurii A Taranov <me@flanker72.ru>
+ */
+import { Story } from "@storybook/vue3";
+import VcLoginForm from "./vc-login-form.vue";
+import VcInput from "../../molecules/vc-input/vc-input.vue";
+import VcButton from "../../atoms/vc-button/vc-button.vue";
+
+export default {
+  title: "organisms/vc-login-form",
+  component: VcLoginForm,
+};
+
+const Template: Story = (args) => ({
+  components: { VcLoginForm, VcInput, VcButton },
+  setup() {
+    return { args };
+  },
+  template: `<vc-login-form v-bind="args">
+    <vc-input
+        ref="loginField"
+        class="tw-mb-4 tw-mt-1"
+        label="Username"
+        placeholder="Enter username"
+    ></vc-input>
+    <vc-input
+        ref="passwordField"
+        class="tw-mb-4"
+        label="Password"
+        placeholder="Enter password"
+        type="password"
+    ></vc-input>
+    <div
+        class="
+            flex
+            tw-justify-center
+            tw-items-center
+            tw-pt-2
+          "
+    >
+      <span class="tw-grow tw-basis-0"></span>
+      <vc-button variant="primary">
+        Submit
+      </vc-button>
+    </div>
+  </vc-login-form>`,
+});
+
+export const LoginForm = Template.bind({});
+LoginForm.storyName = "vc-login-form";
+LoginForm.args = {
+  background: "images/background.jpg",
+  logo: "images/logo-white.svg",
+};

package/ui/components/organisms/vc-login-form/vc-login-form.vue

@@ -0,0 +1,48 @@
+<template>
+  <div
+    class="tw-w-full tw-h-full tw-box-border tw-flex tw-flex-col tw-items-center tw-justify-center"
+    :style="{
+      background: `url(${background}) center / cover no-repeat`,
+    }"
+  >
+    <div
+      class="tw-h-[80px] tw-w-[516px] tw-max-w-[90%] tw-mb-[50px] -tw-mt-[90px]"
+      :style="{
+        background: `url(${logo}) center / contain no-repeat`,
+      }"
+    ></div>
+    <div
+      class="tw-w-[516px] tw-max-w-[90%] tw-bg-white tw-rounded-md tw-overflow-hidden tw-shadow-[0_0_0_rgba(0,0,0,0.05)]"
+    >
+      <div
+        class="tw-uppercase tw-text-white tw-bg-[#465769] tw-h-[50px] tw-px-[28px] tw-text-xl tw-flex tw-items-center"
+      >
+        {{ title }}
+      </div>
+      <div class="tw-pt-4 tw-px-[28px] tw-pb-[24px]">
+        <slot></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineProps({
+  logo: {
+    type: String,
+    default: undefined,
+  },
+
+  background: {
+    type: String,
+    default: undefined,
+  },
+
+  title: {
+    type: String,
+    default: "Login",
+  },
+});
+
+console.debug("Init vc-login-form");
+</script>

package/ui/components/organisms/vc-popup/vc-popup.stories.ts

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

package/ui/components/organisms/vc-popup/vc-popup.vue

@@ -0,0 +1,97 @@
+<template>
+  <div class="vc-popup" :class="`vc-popup_${variant}`">
+    <div class="vc-popup__wrapper">
+      <div class="vc-popup__inner">
+        <div class="vc-popup__header">
+          <div class="tw-truncate tw-grow tw-basis-0">
+            <slot name="title">{{ title }}</slot>
+          </div>
+          <VcIcon
+            v-if="closable"
+            class="vc-popup__header-icon"
+            icon="fas fa-times"
+            @click="$emit('close')"
+          ></VcIcon>
+        </div>
+
+        <div class="vc-popup__content tw-grow tw-basis-0">
+          <slot></slot>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineProps({
+  title: {
+    type: String,
+    default: undefined,
+  },
+
+  closable: {
+    type: Boolean,
+    default: true,
+  },
+
+  variant: {
+    type: String,
+    default: "fullscreen",
+    enum: ["small", "medium", "fullscreen"],
+  },
+});
+
+defineEmits(["close"]);
+</script>
+
+<style lang="scss">
+.vc-popup {
+  @apply tw-fixed tw-top-0 tw-right-0 tw-bottom-0 tw-left-0 tw-z-[9999] tw-bg-[rgba(31,40,50,0.58)];
+
+  &_small {
+    .vc-popup__wrapper {
+      @apply tw-max-h-fit tw-items-center tw-flex tw-grow-0 tw-shrink-0 tw-basis-auto [flex-direction:inherit] tw-justify-center;
+    }
+
+    .vc-popup__inner {
+      @apply tw-max-w-[439px] tw-w-full tw-flex tw-flex-col tw-grow tw-basis-0;
+    }
+  }
+
+  &_medium {
+    .vc-popup__wrapper {
+      @apply tw-max-h-[75vh];
+    }
+  }
+
+  &_fullscreen {
+    .vc-popup__wrapper {
+      @apply tw-max-h-[100vh];
+    }
+  }
+
+  &__wrapper {
+    @apply tw-fixed tw-top-2/4 -tw-translate-y-2/4 tw-right-0 tw-bottom-0 tw-left-0 tw-flex tw-grow tw-shrink tw-basis-auto tw-flex-col tw-h-full;
+
+    .vc-app_phone & {
+      @apply tw-max-h-[100vh];
+    }
+  }
+
+  &__inner {
+    @apply tw-grow tw-shrink tw-basis-auto tw-m-[40px] tw-box-border tw-bg-white tw-rounded-[5px] tw-overflow-hidden tw-relative tw-flex tw-flex-col tw-grow tw-basis-0;
+
+    .vc-app_phone & {
+      @apply tw-m-0 tw-rounded-none;
+    }
+  }
+
+  &__header {
+    @apply tw-h-[44px] tw-px-4 tw-bg-[#eef5fa] tw-flex tw-shrink-0 tw-items-center;
+
+    &-icon {
+      @apply tw-cursor-pointer tw-text-[#a1c0d4];
+    }
+  }
+}
+</style>

package/ui/components/organisms/vc-table/_internal/vc-table-cell/vc-table-cell.vue

@@ -0,0 +1,113 @@
+<template>
+  <!-- Money cell -->
+  <template v-if="cell.type === 'money'">
+    <template v-if="value > 0">
+      <span>{{ Math.trunc(Number(value)) }}</span
+      ><span class="tw-text-[#a5a5a5] tw-text-xs"
+        >.{{
+          `${(Number(value) * 100) % 100}`.padEnd(2, "0").slice(0, 2)
+        }}</span
+      >
+    </template>
+    <template v-else>
+      <span>N/A</span>
+    </template>
+  </template>
+
+  <!-- Date ago cell -->
+  <span v-else-if="cell.type === 'date-ago'" class="tw-text-[#a5a5a5]">
+    <template v-if="value">
+      {{ moment(value).fromNow() }}
+    </template>
+    <template v-else>N/A</template>
+  </span>
+
+  <!-- Date exact cell -->
+  <span
+    v-else-if="
+      cell.type === 'date' || cell.type === 'time' || cell.type === 'date-time'
+    "
+    class="tw-text-[#a5a5a5]"
+  >
+    <template v-if="value">
+      <template v-if="cell.format">
+        {{ moment(value).locale(locale).format(cell.format) }}
+      </template>
+      <template v-else>
+        <template v-if="cell.type === 'date'">{{
+          value.toLocaleDateString()
+        }}</template>
+        <template v-if="cell.type === 'time'">{{
+          value.toLocaleTimeString()
+        }}</template>
+        <template v-if="cell.type === 'date-time'">{{
+          value.toLocaleString()
+        }}</template>
+      </template>
+    </template>
+    <template v-else>N/A</template>
+  </span>
+
+  <!-- Image cell -->
+  <template v-else-if="cell.type === 'image'">
+    <VcImage
+      :bordered="true"
+      size="s"
+      aspect="1x1"
+      :src="value"
+      background="contain"
+    />
+  </template>
+
+  <!-- Status cell -->
+  <template v-else-if="cell.type === 'status'">
+    <VcStatus>{{ value }}</VcStatus>
+  </template>
+
+  <!-- Status icon cell -->
+  <div v-else-if="cell.type === 'status-icon'" class= "tw-flex tw-justify-center">
+    <VcStatusIcon :status="value"></VcStatusIcon>
+  </div>
+
+  <!-- Number cell -->
+  <span v-else-if="cell.type === 'number'" class="tw-text-right">
+    {{ Number(value).toFixed(0) }}
+  </span>
+
+  <!-- Link cell -->
+  <template v-else-if="cell.type === 'link'">
+    <VcLink>{{ value }}</VcLink>
+  </template>
+
+  <!-- Default cell -->
+  <span v-else>
+    {{ value }}
+  </span>
+</template>
+
+<script lang="ts" setup>
+import { computed } from "vue";
+import moment from "moment";
+import { ITableColumns } from "@/core/types";
+import { VcImage, VcStatus, VcStatusIcon, VcLink } from "@/ui/components";
+
+export interface Props {
+  cell: ITableColumns;
+  item: Record<string, unknown>;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  cell: undefined,
+  item: undefined,
+});
+
+const locale = window.navigator.language;
+const value = computed(() =>
+  (props.cell.field || props.cell.id)
+    .split(".")
+    .reduce(
+      (p: { [x: string]: unknown }, c: string) => (p && p[c]) || null,
+      props.item
+    )
+);
+</script>

package/ui/components/organisms/vc-table/_internal/vc-table-counter/vc-table-counter.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="tw-font-medium tw-text-base">
+    <span class="tw-text-[color:var(--table-counter-label-color)]"
+      >{{ label }}&nbsp;</span
+    >
+    <span class="tw-text-[color:var(--table-counter-value-color)]">{{
+      value
+    }}</span>
+  </div>
+</template>
+
+<script lang="ts" setup>
+export interface Props {
+  label: string;
+  value: number;
+}
+
+withDefaults(defineProps<Props>(), {
+  label: "Total",
+  value: 0,
+});
+</script>
+
+<style lang="scss">
+:root {
+  --table-counter-label-color: #465769;
+  --table-counter-value-color: #43b0e6;
+}
+</style>

package/ui/components/organisms/vc-table/_internal/vc-table-filter/vc-table-filter.vue

@@ -0,0 +1,152 @@
+<template>
+  <div class="tw-relative tw-overflow-visible">
+    <!-- Filter button -->
+    <div
+      class="tw-rounded-[3px] tw-bg-[#43b0e6] tw-flex tw-items-center tw-px-[10px] tw-text-white tw-h-[38px] tw-box-border tw-cursor-pointer"
+      @click="openPanel($isMobile.value)"
+      ref="filterToggle"
+    >
+      <VcIcon icon="fas fa-filter" size="m" />
+      <span v-if="title" class="tw-ml-[10px] tw-font-medium">
+        {{ title }}
+      </span>
+      <div
+        v-if="counter"
+        class="tw-ml-[10px] tw-rounded-[10px] tw-bg-white tw-text-[#43b0e6] tw-h-[20px] tw-min-w-[20px] tw-leading-[20px] tw-text-center tw-font-medium"
+      >
+        {{ counter }}
+      </div>
+    </div>
+
+    <!-- Filter panel -->
+    <teleport to="body">
+      <div
+        :class="{
+          'vc-table-filter__panel_mobile tw-fixed tw-left-0 tw-top-0 tw-w-full tw-bottom-0 tw-z-[9999] tw-bg-[rgba(128,140,153,0.6)] tw-shadow-none tw-rounded-none tw-max-h-full tw-max-w-full tw-min-w-full':
+            $isMobile.value,
+          'vc-table-filter__panel tw-absolute tw-max-h-[400px] tw-max-w-[800px] tw-min-w-[400px] tw-z-[100] tw-shadow-[1px_1px_11px_rgba(141,152,163,0.6)] tw-rounded-[3px] tw-overflow-hidden':
+            !$isMobile.value,
+        }"
+        v-if="isPanelVisible"
+        @click.self="closePanel"
+        ref="filterPanel"
+      >
+        <div
+          class="vc-table-filter__panel-inner tw-bg-white tw-box-border tw-p-5 tw-flex tw-flex-col"
+          @click.stop
+        >
+          <VcIcon
+            class="vc-table-filter__panel-close tw-text-[#43b0e6] tw-cursor-pointer tw-self-end tw-shrink-0"
+            icon="fas fa-times"
+            size="xl"
+            @click="closePanel"
+          />
+
+          <slot :closePanel="closePanel"></slot>
+        </div>
+      </div>
+    </teleport>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, nextTick, ref, watch } from "vue";
+
+export default defineComponent({
+  inheritAttrs: false,
+});
+</script>
+
+<script lang="ts" setup>
+import { createPopper, Instance } from "@popperjs/core";
+import { VcIcon } from "@/ui/components";
+
+export interface Props {
+  title: string;
+  counter: number;
+  parentExpanded?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  title: undefined,
+  counter: 0,
+  parentExpanded: true,
+});
+
+const isPanelVisible = ref(false);
+const filterToggle = ref();
+const filterPanel = ref();
+const popper = ref<Instance>();
+
+watch(
+  () => props.parentExpanded,
+  () => {
+    closePanel();
+  }
+);
+
+function openPanel(isMobile: boolean) {
+  isPanelVisible.value = !isPanelVisible.value;
+
+  if (!isMobile) {
+    const element = document.querySelector(".vc-blade");
+    if (isPanelVisible.value) {
+      nextTick(() => {
+        popper.value = createPopper(filterToggle.value, filterPanel.value, {
+          placement: "bottom-end",
+          modifiers: [
+            {
+              name: "offset",
+              options: {
+                offset: [0, 10],
+              },
+            },
+            {
+              name: "preventOverflow",
+              options: {
+                boundary: element,
+              },
+            },
+          ],
+        });
+      });
+    } else {
+      destroyPopper();
+    }
+  }
+}
+
+function closePanel() {
+  isPanelVisible.value = false;
+  destroyPopper();
+}
+
+function destroyPopper() {
+  // To prevent memory leaks Popper needs to be destroyed.
+  popper.value?.destroy();
+}
+</script>
+
+<style lang="scss">
+.vc-table-filter {
+  @apply tw-relative tw-overflow-visible;
+
+  &__panel {
+    &_mobile {
+      .vc-table-filter__panel {
+        &-inner {
+          @apply tw-w-[280px] tw-h-full;
+        }
+
+        &-close {
+          @apply tw-self-start;
+        }
+      }
+
+      .vc-row {
+        @apply tw-block;
+      }
+    }
+  }
+}
+</style>