@antify/ui 1.0.4 → 1.2.0

package/dist/components/inputs/__stories/AntUnitInput.stories.mjs

@@ -2,8 +2,6 @@ import { Size } from "../../../enums/Size.enum.mjs";
 import AntUnitInput from "../AntUnitInput.vue";
 import { faEuroSign } from "@fortawesome/free-solid-svg-icons";
 import { InputState } from "../../../enums/index.mjs";
-import { isRequiredRule, useFieldValidator } from "@antify/validate";
-import { reactive } from "vue";
 const meta = {
   title: "Inputs/Unit Input",
   component: AntUnitInput,
@@ -56,57 +54,6 @@ export const Docs = {
     description: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
   }
 };
-export const withValidator = {
-  render: (args) => ({
-    components: { AntUnitInput },
-    setup() {
-      const validator = reactive(useFieldValidator([isRequiredRule]));
-      return { args, validator, InputState };
-    },
-    template: `
-      <AntUnitInput
-        v-bind="args"
-        v-model="args.modelValue"
-        :unit="args.unit"
-        :state="args.state ? args.state : (validator.hasErrors() ? InputState.danger : undefined)"
-        :messages="Array.isArray(args.messages) ? args.messages : validator.getErrors()"
-        @validate="(val) => validator.validate(val)"
-      />`
-  }),
-  args: {
-    modelValue: null,
-    unit: "\u20AC",
-    label: "Label",
-    description: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
-  }
-};
-export const Limited = {
-  render: (args) => ({
-    components: { AntUnitInput },
-    setup() {
-      const validator = reactive(useFieldValidator([
-        isRequiredRule,
-        (val) => val <= 10 || "Value should not be bigger than 10",
-        (val) => val <= 11 || "It should be really not bigger than 10!!!!"
-      ]));
-      return { args, validator };
-    },
-    template: `
-      <AntUnitInput
-        v-bind="args"
-        v-model="args.modelValue"
-        :unit="args.unit"
-        :errors="Array.isArray(args.errors) ? args.errors : validator.getErrors()"
-        @validate="(val) => validator.validate(val)"
-      />`
-  }),
-  args: {
-    ...Docs.args,
-    modelValue: 50,
-    limiter: true,
-    max: 10
-  }
-};
 export const UnitAsIcon = {
   render: Docs.render,
   args: {

package/dist/components/table/AntTable.vue

@@ -27,13 +27,15 @@ const props = withDefaults(
     loading?: boolean;
     selectableRows?: boolean;
     showLightVersion?: boolean;
-    size?: AntTableSize
+    size?: AntTableSize;
+    headerColor?: string;
   }>(), {
     rowKey: 'id',
     loading: false,
     selectableRows: false,
     showLightVersion: false,
-    size: AntTableSize.md
+    size: AntTableSize.md,
+    headerColor: 'bg-neutral-200'
   });
 
 const selected: Ref<Record<string, unknown> | undefined> = useVModel(props, 'selectedRow', emits);
@@ -96,7 +98,7 @@ function rowClick(elem: Record<string, unknown>): void {
         class="min-w-full max-h-full relative"
         :class="{'h-full': data.length === 0 && !_loading}"
       >
-        <thead class="bg-neutral-200 sticky top-0 z-10">
+        <thead class="sticky top-0 z-10" :class="headerColor">
         <tr>
           <slot name="headerFirstCell"/>
 
@@ -124,15 +126,15 @@ function rowClick(elem: Record<string, unknown>): void {
         <tbody class="bg-white relative">
         <!-- TODO:: Add some kind of virtual list for very large tree data (or required pagination??) -->
         <tr
-          v-for="(elem, index) in data"
+          v-for="(elem, rowIndex) in data"
           :id="elem[rowKey] as string"
-          :key="`table-row-${elem[rowKey]}-${index}`"
-          class="transition-all"
+          :key="`table-row-${elem[rowKey]}-${rowIndex}`"
           :class="{
-              'bg-primary-200 text-primary-200-font': elem === selected,
-              'bg-white text-for-white-bg-font': elem !== selected && index % 2 === 0,
-              'bg-neutral-100 text-neutral-100-font': elem !== selected && index % 2 !== 0,
-              'cursor-pointer': selectableRows
+              'bg-primary-200 text-primary-200-font transition-colors': elem === selected,
+              'bg-white text-for-white-bg-font': elem !== selected && rowIndex % 2 === 0,
+              'bg-neutral-100 text-neutral-100-font': elem !== selected && rowIndex % 2 !== 0,
+              'cursor-pointer': selectableRows,
+              'hover:bg-neutral-200': selectableRows && elem !== selected,
             }"
         >
           <slot
@@ -140,10 +142,10 @@ function rowClick(elem: Record<string, unknown>): void {
             v-bind="{ elem }"
           />
 
-          <template v-for="(header, index) in _headers">
+          <template v-for="(header, colIndex) in _headers">
             <AntTd
               v-if="!_showLightVersion || (_showLightVersion && header.lightVersion)"
-              :key="`table-cell-${header.identifier}-${index}`"
+              :key="`table-cell-${header.identifier}-${colIndex}`"
               :header="header"
               :element="elem"
               :align="header.align"
@@ -153,21 +155,21 @@ function rowClick(elem: Record<string, unknown>): void {
               <template #beforeCellContent="props">
                 <slot
                   name="beforeCellContent"
-                  v-bind="props"
+                  v-bind="{...props, colIndex, rowIndex}"
                 />
               </template>
 
               <template #cellContent="props">
                 <slot
                   name="cellContent"
-                  v-bind="props"
+                  v-bind="{...props, colIndex, rowIndex}"
                 />
               </template>
 
               <template #afterCellContent="props">
                 <slot
                   name="afterCellContent"
-                  v-bind="props"
+                  v-bind="{...props, colIndex, rowIndex}"
                 />
               </template>
             </AntTd>

package/dist/components/table/AntTd.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
-
 import {AntTableAlign, AntTableRowTypes, AntTableSize, type TableHeader} from './__types/TableHeader.types';
 import {computed} from 'vue';
-import type {RouteLocationRaw} from 'vue-router';
+import {type RouteLocationRaw, RouterLink} from 'vue-router';
 
 const props =
   withDefaults(

package/dist/components/table/__stories/AntTable.stories.js

@@ -136,7 +136,7 @@ const meta = {
   }
 };
 module.exports = meta;
-const testData = [];
+const testData = (0, _vue.ref)([]);
 for (let i = 0; i < 100; i++) {
   const randomName = _faker.faker.person.firstName() + " " + _faker.faker.person.lastName();
   const randomNumber = _faker.faker.number.int({
@@ -145,13 +145,11 @@ for (let i = 0; i < 100; i++) {
   });
   const randomEmail = _faker.faker.internet.email();
   const randomBoolean = _faker.faker.datatype.boolean();
-  testData.push({
+  testData.value.push({
     name: randomName,
     age: randomNumber,
     email: randomEmail,
-    employeed: randomBoolean,
-    linkLabel: "Link here",
-    link: "/"
+    employed: randomBoolean
   });
 }
 const Docs = exports.Docs = {
@@ -169,10 +167,10 @@ const Docs = exports.Docs = {
     },
     template: `
       <div class="h-96 border border-dashed border-neutral-300">
-        <AntTable v-bind="args" v-model="selected">
+        <AntTable v-bind="args" v-model="selected" :selected-row="selected" @row-click="(val) => selected = val">
           <template #cellContent="{element: entry, header}">
             <div v-if="header.identifier === 'employeed'">
-              <AntSwitch :model-value="entry.employeed"/>
+              <AntSwitch v-model="entry.employeed"/>
             </div>
           </template>
         </AntTable>
@@ -202,13 +200,8 @@ const Docs = exports.Docs = {
       identifier: "employeed",
       rowClassList: "",
       type: _TableHeader.AntTableRowTypes.slot
-    }, {
-      title: "Link",
-      identifier: "linkLabel",
-      toProp: "link",
-      type: _TableHeader.AntTableRowTypes.link
     }],
-    data: testData
+    data: testData.value
   }
 };
 const Empty = exports.Empty = {
@@ -303,6 +296,6 @@ const Loading = exports.Loading = {
       toProp: "link",
       type: _TableHeader.AntTableRowTypes.link
     }],
-    data: testData
+    data: testData.value
   }
 };

package/dist/components/table/__stories/AntTable.stories.mjs

@@ -89,19 +89,17 @@ const meta = {
   }
 };
 export default meta;
-const testData = [];
+const testData = ref([]);
 for (let i = 0; i < 100; i++) {
   const randomName = faker.person.firstName() + " " + faker.person.lastName();
   const randomNumber = faker.number.int({ min: 18, max: 60 });
   const randomEmail = faker.internet.email();
   const randomBoolean = faker.datatype.boolean();
-  testData.push({
+  testData.value.push({
     name: randomName,
     age: randomNumber,
     email: randomEmail,
-    employeed: randomBoolean,
-    linkLabel: "Link here",
-    link: "/"
+    employed: randomBoolean
   });
 }
 export const Docs = {
@@ -113,10 +111,10 @@ export const Docs = {
     },
     template: `
       <div class="h-96 border border-dashed border-neutral-300">
-        <AntTable v-bind="args" v-model="selected">
+        <AntTable v-bind="args" v-model="selected" :selected-row="selected" @row-click="(val) => selected = val">
           <template #cellContent="{element: entry, header}">
             <div v-if="header.identifier === 'employeed'">
-              <AntSwitch :model-value="entry.employeed"/>
+              <AntSwitch v-model="entry.employeed"/>
             </div>
           </template>
         </AntTable>
@@ -150,15 +148,9 @@ export const Docs = {
         identifier: "employeed",
         rowClassList: "",
         type: AntTableRowTypes.slot
-      },
-      {
-        title: "Link",
-        identifier: "linkLabel",
-        toProp: "link",
-        type: AntTableRowTypes.link
       }
     ],
-    data: testData
+    data: testData.value
   }
 };
 export const Empty = {
@@ -268,6 +260,6 @@ export const Loading = {
         type: AntTableRowTypes.link
       }
     ],
-    data: testData
+    data: testData.value
   }
 };

package/dist/components/tabs/AntTabItem.vue

@@ -8,18 +8,23 @@ import {
 import {computed} from 'vue';
 import {type RouteLocationRaw, useRoute} from 'vue-router';
 import {TabItemState} from './__types/AntTabItem.types';
+import {AntSkeleton} from "../../../dist";
 
 const props = withDefaults(defineProps<{
   label: string;
   active: boolean;
+  disabled?: boolean;
   state?: TabItemState
   showIcon?: boolean;
   icon?: IconDefinition;
   to?: RouteLocationRaw;
   expanded?: boolean;
+  skeleton?: boolean;
 }>(), {
   state: TabItemState.base,
   showIcon: true,
+  disabled: false,
+  skeleton: false,
 });
 const route = useRoute();
 
@@ -31,11 +36,11 @@ const icons = {
 const iconRight = computed<IconDefinition | null>(() => icons[props.state]);
 const _active = computed<boolean>(() => {
   if (typeof props.to === 'string') {
-    return route.path === props.to;
+    return route.path.startsWith(props.to);
   }
 
   if (typeof props.to === 'object' && props.to?.name !== undefined) {
-    return route.name === props.to.name;
+    return route.name.startsWith(props.to.name);
   }
 
   return props.active;
@@ -58,11 +63,13 @@ const containerClasses = computed(() => {
   };
 
   return {
-    'p-2 hover:cursor-pointer text-center flex items-center justify-center gap-2 bg-white transition-[background-color] relative text-sm': true,
+    'p-2 text-center flex items-center justify-center gap-2 bg-white transition-[background-color] relative text-sm': true,
     'grow': props.expanded,
-    [variants[props.state]]: true,
+    [variants[props.state]]: !props.disabled,
     [activeVariants[props.state]]: _active.value,
     [notActiveVariants[props.state]]: !_active.value,
+    'hover:cursor-pointer': !props.disabled,
+    'hover:cursor-not-allowed opacity-50': props.disabled,
   };
 });
 const borderBoxClasses = computed(() => {
@@ -90,7 +97,7 @@ const iconColor = computed(() => {
 
 <template>
   <component
-    :is="to !== undefined ? 'router-link' : 'div'"
+    :is="to !== undefined && !disabled ? 'router-link' : 'div'"
     :to="to"
     :class="containerClasses"
   >
@@ -102,7 +109,10 @@ const iconColor = computed(() => {
       />
     </slot>
 
-    <slot>{{ label }}</slot>
+    <div class="relative">
+      <slot>{{ label }}</slot>
+      <AntSkeleton v-if="skeleton" rounded absolute/>
+    </div>
 
     <AntIcon
       v-if="iconRight && showIcon"

package/dist/components/tabs/AntTabs.vue

@@ -9,8 +9,10 @@ const props = withDefaults(defineProps<{
   modelValue?: string;
   tabItems?: TabItem[];
   expanded?: boolean;
+  skeleton?: boolean;
 }>(), {
   expanded: false,
+  skeleton: false,
 });
 
 const currentActive = useVModel(props, 'modelValue', emits);
@@ -25,6 +27,10 @@ function clickTab(tabItem: TabItem) {
     tabItem.clickHandler();
   }
 
+  if (tabItem.disabled){
+    return
+  }
+
   currentActive.value = tabItem.id;
 }
 </script>
@@ -39,6 +45,8 @@ function clickTab(tabItem: TabItem) {
         @click="clickTab(tabItem)"
         :active="currentActive === tabItem.id"
         :expanded="expanded"
+        :disabled="tabItem.disabled"
+        :skeleton="skeleton"
       >
         <slot name="content" v-bind="{item: tabItem, isActive: currentActive === tabItem.id}"></slot>
       </AntTabItem>

package/dist/components/tabs/__types/AntTabItem.types.d.ts

@@ -4,6 +4,7 @@ export type TabItem = {
     id: string;
     label: string;
     state?: TabItemState;
+    disabled?: boolean;
     showIcon?: boolean;
     icon?: IconDefinition;
     to?: string | RouteLocationRaw;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antify/ui",
-  "version": "1.0.4",
+  "version": "1.2.0",
   "private": false,
   "type": "module",
   "exports": {
@@ -46,6 +46,7 @@
     "vue": "^3.4.29"
   },
   "dependencies": {
+    "@floating-ui/vue": "^1.1.5",
     "@fortawesome/free-regular-svg-icons": "^6.5.1",
     "@fortawesome/free-solid-svg-icons": "^6.5.1",
     "@fortawesome/vue-fontawesome": "^3.0.5",