@antify/ui 1.0.0

package/dist/components/crud/AntCrudDetailNav.vue

@@ -0,0 +1,64 @@
+<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';
+import {Position} from '../../enums';
+
+defineEmits(['delete']);
+withDefaults(defineProps<{
+  tabItems?: TabItem[]
+  deleteButtonDisabled?: boolean
+  getEntityName: () => string
+  canDelete?: boolean
+  showDeleteButton?: boolean
+  skeleton?: boolean
+}>(), {
+  tabItems: () => [],
+  deleteButtonDisabled: false,
+  canDelete: true,
+  showDeleteButton: true,
+  skeleton: false
+});
+
+const dialogOpen = ref(false);
+</script>
+
+<template>
+  <div
+    class="flex justify-between items-stretch gap-2 bg-white h-[52px]"
+    data-e2e="crud-detail-nav"
+  >
+    <slot name="tabs">
+      <AntTabs
+        :tab-items="tabItems"
+      />
+    </slot>
+
+    <div class="flex gap-2 pr-2 py-2">
+      <slot name="buttons">
+        <slot name="before-delete-button"/>
+
+        <AntDeleteButton
+          v-if="showDeleteButton"
+          :disabled="deleteButtonDisabled || !canDelete"
+          :skeleton="skeleton"
+          filled
+          :can-delete="canDelete"
+          :invalid-permission-tooltip-position="Position.left"
+          @click="() => dialogOpen = true"
+        />
+
+        <slot name="after-delete-button"/>
+      </slot>
+    </div>
+
+    <AntDeleteDialog
+      v-model:open="dialogOpen"
+      :entity="getEntityName()"
+      @confirm="$emit('delete')"
+    />
+  </div>
+</template>

package/dist/components/crud/AntCrudTableFilter.vue

@@ -0,0 +1,122 @@
+<script lang="ts" setup>
+// TODO:: This component works only with vue-router. Make it work in storybook.
+import AntSearch from '../inputs/AntSearch.vue';
+import AntCreateButton from '../buttons/AntCreateButton.vue';
+import AntDropdown from '../AntDropdown.vue';
+import {computed, ref, watch} from 'vue';
+import AntButton from '../buttons/AntButton.vue';
+import {faFilter, faMultiply} from '@fortawesome/free-solid-svg-icons';
+import {State, Grouped, Position} from '../../enums';
+import {useRoute, useRouter} from 'vue-router';
+
+const props = withDefaults(defineProps<{
+  fullWidth?: boolean,
+  showFilter?: boolean,
+  searchQuery?: string,
+  hasFilter?: boolean,
+  canCreate?: boolean,
+  skeleton?: boolean,
+}>(), {
+  fullWidth: true,
+  showFilter: true,
+  searchQuery: 'search',
+  hasFilter: false,
+  canCreate: true,
+  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 gap-2 bg-white"
+    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
+            :state="hasFilter ? State.info : State.base"
+            :grouped="hasFilter ? Grouped.left : Grouped.none"
+            :skeleton="skeleton"
+            :icon-left="faFilter"
+            @click="() => showDropdown = !showDropdown"
+          />
+
+          <AntButton
+            v-if="hasFilter"
+            :state="State.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"
+          :can-create="canCreate"
+          :invalid-permission-tooltip-position="Position.left"
+          @click="() => emit('create')"
+        />
+      </slot>
+    </div>
+  </div>
+</template>

package/dist/components/crud/AntCrudTableNav.vue

@@ -0,0 +1,149 @@
+<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 '../inputs/AntSelect.vue';
+import AntSkeleton from '../AntSkeleton.vue';
+import {type SelectOption} from '../inputs/__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)) + 1);
+const toItems = computed(() => {
+  const items = itemsPerPage.value * page.value;
+
+  if (page.value === pages.value && items > props.count) {
+    return props.count;
+  }
+
+  return itemsPerPage.value * page.value;
+});
+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"
+      :class="{'justify-end': !_fullWidth, 'justify-between': _fullWidth}"
+    >
+      <div
+        v-if="_fullWidth"
+        class="flex gap-2 items-center text-for-white-bg-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 }} - {{ toItems }}</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/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/components/crud/__stories/AntCrud.stories.js

@@ -0,0 +1,131 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = exports.Docs = void 0;
+var _vue = require("vue");
+var _AntTabs = _interopRequireDefault(require("../../tabs/AntTabs.vue"));
+var _AntCrud = _interopRequireDefault(require("../AntCrud.vue"));
+var _AntCrudTableNav = _interopRequireDefault(require("../AntCrudTableNav.vue"));
+var _AntTable = _interopRequireDefault(require("../../table/AntTable.vue"));
+var _AntCrudTableFilter = _interopRequireDefault(require("../AntCrudTableFilter.vue"));
+var _AntCrudDetail = _interopRequireDefault(require("../AntCrudDetail.vue"));
+var _TableHeader = require("../../table/__types/TableHeader.types");
+var _storybookVue3Router = require("storybook-vue3-router");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const meta = {
+  title: "Crud/Crud",
+  component: _AntCrud.default,
+  parameters: {
+    controls: {
+      sort: "requiredFirst"
+    },
+    fullscreen: true
+  },
+  decorators: [() => ({
+    template: '<div class="dashed h-80"><story/></div>'
+  }), (0, _storybookVue3Router.vueRouter)()],
+  argTypes: {}
+};
+module.exports = 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;
+}
+const Docs = exports.Docs = {
+  render: args => ({
+    components: {
+      AntTabs: _AntTabs.default,
+      AntTable: _AntTable.default,
+      AntCrudTableNav: _AntCrudTableNav.default,
+      AntCrud: _AntCrud.default,
+      AntCrudTableFilter: _AntCrudTableFilter.default,
+      AntCrudDetail: _AntCrudDetail.default
+    },
+    setup() {
+      const selectedDataItem = (0, _vue.ref)(null);
+      const fullWidth = (0, _vue.computed)(() => selectedDataItem.value === null && args.showDetail === false);
+      (0, _vue.watch)(() => args.showDetail, showDetail => {
+        if (showDetail === false) {
+          selectedDataItem.value = null;
+        }
+      });
+      return {
+        args,
+        fullWidth,
+        tableData: generateTableData(50),
+        tableHeaders: [{
+          title: "Name",
+          identifier: "name",
+          type: _TableHeader.AntTableRowTypes.text,
+          lightVersion: true
+        }, {
+          title: "Title",
+          identifier: "title",
+          type: _TableHeader.AntTableRowTypes.text,
+          lightVersion: true
+        }, {
+          title: "E-Mail",
+          identifier: "email",
+          type: _TableHeader.AntTableRowTypes.text
+        }, {
+          title: "Street Address",
+          identifier: "streetAddress",
+          type: _TableHeader.AntTableRowTypes.text
+        }, {
+          title: "City",
+          identifier: "city",
+          type: _TableHeader.AntTableRowTypes.text
+        }, {
+          title: "Country",
+          identifier: "country",
+          type: _TableHeader.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/components/crud/__stories/AntCrud.stories.mjs

@@ -0,0 +1,130 @@
+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.types.mjs";
+import { vueRouter } from "storybook-vue3-router";
+const meta = {
+  title: "Crud/Crud",
+  component: AntCrud,
+  parameters: {
+    controls: { sort: "requiredFirst" },
+    fullscreen: true
+  },
+  decorators: [
+    () => ({ template: '<div class="dashed h-80"><story/></div>' }),
+    vueRouter()
+  ],
+  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/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/components/crud/__stories/AntCrudDetail.stories.js

@@ -0,0 +1,90 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.overflownContent = exports.default = exports.Docs = void 0;
+var _AntCrudDetail = _interopRequireDefault(require("../AntCrudDetail.vue"));
+var _AntCrudDetailNav = _interopRequireDefault(require("../AntCrudDetailNav.vue"));
+var _AntCrudDetailActions = _interopRequireDefault(require("../AntCrudDetailActions.vue"));
+var _storybookVue3Router = require("storybook-vue3-router");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const meta = {
+  title: "Crud/Crud Detail",
+  component: _AntCrudDetail.default,
+  parameters: {
+    controls: {
+      sort: "requiredFirst"
+    }
+  },
+  decorators: [() => ({
+    template: '<div class="dashed h-80"><story/></div>'
+  }), (0, _storybookVue3Router.vueRouter)()],
+  argTypes: {}
+};
+module.exports = meta;
+const Docs = exports.Docs = {
+  render: args => ({
+    components: {
+      AntCrudDetail: _AntCrudDetail.default,
+      AntCrudDetailNav: _AntCrudDetailNav.default,
+      AntCrudDetailActions: _AntCrudDetailActions.default
+    },
+    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: {}
+};
+const overflownContent = exports.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
+  }
+};