@antify/ui 1.3.0 → 2.1.0

package/dist/components/inputs/AntSwitch.vue

@@ -38,7 +38,7 @@ const buttonClasses = computed(() => {
     'focus-within:ring-2': !hasInputState.value && (props.size === Size.sm || props.size === Size.xs || props.size === Size.xs2),
     'h-5 w-9': props.size === Size.lg || props.size === Size.md || props.size === Size.sm,
     'h-4 w-[30px]': props.size === Size.xs || props.size === Size.xs2,
-    'bg-neutral-300': !_value.value,
+    'bg-base-300': !_value.value,
     'invisible': props.skeleton,
     // Disabled
     'opacity-50 cursor-not-allowed': props.disabled,
@@ -65,7 +65,7 @@ const buttonClasses = computed(() => {
   return classes;
 });
 const ballClasses = computed(() => ({
-  'pointer-events-none inline-block rounded-full bg-neutral-100 shadow transform ring-0 transition ease-in-out duration-200': true,
+  'pointer-events-none inline-block rounded-full bg-base-100 shadow transform ring-0 transition ease-in-out duration-200': true,
   'h-4 w-4 translate-y-0.5': props.size === Size.lg || props.size === Size.md || props.size === Size.sm,
   'translate-x-[1.125rem]': _value.value && (props.size === Size.lg || props.size === Size.md || props.size === Size.sm),
   'translate-x-0.5': !_value.value && (props.size === Size.lg || props.size === Size.md || props.size === Size.sm),

package/dist/components/inputs/AntSwitcher.vue

@@ -72,7 +72,7 @@ const itemClasses = computed(() => {
 
   const colorVariant = {
     [InputState.danger]: 'outline-danger-500 bg-danger-100',
-    [InputState.base]: 'outline-neutral-300 bg-white',
+    [InputState.base]: 'outline-base-300 bg-white',
     [InputState.info]: 'outline-info-500 bg-info-100',
     [InputState.success]: 'outline-success-500 bg-success-100',
     [InputState.warning]: 'outline-warning-500 bg-warning-100',

package/dist/components/inputs/AntTagInput.vue

@@ -64,7 +64,7 @@ const tagInput = ref('');
 const inputRef: Ref<HTMLElement | null> = ref(null);
 const inputContainerClasses = computed(() => {
   const variants: Record<InputState, string> = {
-    [InputState.base]: 'outline-neutral-300 focus-within:outline-neutral-300 focus-within:ring-primary-200 bg-white',
+    [InputState.base]: 'outline-base-300 focus-within:outline-base-300 focus-within:ring-primary-200 bg-white',
     [InputState.danger]: 'outline-danger-500 focus-within:outline-danger-500 focus-within:ring-danger-200 bg-danger-100',
     [InputState.info]: 'outline-info-500 focus-within:outline-info-500 focus-within:ring-info-200 bg-info-100',
     [InputState.success]: 'outline-success-500 focus-within:outline-success-500 focus-within:ring-success-200 bg-success-100',
@@ -93,7 +93,7 @@ const inputContainerClasses = computed(() => {
 });
 const inputClasses = computed(() => {
   const variants: Record<InputState, string> = {
-    [InputState.base]: 'placeholder:text-neutral-500',
+    [InputState.base]: 'placeholder:text-base-500',
     [InputState.danger]: 'placeholder:text-danger-700',
     [InputState.info]: 'placeholder:text-info-700',
     [InputState.success]: 'placeholder:text-success-700',

package/dist/components/inputs/AntTextarea.vue

@@ -62,7 +62,7 @@ const icons = {
 /*TODO #59:: If the scrollbar is showing than the pr is moving and the gap between icon and text is bigger and the icon is stuck in the scrollbar*/
 const inputClasses = computed(() => {
   const variants: Record<InputState, string> = {
-    [InputState.base]: 'outline-neutral-300 focus:ring-primary-200 bg-white placeholder:text-neutral-500',
+    [InputState.base]: 'outline-base-300 focus:ring-primary-200 bg-white placeholder:text-base-500',
     [InputState.danger]: 'outline-danger-500 focus:ring-danger-200 bg-danger-100 placeholder:text-danger-700',
     [InputState.info]: 'outline-info-500 focus:ring-info-200 bg-info-100 placeholder:text-info-700',
     [InputState.success]: 'outline-success-500 focus:ring-success-200 bg-success-100 placeholder:text-success-700',

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

@@ -60,7 +60,7 @@ const icons = {
 };
 const inputClasses = computed(() => {
   const variants: Record<InputState, string> = {
-    [InputState.base]: 'outline-neutral-300 focus:ring-primary-200 bg-white placeholder:text-neutral-500',
+    [InputState.base]: 'outline-base-300 focus:ring-primary-200 bg-white placeholder:text-base-500',
     [InputState.danger]: 'outline-danger-500 focus:ring-danger-200 bg-danger-100 placeholder:text-danger-700',
     [InputState.info]: 'outline-info-500 focus:ring-info-200 bg-info-100 placeholder:text-info-700',
     [InputState.success]: 'outline-success-500 focus:ring-success-200 bg-success-100 placeholder:text-success-700',

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',
@@ -61,7 +60,7 @@ const isOpen = useVModel(props, 'open', emit);
 const focusedDropDownItem = useVModel(props, 'focused', emit);
 const dropdownClasses = computed(() => {
   const variants: Record<InputState, string> = {
-    [InputState.base]: 'bg-neutral-300 border-neutral-300',
+    [InputState.base]: 'bg-base-300 border-base-300',
     [InputState.success]: 'bg-success-500 border-success-500',
     [InputState.info]: 'bg-info-500 border-info-500',
     [InputState.warning]: 'bg-warning-500 border-warning-500',
@@ -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,
@@ -168,7 +167,7 @@ function onKeyDownDropDown(e: KeyboardEvent) {
 
 function getActiveDropDownItemClasses(option: SelectOption) {
   const variants: Record<InputState, string> = {
-    [InputState.base]: '!bg-neutral-100',
+    [InputState.base]: '!bg-base-100',
     [InputState.success]: 'bg-success-200',
     [InputState.info]: 'bg-info-200',
     [InputState.warning]: 'bg-warning-200',
@@ -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/layouts/AntNavLeftLayout.vue

@@ -13,8 +13,8 @@ const hasLogoImageSlot = computed(() => useSlots()['logo-image'] || false);
 </script>
 
 <template>
-  <div class="flex gap-px bg-neutral-300 h-screen min-w-full overflow-y-hidden">
-    <div class="flex flex-col gap-px bg-neutral-300 w-52 shrink-0">
+  <div class="flex gap-px bg-base-300 h-screen min-w-full overflow-y-hidden">
+    <div class="flex flex-col gap-px bg-base-300 w-52 shrink-0">
       <component
         :is="logoRoute ? 'RouterLink' : 'div'"
         v-if="hasLogoImageSlot"

package/dist/components/layouts/__stories/AntNavLeftLayout.stories.js

@@ -16,7 +16,7 @@ const meta = {
     }
   },
   decorators: [() => ({
-    template: '<div class="border border-dashed border-neutral-300"><story/></div>'
+    template: '<div class="border border-dashed border-base-300"><story/></div>'
   })],
   argTypes: {}
 };

package/dist/components/layouts/__stories/AntNavLeftLayout.stories.mjs

@@ -4,7 +4,7 @@ const meta = {
   title: "Layouts/NavLeftLayout",
   component: AntNavLeftLayout,
   parameters: { controls: { sort: "requiredFirst" } },
-  decorators: [() => ({ template: '<div class="border border-dashed border-neutral-300"><story/></div>' })],
+  decorators: [() => ({ template: '<div class="border border-dashed border-base-300"><story/></div>' })],
   argTypes: {}
 };
 export default meta;

package/dist/components/navbar/AntNavbarItem.vue

@@ -11,7 +11,7 @@ const props = defineProps<{
 
 const itemClasses = computed(() => ({
   'w-full text-sm p-1.5 rounded-md cursor-pointer flex items-center flex-nowrap gap-1': true,
-  'transition-colors hover:bg-neutral-100': true,
+  'transition-colors hover:bg-base-100': true,
   'text-primary-500': props.navbarItem.active
 }));
 

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-neutral-200'
+    headerColor: 'bg-base-200',
+    emptyStateText: 'We couldn\'t find any entry',
   });
 
 const selected: Ref<Record<string, unknown> | undefined> = useVModel(props, 'selectedRow', emits);
@@ -132,9 +134,9 @@ function rowClick(elem: Record<string, unknown>): void {
           :class="{
               '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,
+              'bg-base-100 text-base-100-font': elem !== selected && rowIndex % 2 !== 0,
               'cursor-pointer': selectableRows,
-              'hover:bg-neutral-200': selectableRows && elem !== selected,
+              'hover:bg-base-200': selectableRows && elem !== selected,
             }"
         >
           <slot
@@ -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>
@@ -199,7 +201,7 @@ function rowClick(elem: Record<string, unknown>): void {
 
     <div
       v-if="data.length > 0 && _loading"
-      class="absolute bg-opacity-50 w-full top-0 bottom-0 bg-neutral-300 flex items-center justify-center"
+      class="absolute bg-opacity-50 w-full top-0 bottom-0 bg-base-300 flex items-center justify-center"
     >
       <AntSpinner
         class="!w-24 !h-24"
@@ -209,7 +211,7 @@ function rowClick(elem: Record<string, unknown>): void {
 
     <div
       v-if="!data || data.length <= 0 && _loading"
-      class="absolute bg-opacity-50 w-full top-[40px] bottom-0 bg-neutral-300 flex items-center justify-center"
+      class="absolute bg-opacity-50 w-full top-[40px] bottom-0 bg-base-300 flex items-center justify-center"
     >
       <AntSkeleton
         v-model="_loading"

package/dist/components/table/AntTh.vue

@@ -16,7 +16,7 @@ const props = withDefaults(
 
 const headerClasses = computed(() => ({
   [props.header.headerClassList || '']: true,
-  'text-sm text-neutral-200-font uppercase font-semi-bold': true,
+  'text-sm text-base-200-font uppercase font-semi-bold': true,
   'text-left': !props.header.align || props.header.align === AntTableAlign.left,
   'text-center': props.header.align === AntTableAlign.center,
   'text-right': props.header.align === AntTableAlign.right,

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

@@ -166,7 +166,7 @@ const Docs = exports.Docs = {
       };
     },
     template: `
-      <div class="h-96 border border-dashed border-neutral-300">
+      <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'">
@@ -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

@@ -110,7 +110,7 @@ export const Docs = {
       return { args, selected };
     },
     template: `
-      <div class="h-96 border border-dashed border-neutral-300">
+      <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'">
@@ -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/dist/components/tabs/AntTabItem.vue

@@ -49,8 +49,8 @@ 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.base]: 'hover:bg-base-100',
+    [TabItemState.info]: 'hover:bg-base-100',
     [TabItemState.warning]: 'hover:bg-warning-100',
     [TabItemState.danger]: 'hover:bg-danger-100',
   };
@@ -92,7 +92,7 @@ const borderBoxClasses = computed(() => {
 });
 const iconColor = computed(() => {
   const variants = {
-    [TabItemState.base]: 'text-neutral-100-font',
+    [TabItemState.base]: 'text-base-100-font',
     [TabItemState.info]: 'text-info-500',
     [TabItemState.warning]: 'text-warning-500',
     [TabItemState.danger]: 'text-danger-500',

package/dist/components/tabs/AntTabs.vue

@@ -39,7 +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">
+    <div class="flex gap-px bg-base-300 border-l border-r border-base-300 overflow-x-auto" :class="scrollContainerClasses">
     <slot>
       <AntTabItem
         v-for="(tabItem, index) in tabItems"