@antify/ui 1.0.4 → 1.2.0

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

@@ -3,12 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-module.exports = exports.WithoutContent = exports.Summary = exports.Multiple = exports.Docs = void 0;
+module.exports = exports.Docs = void 0;
 var _AntTooltip = _interopRequireDefault(require("../AntTooltip.vue"));
-var _AntFormGroup = _interopRequireDefault(require("../forms/AntFormGroup.vue"));
-var _AntFormGroupLabel = _interopRequireDefault(require("../forms/AntFormGroupLabel.vue"));
-var _Position = require("../../enums/Position.enum");
 var _enums = require("../../enums");
+var _AntButton = _interopRequireDefault(require("../buttons/AntButton.vue"));
+var _vue = require("vue");
 var _test = require("@storybook/test");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const meta = {
@@ -20,12 +19,6 @@ const meta = {
     }
   },
   argTypes: {
-    position: {
-      control: {
-        type: "select"
-      },
-      options: Object.values(_Position.Position)
-    },
     state: {
       control: {
         type: "select"
@@ -38,23 +31,37 @@ module.exports = meta;
 const Docs = exports.Docs = {
   render: args => ({
     components: {
-      AntTooltip: _AntTooltip.default
+      AntTooltip: _AntTooltip.default,
+      AntButton: _AntButton.default
     },
     setup() {
+      const scrollContainer = (0, _vue.ref)(void 0);
+      (0, _vue.onMounted)(() => {
+        if (scrollContainer.value) {
+          scrollContainer.value.scrollLeft = (scrollContainer.value.scrollWidth - scrollContainer.value.clientWidth) / 2;
+          scrollContainer.value.scrollTop = (scrollContainer.value.scrollHeight - scrollContainer.value.clientHeight) / 2;
+        }
+      });
       return {
-        args
+        args,
+        scrollContainer
       };
     },
     template: `
-			<div class="p-32 flex justify-center items-center">
-				<AntTooltip v-bind="args">
-					<template #content>Lorem ipsum dolor sit <br/>amet</template>
-					<template #default>
-						<div class="box">Hover me</div>
-					</template>
-				</AntTooltip>
-			</div>
-		`
+      <div ref="scrollContainer" class="dashed  h-[50vh] w-[50vw] overflow-scroll">
+        <div class="flex flex-grow justify-center items-center h-screen w-[1000px]">
+          <AntTooltip v-bind="args">
+            <AntButton>Hover me</AntButton>
+
+            <template #content>
+              <div>
+                Tooltip content
+              </div>
+            </template>
+          </AntTooltip>
+        </div>
+      </div>
+    `
   }),
   play: async ({
     canvasElement,
@@ -63,7 +70,7 @@ const Docs = exports.Docs = {
     const canvas = (0, _test.within)(canvasElement);
     const target = canvas.getByText("Hover me");
     function queryTooltip() {
-      return canvas.queryByText("Lorem ipsum dolor sit amet");
+      return canvasElement.parentElement?.querySelector('[data-e2e="tooltip-content"]');
     }
     await step("Hover over the target and expect showing the tooltip", async () => {
       await _test.userEvent.hover(target);
@@ -73,7 +80,7 @@ const Docs = exports.Docs = {
     });
     await step("Leave hover state and expect not showing the tooltip anymore", async () => {
       await _test.userEvent.unhover(target);
-      (0, _test.expect)(queryTooltip()).not.toBeInTheDocument();
+      await (0, _test.expect)(queryTooltip()).not.toBeInTheDocument();
     });
     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);
@@ -81,7 +88,7 @@ const Docs = exports.Docs = {
         timeout: 600
       });
       await _test.userEvent.click(target);
-      (0, _test.expect)(queryTooltip()).not.toBeInTheDocument();
+      await (0, _test.expect)(queryTooltip()).not.toBeInTheDocument();
     });
     await step("Hover over the target, click it while delay and expect not showing the tooltip", async () => {
       await _test.userEvent.hover(target);
@@ -89,195 +96,8 @@ const Docs = exports.Docs = {
         timeout: 200
       });
       await _test.userEvent.click(target);
-      (0, _test.expect)(queryTooltip()).not.toBeInTheDocument();
-    });
-  },
-  args: {
-    delay: 600,
-    position: _Position.Position.top
-  }
-};
-const WithoutContent = exports.WithoutContent = {
-  render: args => ({
-    components: {
-      AntTooltip: _AntTooltip.default
-    },
-    setup() {
-      return {
-        args
-      };
-    },
-    template: `
-			<div class="p-32 flex justify-center items-center">
-				<AntTooltip v-bind="args">
-					<div class="box">Hover me</div>
-
-					<template #content></template>
-				</AntTooltip>
-			</div>
-		`
-  }),
-  play: async ({
-    canvasElement,
-    step
-  }) => {
-    const canvas = (0, _test.within)(canvasElement);
-    await step("Hover over the target and expect not showing the tooltip", async () => {
-      await _test.userEvent.hover(canvas.getByText("Hover me"));
-      await (0, _test.waitFor)(() => (0, _test.expect)(canvas.queryByText("Lorem ipsum dolor sit amet")).not.toBeInTheDocument());
+      await (0, _test.expect)(queryTooltip()).not.toBeInTheDocument();
     });
   },
   args: {}
-};
-const Multiple = exports.Multiple = {
-  render: args => ({
-    components: {
-      AntTooltip: _AntTooltip.default
-    },
-    setup() {
-      return {
-        args
-      };
-    },
-    template: `
-      <div class="p-12 flex flex-col justify-center items-center gap-1">
-        <div class="flex gap-1">
-          <div
-            v-for="row in 5"
-            class="flex flex-col gap-1"
-          >
-            <AntTooltip v-for="item of 5">
-              <div class="box">Hover me</div>
-
-              <template #content>Lorem</template>
-            </AntTooltip>
-          </div>
-        </div>
-      </div>
-		`
-  })
-};
-const Summary = exports.Summary = {
-  render: args => ({
-    components: {
-      AntTooltip: _AntTooltip.default,
-      AntFormGroup: _AntFormGroup.default,
-      AntFormGroupLabel: _AntFormGroupLabel.default
-    },
-    setup() {
-      return {
-        args,
-        Position: _Position.Position,
-        InputState: _enums.InputState
-      };
-    },
-    template: `
-			<AntFormGroup>
-				<AntFormGroupLabel>Position</AntFormGroupLabel>
-				<AntFormGroup direction="row" class="gap-x-32 py-16 dashed">
-					<AntTooltip :position="Position.top">
-						<div class="box">Hover me</div>
-
-						<template #content>Lorem</template>
-					</AntTooltip>
-
-					<AntTooltip :position="Position.right">
-						<div class="box">Hover me</div>
-
-						<template #content>Lorem</template>
-					</AntTooltip>
-
-					<AntTooltip :position="Position.bottom">
-						<div class="box">Hover me</div>
-
-						<template #content>Lorem</template>
-					</AntTooltip>
-
-					<AntTooltip :position="Position.left">
-						<div class="box">Hover me</div>
-
-						<template #content>Lorem</template>
-					</AntTooltip>
-				</AntFormGroup>
-
-				<AntFormGroupLabel>Color type</AntFormGroupLabel>
-				<AntFormGroup direction="row" class="pb-16 dashed">
-					<AntTooltip :position="Position.bottom" :state="InputState.base">
-						<div class="box">Hover me</div>
-
-						<template #content>Lorem</template>
-					</AntTooltip>
-
-					<AntTooltip :position="Position.bottom" :state="InputState.info">
-						<div class="box">Hover me</div>
-
-						<template #content>Lorem</template>
-					</AntTooltip>
-
-					<AntTooltip :position="Position.bottom" :state="InputState.success">
-						<div class="box">Hover me</div>
-
-						<template #content>Lorem</template>
-					</AntTooltip>
-
-					<AntTooltip :position="Position.bottom" :state="InputState.warning">
-						<div class="box">Hover me</div>
-
-						<template #content>Lorem</template>
-					</AntTooltip>
-
-					<AntTooltip :position="Position.bottom" :state="InputState.danger">
-						<div class="box">Hover me</div>
-
-						<template #content>Lorem</template>
-					</AntTooltip>
-				</AntFormGroup>
-
-				<AntFormGroupLabel>Expanded</AntFormGroupLabel>
-				<AntFormGroup class="p-32 dashed gap-y-16">
-					<AntTooltip :position="Position.top" expanded>
-						<div class="box">Hover me</div>
-
-						<template #content>Lorem</template>
-					</AntTooltip>
-
-					<AntTooltip :position="Position.right" expanded>
-						<div class="box">Hover me</div>
-
-						<template #content>Lorem</template>
-					</AntTooltip>
-
-					<AntTooltip :position="Position.bottom" expanded>
-						<div class="box">Hover me</div>
-
-						<template #content>Lorem</template>
-					</AntTooltip>
-
-					<AntTooltip :position="Position.left" expanded>
-						<div class="box">Hover me</div>
-
-						<template #content>Lorem</template>
-					</AntTooltip>
-				</AntFormGroup>
-			</AntFormGroup>
-		`
-  }),
-  parameters: {
-    chromatic: {
-      disableSnapshot: false
-    }
-  },
-  play: async ({
-    canvasElement,
-    step
-  }) => {
-    const canvas = (0, _test.within)(canvasElement);
-    await step("Hover over the targets and expect showing the tooltips", async () => {
-      const targets = canvas.getAllByText("Hover me");
-      await Promise.all(targets.map(async target => {
-        await _test.userEvent.hover(target);
-      }));
-      await (0, _test.waitFor)(() => (0, _test.expect)(canvas.queryAllByText("Lorem")).toHaveLength(targets.length));
-    });
-  }
 };

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

@@ -1,8 +1,7 @@
 import AntTooltip from "../AntTooltip.vue";
-import AntFormGroup from "../forms/AntFormGroup.vue";
-import AntFormGroupLabel from "../forms/AntFormGroupLabel.vue";
-import { Position } from "../../enums/Position.enum.mjs";
 import { InputState } from "../../enums/index.mjs";
+import AntButton from "../buttons/AntButton.vue";
+import { onMounted, ref } from "vue";
 import { expect, userEvent, waitFor, within } from "@storybook/test";
 const meta = {
   title: "Components/Tooltip",
@@ -11,10 +10,6 @@ const meta = {
     controls: { sort: "requiredFirst" }
   },
   argTypes: {
-    position: {
-      control: { type: "select" },
-      options: Object.values(Position)
-    },
     state: {
       control: { type: "select" },
       options: Object.values(InputState)
@@ -24,26 +19,38 @@ const meta = {
 export default meta;
 export const Docs = {
   render: (args) => ({
-    components: { AntTooltip },
+    components: { AntTooltip, AntButton },
     setup() {
-      return { args };
+      const scrollContainer = ref(void 0);
+      onMounted(() => {
+        if (scrollContainer.value) {
+          scrollContainer.value.scrollLeft = (scrollContainer.value.scrollWidth - scrollContainer.value.clientWidth) / 2;
+          scrollContainer.value.scrollTop = (scrollContainer.value.scrollHeight - scrollContainer.value.clientHeight) / 2;
+        }
+      });
+      return { args, scrollContainer };
     },
     template: `
-			<div class="p-32 flex justify-center items-center">
-				<AntTooltip v-bind="args">
-					<template #content>Lorem ipsum dolor sit <br/>amet</template>
-					<template #default>
-						<div class="box">Hover me</div>
-					</template>
-				</AntTooltip>
-			</div>
-		`
+      <div ref="scrollContainer" class="dashed  h-[50vh] w-[50vw] overflow-scroll">
+        <div class="flex flex-grow justify-center items-center h-screen w-[1000px]">
+          <AntTooltip v-bind="args">
+            <AntButton>Hover me</AntButton>
+
+            <template #content>
+              <div>
+                Tooltip content
+              </div>
+            </template>
+          </AntTooltip>
+        </div>
+      </div>
+    `
   }),
   play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
     const target = canvas.getByText("Hover me");
     function queryTooltip() {
-      return canvas.queryByText("Lorem ipsum dolor sit amet");
+      return canvasElement.parentElement?.querySelector('[data-e2e="tooltip-content"]');
     }
     await step("Hover over the target and expect showing the tooltip", async () => {
       await userEvent.hover(target);
@@ -51,191 +58,20 @@ export const Docs = {
     });
     await step("Leave hover state and expect not showing the tooltip anymore", async () => {
       await userEvent.unhover(target);
-      expect(queryTooltip()).not.toBeInTheDocument();
+      await expect(queryTooltip()).not.toBeInTheDocument();
     });
     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);
       await waitFor(() => expect(queryTooltip()).toBeInTheDocument(), { timeout: 600 });
       await userEvent.click(target);
-      expect(queryTooltip()).not.toBeInTheDocument();
+      await expect(queryTooltip()).not.toBeInTheDocument();
     });
     await step("Hover over the target, click it while delay and expect not showing the tooltip", async () => {
       await userEvent.hover(target);
       await waitFor(() => expect(queryTooltip()).not.toBeInTheDocument(), { timeout: 200 });
       await userEvent.click(target);
-      expect(queryTooltip()).not.toBeInTheDocument();
-    });
-  },
-  args: {
-    delay: 600,
-    position: Position.top
-  }
-};
-export const WithoutContent = {
-  render: (args) => ({
-    components: { AntTooltip },
-    setup() {
-      return { args };
-    },
-    template: `
-			<div class="p-32 flex justify-center items-center">
-				<AntTooltip v-bind="args">
-					<div class="box">Hover me</div>
-
-					<template #content></template>
-				</AntTooltip>
-			</div>
-		`
-  }),
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-    await step("Hover over the target and expect not showing the tooltip", async () => {
-      await userEvent.hover(canvas.getByText("Hover me"));
-      await waitFor(() => expect(
-        canvas.queryByText(
-          "Lorem ipsum dolor sit amet"
-        )
-      ).not.toBeInTheDocument());
+      await expect(queryTooltip()).not.toBeInTheDocument();
     });
   },
   args: {}
 };
-export const Multiple = {
-  render: (args) => ({
-    components: { AntTooltip },
-    setup() {
-      return { args };
-    },
-    template: `
-      <div class="p-12 flex flex-col justify-center items-center gap-1">
-        <div class="flex gap-1">
-          <div
-            v-for="row in 5"
-            class="flex flex-col gap-1"
-          >
-            <AntTooltip v-for="item of 5">
-              <div class="box">Hover me</div>
-
-              <template #content>Lorem</template>
-            </AntTooltip>
-          </div>
-        </div>
-      </div>
-		`
-  })
-};
-export const Summary = {
-  render: (args) => ({
-    components: {
-      AntTooltip,
-      AntFormGroup,
-      AntFormGroupLabel
-    },
-    setup() {
-      return { args, Position, InputState };
-    },
-    template: `
-			<AntFormGroup>
-				<AntFormGroupLabel>Position</AntFormGroupLabel>
-				<AntFormGroup direction="row" class="gap-x-32 py-16 dashed">
-					<AntTooltip :position="Position.top">
-						<div class="box">Hover me</div>
-
-						<template #content>Lorem</template>
-					</AntTooltip>
-
-					<AntTooltip :position="Position.right">
-						<div class="box">Hover me</div>
-
-						<template #content>Lorem</template>
-					</AntTooltip>
-
-					<AntTooltip :position="Position.bottom">
-						<div class="box">Hover me</div>
-
-						<template #content>Lorem</template>
-					</AntTooltip>
-
-					<AntTooltip :position="Position.left">
-						<div class="box">Hover me</div>
-
-						<template #content>Lorem</template>
-					</AntTooltip>
-				</AntFormGroup>
-
-				<AntFormGroupLabel>Color type</AntFormGroupLabel>
-				<AntFormGroup direction="row" class="pb-16 dashed">
-					<AntTooltip :position="Position.bottom" :state="InputState.base">
-						<div class="box">Hover me</div>
-
-						<template #content>Lorem</template>
-					</AntTooltip>
-
-					<AntTooltip :position="Position.bottom" :state="InputState.info">
-						<div class="box">Hover me</div>
-
-						<template #content>Lorem</template>
-					</AntTooltip>
-
-					<AntTooltip :position="Position.bottom" :state="InputState.success">
-						<div class="box">Hover me</div>
-
-						<template #content>Lorem</template>
-					</AntTooltip>
-
-					<AntTooltip :position="Position.bottom" :state="InputState.warning">
-						<div class="box">Hover me</div>
-
-						<template #content>Lorem</template>
-					</AntTooltip>
-
-					<AntTooltip :position="Position.bottom" :state="InputState.danger">
-						<div class="box">Hover me</div>
-
-						<template #content>Lorem</template>
-					</AntTooltip>
-				</AntFormGroup>
-
-				<AntFormGroupLabel>Expanded</AntFormGroupLabel>
-				<AntFormGroup class="p-32 dashed gap-y-16">
-					<AntTooltip :position="Position.top" expanded>
-						<div class="box">Hover me</div>
-
-						<template #content>Lorem</template>
-					</AntTooltip>
-
-					<AntTooltip :position="Position.right" expanded>
-						<div class="box">Hover me</div>
-
-						<template #content>Lorem</template>
-					</AntTooltip>
-
-					<AntTooltip :position="Position.bottom" expanded>
-						<div class="box">Hover me</div>
-
-						<template #content>Lorem</template>
-					</AntTooltip>
-
-					<AntTooltip :position="Position.left" expanded>
-						<div class="box">Hover me</div>
-
-						<template #content>Lorem</template>
-					</AntTooltip>
-				</AntFormGroup>
-			</AntFormGroup>
-		`
-  }),
-  parameters: {
-    chromatic: { disableSnapshot: false }
-  },
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-    await step("Hover over the targets and expect showing the tooltips", async () => {
-      const targets = canvas.getAllByText("Hover me");
-      await Promise.all(targets.map(async (target) => {
-        await userEvent.hover(target);
-      }));
-      await waitFor(() => expect(canvas.queryAllByText("Lorem")).toHaveLength(targets.length));
-    });
-  }
-};

package/dist/components/__types/AntKeycap.types.d.ts

@@ -1,4 +1,5 @@
 export declare enum AntKeycapSize {
+    md = "md",
     sm = "sm",
     xs = "xs"
 }

package/dist/components/__types/AntKeycap.types.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.AntKeycapSize = void 0;
 var AntKeycapSize = exports.AntKeycapSize = /* @__PURE__ */(AntKeycapSize2 => {
+  AntKeycapSize2["md"] = "md";
   AntKeycapSize2["sm"] = "sm";
   AntKeycapSize2["xs"] = "xs";
   return AntKeycapSize2;

package/dist/components/__types/AntKeycap.types.mjs

@@ -1,4 +1,5 @@
 export var AntKeycapSize = /* @__PURE__ */ ((AntKeycapSize2) => {
+  AntKeycapSize2["md"] = "md";
   AntKeycapSize2["sm"] = "sm";
   AntKeycapSize2["xs"] = "xs";
   return AntKeycapSize2;

package/dist/components/buttons/AntButton.vue

@@ -196,58 +196,55 @@ onMounted(() => {
     />
 
     <AntTooltip
-      :expanded="expanded"
-      :position="tooltipPosition"
+      class="w-full"
       :state="tooltipState"
       :delay="tooltipDelay"
     >
-      <template #default>
-        <component
-          :is="is"
-          :class="classes"
-          :type="type"
-          :to="to"
-          :disabled="disabled || undefined"
-          :tabindex="noFocus || hasInputState ? '-1' : '0'"
-          @click="() => !props.readonly ? $emit('click') : null"
-          @blur="() => !props.readonly ? $emit('blur') : null"
+      <component
+        :is="is"
+        :class="classes"
+        :type="type"
+        :to="to"
+        :disabled="disabled || undefined"
+        :tabindex="noFocus || hasInputState ? '-1' : '0'"
+        @click="() => !props.readonly ? $emit('click') : null"
+        @blur="() => !props.readonly ? $emit('blur') : null"
+      >
+        <AntSpinner
+          v-if="spinner"
+          :size="size"
+          :state="state"
+          :inverted="!filled"
+        />
+
+        <slot
+          v-if="!spinner"
+          name="icon-left"
         >
-          <AntSpinner
-            v-if="spinner"
-            :size="size"
-            :state="state"
-            :inverted="!filled"
+          <AntIcon
+            v-if="iconLeft"
+            :icon="iconLeft"
+            :size="getIconSize"
+            :color="iconColor"
           />
+        </slot>
 
-          <slot
-            v-if="!spinner"
-            name="icon-left"
-          >
-            <AntIcon
-              v-if="iconLeft"
-              :icon="iconLeft"
-              :size="getIconSize"
-              :color="iconColor"
-            />
-          </slot>
+        <slot
+          v-if="!spinner"
+        />
 
-          <slot
-            v-if="!spinner"
+        <slot
+          v-if="!spinner"
+          name="icon-right"
+        >
+          <AntIcon
+            v-if="iconRight"
+            :icon="iconRight"
+            :size="getIconSize"
+            :color="iconColor"
           />
-
-          <slot
-            v-if="!spinner"
-            name="icon-right"
-          >
-            <AntIcon
-              v-if="iconRight"
-              :icon="iconRight"
-              :size="getIconSize"
-              :color="iconColor"
-            />
-          </slot>
-        </component>
-      </template>
+        </slot>
+      </component>
 
       <template #content>
         <slot name="tooltip-content"/>