@antify/ui-module 1.1.3

package/dist/runtime/components/index.mjs

@@ -0,0 +1,41 @@
+import AntAccordion from "./AntAccordion.vue";
+import AntAccordionItem from "./AntAccordionItem.vue";
+import AntAlert from "./AntAlert.vue";
+import AntDropdown from "./AntDropdown.vue";
+import AntIcon from "./AntIcon.vue";
+import AntKeycap from "./AntKeycap.vue";
+import AntListGroup from "./AntListGroup.vue";
+import AntListGroupItem from "./AntListGroupItem.vue";
+import AntModal from "./AntModal.vue";
+import AntPagination from "./AntPagination.vue";
+import AntPopover from "./AntPopover.vue";
+import AntCrudTableFilter from "./crud/AntCrudTableFilter.vue";
+import AntSkeleton from "./AntSkeleton.vue";
+import AntSpinner from "./AntSpinner.vue";
+import AntTableNav from "./crud/AntCrudTableNav.vue";
+import AntTag from "./AntTag.vue";
+import AntToast from "./AntToast.vue";
+import AntTooltip from "./AntTooltip.vue";
+export * from "./deprecated/elements";
+export * from "./form/index.mjs";
+export * from "./form/Elements/index.mjs";
+export {
+  AntAccordion,
+  AntAccordionItem,
+  AntAlert,
+  AntDropdown,
+  AntIcon,
+  AntKeycap,
+  AntListGroup,
+  AntListGroupItem,
+  AntModal,
+  AntPagination,
+  AntPopover,
+  AntCrudTableFilter,
+  AntSkeleton,
+  AntSpinner,
+  AntTableNav,
+  AntTag,
+  AntToast,
+  AntTooltip
+};

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

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

package/dist/runtime/components/layouts/__stories/AntNavLeftLayout.stories.d.ts

@@ -0,0 +1,7 @@
+import { type Meta, type StoryObj } from '@storybook/vue3';
+import AntNavLeftLayout from '../AntNavLeftLayout.vue';
+declare const meta: Meta<typeof AntNavLeftLayout>;
+export default meta;
+type Story = StoryObj<typeof AntNavLeftLayout>;
+export declare const Docs: Story;
+export declare const WithoutLogo: Story;

package/dist/runtime/components/layouts/__stories/AntNavLeftLayout.stories.mjs

@@ -0,0 +1,68 @@
+import AntTabs from "../../tabs/AntTabs.vue";
+import AntNavLeftLayout from "../AntNavLeftLayout.vue";
+const meta = {
+  title: "Layouts/NavLeftLayout",
+  component: AntNavLeftLayout,
+  parameters: { controls: { sort: "requiredFirst" } },
+  decorators: [() => ({ template: '<div class="border border-dashed border-neutral-300"><story/></div>' })],
+  argTypes: {}
+};
+export default meta;
+export const Docs = {
+  render: (args) => ({
+    components: {
+      AntTabs,
+      AntNavLeftLayout
+    },
+    setup() {
+      return {
+        args
+      };
+    },
+    template: `
+      <AntNavLeftLayout v-bind="args">
+        <template #logo-image>
+          <img src="/logo.svg" class="h-full w-full"/>
+        </template>
+
+        <div class="slot m-2.5">SLOT</div>
+      </AntNavLeftLayout>
+    `
+  }),
+  args: {
+    logoRoute: "/",
+    navbarItems: [
+      {
+        label: "User",
+        active: true
+      },
+      {
+        label: "Invoice"
+      },
+      {
+        label: "Settings"
+      }
+    ]
+  }
+};
+export const WithoutLogo = {
+  render: (args) => ({
+    components: {
+      AntTabs,
+      AntNavLeftLayout
+    },
+    setup() {
+      return {
+        args
+      };
+    },
+    template: `
+      <AntNavLeftLayout v-bind="args">
+        <div class="slot m-2.5">SLOT</div>
+      </AntNavLeftLayout>
+    `
+  }),
+  args: {
+    ...Docs.args
+  }
+};

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

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+
+import { computed } from 'vue';
+import type { NavbarItem } from './__types/NavbarItem';
+import AntNavbarItem from './AntNavbarItem.vue';
+
+defineProps<{
+  navbarItems: NavbarItem[]
+}>();
+
+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/dist/runtime/components/navbar/AntNavbarItem.vue

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import type {NavbarItem} from './__types/NavbarItem';
+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: NavbarItem
+}>()
+
+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/dist/runtime/components/navbar/__stories/AntNavbar.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+import AntNavbar from '../AntNavbar.vue';
+declare const meta: Meta<typeof AntNavbar>;
+export default meta;
+type Story = StoryObj<typeof AntNavbar>;
+export declare const Docs: Story;

package/dist/runtime/components/navbar/__stories/AntNavbar.stories.mjs

@@ -0,0 +1,66 @@
+import AntNavbar from "../AntNavbar.vue";
+import AntNavbarItem from "../AntNavbarItem.vue";
+import { faUserCircle } from "@fortawesome/free-regular-svg-icons";
+import { faBook } from "@fortawesome/free-solid-svg-icons";
+const meta = {
+  title: "Components/Navbar",
+  component: AntNavbar,
+  subcomponents: AntNavbarItem,
+  parameters: {
+    fullscreen: true
+  }
+};
+export default meta;
+export const Docs = {
+  render: (args) => ({
+    components: { AntNavbar },
+    setup() {
+      return {
+        args
+      };
+    },
+    template: `
+      <div class="w-screen h-screen" style="background: url('https://images.unsplash.com/photo-1703136678192-53fda2c5c602?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D') lightgray 50% / cover no-repeat">
+      <div class="h-screen w-52 bg-primary-500">
+        <AntNavbar v-bind="args" />
+      </div>
+      </div>
+    `
+  }),
+  args: {
+    navbarItems: [{
+      icon: faUserCircle,
+      label: "Navbar item",
+      children: [{
+        label: "Child"
+      }]
+    }, {
+      icon: faBook,
+      label: "Navbar item"
+    }, {
+      label: "Navbar item"
+    }, {
+      label: "Navbar item"
+    }, {
+      label: "Navbar item"
+    }, {
+      icon: faBook,
+      label: "Navbar item",
+      active: true,
+      children: [{
+        label: "Child",
+        icon: faBook
+      }]
+    }, {
+      label: "Navbar item"
+    }, {
+      label: "Navbar item"
+    }, {
+      label: "Navbar item"
+    }, {
+      label: "Navbar item"
+    }, {
+      label: "Navbar item"
+    }]
+  }
+};

package/dist/runtime/components/navbar/__types/NavbarItem.d.ts

@@ -0,0 +1,10 @@
+import type { IconDefinition } from '@fortawesome/free-solid-svg-icons';
+import type { RouteLocationRaw } from 'vue-router';
+export type NavbarItem = {
+    label: string;
+    active?: boolean;
+    to?: RouteLocationRaw;
+    click?: () => void;
+    icon?: IconDefinition;
+    children?: NavbarItem[];
+};

package/dist/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/dist/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/dist/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>