@antify/ui 1.0.0

package/dist/components/buttons/__stories/AntEditButton.stories.mjs

@@ -0,0 +1,76 @@
+import AntEditButton from "../AntEditButton.vue";
+import { Position, Grouped as _Grouped, Size } from "../../../enums/index.mjs";
+const meta = {
+  title: "Components/Buttons/Edit Button",
+  component: AntEditButton,
+  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: { AntEditButton },
+    setup() {
+      return { args };
+    },
+    template: '<AntEditButton 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,
+    canEdit: false
+  }
+};

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

@@ -0,0 +1,12 @@
+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 IconVariant: Story;
+export declare const Disabled: Story;
+export declare const Grouped: Story;
+export declare const Skeleton: Story;
+export declare const Expanded: Story;
+export declare const InvalidPermission: Story;

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

@@ -0,0 +1,97 @@
+"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 _AntSaveAndNewButton = _interopRequireDefault(require("../AntSaveAndNewButton.vue"));
+var _enums = require("../../../enums");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const meta = {
+  title: "Components/Buttons/Save And New Button",
+  component: _AntSaveAndNewButton.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: {
+      AntSaveAndNewButton: _AntSaveAndNewButton.default
+    },
+    setup() {
+      return {
+        args
+      };
+    },
+    template: '<AntSaveAndNewButton 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/AntSaveAndNewButton.stories.mjs

@@ -0,0 +1,76 @@
+import AntSaveAndNewButton from "../AntSaveAndNewButton.vue";
+import { Position, Grouped as _Grouped, Size } from "../../../enums/index.mjs";
+const meta = {
+  title: "Components/Buttons/Save And New Button",
+  component: AntSaveAndNewButton,
+  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: { AntSaveAndNewButton },
+    setup() {
+      return { args };
+    },
+    template: '<AntSaveAndNewButton 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/__stories/AntSaveButton.stories.d.ts

@@ -0,0 +1,12 @@
+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 IconVariant: Story;
+export declare const Disabled: Story;
+export declare const Grouped: Story;
+export declare const Skeleton: Story;
+export declare const Expanded: Story;
+export declare const InvalidPermission: Story;

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

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

@@ -0,0 +1,76 @@
+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/AntButton.types.d.ts

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

package/dist/components/buttons/__types/AntButton.types.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ButtonType = void 0;
+var ButtonType = exports.ButtonType = /* @__PURE__ */(ButtonType2 => {
+  ButtonType2["button"] = "button";
+  ButtonType2["submit"] = "submit";
+  return ButtonType2;
+})(ButtonType || {});

package/dist/components/buttons/__types/AntButton.types.mjs

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

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

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

package/dist/components/buttons/__types/index.js

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

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

package/dist/components/crud/AntCrud.vue

@@ -0,0 +1,75 @@
+<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-white">
+        <slot name="search-section"/>
+      </div>
+
+      <div class="bg-white flex-grow h-full 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-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/dist/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-white h-full overflow-y-auto">
+      <slot/>
+    </div>
+
+    <slot name="footer"/>
+  </div>
+</template>

package/dist/components/crud/AntCrudDetailActions.vue

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