@antify/ui 2.2.16 → 2.3.0

package/dist/components/index.d.ts

@@ -38,6 +38,7 @@ import AntTagInput from './inputs/AntTagInput.vue';
 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 AntNavLeftLayout from './layouts/AntNavLeftLayout.vue';
 import AntNavbar from './navbar/AntNavbar.vue';
 import AntNavbarItem from './navbar/AntNavbarItem.vue';
@@ -63,4 +64,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, 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, };

package/dist/components/index.js

@@ -171,6 +171,12 @@ Object.defineProperty(exports, "AntIcon", {
     return _AntIcon.default;
   }
 });
+Object.defineProperty(exports, "AntImageInput", {
+  enumerable: true,
+  get: function () {
+    return _AntImageInput.default;
+  }
+});
 Object.defineProperty(exports, "AntInputDescription", {
   enumerable: true,
   get: function () {
@@ -433,6 +439,7 @@ var _AntTagInput = _interopRequireDefault(require("./inputs/AntTagInput.vue"));
 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 _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

@@ -38,6 +38,7 @@ import AntTagInput from "./inputs/AntTagInput.vue";
 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 AntNavLeftLayout from "./layouts/AntNavLeftLayout.vue";
 import AntNavbar from "./navbar/AntNavbar.vue";
 import AntNavbarItem from "./navbar/AntNavbarItem.vue";
@@ -104,6 +105,7 @@ export {
   AntTextarea,
   AntTextInput,
   AntUnitInput,
+  AntImageInput,
   AntNavLeftLayout,
   AntNavbar,
   AntNavbarItem,

package/dist/components/inputs/AntImageInput.vue

@@ -0,0 +1,199 @@
+<script lang="ts" setup>
+import {
+  computed,
+  onMounted,
+  ref,
+} from 'vue';
+import AntField from '../forms/AntField.vue';
+import {
+  Size,
+} from '../../enums/Size.enum';
+import {
+  InputState, State,
+} from '../../enums';
+import {
+  useVModel,
+} from '@vueuse/core';
+import {
+  handleEnumValidation,
+} from '../../handler';
+import {
+  faImage, faMultiply, faUpload,
+} from '@fortawesome/free-solid-svg-icons';
+import AntIcon from '../AntIcon.vue';
+import {
+  IconSize,
+} from '../__types';
+import AntButton from '../buttons/AntButton.vue';
+import AntSpinner from '../AntSpinner.vue';
+import AntInputDescription from './Elements/AntInputDescription.vue';
+import AntSkeleton from '../AntSkeleton.vue';
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const props = withDefaults(defineProps<{
+  modelValue: string | null;
+  loading?: boolean;
+  label?: string;
+  placeholder?: string;
+  description?: string;
+  size?: Size;
+  state?: InputState;
+  disabled?: boolean;
+  skeleton?: boolean;
+  wrapperClass?: string | Record<string, boolean>;
+  messages?: string[];
+  expanded?: boolean;
+}>(), {
+  state: InputState.base,
+  disabled: false,
+  skeleton: false,
+  size: Size.md,
+  messages: () => [],
+  expanded: true,
+  loading: false,
+});
+const emit = defineEmits([
+  'update:modelValue',
+  'validate',
+]);
+const _modelValue = useVModel(props, 'modelValue', emit);
+const descriptionFontSize = computed(() => {
+  if (props.size === Size.xs2 || props.size === Size.xs) {
+    return Size.xs;
+  }
+
+  return Size.sm;
+});
+const fileInput = ref<HTMLInputElement | null>(null);
+
+const openFileDialog = () => {
+  fileInput.value?.click();
+};
+
+const handleFileChange = (event: Event) => {
+  const target = event.target as HTMLInputElement;
+  const file = target.files?.[0];
+  if (file) {
+    const reader = new FileReader();
+    reader.onload = () => {
+      emit('update:modelValue', reader.result as string);
+    };
+    reader.readAsDataURL(file);
+  }
+};
+
+onMounted(() => {
+  handleEnumValidation(props.state, InputState, 'state');
+  handleEnumValidation(props.size, Size, 'size');
+});
+</script>
+
+<template>
+  <AntField
+    :label="label"
+    :size="size"
+    :skeleton="skeleton"
+    :state="state"
+    :messages="messages"
+    :expanded="expanded"
+  >
+    <div
+      class="flex gap-2.5 w-full"
+      :class="{'cursor-pointer': !disabled && !skeleton}"
+    >
+      <div>
+        <div class="h-[70px] w-[70px] bg-gray-100 rounded-full overflow-hidden flex items-center justify-center relative">
+          <img
+            v-if="_modelValue && !skeleton"
+            :src="_modelValue"
+            alt="Image"
+            class="h-full w-full object-cover"
+          >
+
+          <AntIcon
+            v-else
+            class="text-base-300"
+            :size="IconSize.xl3"
+            :icon="faImage"
+          />
+
+          <div
+            v-if="loading"
+            class="absolute flex items-center justify-center inset-0 bg-base-600/50 rounded-full"
+          >
+            <AntSpinner
+              :state="State.primary"
+            />
+          </div>
+
+          <AntSkeleton
+            v-if="skeleton"
+            absolute
+            rounded-full
+          />
+        </div>
+      </div>
+
+      <div class="flex flex-col gap-2.5 w-full">
+        <div class="flex items-center relative w-full justify-between">
+          <input
+            v-if="!disabled && !skeleton"
+            ref="fileInput"
+            type="file"
+            accept="image/*"
+            class="hidden"
+            @change="handleFileChange"
+          >
+
+          <span class="text-sm text-for-white-bg-font relative">
+            Upload Image
+
+            <AntSkeleton
+              v-if="skeleton"
+              absolute
+              rounded
+            />
+          </span>
+
+          <AntButton
+            v-if="_modelValue"
+            :size="Size.lg"
+            :icon-left="faMultiply"
+            :skeleton="skeleton"
+            :disabled="disabled"
+            @click.prevent="() => _modelValue = null"
+          >
+            <template #tooltip-content>
+              Remove image
+            </template>
+          </AntButton>
+
+          <AntButton
+            v-else
+            :size="Size.lg"
+            :icon-left="faUpload"
+            :skeleton="skeleton"
+            :disabled="disabled"
+            @click="openFileDialog"
+          >
+            <template #tooltip-content>
+              Upload image
+            </template>
+          </AntButton>
+        </div>
+
+        <AntInputDescription
+          v-if="description"
+          :skeleton="skeleton"
+          :size="descriptionFontSize"
+          :state="state"
+        >
+          {{ description }}
+        </AntInputDescription>
+      </div>
+    </div>
+  </AntField>
+</template>

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

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

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

@@ -0,0 +1,139 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = exports.Summary = exports.Skeleton = exports.Empty = exports.Docs = exports.Disabled = void 0;
+var _Size = require("../../../enums/Size.enum");
+var _AntImageInput = _interopRequireDefault(require("../AntImageInput.vue"));
+var _enums = require("../../../enums");
+var _AntFormGroupLabel = _interopRequireDefault(require("../../forms/AntFormGroupLabel.vue"));
+var _AntFormGroup = _interopRequireDefault(require("../../forms/AntFormGroup.vue"));
+var _vue = require("vue");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const meta = {
+  title: "Inputs/Image Input",
+  component: _AntImageInput.default,
+  parameters: {
+    controls: {
+      sort: "requiredFirst"
+    }
+  },
+  argTypes: {
+    modelValue: {
+      table: {
+        type: {
+          summary: "string|null"
+        }
+      }
+    },
+    state: {
+      control: {
+        type: "select"
+      },
+      options: Object.values(_enums.InputState)
+    },
+    size: {
+      control: {
+        type: "select"
+      },
+      options: Object.values(_Size.Size)
+    },
+    placeholder: {
+      table: {
+        defaultValue: {
+          summary: "this.label"
+        }
+      }
+    }
+  }
+};
+module.exports = meta;
+const Docs = exports.Docs = {
+  render: args => ({
+    components: {
+      AntImageInput: _AntImageInput.default
+    },
+    setup() {
+      return {
+        args
+      };
+    },
+    template: `
+      <AntImageInput
+        v-bind="args"
+        v-model="args.modelValue"
+      />`
+  }),
+  args: {
+    modelValue: "/avatar.jpg",
+    label: "Label",
+    description: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
+  }
+};
+const Empty = exports.Empty = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    modelValue: null
+  }
+};
+const Skeleton = exports.Skeleton = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    skeleton: true
+  }
+};
+const Disabled = exports.Disabled = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    disabled: true
+  }
+};
+const Summary = exports.Summary = {
+  parameters: {
+    chromatic: {
+      disableSnapshot: false
+    }
+  },
+  render: () => ({
+    components: {
+      AntFormGroupLabel: _AntFormGroupLabel.default,
+      AntImageInput: _AntImageInput.default,
+      AntFormGroup: _AntFormGroup.default,
+      ref: _vue.ref
+    },
+    setup() {
+      const valuedModelValue = (0, _vue.ref)("/avatar.jpg");
+      const emptyModelValue = (0, _vue.ref)(null);
+      return {
+        valuedModelValue,
+        emptyModelValue
+      };
+    },
+    template: `
+     <AntFormGroup>
+       <AntFormGroupLabel>Default</AntFormGroupLabel>
+       <AntImageInput
+         v-model="valuedModelValue"
+         label="Label"
+         description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
+       />
+       <AntFormGroupLabel>Empty</AntFormGroupLabel>
+       <AntImageInput
+         v-model="emptyModelValue"
+         label="Label"
+         description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
+       />
+       <AntFormGroupLabel>Disabled</AntFormGroupLabel>
+       <AntImageInput
+         v-model="valuedModelValue"
+         label="Label"
+         description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
+       />
+     </AntFormGroup>
+    `
+  })
+};

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

@@ -0,0 +1,138 @@
+import {
+  Size
+} from "../../../enums/Size.enum.mjs";
+import AntImageInput from "../AntImageInput.vue";
+import {
+  InputState
+} from "../../../enums/index.mjs";
+import AntFormGroupLabel from "../../forms/AntFormGroupLabel.vue";
+import AntFormGroup from "../../forms/AntFormGroup.vue";
+import {
+  ref
+} from "vue";
+const meta = {
+  title: "Inputs/Image Input",
+  component: AntImageInput,
+  parameters: {
+    controls: {
+      sort: "requiredFirst"
+    }
+  },
+  argTypes: {
+    modelValue: {
+      table: {
+        type: {
+          summary: "string|null"
+        }
+      }
+    },
+    state: {
+      control: {
+        type: "select"
+      },
+      options: Object.values(InputState)
+    },
+    size: {
+      control: {
+        type: "select"
+      },
+      options: Object.values(Size)
+    },
+    placeholder: {
+      table: {
+        defaultValue: {
+          summary: "this.label"
+        }
+      }
+    }
+  }
+};
+export default meta;
+export const Docs = {
+  render: (args) => ({
+    components: {
+      AntImageInput
+    },
+    setup() {
+      return {
+        args
+      };
+    },
+    template: `
+      <AntImageInput
+        v-bind="args"
+        v-model="args.modelValue"
+      />`
+  }),
+  args: {
+    modelValue: "/avatar.jpg",
+    label: "Label",
+    description: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
+  }
+};
+export const Empty = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    modelValue: null
+  }
+};
+export const Skeleton = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    skeleton: true
+  }
+};
+export const Disabled = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    disabled: true
+  }
+};
+export const Summary = {
+  parameters: {
+    chromatic: {
+      disableSnapshot: false
+    }
+  },
+  render: () => ({
+    components: {
+      AntFormGroupLabel,
+      AntImageInput,
+      AntFormGroup,
+      ref
+    },
+    setup() {
+      const valuedModelValue = ref("/avatar.jpg");
+      const emptyModelValue = ref(null);
+      return {
+        valuedModelValue,
+        emptyModelValue
+      };
+    },
+    template: `
+     <AntFormGroup>
+       <AntFormGroupLabel>Default</AntFormGroupLabel>
+       <AntImageInput
+         v-model="valuedModelValue"
+         label="Label"
+         description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
+       />
+       <AntFormGroupLabel>Empty</AntFormGroupLabel>
+       <AntImageInput
+         v-model="emptyModelValue"
+         label="Label"
+         description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
+       />
+       <AntFormGroupLabel>Disabled</AntFormGroupLabel>
+       <AntImageInput
+         v-model="valuedModelValue"
+         label="Label"
+         description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
+       />
+     </AntFormGroup>
+    `
+  })
+};

package/package.json

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