@antify/ui 1.0.0

package/dist/components/__types/AntSpinner.types.mjs

@@ -0,0 +1,11 @@
+export var AntSpinnerSize = /* @__PURE__ */ ((AntSpinnerSize2) => {
+  AntSpinnerSize2["xl4"] = "4xl";
+  AntSpinnerSize2["xl3"] = "3xl";
+  AntSpinnerSize2["xl2"] = "2xl";
+  AntSpinnerSize2["lg"] = "lg";
+  AntSpinnerSize2["md"] = "md";
+  AntSpinnerSize2["sm"] = "sm";
+  AntSpinnerSize2["xs"] = "xs";
+  AntSpinnerSize2["xs2"] = "2xs";
+  return AntSpinnerSize2;
+})(AntSpinnerSize || {});

package/dist/components/__types/AntTag.types.d.ts

@@ -0,0 +1,17 @@
+export declare enum TagState {
+    base = "base",
+    primary = "primary",
+    secondary = "secondary",
+    info = "info",
+    success = "success",
+    warning = "warning",
+    danger = "danger"
+}
+export declare enum AntTagSize {
+    lg = "lg",
+    md = "md",
+    sm = "sm",
+    xs = "xs",
+    xs2 = "2xs",
+    xs3 = "3xs"
+}

package/dist/components/__types/AntTag.types.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TagState = exports.AntTagSize = void 0;
+var TagState = exports.TagState = /* @__PURE__ */(TagState2 => {
+  TagState2["base"] = "base";
+  TagState2["primary"] = "primary";
+  TagState2["secondary"] = "secondary";
+  TagState2["info"] = "info";
+  TagState2["success"] = "success";
+  TagState2["warning"] = "warning";
+  TagState2["danger"] = "danger";
+  return TagState2;
+})(TagState || {});
+var AntTagSize = exports.AntTagSize = /* @__PURE__ */(AntTagSize2 => {
+  AntTagSize2["lg"] = "lg";
+  AntTagSize2["md"] = "md";
+  AntTagSize2["sm"] = "sm";
+  AntTagSize2["xs"] = "xs";
+  AntTagSize2["xs2"] = "2xs";
+  AntTagSize2["xs3"] = "3xs";
+  return AntTagSize2;
+})(AntTagSize || {});

package/dist/components/__types/AntTag.types.mjs

@@ -0,0 +1,19 @@
+export var TagState = /* @__PURE__ */ ((TagState2) => {
+  TagState2["base"] = "base";
+  TagState2["primary"] = "primary";
+  TagState2["secondary"] = "secondary";
+  TagState2["info"] = "info";
+  TagState2["success"] = "success";
+  TagState2["warning"] = "warning";
+  TagState2["danger"] = "danger";
+  return TagState2;
+})(TagState || {});
+export var AntTagSize = /* @__PURE__ */ ((AntTagSize2) => {
+  AntTagSize2["lg"] = "lg";
+  AntTagSize2["md"] = "md";
+  AntTagSize2["sm"] = "sm";
+  AntTagSize2["xs"] = "xs";
+  AntTagSize2["xs2"] = "2xs";
+  AntTagSize2["xs3"] = "3xs";
+  return AntTagSize2;
+})(AntTagSize || {});

package/dist/components/__types/AntToaster.types.d.ts

@@ -0,0 +1,8 @@
+import { InputState } from '../../enums';
+export type Toast = {
+    id?: string;
+    title: string;
+    content?: string;
+    type: InputState;
+    hasIcon?: boolean;
+};

package/dist/components/__types/AntToaster.types.js

@@ -0,0 +1 @@
+"use strict";

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

@@ -0,0 +1,7 @@
+export * from './AntAccordion.types';
+export * from './AntIcon.types';
+export * from './AntKeycap.types';
+export * from './AntListGroupItem.types';
+export * from './AntSpinner.types';
+export * from './AntTag.types';
+export * from './AntToaster.types';

package/dist/components/__types/index.js

@@ -0,0 +1,82 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _AntAccordion = require("./AntAccordion.types");
+Object.keys(_AntAccordion).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _AntAccordion[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _AntAccordion[key];
+    }
+  });
+});
+var _AntIcon = require("./AntIcon.types");
+Object.keys(_AntIcon).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _AntIcon[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _AntIcon[key];
+    }
+  });
+});
+var _AntKeycap = require("./AntKeycap.types");
+Object.keys(_AntKeycap).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _AntKeycap[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _AntKeycap[key];
+    }
+  });
+});
+var _AntListGroupItem = require("./AntListGroupItem.types");
+Object.keys(_AntListGroupItem).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _AntListGroupItem[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _AntListGroupItem[key];
+    }
+  });
+});
+var _AntSpinner = require("./AntSpinner.types");
+Object.keys(_AntSpinner).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _AntSpinner[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _AntSpinner[key];
+    }
+  });
+});
+var _AntTag = require("./AntTag.types");
+Object.keys(_AntTag).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _AntTag[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _AntTag[key];
+    }
+  });
+});
+var _AntToaster = require("./AntToaster.types");
+Object.keys(_AntToaster).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _AntToaster[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _AntToaster[key];
+    }
+  });
+});

package/dist/components/__types/index.mjs

@@ -0,0 +1,7 @@
+export * from "./AntAccordion.types.mjs";
+export * from "./AntIcon.types.mjs";
+export * from "./AntKeycap.types.mjs";
+export * from "./AntListGroupItem.types.mjs";
+export * from "./AntSpinner.types.mjs";
+export * from "./AntTag.types.mjs";
+export * from "./AntToaster.types.mjs";

package/dist/components/buttons/AntActionButton.vue

@@ -0,0 +1,74 @@
+<script lang="ts" setup>
+/**
+ * This button is used for everything what is the primary
+ * action like save, confirm, create, etc.
+ */
+import {Position, State, InputState, Size, Grouped} from '../../enums';
+import AntButton from './AntButton.vue';
+import type {IconDefinition} from '@fortawesome/free-solid-svg-icons';
+import {computed, useSlots} from 'vue';
+import {hasSlotContent} from '../../utils';
+
+defineEmits(['click', 'blur']);
+const props = withDefaults(
+  defineProps<{
+    iconLeft?: IconDefinition;
+    iconRight?: IconDefinition;
+    size?: Size;
+    disabled?: boolean;
+    grouped?: Grouped;
+    state?: State;
+    skeleton?: boolean;
+    expanded?: boolean;
+    filled?: boolean;
+    hasPermission?: boolean;
+    tooltipPosition?: Position;
+    tooltipState?: InputState;
+    tooltipDelay?: number;
+    submit?: boolean;
+  }>(), {
+    state: State.primary,
+    hasPermission: true,
+    filled: true,
+    submit: false
+  }
+);
+const slots = useSlots();
+const hasTooltip = computed(() => !props.skeleton && !props.disabled && props.hasPermission && hasSlotContent(slots['tooltipContent']));
+const hasPermissionTooltip = computed(() => !props.skeleton && !props.disabled && !props.hasPermission && hasSlotContent(slots['invalidPermissionTooltipContent']));
+</script>
+
+<template>
+  <AntButton
+    :icon-left="iconLeft"
+    :icon-right="iconRight"
+    :size="size"
+    :disabled="disabled || !hasPermission"
+    :grouped="grouped"
+    :skeleton="skeleton"
+    :expanded="expanded"
+    :state="state"
+    :filled="filled"
+    :tooltip-position="tooltipPosition"
+    :tooltip-state="hasPermissionTooltip ? InputState.info : tooltipState"
+    :tooltip-delay="hasPermissionTooltip ? 300 : tooltipDelay"
+    :submit="submit"
+    data-e2e="action-button"
+    @click="$emit('click')"
+    @blur="$emit('blur')"
+  >
+    <slot/>
+
+    <template #tooltip-content>
+      <slot
+        v-if="hasTooltip"
+        name="tooltipContent"
+      />
+
+      <slot
+        v-if="hasPermissionTooltip"
+        name="invalidPermissionTooltipContent"
+      />
+    </template>
+  </AntButton>
+</template>

package/dist/components/buttons/AntButton.vue

@@ -0,0 +1,257 @@
+<script lang="ts" setup>
+import {type IconDefinition} from '@fortawesome/free-solid-svg-icons';
+import {computed, onMounted} from 'vue';
+import {type RouteLocationRaw} from 'vue-router';
+import AntSkeleton from '../AntSkeleton.vue';
+import AntSpinner from '../AntSpinner.vue';
+import {Grouped} from '../../enums/Grouped.enum';
+import {Size} from '../../enums/Size.enum';
+import {handleEnumValidation} from '../../handler';
+import {State, InputState, Position} from '../../enums';
+import {ButtonType} from './__types';
+import AntIcon from '../AntIcon.vue';
+import AntTooltip from '../AntTooltip.vue';
+import {IconSize} from '../__types/AntIcon.types';
+
+defineEmits(['click', 'blur']);
+
+const props = withDefaults(defineProps<{
+  filled?: boolean;
+  size?: Size;
+  state?: State;
+  iconLeft?: IconDefinition;
+  iconRight?: IconDefinition;
+  to?: RouteLocationRaw;
+  disabled?: boolean;
+  grouped?: Grouped;
+  skeleton?: boolean;
+  spinner?: boolean;
+  readonly?: boolean;
+  expanded?: boolean;
+  submit?: boolean;
+  outlined?: boolean;
+  noFocus?: boolean;
+  tooltipPosition?: Position;
+  tooltipState?: InputState;
+  tooltipDelay?: number;
+}>(), {
+  state: State.base,
+  disabled: false,
+  filled: false,
+  skeleton: false,
+  spinner: false,
+  size: Size.md,
+  grouped: Grouped.none,
+  readonly: false,
+  expanded: false,
+  submit: false,
+  outlined: true,
+  noFocus: false,
+  tooltipPosition: Position.bottom,
+  tooltipState: InputState.base,
+  tooltipDelay: 800
+});
+
+const hasInputState = computed(() => props.skeleton || props.readonly || props.disabled);
+const groupedClassList = computed(() => ({
+  'rounded-tl-md rounded-bl-md rounded-tr-none rounded-br-none -mr-px': props.grouped === Grouped.left,
+  'rounded-none -mx-px': props.grouped === Grouped.center,
+  'rounded-tl-none rounded-bl-none rounded-tr-md rounded-br-md -ml-px': props.grouped === Grouped.right,
+  'rounded-md': props.grouped === Grouped.none,
+}));
+const classes = computed(() => {
+  const variants = {
+    [State.base]: 'ring-primary-200 outline-neutral-300',
+    [State.danger]: 'ring-danger-200 outline-danger-500',
+    [State.info]: 'ring-info-200 outline-info-500',
+    [State.primary]: 'ring-primary-200 outline-primary-500',
+    [State.secondary]: 'ring-secondary-200 outline-secondary-500',
+    [State.success]: 'ring-success-200 outline-success-500',
+    [State.warning]: 'ring-warning-200 outline-warning-500',
+  };
+  const notFilledVariants = {
+    [State.base]: 'bg-white text-for-white-bg-font',
+    [State.danger]: 'bg-white text-danger-500',
+    [State.info]: 'bg-white text-info-500',
+    [State.primary]: 'bg-white text-primary-500',
+    [State.secondary]: 'bg-white text-secondary-500',
+    [State.success]: 'bg-white text-success-500',
+    [State.warning]: 'bg-white text-warning-500',
+  };
+  const notFilledHoverVariants = {
+    [State.base]: 'hover:bg-neutral-100',
+    [State.danger]: 'hover:bg-danger-100',
+    [State.info]: 'hover:bg-info-100',
+    [State.primary]: 'hover:bg-primary-100',
+    [State.secondary]: 'hover:bg-secondary-100',
+    [State.success]: 'hover:bg-success-100',
+    [State.warning]: 'hover:bg-warning-100',
+  };
+  const filledVariants = {
+    [State.base]: 'bg-neutral-50 text-neutral-50-font',
+    [State.danger]: 'bg-danger-500 text-danger-500-font',
+    [State.info]: 'bg-info-500 text-info-500-font',
+    [State.primary]: 'bg-primary-500 text-primary-500-font',
+    [State.secondary]: 'bg-secondary-500 text-secondary-500-font',
+    [State.success]: 'bg-success-500 text-success-500-font',
+    [State.warning]: 'bg-warning-500 text-warning-500-font',
+  };
+  const filledHoverVariants = {
+    [State.base]: 'hover:bg-neutral-200',
+    [State.danger]: 'hover:bg-danger-600',
+    [State.info]: 'hover:bg-info-600',
+    [State.primary]: 'hover:bg-primary-600',
+    [State.secondary]: 'hover:bg-secondary-600',
+    [State.success]: 'hover:bg-success-600',
+    [State.warning]: 'hover:bg-warning-600',
+  };
+
+  return {
+    'transition-all inline-flex items-center justify-center relative font-medium': true,
+    'focus:z-10': true,
+    'active:shadow-[inset_0_4px_4px_rgba(0,0,0,0.25)]': !hasInputState.value,
+    'p-1 text-xs gap-1': props.size === Size.xs2,
+    'p-1.5 text-xs gap-1.5': props.size === Size.xs,
+    'p-1.5 text-sm gap-1.5': props.size === Size.sm,
+    'p-2 text-sm gap-2': props.size === Size.md,
+    'p-2.5 text-sm gap-2.5': props.size === Size.lg,
+    'disabled:opacity-50 disabled:cursor-not-allowed': true,
+    'cursor-default': props.readonly,
+    'focus:ring-2': !props.readonly && props.size === Size.sm || props.size === Size.xs || props.size === Size.xs2,
+    'focus:ring-4': !props.readonly && props.size === Size.md || props.size === Size.lg,
+    'w-full': props.expanded,
+    'invisible': props.skeleton,
+    'outline outline-1 outline-offset-[-1px]': props.outlined,
+    ...groupedClassList.value,
+    [variants[props.state]]: true,
+    [notFilledVariants[props.state]]: !props.filled,
+    [notFilledHoverVariants[props.state]]: !props.filled && !hasInputState.value,
+    [filledVariants[props.state]]: props.filled,
+    [filledHoverVariants[props.state]]: props.filled && !hasInputState.value,
+  };
+});
+const iconColor = computed(() => {
+  const notFilledVariants = {
+    [State.base]: 'text-for-white-bg-font',
+    [State.danger]: 'text-danger-500',
+    [State.info]: 'text-info-500',
+    [State.primary]: 'text-primary-500',
+    [State.secondary]: 'text-secondary-500',
+    [State.success]: 'text-success-500',
+    [State.warning]: 'text-warning-500',
+  };
+  const filledVariants = {
+    [State.base]: 'text-for-white-bg-font',
+    [State.danger]: 'text-danger-500-font',
+    [State.info]: 'text-info-500-font',
+    [State.primary]: 'text-primary-500-font',
+    [State.secondary]: 'text-secondary-500-font',
+    [State.success]: 'text-success-500-font',
+    [State.warning]: 'text-warning-500-font',
+  };
+
+  return props.filled ? filledVariants[props.state] : notFilledVariants[props.state];
+});
+const type = computed(() => {
+  if (props.to !== undefined) {
+    return undefined;
+  }
+
+  return props.submit ? ButtonType.submit : ButtonType.button;
+});
+const is = computed(() => {
+  if (props.readonly) {
+    return 'div';
+  }
+
+  return props.to !== undefined ? 'router-link' : 'button';
+});
+const getIconSize = computed(() => {
+  if (props.size === Size.xs || props.size === Size.xs2) {
+    return IconSize.xs;
+  } else {
+    return IconSize.sm;
+  }
+});
+
+onMounted(() => {
+  handleEnumValidation(props.size, Size, 'size');
+  handleEnumValidation(props.state, State, 'state');
+  handleEnumValidation(props.grouped, Grouped, 'grouped');
+});
+</script>
+
+<template>
+  <div
+    class="relative inline-flex h-fit"
+    :class="{'w-full': props.expanded}"
+    data-e2e="button"
+    :data-e2e-state="props.state"
+  >
+    <AntSkeleton
+      v-if="skeleton"
+      :grouped="grouped"
+      rounded
+      absolute
+    />
+
+    <AntTooltip
+      :expanded="expanded"
+      :position="tooltipPosition"
+      :state="tooltipState"
+      :delay="tooltipDelay"
+    >
+      <template #default>
+        <component
+          :is="is"
+          :class="classes"
+          :type="type"
+          :to="to"
+          :disabled="disabled || undefined"
+          :tabindex="noFocus || hasInputState ? '-1' : '0'"
+          @click="() => !props.readonly ? $emit('click') : null"
+          @blur="() => !props.readonly ? $emit('blur') : null"
+        >
+          <AntSpinner
+            v-if="spinner"
+            :size="size"
+            :state="state"
+            :inverted="!filled"
+          />
+
+          <slot
+            v-if="!spinner"
+            name="icon-left"
+          >
+            <AntIcon
+              v-if="iconLeft"
+              :icon="iconLeft"
+              :size="getIconSize"
+              :color="iconColor"
+            />
+          </slot>
+
+          <slot
+            v-if="!spinner"
+          />
+
+          <slot
+            v-if="!spinner"
+            name="icon-right"
+          >
+            <AntIcon
+              v-if="iconRight"
+              :icon="iconRight"
+              :size="getIconSize"
+              :color="iconColor"
+            />
+          </slot>
+        </component>
+      </template>
+
+      <template #content>
+        <slot name="tooltip-content"/>
+      </template>
+    </AntTooltip>
+  </div>
+</template>

package/dist/components/buttons/AntCreateButton.vue

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

package/dist/components/buttons/AntDeleteButton.vue

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

package/dist/components/buttons/AntDuplicateButton.vue

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