@vc-shell/framework 1.0.53 → 1.0.56

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

@@ -49,7 +49,10 @@
         </draggable>
       </div>
     </template>
-    <div v-else class="tw-flex tw-justify-center tw-p-5">
+    <div
+      v-else
+      class="tw-flex tw-justify-center tw-p-5"
+    >
       <VcHint>Gallery is empty</VcHint>
     </div>
 
@@ -64,30 +67,55 @@
 
 <script lang="ts" setup>
 import { computed, ref } from "vue";
+import { IImage } from "../../../../core/types";
 import { VcLabel, VcFileUpload } from "./../../../components";
 import VcGalleryItem from "./_internal/vc-gallery-item/vc-gallery-item.vue";
 import VcGalleryPreview from "./_internal/vc-gallery-preview/vc-gallery-preview.vue";
-import { VcGalleryProps } from "./vc-gallery-model";
 
-const props = withDefaults(defineProps<VcGalleryProps>(), {
+export interface Props {
+  images?: IImage[];
+  disabled?: boolean;
+  required?: boolean;
+  label?: string;
+  tooltip?: string;
+  tooltipIcon?: string;
+  uploadIcon?: string;
+  multiple?: boolean;
+  variant?: "gallery" | "file-upload";
+  itemActions?: {
+    name?: string;
+    preview: boolean;
+    edit: boolean;
+    remove: boolean;
+  };
+  disableDrag?: boolean;
+  hideAfterUpload?: boolean;
+  rules?: string | Record<string, unknown>;
+  name?: string;
+}
+
+export interface Emits {
+  (event: "upload", files: FileList): void;
+  (event: "sort", sorted: IImage[]): void;
+  (event: "item:edit", image: IImage): void;
+  (event: "item:remove", image: IImage): void;
+  (event: "item:move", image: IImage): void;
+}
+
+const props = withDefaults(defineProps<Props>(), {
   images: () => [],
-  disabled: false,
-  required: false,
   tooltipIcon: "fas fa-info",
   uploadIcon: "fas fa-upload",
-  multiple: false,
   variant: "gallery",
   itemActions: () => ({
     preview: true,
     edit: true,
     remove: true,
   }),
-  disableDrag: false,
-  hideAfterUpload: false,
   name: "Gallery",
 });
 
-const emit = defineEmits(["upload", "sort", "item:edit", "item:remove"]);
+const emit = defineEmits<Emits>();
 
 const preview = ref(false);
 const previewImageIndex = ref();

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

@@ -1,7 +1,9 @@
-import { ComponentPublicInstance } from "vue";
-import { VcLoginFormProps } from "./vc-login-form-model";
-import { ComponentConstructor } from "./../../../types/ts-helpers"
+import { VNode } from "vue";
 import LoginForm from "./vc-login-form.vue";
-export const VcLoginForm: ComponentConstructor<
-  ComponentPublicInstance<VcLoginFormProps>
-> = LoginForm;
+import { GlobalComponentConstructor } from "./../../../services/types/ts-helpers";
+
+export type VcLoginFormSlots = {
+  default?: () => VNode[];
+};
+
+export const VcLoginForm: GlobalComponentConstructor<typeof LoginForm, VcLoginFormSlots> = LoginForm;

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

@@ -27,9 +27,13 @@
 </template>
 
 <script lang="ts" setup>
-import { VcLoginFormProps } from "./vc-login-form-model";
+export interface Props {
+  logo: string;
+  background: string;
+  title?: string;
+}
 
-withDefaults(defineProps<VcLoginFormProps>(), {
+withDefaults(defineProps<Props>(), {
   title: "Login",
 });
 

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

@@ -1,7 +1,9 @@
-import { ComponentPublicInstance } from "vue";
-import { VcPopupProps } from "./vc-popup-model";
-import { ComponentConstructor } from "./../../../types/ts-helpers"
+import { VNode } from "vue";
 import Popup from "./vc-popup.vue";
-export const VcPopup: ComponentConstructor<
-  ComponentPublicInstance<VcPopupProps>
-> = Popup;
+import { GlobalComponentConstructor } from "./../../../services/types/ts-helpers";
+
+export type VcPopupSlots = {
+  default?: () => VNode[];
+};
+
+export const VcPopup: GlobalComponentConstructor<typeof Popup, VcPopupSlots> = Popup;

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

@@ -1,5 +1,8 @@
 <template>
-  <div class="vc-popup" :class="`vc-popup_${variant}`">
+  <div
+    class="vc-popup"
+    :class="`vc-popup_${variant}`"
+  >
     <div class="vc-popup__wrapper">
       <div class="vc-popup__inner">
         <div class="vc-popup__header">
@@ -23,14 +26,22 @@
 </template>
 
 <script lang="ts" setup>
-import { VcPopupProps } from "./vc-popup-model";
+export interface Props {
+  title?: string;
+  closable?: boolean;
+  variant?: "small" | "medium" | "fullscreen";
+}
+
+export interface Emits {
+  (event: "close"): void;
+}
 
-withDefaults(defineProps<VcPopupProps>(), {
+withDefaults(defineProps<Props>(), {
   closable: true,
   variant: "fullscreen",
 });
 
-defineEmits(["close"]);
+defineEmits<Emits>();
 </script>
 
 <style lang="scss">

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

@@ -4,9 +4,7 @@
     <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
+        >.{{ `${(Number(value) * 100) % 100}`.padEnd(2, "0").slice(0, 2) }}</span
       >
     </template>
     <template v-else>
@@ -15,7 +13,10 @@
   </template>
 
   <!-- Date ago cell -->
-  <span v-else-if="cell.type === 'date-ago'" class="tw-text-[#a5a5a5]">
+  <span
+    v-else-if="cell.type === 'date-ago'"
+    class="tw-text-[#a5a5a5]"
+  >
     <template v-if="value">
       {{ moment(value).fromNow() }}
     </template>
@@ -24,9 +25,7 @@
 
   <!-- Date exact cell -->
   <span
-    v-else-if="
-      cell.type === 'date' || cell.type === 'time' || cell.type === 'date-time'
-    "
+    v-else-if="cell.type === 'date' || cell.type === 'time' || cell.type === 'date-time'"
     class="tw-text-[#a5a5a5]"
   >
     <template v-if="value">
@@ -34,15 +33,9 @@
         {{ 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 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>
@@ -73,7 +66,10 @@
   </div>
 
   <!-- Number cell -->
-  <span v-else-if="cell.type === 'number'" class="tw-text-right">
+  <span
+    v-else-if="cell.type === 'number'"
+    class="tw-text-right"
+  >
     {{ Number(value).toFixed(0) }}
   </span>
 
@@ -106,13 +102,11 @@ const props = withDefaults(defineProps<Props>(), {
 
 const locale = window.navigator.language;
 const value = computed(() => {
-  return (props.cell.field || props.cell.id)
-    .split(".")
-    .reduce((p: { [x: string]: unknown }, c: string) => {
-      if (p && Array.isArray(p) && p.length) {
-        return (p && p[0][c]) || null;
-      }
-      return (p && p[c]) || null;
-    }, props.item);
+  return (props.cell.field || props.cell.id).split(".").reduce((p: { [x: string]: unknown }, c: string) => {
+    if (p && Array.isArray(p) && p.length) {
+      return (p && p[0][c]) || null;
+    }
+    return (p && p[c]) || null;
+  }, props.item);
 });
 </script>

package/ui/components/organisms/vc-table/_internal/vc-table-column-switcher/vc-table-column-switcher.vue

@@ -0,0 +1,94 @@
+<template>
+  <div class="tw-relative tw-w-min tw-float-right tw-mr-4">
+    <VcButton
+      small
+      icon="fas fa-bars"
+      @click.stop="isActive = !isActive"
+      ref="referenceButton"
+    ></VcButton>
+    <teleport to="#app">
+      <div
+        v-if="isActive"
+        ref="floatingDrop"
+        v-click-outside="close"
+        :style="floatingDropStyle"
+        class="tw-flex tw-flex-col tw-box-border tw-max-h-[300px] tw-h-auto tw-z-10 tw-overflow-hidden tw-absolute tw-bg-white tw-border tw-border-solid tw-border-[#e5e7eb] tw-w-max tw-right-0"
+      >
+        <VcContainer
+          :no-padding="true"
+          v-if="items && items.length"
+        >
+          <div class="tw-w-full tw-h-full tw-box-border tw-flex tw-flex-col">
+            <div
+              class="tw-flex tw-items-center tw-min-h-[30px] tw-box-border tw-rounded-[3px] tw-px-2 tw-cursor-pointer hover:tw-bg-[#eff7fc] tw-border-b"
+              :class="{ 'tw-bg-[#eff7fc]': item.visible || !('visible' in item) }"
+              v-for="item in items"
+              :key="item.id"
+              @click="selectItem(item)"
+            >
+              {{ item.title }}
+            </div>
+          </div>
+        </VcContainer>
+      </div>
+    </teleport>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed } from "vue";
+import { ITableColumns } from "./../../../../../../core/types";
+import { clickOutside as vClickOutside } from "./../../../../../../core/directives";
+import { useFloating, flip, shift, autoUpdate } from "@floating-ui/vue";
+
+export interface Props {
+  items: ITableColumns[];
+}
+
+export interface Emits {
+  (event: "change", value: ITableColumns): void;
+}
+
+withDefaults(defineProps<Props>(), {});
+const emit = defineEmits<Emits>();
+
+const isActive = ref(false);
+const referenceButton = ref();
+const floatingDrop = ref();
+const floater = useFloating(referenceButton, floatingDrop, {
+  placement: "bottom-end",
+  whileElementsMounted: autoUpdate,
+  middleware: [flip({ fallbackPlacements: ["top-end", "bottom-end"] }), shift({ mainAxis: false })],
+});
+
+const floatingDropStyle = computed(() => {
+  return {
+    top: `${floater.y.value ?? 0}px`,
+    left: `${floater.x.value ?? 0}px`,
+  };
+});
+
+function selectItem(item: ITableColumns) {
+  emit("change", isVisible(item));
+}
+
+function isVisible(item: ITableColumns) {
+  if ("visible" in item) {
+    if (item.visible) {
+      item.visible = false;
+    } else {
+      item.visible = true;
+    }
+  } else {
+    item.visible = false;
+  }
+
+  return item;
+}
+
+function close() {
+  if (isActive.value) {
+    isActive.value = false;
+  }
+}
+</script>

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

@@ -1,11 +1,7 @@
 <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>
+    <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>
 

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

@@ -6,8 +6,14 @@
       @click="openPanel($isMobile.value)"
       ref="filterToggle"
     >
-      <VcIcon icon="fas fa-filter" size="m" />
-      <span v-if="title" class="tw-ml-[10px] tw-font-medium">
+      <VcIcon
+        icon="fas fa-filter"
+        size="m"
+      />
+      <span
+        v-if="title"
+        class="tw-ml-[10px] tw-font-medium"
+      >
         {{ title }}
       </span>
       <div

package/ui/components/organisms/vc-table/_internal/vc-table-mobile-item/vc-table-mobile-item.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="tw-relative tw-flex tw-flex-nowrap tw-items-stretch tw-transition  tw-duration-200"
+    class="tw-relative tw-flex tw-flex-nowrap tw-items-stretch tw-transition tw-duration-200"
     :class="{ ' tw-transition-none': isMoving }"
     :style="`transform: translateX(${offsetX}px)`"
     @click="$emit('click')"
@@ -11,11 +11,11 @@
   >
     <!-- Left swipe actions-->
     <div
-      class= "tw-flex-shrink-0 tw-w-[80px] tw-flex tw-flex-col [justify-content:stretch] tw-bg-[#a9bfd2]"
+      class="tw-flex-shrink-0 tw-w-[80px] tw-flex tw-flex-col [justify-content:stretch] tw-bg-[#a9bfd2]"
       v-if="leftSwipeActions && leftSwipeActions.length"
     >
       <div
-        class= "tw-flex tw-grow tw-basis-[1] tw-flex-col tw-justify-center tw-items-center tw-text-white"
+        class="tw-flex tw-grow tw-basis-[1] tw-flex-col tw-justify-center tw-items-center tw-text-white"
         :class="[`vc-table-mobile__item-action_${leftSwipeActions[0].variant}`]"
         @click.stop="leftSwipeActions[0].clickHandler(item)"
       >
@@ -26,22 +26,20 @@
       </div>
     </div>
 
-    <div class= "tw-flex-shrink-0 tw-w-full">
+    <div class="tw-flex-shrink-0 tw-w-full">
       <!-- Mobile item slot content -->
       <slot></slot>
     </div>
 
     <!-- Item actions -->
     <div
-      class= "tw-flex-shrink-0 tw-w-[80px] tw-flex tw-flex-col [justify-content:stretch] tw-bg-[#a9bfd2]"
+      class="tw-flex-shrink-0 tw-w-[80px] tw-flex tw-flex-col [justify-content:stretch] tw-bg-[#a9bfd2]"
       v-if="rightSwipeActions && rightSwipeActions.length"
     >
       <!-- First available action -->
       <div
-        class= "tw-flex tw-grow tw-basis-[1] tw-flex-col tw-justify-center tw-items-center tw-text-white"
-        :class="[
-          `vc-table-mobile__item-action_${rightSwipeActions[0].variant}`,
-        ]"
+        class="tw-flex tw-grow tw-basis-[1] tw-flex-col tw-justify-center tw-items-center tw-text-white"
+        :class="[`vc-table-mobile__item-action_${rightSwipeActions[0].variant}`]"
         @click.stop="rightSwipeActions[0].clickHandler(item)"
       >
         <VcIcon :icon="rightSwipeActions[0].icon"></VcIcon>
@@ -53,10 +51,8 @@
       <!-- Second available action -->
       <div
         v-if="rightSwipeActions.length === 2"
-        class= "tw-flex tw-grow tw-basis-[1] tw-flex-col tw-justify-center tw-items-center tw-text-white"
-        :class="[
-          `vc-table-mobile__item-action_${rightSwipeActions[1].variant}`,
-        ]"
+        class="tw-flex tw-grow tw-basis-[1] tw-flex-col tw-justify-center tw-items-center tw-text-white"
+        :class="[`vc-table-mobile__item-action_${rightSwipeActions[1].variant}`]"
         @click.stop="rightSwipeActions[1].clickHandler(item)"
       >
         <VcIcon :icon="rightSwipeActions[1].icon"></VcIcon>
@@ -68,7 +64,7 @@
       <!-- Other available actions -->
       <template v-if="rightSwipeActions.length > 2">
         <div
-          class= "tw-flex tw-grow tw-basis-[1] tw-flex-col tw-justify-center tw-items-center tw-text-white"
+          class="tw-flex tw-grow tw-basis-[1] tw-flex-col tw-justify-center tw-items-center tw-text-white"
           @click.stop="isActionsPopupVisible = true"
         >
           <VcIcon icon="fas fa-ellipsis-h"></VcIcon>
@@ -76,17 +72,18 @@
         </div>
 
         <!-- Actions popup -->
-        <teleport to="body" v-if="isActionsPopupVisible">
+        <teleport
+          to="body"
+          v-if="isActionsPopupVisible"
+        >
           <div
             class="tw-absolute tw-left-0 tw-top-0 tw-right-0 tw-bottom-0 tw-bg-[rgba(107,121,135,0.15)] tw-flex tw-items-center tw-justify-center tw-z-[99]"
           >
             <div
               class="tw-bg-white tw-rounded-[6px] tw-overflow-hidden tw-p-5 tw-max-w-[80%] tw-w-[350px] tw-border tw-border-solid tw-border-[#eef0f2] tw-box-border tw-shadow-[1px_1px_22px_rgba(126,142,157,0.2)]"
             >
-              <div class= "tw-flex tw-w-full tw-items-center">
-                <span
-                  class="tw-grow tw-text-[#2e3d4e] tw-text-[19px] tw-font-semibold tw-tracking-[-0.01em]"
-                >
+              <div class="tw-flex tw-w-full tw-items-center">
+                <span class="tw-grow tw-text-[#2e3d4e] tw-text-[19px] tw-font-semibold tw-tracking-[-0.01em]">
                   {{ $t("All actions") }}
                 </span>
                 <VcIcon
@@ -97,14 +94,17 @@
                 ></VcIcon>
               </div>
 
-              <div class= "tw-flex tw-flex-wrap tw-my-5 tw-justify-between">
+              <div class="tw-flex tw-flex-wrap tw-my-5 tw-justify-between">
                 <div
                   v-for="(itemAction, i) in itemActions"
                   :key="i"
-                  class= "tw-flex tw-grow tw-shrink-0 tw-flex-col tw-items-center tw-text-[#319ed4] tw-my-2 tw-box-border tw-p-1 tw-max-w-[80px]"
+                  class="tw-flex tw-grow tw-shrink-0 tw-flex-col tw-items-center tw-text-[#319ed4] tw-my-2 tw-box-border tw-p-1 tw-max-w-[80px]"
                   @click="itemAction.clickHandler(item)"
                 >
-                  <VcIcon :icon="itemAction.icon" size="xl"></VcIcon>
+                  <VcIcon
+                    :icon="itemAction.icon"
+                    size="xl"
+                  ></VcIcon>
                   <div class="tw-text-base tw-mt-2 tw-text-center">
                     {{ itemAction.title }}
                   </div>
@@ -165,23 +165,17 @@ const rightSwipeActions = computed(
   () =>
     itemActions.value &&
     itemActions.value.length &&
-    itemActions.value.filter(
-      (actions: IActionBuilderResult) => !actions.leftActions
-    )
+    itemActions.value.filter((actions: IActionBuilderResult) => !actions.leftActions)
 );
 const leftSwipeActions = computed(
   () =>
     itemActions.value &&
     itemActions.value.length &&
-    itemActions.value.filter(
-      (actions: IActionBuilderResult) => actions.leftActions
-    )
+    itemActions.value.filter((actions: IActionBuilderResult) => actions.leftActions)
 );
 
 function handleOffset() {
-  if (
-    itemActions.value.some((action: IActionBuilderResult) => action.leftActions)
-  ) {
+  if (itemActions.value.some((action: IActionBuilderResult) => action.leftActions)) {
     offsetX.value = -maxWidth;
     startOffsetX.value = offsetX.value;
   } else {
@@ -233,10 +227,7 @@ function touchEnd(): void {
   if (absoluteOffsetX < maxWidth) {
     offsetX.value = absoluteOffsetX < maxWidth / 2 ? 0 : -maxWidth;
   } else {
-    offsetX.value =
-      absoluteOffsetX <= maxWidth * 2 - threshold * 2
-        ? -maxWidth
-        : -maxWidth * 2;
+    offsetX.value = absoluteOffsetX <= maxWidth * 2 - threshold * 2 ? -maxWidth : -maxWidth * 2;
   }
 
   isMoving.value = false;
@@ -247,10 +238,7 @@ function touchCancel(): void {
   if (absoluteOffsetX < maxWidth) {
     offsetX.value = absoluteOffsetX < maxWidth / 2 ? 0 : -maxWidth;
   } else {
-    offsetX.value =
-      absoluteOffsetX <= maxWidth * 2 - threshold * 2
-        ? -maxWidth
-        : -maxWidth * 2;
+    offsetX.value = absoluteOffsetX <= maxWidth * 2 - threshold * 2 ? -maxWidth : -maxWidth * 2;
   }
 
   isMoving.value = false;

package/ui/components/organisms/vc-table/index.ts

@@ -1,7 +1,17 @@
-import { ComponentPublicInstance } from "vue";
-import { VcTableProps } from "./vc-table-model";
-import { ComponentConstructor } from "./../../../types/ts-helpers"
+import { VNode } from "vue";
 import Table from "./vc-table.vue";
-export const VcTable: ComponentConstructor<
-  ComponentPublicInstance<VcTableProps>
-> = Table;
+import { GlobalComponentConstructor } from "./../../../services/types/ts-helpers";
+import { ITableColumns } from "core/types";
+
+export type VcTableSlots = {
+  header?: () => VNode[];
+  filters?: (args: { closePanel: () => void }) => VNode[];
+  "mobile-item"?: (args: { item: { [x: string]: any; id: string } }) => VNode[];
+  [key: `header_${string}`]: () => VNode[];
+  [key: `item_${string}`]: (args: { item?: { [x: string]: any; id: string }; cell?: ITableColumns }) => VNode[];
+  notfound?: () => VNode[];
+  empty?: () => VNode[];
+  footer?: () => VNode[];
+};
+
+export const VcTable: GlobalComponentConstructor<typeof Table, VcTableSlots> = Table;