@antify/ui-module 1.1.3

package/src/runtime/components/table/AntTable.vue

@@ -0,0 +1,192 @@
+<script lang="ts" setup>
+import {AntTableSortDirection, type TableHeader} from './__types/TableHeader.type';
+import {computed, ref, type Ref, watch} from 'vue';
+import {useVModel} from '@vueuse/core';
+import {ColorType} from '../../enums';
+import AntTh from './AntTh.vue';
+import AntTd from './AntTd.vue';
+import AntSpinner from '../AntSpinner.vue';
+import AntSkeleton from '../AntSkeleton.vue';
+
+defineOptions({ inheritAttrs: false });
+
+const emits = defineEmits([
+  'update:modelValue',
+  'update:skeleton',
+  'update:selectedRow',
+  'rowClick',
+  'updateSort'
+]);
+// TODO:: add pagination prop and pagination to table
+const props = withDefaults(
+  defineProps<{
+    selectedRow?: Record<string, unknown> | undefined,
+    headers: TableHeader[];
+    data: Record<string, unknown>[];
+    rowKey?: string;
+    loading?: boolean;
+    selectableRows?: boolean;
+    showLightVersion?: boolean;
+  }>(), {
+    rowKey: 'id',
+    loading: false,
+    selectableRows: false,
+    showLightVersion: false,
+  });
+
+const selected: Ref<Record<string, unknown> | undefined> = useVModel(props, 'selectedRow', emits);
+const _loading: Ref<boolean> = useVModel(props, 'loading', emits);
+const _showLightVersion = ref(props.showLightVersion);
+const _headers = computed(() => {
+  // if (_showLightVersion.value) {
+  //   const lightHeaders = props.headers.filter(header => header.lightVersion);
+  //
+  //   return lightHeaders.length > 0 ? lightHeaders : [props.headers[0]];
+  // }
+
+  return props.headers;
+})
+
+watch(() => props.showLightVersion, (val) => {
+  setTimeout(() => _showLightVersion.value = val, val ? 200 : 400)
+});
+
+function sortTable(header: TableHeader, newDirection: AntTableSortDirection) {
+  // TODO:: Sorting is always done externally, here should only be a emit sort with header and direction.
+  // TODO:: Save current sort in some kind of prop (maybe same as pagination?)
+  // TODO:: Multi column sort?
+  // if (newDirection !== AntTableSortDirection.neutral) {
+  //   if (header.sort) {
+  //     const sortFn = header.sort;
+  //     internalRows.value.sort((a, b) => sortFn(a, b, newDirection));
+  //   } else {
+  //     internalRows.value.sort((a: Record<string, unknown>, b: Record<string, unknown>) => {
+  //       if (newDirection === AntTableSortDirection.asc) {
+  //         return (a[header.identifier] as string) < (b[header.identifier] as string) ? -1 : 1
+  //       } else {
+  //         return (a[header.identifier] as string) > (b[header.identifier] as string) ? -1 : 1
+  //       }
+  //     });
+  //   }
+  // } else {
+  //   // Reset sort to default
+  //   internalRows.value = [ ...props.data ];
+  // }
+
+  emits('updateSort', header, newDirection);
+}
+
+function rowClick(elem: Record<string, unknown>): void {
+  selected.value = elem;
+
+  emits('rowClick', elem);
+}
+</script>
+
+<template>
+  <div
+    class="relative inline-block min-w-full align-middle h-full"
+    data-e2e="table"
+  >
+    <div class="overflow-hidden h-full overflow-x-auto overflow-y-auto">
+      <table
+        v-bind="$attrs"
+        class="min-w-full max-h-full relative"
+        :class="{'h-full': data.length === 0 && !_loading}"
+      >
+        <thead class="bg-neutral-100 sticky top-0 z-10">
+        <tr>
+          <slot name="headerFirstCell"/>
+
+          <template v-for="(header, index) in _headers">
+            <AntTh
+              v-if="!_showLightVersion || (_showLightVersion && header.lightVersion)"
+              :key="`table-header-${header.identifier}-${index}`"
+              :header="header"
+              @sort="sortTable"
+            >
+              <template  #headerContent>
+                <slot name="headerContent" v-bind="header"/>
+              </template>
+            </AntTh>
+          </template>
+
+          <slot name="headerLastCell"></slot>
+        </tr>
+        </thead>
+
+        <tbody class="bg-white relative">
+        <!-- TODO:: Add some kind of virtual list for very large tree data (or required pagination??) -->
+        <tr
+          v-for="(elem, index) in data"
+          :key="`table-row-${elem[rowKey]}-${index}`"
+          :id="elem[rowKey] as string"
+          class="transition-all"
+          :class="{
+            'bg-primary-300 text-primary-300-font': elem === selected,
+            'bg-neutral-50 text-neutral-50-font': elem !== selected && index % 2 === 0,
+            'bg-neutral-100 text-neutral-100-font': elem !== selected && index % 2 !== 0,
+            'cursor-pointer': selectableRows
+          }"
+        >
+          <slot name="rowFirstCell" v-bind="{ elem }"/>
+
+          <template v-for="(header, index) in _headers">
+            <AntTd
+              v-if="!_showLightVersion || (_showLightVersion && header.lightVersion)"
+              :header="header"
+              :element="elem"
+              :align="header.align"
+              :key="`table-cell-${header.identifier}-${index}`"
+              @click="rowClick(elem)"
+            >
+              <template #beforeCellContent="props">
+                <slot name="beforeCellContent" v-bind="props"/>
+              </template>
+
+              <template #cellContent="props">
+                <slot name="cellContent" v-bind="props"/>
+              </template>
+
+              <template #afterCellContent="props">
+                <slot name="afterCellContent" v-bind="props"/>
+              </template>
+            </AntTd>
+          </template>
+
+          <slot name="rowLastCell" v-bind="{ elem }"/>
+        </tr>
+
+        <tr v-if="data.length <= 0 && !_loading">
+          <td
+            colspan="100"
+            class="w-full h-full py-2 text-center text-neutral-50-font text-lg"
+          >
+            <slot name="emptyState">
+              <div class="flex items-center flex-col">
+                <span class="font-semibold">We couldn't find any entry</span>
+              </div>
+            </slot>
+          </td>
+        </tr>
+
+        </tbody>
+      </table>
+    </div>
+
+    <div
+      v-if="data.length > 0 && _loading"
+      class="absolute bg-opacity-50 w-full top-0 bottom-0 bg-neutral-300 flex items-center justify-center"
+    >
+      <AntSpinner class="!w-24 !h-24" :color-type="ColorType.primary"/>
+    </div>
+
+    <div
+      v-if="!data || data.length <= 0 && _loading"
+      class="absolute bg-opacity-50 w-full top-[40px] bottom-0 bg-neutral-300 flex items-center justify-center"
+    >
+      <AntSkeleton
+        v-model="_loading" absolute/>
+    </div>
+  </div>
+</template>

package/src/runtime/components/table/AntTableSortButton.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+
+import AntIcon from '../AntIcon.vue';
+import { faAngleDown, faAngleUp, faMinus } from '@fortawesome/free-solid-svg-icons';
+import { IconSize } from '../__types';
+import { AntTableSortDirection } from './__types/TableHeader.type';
+
+defineEmits([ 'sortClick' ])
+withDefaults(
+  defineProps<{
+    sortDirection?: AntTableSortDirection
+  }>(), {
+    sortDirection: AntTableSortDirection.neutral
+  });
+</script>
+
+<template>
+  <button
+    class="bg-neutral-50 text-neutral-50-font rounded h-[26px] w-[26px] flex items-center justify-center"
+    @click="$emit('sortClick')"
+  >
+    <AntIcon v-if="sortDirection === AntTableSortDirection.asc" :icon="faAngleDown" :size="IconSize.sm"/>
+    <AntIcon v-if="sortDirection === AntTableSortDirection.desc" :icon="faAngleUp" :size="IconSize.sm"/>
+    <AntIcon v-if="sortDirection === AntTableSortDirection.neutral" :icon="faMinus" :size="IconSize.sm"/>
+  </button>
+</template>

package/src/runtime/components/table/AntTd.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+
+import { AntTableAlign, AntTableRowTypes, type TableHeader } from './__types/TableHeader.type';
+import { computed } from 'vue';
+import type { RouteLocationRaw } from 'vue-router';
+
+const props =
+  withDefaults(
+    defineProps<{
+      element: Record<string, unknown>;
+      header: TableHeader;
+      align?: AntTableAlign
+    }>(), {
+      align: AntTableAlign.left
+    });
+
+const cellClasses = computed(() => ({
+  'whitespace-nowrap px-2.5 py-0 h-[40px] text-sm font-medium relative': true,
+  'text-right': props.align === AntTableAlign.right,
+  'text-center': props.align === AntTableAlign.center
+}))
+</script>
+
+<template>
+  <td
+    :class="cellClasses"
+  >
+    <slot
+      name="beforeCellContent"
+      v-bind="{ elem: element, header: header }"
+    />
+
+    <div
+      v-if="header.type === AntTableRowTypes.text"
+      :class="header.rowClassList"
+    >
+      {{ element[header.identifier] }}
+    </div>
+
+    <div
+      v-else-if="header.type === AntTableRowTypes.link && header.toProp"
+    >
+      <router-link :to="element[header.toProp] as RouteLocationRaw" class="absolute inset-0">
+      </router-link>
+      {{ element[header.identifier] }}
+    </div>
+
+    <div
+      v-else-if="header.type === AntTableRowTypes.html"
+      :class="header.rowClassList"
+      v-html="element[header.identifier]"
+    />
+
+    <div
+      v-else-if="header.type === AntTableRowTypes.slot"
+      :class="header.rowClassList"
+    >
+      <slot name="cellContent" v-bind="{ element, header }"></slot>
+    </div>
+
+    <slot
+      name="afterCellContent"
+      v-bind="{ elem: element, header: header }"
+    />
+  </td>
+</template>
+
+<style scoped>
+
+</style>

package/src/runtime/components/table/AntTh.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+
+import { AntTableAlign, AntTableSortDirection, type TableHeader } from './__types/TableHeader.type';
+import { computed, ref, type Ref } from 'vue';
+import AntTableSortButton from './AntTableSortButton.vue';
+
+defineEmits([ 'sort' ])
+const props = defineProps<{
+  header: TableHeader
+}>();
+
+const headerClasses = computed(() => {
+  const classes = {
+    [props.header.headerClassList || '']: true,
+    'px-2.5 py-0 h-[40px] text-sm text-neutral-100-font uppercase font-semi-bold': true,
+    'text-left': !props.header.align || props.header.align === AntTableAlign.left,
+    'text-center': props.header.align === AntTableAlign.center,
+    'text-right': props.header.align === AntTableAlign.right,
+  };
+
+  return classes;
+});
+
+const cellClasses = computed(() => ({
+  'flex gap-2.5 items-center': true,
+  'justify-start': !props.header.align || props.header.align === AntTableAlign.left,
+  'justify-center': props.header.align === AntTableAlign.center,
+  'justify-end': props.header.align === AntTableAlign.right,
+}))
+
+// TODO:: Initial sort should be possible with this
+const sortDirection: Ref<AntTableSortDirection> = ref(AntTableSortDirection.neutral);
+
+function getNewSortDirection(): AntTableSortDirection {
+  if (sortDirection.value === AntTableSortDirection.neutral) {
+    sortDirection.value = AntTableSortDirection.asc;
+    return AntTableSortDirection.asc;
+  }
+
+  if (sortDirection.value === AntTableSortDirection.asc) {
+    sortDirection.value = AntTableSortDirection.desc;
+    return AntTableSortDirection.desc;
+  }
+
+  sortDirection.value = AntTableSortDirection.neutral;
+  return AntTableSortDirection.neutral;
+}
+</script>
+
+<template>
+  <th
+    scope="col"
+    :class="headerClasses"
+  >
+    <div :class="cellClasses">
+      <slot name="headerContent" v-bind="header">
+        {{ header.title }}
+      </slot>
+
+      <AntTableSortButton
+        v-if="header.sortable"
+        @sort-click="$emit('sort', header, getNewSortDirection())"
+        :sort-direction="sortDirection"
+      />
+    </div>
+  </th>
+</template>

package/src/runtime/components/tabs/AntTabItem.vue

@@ -0,0 +1,115 @@
+<script setup lang="ts">
+import AntIcon from '../AntIcon.vue';
+import {
+  faExclamationCircle,
+  faExclamationTriangle,
+  type IconDefinition
+} from '@fortawesome/free-solid-svg-icons';
+import {computed} from 'vue';
+import {type RouteLocationRaw, useRoute} from 'vue-router';
+import {ColorType} from './__types/AntTabItem.types';
+
+const props = withDefaults(defineProps<{
+  label: string;
+  active: boolean;
+  colorType?: ColorType
+  showIcon?: boolean;
+  icon?: IconDefinition;
+  to?: RouteLocationRaw;
+  expanded?: boolean;
+}>(), {
+  colorType: ColorType.base,
+  showIcon: true,
+});
+const route = useRoute();
+
+const icons = {
+  [ColorType.base]: null,
+  [ColorType.danger]: faExclamationCircle,
+  [ColorType.warning]: faExclamationTriangle,
+};
+const iconRight = computed<IconDefinition | null>(() => icons[props.colorType]);
+const _active = computed<boolean>(() => {
+  if (typeof props.to === 'string') {
+    return route.path === props.to;
+  }
+
+  if (typeof props.to === 'object' && props.to?.name !== undefined) {
+    return route.name === props.to.name;
+  }
+
+  return props.active;
+});
+const containerClasses = computed(() => {
+  const variants: Record<ColorType, string> = {
+    [ColorType.base]: 'hover:bg-neutral-100',
+    [ColorType.warning]: 'hover:bg-warning-100',
+    [ColorType.danger]: 'hover:bg-danger-100',
+  };
+  const activeVariants: Record<ColorType, string> = {
+    [ColorType.base]: 'text-primary-500 border-primary-500',
+    [ColorType.warning]: 'text-warning-500 border-warning-500',
+    [ColorType.danger]: 'text-danger-500 border-danger-500',
+  };
+  const notActiveVariants: Record<ColorType, string> = {
+    [ColorType.base]: 'text-neutral-50-font border-neutral-50',
+    [ColorType.warning]: 'text-warning-500',
+    [ColorType.danger]: 'text-danger-500',
+  };
+
+  return {
+    'p-2.5 hover:cursor-pointer text-center flex items-center justify-center gap-2.5 bg-neutral-50 transition-[background-color] relative': true,
+    'grow': props.expanded,
+    [variants[props.colorType]]: true,
+    [activeVariants[props.colorType]]: _active.value,
+    [notActiveVariants[props.colorType]]: !_active.value,
+  }
+});
+const borderBoxClasses = computed(() => {
+  const variants: Record<ColorType, string> = {
+    [ColorType.base]: 'bg-primary-500',
+    [ColorType.warning]: 'bg-warning-500',
+    [ColorType.danger]: 'bg-danger-500',
+  };
+
+  return {
+    'h-[2px] w-full bg-danger-500 absolute bottom-0': true,
+    [variants[props.colorType]]: true,
+  }
+});
+const iconColor = computed(() => {
+  const variants = {
+    [ColorType.base]: 'text-neutral-100-font',
+    [ColorType.warning]: 'text-warning-500',
+    [ColorType.danger]: 'text-danger-500',
+  };
+
+  return variants[props.colorType];
+});
+</script>
+
+<template>
+  <component
+    :is="to !== undefined ? 'router-link' : 'div'"
+    :to="to"
+    :class="containerClasses"
+  >
+    <slot name="iconLeft">
+      <AntIcon
+        v-if="icon"
+        :icon="icon"
+        :color="_active ? 'text-primary-500' : 'text-neutral-50-font'"
+      />
+    </slot>
+
+    <slot>{{ label }}</slot>
+
+    <AntIcon
+      v-if="iconRight && showIcon"
+      :icon="iconRight"
+      :color="iconColor"
+    />
+
+    <div v-if="_active" :class="borderBoxClasses" />
+  </component>
+</template>

package/src/runtime/components/tabs/AntTabs.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import AntTabItem from './AntTabItem.vue';
+import {type TabItem} from './__types/AntTabItem.types';
+import {useVModel} from '@vueuse/core';
+import {computed} from 'vue';
+
+const emits = defineEmits(['update:modelValue']);
+const props = withDefaults(defineProps<{
+  modelValue?: string;
+  tabItems?: TabItem[];
+  expanded?: boolean;
+}>(), {
+  expanded: false,
+});
+
+const currentActive = useVModel(props, 'modelValue', emits);
+const containerClasses = computed(() => ({
+  'flex items-stretch bg-neutral-300 gap-px transition-all h-full': true,
+  'w-fit': !props.expanded,
+  'w-full': props.expanded,
+}));
+
+function clickTab(tabItem: TabItem) {
+  if (tabItem.clickHandler) {
+    tabItem.clickHandler();
+  }
+
+  currentActive.value = tabItem.id;
+}
+</script>
+
+<template>
+  <div :class="containerClasses">
+    <slot>
+      <AntTabItem
+        v-for="(tabItem, index) in tabItems"
+        :key="`tab-item-${index}`"
+        v-bind="tabItem"
+        @click="clickTab(tabItem)"
+        :active="currentActive === tabItem.id"
+        :expanded="expanded"
+      >
+        <slot name="content" v-bind="{item: tabItem, isActive: currentActive === tabItem.id}"></slot>
+      </AntTabItem>
+    </slot>
+  </div>
+</template>

package/src/runtime/components/transitions/AntTransitionCollapseHeight.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+/**
+ * It is not possible to smoothly animate height or max-height with CSS transitions not using a fixed value
+ * like 'height: 1rem';
+ *
+ * This component does it via javascript.
+ */
+
+// @ts-nocheck
+// TODO:: fix typescript errors
+/**
+ * @param {HTMLElement} element
+ */
+function beforeEnter(element) {
+  requestAnimationFrame(() => {
+    if (!element.style.height) {
+      element.style.height = '0px';
+    }
+
+    element.style.display = '';
+    // element.style.display = null;
+  });
+}
+
+/**
+ * @param {HTMLElement} element
+ */
+function enter(element) {
+  requestAnimationFrame(() => {
+    requestAnimationFrame(() => {
+      element.style.height = `${element.scrollHeight}px`;
+    });
+  });
+}
+
+/**
+ * @param {HTMLElement} element
+ */
+function afterEnter(element) {
+  element.style.height = '';
+  // element.style.height = null;
+}
+
+/**
+ * @param {HTMLElement} element
+ */
+function beforeLeave(element) {
+  requestAnimationFrame(() => {
+    if (!element.style.height) {
+      element.style.height = `${element.offsetHeight}px`;
+    }
+  });
+}
+
+/**
+ * @param {HTMLElement} element
+ */
+function leave(element) {
+  requestAnimationFrame(() => {
+    requestAnimationFrame(() => {
+      element.style.height = '0px';
+    });
+  });
+}
+
+/**
+ * @param {HTMLElement} element
+ */
+function afterLeave(element) {
+  element.style.height = '';
+  // element.style.height = null;
+}
+</script>
+
+<template>
+  <transition
+      enter-active-class="enter-active"
+      leave-active-class="leave-active"
+      @before-enter="beforeEnter"
+      @enter="enter"
+      @after-enter="afterEnter"
+      @before-leave="beforeLeave"
+      @leave="leave"
+      @after-leave="afterLeave"
+  >
+    <slot/>
+  </transition>
+</template>
+
+<style scoped>
+.enter-active,
+.leave-active {
+  overflow: hidden;
+  transition: height .4s ease-in-out;
+}
+</style>