@antify/ui 2.5.5 → 2.5.7

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

@@ -1,97 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-module.exports = exports.Skeleton = exports.InvalidPermission = exports.IconVariant = exports.Grouped = exports.Expanded = exports.Docs = exports.Disabled = void 0;
-var _AntSaveButton = _interopRequireDefault(require("../AntSaveButton.vue"));
-var _enums = require("../../../enums");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const meta = {
-  title: "Components/Buttons/Save Button",
-  component: _AntSaveButton.default,
-  parameters: {
-    controls: {
-      sort: "requiredFirst"
-    }
-  },
-  argTypes: {
-    size: {
-      control: {
-        type: "select"
-      },
-      options: Object.values(_enums.Size)
-    },
-    grouped: {
-      control: {
-        type: "select"
-      },
-      options: Object.values(_enums.Grouped)
-    },
-    tooltipPosition: {
-      control: {
-        type: "select"
-      },
-      options: Object.values(_enums.Position)
-    }
-  }
-};
-module.exports = meta;
-const Docs = exports.Docs = {
-  render: args => ({
-    components: {
-      AntSaveButton: _AntSaveButton.default
-    },
-    setup() {
-      return {
-        args
-      };
-    },
-    template: '<AntSaveButton v-bind="args"/>'
-  }),
-  args: {
-    tooltipPosition: _enums.Position.right
-  }
-};
-const IconVariant = exports.IconVariant = {
-  render: Docs.render,
-  args: {
-    ...Docs.args,
-    iconVariant: true
-  }
-};
-const Disabled = exports.Disabled = {
-  render: Docs.render,
-  args: {
-    ...Docs.args,
-    disabled: true
-  }
-};
-const Grouped = exports.Grouped = {
-  render: Docs.render,
-  args: {
-    ...Docs.args,
-    grouped: _enums.Grouped.left
-  }
-};
-const Skeleton = exports.Skeleton = {
-  render: Docs.render,
-  args: {
-    ...Docs.args,
-    skeleton: true
-  }
-};
-const Expanded = exports.Expanded = {
-  render: Docs.render,
-  args: {
-    ...Docs.args,
-    expanded: true
-  }
-};
-const InvalidPermission = exports.InvalidPermission = {
-  render: Docs.render,
-  args: {
-    ...Docs.args,
-    canSave: false
-  }
-};

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>