@antify/ui 3.1.25 → 3.1.27

package/dist/components/AntButton.vue

@@ -10,12 +10,12 @@ import {
 } from 'vue-router';
 import AntSkeleton from './AntSkeleton.vue';
 import AntSpinner from './AntSpinner.vue';
+import {
+  AntSpinnerSize,
+} from './__types';
 import {
   Grouped,
 } from '../enums/Grouped.enum';
-import {
-  Size,
-} from '../enums/Size.enum';
 import {
   handleEnumValidation,
 } from '../handler';
@@ -24,6 +24,7 @@ import {
 } from '../enums';
 import {
   ButtonType,
+  ButtonSize,
 } from './__types';
 import AntIcon from './AntIcon.vue';
 import AntTooltip from './AntTooltip.vue';
@@ -42,7 +43,7 @@ defineEmits([
 
 const props = withDefaults(defineProps<{
   filled?: boolean;
-  size?: Size;
+  size?: ButtonSize;
   state?: State;
   iconLeft?: IconDefinition;
   iconRight?: IconDefinition;
@@ -66,7 +67,7 @@ const props = withDefaults(defineProps<{
   filled: false,
   skeleton: false,
   spinner: false,
-  size: Size.md,
+  size: ButtonSize.md,
   grouped: Grouped.none,
   readonly: false,
   expanded: false,
@@ -134,17 +135,18 @@ const classes = computed(() => {
   };
 
   return {
-    'transition-all inline-flex items-center justify-center font-medium cursor-pointer select-none': true,
+    'transition-all inline-flex items-center justify-center font-medium cursor-pointer select-none h-fit': true,
     'active:shadow-[inset_0_4px_4px_rgba(0,0,0,0.25)]': !hasInputState.value,
-    'p-1 text-xs gap-1': props.size === Size.xs2,
-    'p-1.5 text-xs gap-1.5': props.size === Size.xs,
-    'p-1.5 text-sm gap-1.5': props.size === Size.sm,
-    'p-2 text-sm gap-2': props.size === Size.md,
-    'p-2.5 text-sm gap-2.5': props.size === Size.lg,
+    'p-1 text-2xs gap-1': props.size === ButtonSize.xs3,
+    'p-1 text-xs gap-1': props.size === ButtonSize.xs2,
+    'p-1.5 text-xs gap-1.5': props.size === ButtonSize.xs,
+    'p-1.5 text-sm gap-1.5': props.size === ButtonSize.sm,
+    'p-2 text-sm gap-2': props.size === ButtonSize.md,
+    'p-2.5 text-sm gap-2.5': props.size === ButtonSize.lg,
     'disabled:opacity-50 disabled:cursor-not-allowed': true,
     'cursor-default': props.readonly,
-    'focus:ring-2': !props.readonly && props.size === Size.sm || props.size === Size.xs || props.size === Size.xs2,
-    'focus:ring-4': !props.readonly && props.size === Size.md || props.size === Size.lg,
+    'focus:ring-2': !props.readonly && props.size === ButtonSize.sm || props.size === ButtonSize.xs || props.size === ButtonSize.xs2 || props.size === ButtonSize.xs3,
+    'focus:ring-4': !props.readonly && props.size === ButtonSize.md || props.size === ButtonSize.lg,
     'w-full': props.expanded,
     'outline outline-1 outline-offset-[-1px]': props.outlined,
     ...groupedClassList.value,
@@ -192,15 +194,33 @@ const is = computed(() => {
   return props.to !== undefined ? 'router-link' : 'button';
 });
 const getIconSize = computed(() => {
-  if (props.size === Size.xs || props.size === Size.xs2) {
+  if (props.size === ButtonSize.xs || props.size === ButtonSize.xs2) {
     return IconSize.xs;
+  } else if (props.size === ButtonSize.xs3) {
+    return IconSize.xs2;
   } else {
     return IconSize.sm;
   }
 });
+const spinnerSize = computed(() => {
+  switch (props.size) {
+    case ButtonSize.lg:
+      return AntSpinnerSize.sm;
+    case ButtonSize.md:
+      return AntSpinnerSize.sm;
+    case ButtonSize.sm:
+      return AntSpinnerSize.sm;
+    case ButtonSize.xs:
+      return AntSpinnerSize.xs;
+    case ButtonSize.xs2:
+      return AntSpinnerSize.xs2;
+    default:
+      return AntSpinnerSize.xs2;
+  }
+});
 
 onMounted(() => {
-  handleEnumValidation(props.size, Size, 'size');
+  handleEnumValidation(props.size, ButtonSize, 'size');
   handleEnumValidation(props.state, State, 'state');
   handleEnumValidation(props.grouped, Grouped, 'grouped');
 });
@@ -236,7 +256,7 @@ onMounted(() => {
         >
           <AntSpinner
             v-if="spinner"
-            :size="size"
+            :size="spinnerSize"
             :state="state"
             :inverted="!filled"
           />

package/dist/components/AntTooltip.vue

@@ -170,11 +170,12 @@ function onClick() {
 
 <template>
   <div
-    class="relative"
+    class="relative h-fit"
     data-e2e="tooltip"
   >
     <div
       ref="reference"
+      class="flex"
       @mouseenter="() => onMouseOver()"
       @mouseleave="() => onMouseLeave()"
       @click="() => onClick()"

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

@@ -8,10 +8,10 @@ var _AntButton = _interopRequireDefault(require("../AntButton.vue"));
 var _AntFormGroupLabel = _interopRequireDefault(require("../forms/AntFormGroupLabel.vue"));
 var _AntFormGroup = _interopRequireDefault(require("../forms/AntFormGroup.vue"));
 var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
-var _Size = require("../../enums/Size.enum");
 var _Grouped2 = require("../../enums/Grouped.enum");
 var _enums = require("../../enums");
 var _test = require("@storybook/test");
+var _AntButton2 = require("../__types/AntButton.types");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const meta = {
   component: _AntButton.default,
@@ -39,7 +39,7 @@ const meta = {
       control: {
         type: "select"
       },
-      options: Object.values(_Size.Size),
+      options: Object.values(_AntButton2.ButtonSize),
       description: "Defines the size of the button"
     },
     iconLeft: {

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

@@ -5,9 +5,6 @@ import {
   faCaretRight,
   faCaretLeft
 } from "@fortawesome/free-solid-svg-icons";
-import {
-  Size
-} from "../../enums/Size.enum.mjs";
 import {
   Grouped as _Grouped
 } from "../../enums/Grouped.enum.mjs";
@@ -19,6 +16,9 @@ import {
 import {
   within
 } from "@storybook/test";
+import {
+  ButtonSize
+} from "../__types/AntButton.types.mjs";
 const meta = {
   component: AntButton,
   title: "Components/Button",
@@ -45,7 +45,7 @@ const meta = {
       control: {
         type: "select"
       },
-      options: Object.values(Size),
+      options: Object.values(ButtonSize),
       description: "Defines the size of the button"
     },
     iconLeft: {

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

@@ -2,3 +2,11 @@ export declare enum ButtonType {
     button = "button",
     submit = "submit"
 }
+export declare enum ButtonSize {
+    lg = "lg",
+    md = "md",
+    sm = "sm",
+    xs = "xs",
+    xs2 = "2xs",
+    xs3 = "3xs"
+}

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

@@ -3,9 +3,18 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ButtonType = void 0;
+exports.ButtonType = exports.ButtonSize = void 0;
 var ButtonType = exports.ButtonType = /* @__PURE__ */(ButtonType2 => {
   ButtonType2["button"] = "button";
   ButtonType2["submit"] = "submit";
   return ButtonType2;
-})(ButtonType || {});
+})(ButtonType || {});
+var ButtonSize = exports.ButtonSize = /* @__PURE__ */(ButtonSize2 => {
+  ButtonSize2["lg"] = "lg";
+  ButtonSize2["md"] = "md";
+  ButtonSize2["sm"] = "sm";
+  ButtonSize2["xs"] = "xs";
+  ButtonSize2["xs2"] = "2xs";
+  ButtonSize2["xs3"] = "3xs";
+  return ButtonSize2;
+})(ButtonSize || {});

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

@@ -3,3 +3,12 @@ export var ButtonType = /* @__PURE__ */ ((ButtonType2) => {
   ButtonType2["submit"] = "submit";
   return ButtonType2;
 })(ButtonType || {});
+export var ButtonSize = /* @__PURE__ */ ((ButtonSize2) => {
+  ButtonSize2["lg"] = "lg";
+  ButtonSize2["md"] = "md";
+  ButtonSize2["sm"] = "sm";
+  ButtonSize2["xs"] = "xs";
+  ButtonSize2["xs2"] = "2xs";
+  ButtonSize2["xs3"] = "3xs";
+  return ButtonSize2;
+})(ButtonSize || {});

package/dist/components/inputs/AntCheckbox.vue

@@ -40,6 +40,18 @@ const props =
     disabled?: boolean;
     readonly?: boolean;
     messages?: string[];
+    /**
+     * Tailwind ring class with focus prefix e.g. focus:ring-primary-200
+     */
+    focusColorClass?: string;
+    /**
+     * Tailwind outline class e.g. outline-primary-300
+     */
+    inactiveColorClass?: string;
+    /**
+     * Tailwind text class e.g. text-primary-500
+     */
+    activeColorClass?: string;
   }>(), {
     state: InputState.base,
     size: Size.md,
@@ -47,27 +59,30 @@ const props =
     disabled: false,
     readonly: false,
     messages: () => [],
+    focusColorClass: 'focus:ring-primary-200',
+    inactiveColorClass: 'outline-base-300',
+    activeColorClass: 'text-primary-500',
   });
 const _modelValue = useVModel(props, 'modelValue', emit);
 const delayedValue = ref(_modelValue.value);
 const hasInputState = computed(() => props.skeleton || props.readonly || props.disabled);
 const inputClasses = computed(() => {
   const focusColorVariant: Record<InputState, string> = {
-    [InputState.base]: 'focus:ring-primary-200',
+    [InputState.base]: props.focusColorClass,
     [InputState.danger]: 'focus:ring-danger-200',
     [InputState.info]: 'focus:ring-info-200',
     [InputState.success]: 'focus:ring-success-200',
     [InputState.warning]: 'focus:ring-warning-200',
   };
   const activeColorVariant: Record<InputState, string> = {
-    [InputState.base]: 'text-primary-500',
+    [InputState.base]: props.activeColorClass,
     [InputState.danger]: 'text-danger-500',
     [InputState.info]: 'text-info-500',
     [InputState.success]: 'text-success-500',
     [InputState.warning]: 'text-warning-500',
   };
   const inactiveColorVariant: Record<InputState, string> = {
-    [InputState.base]: 'outline-base-300',
+    [InputState.base]: props.inactiveColorClass,
     [InputState.danger]: 'outline-danger-500',
     [InputState.info]: 'outline-info-500',
     [InputState.success]: 'outline-success-500',

package/dist/components/inputs/AntCheckboxGroup.vue

@@ -34,6 +34,18 @@ const props = withDefaults(
     readonly?: boolean;
     disabled?: boolean;
     messages?: string[];
+    /**
+     * Tailwind ring class with focus prefix e.g. focus:ring-primary-200
+     */
+    focusColorClass?: string;
+    /**
+     * Tailwind outline class e.g. outline-primary-300
+     */
+    inactiveColorClass?: string;
+    /**
+     * Tailwind text class e.g. text-primary-500
+     */
+    activeColorClass?: string;
   }>(),
   {
     direction: Direction.column,
@@ -43,6 +55,9 @@ const props = withDefaults(
     readonly: false,
     disabled: false,
     messages: () => [],
+    focusColorClass: 'focus:ring-primary-200',
+    inactiveColorClass: 'outline-base-300',
+    activeColorClass: 'text-primary-500',
   },
 );
 const containerClasses = computed(() => ({
@@ -131,6 +146,9 @@ onMounted(() => {
         :skeleton="skeleton"
         :disabled="disabled || checkbox.disabled"
         :readonly="readonly || checkbox.readonly"
+        :active-color-class="activeColorClass"
+        :inactive-color-class="inactiveColorClass"
+        :focus-color-class="focusColorClass"
         @update:model-value="updateValue(checkbox.value)"
         @blur="() => onBlurCheckbox()"
       >

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

@@ -4,4 +4,5 @@ declare const meta: Meta<typeof AntCheckbox>;
 export default meta;
 type Story = StoryObj<typeof AntCheckbox>;
 export declare const Docs: Story;
+export declare const customColors: Story;
 export declare const Summary: Story;

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-module.exports = exports.Summary = exports.Docs = void 0;
+module.exports = exports.customColors = exports.Summary = exports.Docs = void 0;
 var _AntCheckbox = _interopRequireDefault(require("../AntCheckbox.vue"));
 var _vue = require("vue");
 var _enums = require("../../../enums");
@@ -61,6 +61,38 @@ const Docs = exports.Docs = {
     `
   })
 };
+const customColors = exports.customColors = {
+  render: args => ({
+    components: {
+      AntCheckbox: _AntCheckbox.default
+    },
+    setup() {
+      const value = (0, _vue.computed)({
+        get() {
+          return args.modelValue;
+        },
+        set(val) {
+          args.modelValue = val;
+        }
+      });
+      return {
+        args,
+        value
+      };
+    },
+    template: `
+      <div class="m-2">
+        <AntCheckbox v-bind="args" v-model="value"/>
+        <span class="text-sm text-gray-500">Reactive value: {{ value }}</span>
+      </div>
+    `
+  }),
+  args: {
+    focusColorClass: "focus:ring-teal-200",
+    inactiveColorClass: "outline-teal-300",
+    activeColorClass: "text-teal-300"
+  }
+};
 const Summary = exports.Summary = {
   parameters: {
     chromatic: {

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

@@ -60,6 +60,38 @@ export const Docs = {
     `
   })
 };
+export const customColors = {
+  render: (args) => ({
+    components: {
+      AntCheckbox
+    },
+    setup() {
+      const value = computed({
+        get() {
+          return args.modelValue;
+        },
+        set(val) {
+          args.modelValue = val;
+        }
+      });
+      return {
+        args,
+        value
+      };
+    },
+    template: `
+      <div class="m-2">
+        <AntCheckbox v-bind="args" v-model="value"/>
+        <span class="text-sm text-gray-500">Reactive value: {{ value }}</span>
+      </div>
+    `
+  }),
+  args: {
+    focusColorClass: "focus:ring-teal-200",
+    inactiveColorClass: "outline-teal-300",
+    activeColorClass: "text-teal-300"
+  }
+};
 export const Summary = {
   parameters: {
     chromatic: {

package/package.json

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