@antify/ui 4.1.19 → 4.1.21

package/dist/components/AntItemsPerPage.vue

@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import AntSkeleton from './AntSkeleton.vue';
+import AntSelect from './inputs/AntSelect.vue';
+import {
+  computed,
+} from 'vue';
+import type {
+  SelectOption,
+} from './inputs/__types/AntSelect.types';
+
+const props = withDefaults(defineProps<{
+  modelValue: number;
+  itemsPerPageOptions?: number[];
+  amountOfItems?: number | null;
+  selectedPage?: number;
+  skeleton?: boolean;
+}>(), {
+  itemsPerPageOptions: () => [
+    20,
+    50,
+    100,
+    200,
+  ],
+  amountOfItems: null,
+  selectedPage: 1,
+  skeleton: false,
+});
+const emit = defineEmits([
+  'update:modelValue',
+]);
+
+const _itemsPerPage = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(value: number) {
+    emit('update:modelValue', value);
+  },
+});
+const _itemsPerPageOptions = computed<SelectOption[]>(() => props.itemsPerPageOptions.map(item => ({
+  label: `${item}`,
+  value: item,
+})));
+const amountOfPages = computed(() => props.amountOfItems ? Math.ceil(props.amountOfItems / _itemsPerPage.value) : 1);
+const fromItems = computed(() => props.amountOfItems && props.amountOfItems > 0 ? (_itemsPerPage.value * (props.selectedPage - 1) + 1) : 0);
+const toItems = computed(() => {
+  if (!props.amountOfItems) {
+    return 0;
+  }
+
+  const items = _itemsPerPage.value * props.selectedPage;
+
+  if (props.selectedPage === amountOfPages.value && items > props.amountOfItems) {
+    return props.amountOfItems;
+  }
+
+  return _itemsPerPage.value * props.selectedPage;
+});
+</script>
+
+<template>
+  <div
+    class="flex gap-2 items-center text-for-white-bg-font text-sm"
+    data-e2e="items-per-page"
+  >
+    <span class="relative">
+      <AntSkeleton
+        v-if="skeleton"
+        rounded
+        absolute
+      />
+      Einträge pro Seite
+    </span>
+
+    <AntSelect
+      v-model="_itemsPerPage"
+      :options="_itemsPerPageOptions"
+      :skeleton="skeleton"
+      :expanded="false"
+    />
+
+    <div
+      v-if="amountOfItems !== null"
+      class="flex gap-1 relative"
+    >
+      <AntSkeleton
+        v-if="skeleton"
+        rounded
+        absolute
+      />
+
+      <span class="font-medium">{{ fromItems }} - {{ toItems }}</span>
+      <span>von</span>
+      <span
+        class="font-medium"
+        data-e2e="total-items"
+      >{{ amountOfItems }}</span>
+    </div>
+  </div>
+</template>

package/dist/components/AntPagination.vue

@@ -1,12 +1,4 @@
 <script lang="ts" setup>
-// @ts-nocheck
-/**
- * TODO:: test me in storybook through vue router
- * TODO:: Fix ts errors
- */
-import {
-  useRouter, useRoute,
-} from 'vue-router';
 import {
   computed,
 } from 'vue';
@@ -19,14 +11,10 @@ import {
   State, Grouped,
 } from '../enums';
 
-const emit = defineEmits([
-  'update:skeleton',
-  'input',
-]);
 const props = withDefaults(
   defineProps<{
+    modelValue: number;
     pages: number;
-    pageQuery?: string;
     skeleton?: boolean;
 
     /**
@@ -36,37 +24,19 @@ const props = withDefaults(
     lightVersion?: boolean;
   }>(),
   {
-    pageQuery: 'p',
     skeleton: false,
     lightVersion: false,
   },
 );
-const router = useRouter();
-const route = useRoute();
-const page = computed({
+const emits = defineEmits([
+  'update:modelValue',
+]);
+const _page = computed({
   get() {
-    const _page = route.query[props.pageQuery] >= 1 ? Number.parseInt(route.query[props.pageQuery]) : 1;
-
-    if (_page <= 0 || _page > props.pages) {
-      return 1;
-    }
-
-    return _page;
+    return props.modelValue;
   },
-  set(val) {
-    const query = {
-      ...route.query,
-    };
-    query[props.pageQuery] = val;
-
-    (async () => {
-      await router.push({
-        ...route,
-        query,
-      });
-
-      emit('input', val);
-    })();
+  set(value: number) {
+    emits('update:modelValue', value);
   },
 });
 
@@ -84,15 +54,15 @@ const page = computed({
 const defaultPagination = computed(() => {
   const pagination = [];
 
-  if (page.value > 2 && props.pages > 3) {
+  if (_page.value > 2 && props.pages > 3) {
     pagination.push(1);
 
-    if (page.value > 3) {
+    if (_page.value > 3) {
       pagination.push('...');
     }
   }
 
-  if (page.value === 1) {
+  if (_page.value === 1) {
     pagination.push(1);
 
     if (props.pages >= 2) {
@@ -102,7 +72,7 @@ const defaultPagination = computed(() => {
     if (props.pages >= 3) {
       pagination.push(3);
     }
-  } else if (page.value === props.pages) {
+  } else if (_page.value === props.pages) {
     if (props.pages - 2 >= 1) {
       pagination.push(props.pages - 2);
     }
@@ -111,13 +81,13 @@ const defaultPagination = computed(() => {
     }
     pagination.push(props.pages);
   } else {
-    pagination.push(page.value - 1);
-    pagination.push(page.value);
-    pagination.push(page.value + 1);
+    pagination.push(_page.value - 1);
+    pagination.push(_page.value);
+    pagination.push(_page.value + 1);
   }
 
-  if (page.value < props.pages - 1 && props.pages > 3) {
-    if (page.value < props.pages - 2) {
+  if (_page.value < props.pages - 1 && props.pages > 3) {
+    if (_page.value < props.pages - 2) {
       pagination.push('...');
     }
     pagination.push(props.pages);
@@ -141,19 +111,19 @@ const lightPagination = computed(() => {
 
   pagination.push(1);
 
-  if (page.value > 2) {
+  if (_page.value > 2) {
     pagination.push('...');
   }
 
-  if (page.value > 1) {
-    pagination.push(page.value);
+  if (_page.value > 1) {
+    pagination.push(_page.value);
   }
 
-  if (page.value < props.pages - 1) {
+  if (_page.value < props.pages - 1) {
     pagination.push('...');
   }
 
-  if (page.value < props.pages) {
+  if (_page.value < props.pages) {
     pagination.push(props.pages);
   }
 
@@ -182,24 +152,24 @@ const pagination = computed(() => {
         class="inline-flex gap-px"
       >
         <AntButton
-          :disabled="page === 1"
+          :disabled="_page === 1"
           :icon-left="faChevronLeft"
           :grouped="Grouped.left"
           :filled="false"
-          @click="() => page = page - 1"
           data-e2e="left-arrow-button"
+          @click="() => _page = _page - 1"
         />
 
         <AntButton
           v-for="(pageObj) in pagination"
           :key="`pagination-button-${pageObj}`"
-          :state="pageObj === page ? State.primary : State.base"
-          :class="{'text-primary-500 z-10': pageObj === page}"
+          :state="pageObj === _page ? State.primary : State.base"
+          :class="{'text-primary-500 z-10': pageObj === _page}"
           :disabled="pageObj === '...'"
           :grouped="Grouped.center"
           :filled="false"
-          :readonly="pageObj === page"
-          @click="() => page = pageObj"
+          :readonly="pageObj === _page"
+          @click="() => _page = pageObj as number"
         >
           {{ pageObj }}
         </AntButton>
@@ -207,10 +177,10 @@ const pagination = computed(() => {
         <AntButton
           :icon-left="faChevronRight"
           :grouped="Grouped.right"
-          :disabled="page === pages"
+          :disabled="_page === pages"
           :filled="false"
-          @click="() => page = page + 1"
           data-e2e="right-arrow-button"
+          @click="() => _page = _page + 1"
         />
       </div>
     </div>

package/dist/components/AntTooltip.vue

@@ -81,10 +81,10 @@ const arrowTransform = computed(() => {
 const svgPathClasses = computed(() => {
   const variants: Record<InputState, string> = {
     [InputState.base]: 'fill-white stroke-white',
-    [InputState.danger]: 'fill-danger-500 stroke-danger-500',
-    [InputState.info]: 'fill-info-500 stroke-info-500',
-    [InputState.success]: 'fill-success-500 stroke-success-500',
-    [InputState.warning]: 'fill-warning-500 stroke-warning-500',
+    [InputState.danger]: 'fill-danger-100',
+    [InputState.info]: 'fill-info-100',
+    [InputState.success]: 'fill-success-100',
+    [InputState.warning]: 'fill-warning-100',
   };
 
   return {
@@ -107,10 +107,10 @@ const arrowSvgPathClasses = computed(() => {
 const contentClasses = computed(() => {
   const variants: Record<InputState, string> = {
     [InputState.base]: 'text-for-white-bg-font bg-white border-base-300',
-    [InputState.danger]: 'text-danger-500-font bg-danger-500 border-danger-500',
-    [InputState.info]: 'text-info-500-font bg-info-500 border-info-500',
-    [InputState.success]: 'text-success-500-font bg-success-500 border-success-500',
-    [InputState.warning]: 'text-warning-500-font bg-warning-500 border-warning-500',
+    [InputState.danger]: 'text-danger-100-font bg-danger-100 border-danger-500',
+    [InputState.info]: 'text-info-100-font bg-info-100 border-info-500',
+    [InputState.success]: 'text-success-100-font bg-success-100 border-success-500',
+    [InputState.warning]: 'text-warning-100-font bg-warning-100 border-warning-500',
   };
 
   return {

package/dist/components/__stories/AntItemsPerPage.stories.d.ts

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

package/dist/components/__stories/AntItemsPerPage.stories.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = exports.Docs = void 0;
+var _AntItemsPerPage = _interopRequireDefault(require("../AntItemsPerPage.vue"));
+var _vue = require("vue");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const meta = {
+  title: "Components/Items per page",
+  component: _AntItemsPerPage.default,
+  parameters: {
+    controls: {
+      sort: "requiredFirst"
+    }
+  },
+  argTypes: {}
+};
+module.exports = meta;
+const Docs = exports.Docs = {
+  render: args => ({
+    components: {
+      AntItemsPerPage: _AntItemsPerPage.default
+    },
+    setup() {
+      const ipp = (0, _vue.ref)(20);
+      return {
+        args,
+        ipp
+      };
+    },
+    template: `
+      <AntItemsPerPage v-bind="args" v-model="ipp"/>
+    `
+  }),
+  args: {
+    amountOfItems: 5
+  }
+};

package/dist/components/__stories/AntItemsPerPage.stories.mjs

@@ -0,0 +1,35 @@
+import AntItemsPerPage from "../AntItemsPerPage.vue";
+import {
+  ref
+} from "vue";
+const meta = {
+  title: "Components/Items per page",
+  component: AntItemsPerPage,
+  parameters: {
+    controls: {
+      sort: "requiredFirst"
+    }
+  },
+  argTypes: {}
+};
+export default meta;
+export const Docs = {
+  render: (args) => ({
+    components: {
+      AntItemsPerPage
+    },
+    setup() {
+      const ipp = ref(20);
+      return {
+        args,
+        ipp
+      };
+    },
+    template: `
+      <AntItemsPerPage v-bind="args" v-model="ipp"/>
+    `
+  }),
+  args: {
+    amountOfItems: 5
+  }
+};

package/dist/components/__stories/AntPagination.stories.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 module.exports = exports.Skeleton = exports.LightVersion = exports.Docs = void 0;
 var _AntPagination = _interopRequireDefault(require("../AntPagination.vue"));
 var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
-var _storybookVue3Router = require("storybook-vue3-router");
+var _vue = require("vue");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const meta = {
   title: "Components/Pagination",
@@ -15,13 +15,7 @@ const meta = {
     controls: {
       sort: "requiredFirst"
     }
-  },
-  argTypes: {
-    pageQuery: {
-      description: "Which query parameter should be used, for writing the current page into it."
-    }
-  },
-  decorators: [(0, _storybookVue3Router.vueRouter)()]
+  }
 };
 module.exports = meta;
 const Docs = exports.Docs = {
@@ -30,12 +24,14 @@ const Docs = exports.Docs = {
       AntPagination: _AntPagination.default
     },
     setup() {
+      const page = (0, _vue.ref)(1);
       return {
         args,
-        faAngleRight: _freeSolidSvgIcons.faAngleRight
+        faAngleRight: _freeSolidSvgIcons.faAngleRight,
+        page
       };
     },
-    template: '<AntPagination v-bind="args"/>'
+    template: '<AntPagination v-bind="args" v-model="page"/>'
   }),
   args: {
     pages: 20

package/dist/components/__stories/AntPagination.stories.mjs

@@ -3,8 +3,8 @@ import {
   faAngleRight
 } from "@fortawesome/free-solid-svg-icons";
 import {
-  vueRouter
-} from "storybook-vue3-router";
+  ref
+} from "vue";
 const meta = {
   title: "Components/Pagination",
   component: AntPagination,
@@ -12,15 +12,7 @@ const meta = {
     controls: {
       sort: "requiredFirst"
     }
-  },
-  argTypes: {
-    pageQuery: {
-      description: "Which query parameter should be used, for writing the current page into it."
-    }
-  },
-  decorators: [
-    vueRouter()
-  ]
+  }
 };
 export default meta;
 export const Docs = {
@@ -29,12 +21,14 @@ export const Docs = {
       AntPagination
     },
     setup() {
+      const page = ref(1);
       return {
         args,
-        faAngleRight
+        faAngleRight,
+        page
       };
     },
-    template: '<AntPagination v-bind="args"/>'
+    template: '<AntPagination v-bind="args" v-model="page"/>'
   }),
   args: {
     pages: 20

package/dist/components/inputs/AntDateInput.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import {
-  computed, onMounted, ref,
+  computed, onMounted,
 } from 'vue';
 import AntField from '../forms/AntField.vue';
 import AntBaseInput from './Elements/AntBaseInput.vue';
@@ -67,7 +67,9 @@ const emit = defineEmits([
   'validate',
 ]);
 const _modelValue = useVModel(props, 'modelValue', emit);
-const _inputRef = useVModel(props, 'inputRef', emit);
+const _inputRef = defineModel<HTMLInputElement | null>('inputRef', {
+  default: null,
+});
 const iconColor = computed(() => {
   switch (props.state) {
     case InputState.info:
@@ -92,11 +94,11 @@ onMounted(() => {
 });
 
 function onClickCalendar() {
-  if (!props.disabled && !props.readonly) {
-    _inputRef.value?.showPicker();
-  } else {
+  if (props.disabled || props.readonly) {
     return;
   }
+
+  _inputRef.value?.showPicker();
 }
 </script>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antify/ui",
-  "version": "4.1.19",
+  "version": "4.1.21",
   "private": false,
   "type": "module",
   "exports": {