@antify/ui 3.1.26 → 3.1.27

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.26",
+  "version": "3.1.27",
   "private": false,
   "type": "module",
   "exports": {