@antify/ui-module 1.7.3 → 1.8.2

package/src/runtime/components/layouts/AntNavLeftLayout.vue

@@ -1,36 +0,0 @@
-<script setup lang="ts">
-import {computed, useSlots} from 'vue';
-import AntNavbar from '../navbar/AntNavbar.vue';
-import type {RouteLocationRaw} from 'vue-router';
-import type {NavbarItemTypes} from '../navbar/__types/NavbarItem.types';
-
-defineProps<{
-  navbarItems: NavbarItemTypes[];
-  logoRoute?: RouteLocationRaw;
-}>();
-
-const hasLogoImageSlot = computed(() => useSlots()['logo-image'] || false);
-</script>
-
-<template>
-  <div class="flex gap-px bg-neutral-300 h-screen min-w-full overflow-y-hidden">
-    <div class="flex flex-col gap-px bg-neutral-300 w-52 shrink-0">
-      <component
-        :is="logoRoute ? 'RouterLink' : 'div'"
-        v-if="hasLogoImageSlot"
-        :to="logoRoute"
-        class="bg-white min-h-[60px] flex justify-center items-center p-2.5"
-      >
-        <slot name="logo-image" />
-      </component>
-
-      <AntNavbar
-        :navbar-items="navbarItems"
-      />
-    </div>
-
-    <div class="w-px flex-grow">
-      <slot />
-    </div>
-  </div>
-</template>

package/src/runtime/components/navbar/AntNavbar.vue

@@ -1,25 +0,0 @@
-<script setup lang="ts">
-
-import { computed } from 'vue';
-import type { NavbarItemTypes } from './__types/NavbarItem.types';
-import AntNavbarItem from './AntNavbarItem.vue';
-
-defineProps<{
-  navbarItems: NavbarItemTypes[]
-}>();
-
-const containerClasses = computed(() => ({
-  'w-full h-full bg-white flex flex-col gap-1 p-1.5': true,
-}));
-
-</script>
-
-<template>
-  <div :class="containerClasses">
-    <AntNavbarItem
-      v-for="(navbarItem, index) in navbarItems"
-      :key="`navbar-item-${index}`"
-      :navbar-item="navbarItem"
-    />
-  </div>
-</template>

package/src/runtime/components/navbar/AntNavbarItem.vue

@@ -1,78 +0,0 @@
-<script setup lang="ts">
-import type {NavbarItemTypes} from './__types/NavbarItem.types';
-import {computed, ref} from 'vue';
-import AntIcon from '../AntIcon.vue';
-import {faChevronDown, faChevronUp} from '@fortawesome/free-solid-svg-icons';
-import AntTransitionCollapseHeight from '../transitions/AntTransitionCollapseHeight.vue';
-
-const props = defineProps<{
-  navbarItem: NavbarItemTypes
-}>();
-
-const itemClasses = computed(() => ({
-  'w-full text-sm p-1.5 rounded-md cursor-pointer flex items-center flex-nowrap gap-1': true,
-  'transition-colors hover:bg-neutral-100': true,
-  'text-primary-500': props.navbarItem.active
-}));
-
-const open = ref(false);
-
-function itemClick(): void {
-  if (props.navbarItem.click) {
-    props.navbarItem.click();
-  }
-
-  if (props.navbarItem.children && props.navbarItem.children.length > 0) {
-    open.value = !open.value;
-  }
-}
-</script>
-
-<template>
-  <component
-    :is="navbarItem.to ? 'router-link' : 'div'"
-    :to="navbarItem.to"
-    v-bind="$attrs"
-    :class="itemClasses"
-    @click="itemClick"
-  >
-    <AntIcon
-      v-if="navbarItem.icon"
-      :icon="navbarItem.icon"
-      :color="navbarItem.active ? 'text-primary-500' : 'text-for-white-bg-font'"
-    />
-
-    <div class="flex-grow select-none">
-      {{ navbarItem.label }}
-    </div>
-
-    <div
-      v-if="navbarItem.children && navbarItem.children.length > 0"
-    >
-      <AntIcon
-        v-if="!open"
-        :icon="faChevronDown"
-        :color="navbarItem.active ? 'text-primary-500' : 'text-for-white-bg-font'"
-      />
-
-      <AntIcon
-        v-if="open"
-        :icon="faChevronUp"
-        :color="navbarItem.active ? 'text-primary-500' : 'text-for-white-bg-font'"
-      />
-    </div>
-  </component>
-
-  <AntTransitionCollapseHeight
-    v-if="navbarItem.children && navbarItem.children.length > 0"
-  >
-    <div v-show="open">
-      <AntNavbarItem
-        v-for="(child, index) in navbarItem.children"
-        :key="`navbar-item-child-${index}`"
-        :navbar-item="child"
-        class="pl-[30px]"
-      />
-    </div>
-  </AntTransitionCollapseHeight>
-</template>

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

@@ -1,218 +0,0 @@
-<script lang="ts" setup>
-import {AntTableSize, AntTableSortDirection, type TableHeader} from './__types/TableHeader.types';
-import {computed, ref, type Ref, watch} from 'vue';
-import {useVModel} from '@vueuse/core';
-import {State} 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;
-    size?: AntTableSize
-  }>(), {
-    rowKey: 'id',
-    loading: false,
-    selectableRows: false,
-    showLightVersion: false,
-    size: AntTableSize.md
-  });
-
-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-200 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"
-                :size="size"
-                @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"
-            :id="elem[rowKey] as string"
-            :key="`table-row-${elem[rowKey]}-${index}`"
-            class="transition-all"
-            :class="{
-              'bg-primary-200 text-primary-200-font': elem === selected,
-              'bg-white text-for-white-bg-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)"
-                :key="`table-cell-${header.identifier}-${index}`"
-                :header="header"
-                :element="elem"
-                :align="header.align"
-                :size="size"
-                @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-for-white-bg-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"
-        :state="State.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

@@ -1,48 +0,0 @@
-<script setup lang="ts">
-
-import {faAngleDown, faAngleUp, faMinus} from '@fortawesome/free-solid-svg-icons';
-import {AntTableSize, AntTableSortDirection} from './__types/TableHeader.types';
-import AntButton from '../buttons/AntButton.vue';
-import {computed} from 'vue';
-import {Size} from '../../enums/Size.enum';
-
-defineEmits(['sortClick']);
-const props = withDefaults(
-  defineProps<{
-    sortDirection?: AntTableSortDirection
-    size?: AntTableSize
-  }>(), {
-    sortDirection: AntTableSortDirection.neutral,
-    size: AntTableSize.md
-  });
-
-const buttonSize = computed(() => {
-  if (props.size === AntTableSize.lg) {
-    return Size.sm;
-  } else if (props.size === AntTableSize.md) {
-    return Size.xs;
-  } else {
-    return Size.xs2;
-  }
-});
-const buttonIcon = computed(() => {
-  if (props.sortDirection === AntTableSortDirection.asc) {
-    return faAngleDown;
-  }
-
-  if (props.sortDirection === AntTableSortDirection.desc) {
-    return faAngleUp;
-  }
-
-  if (props.sortDirection === AntTableSortDirection.neutral) {
-    return faMinus;
-  }
-});
-</script>
-
-<template>
-  <AntButton
-    :size="buttonSize"
-    :icon-left="buttonIcon"
-  />
-</template>

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

@@ -1,81 +0,0 @@
-<script setup lang="ts">
-
-import {AntTableAlign, AntTableRowTypes, AntTableSize, type TableHeader} from './__types/TableHeader.types';
-import {computed} from 'vue';
-import type {RouteLocationRaw} from 'vue-router';
-
-const props =
-  withDefaults(
-    defineProps<{
-      element: Record<string, unknown>;
-      header: TableHeader;
-      align?: AntTableAlign
-      size?: AntTableSize
-    }>(), {
-      align: AntTableAlign.left,
-      size: AntTableSize.md
-    });
-
-const cellClasses = computed(() => ({
-  'whitespace-nowrap text-sm font-medium relative': true,
-  'text-right': props.align === AntTableAlign.right,
-  'text-center': props.align === AntTableAlign.center,
-  'px-2.5 py-0 h-10': props.size === AntTableSize.lg,
-  'px-2 py-0 h-9': props.size === AntTableSize.md,
-  'px-1.5 py-0 h-8': props.size === AntTableSize.sm
-}));
-</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"
-    >
-      <RouterLink
-        :to="element[header.toProp] as RouteLocationRaw"
-        class="absolute inset-0"
-      >
-      </RouterLink>
-      {{ 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

@@ -1,78 +0,0 @@
-<script setup lang="ts">
-
-import {AntTableAlign, AntTableSize, AntTableSortDirection, type TableHeader} from './__types/TableHeader.types';
-import {computed, ref, type Ref} from 'vue';
-import AntTableSortButton from './AntTableSortButton.vue';
-
-defineEmits([ 'sort' ]);
-const props = withDefaults(
-  defineProps<{
-    header: TableHeader
-    size?: AntTableSize
-  }>(), {
-    size: AntTableSize.md
-  }
-);
-
-const headerClasses = computed(() => ({
-    [props.header.headerClassList || '']: true,
-    'text-sm text-neutral-200-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,
-    'px-2.5 py-0 h-10': props.size === AntTableSize.lg,
-		'px-2 py-0 h-9': props.size === AntTableSize.md,
-		'px-1.5 py-0 h-8': props.size === AntTableSize.sm
-}));
-
-const cellClasses = computed(() => ({
-  'flex 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,
-	'gap-2.5': props.size === AntTableSize.lg,
-	'gap-2': props.size === AntTableSize.md,
-	'gap-1.5': props.size === AntTableSize.sm,
-}));
-
-// 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-direction="sortDirection"
-        :size="size"
-        @sort-click="$emit('sort', header, getNewSortDirection())"
-      />
-    </div>
-  </th>
-</template>

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

@@ -1,118 +0,0 @@
-<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 {TabItemState} from './__types/AntTabItem.types';
-
-const props = withDefaults(defineProps<{
-  label: string;
-  active: boolean;
-  state?: TabItemState
-  showIcon?: boolean;
-  icon?: IconDefinition;
-  to?: RouteLocationRaw;
-  expanded?: boolean;
-}>(), {
-  state: TabItemState.base,
-  showIcon: true,
-});
-const route = useRoute();
-
-const icons = {
-  [TabItemState.base]: null,
-  [TabItemState.danger]: faExclamationCircle,
-  [TabItemState.warning]: faExclamationTriangle,
-};
-const iconRight = computed<IconDefinition | null>(() => icons[props.state]);
-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<TabItemState, string> = {
-    [TabItemState.base]: 'hover:bg-neutral-100',
-    [TabItemState.warning]: 'hover:bg-warning-100',
-    [TabItemState.danger]: 'hover:bg-danger-100',
-  };
-  const activeVariants: Record<TabItemState, string> = {
-    [TabItemState.base]: 'text-primary-500 border-primary-500',
-    [TabItemState.warning]: 'text-warning-500 border-warning-500',
-    [TabItemState.danger]: 'text-danger-500 border-danger-500',
-  };
-  const notActiveVariants: Record<TabItemState, string> = {
-    [TabItemState.base]: 'text-for-white-bg-font border-white',
-    [TabItemState.warning]: 'text-warning-500',
-    [TabItemState.danger]: 'text-danger-500',
-  };
-
-  return {
-    'p-2 hover:cursor-pointer text-center flex items-center justify-center gap-2 bg-white transition-[background-color] relative text-sm': true,
-    'grow': props.expanded,
-    [variants[props.state]]: true,
-    [activeVariants[props.state]]: _active.value,
-    [notActiveVariants[props.state]]: !_active.value,
-  };
-});
-const borderBoxClasses = computed(() => {
-  const variants: Record<TabItemState, string> = {
-    [TabItemState.base]: 'bg-primary-500',
-    [TabItemState.warning]: 'bg-warning-500',
-    [TabItemState.danger]: 'bg-danger-500',
-  };
-
-  return {
-    'h-[2px] w-full bg-danger-500 absolute bottom-0': true,
-    [variants[props.state]]: true,
-  };
-});
-const iconColor = computed(() => {
-  const variants = {
-    [TabItemState.base]: 'text-neutral-100-font',
-    [TabItemState.warning]: 'text-warning-500',
-    [TabItemState.danger]: 'text-danger-500',
-  };
-
-  return variants[props.state];
-});
-</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-for-white-bg-font'"
-      />
-    </slot>
-
-    <slot>{{ label }}</slot>
-
-    <AntIcon
-      v-if="iconRight && showIcon"
-      :icon="iconRight"
-      :color="iconColor"
-    />
-
-    <div
-      v-if="_active"
-      :class="borderBoxClasses"
-    />
-  </component>
-</template>