@antify/ui 2.0.0 → 2.1.0

package/dist/components/AntTooltip.vue

@@ -9,10 +9,12 @@ const props = withDefaults(defineProps<{
   state?: InputState,
   delay?: number,
   tooltipClasses?: string | Record<string, boolean>
+  disabled?: boolean;
 }>(), {
   state: InputState.base,
   delay: 600,
   tooltipClasses: '',
+  disabled: false,
 });
 
 const floatOpen = ref<boolean>(false)
@@ -157,7 +159,7 @@ function onClick() {
 
     <teleport to="body">
       <div
-        v-if="floatOpen && hasSlotContent($slots.content)"
+        v-if="floatOpen && hasSlotContent($slots.content) && !disabled"
         :class="_tooltipClasses"
         ref="floating"
         :style="{

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

@@ -4,3 +4,4 @@ declare const meta: Meta<typeof AntTooltip>;
 export default meta;
 type Story = StoryObj<typeof AntTooltip>;
 export declare const Docs: Story;
+export declare const disabled: Story;

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-module.exports = exports.Docs = void 0;
+exports.disabled = exports.default = exports.Docs = void 0;
 var _AntTooltip = _interopRequireDefault(require("../AntTooltip.vue"));
 var _enums = require("../../enums");
 var _AntButton = _interopRequireDefault(require("../buttons/AntButton.vue"));
@@ -102,4 +102,11 @@ const Docs = exports.Docs = {
     });
   },
   args: {}
+};
+const disabled = exports.disabled = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    disabled: true
+  }
 };

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

@@ -75,3 +75,10 @@ export const Docs = {
   },
   args: {}
 };
+export const disabled = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    disabled: true
+  }
+};

package/dist/components/crud/AntCrudTableFilter.vue

@@ -81,27 +81,25 @@ watch(() => props.fullWidth, (val) => {
         v-model:show-dropdown="showDropdown"
         :position="Position.left"
       >
-        <template #reference>
-          <div class="flex">
-            <AntButton
-              :state="hasFilter ? State.info : State.base"
-              :grouped="hasFilter ? Grouped.left : Grouped.none"
-              :skeleton="skeleton"
-              :icon-left="faFilter"
-              @click="() => showDropdown = !showDropdown"
-            />
+        <div class="flex">
+          <AntButton
+            :state="hasFilter ? State.info : State.base"
+            :grouped="hasFilter ? Grouped.left : Grouped.none"
+            :skeleton="skeleton"
+            :icon-left="faFilter"
+            @click="() => showDropdown = !showDropdown"
+          />
 
-            <AntButton
-              v-if="hasFilter"
-              :state="State.info"
-              :grouped="Grouped.right"
-              :skeleton="skeleton"
-              :icon-left="faMultiply"
-              filled
-              @click="$emit('removeFilter')"
-            />
-          </div>
-        </template>
+          <AntButton
+            v-if="hasFilter"
+            :state="State.info"
+            :grouped="Grouped.right"
+            :skeleton="skeleton"
+            :icon-left="faMultiply"
+            filled
+            @click="$emit('removeFilter')"
+          />
+        </div>
 
         <template #content>
           <slot name="dropdownContent"/>

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

@@ -12,7 +12,6 @@ import type {SelectOption} from '../__types';
 import {useElementSize, useVModel, onClickOutside} from '@vueuse/core';
 import type {Validator} from '@antify/validate';
 import {autoUpdate, flip, offset, useFloating} from "@floating-ui/vue";
-import {vOnClickOutside} from '@vueuse/components';
 
 const emit = defineEmits(['update:open', 'update:modelValue', 'update:focused', 'selectElement']);
 const props = withDefaults(defineProps<{
@@ -35,7 +34,7 @@ const props = withDefaults(defineProps<{
   closeOnSelectItem: true,
 });
 const reference = ref<HTMLElement | null | undefined>(props.inputRef)
-const width = useElementSize(reference);
+const elementSize = useElementSize(reference);
 const floating = ref<HTMLElement | null>(null)
 const {floatingStyles, middlewareData, placement} = useFloating(reference, floating, {
   placement: 'bottom',
@@ -69,7 +68,7 @@ const dropdownClasses = computed(() => {
   };
 
   return {
-    'w-full border flex flex-col gap-px outline-none -mt-px overflow-hidden shadow-md z-[90]': true,
+    'w-full border flex flex-col gap-px outline-none -mt-px overflow-y-auto shadow-md z-[90] max-h-[250px]': true,
     'rounded-md': true,
     [variants[props.state]]: true,
   };
@@ -84,7 +83,7 @@ const dropDownItemClasses = computed(() => {
   };
 
   return {
-    'select-none text-ellipsis overflow-hidden whitespace-nowrap': true,
+    'select-none text-ellipsis overflow-hidden whitespace-nowrap min-h-fit': true,
     [variants[props.state]]: true,
     // Size
     'p-1 text-xs': props.size === Size.xs2,
@@ -203,31 +202,31 @@ watch(_modelValue, (val) => {
     <slot/>
 
     <teleport to="body">
-      <div
-        v-if="isOpen"
-        :class="dropdownClasses"
-        ref="floating"
-        :style="{width: `${width.width.value}px!important`, ...floatingStyles}"
-      >
         <div
-          v-for="(option, index) in options"
-          :key="`option-${index}`"
-          :class="{...dropDownItemClasses, ...getActiveDropDownItemClasses(option)}"
-          @mousedown="(e) => onClickDropDownItem(e, option.value)"
-          @mouseover="() => focusedDropDownItem = option.value"
+          v-if="isOpen"
+          :class="dropdownClasses"
+          ref="floating"
+          :style="{width: `${elementSize.width.value}px!important`, ...floatingStyles}"
         >
-          {{ option.label }}
+          <div
+            v-for="(option, index) in options"
+            :key="`option-${index}`"
+            :class="{...dropDownItemClasses, ...getActiveDropDownItemClasses(option)}"
+            @mousedown="(e) => onClickDropDownItem(e, option.value)"
+            @mouseover="() => focusedDropDownItem = option.value"
+          >
+            {{ option.label }}
+          </div>
+
+          <div
+            v-if="options.length === 0"
+            :class="{...dropDownItemClasses}"
+          >
+            <slot name="empty">
+              No options available
+            </slot>
+          </div>
         </div>
-
-        <div
-          v-if="options.length === 0"
-          :class="{...dropDownItemClasses}"
-        >
-          <slot name="empty">
-            No options available
-          </slot>
-        </div>
-      </div>
     </teleport>
   </div>
 </template>

package/dist/components/inputs/__stories/AntSelect.stories.d.ts

@@ -4,6 +4,7 @@ declare const meta: Meta<typeof AntSelect>;
 export default meta;
 type Story = StoryObj<typeof AntSelect>;
 export declare const Docs: Story;
+export declare const manyOptions: Story;
 export declare const nullable: Story;
 export declare const skeleton: Story;
 export declare const disabled: Story;

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.withPlaceholder = exports.summary = exports.skeleton = exports.nullable = exports.ellipsisText = exports.disabled = exports.default = exports.Docs = void 0;
+exports.withPlaceholder = exports.summary = exports.skeleton = exports.nullable = exports.manyOptions = exports.ellipsisText = exports.disabled = exports.default = exports.Docs = void 0;
 var _Size = require("../../../enums/Size.enum");
 var _AntSelect = _interopRequireDefault(require("../AntSelect.vue"));
 var _AntSelectMenu = _interopRequireDefault(require("../Elements/AntSelectMenu.vue"));
@@ -75,6 +75,10 @@ const options = [{
   label: "Option 4",
   value: "4"
 }];
+const manySelectOptions = [...Array(24).keys()].map(key => ({
+  label: `Option ${Number(key) + 1}`,
+  value: Number(key) + 1
+}));
 const Docs = exports.Docs = {
   render: args => ({
     components: {
@@ -115,6 +119,13 @@ const Docs = exports.Docs = {
     description: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
   }
 };
+const manyOptions = exports.manyOptions = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    options: manySelectOptions
+  }
+};
 const nullable = exports.nullable = {
   render: Docs.render,
   args: {
@@ -185,7 +196,8 @@ const summary = exports.summary = {
     },
     setup() {
       return {
-        args
+        args,
+        manySelectOptions
       };
     },
     template: `

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

@@ -53,6 +53,10 @@ const options = [
     value: "4"
   }
 ];
+const manySelectOptions = [...Array(24).keys()].map((key) => ({
+  label: `Option ${Number(key) + 1}`,
+  value: Number(key) + 1
+}));
 export const Docs = {
   render: (args) => ({
     components: { AntSelect, AntDropdown },
@@ -86,6 +90,13 @@ export const Docs = {
     description: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
   }
 };
+export const manyOptions = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    options: manySelectOptions
+  }
+};
 export const nullable = {
   render: Docs.render,
   args: {
@@ -151,7 +162,7 @@ export const summary = {
   render: (args) => ({
     components: { AntSelect },
     setup() {
-      return { args };
+      return { args, manySelectOptions };
     },
     template: `
       <div class="p-4 flex flex-col gap-2.5">

package/dist/components/table/AntTable.vue

@@ -29,13 +29,15 @@ const props = withDefaults(
     showLightVersion?: boolean;
     size?: AntTableSize;
     headerColor?: string;
+    emptyStateText?: string;
   }>(), {
     rowKey: 'id',
     loading: false,
     selectableRows: false,
     showLightVersion: false,
     size: AntTableSize.md,
-    headerColor: 'bg-base-200'
+    headerColor: 'bg-base-200',
+    emptyStateText: 'We couldn\'t find any entry',
   });
 
 const selected: Ref<Record<string, unknown> | undefined> = useVModel(props, 'selectedRow', emits);
@@ -188,7 +190,7 @@ function rowClick(elem: Record<string, unknown>): void {
           >
             <slot name="emptyState">
               <div class="flex items-center flex-col">
-                <span class="font-semibold">We couldn't find any entry</span>
+                <span class="font-semibold">{{ emptyStateText }}</span>
               </div>
             </slot>
           </td>

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

@@ -205,7 +205,43 @@ const Docs = exports.Docs = {
   }
 };
 const Empty = exports.Empty = {
-  render: Docs.render,
+  render: args => ({
+    components: {
+      AntTable: _AntTable.default,
+      AntSwitch: _AntSwitch.default
+    },
+    setup() {
+      const selected = (0, _vue.ref)();
+      return {
+        args,
+        selected
+      };
+    },
+    template: `
+      <div class="flex flex-col gap-2">
+        <div class="h-96 border border-dashed border-base-300">
+          <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 v-model="entry.employeed"/>
+              </div>
+            </template>
+          </AntTable>
+          </div>
+
+          <div class="h-96 border border-dashed border-base-300">
+            <AntTable v-bind="args" v-model="selected" :selected-row="selected" @row-click="(val) => selected = val" empty-state-text="Custom Empty State Text">
+              <template #cellContent="{element: entry, header}">
+                <div v-if="header.identifier === 'employeed'">
+                  <AntSwitch v-model="entry.employeed"/>
+                </div>
+              </template>
+            </AntTable>
+          </div>
+        </div>
+      </div>
+    `
+  }),
   args: {
     headers: [{
       title: "Name",

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

@@ -154,7 +154,37 @@ export const Docs = {
   }
 };
 export const Empty = {
-  render: Docs.render,
+  render: (args) => ({
+    components: { AntTable, AntSwitch },
+    setup() {
+      const selected = ref();
+      return { args, selected };
+    },
+    template: `
+      <div class="flex flex-col gap-2">
+        <div class="h-96 border border-dashed border-base-300">
+          <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 v-model="entry.employeed"/>
+              </div>
+            </template>
+          </AntTable>
+          </div>
+
+          <div class="h-96 border border-dashed border-base-300">
+            <AntTable v-bind="args" v-model="selected" :selected-row="selected" @row-click="(val) => selected = val" empty-state-text="Custom Empty State Text">
+              <template #cellContent="{element: entry, header}">
+                <div v-if="header.identifier === 'employeed'">
+                  <AntSwitch v-model="entry.employeed"/>
+                </div>
+              </template>
+            </AntTable>
+          </div>
+        </div>
+      </div>
+    `
+  }),
   args: {
     headers: [
       {

package/package.json

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