@antify/ui 1.2.0 → 1.3.0

package/dist/components/AntTooltip.vue

@@ -18,6 +18,8 @@ const props = withDefaults(defineProps<{
 const floatOpen = ref<boolean>(false)
 const clickLock = ref(false);
 const timeout = ref<number | undefined>();
+const hoverFloat = ref<boolean>(false)
+const hoverReference = ref<boolean>(false)
 
 const reference = ref<HTMLElement | null>(null)
 const floating = ref<HTMLElement | null>(null)
@@ -94,10 +96,6 @@ const _tooltipClasses = computed(() => ({
 }));
 
 function onMouseOver() {
-  if (floatOpen.value || clickLock.value) {
-    return;
-  }
-
   /**
    * To prevent buggy behavior when hovering over multiple tooltips in quick succession,
    * we clear the timeout before setting a new one.
@@ -110,8 +108,29 @@ function onMouseOver() {
 function onMouseLeave() {
   clearTimeout(timeout.value);
 
-  floatOpen.value = false;
-  clickLock.value = false;
+  timeout.value = setTimeout(() => {
+    if (!hoverFloat.value) {
+      floatOpen.value = false
+      clickLock.value = false;
+    }
+  }, props.delay) as unknown as number;
+}
+
+function onMouseEnterTooltip() {
+  clearTimeout(timeout.value);
+
+  floatOpen.value = true;
+}
+
+function onMouseLeaveTooltip() {
+  clearTimeout(timeout.value);
+
+  timeout.value = setTimeout(() => {
+    if (!hoverReference.value) {
+      floatOpen.value = false
+      clickLock.value = false;
+    }
+  }, props.delay) as unknown as number;
 }
 
 function onClick() {
@@ -147,6 +166,8 @@ function onClick() {
           ? 'block'
           : 'none',
         }"
+        @mouseenter="() => onMouseEnterTooltip()"
+        @mouseleave="() => onMouseLeaveTooltip()"
         data-e2e="tooltip-content"
       >
         <div

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

@@ -80,7 +80,9 @@ const Docs = exports.Docs = {
     });
     await step("Leave hover state and expect not showing the tooltip anymore", async () => {
       await _test.userEvent.unhover(target);
-      await (0, _test.expect)(queryTooltip()).not.toBeInTheDocument();
+      await (0, _test.waitFor)(() => (0, _test.expect)(queryTooltip()).not.toBeInTheDocument(), {
+        timeout: 600
+      });
     });
     await step("Hover over the target, wait until the tooltip is visible, click the target and expect not showing the tooltip", async () => {
       await _test.userEvent.hover(target);

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

@@ -58,7 +58,7 @@ export const Docs = {
     });
     await step("Leave hover state and expect not showing the tooltip anymore", async () => {
       await userEvent.unhover(target);
-      await expect(queryTooltip()).not.toBeInTheDocument();
+      await waitFor(() => expect(queryTooltip()).not.toBeInTheDocument(), { timeout: 600 });
     });
     await step("Hover over the target, wait until the tooltip is visible, click the target and expect not showing the tooltip", async () => {
       await userEvent.hover(target);

package/dist/components/buttons/AntButton.vue

@@ -207,8 +207,8 @@ onMounted(() => {
         :to="to"
         :disabled="disabled || undefined"
         :tabindex="noFocus || hasInputState ? '-1' : '0'"
-        @click="() => !props.readonly ? $emit('click') : null"
-        @blur="() => !props.readonly ? $emit('blur') : null"
+        @click="(e: MouseEvent) => !props.readonly ? $emit('click', e) : null"
+        @blur="(e: FocusEvent) => !props.readonly ? $emit('blur', e) : null"
       >
         <AntSpinner
           v-if="spinner"

package/dist/components/crud/AntCrudDetailNav.vue

@@ -34,6 +34,7 @@ const dialogOpen = ref(false);
     <slot name="tabs">
       <AntTabs
         :tab-items="tabItems"
+        :skeleton="skeleton"
       />
     </slot>
 

package/dist/components/inputs/AntDateInput.vue

@@ -95,7 +95,7 @@ function onClickCalendar() {
           :icon="_icon"
           :color="iconColor"
           :size="iconSize"
-          :class="{'cursor-pointer': !disabled, 'opacity-50': disabled}"
+          :class="{'cursor-pointer': !disabled && !readonly, 'opacity-50': disabled}"
           @click="onClickCalendar"
         />
       </template>

package/dist/components/inputs/AntTextarea.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import {computed, onMounted, watch} from 'vue';
+import {computed, onMounted, ref, watch} from 'vue';
 import {Size} from '../../enums/Size.enum';
 import AntSkeleton from '../AntSkeleton.vue';
 import AntIcon from '../AntIcon.vue';
@@ -49,6 +49,7 @@ const props = withDefaults(defineProps<{
   resize: true,
   messages: () => []
 });
+
 const _modelValue = useVModel(props, 'modelValue', emit);
 const hasInputState = computed(() => props.skeleton || props.readonly || props.disabled);
 const icons = {
@@ -111,6 +112,7 @@ const iconColor = computed(() => {
 });
 const _wrapperClass = computed(() => classesToObjectSyntax(props.wrapperClass));
 const icon = computed(() => icons[props.state]);
+const textAreaRef = ref();
 const getIconSize = computed(() => {
   if (props.size === Size.xs || props.size === Size.xs2) {
     return IconSize.xs;
@@ -144,6 +146,11 @@ function onBlur(e: FocusEvent) {
   emit('validate', props.modelValue);
   emit('blur', e);
 }
+
+defineExpose({
+  getTextAreaRef: () => textAreaRef.value
+});
+
 </script>
 
 <template>
@@ -168,6 +175,7 @@ function onBlur(e: FocusEvent) {
         :placeholder="placeholder !== undefined ? placeholder : label"
         :disabled="disabled || skeleton"
         :readonly="readonly"
+        ref="textAreaRef"
         v-bind="$attrs"
         @blur="onBlur"
       />

package/dist/components/inputs/Elements/AntSelectMenu.vue

@@ -49,7 +49,6 @@ const {floatingStyles, middlewareData, placement} = useFloating(reference, float
 });
 
 onClickOutside(floating, () => {
-  console.log(props.open);
   if (!props.open) {
     return;
   }

package/dist/components/inputs/__stories/AntTextInput.stories.js

@@ -107,6 +107,7 @@ const Summary = exports.Summary = {
         <AntTextInput
           v-bind="args"
           v-model="args.modelValue"
+          readonly
         />
         <AntTextInput
           v-bind="args"

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

@@ -63,6 +63,7 @@ export const Summary = {
         <AntTextInput
           v-bind="args"
           v-model="args.modelValue"
+          readonly
         />
         <AntTextInput
           v-bind="args"

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
@@ -30,6 +31,7 @@ const route = useRoute();
 
 const icons = {
   [TabItemState.base]: null,
+  [TabItemState.info]: faCircleInfo,
   [TabItemState.danger]: faExclamationCircle,
   [TabItemState.warning]: faExclamationTriangle,
 };
@@ -48,22 +50,25 @@ 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 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]]: !props.disabled,
     [activeVariants[props.state]]: _active.value,
@@ -75,6 +80,7 @@ const containerClasses = computed(() => {
 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',
   };
@@ -87,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',
   };

package/dist/components/tabs/AntTabs.vue

@@ -17,8 +17,10 @@ const props = withDefaults(defineProps<{
 
 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,
 }));
 
@@ -37,6 +39,7 @@ function clickTab(tabItem: TabItem) {
 
 <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"
@@ -51,5 +54,6 @@ function clickTab(tabItem: TabItem) {
         <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>
     `
   }),

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

@@ -69,6 +69,69 @@ export const FixedHeight = {
   }),
   args: Docs.args
 };
+export const HorizontalScrolling = {
+  render: (args) => ({
+    components: { AntTabs, AntFormGroupLabel, AntFormGroup },
+    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: TabItemState.warning
+      },
+      {
+        id: "4",
+        label: "Fourth tab",
+        state: TabItemState.danger
+      },
+      {
+        id: "5",
+        label: "Fifth tab"
+      },
+      {
+        id: "6",
+        label: "Sixth tab"
+      }
+    ]
+  }
+};
 export const DifferentStates = {
   render: Docs.render,
   args: {
@@ -90,6 +153,11 @@ export const DifferentStates = {
         id: "4",
         label: "Fourth tab",
         state: TabItemState.danger
+      },
+      {
+        id: "5",
+        label: "Fifth tab",
+        state: TabItemState.info
       }
     ]
   }
@@ -101,6 +169,7 @@ export const Summary = {
       const value_1 = ref();
       const value_2 = ref();
       const value_3 = ref("2");
+      const value_4 = ref();
       const tabItems_1 = [
         {
           id: "1",
@@ -142,14 +211,45 @@ export const Summary = {
           to: "/#"
         }
       ];
+      const tabItems_4 = [
+        {
+          id: "1",
+          label: "First tab"
+        },
+        {
+          id: "2",
+          label: "Second tab"
+        },
+        {
+          id: "3",
+          label: "Third tab",
+          state: TabItemState.warning
+        },
+        {
+          id: "4",
+          label: "Fourth tab",
+          state: TabItemState.danger
+        },
+        {
+          id: "5",
+          label: "Fifth tab",
+          state: 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: `
@@ -163,15 +263,30 @@ export const 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>
     `
   }),

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

@@ -13,6 +13,7 @@ export type TabItem = {
 };
 export declare enum TabItemState {
     base = "base",
+    info = "info",
     warning = "warning",
     danger = "danger"
 }

package/dist/components/tabs/__types/AntTabItem.types.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.TabItemState = void 0;
 var TabItemState = exports.TabItemState = /* @__PURE__ */(TabItemState2 => {
   TabItemState2["base"] = "base";
+  TabItemState2["info"] = "info";
   TabItemState2["warning"] = "warning";
   TabItemState2["danger"] = "danger";
   return TabItemState2;

package/dist/components/tabs/__types/AntTabItem.types.mjs

@@ -1,5 +1,6 @@
 export var TabItemState = /* @__PURE__ */ ((TabItemState2) => {
   TabItemState2["base"] = "base";
+  TabItemState2["info"] = "info";
   TabItemState2["warning"] = "warning";
   TabItemState2["danger"] = "danger";
   return TabItemState2;

package/package.json

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