@antify/ui-module 1.1.3

package/dist/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/dist/runtime/components/buttons/__stories/AntButton.stories.d.ts

@@ -0,0 +1,15 @@
+import AntButton from '../AntButton.vue';
+import { type Meta, type StoryObj } from '@storybook/vue3';
+declare const meta: Meta<typeof AntButton>;
+export default meta;
+type Story = StoryObj<typeof AntButton>;
+export declare const Docs: Story;
+export declare const Filled: Story;
+export declare const Link: Story;
+export declare const Icons: Story;
+export declare const Grouped: Story;
+export declare const Skeleton: Story;
+export declare const ReadOnly: Story;
+export declare const Expanded: Story;
+export declare const WithoutBorder: Story;
+export declare const Summary: Story;

package/dist/runtime/components/buttons/__stories/AntButton.stories.mjs

@@ -0,0 +1,272 @@
+import AntButton from "../AntButton.vue";
+import AntFormGroupLabel from "../../form/AntFormGroupLabel.vue";
+import AntFormGroup from "../../form/AntFormGroup.vue";
+import { faCaretRight, faCaretLeft } from "@fortawesome/free-solid-svg-icons";
+import { Size } from "../../../enums/Size.enum.mjs";
+import { Grouped as _Grouped } from "../../../enums/Grouped.enum.mjs";
+import { ColorType } from "../../../enums/index.mjs";
+const meta = {
+  component: AntButton,
+  title: "Components/Buttons/Button",
+  parameters: { controls: { sort: "requiredFirst" } },
+  argTypes: {
+    colorType: {
+      control: { type: "select" },
+      options: Object.values(ColorType)
+    },
+    grouped: {
+      control: { type: "select" },
+      options: Object.values(_Grouped),
+      description: "Where is this fields position in a group"
+    },
+    size: {
+      control: { type: "radio" },
+      options: Object.values(Size),
+      description: "Defines the size of the button"
+    },
+    iconLeft: {
+      control: { type: "none" },
+      description: "Will be displayed left to the label or the default slot.<br>Use Font-awesome Icons."
+    },
+    iconRight: {
+      control: { type: "none" },
+      description: "Will be displayed right to the label or the default slot.<br>Use Font-awesome Icons."
+    },
+    to: {
+      control: { type: "RouteLocationRaw" },
+      description: "If provided transforms the button into an a-tag with the provided link. Style is still the same as a button.",
+      table: { type: { summary: "string|object" } }
+    },
+    submit: {
+      description: 'Change the button type to type="submit"'
+    }
+  }
+};
+export default meta;
+export const Docs = {
+  render: (args) => ({
+    components: { AntButton },
+    setup() {
+      return { args };
+    },
+    template: '<AntButton v-bind="args">Button</AntButton>'
+  }),
+  args: {}
+};
+export const Filled = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    filled: true
+  }
+};
+export const Link = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    to: "/example"
+  }
+};
+export const Icons = {
+  render: (args) => ({
+    components: {
+      AntButton,
+      AntFormGroup,
+      AntFormGroupLabel
+    },
+    setup() {
+      return {
+        args,
+        faCaretLeft,
+        faCaretRight
+      };
+    },
+    template: `
+          <AntFormGroup>
+            <AntFormGroupLabel>Icons only</AntFormGroupLabel>
+
+            <AntFormGroup direction="row">
+              <AntButton v-bind="args" :icon-left="faCaretLeft"></AntButton>
+              <AntButton v-bind="args" :icon-right="faCaretRight"></AntButton>
+              <AntButton v-bind="args" :icon-left="faCaretLeft" :icon-right="faCaretRight"></AntButton>
+            </AntFormGroup>
+
+            <AntFormGroupLabel>Icons with text</AntFormGroupLabel>
+
+            <AntFormGroup direction="row">
+              <AntButton v-bind="args" :icon-left="faCaretLeft">Button</AntButton>
+              <AntButton v-bind="args" :icon-right="faCaretRight">Button</AntButton>
+              <AntButton v-bind="args" :icon-left="faCaretLeft" :icon-right="faCaretRight">Button</AntButton>
+            </AntFormGroup>
+          </AntFormGroup>
+        `
+  })
+};
+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 ReadOnly = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    readonly: true
+  }
+};
+export const Expanded = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    expanded: true
+  }
+};
+export const WithoutBorder = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    filled: true,
+    outlined: false
+  }
+};
+export const Summary = {
+  render: (args) => ({
+    components: {
+      AntButton,
+      AntFormGroupLabel,
+      AntFormGroup
+    },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div class="flex flex-col gap-2.5">
+        <AntFormGroup>
+          <AntFormGroupLabel class="text-xl">
+            Grouped | Filled | Outlined combinations
+          </AntFormGroupLabel>
+          <div class="flex">
+            <AntButton v-bind="args" color-type="base" grouped="left" :filled="true" :outlined="false">
+              Button
+            </AntButton>
+            <AntButton v-bind="args" color-type="base" grouped="center" :filled="false" :outlined="false">
+              Button
+            </AntButton>
+            <AntButton v-bind="args" color-type="base" grouped="center" :filled="true" :outlined="true">
+              Button
+            </AntButton>
+            <AntButton v-bind="args" color-type="base" grouped="right" :filled="false" :outlined="true">
+              Button
+            </AntButton>
+          </div>
+          <div class="flex">
+            <AntButton v-bind="args" color-type="primary" grouped="left" :filled="true" :outlined="false">
+              Button
+            </AntButton>
+            <AntButton v-bind="args" color-type="primary" grouped="center" :filled="false" :outlined="false">
+              Button
+            </AntButton>
+            <AntButton v-bind="args" color-type="primary" grouped="center" :filled="true" :outlined="true">
+              Button
+            </AntButton>
+            <AntButton v-bind="args" color-type="primary" grouped="right" :filled="false" :outlined="true">
+              Button
+            </AntButton>
+          </div>
+          <div class="flex">
+            <AntButton v-bind="args" color-type="secondary" grouped="left" :filled="true" :outlined="false">
+              Button
+            </AntButton>
+            <AntButton v-bind="args" color-type="secondary" grouped="center" :filled="false" :outlined="false">
+              Button
+            </AntButton>
+            <AntButton v-bind="args" color-type="secondary" grouped="center" :filled="true" :outlined="true">
+              Button
+            </AntButton>
+            <AntButton v-bind="args" color-type="secondary" grouped="right" :filled="false" :outlined="true">
+              Button
+            </AntButton>
+          </div>
+          <div class="flex">
+            <AntButton v-bind="args" color-type="success" grouped="left" :filled="true" :outlined="false">
+              Button
+            </AntButton>
+            <AntButton v-bind="args" color-type="success" grouped="center" :filled="false" :outlined="false">
+              Button
+            </AntButton>
+            <AntButton v-bind="args" color-type="success" grouped="center" :filled="true" :outlined="true">
+              Button
+            </AntButton>
+            <AntButton v-bind="args" color-type="success" grouped="right" :filled="false" :outlined="true">
+              Button
+            </AntButton>
+          </div>
+          <div class="flex">
+            <AntButton v-bind="args" color-type="info" grouped="left" :filled="true" :outlined="false">
+              Button
+            </AntButton>
+            <AntButton v-bind="args" color-type="info" grouped="center" :filled="false" :outlined="false">
+              Button
+            </AntButton>
+            <AntButton v-bind="args" color-type="info" grouped="center" :filled="true" :outlined="true">
+              Button
+            </AntButton>
+            <AntButton v-bind="args" color-type="info" grouped="right" :filled="false" :outlined="true">
+              Button
+            </AntButton>
+          </div>
+          <div class="flex">
+            <AntButton v-bind="args" color-type="warning" grouped="left" :filled="true" :outlined="false">
+              Button
+            </AntButton>
+            <AntButton v-bind="args" color-type="warning" grouped="center" :filled="false" :outlined="false">
+              Button
+            </AntButton>
+            <AntButton v-bind="args" color-type="warning" grouped="center" :filled="true" :outlined="true">
+              Button
+            </AntButton>
+            <AntButton v-bind="args" color-type="warning" grouped="right" :filled="false" :outlined="true">
+              Button
+            </AntButton>
+          </div>
+          <div class="flex">
+            <AntButton v-bind="args" color-type="danger" grouped="left" :filled="true" :outlined="false">
+              Button
+            </AntButton>
+            <AntButton v-bind="args" color-type="danger" grouped="center" :filled="false" :outlined="false">
+              Button
+            </AntButton>
+            <AntButton v-bind="args" color-type="danger" grouped="center" :filled="true" :outlined="true">
+              Button
+            </AntButton>
+            <AntButton v-bind="args" color-type="danger" grouped="right" :filled="false" :outlined="true">
+              Button
+            </AntButton>
+          </div>
+        </AntFormGroup>
+        <AntFormGroup>
+          <AntFormGroupLabel class="text-xl">
+            Size
+          </AntFormGroupLabel>
+          <AntFormGroup direction="row">
+            <AntButton v-bind="args" size="md">Button</AntButton>
+            <AntButton v-bind="args" size="sm">Button</AntButton>
+          </AntFormGroup>
+        </AntFormGroup>
+      </div>
+    `
+  }),
+  args: {
+    iconLeft: faCaretLeft,
+    iconRight: faCaretRight
+  }
+};

package/dist/runtime/components/buttons/__stories/AntCreateButton.stories.d.ts

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

package/dist/runtime/components/buttons/__stories/AntCreateButton.stories.mjs

@@ -0,0 +1,57 @@
+import AntCreateButton from "../AntCreateButton.vue";
+import { Size } from "../../../enums/Size.enum.mjs";
+import { Grouped as _Grouped } from "../../../enums/Grouped.enum.mjs";
+const meta = {
+  title: "Components/Buttons/Create Button",
+  component: AntCreateButton,
+  parameters: { controls: { sort: "requiredFirst" } },
+  argTypes: {
+    size: {
+      control: { type: "radio" },
+      options: Object.values(Size)
+    },
+    grouped: {
+      control: { type: "select" },
+      options: Object.values(_Grouped)
+    }
+  }
+};
+export default meta;
+export const Docs = {
+  render: (args) => ({
+    components: { AntCreateButton },
+    setup() {
+      return { args };
+    },
+    template: '<AntCreateButton v-bind="args"/>'
+  }),
+  args: {}
+};
+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
+  }
+};

package/dist/runtime/components/buttons/__stories/AntDeleteButton.stories.d.ts

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

package/dist/runtime/components/buttons/__stories/AntDeleteButton.stories.mjs

@@ -0,0 +1,57 @@
+import AntDeleteButton from "../AntDeleteButton.vue";
+import { Size } from "../../../enums/Size.enum.mjs";
+import { Grouped as _Grouped } from "../../../enums/Grouped.enum.mjs";
+const meta = {
+  title: "Components/Buttons/Delete Button",
+  component: AntDeleteButton,
+  parameters: { controls: { sort: "requiredFirst" } },
+  argTypes: {
+    size: {
+      control: { type: "radio" },
+      options: Object.values(Size)
+    },
+    grouped: {
+      control: { type: "select" },
+      options: Object.values(_Grouped)
+    }
+  }
+};
+export default meta;
+export const Docs = {
+  render: (args) => ({
+    components: { AntDeleteButton },
+    setup() {
+      return { args };
+    },
+    template: '<AntDeleteButton v-bind="args"/>'
+  }),
+  args: {}
+};
+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
+  }
+};

package/dist/runtime/components/buttons/__stories/AntSaveAndNewButton.stories.d.ts

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

package/dist/runtime/components/buttons/__stories/AntSaveAndNewButton.stories.mjs

@@ -0,0 +1,57 @@
+import AntSaveAndNewButton from "../AntSaveAndNewButton.vue";
+import { Size } from "../../../enums/Size.enum.mjs";
+import { Grouped as _Grouped } from "../../../enums/Grouped.enum.mjs";
+const meta = {
+  title: "Components/Buttons/Save And New Button",
+  component: AntSaveAndNewButton,
+  parameters: { controls: { sort: "requiredFirst" } },
+  argTypes: {
+    size: {
+      control: { type: "radio" },
+      options: Object.values(Size)
+    },
+    grouped: {
+      control: { type: "select" },
+      options: Object.values(_Grouped)
+    }
+  }
+};
+export default meta;
+export const Docs = {
+  render: (args) => ({
+    components: { AntSaveAndNewButton },
+    setup() {
+      return { args };
+    },
+    template: '<AntSaveAndNewButton v-bind="args"/>'
+  }),
+  args: {}
+};
+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
+  }
+};

package/dist/runtime/components/buttons/__stories/AntSaveButton.stories.d.ts

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

package/dist/runtime/components/buttons/__stories/AntSaveButton.stories.mjs

@@ -0,0 +1,57 @@
+import AntSaveButton from "../AntSaveButton.vue";
+import { Size } from "../../../enums/Size.enum.mjs";
+import { Grouped as _Grouped } from "../../../enums/Grouped.enum.mjs";
+const meta = {
+  title: "Components/Buttons/Save Button",
+  component: AntSaveButton,
+  parameters: { controls: { sort: "requiredFirst" } },
+  argTypes: {
+    size: {
+      control: { type: "radio" },
+      options: Object.values(Size)
+    },
+    grouped: {
+      control: { type: "select" },
+      options: Object.values(_Grouped)
+    }
+  }
+};
+export default meta;
+export const Docs = {
+  render: (args) => ({
+    components: { AntSaveButton },
+    setup() {
+      return { args };
+    },
+    template: '<AntSaveButton v-bind="args"/>'
+  }),
+  args: {}
+};
+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
+  }
+};

package/dist/runtime/components/buttons/__types/AntButton.type.d.ts

@@ -0,0 +1,4 @@
+export declare enum ButtonType {
+    button = "button",
+    submit = "submit"
+}

package/dist/runtime/components/buttons/__types/AntButton.type.mjs

@@ -0,0 +1,5 @@
+export var ButtonType = /* @__PURE__ */ ((ButtonType2) => {
+  ButtonType2["button"] = "button";
+  ButtonType2["submit"] = "submit";
+  return ButtonType2;
+})(ButtonType || {});

package/dist/runtime/components/buttons/__types/index.d.ts

@@ -0,0 +1 @@
+export * from './AntButton.type';

package/dist/runtime/components/buttons/__types/index.mjs

@@ -0,0 +1 @@
+export * from "./AntButton.type.mjs";

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

@@ -0,0 +1,42 @@
+<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{opacity:0;width:0}.right-content-enter-to{opacity:1;width:100%}.right-content-leave-active{transition:width .5s ease-in-out,opacity .2s ease}.right-content-leave-from{opacity:1;width:100%}.right-content-leave-to{opacity:0;width:0}
+</style>

package/dist/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>