@vc-shell/framework 1.0.38 → 1.0.39

package/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="mb-4 mt-1"
+        label="Username"
+        placeholder="Enter username"
+    ></vc-input>
+    <vc-input
+        ref="passwordField"
+        class="mb-4"
+        label="Password"
+        placeholder="Enter password"
+        type="password"
+    ></vc-input>
+    <div
+        class="
+            flex
+            justify-center
+            items-center
+            pt-2
+          "
+    >
+      <span class="grow 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/components/organisms/vc-login-form/vc-login-form.vue

@@ -0,0 +1,48 @@
+<template>
+  <div
+    class="w-full h-full box-border flex flex-col items-center justify-center"
+    :style="{
+      background: `url(${background}) center / cover no-repeat`,
+    }"
+  >
+    <div
+      class="h-[80px] w-[516px] max-w-[90%] mb-[50px] -mt-[90px]"
+      :style="{
+        background: `url(${logo}) center / contain no-repeat`,
+      }"
+    ></div>
+    <div
+      class="w-[516px] max-w-[90%] bg-white rounded-md overflow-hidden shadow-[0_0_0_rgba(0,0,0,0.05)]"
+    >
+      <div
+        class="uppercase text-white bg-[#465769] h-[50px] px-[28px] text-xl flex items-center"
+      >
+        {{ title }}
+      </div>
+      <div class="pt-4 px-[28px] 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/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/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="truncate grow 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 grow 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 fixed top-0 right-0 bottom-0 left-0 z-[9999] bg-[rgba(31,40,50,0.58)];
+
+  &_small {
+    .vc-popup__wrapper {
+      @apply max-h-fit items-center flex grow-0 shrink-0 basis-auto [flex-direction:inherit] justify-center;
+    }
+
+    .vc-popup__inner {
+      @apply max-w-[439px] w-full flex flex-col grow basis-0;
+    }
+  }
+
+  &_medium {
+    .vc-popup__wrapper {
+      @apply max-h-[75vh];
+    }
+  }
+
+  &_fullscreen {
+    .vc-popup__wrapper {
+      @apply max-h-[100vh];
+    }
+  }
+
+  &__wrapper {
+    @apply fixed top-2/4 -translate-y-2/4 right-0 bottom-0 left-0 flex grow shrink basis-auto flex-col h-full;
+
+    .vc-app_phone & {
+      @apply max-h-[100vh];
+    }
+  }
+
+  &__inner {
+    @apply grow shrink basis-auto m-[40px] box-border bg-white rounded-[5px] overflow-hidden relative flex flex-col grow basis-0;
+
+    .vc-app_phone & {
+      @apply m-0 rounded-none;
+    }
+  }
+
+  &__header {
+    @apply h-[44px] px-4 bg-[#eef5fa] flex shrink-0 items-center;
+
+    &-icon {
+      @apply cursor-pointer text-[#a1c0d4];
+    }
+  }
+}
+</style>

package/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="text-[#a5a5a5] 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="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="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="flex justify-center">
+    <VcStatusIcon :status="value"></VcStatusIcon>
+  </div>
+
+  <!-- Number cell -->
+  <span v-else-if="cell.type === 'number'" class="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 "@/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/components/organisms/vc-table/_internal/vc-table-counter/vc-table-counter.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="font-medium text-base">
+    <span class="text-[color:var(--table-counter-label-color)]"
+      >{{ label }}&nbsp;</span
+    >
+    <span class="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/components/organisms/vc-table/_internal/vc-table-filter/vc-table-filter.vue

@@ -0,0 +1,152 @@
+<template>
+  <div class="relative overflow-visible">
+    <!-- Filter button -->
+    <div
+      class="rounded-[3px] bg-[#43b0e6] flex items-center px-[10px] text-white h-[38px] box-border cursor-pointer"
+      @click="openPanel($isMobile.value)"
+      ref="filterToggle"
+    >
+      <VcIcon icon="fas fa-filter" size="m" />
+      <span v-if="title" class="ml-[10px] font-medium">
+        {{ title }}
+      </span>
+      <div
+        v-if="counter"
+        class="ml-[10px] rounded-[10px] bg-white text-[#43b0e6] h-[20px] min-w-[20px] leading-[20px] text-center font-medium"
+      >
+        {{ counter }}
+      </div>
+    </div>
+
+    <!-- Filter panel -->
+    <teleport to="body">
+      <div
+        :class="{
+          'vc-table-filter__panel_mobile fixed left-0 top-0 w-full bottom-0 z-[9999] bg-[rgba(128,140,153,0.6)] shadow-none rounded-none max-h-full max-w-full min-w-full':
+            $isMobile.value,
+          'vc-table-filter__panel absolute max-h-[400px] max-w-[800px] min-w-[400px] z-[100] shadow-[1px_1px_11px_rgba(141,152,163,0.6)] rounded-[3px] overflow-hidden':
+            !$isMobile.value,
+        }"
+        v-if="isPanelVisible"
+        @click.self="closePanel"
+        ref="filterPanel"
+      >
+        <div
+          class="vc-table-filter__panel-inner bg-white box-border p-5 flex flex-col"
+          @click.stop
+        >
+          <VcIcon
+            class="vc-table-filter__panel-close text-[#43b0e6] cursor-pointer self-end 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 "@/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 relative overflow-visible;
+
+  &__panel {
+    &_mobile {
+      .vc-table-filter__panel {
+        &-inner {
+          @apply w-[280px] h-full;
+        }
+
+        &-close {
+          @apply self-start;
+        }
+      }
+
+      .vc-row {
+        @apply block;
+      }
+    }
+  }
+}
+</style>