@antify/ui 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 antify
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,14 @@
+# Antify UI
+
+The antify ui is a vue component library for applications based on tailwindcss.
+
+# Development
+
+```
+pnpm i && pnpm dev
+```
+
+## Useful links:
+
+- Chromatic docu: https://www.chromatic.com/docs/
+- Storybook docu: https://storybook.js.org/docs/vue/get-started/introduction

package/dist/components/AntAccordion.vue

@@ -0,0 +1,64 @@
+<script lang="ts" setup>
+import AntAccordionItem from './AntAccordionItem.vue';
+import {onMounted, ref} from 'vue';
+import {CollapseStrategy} from './__types/AntAccordion.types';
+
+const props = withDefaults(defineProps<{
+  items: {
+    label?: string;
+    content?: string;
+    isOpen?: boolean;
+    iconLeft?: boolean;
+  }[];
+  collapseStrategy?: CollapseStrategy;
+}>(), {
+  collapseStrategy: CollapseStrategy.single
+});
+
+const openItems = ref<number[]>([]);
+
+onMounted(() => {
+  openItems.value = props.items
+    .map((item, index) => item.isOpen ? index : -1)
+    .filter((index) => index !== -1);
+});
+
+function onOpen(index: number) {
+  if (props.collapseStrategy === CollapseStrategy.single) {
+    openItems.value = [index];
+  } else {
+    openItems.value = [...openItems.value, index];
+  }
+}
+
+function onClose(index: number) {
+  if (props.collapseStrategy === CollapseStrategy.single) {
+    openItems.value = [];
+  } else {
+    openItems.value = openItems.value.filter((item) => item !== index);
+  }
+}
+</script>
+
+<template>
+  <div class="w-full h-full flex flex-col bg-neutral-300 gap-px">
+    <slot>
+      <AntAccordionItem
+        v-for="(item, index) in items"
+        :key="`accordion-item-${index}`"
+        :label="item.label"
+        :is-open="openItems.includes(index)"
+        :icon-left="item.iconLeft"
+        @open="() => onOpen(index)"
+        @close="() => onClose(index)"
+      >
+        <slot
+          name="item-content"
+          v-bind="{item, index}"
+        >
+          <div v-html="item.content"/>
+        </slot>
+      </AntAccordionItem>
+    </slot>
+  </div>
+</template>

package/dist/components/AntAccordionItem.vue

@@ -0,0 +1,119 @@
+<script lang="ts" setup>
+import {faAngleDown, faAngleUp, faQuestionCircle} from '@fortawesome/free-solid-svg-icons';
+import AntIcon from './AntIcon.vue';
+import AntTransitionCollapseHeight from './transitions/AntTransitionCollapseHeight.vue';
+import {IconSize} from './__types/AntIcon.types';
+
+const props = withDefaults(defineProps<{
+  isOpen: boolean;
+  label?: string;
+  collapseTransition?: string;
+  iconLeft: boolean;
+}>(), {
+  collapseTransition: 'slide',
+  iconLeft: false,
+});
+const emit = defineEmits(['close', 'open']);
+
+// TODO:: Stehengeblieben: delays machen
+function onClick() {
+  if (props.isOpen) {
+    emit('close');
+  } else {
+    emit('open');
+  }
+}
+</script>
+
+<template>
+  <div
+    class="p-2 select-none cursor-pointer transition-colors"
+    :class="{'bg-primary-500 text-primary-500-font': isOpen, 'bg-white text-for-white-bg-font': !isOpen}"
+    @click="onClick"
+  >
+    <slot
+      name="label"
+      v-bind="{ isOpen: isOpen }"
+    >
+      <div
+        class="hover:text-gray-800 flex justify-between items-center"
+      >
+        <div class="flex items-center gap-2">
+          <AntIcon
+            v-if="iconLeft"
+            :size="IconSize.sm"
+            :icon="faQuestionCircle"
+            :color="isOpen ? 'text-primary-500-font' : 'text-for-white-bg-font'"
+          />
+
+          <span class="text-sm font-semibold">
+            {{ label }}
+          </span>
+        </div>
+
+        <AntIcon
+          :icon="isOpen ? faAngleUp : faAngleDown"
+          :color="isOpen ? 'text-primary-500-font' : undefined"
+        />
+      </div>
+    </slot>
+  </div>
+
+  <AntTransitionCollapseHeight>
+    <div
+      v-show="isOpen"
+      class="bg-white overflow-hidden -mt-px"
+    >
+      <Transition name="bounce">
+        <div
+          v-show="isOpen"
+          class="p-2 text-sm bg-white text-for-white-bg-font"
+        >
+          <slot/>
+        </div>
+      </Transition>
+    </div>
+  </AntTransitionCollapseHeight>
+</template>
+
+<style scoped>
+.bounce-enter-active {
+  animation: bounce .6s;
+}
+
+.bounce-leave-active {
+  animation: bounce .6s reverse;
+}
+
+@keyframes bounce {
+  0% {
+    transform: translateY(-100%);
+    opacity: 0;
+  }
+  50% {
+    transform: translateY(5%);
+    opacity: 1;
+  }
+  100% {
+    transform: translateY(0%);
+    opacity: 1;
+  }
+}
+
+.slide-enter-active {
+  animation: slide 1s;
+}
+
+.slide-leave-active {
+  animation: slide 1s reverse;
+}
+
+/*@keyframes slide {
+  0% {
+  //transform: translateY(-100%); max-height: 0; opacity: 0;
+  }
+  100% {
+  //transform: translateY(0%); max-height: 100%; opacity: 1;
+  }
+}*/
+</style>

package/dist/components/AntAlert.vue

@@ -0,0 +1,146 @@
+<script lang="ts" setup>
+import {computed, onMounted, useSlots} from 'vue';
+import {handleEnumValidation} from '../handler';
+import {
+  faCheckCircle,
+  faCircleQuestion,
+  faExclamationCircle,
+  faExclamationTriangle,
+  faInfoCircle,
+  faXmark
+} from '@fortawesome/free-solid-svg-icons';
+import AntIcon from './AntIcon.vue';
+import AntTooltip from './AntTooltip.vue';
+import AntSkeleton from './AntSkeleton.vue';
+import {InputState, Position} from '../enums';
+import {IconSize} from './__types';
+
+defineEmits(['close']);
+
+const props = withDefaults(defineProps<{
+  title?: string | null,
+  state?: InputState,
+  icon?: boolean,
+  expanded?: boolean,
+  questionMarkText?: string | null,
+  skeleton?: boolean,
+  dismissBtn?: boolean,
+}>(), {
+  title: null,
+  state: InputState.base,
+  icon: true,
+  expanded: false,
+  questionMarkText: null,
+  skeleton: false,
+  dismissBtn: true,
+});
+
+const icons = {
+  [InputState.base]: faInfoCircle,
+  [InputState.info]: faInfoCircle,
+  [InputState.danger]: faExclamationCircle,
+  [InputState.warning]: faExclamationTriangle,
+  [InputState.success]: faCheckCircle,
+};
+
+const _icon = computed(() => icons[props.state]);
+const classes = computed(() => {
+  const variants: Record<InputState, string> = {
+    [InputState.danger]: 'bg-danger-100 text-danger-700',
+    [InputState.info]: 'bg-info-100 text-info-700',
+    [InputState.base]: 'bg-neutral-100 text-neutral-100-font',
+    [InputState.success]: 'bg-success-100 text-success-700',
+    [InputState.warning]: 'bg-warning-100 text-warning-700',
+  };
+
+  return {
+    'inline-flex flex-col gap-2 rounded-md p-2 transition-colors text-sm relative': true,
+    'w-full': props.expanded,
+    [variants[props.state]]: true,
+  };
+});
+const hasDefaultSlot = computed(() => useSlots()['default'] || false);
+const hasQuestionMark = computed(() => (useSlots()['question-mark-text'] || false) || props.questionMarkText);
+const iconColor = computed(() => {
+  const variants = {
+    [InputState.base]: 'text-neutral-100-font',
+    [InputState.danger]: 'text-danger-700',
+    [InputState.info]: 'text-info-700',
+    [InputState.success]: 'text-success-700',
+    [InputState.warning]: 'text-warning-700',
+  };
+
+  return variants[props.state];
+});
+
+onMounted(() => {
+  handleEnumValidation(props.state, InputState, 'state');
+});
+</script>
+
+<template>
+  <div
+    :class="classes"
+    data-e2e="alert"
+  >
+    <AntSkeleton
+      v-if="skeleton"
+      absolute
+      rounded
+    />
+
+    <div
+      v-if="icon || hasQuestionMark || dismissBtn || title"
+      class="inline-flex items-center justify-between w-content gap-2"
+      :class="{'invisible': skeleton}"
+    >
+      <div class="inline-flex items-center gap-2">
+        <AntIcon
+          v-if="icon"
+          :icon="_icon"
+          :color="iconColor"
+          :size="IconSize.sm"
+        />
+
+        <div
+          :class="{'font-semibold': hasDefaultSlot}"
+        >
+          <slot name="title">
+            {{ title }}
+          </slot>
+        </div>
+      </div>
+
+      <div class="flex gap-2">
+        <div v-if="hasQuestionMark">
+          <slot name="questionMarkText">
+            <AntTooltip :position="Position.bottom">
+              <AntIcon
+                :icon="faCircleQuestion"
+                :color="iconColor"
+                :size="IconSize.sm"
+              />
+
+              <template #content>
+                {{ questionMarkText }}
+              </template>
+            </AntTooltip>
+          </slot>
+        </div>
+
+        <AntIcon
+          v-if="dismissBtn"
+          :icon="faXmark"
+          class="cursor-pointer"
+          :color="iconColor"
+          :size="IconSize.sm"
+          @click="() => $emit('close')"
+        />
+      </div>
+    </div>
+
+    <div v-if="hasDefaultSlot">
+      <slot/>
+    </div>
+  </div>
+</template>

package/dist/components/AntCard.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import {computed} from 'vue';
+import {Size} from '../enums/Size.enum';
+
+const props = withDefaults(defineProps<{
+  size?: Size;
+  padding?: boolean;
+  expanded?: boolean;
+}>(), {
+  size: Size.md,
+  padding: true,
+  expanded: false
+});
+
+const cardClass = computed(() => ({
+    'inline-block': true,
+    'w-full': props.expanded,
+    'p-0': !props.padding,
+    'p-2.5': props.size === Size.lg && props.padding,
+    'p-2': props.size === Size.md && props.padding,
+    'p-1.5': props.size === Size.sm || props.size === Size.xs && props.padding,
+    'p-1': props.size === Size.xs2 && props.padding,
+  })
+);
+</script>
+
+<template>
+  <div
+    :class="cardClass"
+    class="bg-white border border-neutral-300 rounded-md"
+  >
+    <slot/>
+  </div>
+</template>

package/dist/components/AntContent.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+withDefaults(defineProps<{
+  padding?: boolean
+}>(), {
+  padding: true
+})
+</script>
+
+<template>
+  <div
+    :class="{ 'p-2.5': padding }"
+    class="bg-white overflow-auto"
+  >
+    <slot/>
+  </div>
+</template>

package/dist/components/AntDropdown.vue

@@ -0,0 +1,100 @@
+<script lang="ts" setup>
+/**
+ * TODO:: Emit if there's enough space for the dropdown content. If not, reposition it automatically like the
+ * browsers select dropdown content does.
+ * TODO:: Known issue: open dropdown, click between button and dropdown. Dropdown will not click.
+ * The v-on-click-outside does not trigger, because it think it's the dropdown itself.
+ * Solution is using margin only (calc(50% + 0.625rem)) and not padding.
+ */
+import {computed, onMounted} from 'vue';
+import {handleEnumValidation} from '../handler';
+import {Position} from '../enums';
+import {classesToObjectSyntax} from '../utils';
+import {vOnClickOutside} from '@vueuse/components';
+import {onKeyStroke} from '@vueuse/core';
+
+const props = withDefaults(defineProps<{
+  showDropdown: boolean,
+  position?: Position,
+  dropdownClasses?: string | Record<string, boolean>,
+  contentPadding?: boolean
+}>(), {
+  showDropdown: false,
+  contentPadding: true,
+  position: Position.bottom,
+  dropdownClasses: '',
+});
+const emit = defineEmits(['update:showDropdown']);
+
+const _dropdownClasses = computed(() => ({
+  'absolute min-w-[10rem]': true,
+  'bottom-0 left-0 mb-[50%] pb-2.5': props.position === Position.top,
+  'top-0 left-0 mt-[50%] pt-2.5': props.position === Position.bottom,
+  'right-0 top-0 mr-[100%] pr-2.5': props.position === Position.left,
+  'left-0 top-0 ml-[100%] pl-2.5': props.position === Position.right,
+  ...classesToObjectSyntax(props.dropdownClasses)
+}));
+
+onMounted(() => {
+  handleEnumValidation(props.position, Position, 'Position');
+});
+onKeyStroke('Escape', (e: KeyboardEvent) => {
+  if (props.showDropdown) {
+    e.preventDefault();
+    emit('update:showDropdown', false);
+  }
+});
+
+function onClickOutside() {
+  emit('update:showDropdown', false);
+}
+</script>
+
+<template>
+  <div
+    v-on-click-outside="onClickOutside"
+    class="relative inline-flex justify-center items-end z-40"
+    data-e2e="dropdown"
+  >
+    <slot/>
+
+    <Transition name="bounce">
+      <div
+        v-if="showDropdown"
+        :class="_dropdownClasses"
+      >
+        <div
+          class="shadow-lg border border-neutral-300 rounded-md text-sm relative inline-flex flex-col relative bg-white text-for-white-bg-font w-full"
+          :class="{'p-2': contentPadding}"
+        >
+          <slot name="content"/>
+        </div>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<style scoped>
+.bounce-enter-active {
+  animation: bounce-in .4s;
+}
+
+.bounce-leave-active {
+  animation: bounce-in .4s reverse;
+}
+
+@keyframes bounce-in {
+  0% {
+    transform: scale(0);
+    opacity: 0;
+  }
+  50% {
+    transform: scale(1.05);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+</style>

package/dist/components/AntIcon.vue

@@ -0,0 +1,56 @@
+<script lang="ts" setup>
+import {computed, onMounted} from 'vue';
+import {handleEnumValidation} from '../handler';
+import {type IconDefinition} from '@fortawesome/free-solid-svg-icons';
+import {IconSize} from './__types/AntIcon.types';
+
+const props = withDefaults(defineProps<{
+  icon: IconDefinition;
+  size?: IconSize;
+
+  /**
+   * A css text-* class
+   */
+  color?: string;
+}>(), {
+  size: IconSize.sm,
+  color: 'text-for-white-bg-font'
+});
+
+const containerClasses = computed(() => ({
+  'inline-flex items-center justify-center': true,
+  'w-3 h-3': props.size === IconSize.xs2,
+  'w-4 h-4': props.size === IconSize.xs,
+  'w-5 h-5': props.size === IconSize.sm,
+  'w-6 h-6': props.size === IconSize.md,
+  'w-7 h-7': props.size === IconSize.lg,
+  'w-9 h-9': props.size === IconSize.xl3,
+  [props.color]: true,
+}));
+
+const iconClasses = computed(() => ({
+  'transition-colors': true,
+  'text-2xs': props.size === IconSize.xs2,
+  'text-xs': props.size === IconSize.xs,
+  'text-sm': props.size === IconSize.sm,
+  'text-md': props.size === IconSize.md,
+  'text-lg': props.size === IconSize.lg,
+  'text-3xl': props.size === IconSize.xl3,
+}));
+
+onMounted(() => {
+  handleEnumValidation(props.size, IconSize, 'size');
+});
+</script>
+
+<template>
+  <span
+    v-if="icon"
+    :class="containerClasses"
+  >
+    <FaIcon
+      :icon="icon"
+      :class="iconClasses"
+    />
+  </span>
+</template>

package/dist/components/AntKeycap.vue

@@ -0,0 +1,45 @@
+<script lang="ts" setup>
+// TODO:: Fix typo KeyCap with upperchar C
+import AntIcon from './AntIcon.vue';
+import {type IconDefinition} from '@fortawesome/free-solid-svg-icons';
+import {IconSize} from './__types';
+import {AntKeycapSize} from './__types/AntKeycap.types';
+import {computed} from 'vue';
+
+const props = withDefaults(defineProps<{
+  icon?: IconDefinition
+  size: AntKeycapSize
+
+}>(), {
+  size: AntKeycapSize.sm
+});
+
+const classes = computed(() => {
+  return {
+    'text-sm px-px min-w-5': props.size === AntKeycapSize.sm,
+    'text-2xs px-px py-0.5 min-w-[18px]': props.size === AntKeycapSize.xs,
+  };
+});
+const iconClasses = computed(() => {
+  if (props.size === AntKeycapSize.sm) {
+    return IconSize.sm;
+  } else {
+    return IconSize.xs2;
+  }
+});
+</script>
+
+<template>
+  <span
+    class="inline-block bg-neutral-300 rounded-md text-center text-neutral-500-font font-medium"
+    :class="classes"
+  >
+    <AntIcon
+      v-if="icon"
+      :icon="icon"
+      :size="iconClasses"
+    />
+
+    <slot v-else/>
+  </span>
+</template>

package/dist/components/AntListGroup.vue

@@ -0,0 +1,24 @@
+<script lang="ts" setup>
+import AntSkeleton from './AntSkeleton.vue';
+
+withDefaults(
+  defineProps<{
+    skeleton?: boolean
+  }>(), {
+    skeleton: false
+  }
+)
+</script>
+
+<template>
+  <div class="relative">
+    <AntSkeleton v-if="skeleton" absolute rounded/>
+
+    <div
+      class="flex flex-col rounded-md bg-neutral-300 gap-px relative border border-neutral-300 overflow-hidden"
+      :class="{'invisible': skeleton}"
+    >
+      <slot/>
+    </div>
+  </div>
+</template>