@antify/ui-module 1.1.3

package/dist/runtime/components/crud/AntCrudDetailActions.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import AntButton from '../buttons/AntButton.vue';
+import {faAngleLeft} from '@fortawesome/free-solid-svg-icons';
+import AntSaveAndNewButton from '../buttons/AntSaveAndNewButton.vue';
+import AntSaveButton from '../buttons/AntSaveButton.vue';
+
+defineEmits(['back', 'save', 'save-and-new']);
+withDefaults(defineProps<{
+  disabled?: boolean
+  skeleton?: boolean
+}>(), {
+  disabled: false,
+  skeleton: false,
+});
+</script>
+
+<template>
+  <div class="flex justify-between p-2.5 gap-2.5 bg-neutral-50" data-e2e="crud-detail-actions">
+    <div class="flex gap-2.5">
+      <slot name="buttons-left">
+        <AntButton
+          :outlined="false"
+          :filled="true"
+          :icon-left="faAngleLeft"
+          :disabled="disabled"
+          @click="$emit('back')"
+        >
+          Back
+        </AntButton>
+      </slot>
+    </div>
+
+    <div class="flex gap-2.5">
+      <slot name="before-buttons-right"/>
+      <slot name="buttons-right">
+        <AntSaveAndNewButton
+          :skeleton="skeleton"
+          :disabled="disabled"
+          @click="$emit('save-and-new')"
+        />
+
+        <AntSaveButton
+          :skeleton="skeleton"
+          :disabled="disabled"
+          @click="$emit('save')"
+        />
+      </slot>
+      <slot name="after-buttons-right"/>
+    </div>
+  </div>
+</template>

package/dist/runtime/components/crud/AntCrudDetailNav.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+// TODO:: fix why tabs are not full height in story
+import type {TabItem} from '../tabs/__types/AntTabItem.types';
+import AntTabs from '../tabs/AntTabs.vue';
+import AntDeleteButton from '../buttons/AntDeleteButton.vue';
+import AntDeleteDialog from '../dialogs/AntDeleteDialog.vue';
+import {ref} from 'vue';
+
+defineEmits(['delete']);
+withDefaults(defineProps<{
+  tabItems?: TabItem[]
+  disabled?: boolean
+  getEntityName: () => string
+}>(), {
+  disabled: false,
+});
+
+const dialogOpen = ref(false);
+</script>
+
+<template>
+  <div class="flex justify-between items-stretch gap-2.5 bg-neutral-50" data-e2e="crud-detail-nav">
+    <slot name="tabs">
+      <AntTabs
+        :tabItems="tabItems"
+      />
+    </slot>
+
+    <div class="flex gap-2.5 pr-2.5 py-2.5">
+      <slot name="buttons">
+        <slot name="before-delete-button"/>
+
+        <slot name="delete-button">
+          <AntDeleteButton
+            :disabled="disabled"
+            filled
+            @click="() => dialogOpen = true"
+          />
+        </slot>
+
+        <slot name="after-delete-button"/>
+      </slot>
+    </div>
+
+    <AntDeleteDialog
+      v-model:open="dialogOpen"
+      :entity="getEntityName()"
+      @confirm="$emit('delete')"
+    />
+  </div>
+</template>

package/dist/runtime/components/crud/AntCrudTableFilter.vue

@@ -0,0 +1,120 @@
+<script lang="ts" setup>
+// TODO:: This component works only with vue-router. Make it work in storybook.
+// TODO:: add skeleton
+import AntSearch from '../form/AntSearch.vue';
+import AntCreateButton from '../buttons/AntCreateButton.vue';
+import AntDropdown from '../AntDropdown.vue';
+import AntIcon from '../AntIcon.vue';
+import {computed, ref, watch} from 'vue';
+import AntButton from '../buttons/AntButton.vue';
+import {faFilter, faMultiply} from '@fortawesome/free-solid-svg-icons';
+import {ColorType, Grouped, Position} from '../../enums';
+import {useRoute, useRouter} from 'vue-router';
+
+const props = withDefaults(defineProps<{
+  fullWidth?: boolean,
+  showFilter?: boolean,
+  searchQuery?: string,
+  hasFilter?: boolean,
+  skeleton?: boolean,
+}>(), {
+  fullWidth: true,
+  showFilter: true,
+  searchQuery: 'search',
+  hasFilter: false,
+  skeleton: false,
+});
+const emit = defineEmits(['search', 'create', 'removeFilter']);
+const router = useRouter();
+const route = useRoute();
+
+const showDropdown = ref(false);
+const _fullWidth = ref(props.fullWidth)
+const search = computed({
+  get: () => route.query[props.searchQuery] as string || '',
+  set: (value) => {
+    const query = {
+      ...route.query,
+      [props.searchQuery]: value
+    }
+
+    if (!value) {
+      delete query[props.searchQuery];
+    }
+
+    (async () => {
+      await router.replace({
+        ...route,
+        query
+      })
+
+      emit('search', value)
+    })()
+  }
+})
+
+watch(() => props.fullWidth, (val) => {
+  setTimeout(() => {
+    _fullWidth.value = val
+  }, val ? 250 : 300)
+})
+</script>
+
+<template>
+  <div
+    class="flex h-full items-center p-2.5 gap-2.5 bg-neutral-50"
+    data-e2e="crud-table-filter"
+  >
+    <div
+      class="flex gap-2.5 flex-grow"
+      :class="{'flex-grow': !_fullWidth}"
+    >
+      <div :class="{'w-80': _fullWidth, 'w-full': !_fullWidth}">
+        <AntSearch
+          v-model="search"
+          :skeleton="skeleton"
+        />
+      </div>
+
+      <AntDropdown
+        v-if="showFilter"
+        v-model:show-dropdown="showDropdown"
+        :position="Position.left"
+      >
+        <div class="flex">
+          <AntButton
+            :color-type="hasFilter ? ColorType.info : ColorType.base"
+            :grouped="hasFilter ? Grouped.left : Grouped.none"
+            :skeleton="skeleton"
+            :icon-left="faFilter"
+            @click="() => showDropdown = !showDropdown"
+          />
+
+          <AntButton
+            v-if="hasFilter"
+            :color-type="ColorType.info"
+            :grouped="Grouped.right"
+            :skeleton="skeleton"
+            :icon-left="faMultiply"
+            filled
+            @click="$emit('removeFilter')"
+          />
+        </div>
+
+        <template #content>
+          <slot name="dropdownContent"/>
+        </template>
+      </AntDropdown>
+    </div>
+
+    <div v-if="_fullWidth">
+      <slot name="buttons">
+        <AntCreateButton
+          filled
+          :skeleton="skeleton"
+          @click="() => emit('create')"
+        />
+      </slot>
+    </div>
+  </div>
+</template>

package/dist/runtime/components/crud/AntCrudTableNav.vue

@@ -0,0 +1,129 @@
+<script lang="ts" setup>
+// @ts-nocheck
+/**
+ * TODO:: test me in storybook through vue router
+ * TODO:: fix ts errors
+ */
+import {useRouter, useRoute} from 'vue-router'
+import AntPagination from '../AntPagination.vue';
+import {computed, ref, watch} from 'vue';
+import AntSelect from '../form/AntSelect.vue';
+import AntSkeleton from '../AntSkeleton.vue';
+import {type SelectOption} from '../form/__types';
+
+const emit = defineEmits(['changeItemsPerPage', 'changePage'])
+const props = withDefaults(
+  defineProps<{
+    count: number | null,
+    pageQuery?: string,
+    itemsPerPageQuery?: string,
+    fullWidth?: boolean,
+    validItemsPerPage?: number[],
+    skeleton?: boolean
+  }>(),
+  {
+    pageQuery: 'p',
+    itemsPerPageQuery: 'ipp',
+    fullWidth: true,
+    validItemsPerPage: () => [20, 50, 100, 200],
+    skeleton: false
+  }
+)
+
+const route = useRoute()
+const router = useRouter()
+const itemsPerPageOptions = computed(() =>
+  props.validItemsPerPage.map(item => ({
+    label: `${item}`,
+    value: item
+  }) as SelectOption)
+)
+const page = computed(() => {
+  const _page = route.query[props.pageQuery] >= 1 ? Number.parseInt(route.query[props.pageQuery]) : 1
+
+  if (_page <= 0 || _page > pages.value) {
+    return 1
+  }
+
+  return _page
+})
+const itemsPerPage = computed({
+  get() {
+    return route.query[props.itemsPerPageQuery] ?
+      Number.parseInt(route.query[props.itemsPerPageQuery]) :
+      props.validItemsPerPage[0]
+  },
+  set(val) {
+    const query = {...route.query}
+    query[props.itemsPerPageQuery] = `${val}`
+    delete query[props.pageQuery];
+
+    (async () => {
+      await router.push({
+        ...route,
+        query
+      })
+
+      emit('changeItemsPerPage', val)
+    })()
+  }
+})
+const fromItems = computed(() => (itemsPerPage.value * (page.value - 1)))
+const pages = computed(() => Math.ceil(props.count / itemsPerPage.value))
+const _fullWidth = ref(props.fullWidth)
+
+watch(() => props.fullWidth, (val) => {
+  setTimeout(() => {
+    _fullWidth.value = val
+  }, val ? 300 : 200)
+})
+</script>
+
+<template>
+  <div
+    class="w-full"
+    data-e2e="crud-table-nav"
+  >
+    <div
+      class="flex w-full items-center p-2.5"
+      :class="{'justify-end': !_fullWidth, 'justify-between': _fullWidth}"
+    >
+      <div
+        v-if="_fullWidth"
+        class="flex gap-2 items-center text-neutral-50-font text-sm"
+        data-e2e="items-per-page"
+      >
+        <span class="relative">
+          <AntSkeleton v-if="skeleton" rounded absolute/>
+          Items per page
+        </span>
+
+        <AntSelect
+          v-model="itemsPerPage"
+          :options="itemsPerPageOptions"
+          :skeleton="skeleton"
+          :expanded="false"
+        />
+
+        <div v-if="count !== null" class="flex gap-1 relative">
+          <AntSkeleton v-if="skeleton" rounded absolute/>
+
+          <span class="font-medium">{{ fromItems }} - {{ itemsPerPage * page }}</span>
+          <span>of</span>
+          <span
+            class="font-medium"
+            data-e2e="total-items"
+          >{{ count }}</span>
+        </div>
+      </div>
+
+      <AntPagination
+        :pages="pages"
+        :page-query="pageQuery"
+        :skeleton="skeleton"
+        :light-version="!_fullWidth"
+        @input="(val) => emit('changePage', val)"
+      />
+    </div>
+  </div>
+</template>

package/dist/runtime/components/crud/__stories/AntCrud.stories.d.ts

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

package/dist/runtime/components/crud/__stories/AntCrud.stories.mjs

@@ -0,0 +1,126 @@
+import { computed, ref, watch } from "vue";
+import AntTabs from "../../tabs/AntTabs.vue";
+import AntCrud from "../AntCrud.vue";
+import AntCrudTableNav from "../AntCrudTableNav.vue";
+import AntTable from "../../table/AntTable.vue";
+import AntCrudTableFilter from "../AntCrudTableFilter.vue";
+import AntCrudDetail from "../AntCrudDetail.vue";
+import { AntTableRowTypes } from "../../table/__types/TableHeader.type.mjs";
+const meta = {
+  title: "Crud/Crud",
+  component: AntCrud,
+  parameters: {
+    controls: { sort: "requiredFirst" },
+    fullscreen: true
+  },
+  decorators: [() => ({ template: '<div class="h-screen"><story/></div>' })],
+  argTypes: {}
+};
+export default meta;
+function generateTableData(amount) {
+  const tableData = [];
+  for (let i = 0; i < amount; i++) {
+    tableData.push({
+      name: "Lindsay Walton",
+      title: "Front-end Developer",
+      email: "lindsay.walton@gmail.com",
+      streetAddress: "3670 New Road",
+      city: "Birmingham",
+      country: "United Kingdom"
+    });
+  }
+  return tableData;
+}
+export const Docs = {
+  render: (args) => ({
+    components: {
+      AntTabs,
+      AntTable,
+      AntCrudTableNav,
+      AntCrud,
+      AntCrudTableFilter,
+      AntCrudDetail
+    },
+    setup() {
+      const selectedDataItem = ref(null);
+      const fullWidth = computed(() => selectedDataItem.value === null && args.showDetail === false);
+      watch(() => args.showDetail, (showDetail) => {
+        if (showDetail === false) {
+          selectedDataItem.value = null;
+        }
+      });
+      return {
+        args,
+        fullWidth,
+        tableData: generateTableData(50),
+        tableHeaders: [
+          {
+            title: "Name",
+            identifier: "name",
+            type: AntTableRowTypes.text,
+            lightVersion: true
+          },
+          {
+            title: "Title",
+            identifier: "title",
+            type: AntTableRowTypes.text,
+            lightVersion: true
+          },
+          {
+            title: "E-Mail",
+            identifier: "email",
+            type: AntTableRowTypes.text
+          },
+          {
+            title: "Street Address",
+            identifier: "streetAddress",
+            type: AntTableRowTypes.text
+          },
+          {
+            title: "City",
+            identifier: "city",
+            type: AntTableRowTypes.text
+          },
+          {
+            title: "Country",
+            identifier: "country",
+            type: AntTableRowTypes.text
+          }
+        ]
+      };
+    },
+    template: `
+      <AntCrud v-bind="args" :show-detail="!fullWidth">
+        <template #search-section>
+          <AntCrudTableFilter
+            :full-width="fullWidth"
+          />
+        </template>
+
+        <template #table-section>
+          <AntTable
+            :data="tableData"
+            :headers="tableHeaders"
+            :show-light-version="!fullWidth"
+            selectable-rows
+          />
+        </template>
+
+        <template #table-nav-section>
+          <AntCrudTableNav
+            :pages="(1000000 * 20)"
+            :count="1000000"
+            :full-width="fullWidth"
+          />
+        </template>
+
+        <AntCrudDetail>
+          <div class="m-2.5 slot">
+            SLOT
+          </div>
+        </AntCrudDetail>
+      </AntCrud>
+    `
+  }),
+  args: {}
+};

package/dist/runtime/components/crud/__stories/AntCrudDetail.stories.d.ts

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

package/dist/runtime/components/crud/__stories/AntCrudDetail.stories.mjs

@@ -0,0 +1,80 @@
+import AntCrudDetail from "../AntCrudDetail.vue";
+import AntCrudDetailNav from "../AntCrudDetailNav.vue";
+import AntCrudDetailActions from "../AntCrudDetailActions.vue";
+const meta = {
+  title: "Crud/Crud Detail",
+  component: AntCrudDetail,
+  parameters: { controls: { sort: "requiredFirst" } },
+  decorators: [() => ({ template: '<div class="border border-dashed border-neutral-300 h-80"><story/></div>' })],
+  argTypes: {}
+};
+export default meta;
+export const Docs = {
+  render: (args) => ({
+    components: {
+      AntCrudDetail,
+      AntCrudDetailNav,
+      AntCrudDetailActions
+    },
+    setup() {
+      return {
+        args,
+        overflowContent: false,
+        tabItems: [
+          {
+            id: "1",
+            label: "Tab"
+          },
+          {
+            id: "2",
+            label: "Tab"
+          },
+          {
+            id: "3",
+            label: "Tab"
+          }
+        ]
+      };
+    },
+    template: `
+      <AntCrudDetail v-bind="args">
+        <template #header>
+          <AntCrudDetailNav
+            :tab-items="tabItems"
+            :get-entity-name="() => 'Lorem ipsum'"
+          />
+        </template>
+
+        <div
+          class="m-2.5 slot"
+          :class="{'h-96': overflowContent}"
+        >
+          SLOT
+        </div>
+
+        <template #footer>
+          <AntCrudDetailActions/>
+        </template>
+      </AntCrudDetail>
+    `
+  }),
+  args: {}
+};
+export const overflownContent = {
+  render: (args, ctx) => ({
+    // @ts-ignore
+    components: Docs.render(args, ctx).components,
+    setup() {
+      return {
+        // @ts-ignore
+        ...Docs.render(args, ctx).setup(),
+        overflowContent: true
+      };
+    },
+    // @ts-ignore
+    template: Docs.render(args, ctx).template
+  }),
+  args: {
+    ...Docs.args
+  }
+};

package/dist/runtime/components/crud/__stories/AntCrudDetailActions.stories.d.ts

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

package/dist/runtime/components/crud/__stories/AntCrudDetailActions.stories.mjs

@@ -0,0 +1,25 @@
+import AntTabs from "../../tabs/AntTabs.vue";
+import AntCrudDetailActions from "../AntCrudDetailActions.vue";
+const meta = {
+  title: "Crud/Crud Detail Actions",
+  component: AntCrudDetailActions,
+  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,
+      AntCrudDetailActions
+    },
+    setup() {
+      return {
+        args
+      };
+    },
+    template: '<AntCrudDetailActions v-bind="args"/>'
+  }),
+  args: {}
+};

package/dist/runtime/components/crud/__stories/AntCrudDetailNav.stories.d.ts

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

package/dist/runtime/components/crud/__stories/AntCrudDetailNav.stories.mjs

@@ -0,0 +1,41 @@
+import AntTabs from "../../tabs/AntTabs.vue";
+import AntCrudDetailNav from "../AntCrudDetailNav.vue";
+const meta = {
+  title: "Crud/Crud Detail Nav",
+  component: AntCrudDetailNav,
+  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,
+      AntCrudDetailNav
+    },
+    setup() {
+      return {
+        args
+      };
+    },
+    template: '<AntCrudDetailNav v-bind="args"/>'
+  }),
+  args: {
+    getEntityName: () => "Lorem ipsum",
+    tabItems: [
+      {
+        id: "1",
+        label: "Main data"
+      },
+      {
+        id: "2",
+        label: "Related data"
+      },
+      {
+        id: "3",
+        label: "Related data"
+      }
+    ]
+  }
+};

package/dist/runtime/components/crud/__stories/AntCrudTableFilter.stories.d.ts

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

package/dist/runtime/components/crud/__stories/AntCrudTableFilter.stories.mjs

@@ -0,0 +1,25 @@
+import AntCrudTableFilter from "../AntCrudTableFilter.vue";
+const meta = {
+  title: "Crud/Crud Table Filter",
+  component: AntCrudTableFilter,
+  parameters: { controls: { sort: "requiredFirst" } },
+  argTypes: {}
+};
+export default meta;
+export const Docs = {
+  render: (args) => ({
+    components: { AntCrudTableFilter },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div class="border border-neutral-300 border-dashed">
+        <AntCrudTableFilter
+          v-model:search="args.search"
+          v-bind="args"
+        />
+      </div>
+    `
+  }),
+  args: {}
+};