@vc-shell/framework 1.0.54 → 1.0.57

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,19 @@
-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;
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { VNode } from "vue";
+import _Table from "./vc-table.vue";
+import { ITableColumns } from "./../../../../core/types";
+
+export const VcTable = _Table as typeof _Table & {
+  new (): {
+    $slots: {
+      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[];
+    };
+  };
+};