@antify/ui-module 1.7.3 → 1.8.2

package/src/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/src/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/src/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/src/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/src/runtime/components/dialogs/AntDeleteDialog.vue

@@ -1,29 +0,0 @@
-<script setup lang="ts">
-import {InputState} from '../../enums';
-import AntDialog from './AntDialog.vue';
-import {useVModel} from '@vueuse/core';
-
-const emit = defineEmits(['update:open', 'close', 'confirm']);
-const props = defineProps<{
-  open: boolean,
-  entity: string
-}>();
-
-const _open = useVModel(props, 'open', emit);
-</script>
-
-<template>
-  <AntDialog
-    v-model:open="_open"
-    :state="InputState.danger"
-    title="Delete"
-    confirm-text="Delete"
-    data-e2e="delete-dialog"
-    @confirm="() => $emit('confirm')"
-    @close="() => $emit('close')"
-  >
-    <div>
-      Do you really want to delete <span class="font-semibold">{{ entity }}</span>?
-    </div>
-  </AntDialog>
-</template>

package/src/runtime/components/dialogs/AntDialog.vue

@@ -1,181 +0,0 @@
-<script setup lang="ts">
-// TODO:: remove ts ignore
-// @ts-nocheck
-import {computed, ref, watch} from 'vue';
-import AntButton from '../buttons/AntButton.vue';
-import AntIcon from '../AntIcon.vue';
-import {
-  faCheckCircle,
-  faExclamationCircle,
-  faExclamationTriangle,
-  faInfoCircle,
-  type IconDefinition,
-} from '@fortawesome/free-solid-svg-icons';
-import {State, InputState} from '../../enums';
-import {IconSize} from '../__types';
-
-const emit = defineEmits(['update:open', 'close', 'confirm']);
-const props = withDefaults(defineProps<{
-  title?: string,
-  open: boolean,
-  confirmText?: string,
-  cancelText?: string,
-  showCancel?: boolean,
-  state?: InputState
-}>(), {
-  state: InputState.base,
-  confirmText: 'Confirm',
-  cancelText: 'Cancel',
-  showCancel: true,
-});
-
-const openDialog = ref(props.open);
-const openBackground = ref(props.open);
-const icons = {
-  [InputState.base]: null,
-  [InputState.info]: faInfoCircle,
-  [InputState.danger]: faExclamationCircle,
-  [InputState.warning]: faExclamationTriangle,
-  [InputState.success]: faCheckCircle,
-};
-
-const iconColor = computed(() => {
-  const variants = {
-    [InputState.base]: 'text-neutral-100-font',
-    [InputState.danger]: 'text-danger-500',
-    [InputState.info]: 'text-info-500',
-    [InputState.success]: 'text-success-500',
-    [InputState.warning]: 'text-warning-500',
-  };
-
-  return variants[props.state];
-});
-
-watch(() => props.open, (val) => {
-  function onKeydown(e: KeyboardEvent) {
-    if (e.key === 'Escape') {
-      emit('update:open', false);
-    }
-  }
-
-  if (val) {
-    openBackground.value = true;
-    setTimeout(() => openDialog.value = true, 100);
-    document.addEventListener('keydown', onKeydown);
-  } else {
-    openDialog.value = false;
-    setTimeout(() => openBackground.value = false, 100);
-    document.removeEventListener('keydown', onKeydown);
-  }
-});
-
-function closeDialog() {
-  emit('update:open', false);
-  emit('close');
-}
-function confirmDialog() {
-  emit('update:open', false);
-  emit('confirm');
-}
-</script>
-
-<template>
-  <Transition name="fade">
-    <div
-      v-if="openBackground"
-      class="absolute inset-0 flex items-center justify-center z-50 cursor-pointer overflow-hidden bg-black/50 backdrop-blur-sm"
-      data-e2e="dialog"
-      @click.self="closeDialog"
-    >
-      <Transition :name="'bounce'">
-        <div
-          v-if="openDialog"
-          class="flex flex-col gap-px bg-neutral-300 overflow-hidden cursor-auto w-96 border border-neutral-300 rounded-md shadow-md"
-        >
-          <div
-            v-if="title || $slots['title']"
-            class="bg-neutral-100 p-2 flex items-center justify-between text-neutral-100-font text-sm font-semibold"
-          >
-            <slot name="title">
-              {{ title }}
-            </slot>
-          </div>
-
-          <div class="bg-white p-2 grow flex items-start gap-2 text-sm text-for-white-bg-font">
-            <slot name="icon">
-              <AntIcon
-                v-if="icons[state]"
-                :size="IconSize.xl3"
-                :icon="icons[state] as unknown as IconDefinition"
-                :color="iconColor"
-                class="px-2.5 w-8 h-8"
-              />
-            </slot>
-
-            <slot />
-          </div>
-
-          <div
-            class="bg-neutral-100 p-2 gap-2 text-for-white-bg-font flex w-full justify-end"
-          >
-            <slot name="footer">
-              <AntButton
-                v-if="showCancel"
-                :state="State.base"
-                @click="closeDialog()"
-              >
-                {{ cancelText }}
-              </AntButton>
-
-              <AntButton
-                :state="state === State.base ? State.primary : state as unknown as State"
-                filled
-                @click="confirmDialog()"
-              >
-                {{ confirmText }}
-              </AntButton>
-            </slot>
-          </div>
-        </div>
-      </Transition>
-    </div>
-  </Transition>
-</template>
-
-<style scoped>
-.fade-leave-active {
-  transition: opacity .5s ease;
-}
-
-.fade-enter-active {
-  transition: opacity 0.3s ease;
-}
-
-.fade-enter-from,
-.fade-leave-to {
-  opacity: 0;
-}
-
-.bounce-enter-active {
-  animation: bounce-in .4s;
-}
-
-.bounce-leave-active {
-  animation: bounce-in .4s reverse;
-}
-
-@keyframes bounce-in {
-  0% {
-    transform: scale(0);
-    opacity: 0;
-  }
-  50% {
-    transform: scale(1.05);
-    opacity: 1;
-  }
-  100% {
-    transform: scale(1);
-    opacity: 1;
-  }
-}
-</style>