@vc-shell/framework 1.0.52 → 1.0.54

package/ui/components/organisms/vc-gallery/vc-gallery-model.ts

@@ -0,0 +1,78 @@
+import { isArray, isObject } from "./../../../utils";
+import { IImage } from "./../../../../core/types";
+import { PropType, VNode } from "vue";
+import { ExtractTypes } from "./../../../types/ts-helpers";
+
+export const galleryProps = {
+  images: {
+    type: Array as PropType<IImage[]>,
+    default: () => [],
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  required: {
+    type: Boolean,
+    default: false,
+  },
+  label: String,
+  tooltip: String,
+  tooltipIcon: {
+    type: String,
+    default: "fas fa-info",
+  },
+  uploadIcon: {
+    type: String,
+    default: "fas fa-upload",
+  },
+  multiple: {
+    type: Boolean,
+    default: false,
+  },
+  variant: {
+    type: String as PropType<"gallery" | "file-upload">,
+    default: "gallery",
+  },
+  itemActions: {
+    type: Object as PropType<{
+      name?: string | undefined;
+      preview: boolean | undefined;
+      edit: boolean | undefined;
+      remove: boolean | undefined;
+    }>,
+    default: () => ({
+      preview: true,
+      edit: true,
+      remove: true,
+    }),
+  },
+  disableDrag: {
+    type: Boolean,
+    default: false,
+  },
+  hideAfterUpload: {
+    type: Boolean,
+    default: false,
+  },
+  rules: [String, Object] as PropType<string | Record<string, unknown>>,
+  name: {
+    type: String,
+    default: "Gallery",
+  },
+};
+
+export const galleryEmits = {
+  upload: (files: FileList) => !!files,
+  sort: (sorted: IImage[]) => isArray(sorted),
+  "item:edit": (image: IImage) => isObject(image),
+  "item:remove": (image: IImage) => isObject(image),
+  "item:move": (image: IImage) => isObject(image),
+};
+
+export type VcGalleryProps = ExtractTypes<typeof galleryProps>;
+export type VcGalleryEmits = typeof galleryEmits;
+
+export interface VcGallerySlots {
+  default: () => VNode[];
+}

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

@@ -10,10 +10,10 @@
     </VcLabel>
 
     <template v-if="(images && images.length) || !disabled">
-      <div class= "tw-flex tw-flex-wrap">
+      <div class="tw-flex tw-flex-wrap">
         <draggable
           :list="images"
-          class= "tw-flex tw-flex-wrap tw-w-full"
+          class="tw-flex tw-flex-wrap tw-w-full"
           tag="transition-group"
           v-bind="dragOptions"
           @change="updateOrder"
@@ -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>
 
@@ -63,95 +66,15 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, PropType, ref } from "vue";
-import { VcLabel, VcFileUpload } from "@/ui/components";
+import { computed, ref } from "vue";
+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 { 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",
-  },
+import { galleryEmits, galleryProps } from "./vc-gallery-model";
 
-  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 props = defineProps(galleryProps);
 
-const emit = defineEmits([
-  "upload",
-  "sort",
-  "item:preview",
-  "item:edit",
-  "item:remove",
-  "item:move",
-]);
+const emit = defineEmits(galleryEmits);
 
 const preview = ref(false);
 const previewImageIndex = ref();

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

@@ -0,0 +1,5 @@
+import { ComponentPublicInstance } from "vue";
+import { VcLoginFormProps } from "./vc-login-form-model";
+import { ComponentConstructor } from "./../../../types/ts-helpers";
+import LoginForm from "./vc-login-form.vue";
+export const VcLoginForm: ComponentConstructor<ComponentPublicInstance<VcLoginFormProps>> = LoginForm;

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

@@ -0,0 +1,16 @@
+import { VNode } from "vue";
+import { ExtractTypes } from "./../../../types/ts-helpers";
+
+export const loginFormProps = {
+  logo: String,
+  background: String,
+  title: {
+    type: String,
+    default: "Login",
+  },
+};
+
+export type VcLoginFormProps = ExtractTypes<typeof loginFormProps>;
+export interface VcLoginFormSlots {
+  default: () => VNode[];
+}

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

@@ -27,22 +27,9 @@
 </template>
 
 <script lang="ts" setup>
-defineProps({
-  logo: {
-    type: String,
-    default: undefined,
-  },
+import { loginFormProps } from "./vc-login-form-model";
 
-  background: {
-    type: String,
-    default: undefined,
-  },
-
-  title: {
-    type: String,
-    default: "Login",
-  },
-});
+defineProps(loginFormProps);
 
 console.debug("Init vc-login-form");
 </script>

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

@@ -0,0 +1,7 @@
+import { ComponentPublicInstance } from "vue";
+import { VcPopupEmits, VcPopupProps } from "./vc-popup-model";
+import { ComponentConstructor } from "./../../../types/ts-helpers";
+import Popup from "./vc-popup.vue";
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const VcPopup: ComponentConstructor<ComponentPublicInstance<VcPopupProps, any, any, any, any, VcPopupEmits>> =
+  Popup;

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

@@ -0,0 +1,25 @@
+import { PropType, VNode } from "vue";
+import { ExtractTypes } from "./../../../types/ts-helpers";
+
+export const popupProps = {
+  title: String,
+  closable: {
+    type: Boolean,
+    default: true,
+  },
+  variant: {
+    type: String as PropType<"small" | "medium" | "fullscreen">,
+    default: "fullscreen",
+  },
+};
+
+export const popupEmits = {
+  close: () => true,
+};
+
+export type VcPopupProps = ExtractTypes<typeof popupProps>;
+export type VcPopupEmits = typeof popupEmits;
+
+export interface VcPopupSlots {
+  default: () => VNode[];
+}

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,25 +26,11 @@
 </template>
 
 <script lang="ts" setup>
-defineProps({
-  title: {
-    type: String,
-    default: undefined,
-  },
+import { popupEmits, popupProps } from "./vc-popup-model";
 
-  closable: {
-    type: Boolean,
-    default: true,
-  },
+defineProps(popupProps);
 
-  variant: {
-    type: String,
-    default: "fullscreen",
-    enum: ["small", "medium", "fullscreen"],
-  },
-});
-
-defineEmits(["close"]);
+defineEmits(popupEmits);
 </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>
 
@@ -91,8 +87,8 @@
 <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";
+import { ITableColumns } from "./../../../../../../core/types";
+import { VcImage, VcStatus, VcStatusIcon, VcLink } from "./../../../../../components";
 
 export interface Props {
   cell: ITableColumns;
@@ -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-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
@@ -59,7 +65,7 @@ export default defineComponent({
 
 <script lang="ts" setup>
 import { createPopper, Instance } from "@popperjs/core";
-import { VcIcon } from "@/ui/components";
+import { VcIcon } from "./../../../../../components";
 
 export interface Props {
   title: string;

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>
@@ -120,14 +120,14 @@
 
 <script lang="ts" setup>
 import { computed, ref, watch } from "vue";
-import { IActionBuilderResult } from "@/core/types";
-import { VcIcon } from "@/ui/components";
+import { IActionBuilderResult } from "./../../../../../../core/types";
+import { VcIcon } from "./../../../../../components";
 
 export interface Props {
   item: {
-    id: string;
+    id?: string;
   };
-  actionBuilder?: (item: { id: string }) => IActionBuilderResult[];
+  actionBuilder?: (item: { id?: string }) => IActionBuilderResult[];
   swipingItem?: string;
 }
 
@@ -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

@@ -0,0 +1,7 @@
+import { ComponentPublicInstance } from "vue";
+import { VcTableEmits, VcTableProps } from "./vc-table-model";
+import { ComponentConstructor } from "./../../../types/ts-helpers";
+import Table from "./vc-table.vue";
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const VcTable: ComponentConstructor<ComponentPublicInstance<VcTableProps, any, any, any, any, VcTableEmits>> =
+  Table;