@antify/ui 2.5.6 → 2.5.7

package/dist/components/buttons/__stories/AntSaveButton.stories.mjs

@@ -1,94 +0,0 @@
-import AntSaveButton from "../AntSaveButton.vue";
-import {
-  Position,
-  Grouped as _Grouped,
-  Size
-} from "../../../enums/index.mjs";
-const meta = {
-  title: "Components/Buttons/Save Button",
-  component: AntSaveButton,
-  parameters: {
-    controls: {
-      sort: "requiredFirst"
-    }
-  },
-  argTypes: {
-    size: {
-      control: {
-        type: "select"
-      },
-      options: Object.values(Size)
-    },
-    grouped: {
-      control: {
-        type: "select"
-      },
-      options: Object.values(_Grouped)
-    },
-    tooltipPosition: {
-      control: {
-        type: "select"
-      },
-      options: Object.values(Position)
-    }
-  }
-};
-export default meta;
-export const Docs = {
-  render: (args) => ({
-    components: {
-      AntSaveButton
-    },
-    setup() {
-      return {
-        args
-      };
-    },
-    template: '<AntSaveButton v-bind="args"/>'
-  }),
-  args: {
-    tooltipPosition: Position.right
-  }
-};
-export const IconVariant = {
-  render: Docs.render,
-  args: {
-    ...Docs.args,
-    iconVariant: true
-  }
-};
-export const Disabled = {
-  render: Docs.render,
-  args: {
-    ...Docs.args,
-    disabled: true
-  }
-};
-export const Grouped = {
-  render: Docs.render,
-  args: {
-    ...Docs.args,
-    grouped: _Grouped.left
-  }
-};
-export const Skeleton = {
-  render: Docs.render,
-  args: {
-    ...Docs.args,
-    skeleton: true
-  }
-};
-export const Expanded = {
-  render: Docs.render,
-  args: {
-    ...Docs.args,
-    expanded: true
-  }
-};
-export const InvalidPermission = {
-  render: Docs.render,
-  args: {
-    ...Docs.args,
-    canSave: false
-  }
-};

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

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

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

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

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

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

package/dist/components/crud/AntCrud.vue

@@ -1,75 +0,0 @@
-<script setup lang="ts">
-withDefaults(defineProps<{
-  showDetail?: boolean;
-}>(), {
-  showDetail: false,
-});
-</script>
-
-<template>
-  <div
-    class="flex w-full h-full"
-    data-e2e="crud"
-  >
-    <div
-      class="left-content h-full flex flex-col bg-base-300 gap-px overflow-hidden"
-      :class="{'w-[40rem]': showDetail, 'w-full': !showDetail}"
-    >
-      <div class="bg-white">
-        <slot name="search-section" />
-      </div>
-
-      <div class="bg-white grow h-px overflow-hidden">
-        <slot name="table-section" />
-      </div>
-
-      <div class="bg-white">
-        <slot name="table-nav-section" />
-      </div>
-    </div>
-
-    <Transition name="right-content">
-      <div
-        v-if="showDetail"
-        class="flex flex-col gap-px border-l border-base-300 overflow-hidden"
-        :class="{'w-full': showDetail}"
-      >
-        <slot />
-      </div>
-    </Transition>
-  </div>
-</template>
-
-<style scoped>
-.left-content {
-  transition: width .5s ease-in-out, opacity .5s ease;
-}
-
-.right-content-enter-active {
-  transition: width .5s ease-in-out, opacity .5s ease .3s;
-}
-
-.right-content-enter-from {
-  width: 0;
-  opacity: 0;
-}
-
-.right-content-enter-to {
-  width: 100%;
-  opacity: 1;
-}
-
-.right-content-leave-active {
-  transition: width .5s ease-in-out, opacity .2s ease;
-}
-
-.right-content-leave-from {
-  width: 100%;
-  opacity: 1;
-}
-
-.right-content-leave-to {
-  width: 0;
-  opacity: 0;
-}
-</style>

package/dist/components/crud/AntCrudDetail.vue

@@ -1,14 +0,0 @@
-<template>
-  <div
-    class="flex flex-col bg-base-300 gap-px h-full"
-    data-e2e="crud-detail"
-  >
-    <slot name="header" />
-
-    <div class="grow h-px overflow-y-auto bg-base-100">
-      <slot />
-    </div>
-
-    <slot name="footer" />
-  </div>
-</template>

package/dist/components/crud/AntCrudDetailActions.vue

@@ -1,65 +0,0 @@
-<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;
-  canSave?: boolean;
-}>(), {
-  disabled: false,
-  skeleton: false,
-  canSave: true,
-});
-</script>
-
-<template>
-  <div
-    class="flex justify-between p-2 gap-2 bg-white"
-    data-e2e="crud-detail-actions"
-  >
-    <div class="flex gap-2.5">
-      <slot name="buttons-left">
-        <AntButton
-          :outlined="false"
-          :filled="false"
-          :icon-left="faAngleLeft"
-          :disabled="disabled"
-          :skeleton="skeleton"
-          @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"
-          :can-save="canSave"
-          @click="$emit('save-and-new')"
-        />
-
-        <AntSaveButton
-          :skeleton="skeleton"
-          :disabled="disabled"
-          :can-save="canSave"
-          @click="$emit('save')"
-        />
-      </slot>
-      <slot name="after-buttons-right" />
-    </div>
-  </div>
-</template>

package/dist/components/crud/AntCrudDetailNav.vue

@@ -1,72 +0,0 @@
-<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"
-        :skeleton="skeleton"
-      />
-    </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"
-          :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

@@ -1,141 +0,0 @@
-<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;
-  showSearch?: boolean;
-  searchQuery?: string;
-  hasFilter?: boolean;
-  canCreate?: boolean;
-  skeleton?: boolean;
-  searchPlaceholderText?: string;
-}>(), {
-  fullWidth: true,
-  showFilter: true,
-  showSearch: true,
-  searchQuery: 'search',
-  hasFilter: false,
-  canCreate: true,
-  skeleton: false,
-  searchPlaceholderText: 'Search',
-});
-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 grow"
-      :class="{'grow': !_fullWidth}"
-    >
-      <div :class="{'w-80': _fullWidth, 'w-full': !_fullWidth}">
-        <slot name="filter">
-          <AntSearch
-            v-if="showSearch"
-            v-model="search"
-            :skeleton="skeleton"
-            :placeholder="searchPlaceholderText"
-          />
-        </slot>
-      </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>
-      <slot name="buttons">
-        <AntCreateButton
-          :skeleton="skeleton"
-          :can-create="canCreate"
-          :invalid-permission-tooltip-position="Position.left"
-          @click="() => emit('create')"
-        />
-      </slot>
-    </div>
-  </div>
-</template>

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;