@antify/ui 1.0.0

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

@@ -0,0 +1,84 @@
+import AntCrudDetail from "../AntCrudDetail.vue";
+import AntCrudDetailNav from "../AntCrudDetailNav.vue";
+import AntCrudDetailActions from "../AntCrudDetailActions.vue";
+import { vueRouter } from "storybook-vue3-router";
+const meta = {
+  title: "Crud/Crud Detail",
+  component: AntCrudDetail,
+  parameters: { controls: { sort: "requiredFirst" } },
+  decorators: [
+    () => ({ template: '<div class="dashed h-80"><story/></div>' }),
+    vueRouter()
+  ],
+  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/components/crud/__stories/AntCrudDetailActions.stories.d.ts

@@ -0,0 +1,6 @@
+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/components/crud/__stories/AntCrudDetailActions.stories.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = exports.Docs = void 0;
+var _AntTabs = _interopRequireDefault(require("../../tabs/AntTabs.vue"));
+var _AntCrudDetailActions = _interopRequireDefault(require("../AntCrudDetailActions.vue"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const meta = {
+  title: "Crud/Crud Detail Actions",
+  component: _AntCrudDetailActions.default,
+  parameters: {
+    controls: {
+      sort: "requiredFirst"
+    }
+  },
+  decorators: [() => ({
+    template: '<div class="border border-dashed border-neutral-300"><story/></div>'
+  })],
+  argTypes: {}
+};
+module.exports = meta;
+const Docs = exports.Docs = {
+  render: args => ({
+    components: {
+      AntTabs: _AntTabs.default,
+      AntCrudDetailActions: _AntCrudDetailActions.default
+    },
+    setup() {
+      return {
+        args
+      };
+    },
+    template: '<AntCrudDetailActions v-bind="args"/>'
+  }),
+  args: {}
+};

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

@@ -0,0 +1,25 @@
+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/components/crud/__stories/AntCrudDetailNav.stories.d.ts

@@ -0,0 +1,6 @@
+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/components/crud/__stories/AntCrudDetailNav.stories.js

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = exports.Docs = void 0;
+var _AntTabs = _interopRequireDefault(require("../../tabs/AntTabs.vue"));
+var _AntCrudDetailNav = _interopRequireDefault(require("../AntCrudDetailNav.vue"));
+var _storybookVue3Router = require("storybook-vue3-router");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const meta = {
+  title: "Crud/Crud Detail Nav",
+  component: _AntCrudDetailNav.default,
+  parameters: {
+    controls: {
+      sort: "requiredFirst"
+    }
+  },
+  decorators: [() => ({
+    template: '<div class="dashed"><story/></div>'
+  }), (0, _storybookVue3Router.vueRouter)()],
+  argTypes: {}
+};
+module.exports = meta;
+const Docs = exports.Docs = {
+  render: args => ({
+    components: {
+      AntTabs: _AntTabs.default,
+      AntCrudDetailNav: _AntCrudDetailNav.default
+    },
+    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/components/crud/__stories/AntCrudDetailNav.stories.mjs

@@ -0,0 +1,45 @@
+import AntTabs from "../../tabs/AntTabs.vue";
+import AntCrudDetailNav from "../AntCrudDetailNav.vue";
+import { vueRouter } from "storybook-vue3-router";
+const meta = {
+  title: "Crud/Crud Detail Nav",
+  component: AntCrudDetailNav,
+  parameters: { controls: { sort: "requiredFirst" } },
+  decorators: [
+    () => ({ template: '<div class="dashed"><story/></div>' }),
+    vueRouter()
+  ],
+  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/components/crud/__stories/AntCrudTableFilter.stories.d.ts

@@ -0,0 +1,6 @@
+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/components/crud/__stories/AntCrudTableFilter.stories.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = exports.Docs = void 0;
+var _AntCrudTableFilter = _interopRequireDefault(require("../AntCrudTableFilter.vue"));
+var _storybookVue3Router = require("storybook-vue3-router");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const meta = {
+  title: "Crud/Crud Table Filter",
+  component: _AntCrudTableFilter.default,
+  parameters: {
+    controls: {
+      sort: "requiredFirst"
+    }
+  },
+  argTypes: {},
+  decorators: [(0, _storybookVue3Router.vueRouter)()]
+};
+module.exports = meta;
+const Docs = exports.Docs = {
+  render: args => ({
+    components: {
+      AntCrudTableFilter: _AntCrudTableFilter.default
+    },
+    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/components/crud/__stories/AntCrudTableFilter.stories.mjs

@@ -0,0 +1,27 @@
+import AntCrudTableFilter from "../AntCrudTableFilter.vue";
+import { vueRouter } from "storybook-vue3-router";
+const meta = {
+  title: "Crud/Crud Table Filter",
+  component: AntCrudTableFilter,
+  parameters: { controls: { sort: "requiredFirst" } },
+  argTypes: {},
+  decorators: [vueRouter()]
+};
+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/components/crud/__stories/AntCrudTableNav.stories.d.ts

@@ -0,0 +1,8 @@
+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/components/crud/__stories/AntCrudTableNav.stories.js

@@ -0,0 +1,77 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.skeleton = exports.fullWidth = exports.default = exports.Docs = void 0;
+var _AntCrudTableNav = _interopRequireDefault(require("../AntCrudTableNav.vue"));
+var _storybookVue3Router = require("storybook-vue3-router");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const meta = {
+  title: "Crud/Crud Table Nav",
+  component: _AntCrudTableNav.default,
+  parameters: {
+    controls: {
+      sort: "requiredFirst"
+    }
+  },
+  argTypes: {
+    pageQuery: {
+      description: "Which query parameter should be used, for writing the current page into it."
+    }
+  },
+  decorators: [(0, _storybookVue3Router.vueRouter)()]
+};
+module.exports = meta;
+const Docs = exports.Docs = {
+  render: args => ({
+    components: {
+      AntCrudTableNav: _AntCrudTableNav.default
+    },
+    setup() {
+      return {
+        args
+      };
+    },
+    template: `
+      <div class="dashed">
+        <AntCrudTableNav v-bind="args"/>
+      </div>
+    `
+  }),
+  args: {
+    count: 1000015
+  }
+};
+const fullWidth = exports.fullWidth = {
+  render: args => ({
+    components: {
+      AntCrudTableNav: _AntCrudTableNav.default
+    },
+    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
+  }
+};
+const skeleton = exports.skeleton = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    skeleton: true
+  }
+};

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

@@ -0,0 +1,58 @@
+import AntCrudTableNav from "../AntCrudTableNav.vue";
+import { vueRouter } from "storybook-vue3-router";
+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."
+    }
+  },
+  decorators: [vueRouter()]
+};
+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/components/dialogs/AntDeleteDialog.vue

@@ -0,0 +1,29 @@
+<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/components/dialogs/AntDialog.vue

@@ -0,0 +1,182 @@
+<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>