@antify/ui-module 1.1.3

package/src/runtime/components/form/Elements/AntDropDown.vue

@@ -0,0 +1,160 @@
+<script setup lang="ts">
+/**
+ * This is the custom DropDown for each element (like select / tag-select)
+ *
+ * TODO:: add screen reader support
+ * Fix overflow bug (See Ellipsis Text story)
+ * TODO:: if the dropdown is open and the user types something, the element with a matching value should be focused.
+ */
+
+import { computed, nextTick, ref, watch } from 'vue';
+import { InputColorType, Size } from '../../../enums';
+import type { SelectOption } from '../__types';
+import { useVModel } from '@vueuse/core';
+import type { Validator } from '@antify/validate';
+
+const emit = defineEmits(['update:open', 'update:modelValue']);
+const props = withDefaults(defineProps<{
+  modelValue: string | number | null;
+  open: boolean;
+  options: SelectOption[];
+  colorType?: InputColorType;
+  validator?: Validator;
+  size?: Size;
+  inputRef?: HTMLElement | null
+}>(), {
+  colorType: InputColorType.base,
+});
+
+const _modelValue = useVModel(props, 'modelValue', emit);
+const isOpen = useVModel(props, 'open', emit);
+
+const focusedDropDownItem = ref<string | number | null>(null);
+const dropDownRef = ref<HTMLElement | null>(null);
+
+const dropdownClasses = computed(() => {
+  const variants: Record<InputColorType, string> = {
+    [InputColorType.base]: 'bg-neutral-300 border-neutral-300',
+    [InputColorType.success]: 'bg-success-500 border-success-500',
+    [InputColorType.info]: 'bg-info-500 border-info-500',
+    [InputColorType.warning]: 'bg-warning-500 border-warning-500',
+    [InputColorType.danger]: 'bg-danger-500 border-danger-500',
+  };
+
+  return {
+    'absolute w-full border flex flex-col gap-px outline-none -mt-px overflow-hidden shadow-md z-40': true,
+    'rounded-bl-md rounded-br-md': true,
+    [variants[props.colorType]]: true,
+    // Size
+    'text-xs': props.size === Size.sm,
+    'text-sm': props.size === Size.md,
+  };
+});
+const dropDownItemClasses = computed(() => {
+  const variants: Record<InputColorType, string> = {
+    [InputColorType.base]: 'bg-neutral-50 text-neutral-50-font',
+    [InputColorType.success]: 'bg-success-100 border-success-100-font',
+    [InputColorType.info]: 'bg-info-100 border-info-100-font',
+    [InputColorType.warning]: 'bg-warning-100 border-warning-100-font',
+    [InputColorType.danger]: 'bg-danger-100 border-danger-100-font',
+  };
+
+  return {
+    'select-none text-ellipsis overflow-hidden whitespace-nowrap': true,
+    [variants[props.colorType]]: true,
+    // Size
+    'p-1.5': props.size === Size.sm,
+    'p-2.5': props.size === Size.md,
+  };
+});
+
+watch(isOpen, (val) => {
+  nextTick(() => {
+    if (val) {
+      dropDownRef.value?.focus();
+      focusedDropDownItem.value = _modelValue.value || props.options[0].value;
+    }
+  });
+});
+
+function onKeyDownDropDown(e: KeyboardEvent) {
+  if (e.key === 'Enter') {
+    isOpen.value = false;
+    _modelValue.value = focusedDropDownItem.value;
+    props.inputRef?.focus();
+  }
+
+  if (e.key === 'Escape') {
+    isOpen.value = false;
+    props.inputRef?.focus();
+  }
+
+  if (e.key === 'ArrowDown' || e.key === 'ArrowRight') {
+    const index = props.options.findIndex(option => option.value === focusedDropDownItem.value);
+    const option = props.options[index + 1];
+
+    if (index === -1) {
+      focusedDropDownItem.value = props.options[0].value
+    } else if (option !== undefined) {
+      focusedDropDownItem.value = option.value
+    }
+  }
+
+  if (e.key === 'ArrowUp' || e.key === 'ArrowLeft') {
+    const index = props.options.findIndex(option => option.value === focusedDropDownItem.value);
+    const option = props.options[index - 1];
+
+    if (option !== undefined) {
+      focusedDropDownItem.value = option.value
+    }
+  }
+
+  if (e.key === 'Tab') {
+    isOpen.value = false;
+  }
+}
+
+function getActiveDropDownItemClasses(option: SelectOption) {
+  const variants: Record<InputColorType, string> = {
+    [InputColorType.base]: 'bg-neutral-50/25',
+    [InputColorType.success]: 'bg-success-100/25',
+    [InputColorType.info]: 'bg-info-100/25',
+    [InputColorType.warning]: 'bg-warning-100/25',
+    [InputColorType.danger]: 'bg-danger-100/25',
+  };
+
+  return option.value === focusedDropDownItem.value ? {[variants[props.colorType]]: true} : {};
+}
+
+function onClickDropDownItem(e: MouseEvent, value: string | number | null) {
+  e.preventDefault();
+  props.inputRef?.focus();
+
+  isOpen.value = false;
+  _modelValue.value = value;
+}
+</script>
+
+<template>
+  <div
+    v-if="isOpen"
+    :class="dropdownClasses"
+    @keydown="onKeyDownDropDown"
+    ref="dropDownRef"
+    tabindex="0"
+  >
+    <div
+      v-for="(option, index) in options"
+      :key="`option-${index}`"
+      :class="{...dropDownItemClasses, ...getActiveDropDownItemClasses(option)}"
+      @mousedown="(e) => onClickDropDownItem(e, option.value)"
+      @mouseover="() => focusedDropDownItem = option.value"
+    >
+      {{ option.label }}
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

package/src/runtime/components/form/Elements/AntField.vue

@@ -0,0 +1,102 @@
+<script lang="ts" setup>
+import {onMounted, computed} from 'vue';
+import {Size} from '../../../enums/Size.enum'
+import AntInputLabel from './AntInputLabel.vue';
+import AntInputDescription from './AntInputDescription.vue';
+import {handleEnumValidation} from '../../../handler';
+import AntInputLimiter from './AntInputLimiter.vue';
+import {InputColorType} from '../../../enums';
+
+const emits = defineEmits(['clickLabel', 'validate']);
+const props = withDefaults(defineProps<{
+  label?: string;
+  description?: string;
+  size?: Size;
+  colorType?: InputColorType;
+  skeleton?: boolean;
+  limiterValue?: number;
+  limiterMaxValue?: number;
+  labelFor?: string;
+  showMessageOnError?: boolean;
+  errors?: string[];
+  expanded?: boolean;
+}>(), {
+  colorType: InputColorType.base,
+  skeleton: false,
+  size: Size.md,
+  showMessageOnError: true,
+  errors: [],
+  expanded: true
+});
+
+onMounted(() => {
+  handleEnumValidation(props.size, Size, 'size');
+  handleEnumValidation(props.colorType, InputColorType, 'colorType');
+});
+
+const _errors = computed(() => props.skeleton ? [] : props.errors);
+const _colorType = computed(() => _errors.value.length > 0 ? InputColorType.danger : props.colorType)
+</script>
+
+<template>
+  <div
+      class="flex flex-col items-start gap-1.5"
+      :class="{'w-full': expanded}"
+  >
+    <AntInputLabel
+        :label="label"
+        :size="size"
+        :skeleton="skeleton"
+        :for="labelFor"
+        @clickContent="$emit('clickLabel')"
+    >
+      <div class="w-full">
+        <slot/>
+      </div>
+    </AntInputLabel>
+
+    <div
+        v-if="showMessageOnError && (description || _errors.length > 0)"
+        class="flex justify-between w-full"
+    >
+      <AntInputDescription
+          :size="size"
+          :skeleton="skeleton"
+          :color-type="_colorType"
+      >
+        <slot name="description">
+          <template v-if="_errors.length === 1">
+            {{ errors[0] }}
+          </template>
+
+          <template v-else-if="_errors.length > 1">
+            <ul class="list-disc list-outside pl-4">
+              <li
+                v-for="(error, index) of _errors"
+                :key="`field-error-${index}`"
+                class="marker:m-none marker:p-none"
+              >
+                {{ error }}
+              </li>
+            </ul>
+          </template>
+
+          <template v-else>
+            {{ description }}
+          </template>
+        </slot>
+      </AntInputDescription>
+
+      <AntInputLimiter
+          v-if="limiterMaxValue !== undefined && limiterValue !== undefined"
+          :value="limiterValue"
+          :max-value="limiterMaxValue"
+          :color-type="_colorType"
+          :size="size"
+          :skeleton="skeleton"
+      >
+        {{ limiterValue }}/{{ limiterMaxValue }}
+      </AntInputLimiter>
+    </div>
+  </div>
+</template>

package/src/runtime/components/form/Elements/AntInputDescription.vue

@@ -0,0 +1,55 @@
+<script lang="ts" setup>
+import {computed, onMounted} from 'vue';
+import {Size} from '../../../enums/Size.enum'
+import AntSkeleton from '../../AntSkeleton.vue';
+import {handleEnumValidation} from '../../../handler';
+import {InputColorType} from '../../../enums';
+
+const props = withDefaults(defineProps<{
+  colorType?: InputColorType,
+  size?: Size;
+  skeleton?: boolean;
+}>(), {
+  skeleton: false,
+  size: Size.md,
+  colorType: InputColorType.base
+});
+
+const classes = computed(() => {
+  const variants: Record<InputColorType, string> = {
+    [InputColorType.base]: 'text-neutral-500',
+    [InputColorType.danger]: 'text-danger-500',
+    [InputColorType.info]: 'text-info-500',
+    [InputColorType.success]: 'text-success-500',
+    [InputColorType.warning]: 'text-warning-500',
+  };
+
+  return {
+    'relative font-regular inline-block transition-color': true,
+    'text-xs': props.size === Size.sm,
+    'text-sm': props.size === Size.md,
+    [variants[props.colorType]]: true
+  };
+});
+
+onMounted(() => {
+  handleEnumValidation(props.size, Size, 'size');
+  handleEnumValidation(props.colorType, InputColorType, 'colorType');
+});
+</script>
+
+<template>
+  <div
+      :class="classes"
+  >
+    <span :class="{'invisible': skeleton}">
+      <slot/>
+    </span>
+
+    <AntSkeleton
+        v-if="skeleton"
+        absolute
+        rounded
+    />
+  </div>
+</template>

package/src/runtime/components/form/Elements/AntInputLabel.vue

@@ -0,0 +1,55 @@
+<script lang="ts" setup>
+import {computed, onMounted} from 'vue';
+import {Size} from '../../../enums/Size.enum'
+import AntSkeleton from '../../AntSkeleton.vue';
+import {handleEnumValidation} from '../../../handler';
+
+defineEmits(['clickContent']);
+
+const props = withDefaults(defineProps<{
+  label?: string;
+  size?: Size;
+  skeleton?: boolean;
+}>(), {
+  skeleton: false,
+  size: Size.md,
+});
+
+const classes = computed(() => ({
+  'relative font-medium w-fit': true,
+  'text-xs': props.size === Size.sm,
+  'text-sm': props.size === Size.md,
+}));
+
+onMounted(() => {
+  handleEnumValidation(props.size, Size, 'size');
+});
+</script>
+
+<template>
+  <label
+      class="flex flex-col gap-1.5 w-full"
+  >
+    <span
+        v-if="label"
+        :class="classes"
+    >
+      <span
+          :class="{'invisible': skeleton}"
+          @click="$emit('clickContent')"
+      >
+        <slot name="label">
+          {{ label }}
+        </slot>
+      </span>
+
+      <AntSkeleton
+          v-if="skeleton"
+          absolute
+          rounded
+      />
+    </span>
+
+    <slot/>
+  </label>
+</template>

package/src/runtime/components/form/Elements/AntInputLimiter.vue

@@ -0,0 +1,55 @@
+<script lang="ts" setup>
+import {computed, onMounted} from 'vue';
+import {Size} from '../../../enums/Size.enum'
+import AntSkeleton from '../../AntSkeleton.vue';
+import {handleEnumValidation} from '../../../handler';
+import {InputColorType} from '../../../enums';
+
+const props = withDefaults(defineProps<{
+  value: number;
+  maxValue: number;
+  colorType?: InputColorType;
+  size?: Size;
+  skeleton?: boolean;
+}>(), {
+  skeleton: false,
+  size: Size.md,
+  colorType: InputColorType.base
+});
+
+const classes = computed(() => {
+  const variants: Record<InputColorType, string> = {
+    [InputColorType.base]: 'text-neutral-500',
+    [InputColorType.danger]: 'text-danger-500',
+    [InputColorType.info]: 'text-info-500',
+    [InputColorType.success]: 'text-success-500',
+    [InputColorType.warning]: 'text-warning-500',
+  };
+
+  return {
+    'relative font-regular inline-block transition-color': true,
+    'text-xs': props.size === Size.sm,
+    'text-sm': props.size === Size.md,
+    [variants[props.colorType]]: true,
+  };
+});
+
+onMounted(() => {
+  handleEnumValidation(props.size, Size, 'size');
+  handleEnumValidation(props.colorType, InputColorType, 'colorType');
+});
+</script>
+
+<template>
+  <div :class="classes">
+    <span :class="{'invisible': skeleton}">
+        {{ value }}/{{ maxValue }}
+    </span>
+
+    <AntSkeleton
+        v-if="skeleton"
+        absolute
+        rounded
+    />
+  </div>
+</template>

package/src/runtime/components/layouts/AntNavLeftLayout.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import {computed, useSlots} from 'vue';
+import AntNavbar from '../navbar/AntNavbar.vue';
+import type {RouteLocationRaw} from 'vue-router';
+import type {NavbarItem} from '../navbar/__types/NavbarItem';
+
+defineProps<{
+  navbarItems: NavbarItem[];
+  logoRoute?: RouteLocationRaw;
+}>()
+
+const hasLogoImageSlot = computed(() => useSlots()['logo-image'] || false);
+</script>
+
+<template>
+  <div class="flex gap-px bg-neutral-300 h-screen overflow-hidden">
+    <div class="flex flex-col gap-px bg-neutral-300 w-52 shrink-0">
+      <component
+        v-if="hasLogoImageSlot"
+        :is="logoRoute ? 'RouterLink' : 'div'"
+        :to="logoRoute"
+        class="bg-neutral-50 min-h-[60px] flex justify-center items-center p-2.5"
+      >
+        <slot name="logo-image"/>
+      </component>
+
+      <AntNavbar
+        :navbar-items="navbarItems"
+      />
+    </div>
+
+    <div class="flex-grow">
+      <slot/>
+    </div>
+  </div>
+</template>

package/src/runtime/components/navbar/AntNavbar.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+
+import { computed } from 'vue';
+import type { NavbarItem } from './__types/NavbarItem';
+import AntNavbarItem from './AntNavbarItem.vue';
+
+defineProps<{
+  navbarItems: NavbarItem[]
+}>();
+
+const containerClasses = computed(() => ({
+  'w-full h-full bg-white flex flex-col gap-1 p-1.5': true,
+}))
+
+</script>
+
+<template>
+ <div :class="containerClasses">
+   <AntNavbarItem
+     v-for="(navbarItem, index) in navbarItems"
+     :key="`navbar-item-${index}`"
+     :navbar-item="navbarItem"
+   />
+ </div>
+</template>

package/src/runtime/components/navbar/AntNavbarItem.vue

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import type {NavbarItem} from './__types/NavbarItem';
+import {computed, ref} from 'vue';
+import AntIcon from '../AntIcon.vue';
+import {faChevronDown, faChevronUp} from '@fortawesome/free-solid-svg-icons';
+import AntTransitionCollapseHeight from '../transitions/AntTransitionCollapseHeight.vue';
+
+const props = defineProps<{
+  navbarItem: NavbarItem
+}>()
+
+const itemClasses = computed(() => ({
+  'w-full text-sm p-1.5 rounded-md cursor-pointer flex items-center flex-nowrap gap-1': true,
+  'transition-colors hover:bg-neutral-100': true,
+  'text-primary-500': props.navbarItem.active
+}))
+
+const open = ref(false)
+
+function itemClick(): void {
+  if (props.navbarItem.click) {
+    props.navbarItem.click();
+  }
+
+  if (props.navbarItem.children && props.navbarItem.children.length > 0) {
+    open.value = !open.value;
+  }
+}
+</script>
+
+<template>
+  <component
+    :is="navbarItem.to ? 'router-link' : 'div'"
+    :to="navbarItem.to"
+    v-bind="$attrs"
+    :class="itemClasses"
+    @click="itemClick"
+  >
+    <AntIcon
+      v-if="navbarItem.icon"
+      :icon="navbarItem.icon"
+      :color="navbarItem.active ? 'text-primary-500' : 'text-for-white-bg-font'"
+    />
+
+    <div class="flex-grow select-none">
+      {{ navbarItem.label }}
+    </div>
+
+    <div
+      v-if="navbarItem.children && navbarItem.children.length > 0"
+    >
+      <AntIcon
+        v-if="!open"
+        :icon="faChevronDown"
+        :color="navbarItem.active ? 'text-primary-500' : 'text-for-white-bg-font'"
+      />
+
+      <AntIcon
+        v-if="open"
+        :icon="faChevronUp"
+        :color="navbarItem.active ? 'text-primary-500' : 'text-for-white-bg-font'"
+      />
+    </div>
+  </component>
+
+  <AntTransitionCollapseHeight
+    v-if="navbarItem.children && navbarItem.children.length > 0"
+  >
+    <div v-show="open">
+      <AntNavbarItem
+        v-for="(child, index) in navbarItem.children"
+        :key="`navbar-item-child-${index}`"
+        :navbar-item="child"
+        class="pl-[30px]"
+      />
+    </div>
+  </AntTransitionCollapseHeight>
+</template>