@antify/ui-module 1.1.3

package/dist/runtime/components/crud/__stories/AntCrudTableNav.stories.d.ts

@@ -0,0 +1,8 @@
+import AntCrudTableNav from '../AntCrudTableNav.vue';
+import { type Meta, type StoryObj } from '@storybook/vue3';
+declare const meta: Meta<typeof AntCrudTableNav>;
+export default meta;
+type Story = StoryObj<typeof AntCrudTableNav>;
+export declare const Docs: Story;
+export declare const fullWidth: Story;
+export declare const skeleton: Story;

package/dist/runtime/components/crud/__stories/AntCrudTableNav.stories.mjs

@@ -0,0 +1,56 @@
+import AntCrudTableNav from "../AntCrudTableNav.vue";
+const meta = {
+  title: "Crud/Crud Table Nav",
+  component: AntCrudTableNav,
+  parameters: { controls: { sort: "requiredFirst" } },
+  argTypes: {
+    pageQuery: {
+      description: "Which query parameter should be used, for writing the current page into it."
+    }
+  }
+};
+export default meta;
+export const Docs = {
+  render: (args) => ({
+    components: { AntCrudTableNav },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div class="dashed">
+        <AntCrudTableNav v-bind="args"/>
+      </div>
+    `
+  }),
+  args: {
+    count: 1e6
+  }
+};
+export const fullWidth = {
+  render: (args) => ({
+    components: { AntCrudTableNav },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div class="p-4 flex gap-4">
+        <AntCrudTableNav v-bind="args"/>
+
+        <div v-if="!args.fullWidth" class="w-full">
+          Another content
+        </div>
+      </div>
+    `
+  }),
+  args: {
+    ...Docs.args,
+    fullWidth: false
+  }
+};
+export const skeleton = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    skeleton: true
+  }
+};

package/dist/runtime/components/dialogs/AntDeleteDialog.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import {InputColorType} from '../../enums';
+import AntDialog from './AntDialog.vue';
+import {useVModel} from '@vueuse/core';
+
+const emit = defineEmits(['update:open', 'close', 'confirm']);
+const props = defineProps<{
+  open: boolean,
+  entity: string
+}>();
+
+const _open = useVModel(props, 'open', emit);
+</script>
+
+<template>
+  <AntDialog
+    v-model:open="_open"
+    :color-type="InputColorType.danger"
+    title="Delete"
+    confirm-text="Delete"
+    data-e2e="delete-dialog"
+    @confirm="() => $emit('confirm')"
+    @close="() => $emit('close')"
+  >
+    <div>
+      Do you really want to delete <span class="font-semibold">{{entity}}</span>?
+    </div>
+  </AntDialog>
+</template>

package/dist/runtime/components/dialogs/AntDialog.vue

@@ -0,0 +1,147 @@
+<script setup lang="ts">
+// TODO:: remove ts ignore
+// @ts-nocheck
+import {computed, ref, watch} from 'vue';
+import AntButton from '../buttons/AntButton.vue';
+import AntIcon from '../AntIcon.vue';
+import {
+  faCheckCircle,
+  faExclamationCircle,
+  faExclamationTriangle,
+  faInfoCircle,
+  type IconDefinition,
+} from '@fortawesome/free-solid-svg-icons';
+import {ColorType, InputColorType} from '../../enums';
+import {IconSize} from '../__types';
+
+const emit = defineEmits(['update:open', 'close', 'confirm']);
+const props = withDefaults(defineProps<{
+  title?: string,
+  open: boolean,
+  confirmText?: string,
+  cancelText?: string,
+  showCancel?: boolean,
+  colorType?: InputColorType
+}>(), {
+  colorType: InputColorType.base,
+  confirmText: 'Confirm',
+  cancelText: 'Cancel',
+  showCancel: true,
+});
+
+const openDialog = ref(props.open);
+const openBackground = ref(props.open);
+const icons = {
+  [InputColorType.base]: null,
+  [InputColorType.info]: faInfoCircle,
+  [InputColorType.danger]: faExclamationCircle,
+  [InputColorType.warning]: faExclamationTriangle,
+  [InputColorType.success]: faCheckCircle,
+};
+
+const iconColor = computed(() => {
+  const variants = {
+    [InputColorType.base]: 'text-neutral-100-font',
+    [InputColorType.danger]: 'text-danger-500',
+    [InputColorType.info]: 'text-info-500',
+    [InputColorType.success]: 'text-success-500',
+    [InputColorType.warning]: 'text-warning-500',
+  };
+
+  return variants[props.colorType];
+});
+
+watch(() => props.open, (val) => {
+  function onKeydown(e: KeyboardEvent) {
+    if (e.key === 'Escape') {
+      emit('update:open', false);
+    }
+  }
+
+  if (val) {
+    openBackground.value = true;
+    setTimeout(() => openDialog.value = true, 100)
+    document.addEventListener('keydown', onKeydown);
+  } else {
+    openDialog.value = false;
+    setTimeout(() => openBackground.value = false, 100)
+    document.removeEventListener('keydown', onKeydown);
+  }
+});
+
+function closeDialog() {
+  emit('update:open', false);
+  emit('close');
+}
+function confirmDialog() {
+  emit('update:open', false);
+  emit('confirm');
+}
+</script>
+
+<template>
+  <transition name="fade">
+    <div
+      v-if="openBackground"
+      class="absolute inset-0 flex items-center justify-center z-50 cursor-pointer overflow-hidden bg-black/50 backdrop-blur-sm"
+      data-e2e="dialog"
+      @click.self="closeDialog"
+    >
+      <transition :name="'bounce'">
+        <div
+          v-if="openDialog"
+          class="flex flex-col gap-px bg-neutral-300 overflow-hidden cursor-auto w-96 border border-neutral-300 rounded-md shadow-md"
+        >
+          <div
+            v-if="title || $slots['title']"
+            class="bg-neutral-100 p-2.5 flex items-center justify-between text-neutral-100-font text-sm font-semibold"
+          >
+            <slot name="title">
+              {{ title }}
+            </slot>
+          </div>
+
+          <div class="bg-neutral-50 p-2.5 grow flex items-center gap-2.5 text-sm">
+            <slot name="icon">
+              <AntIcon
+                v-if="icons[colorType]"
+                :size="IconSize.xl3"
+                :icon="icons[colorType] as unknown as IconDefinition"
+                :color="iconColor"
+                class="px-2.5 w-8 h-8"
+              />
+            </slot>
+
+            <slot/>
+          </div>
+
+          <div
+            class="bg-neutral-100 p-2.5 gap-2.5 text-neutral-50-font flex w-full justify-end"
+          >
+            <slot name="footer">
+              <AntButton
+                v-if="showCancel"
+                :color-type="ColorType.base"
+                @click="closeDialog()"
+              >
+                {{ cancelText }}
+              </AntButton>
+
+              <AntButton
+                :color-type="colorType === ColorType.base ? ColorType.primary : colorType as unknown as ColorType"
+                filled
+                @click="confirmDialog()"
+              >
+                {{ confirmText }}
+              </AntButton>
+            </slot>
+          </div>
+        </div>
+      </transition>
+    </div>
+  </transition>
+</template>
+
+<style scoped>
+.fade-leave-active{transition:opacity .5s ease}.fade-enter-active{transition:opacity .3s ease}.fade-enter-from,.fade-leave-to{opacity:0}.bounce-enter-active{animation:bounce-in .4s}.bounce-leave-active{animation:bounce-in .4s reverse}@keyframes bounce-in{0%{opacity:0;transform:scale(0)}50%{opacity:1;transform:scale(1.05)}to{opacity:1;transform:scale(1)}}
+</style>

package/dist/runtime/components/dialogs/__stories/AndDeleteDialog.stories.d.ts

@@ -0,0 +1,6 @@
+import { type Meta, type StoryObj } from '@storybook/vue3';
+import AntDeleteDialog from '../AntDeleteDialog.vue';
+declare const meta: Meta<typeof AntDeleteDialog>;
+export default meta;
+type Story = StoryObj<typeof AntDeleteDialog>;
+export declare const Docs: Story;

package/dist/runtime/components/dialogs/__stories/AndDeleteDialog.stories.mjs

@@ -0,0 +1,30 @@
+import AntDeleteDialog from "../AntDeleteDialog.vue";
+import AntButton from "../../buttons/AntButton.vue";
+const meta = {
+  title: "Components/Dialogs/Delete Dialog",
+  component: AntDeleteDialog,
+  parameters: { controls: { sort: "requiredFirst" } },
+  argTypes: {}
+};
+export default meta;
+export const Docs = {
+  render: (args) => ({
+    components: { AntDeleteDialog, AntButton },
+    setup() {
+      return { args };
+    },
+    template: `
+      <AntButton @click="() => args.open = true" color-type="danger">Delete</AntButton>
+
+      <AntDeleteDialog
+        v-model:open="args.open"
+        :entity="args.entity"
+        v-bind="args"
+      />
+    `
+  }),
+  args: {
+    open: false,
+    entity: "Lorem ipsum"
+  }
+};

package/dist/runtime/components/dialogs/__stories/AntDialog.stories.d.ts

@@ -0,0 +1,6 @@
+import AntDialog from '../AntDialog.vue';
+import { type Meta, type StoryObj } from '@storybook/vue3';
+declare const meta: Meta<typeof AntDialog>;
+export default meta;
+type Story = StoryObj<typeof AntDialog>;
+export declare const Docs: Story;

package/dist/runtime/components/dialogs/__stories/AntDialog.stories.mjs

@@ -0,0 +1,60 @@
+import AntDialog from "../AntDialog.vue";
+import AntButton from "../../buttons/AntButton.vue";
+import { InputColorType } from "../../../enums/index.mjs";
+const meta = {
+  title: "Components/Dialogs/Dialog",
+  component: AntDialog,
+  parameters: { controls: { sort: "requiredFirst" } },
+  decorators: [() => ({ template: '<div class="border border-dashed border-neutral-300"><story/></div>' })],
+  argTypes: {
+    colorType: {
+      control: { type: "select" },
+      options: Object.values(InputColorType)
+    },
+    title: {
+      control: "text",
+      table: { type: { summary: "string|null" } }
+    }
+  }
+};
+export default meta;
+export const Docs = {
+  render: (args) => ({
+    components: { AntDialog, AntButton },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div
+        class="h-96 flex items-center justify-center relative"
+      >
+        <div class="absolute inset-0">
+          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, <br/>
+          sed diam nonumy eirmod tempor invidunt <br/>
+          ut labore et dolore magna aliquyam erat, <br/>
+          sed diam voluptua. At vero eos et accusam et <br/>
+          justo duo dolores et ea rebum. Stet clita kasd
+        </div>
+
+        <div class="absolute bottom-0 right-0">
+          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, <br/>
+          sed diam nonumy eirmod tempor invidunt <br/>
+          ut labore et dolore magna aliquyam erat, <br/>
+          sed diam voluptua. At vero eos et accusam et <br/>
+          justo duo dolores et ea rebum. Stet clita kasd
+        </div>
+
+        <AntButton @click="args.open = true" color-type="primary">Open Dialog</AntButton>
+
+        <AntDialog v-bind="args" v-model:open="args.open">
+          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
+          dolore
+        </AntDialog>
+      </div>
+    `
+  }),
+  args: {
+    open: false,
+    title: "Lorem ipsum dolor"
+  }
+};

package/dist/runtime/components/form/AntCheckboxWidget/AntCheckbox.vue

@@ -0,0 +1,145 @@
+<script lang="ts" setup>
+import { useVModel } from '@vueuse/core';
+import { AntField } from '../Elements';
+import { InputColorType, Size } from '../../../enums';
+import AntSkeleton from '../../AntSkeleton.vue';
+import { computed, onMounted, watch } from 'vue';
+import { handleEnumValidation } from '../../../handler';
+
+import { faCheck } from '@fortawesome/free-solid-svg-icons';
+import AntIcon from '../../AntIcon.vue';
+import { IconSize } from '../../__types';
+import { FieldValidator } from '@antify/validate';
+
+const emits = defineEmits([ 'update:modelValue', 'update:skeleton' ]);
+const props =
+  withDefaults(
+    defineProps<{
+      modelValue: boolean;
+      valueLabel?: string;
+      label?: string;
+      description?: string;
+      colorType?: InputColorType;
+      size?: Size,
+      skeleton?: boolean;
+      disabled?: boolean;
+      readonly?: boolean;
+      validator?: FieldValidator;
+    }>(), {
+      colorType: InputColorType.base,
+      size: Size.md,
+      skeleton: false,
+      disabled: false,
+      readonly: false,
+    });
+
+const _value = useVModel(props, 'modelValue', emits);
+const hasAction = computed(() => (!props.skeleton && !props.readonly && !props.disabled));
+const inputClasses = computed(() => {
+  const classes: { [key: string]: boolean } = {
+    'relative inline-flex flex-shrink-0 bg-neutral-100 border-0': true,
+    'outline outline-1 outline-offset-[-1px] outline-neutral-300 rounded': true,
+    'focus:ring-offset-0': true,
+    'invisible': props.skeleton,
+    'cursor-pointer': hasAction.value,
+    'focus:ring-2': props.size === Size.sm && hasAction.value,
+    'focus:ring-4': props.size === Size.md && hasAction.value,
+    'h-5 w-5': props.size === Size.md,
+    'h-4 w-4': props.size === Size.sm,
+    'cursor-not-allowed opacity-50': props.disabled
+  };
+
+  const focusColorVariant = {
+    [InputColorType.base]: 'text-primary-500 focus:ring-primary-100',
+    [InputColorType.danger]: 'text-danger-500 focus:ring-danger-100',
+    [InputColorType.info]: 'text-info-500 focus:ring-info-100',
+    [InputColorType.success]: 'text-success-500 focus:ring-success-100',
+    [InputColorType.warning]: 'text-warning-500 focus:ring-warning-100',
+  };
+
+  const activeColorVariant = {
+    [InputColorType.base]: 'text-primary-500 outline-primary-500 focus:outline-primary-500',
+    [InputColorType.danger]: 'text-danger-500 outline-danger-500 focus:outline-danger-500',
+    [InputColorType.info]: 'text-info-500 outline-info-500 focus:outline-info-500',
+    [InputColorType.success]: 'text-success-500 outline-success-500 focus:outline-success-500',
+    [InputColorType.warning]: 'text-warning-500 outline-warning-500 focus:outline-warning-500',
+  }
+
+  classes[focusColorVariant[props.colorType]] = hasAction.value;
+  classes[activeColorVariant[props.colorType]] = _value.value;
+
+  return classes;
+});
+
+const valueClass = computed(() => {
+  const classes = {
+    'text-sm': true,
+    'cursor-not-allowed opacity-50': props.disabled,
+  };
+
+  return classes;
+});
+
+watch(_value, () => {
+  props.validator?.validate(_value.value);
+});
+
+onMounted(() => {
+  handleEnumValidation(props.size, Size, 'size');
+  handleEnumValidation(props.colorType, InputColorType, 'colorType');
+});
+</script>
+
+<template>
+  <AntField
+    :label="label"
+    :description="description"
+    :skeleton="skeleton"
+    :color-type="colorType"
+    :validator="validator"
+    :size="size"
+    :expanded="false"
+  >
+    <div class="flex items-center gap-1.5">
+      <div class="relative full-height flex items-center">
+        <input
+          v-model="_value"
+          :class="inputClasses"
+          type="checkbox"
+          :aria-checked="_value"
+          :disabled="disabled || readonly"
+        />
+
+        <AntIcon
+          v-if="_value"
+          :icon="faCheck"
+          class="absolute !text-neutral-50 pointer-events-none"
+          :size="size as unknown as IconSize"
+        />
+
+        <AntSkeleton
+          v-if="skeleton"
+          absolute
+          rounded
+        />
+      </div>
+
+      <div class="relative">
+        <span :class="valueClass">
+          {{ valueLabel }}
+        </span>
+
+        <AntSkeleton
+          v-if="skeleton"
+          absolute
+          rounded
+        />
+      </div>
+    </div>
+  </AntField>
+
+</template>
+
+<style scoped>
+input[type=checkbox]{-webkit-appearance:none;-moz-appearance:none;appearance:none;position:relative}input[type=checkbox]:before{background:currentColor;border-radius:inherit;content:"";height:100%;position:absolute;transform:scale(0);transition:transform .12s;width:100%}input[type=checkbox]:checked:before{transform:scale(1)}
+</style>

package/dist/runtime/components/form/AntCheckboxWidget/AntCheckboxGroup.vue

@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import { type AntCheckboxType } from './__types/AntCheckbox';
+import { AntField } from '../Elements';
+import { useVModel } from '@vueuse/core';
+import AntCheckbox from './AntCheckbox.vue';
+import { computed, watch } from 'vue';
+import { Direction } from '../../../enums/Direction.enum';
+import { InputColorType, Size } from '../../../enums';
+import { FieldValidator } from '@antify/validate';
+
+const emits = defineEmits(['update:modelValue'])
+const props = withDefaults(
+  defineProps<{
+    modelValue: string[];
+    checkboxes?: AntCheckboxType[];
+    label?: string;
+    description?: string;
+    direction?: Direction;
+    colorType?: InputColorType;
+    size?: Size,
+    skeleton?: boolean;
+    readonly?: boolean;
+    disabled?: boolean;
+    validator?: FieldValidator;
+  }>(),
+  {
+    direction: Direction.column,
+    colorType: InputColorType.base,
+    size: Size.md,
+    skeleton: false,
+    readonly: false,
+    disabled: false
+  }
+)
+
+const _value = useVModel(props, 'modelValue', emits);
+const _colorType = computed(() => props.validator?.hasErrors() ? InputColorType.danger : props.colorType);
+const containerClasses = computed(() => {
+  const classes = {
+    'flex gap-2.5': true,
+    'flex-row': props.direction === Direction.row,
+    'flex-col': props.direction === Direction.column
+  };
+
+  return classes;
+})
+
+function updateValue(value: string) {
+  const index = _value.value.indexOf(value);
+
+  if (index === -1) {
+    _value.value.push(value);
+  } else {
+    _value.value.splice(index, 1);
+  }
+}
+
+watch(_value, () => {
+  props.validator?.validate(_value.value);
+}, {
+  deep: true,
+});
+
+</script>
+
+<template>
+  <AntField
+    :label="label"
+    :description="description"
+    :skeleton="skeleton"
+    :validator="validator"
+    :color-type="_colorType"
+    :size="size"
+    label-for="noop"
+  >
+    <div :class="containerClasses">
+      <AntCheckbox
+        v-for="(checkbox, index) in checkboxes"
+        :key="`checkbox-group-${index}`"
+        :model-value="_value.indexOf(checkbox.value) !== -1"
+        :value-label="checkbox.label"
+        :size="size"
+        :color-type="_colorType"
+        :skeleton="skeleton"
+        :disabled="disabled || checkbox.disabled"
+        :readonly="readonly || checkbox.readonly"
+        @update:model-value="updateValue(checkbox.value)"
+      />
+    </div>
+  </AntField>
+</template>

package/dist/runtime/components/form/AntCheckboxWidget/__stories/AntCheckbox.stories.d.ts

@@ -0,0 +1,8 @@
+import AntCheckbox from '../AntCheckbox.vue';
+import { type Meta, type StoryObj } from '@storybook/vue3';
+declare const meta: Meta<typeof AntCheckbox>;
+export default meta;
+type Story = StoryObj<typeof AntCheckbox>;
+export declare const Docs: Story;
+export declare const WithValidator: Story;
+export declare const Summary: Story;