@antify/ui 2.5.6 → 3.0.0

package/dist/components/crud/AntCrudTableNav.vue

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

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

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

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

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

@@ -1,90 +0,0 @@
-"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
-  }
-};

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

@@ -1,92 +0,0 @@
-import AntCrudDetail from "../AntCrudDetail.vue";
-import AntCrudDetailNav from "../AntCrudDetailNav.vue";
-import AntCrudDetailActions from "../AntCrudDetailActions.vue";
-import {
-  vueRouter
-} from "storybook-vue3-router";
-const meta = {
-  title: "Crud/Crud Detail",
-  component: AntCrudDetail,
-  parameters: {
-    controls: {
-      sort: "requiredFirst"
-    }
-  },
-  decorators: [
-    () => ({
-      template: '<div class="dashed h-80"><story/></div>'
-    }),
-    vueRouter()
-  ],
-  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/components/crud/__stories/AntCrudDetailActions.stories.d.ts

@@ -1,6 +0,0 @@
-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/components/crud/__stories/AntCrudDetailActions.stories.js

@@ -1,38 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-module.exports = exports.Docs = void 0;
-var _AntTabs = _interopRequireDefault(require("../../tabs/AntTabs.vue"));
-var _AntCrudDetailActions = _interopRequireDefault(require("../AntCrudDetailActions.vue"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const meta = {
-  title: "Crud/Crud Detail Actions",
-  component: _AntCrudDetailActions.default,
-  parameters: {
-    controls: {
-      sort: "requiredFirst"
-    }
-  },
-  decorators: [() => ({
-    template: '<div class="border border-dashed border-base-300"><story/></div>'
-  })],
-  argTypes: {}
-};
-module.exports = meta;
-const Docs = exports.Docs = {
-  render: args => ({
-    components: {
-      AntTabs: _AntTabs.default,
-      AntCrudDetailActions: _AntCrudDetailActions.default
-    },
-    setup() {
-      return {
-        args
-      };
-    },
-    template: '<AntCrudDetailActions v-bind="args"/>'
-  }),
-  args: {}
-};