@antify/ui 2.4.4 → 2.4.10

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/buttons/AntButton.vue

@@ -128,7 +128,7 @@ const classes = computed(() => {
   };
 
   return {
-    'transition-all inline-flex items-center justify-center relative font-medium': true,
+    'transition-all inline-flex items-center justify-center relative font-medium cursor-pointer select-none': 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,

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,173 @@
+"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 lightColorOptions = ["primary-300", "red-300", "green-300", "blue-300", "yellow-300", "purple-300", "pink-300", "orange-300"];
+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);
+      const lightModelValue = (0, _vue.ref)("primary-300");
+      return {
+        args,
+        modelValue,
+        lightModelValue,
+        lightColorOptions,
+        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>Light Color Options</AntFormGroupLabel>
+        <AntColorInput v-model="lightModelValue" :options="lightColorOptions" />
+        <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,192 @@
+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"
+];
+const lightColorOptions = [
+  "primary-300",
+  "red-300",
+  "green-300",
+  "blue-300",
+  "yellow-300",
+  "purple-300",
+  "pink-300",
+  "orange-300"
+];
+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);
+      const lightModelValue = ref("primary-300");
+      return {
+        args,
+        modelValue,
+        lightModelValue,
+        lightColorOptions,
+        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>Light Color Options</AntFormGroupLabel>
+        <AntColorInput v-model="lightModelValue" :options="lightColorOptions" />
+        <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 || {});