@antify/ui-module 1.1.3

package/src/runtime/components/buttons/AntSaveButton.vue

@@ -0,0 +1,31 @@
+<script lang="ts" setup>
+import {Grouped} from '../../enums/Grouped.enum';
+import {Size} from '../../enums/Size.enum';
+import {ColorType} from '../../enums/ColorType.enum';
+import AntButton from './AntButton.vue';
+
+defineEmits(['click', 'blur']);
+defineProps<{
+  size?: Size;
+  disabled?: boolean;
+  grouped?: Grouped;
+  skeleton?: boolean;
+  expanded?: boolean;
+}>()
+</script>
+
+<template>
+  <AntButton
+    :size="size"
+    :disabled="disabled"
+    :grouped="grouped"
+    :skeleton="skeleton"
+    :expanded="expanded"
+    :color-type="ColorType.primary"
+    data-e2e="save-button"
+    @click="$emit('click')"
+    @blur="$emit('blur')"
+  >
+    Save
+  </AntButton>
+</template>

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

@@ -0,0 +1,66 @@
+<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-neutral-50">
+        <slot name="search-section"/>
+      </div>
+
+      <div class="bg-neutral-50 flex-grow h-full overflow-hidden">
+        <slot name="table-section"/>
+      </div>
+
+      <div class="bg-neutral-50">
+        <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 {
+  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/src/runtime/components/crud/AntCrudDetail.vue

@@ -0,0 +1,11 @@
+<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-neutral-50 h-full overflow-y-auto">
+      <slot/>
+    </div>
+
+    <slot name="footer"/>
+  </div>
+</template>

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

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

package/src/runtime/components/crud/AntCrudDetailNav.vue

@@ -0,0 +1,51 @@
+<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';
+
+defineEmits(['delete']);
+withDefaults(defineProps<{
+  tabItems?: TabItem[]
+  disabled?: boolean
+  getEntityName: () => string
+}>(), {
+  disabled: false,
+});
+
+const dialogOpen = ref(false);
+</script>
+
+<template>
+  <div class="flex justify-between items-stretch gap-2.5 bg-neutral-50" data-e2e="crud-detail-nav">
+    <slot name="tabs">
+      <AntTabs
+        :tabItems="tabItems"
+      />
+    </slot>
+
+    <div class="flex gap-2.5 pr-2.5 py-2.5">
+      <slot name="buttons">
+        <slot name="before-delete-button"/>
+
+        <slot name="delete-button">
+          <AntDeleteButton
+            :disabled="disabled"
+            filled
+            @click="() => dialogOpen = true"
+          />
+        </slot>
+
+        <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

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

package/src/runtime/components/crud/AntCrudTableNav.vue

@@ -0,0 +1,129 @@
+<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 '../form/AntSelect.vue';
+import AntSkeleton from '../AntSkeleton.vue';
+import {type SelectOption} from '../form/__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)))
+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.5"
+      :class="{'justify-end': !_fullWidth, 'justify-between': _fullWidth}"
+    >
+      <div
+        v-if="_fullWidth"
+        class="flex gap-2 items-center text-neutral-50-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 }} - {{ itemsPerPage * page }}</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

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import {InputColorType} 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"
+    :color-type="InputColorType.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

@@ -0,0 +1,181 @@
+<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 {ColorType, InputColorType} 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,
+  colorType?: InputColorType
+}>(), {
+  colorType: InputColorType.base,
+  confirmText: 'Confirm',
+  cancelText: 'Cancel',
+  showCancel: true,
+});
+
+const openDialog = ref(props.open);
+const openBackground = ref(props.open);
+const icons = {
+  [InputColorType.base]: null,
+  [InputColorType.info]: faInfoCircle,
+  [InputColorType.danger]: faExclamationCircle,
+  [InputColorType.warning]: faExclamationTriangle,
+  [InputColorType.success]: faCheckCircle,
+};
+
+const iconColor = computed(() => {
+  const variants = {
+    [InputColorType.base]: 'text-neutral-100-font',
+    [InputColorType.danger]: 'text-danger-500',
+    [InputColorType.info]: 'text-info-500',
+    [InputColorType.success]: 'text-success-500',
+    [InputColorType.warning]: 'text-warning-500',
+  };
+
+  return variants[props.colorType];
+});
+
+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.5 flex items-center justify-between text-neutral-100-font text-sm font-semibold"
+          >
+            <slot name="title">
+              {{ title }}
+            </slot>
+          </div>
+
+          <div class="bg-neutral-50 p-2.5 grow flex items-center gap-2.5 text-sm">
+            <slot name="icon">
+              <AntIcon
+                v-if="icons[colorType]"
+                :size="IconSize.xl3"
+                :icon="icons[colorType] as unknown as IconDefinition"
+                :color="iconColor"
+                class="px-2.5 w-8 h-8"
+              />
+            </slot>
+
+            <slot/>
+          </div>
+
+          <div
+            class="bg-neutral-100 p-2.5 gap-2.5 text-neutral-50-font flex w-full justify-end"
+          >
+            <slot name="footer">
+              <AntButton
+                v-if="showCancel"
+                :color-type="ColorType.base"
+                @click="closeDialog()"
+              >
+                {{ cancelText }}
+              </AntButton>
+
+              <AntButton
+                :color-type="colorType === ColorType.base ? ColorType.primary : colorType as unknown as ColorType"
+                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>