@antify/ui 3.1.18 → 3.1.20

package/dist/components/inputs/AntColorInput/AntColorInput.stories.js

@@ -6,13 +6,14 @@ Object.defineProperty(exports, "__esModule", {
 module.exports = exports.Summary = exports.Docs = void 0;
 var _vue = require("vue");
 var _enums = require("../../../enums");
-var _AntColorInput = _interopRequireDefault(require("./AntColorInput.vue"));
+var _AntColorInput = require("./AntColorInput.types");
+var _AntColorInput2 = _interopRequireDefault(require("./AntColorInput.vue"));
 var _AntFormGroup = _interopRequireDefault(require("../../forms/AntFormGroup.vue"));
 var _AntFormGroupLabel = _interopRequireDefault(require("../../forms/AntFormGroupLabel.vue"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const meta = {
   title: "Inputs/ColorInput",
-  component: _AntColorInput.default,
+  component: _AntColorInput2.default,
   argTypes: {
     modelValue: {
       control: "text"
@@ -29,6 +30,12 @@ const meta = {
       },
       options: Object.values(_enums.Size)
     },
+    colorSize: {
+      control: {
+        type: "select"
+      },
+      options: Object.values(_AntColorInput.ColorButtonSize)
+    },
     colorsPerRow: {
       control: {
         type: "number"
@@ -39,10 +46,11 @@ const meta = {
 module.exports = meta;
 const defaultOptions = ["primary-500", "red-500", "green-500", "blue-500", "yellow-500", "purple-500", "pink-500", "orange-500"];
 const lightColorOptions = ["primary-300", "red-300", "green-300", "blue-300", "yellow-300", "purple-300", "pink-300", "orange-300"];
+const bulkColorOptions = ["red-200", "red-300", "red-400", "red-500", "red-600", "red-700", "red-800", "red-900", "orange-200", "orange-300", "orange-400", "orange-500", "orange-600", "orange-700", "orange-800", "orange-900", "amber-200", "amber-300", "amber-400", "amber-500", "amber-600", "amber-700", "amber-800", "amber-900", "yellow-200", "yellow-300", "yellow-400", "yellow-500", "yellow-600", "yellow-700", "yellow-800", "yellow-900", "lime-200", "lime-300", "lime-400", "lime-500", "lime-600", "lime-700", "lime-800", "lime-900", "green-200", "green-300", "green-400", "green-500", "green-600", "green-700", "green-800", "green-900", "emerald-200", "emerald-300", "emerald-400", "emerald-500", "emerald-600", "emerald-700", "emerald-800", "emerald-900", "teal-200", "teal-300", "teal-400", "teal-500", "teal-600", "teal-700", "teal-800", "teal-900", "cyan-200", "cyan-300", "cyan-400", "cyan-500", "cyan-600", "cyan-700", "cyan-800", "cyan-900", "sky-200", "sky-300", "sky-400", "sky-500", "sky-600", "sky-700", "sky-800", "sky-900", "blue-200", "blue-300", "blue-400", "blue-500", "blue-600", "blue-700", "blue-800", "blue-900", "indigo-200", "indigo-300", "indigo-400", "indigo-500", "indigo-600", "indigo-700", "indigo-800", "indigo-900", "purple-200", "purple-300", "purple-400", "purple-500", "purple-600", "purple-700", "purple-800", "purple-900", "fuchsia-200", "fuchsia-300", "fuchsia-400", "fuchsia-500", "fuchsia-600", "fuchsia-700", "fuchsia-800", "fuchsia-900", "pink-200", "pink-300", "pink-400", "pink-500", "pink-600", "pink-700", "pink-800", "pink-900", "rose-200", "rose-300", "rose-400", "rose-500", "rose-600", "rose-700", "rose-800", "rose-900", "gray-200", "gray-300", "gray-400", "gray-500", "gray-600", "gray-700", "gray-800", "gray-900", "stone-200", "stone-300", "stone-400", "stone-500", "stone-600", "stone-700", "stone-800", "stone-900"];
 const Docs = exports.Docs = {
   render: args => ({
     components: {
-      AntColorInput: _AntColorInput.default
+      AntColorInput: _AntColorInput2.default
     },
     setup() {
       const modelValue = (0, _vue.computed)({
@@ -62,8 +70,9 @@ const Docs = exports.Docs = {
   args: {
     label: "Label",
     description: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod",
-    options: defaultOptions,
-    modelValue: "entry-1"
+    options: bulkColorOptions,
+    modelValue: "entry-1",
+    colorsPerRow: 8
   }
 };
 const Summary = exports.Summary = {
@@ -74,7 +83,7 @@ const Summary = exports.Summary = {
   },
   render: args => ({
     components: {
-      AntColorInput: _AntColorInput.default,
+      AntColorInput: _AntColorInput2.default,
       AntFormGroup: _AntFormGroup.default,
       AntFormGroupLabel: _AntFormGroupLabel.default
     },

package/dist/components/inputs/AntColorInput/AntColorInput.stories.mjs

@@ -8,6 +8,9 @@ import {
 import {
   InputState
 } from "../../../enums/index.mjs";
+import {
+  ColorButtonSize
+} from "./AntColorInput.types.mjs";
 import AntColorInput from "./AntColorInput.vue";
 import AntFormGroup from "../../forms/AntFormGroup.vue";
 import AntFormGroupLabel from "../../forms/AntFormGroupLabel.vue";
@@ -30,6 +33,12 @@ const meta = {
       },
       options: Object.values(Size)
     },
+    colorSize: {
+      control: {
+        type: "select"
+      },
+      options: Object.values(ColorButtonSize)
+    },
     colorsPerRow: {
       control: {
         type: "number"
@@ -58,6 +67,152 @@ const lightColorOptions = [
   "pink-300",
   "orange-300"
 ];
+const bulkColorOptions = [
+  "red-200",
+  "red-300",
+  "red-400",
+  "red-500",
+  "red-600",
+  "red-700",
+  "red-800",
+  "red-900",
+  "orange-200",
+  "orange-300",
+  "orange-400",
+  "orange-500",
+  "orange-600",
+  "orange-700",
+  "orange-800",
+  "orange-900",
+  "amber-200",
+  "amber-300",
+  "amber-400",
+  "amber-500",
+  "amber-600",
+  "amber-700",
+  "amber-800",
+  "amber-900",
+  "yellow-200",
+  "yellow-300",
+  "yellow-400",
+  "yellow-500",
+  "yellow-600",
+  "yellow-700",
+  "yellow-800",
+  "yellow-900",
+  "lime-200",
+  "lime-300",
+  "lime-400",
+  "lime-500",
+  "lime-600",
+  "lime-700",
+  "lime-800",
+  "lime-900",
+  "green-200",
+  "green-300",
+  "green-400",
+  "green-500",
+  "green-600",
+  "green-700",
+  "green-800",
+  "green-900",
+  "emerald-200",
+  "emerald-300",
+  "emerald-400",
+  "emerald-500",
+  "emerald-600",
+  "emerald-700",
+  "emerald-800",
+  "emerald-900",
+  "teal-200",
+  "teal-300",
+  "teal-400",
+  "teal-500",
+  "teal-600",
+  "teal-700",
+  "teal-800",
+  "teal-900",
+  "cyan-200",
+  "cyan-300",
+  "cyan-400",
+  "cyan-500",
+  "cyan-600",
+  "cyan-700",
+  "cyan-800",
+  "cyan-900",
+  "sky-200",
+  "sky-300",
+  "sky-400",
+  "sky-500",
+  "sky-600",
+  "sky-700",
+  "sky-800",
+  "sky-900",
+  "blue-200",
+  "blue-300",
+  "blue-400",
+  "blue-500",
+  "blue-600",
+  "blue-700",
+  "blue-800",
+  "blue-900",
+  "indigo-200",
+  "indigo-300",
+  "indigo-400",
+  "indigo-500",
+  "indigo-600",
+  "indigo-700",
+  "indigo-800",
+  "indigo-900",
+  "purple-200",
+  "purple-300",
+  "purple-400",
+  "purple-500",
+  "purple-600",
+  "purple-700",
+  "purple-800",
+  "purple-900",
+  "fuchsia-200",
+  "fuchsia-300",
+  "fuchsia-400",
+  "fuchsia-500",
+  "fuchsia-600",
+  "fuchsia-700",
+  "fuchsia-800",
+  "fuchsia-900",
+  "pink-200",
+  "pink-300",
+  "pink-400",
+  "pink-500",
+  "pink-600",
+  "pink-700",
+  "pink-800",
+  "pink-900",
+  "rose-200",
+  "rose-300",
+  "rose-400",
+  "rose-500",
+  "rose-600",
+  "rose-700",
+  "rose-800",
+  "rose-900",
+  "gray-200",
+  "gray-300",
+  "gray-400",
+  "gray-500",
+  "gray-600",
+  "gray-700",
+  "gray-800",
+  "gray-900",
+  "stone-200",
+  "stone-300",
+  "stone-400",
+  "stone-500",
+  "stone-600",
+  "stone-700",
+  "stone-800",
+  "stone-900"
+];
 export const Docs = {
   render: (args) => ({
     components: {
@@ -81,8 +236,9 @@ export const Docs = {
   args: {
     label: "Label",
     description: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod",
-    options: defaultOptions,
-    modelValue: "entry-1"
+    options: bulkColorOptions,
+    modelValue: "entry-1",
+    colorsPerRow: 8
   }
 };
 export const Summary = {

package/dist/components/inputs/AntColorInput/AntColorInput.types.d.ts

@@ -1,9 +1,11 @@
-export declare enum ColorInputSize {
+export declare enum ColorButtonSize {
     xl2 = "2xl",
     xl = "xl",
     lg = "lg",
     md = "md",
     sm = "sm",
     xs = "xs",
-    xs2 = "2xs"
+    xs2 = "2xs",
+    xs3 = "3xs",
+    xs4 = "4xs"
 }

package/dist/components/inputs/AntColorInput/AntColorInput.types.js

@@ -3,14 +3,16 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ColorInputSize = void 0;
-var ColorInputSize = exports.ColorInputSize = /* @__PURE__ */(ColorInputSize2 => {
-  ColorInputSize2["xl2"] = "2xl";
-  ColorInputSize2["xl"] = "xl";
-  ColorInputSize2["lg"] = "lg";
-  ColorInputSize2["md"] = "md";
-  ColorInputSize2["sm"] = "sm";
-  ColorInputSize2["xs"] = "xs";
-  ColorInputSize2["xs2"] = "2xs";
-  return ColorInputSize2;
-})(ColorInputSize || {});
+exports.ColorButtonSize = void 0;
+var ColorButtonSize = exports.ColorButtonSize = /* @__PURE__ */(ColorButtonSize2 => {
+  ColorButtonSize2["xl2"] = "2xl";
+  ColorButtonSize2["xl"] = "xl";
+  ColorButtonSize2["lg"] = "lg";
+  ColorButtonSize2["md"] = "md";
+  ColorButtonSize2["sm"] = "sm";
+  ColorButtonSize2["xs"] = "xs";
+  ColorButtonSize2["xs2"] = "2xs";
+  ColorButtonSize2["xs3"] = "3xs";
+  ColorButtonSize2["xs4"] = "4xs";
+  return ColorButtonSize2;
+})(ColorButtonSize || {});

package/dist/components/inputs/AntColorInput/AntColorInput.types.mjs

@@ -1,10 +1,12 @@
-export var ColorInputSize = /* @__PURE__ */ ((ColorInputSize2) => {
-  ColorInputSize2["xl2"] = "2xl";
-  ColorInputSize2["xl"] = "xl";
-  ColorInputSize2["lg"] = "lg";
-  ColorInputSize2["md"] = "md";
-  ColorInputSize2["sm"] = "sm";
-  ColorInputSize2["xs"] = "xs";
-  ColorInputSize2["xs2"] = "2xs";
-  return ColorInputSize2;
-})(ColorInputSize || {});
+export var ColorButtonSize = /* @__PURE__ */ ((ColorButtonSize2) => {
+  ColorButtonSize2["xl2"] = "2xl";
+  ColorButtonSize2["xl"] = "xl";
+  ColorButtonSize2["lg"] = "lg";
+  ColorButtonSize2["md"] = "md";
+  ColorButtonSize2["sm"] = "sm";
+  ColorButtonSize2["xs"] = "xs";
+  ColorButtonSize2["xs2"] = "2xs";
+  ColorButtonSize2["xs3"] = "3xs";
+  ColorButtonSize2["xs4"] = "4xs";
+  return ColorButtonSize2;
+})(ColorButtonSize || {});

package/dist/components/inputs/AntColorInput/AntColorInput.vue

@@ -14,8 +14,8 @@ import {
 import Color from './Color.vue';
 import AntDropdown from '../../AntDropdown.vue';
 import ColorSelection from './ColorSelection.vue';
-import type {
-  ColorInputSize,
+import {
+  ColorButtonSize,
 } from './AntColorInput.types';
 
 const emit = defineEmits([
@@ -33,19 +33,22 @@ const props = withDefaults(defineProps<{
   disabled?: boolean;
   state?: InputState;
   size?: Size;
+  colorSize?: ColorButtonSize;
   messages?: string[];
   nullable?: boolean;
   colorsPerRow?: number;
+  dropdownWrapperClass?: string | Record<string, boolean>;
 }>(), {
   state: InputState.base,
   size: Size.md,
+  colorSize: ColorButtonSize.md,
   messages: () => [],
   nullable: false,
   colorsPerRow: 4,
 });
 const _value = computed({
   get() {
-    const found = props.options.find((option: string | ColorOption) => typeof option === 'string' ? option === props.modelValue : option.value === props.modelValue);
+    const found = props.options.find((option: string) => option === props.modelValue);
 
     if (!found) {
       return props.options[0];
@@ -53,8 +56,8 @@ const _value = computed({
 
     return found;
   },
-  set(val: string | ColorOption) {
-    emit('update:modelValue', typeof val === 'string' ? val : val.value);
+  set(val: string) {
+    emit('update:modelValue', val);
   },
 });
 const hasInputState = computed(() => props.skeleton || props.readonly || props.disabled);
@@ -91,10 +94,7 @@ const itemClasses = computed(() => {
     'focus:ring-2': (props.size === Size.xs2 || props.size === Size.xs || props.size === Size.sm) && !hasInputState.value,
     'focus:ring-4': (props.size === Size.md || props.size === Size.lg) && !hasInputState.value,
     'rounded-r-md': !hasRemoveButton.value,
-    'p-1': props.size === Size.xs2,
-    'p-1.5': props.size === Size.xs || props.size === Size.sm,
-    'p-2': props.size === Size.md,
-    'p-2.5': props.size === Size.lg,
+    'p-1': true,
     invisible: props.skeleton,
     'opacity-50 cursor-not-allowed': props.disabled,
   };
@@ -111,6 +111,20 @@ const itemClasses = computed(() => {
 
   return classes;
 });
+const inputButtonSize = computed(() => {
+  switch(props.size) {
+    case Size.xs2:
+      return ColorButtonSize.xs4;
+    case Size.xs:
+      return ColorButtonSize.xs3;
+    case Size.sm:
+      return ColorButtonSize.xs2;
+    case Size.md:
+      return ColorButtonSize.xs;
+    default:
+      return ColorButtonSize.sm;
+  }
+});
 const showDropdown = ref<boolean>(false);
 const itemRef = ref<HTMLDivElement | null>(null);
 
@@ -198,7 +212,7 @@ onMounted(() => {
           >
             <Color
               :value="modelValue"
-              :size="size as unknown as ColorInputSize"
+              :size="inputButtonSize"
               readonly
             />
           </div>
@@ -219,12 +233,15 @@ onMounted(() => {
       </div>
 
       <template #content>
-        <ColorSelection
-          :value="modelValue"
-          :colors="props.options"
-          :colors-per-row="colorsPerRow"
-          @select="onColorSelect"
-        />
+        <div :class="dropdownWrapperClass">
+          <ColorSelection
+            :value="modelValue"
+            :colors="props.options"
+            :colors-per-row="colorsPerRow"
+            :color-size="colorSize"
+            @select="onColorSelect"
+          />
+        </div>
       </template>
     </AntDropdown>
   </AntField>

package/dist/components/inputs/AntColorInput/Color.vue

@@ -4,7 +4,7 @@ import {
 } from '@fortawesome/free-solid-svg-icons';
 import AntIcon from '../../AntIcon.vue';
 import {
-  ColorInputSize,
+  ColorButtonSize,
 } from './AntColorInput.types';
 import {
   computed, ref,
@@ -21,11 +21,11 @@ const props = withDefaults(defineProps<{
    */
   value: string | null;
   selected?: boolean;
-  size?: ColorInputSize;
+  size?: ColorButtonSize;
   readonly?: boolean;
 }>(), {
   selected: false,
-  size: ColorInputSize.xl,
+  size: ColorButtonSize.xl,
   readonly: false,
 });
 
@@ -37,17 +37,15 @@ defineExpose({
 
 const buttonClasses = computed(() => ({
   'rounded-sm cursor-pointer flex items-center justify-center': true,
-  'h-4 w-4': [
-    ColorInputSize.xs,
-    ColorInputSize.xs2,
-  ].includes(props.size),
-  'h-5 w-5': [
-    ColorInputSize.lg,
-    ColorInputSize.md,
-    ColorInputSize.sm,
-  ].includes(props.size),
-  'h-8 w-8': ColorInputSize.xl === props.size,
-  'h-10 w-10': ColorInputSize.xl2 === props.size,
+  'h-4 w-4': props.size === ColorButtonSize.xs4,
+  'h-5 w-5': props.size === ColorButtonSize.xs3,
+  'h-6 w-6': props.size === ColorButtonSize.xs2,
+  'h-7 w-7': props.size === ColorButtonSize.xs,
+  'h-8 w-8': props.size === ColorButtonSize.sm,
+  'h-9 w-9': props.size === ColorButtonSize.md,
+  'h-10 w-10': props.size === ColorButtonSize.lg,
+  'h-11 w-11': props.size === ColorButtonSize.xl,
+  'h-12 w-12': props.size === ColorButtonSize.xl2,
 }));
 
 const iconClasses = computed(() => {

package/dist/components/inputs/AntColorInput/ColorSelection.vue

@@ -4,7 +4,7 @@ import {
 } from '../../../enums';
 import Color from './Color.vue';
 import {
-  ColorInputSize,
+  ColorButtonSize,
 } from './AntColorInput.types';
 import {
   onMounted, ref,
@@ -18,10 +18,12 @@ withDefaults(defineProps<{
   // The selected color value
   value: string | null;
   colors: string[];
+  colorSize?: ColorButtonSize;
   size?: Size;
   colorsPerRow: number;
 }>(), {
   size: Size.md,
+  colorSize: ColorButtonSize.md,
 });
 
 type ColorComponentInstance = Element & {
@@ -57,7 +59,7 @@ onMounted(() => {
       :ref="(val) => colorButtonRefs[index] = val as ColorComponentInstance"
       :value="color"
       :selected="color === value"
-      :size="ColorInputSize.xl2"
+      :size="colorSize"
       @select="(val) => $emit('select', val)"
     />
   </div>

package/dist/components/inputs/AntTagInput.vue

@@ -284,7 +284,7 @@ onMounted(() => {
           class="w-full flex items-center"
         >
           <div
-            class="flex gap-2.5 items-center"
+            class="flex flex-wrap gap-2.5 items-center"
           >
             <AntTag
               v-for="(tag, index) in _modelValue"

package/package.json

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