@antify/ui 1.0.0

package/dist/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 h-full !text-white !border-white">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/components/navbar/AntNavbar.vue

@@ -0,0 +1,25 @@
+<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/dist/components/navbar/AntNavbarItem.vue

@@ -0,0 +1,78 @@
+<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/dist/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/components/navbar/__stories/AntNavbar.stories.js

@@ -0,0 +1,73 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = exports.Docs = void 0;
+var _AntNavbar = _interopRequireDefault(require("../AntNavbar.vue"));
+var _AntNavbarItem = _interopRequireDefault(require("../AntNavbarItem.vue"));
+var _freeRegularSvgIcons = require("@fortawesome/free-regular-svg-icons");
+var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const meta = {
+  title: "Components/Navbar",
+  component: _AntNavbar.default,
+  subcomponents: _AntNavbarItem.default,
+  parameters: {
+    fullscreen: true
+  }
+};
+module.exports = meta;
+const Docs = exports.Docs = {
+  render: args => ({
+    components: {
+      AntNavbar: _AntNavbar.default
+    },
+    setup() {
+      return {
+        args
+      };
+    },
+    template: `
+      <div class="w-64 dashed">
+        <AntNavbar v-bind="args" />
+      </div>
+    `
+  }),
+  args: {
+    navbarItems: [{
+      icon: _freeRegularSvgIcons.faUserCircle,
+      label: "Navbar item",
+      children: [{
+        label: "Child"
+      }]
+    }, {
+      icon: _freeSolidSvgIcons.faBook,
+      label: "Navbar item"
+    }, {
+      label: "Navbar item"
+    }, {
+      label: "Navbar item"
+    }, {
+      label: "Navbar item"
+    }, {
+      icon: _freeSolidSvgIcons.faBook,
+      label: "Navbar item",
+      active: true,
+      children: [{
+        label: "Child",
+        icon: _freeSolidSvgIcons.faBook
+      }]
+    }, {
+      label: "Navbar item"
+    }, {
+      label: "Navbar item"
+    }, {
+      label: "Navbar item"
+    }, {
+      label: "Navbar item"
+    }, {
+      label: "Navbar item"
+    }]
+  }
+};

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

@@ -0,0 +1,64 @@
+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-64 dashed">
+        <AntNavbar v-bind="args" />
+      </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/components/navbar/__types/NavbarItem.types.d.ts

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

package/dist/components/navbar/__types/NavbarItem.types.js

@@ -0,0 +1 @@
+"use strict";

package/dist/components/navbar/__types/index.d.ts

@@ -0,0 +1 @@
+export * from './NavbarItem.types';

package/dist/components/navbar/__types/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _NavbarItem = require("./NavbarItem.types");
+Object.keys(_NavbarItem).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _NavbarItem[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _NavbarItem[key];
+    }
+  });
+});

package/dist/components/navbar/__types/index.mjs

@@ -0,0 +1 @@
+export * from "./NavbarItem.types.mjs";

package/dist/components/table/AntTable.vue

@@ -0,0 +1,218 @@
+<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/dist/components/table/AntTableSortButton.vue

@@ -0,0 +1,48 @@
+<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>