@antify/ui-module 1.2.1 → 1.4.0

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "ui-module",
   "configKey": "uiModule",
-  "version": "1.2.1"
+  "version": "1.4.0"
 }

package/dist/runtime/components/AntTooltip.vue

@@ -3,78 +3,80 @@ import {computed, onMounted, ref} from 'vue';
 import {handleEnumValidation} from '../handler';
 import {InputColorType, Position} from '../enums';
 import {classesToObjectSyntax} from '../utils';
+import {hasSlotContent} from '../utils';
 
 const props = withDefaults(defineProps<{
-  content?: string,
-  position?: Position,
-  tooltipClasses?: string | Record<string, boolean>,
-  colorType?: InputColorType
+	position?: Position
+	tooltipClasses?: string | Record<string, boolean>
+	colorType?: InputColorType
+	expanded?: boolean
 }>(), {
-  position: Position.left,
-  tooltipClasses: '',
-  colorType: InputColorType.base
+	position: Position.left,
+	tooltipClasses: '',
+	colorType: InputColorType.base,
+	expanded: false
 });
 const visible = ref(false);
 const _tooltipClasses = computed(() => ({
-  'absolute w-max inline-flex': true,
-  // Position
-  'bottom-full pb-3.5': props.position === Position.top,
-  'top-full pt-3.5': props.position === Position.bottom,
-  'right-full pr-3.5': props.position === Position.left,
-  'left-full pl-3.5': props.position === Position.right,
-  ...classesToObjectSyntax(props.tooltipClasses)
+	'absolute w-max inline-flex': true,
+	// Position
+	'bottom-full pb-3.5': props.position === Position.top,
+	'top-full pt-3.5': props.position === Position.bottom,
+	'right-full pr-3.5': props.position === Position.left,
+	'left-full pl-3.5': props.position === Position.right,
+	...classesToObjectSyntax(props.tooltipClasses)
 }));
 const classes = computed(() => ({
-  'z-10 absolute flex': true,
-  'top-0 left-0 right-0 -m-[2px] justify-center': props.position === Position.bottom,
-  'bottom-0 left-0 right-0 -m-[2px] justify-center': props.position === Position.top,
-  'top-0 left-0 bottom-0 -ml-[2.2px] items-center': props.position === Position.right,
-  'top-0 right-0 bottom-0 -mr-[2.2px] items-center': props.position === Position.left,
+	'z-10 absolute flex': true,
+	'top-0 left-0 right-0 -m-[2px] justify-center': props.position === Position.bottom,
+	'bottom-0 left-0 right-0 -m-[2px] justify-center': props.position === Position.top,
+	'top-0 left-0 bottom-0 -ml-[2.2px] items-center': props.position === Position.right,
+	'top-0 right-0 bottom-0 -mr-[2.2px] items-center': props.position === Position.left,
 }));
 const itemContainerClasses = computed(() => ({
-  'relative flex items-center': true,
-  'justify-center': props.position === Position.bottom,
-  'justify-center rotate-180': props.position === Position.top,
-  'justify-center -rotate-90': props.position === Position.right,
-  'justify-center rotate-90': props.position === Position.left,
+	'relative flex items-center': true,
+	'justify-center': props.position === Position.bottom,
+	'justify-center rotate-180': props.position === Position.top,
+	'justify-center -rotate-90': props.position === Position.right,
+	'justify-center rotate-90': props.position === Position.left,
 }));
 const contentClasses = computed(() => {
-  const variants: Record<InputColorType, string> = {
-    [InputColorType.base]: 'text-neutral-50-font bg-neutral-50 border-neutral-300',
-    [InputColorType.danger]: 'text-danger-500-font bg-danger-500 border-danger-500',
-    [InputColorType.info]: 'text-info-500-font bg-info-500 border-info-500',
-    [InputColorType.success]: 'text-success-500-font bg-success-500 border-success-500',
-    [InputColorType.warning]: 'text-warning-500-font bg-warning-500 border-warning-500',
-  };
+	const variants: Record<InputColorType, string> = {
+		[InputColorType.base]: 'text-neutral-50-font bg-neutral-50 border-neutral-300',
+		[InputColorType.danger]: 'text-danger-500-font bg-danger-500 border-danger-500',
+		[InputColorType.info]: 'text-info-500-font bg-info-500 border-info-500',
+		[InputColorType.success]: 'text-success-500-font bg-success-500 border-success-500',
+		[InputColorType.warning]: 'text-warning-500-font bg-warning-500 border-warning-500',
+	};
 
-  return {[variants[props.colorType]]: true};
+	return {[variants[props.colorType]]: true};
 });
 const svgPathClasses = computed(() => {
-  const variants: Record<InputColorType, string> = {
-    [InputColorType.base]: 'fill-neutral-50 stroke-neutral-50',
-    [InputColorType.danger]: 'fill-danger-500 stroke-danger-500',
-    [InputColorType.info]: 'fill-info-500 stroke-info-500',
-    [InputColorType.success]: 'fill-success-500 stroke-success-500',
-    [InputColorType.warning]: 'fill-warning-500 stroke-warning-500',
-  };
+	const variants: Record<InputColorType, string> = {
+		[InputColorType.base]: 'fill-neutral-50 stroke-neutral-50',
+		[InputColorType.danger]: 'fill-danger-500 stroke-danger-500',
+		[InputColorType.info]: 'fill-info-500 stroke-info-500',
+		[InputColorType.success]: 'fill-success-500 stroke-success-500',
+		[InputColorType.warning]: 'fill-warning-500 stroke-warning-500',
+	};
 
-  return {[variants[props.colorType]]: true};
+	return {[variants[props.colorType]]: true};
 });
 const arrowSvgPathClasses = computed(() => {
-  const variants: Record<InputColorType, string> = {
-    [InputColorType.base]: 'stroke-neutral-300',
-    [InputColorType.danger]: 'stroke-danger-500',
-    [InputColorType.info]: 'stroke-info-500',
-    [InputColorType.success]: 'stroke-success-500',
-    [InputColorType.warning]: 'stroke-warning-500',
-  };
+	const variants: Record<InputColorType, string> = {
+		[InputColorType.base]: 'stroke-neutral-300',
+		[InputColorType.danger]: 'stroke-danger-500',
+		[InputColorType.info]: 'stroke-info-500',
+		[InputColorType.success]: 'stroke-success-500',
+		[InputColorType.warning]: 'stroke-warning-500',
+	};
 
-  return {[variants[props.colorType]]: true};
+	return {[variants[props.colorType]]: true};
 });
 
 onMounted(() => {
-  handleEnumValidation(props.position, Position, 'Position')
-  handleEnumValidation(props.colorType, InputColorType, 'colorType')
+	handleEnumValidation(props.position, Position, 'Position')
+	handleEnumValidation(props.colorType, InputColorType, 'colorType')
 });
 
 /**
@@ -84,33 +86,37 @@ onMounted(() => {
 const delayVisible = ref(visible.value);
 
 function onMouseOver() {
-  delayVisible.value = true;
+	delayVisible.value = true;
 
-  setTimeout(() => {
-    if (delayVisible.value) {
-      visible.value = true
-    }
-  }, 300)
+	setTimeout(() => {
+		if (delayVisible.value) {
+			visible.value = true
+		}
+	}, 300)
 }
 
 function onMouseLeave() {
-  delayVisible.value = false
-  visible.value = false
+	delayVisible.value = false
+	visible.value = false
 }
 </script>
 
 <template>
   <div
-    class="relative inline-flex justify-center items-center"
+    class="relative justify-center items-center"
+    :class="{'flex w-full': props.expanded, 'inline-flex': !props.expanded}"
     data-e2e="tooltip"
     @mouseover="onMouseOver"
     @mouseleave="onMouseLeave"
   >
-    <slot/>
+    <slot />
 
-    <div v-if="visible" :class="_tooltipClasses">
+    <div
+      v-if="visible && hasSlotContent($slots.content)"
+      :class="_tooltipClasses"
+    >
       <div
-        class="shadow-lg text-sm relative inline-flex flex-col relative"
+        class="shadow-lg text-sm relative"
       >
         <div
           :class="classes"
@@ -157,7 +163,7 @@ function onMouseLeave() {
           class="p-2.5 rounded-md border"
           :class="contentClasses"
         >
-          <slot name="content"/>
+          <slot name="content" />
         </div>
       </div>
     </div>

package/dist/runtime/components/__stories/AntTooltip.stories.d.ts

@@ -4,3 +4,8 @@ declare const meta: Meta<typeof AntTooltip>;
 export default meta;
 type Story = StoryObj<typeof AntTooltip>;
 export declare const Docs: Story;
+/**
+ * Make sure, no tooltip get shown if no content is provided.
+ */
+export declare const WithoutContent: Story;
+export declare const Expanded: Story;

package/dist/runtime/components/__stories/AntTooltip.stories.mjs

@@ -25,19 +25,41 @@ export const Docs = {
       return { args };
     },
     template: `
-          <div class="p-32 flex justify-center items-center">
-            <AntTooltip v-bind="args">
-              <template #content>Lorem ipsum dolor sit amet <br/> foo</template>
-              <template #default>
-                <span class="text-primary-500 bg-danger-500">
-                  Hover me
-                </span>
-              </template>
-            </AntTooltip>
-          </div>
-        `
+			<div class="p-32 flex justify-center items-center">
+				<AntTooltip v-bind="args">
+					<template #content>Lorem ipsum dolor sit amet <br/> foo</template>
+					<template #default>
+						<AntButton readonly filled expanded>Hover me</AntButton>
+					</template>
+				</AntTooltip>
+			</div>
+		`
   }),
   args: {
     position: Position.top
   }
 };
+export const WithoutContent = {
+  render: (args) => ({
+    components: { AntTooltip, AntButton },
+    setup() {
+      return { args };
+    },
+    template: `
+			<div class="p-32 flex justify-center items-center">
+				<AntTooltip v-bind="args">
+					<AntButton readonly filled expanded>Hover me</AntButton>
+
+					<template #content></template>
+				</AntTooltip>
+			</div>
+    `
+  }),
+  args: {}
+};
+export const Expanded = {
+  render: Docs.render,
+  args: {
+    expanded: true
+  }
+};

package/dist/runtime/components/buttons/AntActionButton.vue

@@ -0,0 +1,63 @@
+<script lang="ts" setup>
+/**
+ * This button is used for everything what is the primary
+ * action like save, confirm, create, etc.
+ */
+import {Grouped} from '../../enums/Grouped.enum';
+import {Size} from '../../enums/Size.enum';
+import {ColorType, InputColorType} from '../../enums/ColorType.enum';
+import {Position} from '../../enums/Position.enum';
+import AntButton from './AntButton.vue';
+import AntTooltip from '../AntTooltip.vue';
+
+defineEmits(['click', 'blur']);
+withDefaults(
+	defineProps<{
+		size?: Size;
+		disabled?: boolean;
+		grouped?: Grouped;
+		colorType?: ColorType;
+		skeleton?: boolean;
+		expanded?: boolean;
+		filled?: boolean;
+		hasPermission?: boolean;
+		invalidPermissionTooltipPosition?: Position;
+	}>(), {
+		colorType: ColorType.primary,
+		hasPermission: true,
+		filled: true
+	}
+)
+</script>
+
+<template>
+  <AntTooltip
+    :expanded="expanded"
+    :position="invalidPermissionTooltipPosition"
+    :color-type="InputColorType.info"
+  >
+    <slot name="button">
+      <AntButton
+        :size="size"
+        :disabled="disabled || !hasPermission"
+        :grouped="grouped"
+        :skeleton="skeleton"
+        :expanded="expanded"
+        :color-type="colorType"
+        :filled="filled"
+        data-e2e="action-button"
+        @click="$emit('click')"
+        @blur="$emit('blur')"
+      >
+        <slot />
+      </AntButton>
+    </slot>
+
+    <template
+      v-if="!hasPermission && !skeleton"
+      #content
+    >
+      <slot name="invalidPermissionTooltipContent" />
+    </template>
+  </AntTooltip>
+</template>

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

@@ -102,7 +102,7 @@ const classes = computed(() => {
   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)]': !props.readonly,
+    'active:shadow-[inset_0_4px_4px_rgba(0,0,0,0.25)]': !hasAction.value,
     'py-1.5 px-2.5 text-xs gap-1': props.size === Size.sm,
     'py-2.5 px-3.5 text-sm gap-2.5': props.size === Size.md,
     'disabled:opacity-50 disabled:cursor-not-allowed': true,
@@ -115,9 +115,9 @@ const classes = computed(() => {
     ...groupedClassList.value,
     [variants[props.colorType]]: true,
     [notFilledVariants[props.colorType]]: !props.filled,
-    [notFilledHoverVariants[props.colorType]]: !props.filled && !props.readonly,
+    [notFilledHoverVariants[props.colorType]]: !props.filled && !hasAction.value,
     [filledVariants[props.colorType]]: props.filled,
-    [filledHoverVariants[props.colorType]]: props.filled && !props.readonly,
+    [filledHoverVariants[props.colorType]]: props.filled && !hasAction.value,
   };
 });
 const iconColor = computed(() => {

package/dist/runtime/components/buttons/AntCreateButton.vue

@@ -1,32 +1,41 @@
 <script lang="ts" setup>
 import {Grouped} from '../../enums/Grouped.enum';
 import {Size} from '../../enums/Size.enum';
-import {ColorType} from '../../enums/ColorType.enum';
-import AntButton from './AntButton.vue';
+import AntActionButton from './AntActionButton.vue';
+import {Position} from '../../enums';
 
 defineEmits(['click', 'blur']);
-defineProps<{
-  size?: Size;
-  disabled?: boolean;
-  grouped?: Grouped;
-  skeleton?: boolean;
-  expanded?: boolean;
-}>()
+withDefaults(defineProps<{
+	size?: Size;
+	disabled?: boolean;
+	grouped?: Grouped;
+	skeleton?: boolean;
+	expanded?: boolean;
+	canCreate?: boolean;
+	invalidPermissionTooltipPosition?: Position;
+}>(), {
+	canCreate: true
+});
 </script>
 
 <template>
-  <AntButton
+  <AntActionButton
     :size="size"
     :disabled="disabled"
     :grouped="grouped"
     :skeleton="skeleton"
     :expanded="expanded"
-    :color-type="ColorType.primary"
-    filled
+    :has-permission="canCreate"
+    :invalid-permission-tooltip-position="invalidPermissionTooltipPosition"
     data-e2e="create-button"
     @click="$emit('click')"
     @blur="$emit('blur')"
   >
-    Create
-  </AntButton>
+    <template #default>Create</template>
+
+    <template #invalidPermissionTooltipContent>
+      You have no permission to create new entries.<br>
+      Please contact your administrator.
+    </template>
+  </AntActionButton>
 </template>

package/dist/runtime/components/buttons/AntDeleteButton.vue

@@ -2,31 +2,42 @@
 import {Grouped} from '../../enums/Grouped.enum';
 import {Size} from '../../enums/Size.enum';
 import {ColorType} from '../../enums/ColorType.enum';
-import AntButton from './AntButton.vue';
+import AntActionButton from './AntActionButton.vue';
+import {Position} from '../../enums';
 
 defineEmits(['click', 'blur']);
-defineProps<{
-  size?: Size;
-  disabled?: boolean;
-  grouped?: Grouped;
-  skeleton?: boolean;
-  expanded?: boolean;
-}>()
+withDefaults(defineProps<{
+	size?: Size;
+	disabled?: boolean;
+	grouped?: Grouped;
+	skeleton?: boolean;
+	expanded?: boolean;
+	canDelete?: boolean;
+	invalidPermissionTooltipPosition?: Position;
+}>(), {
+	canDelete: true
+})
 </script>
 
 <template>
-  <AntButton
+  <AntActionButton
     :size="size"
     :disabled="disabled"
     :grouped="grouped"
     :skeleton="skeleton"
     :expanded="expanded"
     :color-type="ColorType.danger"
-    filled
+    :has-permission="canDelete"
+    :invalid-permission-tooltip-position="invalidPermissionTooltipPosition"
     data-e2e="delete-button"
     @click="$emit('click')"
     @blur="$emit('blur')"
   >
-    Delete
-  </AntButton>
+    <template #default>Delete</template>
+
+    <template #invalidPermissionTooltipContent>
+      You have no permission to delete this entry.<br>
+      Please contact your administrator.
+    </template>
+  </AntActionButton>
 </template>

package/dist/runtime/components/buttons/AntSaveAndNewButton.vue

@@ -1,32 +1,42 @@
 <script lang="ts" setup>
 import {Grouped} from '../../enums/Grouped.enum';
 import {Size} from '../../enums/Size.enum';
-import {ColorType} from '../../enums/ColorType.enum';
-import AntButton from './AntButton.vue';
+import AntActionButton from './AntActionButton.vue';
+import {Position} from '../../enums';
 
 defineEmits(['click', 'blur']);
-defineProps<{
-  size?: Size;
-  disabled?: boolean;
-  grouped?: Grouped;
-  skeleton?: boolean;
-  expanded?: boolean;
-}>()
+withDefaults(defineProps<{
+	size?: Size;
+	disabled?: boolean;
+	grouped?: Grouped;
+	skeleton?: boolean;
+	expanded?: boolean;
+	canSave?: boolean;
+	invalidPermissionTooltipPosition?: Position;
+}>(), {
+	canSave: true
+});
 </script>
 
 <template>
-  <AntButton
+  <AntActionButton
     :size="size"
     :disabled="disabled"
     :grouped="grouped"
     :skeleton="skeleton"
     :expanded="expanded"
-    :color-type="ColorType.primary"
-    filled
+    :filled="false"
+    :has-permission="canSave"
+    :invalid-permission-tooltip-position="invalidPermissionTooltipPosition"
     data-e2e="save-and-new-button"
     @click="$emit('click')"
     @blur="$emit('blur')"
   >
-    Save and new
-  </AntButton>
+    <template #default>Save and new</template>
+
+    <template #invalidPermissionTooltipContent>
+      You have no permission to save this entry.<br>
+      Please contact your administrator.
+    </template>
+  </AntActionButton>
 </template>

package/dist/runtime/components/buttons/AntSaveButton.vue

@@ -2,20 +2,25 @@
 import {Grouped} from '../../enums/Grouped.enum';
 import {Size} from '../../enums/Size.enum';
 import {ColorType} from '../../enums/ColorType.enum';
-import AntButton from './AntButton.vue';
+import AntActionButton from './AntActionButton.vue';
+import {Position} from '../../enums';
 
 defineEmits(['click', 'blur']);
-defineProps<{
-  size?: Size;
-  disabled?: boolean;
-  grouped?: Grouped;
-  skeleton?: boolean;
-  expanded?: boolean;
-}>()
+withDefaults(defineProps<{
+	size?: Size;
+	disabled?: boolean;
+	grouped?: Grouped;
+	skeleton?: boolean;
+	expanded?: boolean;
+	canSave?: boolean;
+	invalidPermissionTooltipPosition?: Position;
+}>(), {
+	canSave: true
+});
 </script>
 
 <template>
-  <AntButton
+  <AntActionButton
     :size="size"
     :disabled="disabled"
     :grouped="grouped"
@@ -23,9 +28,16 @@ defineProps<{
     :expanded="expanded"
     :color-type="ColorType.primary"
     data-e2e="save-button"
+    :has-permission="canSave"
+    :invalid-permission-tooltip-position="invalidPermissionTooltipPosition"
     @click="$emit('click')"
     @blur="$emit('blur')"
   >
-    Save
-  </AntButton>
+    <template #default>Save</template>
+
+    <template #invalidPermissionTooltipContent>
+      You have no permission to save this entry.<br>
+      Please contact your administrator.
+    </template>
+  </AntActionButton>
 </template>

package/dist/runtime/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 WithPermissionTooltip: Story;

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

@@ -0,0 +1,79 @@
+import AntActionButton from "../AntActionButton.vue";
+import { Size } from "../../../enums/Size.enum.mjs";
+import { Grouped as _Grouped } from "../../../enums/Grouped.enum.mjs";
+import { Position } from "../../../enums/index.mjs";
+const meta = {
+  title: "Components/Buttons/Action Button",
+  component: AntActionButton,
+  parameters: { controls: { sort: "requiredFirst" } },
+  argTypes: {
+    size: {
+      control: { type: "radio" },
+      options: Object.values(Size)
+    },
+    grouped: {
+      control: { type: "select" },
+      options: Object.values(_Grouped)
+    },
+    invalidPermissionTooltipPosition: {
+      control: { type: "select" },
+      options: Object.values(Position)
+    }
+  }
+};
+export default meta;
+export const Docs = {
+  render: (args) => ({
+    components: { AntActionButton },
+    setup() {
+      return { args };
+    },
+    template: '<AntActionButton v-bind="args">Action Button</AntActionButton>'
+  }),
+  args: {}
+};
+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 WithPermissionTooltip = {
+  render: (args) => ({
+    components: { AntActionButton },
+    setup() {
+      return { args };
+    },
+    template: `<AntActionButton v-bind="args">
+			Action Button
+
+			<template #invalidPermissionTooltipContent>You have no permission to do this</template>
+		</AntActionButton>`
+  }),
+  args: {
+    hasPermission: false,
+    invalidPermissionTooltipPosition: Position.right
+  }
+};

package/dist/runtime/components/buttons/__stories/AntCreateButton.stories.d.ts

@@ -8,3 +8,4 @@ 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;