@antify/ui-module 1.5.0 → 1.5.1

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

@@ -0,0 +1,54 @@
+<script lang="ts" setup>
+import AntActionButton from './AntActionButton.vue';
+import {Position, Size, Grouped, ColorType} 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"
+    :color-type="ColorType.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,42 +1,55 @@
 <script lang="ts" setup>
-import {Grouped} from '../../enums/Grouped.enum';
-import {Size} from '../../enums/Size.enum';
 import AntActionButton from './AntActionButton.vue';
-import {Position} from '../../enums';
+import {Position, Size, Grouped, ColorType} 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;
-	invalidPermissionTooltipPosition?: Position;
+	tooltipPosition?: Position;
 }>(), {
+	iconVariant: false,
 	canSave: true
 });
 </script>
 
 <template>
   <AntActionButton
+    :filled="false"
+    :color-type="ColorType.primary"
     :size="size"
     :disabled="disabled"
+    :icon-left="iconVariant ? faFloppyDisk : undefined"
+    :icon-right="iconVariant ? faPlus : undefined"
     :grouped="grouped"
     :skeleton="skeleton"
     :expanded="expanded"
-    :filled="false"
     :has-permission="canSave"
-    :invalid-permission-tooltip-position="invalidPermissionTooltipPosition"
+    :tooltip-position="tooltipPosition"
     data-e2e="save-and-new-button"
     @click="$emit('click')"
     @blur="$emit('blur')"
   >
-    <template #default>Save and new</template>
+    <template
+      v-if="!iconVariant"
+      #default
+    >
+      Save and new
+    </template>
 
     <template #invalidPermissionTooltipContent>
-      You have no permission to save this entry.<br>
+      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,43 +1,54 @@
 <script lang="ts" setup>
-import {Grouped} from '../../enums/Grouped.enum';
-import {Size} from '../../enums/Size.enum';
-import {ColorType} from '../../enums/ColorType.enum';
 import AntActionButton from './AntActionButton.vue';
-import {Position} from '../../enums';
+import {Position, Size, Grouped, ColorType} 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;
-	invalidPermissionTooltipPosition?: Position;
+	tooltipPosition?: Position;
 }>(), {
+	iconVariant: false,
 	canSave: true
 });
 </script>
 
 <template>
   <AntActionButton
+    :filled="true"
+    :color-type="ColorType.primary"
     :size="size"
     :disabled="disabled"
+    :icon-left="iconVariant ? faFloppyDisk : undefined"
     :grouped="grouped"
     :skeleton="skeleton"
     :expanded="expanded"
-    :color-type="ColorType.primary"
-    data-e2e="save-button"
     :has-permission="canSave"
-    :invalid-permission-tooltip-position="invalidPermissionTooltipPosition"
+    :tooltip-position="tooltipPosition"
+    data-e2e="save-button"
     @click="$emit('click')"
     @blur="$emit('blur')"
   >
-    <template #default>Save</template>
+    <template
+      v-if="!iconVariant"
+      #default
+    >
+      Save
+    </template>
 
     <template #invalidPermissionTooltipContent>
-      You have no permission to save this entry.<br>
+      You have no permission to save entries.<br>
       Please contact your administrator.
     </template>
+
+    <template #tooltipContent>
+      Save entry
+    </template>
   </AntActionButton>
 </template>

package/src/runtime/components/form/AntFormGroup.vue

@@ -1,21 +1,36 @@
 <script lang="ts" setup>
 import {Direction} from '../../enums/Direction.enum';
-import {computed} from 'vue';
+import {computed, useAttrs} from 'vue';
 
+const attrs = useAttrs();
 const props = withDefaults(defineProps<{
   direction?: Direction;
 }>(), {
   direction: Direction.column,
 });
 
-const classes = computed(() => ({
-  'flex-col space-y-2.5': props.direction === Direction.column,
-  'flex-row space-x-2.5': props.direction === Direction.row,
-}));
+const classes = computed(() => {
+	// Let override gap-x-* and gap-y-* classes from outside
+	const attrClasses = typeof attrs.class === 'string' ? attrs.class : ''
+	const hasGapX = /gap-x-\d/.test(attrClasses);
+	const hasGapY = /gap-y-\d/.test(attrClasses);
+
+	const classes: Record<string, boolean> = {
+		'flex-col': props.direction === Direction.column,
+		'gap-y-2.5': !hasGapY && props.direction === Direction.column,
+		'flex-row': props.direction === Direction.row,
+		'gap-x-2.5': !hasGapX && props.direction === Direction.row,
+	}
+
+	return classes;
+});
 </script>
 
 <template>
-  <section class="flex" :class="classes">
-    <slot/>
+  <section
+    class="flex"
+    :class="classes"
+  >
+    <slot />
   </section>
 </template>