@antify/ui-module 1.7.3 → 1.8.2

package/dist/runtime/components/crud/__stories/AntCrud.stories.mjs

@@ -1,126 +0,0 @@
-import { computed, ref, watch } from "vue";
-import AntTabs from "../../tabs/AntTabs.vue";
-import AntCrud from "../AntCrud.vue";
-import AntCrudTableNav from "../AntCrudTableNav.vue";
-import AntTable from "../../table/AntTable.vue";
-import AntCrudTableFilter from "../AntCrudTableFilter.vue";
-import AntCrudDetail from "../AntCrudDetail.vue";
-import { AntTableRowTypes } from "../../table/__types/TableHeader.types.mjs";
-const meta = {
-  title: "Crud/Crud",
-  component: AntCrud,
-  parameters: {
-    controls: { sort: "requiredFirst" },
-    fullscreen: true
-  },
-  decorators: [() => ({ template: '<div class="h-screen"><story/></div>' })],
-  argTypes: {}
-};
-export default meta;
-function generateTableData(amount) {
-  const tableData = [];
-  for (let i = 0; i < amount; i++) {
-    tableData.push({
-      name: "Lindsay Walton",
-      title: "Front-end Developer",
-      email: "lindsay.walton@gmail.com",
-      streetAddress: "3670 New Road",
-      city: "Birmingham",
-      country: "United Kingdom"
-    });
-  }
-  return tableData;
-}
-export const Docs = {
-  render: (args) => ({
-    components: {
-      AntTabs,
-      AntTable,
-      AntCrudTableNav,
-      AntCrud,
-      AntCrudTableFilter,
-      AntCrudDetail
-    },
-    setup() {
-      const selectedDataItem = ref(null);
-      const fullWidth = computed(() => selectedDataItem.value === null && args.showDetail === false);
-      watch(() => args.showDetail, (showDetail) => {
-        if (showDetail === false) {
-          selectedDataItem.value = null;
-        }
-      });
-      return {
-        args,
-        fullWidth,
-        tableData: generateTableData(50),
-        tableHeaders: [
-          {
-            title: "Name",
-            identifier: "name",
-            type: AntTableRowTypes.text,
-            lightVersion: true
-          },
-          {
-            title: "Title",
-            identifier: "title",
-            type: AntTableRowTypes.text,
-            lightVersion: true
-          },
-          {
-            title: "E-Mail",
-            identifier: "email",
-            type: AntTableRowTypes.text
-          },
-          {
-            title: "Street Address",
-            identifier: "streetAddress",
-            type: AntTableRowTypes.text
-          },
-          {
-            title: "City",
-            identifier: "city",
-            type: AntTableRowTypes.text
-          },
-          {
-            title: "Country",
-            identifier: "country",
-            type: AntTableRowTypes.text
-          }
-        ]
-      };
-    },
-    template: `
-      <AntCrud v-bind="args" :show-detail="!fullWidth">
-        <template #search-section>
-          <AntCrudTableFilter
-            :full-width="fullWidth"
-          />
-        </template>
-
-        <template #table-section>
-          <AntTable
-            :data="tableData"
-            :headers="tableHeaders"
-            :show-light-version="!fullWidth"
-            selectable-rows
-          />
-        </template>
-
-        <template #table-nav-section>
-          <AntCrudTableNav
-            :pages="(1000000 * 20)"
-            :count="1000000"
-            :full-width="fullWidth"
-          />
-        </template>
-
-        <AntCrudDetail>
-          <div class="m-2.5 slot">
-            SLOT
-          </div>
-        </AntCrudDetail>
-      </AntCrud>
-    `
-  }),
-  args: {}
-};

package/dist/runtime/components/crud/__stories/AntCrudDetail.stories.d.ts

@@ -1,7 +0,0 @@
-import { type Meta, type StoryObj } from '@storybook/vue3';
-import AntCrudDetail from '../AntCrudDetail.vue';
-declare const meta: Meta<typeof AntCrudDetail>;
-export default meta;
-type Story = StoryObj<typeof AntCrudDetail>;
-export declare const Docs: Story;
-export declare const overflownContent: Story;

package/dist/runtime/components/crud/__stories/AntCrudDetail.stories.mjs

@@ -1,80 +0,0 @@
-import AntCrudDetail from "../AntCrudDetail.vue";
-import AntCrudDetailNav from "../AntCrudDetailNav.vue";
-import AntCrudDetailActions from "../AntCrudDetailActions.vue";
-const meta = {
-  title: "Crud/Crud Detail",
-  component: AntCrudDetail,
-  parameters: { controls: { sort: "requiredFirst" } },
-  decorators: [() => ({ template: '<div class="border border-dashed border-neutral-300 h-80"><story/></div>' })],
-  argTypes: {}
-};
-export default meta;
-export const Docs = {
-  render: (args) => ({
-    components: {
-      AntCrudDetail,
-      AntCrudDetailNav,
-      AntCrudDetailActions
-    },
-    setup() {
-      return {
-        args,
-        overflowContent: false,
-        tabItems: [
-          {
-            id: "1",
-            label: "Tab"
-          },
-          {
-            id: "2",
-            label: "Tab"
-          },
-          {
-            id: "3",
-            label: "Tab"
-          }
-        ]
-      };
-    },
-    template: `
-      <AntCrudDetail v-bind="args">
-        <template #header>
-          <AntCrudDetailNav
-            :tab-items="tabItems"
-            :get-entity-name="() => 'Lorem ipsum'"
-          />
-        </template>
-
-        <div
-          class="m-2.5 slot"
-          :class="{'h-96': overflowContent}"
-        >
-          SLOT
-        </div>
-
-        <template #footer>
-          <AntCrudDetailActions/>
-        </template>
-      </AntCrudDetail>
-    `
-  }),
-  args: {}
-};
-export const overflownContent = {
-  render: (args, ctx) => ({
-    // @ts-ignore
-    components: Docs.render(args, ctx).components,
-    setup() {
-      return {
-        // @ts-ignore
-        ...Docs.render(args, ctx).setup(),
-        overflowContent: true
-      };
-    },
-    // @ts-ignore
-    template: Docs.render(args, ctx).template
-  }),
-  args: {
-    ...Docs.args
-  }
-};

package/dist/runtime/components/crud/__stories/AntCrudDetailActions.stories.d.ts

@@ -1,6 +0,0 @@
-import { type Meta, type StoryObj } from '@storybook/vue3';
-import AntCrudDetailActions from '../AntCrudDetailActions.vue';
-declare const meta: Meta<typeof AntCrudDetailActions>;
-export default meta;
-type Story = StoryObj<typeof AntCrudDetailActions>;
-export declare const Docs: Story;

package/dist/runtime/components/crud/__stories/AntCrudDetailActions.stories.mjs

@@ -1,25 +0,0 @@
-import AntTabs from "../../tabs/AntTabs.vue";
-import AntCrudDetailActions from "../AntCrudDetailActions.vue";
-const meta = {
-  title: "Crud/Crud Detail Actions",
-  component: AntCrudDetailActions,
-  parameters: { controls: { sort: "requiredFirst" } },
-  decorators: [() => ({ template: '<div class="border border-dashed border-neutral-300"><story/></div>' })],
-  argTypes: {}
-};
-export default meta;
-export const Docs = {
-  render: (args) => ({
-    components: {
-      AntTabs,
-      AntCrudDetailActions
-    },
-    setup() {
-      return {
-        args
-      };
-    },
-    template: '<AntCrudDetailActions v-bind="args"/>'
-  }),
-  args: {}
-};

package/dist/runtime/components/crud/__stories/AntCrudDetailNav.stories.d.ts

@@ -1,6 +0,0 @@
-import { type Meta, type StoryObj } from '@storybook/vue3';
-import AntCrudDetailNav from '../AntCrudDetailNav.vue';
-declare const meta: Meta<typeof AntCrudDetailNav>;
-export default meta;
-type Story = StoryObj<typeof AntCrudDetailNav>;
-export declare const Docs: Story;

package/dist/runtime/components/crud/__stories/AntCrudDetailNav.stories.mjs

@@ -1,41 +0,0 @@
-import AntTabs from "../../tabs/AntTabs.vue";
-import AntCrudDetailNav from "../AntCrudDetailNav.vue";
-const meta = {
-  title: "Crud/Crud Detail Nav",
-  component: AntCrudDetailNav,
-  parameters: { controls: { sort: "requiredFirst" } },
-  decorators: [() => ({ template: '<div class="border border-dashed border-neutral-300"><story/></div>' })],
-  argTypes: {}
-};
-export default meta;
-export const Docs = {
-  render: (args) => ({
-    components: {
-      AntTabs,
-      AntCrudDetailNav
-    },
-    setup() {
-      return {
-        args
-      };
-    },
-    template: '<AntCrudDetailNav v-bind="args"/>'
-  }),
-  args: {
-    getEntityName: () => "Lorem ipsum",
-    tabItems: [
-      {
-        id: "1",
-        label: "Main data"
-      },
-      {
-        id: "2",
-        label: "Related data"
-      },
-      {
-        id: "3",
-        label: "Related data"
-      }
-    ]
-  }
-};

package/dist/runtime/components/crud/__stories/AntCrudTableFilter.stories.d.ts

@@ -1,6 +0,0 @@
-import AntCrudTableFilter from '../AntCrudTableFilter.vue';
-import { type Meta, type StoryObj } from '@storybook/vue3';
-declare const meta: Meta<typeof AntCrudTableFilter>;
-export default meta;
-type Story = StoryObj<typeof AntCrudTableFilter>;
-export declare const Docs: Story;

package/dist/runtime/components/crud/__stories/AntCrudTableFilter.stories.mjs

@@ -1,25 +0,0 @@
-import AntCrudTableFilter from "../AntCrudTableFilter.vue";
-const meta = {
-  title: "Crud/Crud Table Filter",
-  component: AntCrudTableFilter,
-  parameters: { controls: { sort: "requiredFirst" } },
-  argTypes: {}
-};
-export default meta;
-export const Docs = {
-  render: (args) => ({
-    components: { AntCrudTableFilter },
-    setup() {
-      return { args };
-    },
-    template: `
-      <div class="border border-neutral-300 border-dashed">
-        <AntCrudTableFilter
-          v-model:search="args.search"
-          v-bind="args"
-        />
-      </div>
-    `
-  }),
-  args: {}
-};

package/dist/runtime/components/crud/__stories/AntCrudTableNav.stories.d.ts

@@ -1,8 +0,0 @@
-import AntCrudTableNav from '../AntCrudTableNav.vue';
-import { type Meta, type StoryObj } from '@storybook/vue3';
-declare const meta: Meta<typeof AntCrudTableNav>;
-export default meta;
-type Story = StoryObj<typeof AntCrudTableNav>;
-export declare const Docs: Story;
-export declare const fullWidth: Story;
-export declare const skeleton: Story;

package/dist/runtime/components/crud/__stories/AntCrudTableNav.stories.mjs

@@ -1,56 +0,0 @@
-import AntCrudTableNav from "../AntCrudTableNav.vue";
-const meta = {
-  title: "Crud/Crud Table Nav",
-  component: AntCrudTableNav,
-  parameters: { controls: { sort: "requiredFirst" } },
-  argTypes: {
-    pageQuery: {
-      description: "Which query parameter should be used, for writing the current page into it."
-    }
-  }
-};
-export default meta;
-export const Docs = {
-  render: (args) => ({
-    components: { AntCrudTableNav },
-    setup() {
-      return { args };
-    },
-    template: `
-      <div class="dashed">
-        <AntCrudTableNav v-bind="args"/>
-      </div>
-    `
-  }),
-  args: {
-    count: 1000015
-  }
-};
-export const fullWidth = {
-  render: (args) => ({
-    components: { AntCrudTableNav },
-    setup() {
-      return { args };
-    },
-    template: `
-      <div class="p-4 flex gap-4">
-        <AntCrudTableNav v-bind="args"/>
-
-        <div v-if="!args.fullWidth" class="w-full">
-          Another content
-        </div>
-      </div>
-    `
-  }),
-  args: {
-    ...Docs.args,
-    fullWidth: false
-  }
-};
-export const skeleton = {
-  render: Docs.render,
-  args: {
-    ...Docs.args,
-    skeleton: true
-  }
-};

package/dist/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/dist/runtime/components/dialogs/AntDialog.vue

@@ -1,147 +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 .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%{opacity:0;transform:scale(0)}50%{opacity:1;transform:scale(1.05)}to{opacity:1;transform:scale(1)}}
-</style>

package/dist/runtime/components/dialogs/__stories/AndDeleteDialog.stories.d.ts

@@ -1,6 +0,0 @@
-import { type Meta, type StoryObj } from '@storybook/vue3';
-import AntDeleteDialog from '../AntDeleteDialog.vue';
-declare const meta: Meta<typeof AntDeleteDialog>;
-export default meta;
-type Story = StoryObj<typeof AntDeleteDialog>;
-export declare const Docs: Story;

package/dist/runtime/components/dialogs/__stories/AndDeleteDialog.stories.mjs

@@ -1,32 +0,0 @@
-import AntDeleteDialog from "../AntDeleteDialog.vue";
-import AntButton from "../../buttons/AntButton.vue";
-const meta = {
-  title: "Components/Dialogs/Delete Dialog",
-  component: AntDeleteDialog,
-  parameters: { controls: { sort: "requiredFirst" } },
-  argTypes: {}
-};
-export default meta;
-export const Docs = {
-  render: (args) => ({
-    components: { AntDeleteDialog, AntButton },
-    setup() {
-      return { args };
-    },
-    template: `
-    <div class="h-96">
-      <AntButton @click="() => args.open = true" state="danger">Delete</AntButton>
-
-      <AntDeleteDialog
-        v-model:open="args.open"
-        :entity="args.entity"
-        v-bind="args"
-      />
-    </div>
-    `
-  }),
-  args: {
-    open: false,
-    entity: "Lorem ipsum"
-  }
-};

package/dist/runtime/components/dialogs/__stories/AntDialog.stories.d.ts

@@ -1,6 +0,0 @@
-import AntDialog from '../AntDialog.vue';
-import { type Meta, type StoryObj } from '@storybook/vue3';
-declare const meta: Meta<typeof AntDialog>;
-export default meta;
-type Story = StoryObj<typeof AntDialog>;
-export declare const Docs: Story;

package/dist/runtime/components/dialogs/__stories/AntDialog.stories.mjs

@@ -1,60 +0,0 @@
-import AntDialog from "../AntDialog.vue";
-import AntButton from "../../buttons/AntButton.vue";
-import { InputState } from "../../../enums/index.mjs";
-const meta = {
-  title: "Components/Dialogs/Dialog",
-  component: AntDialog,
-  parameters: { controls: { sort: "requiredFirst" } },
-  decorators: [() => ({ template: '<div class="border border-dashed border-neutral-300"><story/></div>' })],
-  argTypes: {
-    state: {
-      control: { type: "select" },
-      options: Object.values(InputState)
-    },
-    title: {
-      control: "text",
-      table: { type: { summary: "string|null" } }
-    }
-  }
-};
-export default meta;
-export const Docs = {
-  render: (args) => ({
-    components: { AntDialog, AntButton },
-    setup() {
-      return { args };
-    },
-    template: `
-      <div
-        class="h-96 flex items-center justify-center relative"
-      >
-        <div class="absolute inset-0">
-          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, <br/>
-          sed diam nonumy eirmod tempor invidunt <br/>
-          ut labore et dolore magna aliquyam erat, <br/>
-          sed diam voluptua. At vero eos et accusam et <br/>
-          justo duo dolores et ea rebum. Stet clita kasd
-        </div>
-
-        <div class="absolute bottom-0 right-0">
-          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, <br/>
-          sed diam nonumy eirmod tempor invidunt <br/>
-          ut labore et dolore magna aliquyam erat, <br/>
-          sed diam voluptua. At vero eos et accusam et <br/>
-          justo duo dolores et ea rebum. Stet clita kasd
-        </div>
-
-        <AntButton @click="args.open = true" state="primary">Open Dialog</AntButton>
-
-        <AntDialog v-bind="args" v-model:open="args.open">
-          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
-          dolore
-        </AntDialog>
-      </div>
-    `
-  }),
-  args: {
-    open: false,
-    title: "Lorem ipsum dolor"
-  }
-};