@antify/ui 1.1.0 → 1.3.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

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import AntIcon from '../AntIcon.vue';
 import {
+  faCircleInfo,
   faExclamationCircle,
   faExclamationTriangle,
   type IconDefinition
@@ -8,34 +9,40 @@ 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();
 
 const icons = {
   [TabItemState.base]: null,
+  [TabItemState.info]: faCircleInfo,
   [TabItemState.danger]: faExclamationCircle,
   [TabItemState.warning]: faExclamationTriangle,
 };
 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;
@@ -43,31 +50,37 @@ const _active = computed<boolean>(() => {
 const containerClasses = computed(() => {
   const variants: Record<TabItemState, string> = {
     [TabItemState.base]: 'hover:bg-neutral-100',
+    [TabItemState.info]: 'hover:bg-neutral-100',
     [TabItemState.warning]: 'hover:bg-warning-100',
     [TabItemState.danger]: 'hover:bg-danger-100',
   };
   const activeVariants: Record<TabItemState, string> = {
     [TabItemState.base]: 'text-primary-500 border-primary-500',
+    [TabItemState.info]: 'text-info-500 border-info-500',
     [TabItemState.warning]: 'text-warning-500 border-warning-500',
     [TabItemState.danger]: 'text-danger-500 border-danger-500',
   };
   const notActiveVariants: Record<TabItemState, string> = {
-    [TabItemState.base]: 'text-for-white-bg-font border-white',
+    [TabItemState.base]: 'text-for-white-bg-font',
+    [TabItemState.info]: 'text-info-500',
     [TabItemState.warning]: 'text-warning-500',
     [TabItemState.danger]: 'text-danger-500',
   };
 
   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 text-nowrap': 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(() => {
   const variants: Record<TabItemState, string> = {
     [TabItemState.base]: 'bg-primary-500',
+    [TabItemState.info]: 'bg-info-500',
     [TabItemState.warning]: 'bg-warning-500',
     [TabItemState.danger]: 'bg-danger-500',
   };
@@ -80,6 +93,7 @@ const borderBoxClasses = computed(() => {
 const iconColor = computed(() => {
   const variants = {
     [TabItemState.base]: 'text-neutral-100-font',
+    [TabItemState.info]: 'text-info-500',
     [TabItemState.warning]: 'text-warning-500',
     [TabItemState.danger]: 'text-danger-500',
   };
@@ -90,7 +104,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 +116,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,14 +9,18 @@ const props = withDefaults(defineProps<{
   modelValue?: string;
   tabItems?: TabItem[];
   expanded?: boolean;
+  skeleton?: boolean;
 }>(), {
   expanded: false,
+  skeleton: false,
 });
 
 const currentActive = useVModel(props, 'modelValue', emits);
 const containerClasses = computed(() => ({
-  'flex items-stretch bg-neutral-300 gap-px transition-all h-full': true,
-  'w-fit': !props.expanded,
+  'flex transition-all h-full': true,
+}));
+
+const scrollContainerClasses = computed(() => ({
   'w-full': props.expanded,
 }));
 
@@ -25,12 +29,17 @@ function clickTab(tabItem: TabItem) {
     tabItem.clickHandler();
   }
 
+  if (tabItem.disabled){
+    return
+  }
+
   currentActive.value = tabItem.id;
 }
 </script>
 
 <template>
   <div :class="containerClasses">
+    <div class="flex gap-px bg-neutral-300 border-l border-r border-neutral-300 overflow-x-auto" :class="scrollContainerClasses">
     <slot>
       <AntTabItem
         v-for="(tabItem, index) in tabItems"
@@ -39,9 +48,12 @@ 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>
     </slot>
+    </div>
   </div>
 </template>

package/dist/components/tabs/__stories/AntTabs.stories.d.ts

@@ -5,5 +5,6 @@ export default meta;
 type Story = StoryObj<typeof AntTabs>;
 export declare const Docs: Story;
 export declare const FixedHeight: Story;
+export declare const HorizontalScrolling: Story;
 export declare const DifferentStates: Story;
 export declare const Summary: Story;

package/dist/components/tabs/__stories/AntTabs.stories.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-module.exports = exports.Summary = exports.FixedHeight = exports.Docs = exports.DifferentStates = void 0;
+module.exports = exports.Summary = exports.HorizontalScrolling = exports.FixedHeight = exports.Docs = exports.DifferentStates = void 0;
 var _AntTabs = _interopRequireDefault(require("../AntTabs.vue"));
 var _AntFormGroupLabel = _interopRequireDefault(require("../../forms/AntFormGroupLabel.vue"));
 var _AntFormGroup = _interopRequireDefault(require("../../forms/AntFormGroup.vue"));
@@ -83,6 +83,68 @@ const FixedHeight = exports.FixedHeight = {
   }),
   args: Docs.args
 };
+const HorizontalScrolling = exports.HorizontalScrolling = {
+  render: args => ({
+    components: {
+      AntTabs: _AntTabs.default,
+      AntFormGroupLabel: _AntFormGroupLabel.default,
+      AntFormGroup: _AntFormGroup.default
+    },
+    setup() {
+      return {
+        args
+      };
+    },
+    template: `
+      <AntFormGroup>
+
+        <AntFormGroupLabel>Default Small</AntFormGroupLabel>
+        <AntFormGroup class="dashed max-w-[320px] overflow-hidden">
+          <AntTabs v-bind="args" v-model="args.modelValue" />
+        </AntFormGroup>
+
+        <AntFormGroupLabel>Expanded Small</AntFormGroupLabel>
+        <AntFormGroup class="dashed max-w-[320px] overflow-hidden">
+          <AntTabs v-bind="args" v-model="args.modelValue" expanded />
+        </AntFormGroup>
+
+        <AntFormGroupLabel>Default Large</AntFormGroupLabel>
+        <AntFormGroup class="dashed">
+          <AntTabs v-bind="args" v-model="args.modelValue" />
+        </AntFormGroup>
+
+        <AntFormGroupLabel>Expanded Large</AntFormGroupLabel>
+        <AntFormGroup class="dashed">
+          <AntTabs v-bind="args" v-model="args.modelValue" expanded />
+        </AntFormGroup>
+
+      </AntFormGroup>
+    `
+  }),
+  args: {
+    tabItems: [{
+      id: "1",
+      label: "First tab"
+    }, {
+      id: "2",
+      label: "Second tab"
+    }, {
+      id: "3",
+      label: "Third tab",
+      state: _AntTabItem.TabItemState.warning
+    }, {
+      id: "4",
+      label: "Fourth tab",
+      state: _AntTabItem.TabItemState.danger
+    }, {
+      id: "5",
+      label: "Fifth tab"
+    }, {
+      id: "6",
+      label: "Sixth tab"
+    }]
+  }
+};
 const DifferentStates = exports.DifferentStates = {
   render: Docs.render,
   args: {
@@ -100,6 +162,10 @@ const DifferentStates = exports.DifferentStates = {
       id: "4",
       label: "Fourth tab",
       state: _AntTabItem.TabItemState.danger
+    }, {
+      id: "5",
+      label: "Fifth tab",
+      state: _AntTabItem.TabItemState.info
     }]
   }
 };
@@ -114,6 +180,7 @@ const Summary = exports.Summary = {
       const value_1 = (0, _vue.ref)();
       const value_2 = (0, _vue.ref)();
       const value_3 = (0, _vue.ref)("2");
+      const value_4 = (0, _vue.ref)();
       const tabItems_1 = [{
         id: "1",
         label: "My account"
@@ -146,14 +213,38 @@ const Summary = exports.Summary = {
         label: "Messages",
         to: "/#"
       }];
+      const tabItems_4 = [{
+        id: "1",
+        label: "First tab"
+      }, {
+        id: "2",
+        label: "Second tab"
+      }, {
+        id: "3",
+        label: "Third tab",
+        state: _AntTabItem.TabItemState.warning
+      }, {
+        id: "4",
+        label: "Fourth tab",
+        state: _AntTabItem.TabItemState.danger
+      }, {
+        id: "5",
+        label: "Fifth tab",
+        state: _AntTabItem.TabItemState.info
+      }, {
+        id: "6",
+        label: "Sixth tab"
+      }];
       return {
         args,
         value_1,
         value_2,
         value_3,
+        value_4,
         tabItems_1,
         tabItems_2,
-        tabItems_3
+        tabItems_3,
+        tabItems_4
       };
     },
     template: `
@@ -167,15 +258,30 @@ const Summary = exports.Summary = {
 
         <AntFormGroupLabel>Expanded</AntFormGroupLabel>
         <AntFormGroup>
-          <div class="dashed"><AntTabs v-model="value_1" :tab-items="tabItems_1" expanded separators/></div>
-          <div class="dashed"><AntTabs v-model="value_2" :tab-items="tabItems_2" expanded separators/></div>
-          <div class="dashed"><AntTabs v-model="value_3" :tab-items="tabItems_3" expanded separators/></div>
+          <div class="dashed"><AntTabs v-model="value_1" :tab-items="tabItems_1" expanded/></div>
+          <div class="dashed"><AntTabs v-model="value_2" :tab-items="tabItems_2" expanded/></div>
+          <div class="dashed"><AntTabs v-model="value_3" :tab-items="tabItems_3" expanded/></div>
         </AntFormGroup>
 
         <AntFormGroupLabel>Larger container</AntFormGroupLabel>
         <div class="h-16 dashed">
-          <AntTabs v-model="value_3" :tab-items="tabItems_3" expanded separators/>
+          <AntTabs v-model="value_3" :tab-items="tabItems_3" expanded/>
+        </div>
+
+        <AntFormGroupLabel>Different States</AntFormGroupLabel>
+        <div class="dashed">
+          <AntTabs v-model="value_4" :tab-items="tabItems_4" />
         </div>
+
+        <AntFormGroupLabel>Default Small Parent Container</AntFormGroupLabel>
+        <AntFormGroup class="dashed max-w-[320px] overflow-hidden">
+          <AntTabs v-model="value_4" :tab-items="tabItems_4" />
+        </AntFormGroup>
+
+        <AntFormGroupLabel>Expanded Small Parent Container</AntFormGroupLabel>
+        <AntFormGroup class="dashed max-w-[320px] overflow-hidden">
+          <AntTabs v-model="value_4" :tab-items="tabItems_4" expanded />
+        </AntFormGroup>
       </AntFormGroup>
     `
   }),