@antify/ui 1.0.0

package/dist/components/buttons/AntEditButton.vue

@@ -0,0 +1,54 @@
+<script lang="ts" setup>
+import AntActionButton from './AntActionButton.vue';
+import {Position, Size, Grouped, State} from '../../enums';
+import {faPencil} from '@fortawesome/free-solid-svg-icons';
+
+defineEmits(['click', 'blur']);
+withDefaults(defineProps<{
+  iconVariant?: boolean;
+  size?: Size;
+  disabled?: boolean;
+  grouped?: Grouped;
+  skeleton?: boolean;
+  expanded?: boolean;
+  canEdit?: boolean;
+  tooltipPosition?: Position;
+}>(), {
+  iconVariant: false,
+  canEdit: true
+});
+</script>
+
+<template>
+  <AntActionButton
+    :filled="false"
+    :state="State.base"
+    :size="size"
+    :disabled="disabled"
+    :icon-left="iconVariant ? faPencil : undefined"
+    :grouped="grouped"
+    :skeleton="skeleton"
+    :expanded="expanded"
+    :has-permission="canEdit"
+    :tooltip-position="tooltipPosition"
+    data-e2e="edit-button"
+    @click="$emit('click')"
+    @blur="$emit('blur')"
+  >
+    <template
+      v-if="!iconVariant"
+      #default
+    >
+      Edit
+    </template>
+
+    <template #invalidPermissionTooltipContent>
+      You have no permission to edit entries.<br>
+      Please contact your administrator.
+    </template>
+
+    <template #tooltipContent>
+      Edit entry
+    </template>
+  </AntActionButton>
+</template>

package/dist/components/buttons/AntSaveAndNewButton.vue

@@ -0,0 +1,56 @@
+<script lang="ts" setup>
+import AntActionButton from './AntActionButton.vue';
+import {Position, Size, Grouped, State} from '../../enums';
+import {faFloppyDisk, faPlus} from '@fortawesome/free-solid-svg-icons';
+
+defineEmits(['click', 'blur']);
+withDefaults(defineProps<{
+  iconVariant?: boolean;
+  size?: Size;
+  disabled?: boolean;
+  grouped?: Grouped;
+  skeleton?: boolean;
+  expanded?: boolean;
+  canSave?: boolean;
+  tooltipPosition?: Position;
+}>(), {
+  iconVariant: false,
+  canSave: true
+});
+</script>
+
+<template>
+  <AntActionButton
+    :filled="true"
+    :state="State.primary"
+    :size="size"
+    :disabled="disabled"
+    :icon-left="iconVariant ? faFloppyDisk : undefined"
+    :icon-right="iconVariant ? faPlus : undefined"
+    :grouped="grouped"
+    :skeleton="skeleton"
+    :expanded="expanded"
+    :submit="true"
+    :has-permission="canSave"
+    :tooltip-position="tooltipPosition"
+    data-e2e="save-and-new-button"
+    @click="$emit('click')"
+    @blur="$emit('blur')"
+  >
+    <template
+      v-if="!iconVariant"
+      #default
+    >
+      Save and new
+    </template>
+
+    <template #invalidPermissionTooltipContent>
+      You have no permission to save entries.<br>
+      Please contact your administrator.
+    </template>
+
+    <template #tooltipContent>
+      Save entry
+    </template>
+  </AntActionButton>
+</template>

package/dist/components/buttons/AntSaveButton.vue

@@ -0,0 +1,55 @@
+<script lang="ts" setup>
+import AntActionButton from './AntActionButton.vue';
+import {Position, Size, Grouped, State} from '../../enums';
+import {faFloppyDisk} from '@fortawesome/free-solid-svg-icons';
+
+defineEmits(['click', 'blur']);
+withDefaults(defineProps<{
+  iconVariant?: boolean;
+  size?: Size;
+  disabled?: boolean;
+  grouped?: Grouped;
+  skeleton?: boolean;
+  expanded?: boolean;
+  canSave?: boolean;
+  tooltipPosition?: Position;
+}>(), {
+  iconVariant: false,
+  canSave: true
+});
+</script>
+
+<template>
+  <AntActionButton
+    :filled="true"
+    :state="State.primary"
+    :size="size"
+    :disabled="disabled"
+    :icon-left="iconVariant ? faFloppyDisk : undefined"
+    :grouped="grouped"
+    :skeleton="skeleton"
+    :expanded="expanded"
+    :submit="true"
+    :has-permission="canSave"
+    :tooltip-position="tooltipPosition"
+    data-e2e="save-button"
+    @click="$emit('click')"
+    @blur="$emit('blur')"
+  >
+    <template
+      v-if="!iconVariant"
+      #default
+    >
+      Save
+    </template>
+
+    <template #invalidPermissionTooltipContent>
+      You have no permission to save entries.<br>
+      Please contact your administrator.
+    </template>
+
+    <template #tooltipContent>
+      Save entry
+    </template>
+  </AntActionButton>
+</template>

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

@@ -0,0 +1,11 @@
+import AntActionButton from '../AntActionButton.vue';
+import { type Meta, type StoryObj } from '@storybook/vue3';
+declare const meta: Meta<typeof AntActionButton>;
+export default meta;
+type Story = StoryObj<typeof AntActionButton>;
+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;
+export declare const WithoutPermission: Story;

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

@@ -0,0 +1,111 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = exports.WithoutPermission = exports.Skeleton = exports.Grouped = exports.Expanded = exports.Docs = exports.Disabled = void 0;
+var _AntActionButton = _interopRequireDefault(require("../AntActionButton.vue"));
+var _Grouped2 = require("../../../enums/Grouped.enum");
+var _enums = require("../../../enums");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const meta = {
+  title: "Components/Buttons/Action Button",
+  component: _AntActionButton.default,
+  parameters: {
+    controls: {
+      sort: "requiredFirst"
+    }
+  },
+  argTypes: {
+    state: {
+      control: {
+        type: "select"
+      },
+      options: Object.values(_enums.State)
+    },
+    size: {
+      control: {
+        type: "select"
+      },
+      options: Object.values(_enums.Size)
+    },
+    grouped: {
+      control: {
+        type: "select"
+      },
+      options: Object.values(_Grouped2.Grouped)
+    },
+    tooltipPosition: {
+      control: {
+        type: "select"
+      },
+      options: Object.values(_enums.Position)
+    },
+    tooltipState: {
+      control: {
+        type: "select"
+      },
+      options: Object.values(_enums.InputState)
+    },
+    submit: {
+      description: 'Change the button type to type="submit"'
+    }
+  }
+};
+module.exports = meta;
+const Docs = exports.Docs = {
+  render: args => ({
+    components: {
+      AntActionButton: _AntActionButton.default
+    },
+    setup() {
+      return {
+        args
+      };
+    },
+    template: `
+      <AntActionButton v-bind="args">
+        <template #default>Action Button</template>
+        <template #tooltipContent>This is an action button</template>
+        <template #invalidPermissionTooltipContent>You have no permission <br>to click this button</template>
+      </AntActionButton>`
+  }),
+  args: {
+    tooltipPosition: _enums.Position.right
+  }
+};
+const Disabled = exports.Disabled = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    disabled: true
+  }
+};
+const Grouped = exports.Grouped = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    grouped: _Grouped2.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 WithoutPermission = exports.WithoutPermission = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    hasPermission: false
+  }
+};

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

@@ -0,0 +1,86 @@
+import AntActionButton from "../AntActionButton.vue";
+import { Grouped as _Grouped } from "../../../enums/Grouped.enum.mjs";
+import { State, InputState, Position, Size } from "../../../enums/index.mjs";
+const meta = {
+  title: "Components/Buttons/Action Button",
+  component: AntActionButton,
+  parameters: { controls: { sort: "requiredFirst" } },
+  argTypes: {
+    state: {
+      control: { type: "select" },
+      options: Object.values(State)
+    },
+    size: {
+      control: { type: "select" },
+      options: Object.values(Size)
+    },
+    grouped: {
+      control: { type: "select" },
+      options: Object.values(_Grouped)
+    },
+    tooltipPosition: {
+      control: { type: "select" },
+      options: Object.values(Position)
+    },
+    tooltipState: {
+      control: { type: "select" },
+      options: Object.values(InputState)
+    },
+    submit: {
+      description: 'Change the button type to type="submit"'
+    }
+  }
+};
+export default meta;
+export const Docs = {
+  render: (args) => ({
+    components: { AntActionButton },
+    setup() {
+      return { args };
+    },
+    template: `
+      <AntActionButton v-bind="args">
+        <template #default>Action Button</template>
+        <template #tooltipContent>This is an action button</template>
+        <template #invalidPermissionTooltipContent>You have no permission <br>to click this button</template>
+      </AntActionButton>`
+  }),
+  args: {
+    tooltipPosition: Position.right
+  }
+};
+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 WithoutPermission = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    hasPermission: false
+  }
+};

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

@@ -0,0 +1,16 @@
+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 WithTooltip: Story;
+export declare const Summary: Story;