@antify/ui 2.4.3 → 2.4.5

package/dist/components/AntDropdown.vue

@@ -62,7 +62,7 @@ onKeyStroke('Escape', (e: KeyboardEvent) => {
 });
 
 const onClickOutside = [
-  (ev) => {
+  () => {
     emit('update:showDropdown', false);
   },
   {
@@ -81,7 +81,6 @@ const onClickOutside = [
     <div
       ref="reference"
       v-on-click-outside="onClickOutside"
-      class="h-full w-full"
     >
       <slot />
     </div>

package/dist/components/index.d.ts

@@ -39,6 +39,7 @@ import AntTextarea from './inputs/AntTextarea.vue';
 import AntTextInput from './inputs/AntTextInput.vue';
 import AntUnitInput from './inputs/AntUnitInput.vue';
 import AntImageInput from './inputs/AntImageInput.vue';
+import AntColorInput from './inputs/AntColorInput/AntColorInput.vue';
 import AntNavLeftLayout from './layouts/AntNavLeftLayout.vue';
 import AntNavbar from './navbar/AntNavbar.vue';
 import AntNavbarItem from './navbar/AntNavbarItem.vue';
@@ -64,4 +65,4 @@ import AntTag from './AntTag.vue';
 import AntToast from './AntToast.vue';
 import AntToaster from './AntToaster.vue';
 import AntTooltip from './AntTooltip.vue';
-export { AntActionButton, AntButton, AntCreateButton, AntDeleteButton, AntDuplicateButton, AntEditButton, AntSaveAndNewButton, AntSaveButton, AntCrud, AntCrudDetail, AntCrudDetailActions, AntCrudDetailNav, AntCrudTableFilter, AntCrudTableNav, AntDeleteDialog, AntDialog, AntField, AntFormGroup, AntFormGroupLabel, AntBaseInput, AntSelectMenu, AntInputDescription, AntInputLabel, AntInputLimiter, AntCheckbox, AntCheckboxGroup, AntDateInput, AntNumberInput, AntPasswordInput, AntRadio, AntRadioGroup, AntRangeSlider, AntSearch, AntSelect, AntSwitch, AntSwitcher, AntTagInput, AntTextarea, AntTextInput, AntUnitInput, AntImageInput, AntNavLeftLayout, AntNavbar, AntNavbarItem, AntTable, AntTabs, AntTransitionCollapseHeight, AntAccordion, AntAccordionItem, AntAlert, AntCard, AntContent, AntDropdown, AntIcon, AntKeycap, AntListGroup, AntListGroupItem, AntModal, AntPagination, AntPopover, AntSkeleton, AntSpinner, AntTag, AntToast, AntToaster, AntTooltip, };
+export { AntActionButton, AntButton, AntCreateButton, AntDeleteButton, AntDuplicateButton, AntEditButton, AntSaveAndNewButton, AntSaveButton, AntCrud, AntCrudDetail, AntCrudDetailActions, AntCrudDetailNav, AntCrudTableFilter, AntCrudTableNav, AntDeleteDialog, AntDialog, AntField, AntFormGroup, AntFormGroupLabel, AntBaseInput, AntSelectMenu, AntInputDescription, AntInputLabel, AntInputLimiter, AntCheckbox, AntCheckboxGroup, AntDateInput, AntNumberInput, AntPasswordInput, AntRadio, AntRadioGroup, AntRangeSlider, AntSearch, AntSelect, AntSwitch, AntSwitcher, AntTagInput, AntTextarea, AntTextInput, AntUnitInput, AntImageInput, AntNavLeftLayout, AntNavbar, AntNavbarItem, AntTable, AntTabs, AntTransitionCollapseHeight, AntAccordion, AntAccordionItem, AntAlert, AntCard, AntContent, AntDropdown, AntIcon, AntKeycap, AntListGroup, AntListGroupItem, AntModal, AntPagination, AntPopover, AntSkeleton, AntSpinner, AntTag, AntToast, AntToaster, AntTooltip, AntColorInput, };

package/dist/components/index.js

@@ -57,6 +57,12 @@ Object.defineProperty(exports, "AntCheckboxGroup", {
     return _AntCheckboxGroup.default;
   }
 });
+Object.defineProperty(exports, "AntColorInput", {
+  enumerable: true,
+  get: function () {
+    return _AntColorInput.default;
+  }
+});
 Object.defineProperty(exports, "AntContent", {
   enumerable: true,
   get: function () {
@@ -440,6 +446,7 @@ var _AntTextarea = _interopRequireDefault(require("./inputs/AntTextarea.vue"));
 var _AntTextInput = _interopRequireDefault(require("./inputs/AntTextInput.vue"));
 var _AntUnitInput = _interopRequireDefault(require("./inputs/AntUnitInput.vue"));
 var _AntImageInput = _interopRequireDefault(require("./inputs/AntImageInput.vue"));
+var _AntColorInput = _interopRequireDefault(require("./inputs/AntColorInput/AntColorInput.vue"));
 var _AntNavLeftLayout = _interopRequireDefault(require("./layouts/AntNavLeftLayout.vue"));
 var _AntNavbar = _interopRequireDefault(require("./navbar/AntNavbar.vue"));
 var _AntNavbarItem = _interopRequireDefault(require("./navbar/AntNavbarItem.vue"));

package/dist/components/index.mjs

@@ -39,6 +39,7 @@ import AntTextarea from "./inputs/AntTextarea.vue";
 import AntTextInput from "./inputs/AntTextInput.vue";
 import AntUnitInput from "./inputs/AntUnitInput.vue";
 import AntImageInput from "./inputs/AntImageInput.vue";
+import AntColorInput from "./inputs/AntColorInput/AntColorInput.vue";
 import AntNavLeftLayout from "./layouts/AntNavLeftLayout.vue";
 import AntNavbar from "./navbar/AntNavbar.vue";
 import AntNavbarItem from "./navbar/AntNavbarItem.vue";
@@ -130,5 +131,6 @@ export {
   AntTag,
   AntToast,
   AntToaster,
-  AntTooltip
+  AntTooltip,
+  AntColorInput
 };

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

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+import AntColorInput from './AntColorInput.vue';
+declare const meta: Meta<typeof AntColorInput>;
+export default meta;
+type Story = StoryObj<typeof AntColorInput>;
+export declare const Docs: Story;
+export declare const Summary: Story;

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

@@ -0,0 +1,167 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = exports.Summary = exports.Docs = void 0;
+var _vue = require("vue");
+var _enums = require("../../../enums");
+var _AntColorInput = _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,
+  argTypes: {
+    modelValue: {
+      control: "text"
+    },
+    state: {
+      control: {
+        type: "select"
+      },
+      options: Object.values(_enums.InputState)
+    },
+    size: {
+      control: {
+        type: "select"
+      },
+      options: Object.values(_enums.Size)
+    }
+  }
+};
+module.exports = meta;
+const defaultOptions = ["primary-500", "red-500", "green-500", "blue-500", "yellow-500", "purple-500", "pink-500", "orange-500"];
+const Docs = exports.Docs = {
+  render: args => ({
+    components: {
+      AntColorInput: _AntColorInput.default
+    },
+    setup() {
+      const modelValue = (0, _vue.computed)({
+        get: () => args.modelValue,
+        // @ts-expect-error expect read only
+        set: val => args.modelValue = val
+      });
+      return {
+        modelValue,
+        args
+      };
+    },
+    template: `
+      <AntColorInput v-bind="args" v-model="modelValue" />
+    `
+  }),
+  args: {
+    label: "Label",
+    description: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod",
+    options: defaultOptions,
+    modelValue: "entry-1"
+  }
+};
+const Summary = exports.Summary = {
+  parameters: {
+    chromatic: {
+      disableSnapshot: false
+    }
+  },
+  render: args => ({
+    components: {
+      AntColorInput: _AntColorInput.default,
+      AntFormGroup: _AntFormGroup.default,
+      AntFormGroupLabel: _AntFormGroupLabel.default
+    },
+    setup() {
+      const modelValue = (0, _vue.computed)({
+        get: () => args.modelValue,
+        // @ts-expect-error expect read only
+        set: val => args.modelValue = val
+      });
+      const skeleton = (0, _vue.ref)(true);
+      return {
+        args,
+        modelValue,
+        InputState: _enums.InputState,
+        skeleton,
+        Size: _enums.Size
+      };
+    },
+    template: `
+      <AntFormGroup>
+        <AntFormGroupLabel>States</AntFormGroupLabel>
+        <AntFormGroup direction="row">
+          <AntColorInput v-bind="args" v-model="modelValue" label="Label"
+                       description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
+                       :state="InputState.base"/>
+          <AntColorInput v-bind="args" v-model="modelValue" label="Label"
+                       description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
+                       :state="InputState.info"/>
+          <AntColorInput v-bind="args" v-model="modelValue" label="Label"
+                       description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
+                       :state="InputState.success"/>
+          <AntColorInput v-bind="args" v-model="modelValue" label="Label"
+                       description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
+                       :state="InputState.warning"/>
+          <AntColorInput v-bind="args" v-model="modelValue" label="Label"
+                       description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
+                       :state="InputState.danger"/>
+        </AntFormGroup>
+        <AntFormGroupLabel>Sizes</AntFormGroupLabel>
+        <AntFormGroup direction="row">
+          <AntColorInput v-bind="args" v-model="modelValue" label="Label" :size="Size.lg"
+                       description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
+          />
+          <AntColorInput v-bind="args" v-model="modelValue" label="Label" :size="Size.md"
+                       description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
+          />
+          <AntColorInput v-bind="args" v-model="modelValue" label="Label" :size="Size.sm"
+                       description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
+          />
+          <AntColorInput v-bind="args" v-model="modelValue" label="Label" :size="Size.xs"
+                       description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
+          />
+          <AntColorInput v-bind="args" v-model="modelValue" label="Label" :size="Size.xs2"
+                       description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
+          />
+        </AntFormGroup>
+        <AntFormGroup direction="row">
+          <AntFormGroup>
+            <AntFormGroupLabel>Disabled</AntFormGroupLabel>
+            <AntColorInput v-bind="args" v-model="modelValue" :disabled="true" label="Label"
+                         description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
+            />
+          </AntFormGroup>
+          <AntFormGroup>
+            <AntFormGroupLabel>Readonly</AntFormGroupLabel>
+            <AntColorInput v-bind="args" v-model="modelValue" :readonly="true" label="Label"
+                         description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
+            />
+          </AntFormGroup>
+          <AntFormGroup>
+            <AntFormGroupLabel>Skeleton</AntFormGroupLabel>
+            <AntColorInput v-bind="args" v-model="modelValue" :skeleton="true" label="Label"
+                         description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
+            />
+          </AntFormGroup>
+        </AntFormGroup>
+        <AntFormGroupLabel>Plain</AntFormGroupLabel>
+        <AntColorInput v-bind="args" v-model="modelValue"/>
+        <AntFormGroupLabel>Nullable</AntFormGroupLabel>
+        <AntColorInput v-bind="args" v-model="modelValue" nullable/>
+        <AntFormGroupLabel>With label</AntFormGroupLabel>
+        <AntColorInput v-bind="args" v-model="modelValue" label="Label"/>
+        <AntFormGroupLabel>With description</AntFormGroupLabel>
+        <AntColorInput v-bind="args" v-model="modelValue"
+                     description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"/>
+        <AntFormGroupLabel>With label + description</AntFormGroupLabel>
+        <AntColorInput v-bind="args" v-model="modelValue" label="Label"
+                     description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"/>
+      </AntFormGroup>
+    `
+  }),
+  args: {
+    options: defaultOptions,
+    modelValue: "primary-500"
+  }
+};

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

@@ -0,0 +1,177 @@
+import {
+  ref,
+  computed
+} from "vue";
+import {
+  Size
+} from "../../../enums/index.mjs";
+import {
+  InputState
+} from "../../../enums/index.mjs";
+import AntColorInput from "./AntColorInput.vue";
+import AntFormGroup from "../../forms/AntFormGroup.vue";
+import AntFormGroupLabel from "../../forms/AntFormGroupLabel.vue";
+const meta = {
+  title: "Inputs/ColorInput",
+  component: AntColorInput,
+  argTypes: {
+    modelValue: {
+      control: "text"
+    },
+    state: {
+      control: {
+        type: "select"
+      },
+      options: Object.values(InputState)
+    },
+    size: {
+      control: {
+        type: "select"
+      },
+      options: Object.values(Size)
+    }
+  }
+};
+export default meta;
+const defaultOptions = [
+  "primary-500",
+  "red-500",
+  "green-500",
+  "blue-500",
+  "yellow-500",
+  "purple-500",
+  "pink-500",
+  "orange-500"
+];
+export const Docs = {
+  render: (args) => ({
+    components: {
+      AntColorInput
+    },
+    setup() {
+      const modelValue = computed({
+        get: () => args.modelValue,
+        // @ts-expect-error expect read only
+        set: (val) => args.modelValue = val
+      });
+      return {
+        modelValue,
+        args
+      };
+    },
+    template: `
+      <AntColorInput v-bind="args" v-model="modelValue" />
+    `
+  }),
+  args: {
+    label: "Label",
+    description: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod",
+    options: defaultOptions,
+    modelValue: "entry-1"
+  }
+};
+export const Summary = {
+  parameters: {
+    chromatic: {
+      disableSnapshot: false
+    }
+  },
+  render: (args) => ({
+    components: {
+      AntColorInput,
+      AntFormGroup,
+      AntFormGroupLabel
+    },
+    setup() {
+      const modelValue = computed({
+        get: () => args.modelValue,
+        // @ts-expect-error expect read only
+        set: (val) => args.modelValue = val
+      });
+      const skeleton = ref(true);
+      return {
+        args,
+        modelValue,
+        InputState,
+        skeleton,
+        Size
+      };
+    },
+    template: `
+      <AntFormGroup>
+        <AntFormGroupLabel>States</AntFormGroupLabel>
+        <AntFormGroup direction="row">
+          <AntColorInput v-bind="args" v-model="modelValue" label="Label"
+                       description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
+                       :state="InputState.base"/>
+          <AntColorInput v-bind="args" v-model="modelValue" label="Label"
+                       description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
+                       :state="InputState.info"/>
+          <AntColorInput v-bind="args" v-model="modelValue" label="Label"
+                       description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
+                       :state="InputState.success"/>
+          <AntColorInput v-bind="args" v-model="modelValue" label="Label"
+                       description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
+                       :state="InputState.warning"/>
+          <AntColorInput v-bind="args" v-model="modelValue" label="Label"
+                       description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
+                       :state="InputState.danger"/>
+        </AntFormGroup>
+        <AntFormGroupLabel>Sizes</AntFormGroupLabel>
+        <AntFormGroup direction="row">
+          <AntColorInput v-bind="args" v-model="modelValue" label="Label" :size="Size.lg"
+                       description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
+          />
+          <AntColorInput v-bind="args" v-model="modelValue" label="Label" :size="Size.md"
+                       description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
+          />
+          <AntColorInput v-bind="args" v-model="modelValue" label="Label" :size="Size.sm"
+                       description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
+          />
+          <AntColorInput v-bind="args" v-model="modelValue" label="Label" :size="Size.xs"
+                       description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
+          />
+          <AntColorInput v-bind="args" v-model="modelValue" label="Label" :size="Size.xs2"
+                       description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
+          />
+        </AntFormGroup>
+        <AntFormGroup direction="row">
+          <AntFormGroup>
+            <AntFormGroupLabel>Disabled</AntFormGroupLabel>
+            <AntColorInput v-bind="args" v-model="modelValue" :disabled="true" label="Label"
+                         description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
+            />
+          </AntFormGroup>
+          <AntFormGroup>
+            <AntFormGroupLabel>Readonly</AntFormGroupLabel>
+            <AntColorInput v-bind="args" v-model="modelValue" :readonly="true" label="Label"
+                         description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
+            />
+          </AntFormGroup>
+          <AntFormGroup>
+            <AntFormGroupLabel>Skeleton</AntFormGroupLabel>
+            <AntColorInput v-bind="args" v-model="modelValue" :skeleton="true" label="Label"
+                         description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
+            />
+          </AntFormGroup>
+        </AntFormGroup>
+        <AntFormGroupLabel>Plain</AntFormGroupLabel>
+        <AntColorInput v-bind="args" v-model="modelValue"/>
+        <AntFormGroupLabel>Nullable</AntFormGroupLabel>
+        <AntColorInput v-bind="args" v-model="modelValue" nullable/>
+        <AntFormGroupLabel>With label</AntFormGroupLabel>
+        <AntColorInput v-bind="args" v-model="modelValue" label="Label"/>
+        <AntFormGroupLabel>With description</AntFormGroupLabel>
+        <AntColorInput v-bind="args" v-model="modelValue"
+                     description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"/>
+        <AntFormGroupLabel>With label + description</AntFormGroupLabel>
+        <AntColorInput v-bind="args" v-model="modelValue" label="Label"
+                     description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"/>
+      </AntFormGroup>
+    `
+  }),
+  args: {
+    options: defaultOptions,
+    modelValue: "primary-500"
+  }
+};

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

@@ -0,0 +1,9 @@
+export declare enum ColorInputSize {
+    xl2 = "2xl",
+    xl = "xl",
+    lg = "lg",
+    md = "md",
+    sm = "sm",
+    xs = "xs",
+    xs2 = "2xs"
+}

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

@@ -0,0 +1,16 @@
+"use strict";
+
+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 || {});

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

@@ -0,0 +1,10 @@
+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 || {});

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

@@ -0,0 +1,209 @@
+<script setup lang="ts">
+import AntField from '../../forms/AntField.vue';
+import AntButton from '../../buttons/AntButton.vue';
+import {
+  faMultiply,
+} from '@fortawesome/free-solid-svg-icons';
+import AntSkeleton from '../../AntSkeleton.vue';
+import {
+  Size,
+  State,
+  Grouped,
+  InputState,
+} from '../../../enums';
+import {
+  ref,
+  watch,
+  computed,
+  onMounted, nextTick,
+} from 'vue';
+import Color from './Color.vue';
+import AntDropdown from '../../AntDropdown.vue';
+import ColorSelection from './ColorSelection.vue';
+import type {
+  ColorInputSize,
+} from './AntColorInput.types';
+
+const emit = defineEmits([
+  'update:modelValue',
+  'validate',
+  'blur',
+]);
+const props = withDefaults(defineProps<{
+  modelValue: string | null;
+  options: string[];
+  label?: string;
+  description?: string;
+  skeleton?: boolean;
+  readonly?: boolean;
+  disabled?: boolean;
+  state?: InputState;
+  size?: Size;
+  messages?: string[];
+  nullable?: boolean;
+}>(), {
+  state: InputState.base,
+  size: Size.md,
+  messages: () => [],
+  nullable: false,
+});
+const _value = computed({
+  get() {
+    const found = props.options.find((option: string | ColorOption) => typeof option === 'string' ? option === props.modelValue : option.value === props.modelValue);
+
+    if (!found) {
+      return props.options[0];
+    }
+
+    return found;
+  },
+  set(val: string | ColorOption) {
+    emit('update:modelValue', typeof val === 'string' ? val : val.value);
+  },
+});
+const hasInputState = computed(() => props.skeleton || props.readonly || props.disabled);
+const containerClasses = computed(() => {
+  const classes: {
+    [key: string]: boolean;
+  } = {
+    'flex relative w-fit ring-primary/25 rounded-md outline-hidden': true,
+    'focus-within:ring-2': (props.size === Size.xs2 || props.size === Size.xs || props.size === Size.sm) && !hasInputState.value,
+    'focus-within:ring-4': (props.size === Size.md || props.size === Size.lg) && !hasInputState.value,
+  };
+  const colorVariant = {
+    [InputState.base]: 'focus-within:ring-primary-200',
+    [InputState.danger]: 'focus-within:ring-danger-200',
+    [InputState.info]: 'focus-within:ring-info-200',
+    [InputState.success]: 'focus-within:ring-success-200',
+    [InputState.warning]: 'focus-within:ring-warning-200',
+  };
+
+  classes[colorVariant[props.state]] = true;
+
+  return classes;
+});
+const hasRemoveButton = computed<boolean>(() => {
+  if (props.nullable) {
+    return props.modelValue !== null;
+  }
+
+  return false;
+});
+const itemClasses = computed(() => {
+  const classes: {
+    [key: string]: boolean;
+  } = {
+    'relative outline outline-1 -outline-offset-1 rounded-l-md cursor-pointer': true,
+    '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,
+    invisible: props.skeleton,
+    'opacity-50 cursor-not-allowed': props.disabled,
+  };
+
+  const colorVariant = {
+    [InputState.danger]: 'outline-danger-500 bg-danger-100',
+    [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',
+  };
+
+  classes[colorVariant[props.state]] = true;
+
+  return classes;
+});
+const showDropdown = ref<boolean>(false);
+
+/**
+ * Validate default value if given after delayed data fetching.
+ */
+watch(() => props.skeleton, (val) => {
+  if (!val && props.modelValue !== null) {
+    emit('validate', props.modelValue);
+  }
+});
+watch(_value, () => {
+  if (props.messages.length > 0) {
+    emit('validate', props.modelValue);
+  }
+});
+
+function onBlur(e: FocusEvent) {
+  emit('validate', props.modelValue);
+  emit('blur', e);
+}
+
+onMounted(() => {
+  if (!props.skeleton && props.modelValue !== null) {
+    emit('validate', props.modelValue);
+  }
+});
+</script>
+
+<template>
+  <AntField
+    :label="label"
+    :size="size"
+    :skeleton="skeleton"
+    :description="description"
+    :state="state"
+    :messages="messages"
+    label-for="noop"
+  >
+    <AntDropdown
+      v-model:show-dropdown="showDropdown"
+      :content-padding="false"
+    >
+      <div
+        :class="containerClasses"
+        tabindex="0"
+        @blur="onBlur"
+      >
+        <div class="relative">
+          <div :class="itemClasses">
+            <Color
+              :value="modelValue"
+              :size="size as unknown as ColorInputSize"
+              @click="showDropdown = true"
+            />
+          </div>
+
+          <AntSkeleton
+            v-if="skeleton"
+            absolute
+            :grouped="hasRemoveButton ? Grouped.left : Grouped.none"
+            rounded
+          />
+        </div>
+
+        <AntButton
+          v-if="hasRemoveButton"
+          :icon-left="faMultiply"
+          :grouped="Grouped.right"
+          :no-focus="true"
+          :state="state as unknown as State"
+          :size="size"
+          :skeleton="skeleton"
+          :readonly="readonly"
+          :disabled="disabled"
+          @click="() => emit('update:modelValue', null)"
+          @blur="onBlur"
+        />
+      </div>
+
+      <template #content>
+        <ColorSelection
+          :value="modelValue"
+          :colors="props.options"
+          @select="(val) => {
+            $emit('update:modelValue', val);
+            nextTick(() => showDropdown = false);
+          }"
+        />
+      </template>
+    </AntDropdown>
+  </AntField>
+</template>

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

@@ -0,0 +1,49 @@
+<script lang="ts" setup>
+import {
+  faCheck,
+} from '@fortawesome/free-solid-svg-icons';
+import AntIcon from '../../AntIcon.vue';
+import {
+  ColorInputSize,
+} from './AntColorInput.types';
+
+defineEmits([
+  'select',
+]);
+
+withDefaults(defineProps<{
+  /**
+   * Value needs to be a variable name which exists in
+   * document computed style as CSS variable like --color-{value}
+   */
+  value: string | null;
+  selected?: boolean;
+  size?: ColorInputSize;
+}>(), {
+  selected: false,
+  size: ColorInputSize.xl,
+});
+</script>
+
+<template>
+  <div
+    class="rounded-sm cursor-pointer flex items-center justify-center"
+    :class="{
+      'h-4 w-4': [ColorInputSize.xs, ColorInputSize.xs2].includes(size),
+      'h-5 w-5': [ColorInputSize.lg, ColorInputSize.md, ColorInputSize.sm].includes(size),
+      'h-8 w-8': ColorInputSize.xl === size,
+      'h-10 w-10': ColorInputSize.xl2 === size,
+    }"
+    :style="{
+      backgroundColor: `var(--color-${value})`,
+      outlineColor: `var(--color-${value})`,
+    }"
+    @click="$emit('select', value)"
+  >
+    <AntIcon
+      v-if="selected"
+      :icon="faCheck"
+      class="text-white"
+    />
+  </div>
+</template>

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

@@ -0,0 +1,43 @@
+<script lang="ts" setup>
+import {
+  Size,
+} from '../../../enums';
+import Color from './Color.vue';
+import {
+  ColorInputSize,
+} from './AntColorInput.types';
+
+defineEmits([
+  'select',
+]);
+
+withDefaults(defineProps<{
+  // The selected color value
+  value: string | null;
+  colors: string[];
+  size?: Size;
+}>(), {
+  size: Size.md,
+});
+</script>
+
+<template>
+  <div
+    class="grid grid-cols-4 gap-1.5"
+    :class="{
+      'p-1': size === Size.xs2,
+      'p-1.5': size === Size.xs || size === Size.sm,
+      'p-2': size === Size.md,
+      'p-2.5': size === Size.lg,
+    }"
+  >
+    <Color
+      v-for="color in colors"
+      :key="color"
+      :value="color"
+      :selected="color === value"
+      :size="ColorInputSize.xl2"
+      @select="(val) => $emit('select', val)"
+    />
+  </div>
+</template>

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

@@ -121,7 +121,7 @@ watch(isOpen, () => {
       focusedDropDownItem.value =
         typeof _modelValue.value === 'string' || typeof _modelValue.value === 'number' ? _modelValue.value :
           Array.isArray(_modelValue.value) ? _modelValue.value[0] :
-            props.options[0].value;
+            (props.options[0].value || null);
     } else {
       focusedDropDownItem.value = null;
     }
@@ -138,6 +138,56 @@ onUnmounted(() => {
   reference.value?.removeEventListener('keydown', onKeyDownDropDown);
 });
 
+/**
+ * Get the next focusable select option.
+ * It skips group labels and goes to beginning of the list if it reaches the end.
+ *
+ * @param currentOptionIndex
+ */
+function getNextFocusableSelectOption(currentOptionIndex: number): number | null {
+  for (let i = currentOptionIndex + 1; i < props.options.length; i++) {
+    if (!props.options[i].isGroupLabel) {
+      return i;
+    }
+  }
+
+  // If no next option is found, return the first option, but make sure
+  // to skip group labels again.
+  for (let i = 0; i < props.options.length; i++) {
+    if (!props.options[i].isGroupLabel) {
+      return i;
+    }
+  }
+
+  // Seems that the option list is empty or all options are group labels.
+  return null;
+}
+
+/**
+ * Get the prev focusable select option.
+ * It skips group labels and goes to end of the list if it reaches the end.
+ *
+ * @param currentOptionIndex
+ */
+function getPrevFocusableSelectOption(currentOptionIndex: number): number | null {
+  for (let i = currentOptionIndex - 1; i >= 0; i--) {
+    if (!props.options[i].isGroupLabel) {
+      return i;
+    }
+  }
+
+  // If no previous option is found, return the last option, but make sure
+  // to skip group labels again.
+  for (let i = props.options.length - 1; i >= 0; i--) {
+    if (!props.options[i].isGroupLabel) {
+      return i;
+    }
+  }
+
+  // Seems that the option list is empty or all options are group labels.
+  return null;
+}
+
 function onKeyDownDropDown(e: KeyboardEvent) {
   if (e.key === 'Enter') {
     if (props.closeOnEnter) {
@@ -160,12 +210,10 @@ function onKeyDownDropDown(e: KeyboardEvent) {
     isOpen.value = true;
 
     const index = props.options.findIndex(option => option.value === focusedDropDownItem.value);
-    const option = props.options[index + 1];
+    const nextOptionIndex = getNextFocusableSelectOption(index);
 
-    if (index === -1) {
-      focusedDropDownItem.value = props.options[0].value;
-    } else if (option !== undefined) {
-      focusedDropDownItem.value = option.value;
+    if (nextOptionIndex !== null) {
+      focusedDropDownItem.value = props.options[nextOptionIndex].value || null;
     }
   }
 
@@ -174,10 +222,10 @@ function onKeyDownDropDown(e: KeyboardEvent) {
     isOpen.value = true;
 
     const index = props.options.findIndex(option => option.value === focusedDropDownItem.value);
-    const option = props.options[index - 1];
+    const prevOptionIndex = getPrevFocusableSelectOption(index);
 
-    if (option !== undefined) {
-      focusedDropDownItem.value = option.value;
+    if (prevOptionIndex !== null) {
+      focusedDropDownItem.value = props.options[prevOptionIndex].value || null;
     }
   }
 
@@ -187,6 +235,10 @@ function onKeyDownDropDown(e: KeyboardEvent) {
 }
 
 function getActiveDropDownItemClasses(option: SelectOption) {
+  if (option.isGroupLabel) {
+    return {};
+  }
+
   const variants: Record<InputState, string> = {
     [InputState.base]: '!bg-base-100',
     [InputState.success]: 'bg-success-200',
@@ -201,16 +253,21 @@ function getActiveDropDownItemClasses(option: SelectOption) {
   } : {};
 }
 
-function onClickDropDownItem(e: MouseEvent, value: string | number | null) {
+function onClickDropDownItem(e: MouseEvent, option: SelectOption) {
   e.preventDefault();
+
+  if (option.isGroupLabel) {
+    return;
+  }
+
   reference.value?.focus();
 
   if (props.closeOnSelectItem) {
     isOpen.value = false;
   }
 
-  emit('selectElement', value);
-  _modelValue.value = value;
+  emit('selectElement', option.value);
+  _modelValue.value = option.value || null;
 }
 
 watch(_modelValue, (val) => {
@@ -236,9 +293,13 @@ watch(_modelValue, (val) => {
         <div
           v-for="(option, index) in options"
           :key="`option-${index}`"
-          :class="{...dropDownItemClasses, ...getActiveDropDownItemClasses(option)}"
-          @mousedown="(e) => onClickDropDownItem(e, option.value)"
-          @mouseover="() => focusedDropDownItem = option.value"
+          :class="{
+            ...dropDownItemClasses,
+            ...getActiveDropDownItemClasses(option),
+            'font-bold': option.isGroupLabel,
+          }"
+          @mousedown="(e) => onClickDropDownItem(e, option)"
+          @mouseover="() => focusedDropDownItem = !option.isGroupLabel && option.value !== undefined ? option.value : null"
         >
           <slot
             name="contentLeft"

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

@@ -9,6 +9,7 @@ export declare const manyOptions: Story;
 export declare const nullable: Story;
 export declare const skeleton: Story;
 export declare const disabled: Story;
+export declare const grouped: Story;
 export declare const withPlaceholder: Story;
 export declare const ellipsisText: Story;
 export declare const summary: 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.manyOptions = exports.ellipsisText = exports.disabled = exports.default = exports.WithSlots = exports.Docs = void 0;
+exports.withPlaceholder = exports.summary = exports.skeleton = exports.nullable = exports.manyOptions = exports.grouped = exports.ellipsisText = exports.disabled = exports.default = exports.WithSlots = exports.Docs = void 0;
 var _Size = require("../../../enums/Size.enum");
 var _AntSelect = _interopRequireDefault(require("../AntSelect.vue"));
 var _AntIcon = _interopRequireDefault(require("../../AntIcon.vue"));
@@ -230,6 +230,45 @@ const disabled = exports.disabled = {
     disabled: true
   }
 };
+const grouped = exports.grouped = {
+  render: (args, ctx) => ({
+    // @ts-ignore
+    components: Docs.render(args, ctx).components,
+    // @ts-ignore
+    setup: Docs.render(args, ctx).setup,
+    template: `
+      <AntSelect v-bind="args" v-model="modelValue"/>
+    `
+  }),
+  args: {
+    label: "Label",
+    description: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod",
+    options: [{
+      label: "Group 1",
+      isGroupLabel: true
+    }, {
+      label: "Option 1.1",
+      value: 1,
+      imgUrl: "https://fastly.picsum.photos/id/972/200/200.jpg?hmac=TeAvfwW2T9YMpPW-sWWTeAiseERb12wSeR3mYzuG6TE"
+    }, {
+      label: "Option 2.1",
+      value: 2,
+      imgUrl: "https://fastly.picsum.photos/id/314/200/200.jpg?hmac=bCAc2iO5ovLPrvwDQV31aBPS13QTyv33ut2H2wY4QXU"
+    }, {
+      label: "Group 2",
+      isGroupLabel: true
+    }, {
+      label: "Option 2.1",
+      value: 3,
+      imgUrl: "https://fastly.picsum.photos/id/972/200/200.jpg?hmac=TeAvfwW2T9YMpPW-sWWTeAiseERb12wSeR3mYzuG6TE"
+    }, {
+      label: "Option 2.2",
+      value: 4,
+      imgUrl: "https://fastly.picsum.photos/id/165/200/200.jpg?hmac=tQGrY9pm5ze9soSsZ5CNBt87zqnHfFwdPv_khau12Sw"
+    }],
+    modelValue: 1
+  }
+};
 const withPlaceholder = exports.withPlaceholder = {
   render: Docs.render,
   args: {

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

@@ -245,6 +245,52 @@ export const disabled = {
     disabled: true
   }
 };
+export const grouped = {
+  render: (args, ctx) => ({
+    // @ts-ignore
+    components: Docs.render(args, ctx).components,
+    // @ts-ignore
+    setup: Docs.render(args, ctx).setup,
+    template: `
+      <AntSelect v-bind="args" v-model="modelValue"/>
+    `
+  }),
+  args: {
+    label: "Label",
+    description: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod",
+    options: [
+      {
+        label: "Group 1",
+        isGroupLabel: true
+      },
+      {
+        label: "Option 1.1",
+        value: 1,
+        imgUrl: "https://fastly.picsum.photos/id/972/200/200.jpg?hmac=TeAvfwW2T9YMpPW-sWWTeAiseERb12wSeR3mYzuG6TE"
+      },
+      {
+        label: "Option 2.1",
+        value: 2,
+        imgUrl: "https://fastly.picsum.photos/id/314/200/200.jpg?hmac=bCAc2iO5ovLPrvwDQV31aBPS13QTyv33ut2H2wY4QXU"
+      },
+      {
+        label: "Group 2",
+        isGroupLabel: true
+      },
+      {
+        label: "Option 2.1",
+        value: 3,
+        imgUrl: "https://fastly.picsum.photos/id/972/200/200.jpg?hmac=TeAvfwW2T9YMpPW-sWWTeAiseERb12wSeR3mYzuG6TE"
+      },
+      {
+        label: "Option 2.2",
+        value: 4,
+        imgUrl: "https://fastly.picsum.photos/id/165/200/200.jpg?hmac=tQGrY9pm5ze9soSsZ5CNBt87zqnHfFwdPv_khau12Sw"
+      }
+    ],
+    modelValue: 1
+  }
+};
 export const withPlaceholder = {
   render: Docs.render,
   args: {

package/dist/components/inputs/__types/AntSelect.types.d.ts

@@ -1,4 +1,5 @@
 export type SelectOption = {
     label: string;
-    value: string | number;
+    value?: string | number;
+    isGroupLabel?: boolean;
 } & Record<string, unknown>;

package/dist/components/inputs/__types/index.d.ts

@@ -5,3 +5,4 @@ export * from './AntSelect.types';
 export * from './AntSwitcher.types';
 export * from './AntTagInput.types';
 export * from './AntTextInput.types';
+export * from '../AntColorInput/AntColorInput.types';

package/dist/components/inputs/__types/index.js

@@ -79,4 +79,15 @@ Object.keys(_AntTextInput).forEach(function (key) {
       return _AntTextInput[key];
     }
   });
+});
+var _AntColorInput = require("../AntColorInput/AntColorInput.types");
+Object.keys(_AntColorInput).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _AntColorInput[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _AntColorInput[key];
+    }
+  });
 });

package/dist/components/inputs/__types/index.mjs

@@ -5,3 +5,4 @@ export * from "./AntSelect.types.mjs";
 export * from "./AntSwitcher.types.mjs";
 export * from "./AntTagInput.types.mjs";
 export * from "./AntTextInput.types.mjs";
+export * from "../AntColorInput/AntColorInput.types.mjs";

package/package.json

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