@antify/ui-module 1.7.3 → 1.8.2

package/dist/runtime/components/buttons/__stories/AntSaveAndNewButton.stories.mjs

@@ -1,76 +0,0 @@
-import AntSaveAndNewButton from "../AntSaveAndNewButton.vue";
-import { Position, Grouped as _Grouped, Size } from "../../../enums/index.mjs";
-const meta = {
-  title: "Components/Buttons/Save And New Button",
-  component: AntSaveAndNewButton,
-  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: { AntSaveAndNewButton },
-    setup() {
-      return { args };
-    },
-    template: '<AntSaveAndNewButton 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/runtime/components/buttons/__stories/AntSaveButton.stories.d.ts

@@ -1,12 +0,0 @@
-import AntSaveButton from '../AntSaveButton.vue';
-import { type Meta, type StoryObj } from '@storybook/vue3';
-declare const meta: Meta<typeof AntSaveButton>;
-export default meta;
-type Story = StoryObj<typeof AntSaveButton>;
-export declare const Docs: Story;
-export declare const IconVariant: Story;
-export declare const Disabled: Story;
-export declare const Grouped: Story;
-export declare const Skeleton: Story;
-export declare const Expanded: Story;
-export declare const InvalidPermission: Story;

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

@@ -1,76 +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/runtime/components/buttons/__types/AntButton.types.d.ts

@@ -1,4 +0,0 @@
-export declare enum ButtonType {
-    button = "button",
-    submit = "submit"
-}

package/dist/runtime/components/buttons/__types/AntButton.types.mjs

@@ -1,5 +0,0 @@
-export var ButtonType = /* @__PURE__ */ ((ButtonType2) => {
-  ButtonType2["button"] = "button";
-  ButtonType2["submit"] = "submit";
-  return ButtonType2;
-})(ButtonType || {});

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

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

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

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

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

@@ -1,45 +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-neutral-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 flex-grow h-full 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-neutral-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{opacity:0;width:0}.right-content-enter-to{opacity:1;width:100%}.right-content-leave-active{transition:width .5s ease-in-out,opacity .2s ease}.right-content-leave-from{opacity:1;width:100%}.right-content-leave-to{opacity:0;width:0}
-</style>

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

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

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

@@ -1,58 +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"
-          @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/runtime/components/crud/AntCrudDetailNav.vue

@@ -1,64 +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"
-      />
-    </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/runtime/components/crud/AntCrudTableFilter.vue

@@ -1,122 +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,
-	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/runtime/components/crud/AntCrudTableNav.vue

@@ -1,149 +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/runtime/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;