@antify/ui 1.0.4 → 1.2.0

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

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 module.exports = exports.Docs = void 0;
 var _AntDropdown = _interopRequireDefault(require("../AntDropdown.vue"));
 var _AntButton = _interopRequireDefault(require("../buttons/AntButton.vue"));
-var _Position = require("../../enums/Position.enum");
+var _AntTextInput = _interopRequireDefault(require("../inputs/AntTextInput.vue"));
 var _vue = require("vue");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const meta = {
@@ -18,12 +18,6 @@ const meta = {
     }
   },
   argTypes: {
-    position: {
-      control: {
-        type: "select"
-      },
-      options: Object.values(_Position.Position)
-    },
     contentPadding: {
       description: "If the content require a paddingless dropdown to expand over the whole size, set this to false"
     }
@@ -34,7 +28,8 @@ const Docs = exports.Docs = {
   render: args => ({
     components: {
       AntDropdown: _AntDropdown.default,
-      AntButton: _AntButton.default
+      AntButton: _AntButton.default,
+      AntTextInput: _AntTextInput.default
     },
     setup() {
       const showDropdown = (0, _vue.computed)({
@@ -45,27 +40,36 @@ const Docs = exports.Docs = {
           args.showDropdown = val;
         }
       });
+      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,
-        showDropdown
+        showDropdown,
+        scrollContainer
       };
     },
     template: `
-          <div class="p-64 flex justify-center items-center">
-            <AntDropdown dropdown-classes="w-64" v-bind="args" v-model:show-dropdown="showDropdown">
-              <template #content>
-                Lorem ipsum dolor sit amet, consetetur sadipscing
-                elitr, sed diam nonumy eirmod tempor invidunt ut
-                labore et dolore magna aliquyam erat, sed diam voluptua.
-              </template>
-              <template #default>
-                <AntButton @click="() => showDropdown = !showDropdown" filled>Click me</AntButton>
-              </template>
-            </AntDropdown>
-          </div>
-        `
+      <div ref="scrollContainer" class="dashed overflow-scroll" :style="{height: '500px', width: '500px'}">
+        <div class="flex justify-center items-center" :style="{height: '1000px', width: '1000px'}">
+          <AntDropdown dropdown-classes="w-64" v-bind="args" v-model:show-dropdown="showDropdown">
+            <AntButton @click="() => showDropdown = !showDropdown" filled>Click me</AntButton>
+
+            <template #content>
+              Lorem ipsum dolor sit amet, consetetur sadipscing
+              elitr, sed diam nonumy eirmod tempor invidunt ut
+              labore et dolore magna aliquyam erat, sed diam voluptua.
+            </template>
+          </AntDropdown>
+        </div>
+      </div>
+    `
   }),
   args: {
-    showDropdown: true
+    showDropdown: false
   }
 };

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

@@ -1,16 +1,12 @@
 import AntDropdown from "../AntDropdown.vue";
 import AntButton from "../buttons/AntButton.vue";
-import { Position } from "../../enums/Position.enum.mjs";
-import { computed } from "vue";
+import AntTextInput from "../inputs/AntTextInput.vue";
+import { computed, onMounted, ref } from "vue";
 const meta = {
   title: "Components/Dropdown",
   component: AntDropdown,
   parameters: { controls: { sort: "requiredFirst" } },
   argTypes: {
-    position: {
-      control: { type: "select" },
-      options: Object.values(Position)
-    },
     contentPadding: {
       description: "If the content require a paddingless dropdown to expand over the whole size, set this to false"
     }
@@ -19,7 +15,7 @@ const meta = {
 export default meta;
 export const Docs = {
   render: (args) => ({
-    components: { AntDropdown, AntButton },
+    components: { AntDropdown, AntButton, AntTextInput },
     setup() {
       const showDropdown = computed({
         get() {
@@ -29,24 +25,32 @@ export const Docs = {
           args.showDropdown = val;
         }
       });
-      return { args, showDropdown };
+      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, showDropdown, scrollContainer };
     },
     template: `
-          <div class="p-64 flex justify-center items-center">
-            <AntDropdown dropdown-classes="w-64" v-bind="args" v-model:show-dropdown="showDropdown">
-              <template #content>
-                Lorem ipsum dolor sit amet, consetetur sadipscing
-                elitr, sed diam nonumy eirmod tempor invidunt ut
-                labore et dolore magna aliquyam erat, sed diam voluptua.
-              </template>
-              <template #default>
-                <AntButton @click="() => showDropdown = !showDropdown" filled>Click me</AntButton>
-              </template>
-            </AntDropdown>
-          </div>
-        `
+      <div ref="scrollContainer" class="dashed overflow-scroll" :style="{height: '500px', width: '500px'}">
+        <div class="flex justify-center items-center" :style="{height: '1000px', width: '1000px'}">
+          <AntDropdown dropdown-classes="w-64" v-bind="args" v-model:show-dropdown="showDropdown">
+            <AntButton @click="() => showDropdown = !showDropdown" filled>Click me</AntButton>
+
+            <template #content>
+              Lorem ipsum dolor sit amet, consetetur sadipscing
+              elitr, sed diam nonumy eirmod tempor invidunt ut
+              labore et dolore magna aliquyam erat, sed diam voluptua.
+            </template>
+          </AntDropdown>
+        </div>
+      </div>
+    `
   }),
   args: {
-    showDropdown: true
+    showDropdown: false
   }
 };

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

@@ -69,28 +69,26 @@ const Summary = exports.Summary = {
   },
   render: args => ({
     components: {
-      AntKeycap: _AntKeycap.default,
-      faChevronUp: _freeSolidSvgIcons.faChevronUp,
-      faChevronDown: _freeSolidSvgIcons.faChevronDown
+      AntKeycap: _AntKeycap.default
     },
     setup() {
       return {
         args,
-        faChevronUp: _freeSolidSvgIcons.faChevronUp,
-        faChevronDown: _freeSolidSvgIcons.faChevronDown
+        AntKeycapSize: _AntKeycap2.AntKeycapSize,
+        faPlus: _freeSolidSvgIcons.faPlus
       };
     },
     template: `
-      <div class="p-4">
-        Press
-        <AntKeycap v-bind="args" :icon="faChevronUp"/>
-        or
-        <AntKeycap v-bind="args" :icon="faChevronDown"/>
-        to navigate. Press
-        <AntKeycap v-bind="args">ctl</AntKeycap>
-        +
-        <AntKeycap v-bind="args">K</AntKeycap>
-        to search.
+      <div class="flex gap-2 p-4">
+        <AntKeycap v-bind="args" :size="AntKeycapSize.xs">K</AntKeycap>
+        <AntKeycap v-bind="args" :size="AntKeycapSize.sm">K</AntKeycap>
+        <AntKeycap v-bind="args" :size="AntKeycapSize.md">K</AntKeycap>
+        <AntKeycap v-bind="args" :size="AntKeycapSize.xs">Strg</AntKeycap>
+        <AntKeycap v-bind="args" :size="AntKeycapSize.sm">Strg</AntKeycap>
+        <AntKeycap v-bind="args" :size="AntKeycapSize.md">Strg</AntKeycap>
+        <AntKeycap v-bind="args" :icon="faPlus" :size="AntKeycapSize.xs"/>
+        <AntKeycap v-bind="args" :icon="faPlus" :size="AntKeycapSize.sm"/>
+        <AntKeycap v-bind="args" :icon="faPlus" :size="AntKeycapSize.md"/>
       </div>
     `
   }),

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

@@ -1,6 +1,6 @@
 import AntKeycap from "../AntKeycap.vue";
 import { AntKeycapSize } from "../__types/AntKeycap.types.mjs";
-import { faChevronUp, faChevronDown } from "@fortawesome/free-solid-svg-icons";
+import { faPlus, faChevronUp } from "@fortawesome/free-solid-svg-icons";
 const meta = {
   title: "Components/Keycap",
   component: AntKeycap,
@@ -47,21 +47,21 @@ export const Summary = {
     chromatic: { disableSnapshot: false }
   },
   render: (args) => ({
-    components: { AntKeycap, faChevronUp, faChevronDown },
+    components: { AntKeycap },
     setup() {
-      return { args, faChevronUp, faChevronDown };
+      return { args, AntKeycapSize, faPlus };
     },
     template: `
-      <div class="p-4">
-        Press
-        <AntKeycap v-bind="args" :icon="faChevronUp"/>
-        or
-        <AntKeycap v-bind="args" :icon="faChevronDown"/>
-        to navigate. Press
-        <AntKeycap v-bind="args">ctl</AntKeycap>
-        +
-        <AntKeycap v-bind="args">K</AntKeycap>
-        to search.
+      <div class="flex gap-2 p-4">
+        <AntKeycap v-bind="args" :size="AntKeycapSize.xs">K</AntKeycap>
+        <AntKeycap v-bind="args" :size="AntKeycapSize.sm">K</AntKeycap>
+        <AntKeycap v-bind="args" :size="AntKeycapSize.md">K</AntKeycap>
+        <AntKeycap v-bind="args" :size="AntKeycapSize.xs">Strg</AntKeycap>
+        <AntKeycap v-bind="args" :size="AntKeycapSize.sm">Strg</AntKeycap>
+        <AntKeycap v-bind="args" :size="AntKeycapSize.md">Strg</AntKeycap>
+        <AntKeycap v-bind="args" :icon="faPlus" :size="AntKeycapSize.xs"/>
+        <AntKeycap v-bind="args" :icon="faPlus" :size="AntKeycapSize.sm"/>
+        <AntKeycap v-bind="args" :icon="faPlus" :size="AntKeycapSize.md"/>
       </div>
     `
   }),

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

@@ -35,7 +35,7 @@ const Docs = exports.Docs = {
       };
     },
     template: `
-          <div class="p-4">
+          <div class="p-4 bg-neutral-100">
             <AntListGroup v-bind="args">
               <AntListGroupItem to="/example" :icon-left="faUser">Profile</AntListGroupItem>
               <AntListGroupItem to="/example" :icon-left="faDownload">Downloads</AntListGroupItem>

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

@@ -15,7 +15,7 @@ export const Docs = {
       return { args, faUser, faDownload, faMessage, faCog };
     },
     template: `
-          <div class="p-4">
+          <div class="p-4 bg-neutral-100">
             <AntListGroup v-bind="args">
               <AntListGroupItem to="/example" :icon-left="faUser">Profile</AntListGroupItem>
               <AntListGroupItem to="/example" :icon-left="faDownload">Downloads</AntListGroupItem>

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

@@ -83,7 +83,8 @@ const Docs = exports.Docs = {
     `
   }),
   args: {
-    title: "Lorem ipsum dolor"
+    title: "Lorem ipsum dolor",
+    open: false
   }
 };
 const Fullscreen = exports.Fullscreen = {

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

@@ -65,7 +65,8 @@ export const Docs = {
     `
   }),
   args: {
-    title: "Lorem ipsum dolor"
+    title: "Lorem ipsum dolor",
+    open: false
   }
 };
 export const Fullscreen = {

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

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 module.exports = exports.Docs = void 0;
 var _AntPopover = _interopRequireDefault(require("../AntPopover.vue"));
 var _AntButton = _interopRequireDefault(require("../buttons/AntButton.vue"));
-var _Position = require("../../enums/Position.enum");
 var _vue = require("vue");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const meta = {
@@ -17,14 +16,7 @@ const meta = {
       sort: "requiredFirst"
     }
   },
-  argTypes: {
-    position: {
-      control: {
-        type: "select"
-      },
-      options: Object.values(_Position.Position)
-    }
-  }
+  argTypes: {}
 };
 module.exports = meta;
 const Docs = exports.Docs = {
@@ -43,25 +35,34 @@ const Docs = exports.Docs = {
           args.showPopover = val;
         }
       });
+      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) / 3;
+        }
+      });
       return {
         args,
         showPopover,
-        dummyText
+        dummyText,
+        scrollContainer
       };
     },
     template: `
-          <div class="p-64 flex justify-center items-center">
-            <AntPopover popover-classes="w-64" v-bind="args">
-              <template #content>{{ dummyText }}</template>
-              <template #default>
-                <AntButton @click="() => showPopover = !showPopover" filled>Click me</AntButton>
-              </template>
-            </AntPopover>
-          </div>
-        `
+      <div ref="scrollContainer" class="dashed overflow-scroll" :style="{height: '500px', width: '500px'}">
+        <div class="flex justify-center items-center" :style="{height: '1000px', width: '1000px'}">
+          <AntPopover popover-classes="w-64" v-bind="args" v-model:show-popover="showPopover">
+            <AntButton @click="() => showPopover = !showPopover" filled>Click me</AntButton>
+
+            <template #content>{{ dummyText }}</template>
+            <template #title>{{ 'Title' }}</template>
+          </AntPopover>
+        </div>
+      </div>
+    `
   }),
   args: {
-    showPopover: true,
-    title: "Title"
+    showPopover: true
   }
 };

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

@@ -1,17 +1,11 @@
 import AntPopover from "../AntPopover.vue";
 import AntButton from "../buttons/AntButton.vue";
-import { Position } from "../../enums/Position.enum.mjs";
-import { computed } from "vue";
+import { computed, onMounted, ref } from "vue";
 const meta = {
   title: "Components/Popover",
   component: AntPopover,
   parameters: { controls: { sort: "requiredFirst" } },
-  argTypes: {
-    position: {
-      control: { type: "select" },
-      options: Object.values(Position)
-    }
-  }
+  argTypes: {}
 };
 export default meta;
 export const Docs = {
@@ -27,21 +21,29 @@ export const Docs = {
           args.showPopover = val;
         }
       });
-      return { args, showPopover, dummyText };
+      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) / 3;
+        }
+      });
+      return { args, showPopover, dummyText, scrollContainer };
     },
     template: `
-          <div class="p-64 flex justify-center items-center">
-            <AntPopover popover-classes="w-64" v-bind="args">
-              <template #content>{{ dummyText }}</template>
-              <template #default>
-                <AntButton @click="() => showPopover = !showPopover" filled>Click me</AntButton>
-              </template>
-            </AntPopover>
-          </div>
-        `
+      <div ref="scrollContainer" class="dashed overflow-scroll" :style="{height: '500px', width: '500px'}">
+        <div class="flex justify-center items-center" :style="{height: '1000px', width: '1000px'}">
+          <AntPopover popover-classes="w-64" v-bind="args" v-model:show-popover="showPopover">
+            <AntButton @click="() => showPopover = !showPopover" filled>Click me</AntButton>
+
+            <template #content>{{ dummyText }}</template>
+            <template #title>{{ 'Title' }}</template>
+          </AntPopover>
+        </div>
+      </div>
+    `
   }),
   args: {
-    showPopover: true,
-    title: "Title"
+    showPopover: true
   }
 };

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

@@ -4,13 +4,3 @@ declare const meta: Meta<typeof AntTooltip>;
 export default meta;
 type Story = StoryObj<typeof AntTooltip>;
 export declare const Docs: Story;
-/**
- * Make sure, no tooltip get shown if no content is provided.
- */
-export declare const WithoutContent: Story;
-/**
- * Test multiple tooltips in one page to make sure that
- * each tooltips delay does not bug with others.
- */
-export declare const Multiple: Story;
-export declare const Summary: Story;