@vc-shell/framework 1.0.54 → 1.0.56

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

@@ -67,14 +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 { galleryEmits, galleryProps } from "./vc-gallery-model";
 
-const props = defineProps(galleryProps);
+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: () => [],
+  tooltipIcon: "fas fa-info",
+  uploadIcon: "fas fa-upload",
+  variant: "gallery",
+  itemActions: () => ({
+    preview: true,
+    edit: true,
+    remove: true,
+  }),
+  name: "Gallery",
+});
 
-const emit = defineEmits(galleryEmits);
+const emit = defineEmits<Emits>();
 
 const preview = ref(false);
 const previewImageIndex = ref();

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

@@ -1,5 +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,15 @@
 </template>
 
 <script lang="ts" setup>
-import { loginFormProps } from "./vc-login-form-model";
+export interface Props {
+  logo: string;
+  background: string;
+  title?: string;
+}
 
-defineProps(loginFormProps);
+withDefaults(defineProps<Props>(), {
+  title: "Login",
+});
 
 console.debug("Init vc-login-form");
 </script>

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

@@ -1,7 +1,9 @@
-import { ComponentPublicInstance } from "vue";
-import { VcPopupEmits, VcPopupProps } from "./vc-popup-model";
-import { ComponentConstructor } from "./../../../types/ts-helpers";
+import { VNode } from "vue";
 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;
+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

@@ -26,11 +26,22 @@
 </template>
 
 <script lang="ts" setup>
-import { popupEmits, popupProps } from "./vc-popup-model";
+export interface Props {
+  title?: string;
+  closable?: boolean;
+  variant?: "small" | "medium" | "fullscreen";
+}
+
+export interface Emits {
+  (event: "close"): void;
+}
 
-defineProps(popupProps);
+withDefaults(defineProps<Props>(), {
+  closable: true,
+  variant: "fullscreen",
+});
 
-defineEmits(popupEmits);
+defineEmits<Emits>();
 </script>
 
 <style lang="scss">

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/index.ts

@@ -1,7 +1,17 @@
-import { ComponentPublicInstance } from "vue";
-import { VcTableEmits, VcTableProps } from "./vc-table-model";
-import { ComponentConstructor } from "./../../../types/ts-helpers";
+import { VNode } from "vue";
 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;
+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;