@antify/ui-module 1.7.2 → 1.8.0

package/src/runtime/components/buttons/AntButton.vue

@@ -1,257 +0,0 @@
-<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/src/runtime/components/buttons/AntCreateButton.vue

@@ -1,54 +0,0 @@
-<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/src/runtime/components/buttons/AntDeleteButton.vue

@@ -1,54 +0,0 @@
-<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/src/runtime/components/buttons/AntDuplicateButton.vue

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

package/src/runtime/components/buttons/AntEditButton.vue

@@ -1,54 +0,0 @@
-<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/src/runtime/components/buttons/AntSaveAndNewButton.vue

@@ -1,56 +0,0 @@
-<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/src/runtime/components/buttons/AntSaveButton.vue

@@ -1,55 +0,0 @@
-<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/src/runtime/components/crud/AntCrud.vue

@@ -1,69 +0,0 @@
-<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/src/runtime/components/crud/AntCrudDetail.vue

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