@naptics/vue-collection 0.0.3 → 0.0.5

package/components/NDropdown.js

@@ -0,0 +1,108 @@
+import { isVNode as _isVNode, createVNode as _createVNode } from "vue";
+import { createComponent, createProps } from '../utils/component';
+import { computed, Transition } from 'vue';
+import { RouterLink } from 'vue-router';
+import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue';
+import { ChevronDownIcon } from '@heroicons/vue/24/solid';
+function _isSlot(s) {
+  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !_isVNode(s);
+}
+export const nDropdownProps = createProps({
+  /**
+   * The title of the dropdown-button.
+   */
+  title: String,
+  /**
+   * The items of the dropdown.
+   * The second dimension of the array is used
+   * to create groups of items, which are visually seperated.
+   */
+  items: {
+    type: Array,
+    default: () => []
+  },
+  /**
+   * If set to `true` the panel is right-aligned to the button.
+   */
+  right: Boolean,
+  /**
+   * If set to `true` the dropdown-button is disabled and no interaction is possible.
+   */
+  disabled: Boolean,
+  /**
+   * A slot to replace the button of the dropdown.
+   */
+  button: Function
+});
+/**
+ * The `NDropdown` consists of a button and a panel with multiple actions.
+ * It is useful to group multiple actions together in one place.
+ */
+export default createComponent('NDropdown', nDropdownProps, (props, {
+  slots
+}) => {
+  const items = computed(() => {
+    if (props.items.length == 0) return [];
+    if (Array.isArray(props.items[0])) return props.items;else return [props.items];
+  });
+  const itemWithIcon = item => _createVNode("div", {
+    "class": "flex space-x-3 items-center"
+  }, [item.icon && _createVNode(item.icon, {
+    "class": ['h-5 w-5', item.disabled ? 'text-default-300' : 'text-default-400']
+  }, null), _createVNode("span", null, [item.label])]);
+  return () => _createVNode(Menu, {
+    "as": "div",
+    "class": "relative inline-block text-left"
+  }, {
+    default: () => [_createVNode("div", {
+      "class": "flex"
+    }, [props.button?.() || _createVNode(MenuButton, {
+      "disabled": props.disabled,
+      "class": ['shadow w-full flex justify-between items-center text-default-700 rounded-md border bg-white border-default-300 px-4 py-2 text-sm font-medium focus:outline-none focus:ring-offset-2 focus-visible:ring-2 focus-visible:ring-primary-500', props.disabled ? 'text-opacity-20 cursor-default' : 'hover:bg-default-100']
+    }, {
+      default: () => [_createVNode("span", null, [props.title]), _createVNode(ChevronDownIcon, {
+        "class": "-mr-1 ml-2 h-5 w-5 flex-shrink-0",
+        "aria-hidden": "true"
+      }, null)]
+    })]), _createVNode(Transition, {
+      "enterActiveClass": "transition ease-out duration-100",
+      "enterFromClass": "transform opacity-0 scale-95",
+      "enterToClass": "transform opacity-100 scale-100",
+      "leaveActiveClass": "transition ease-in duration-75",
+      "leaveFromClass": "transform opacity-100 scale-100",
+      "leaveToClass": "transform opacity-0 scale-95"
+    }, {
+      default: () => [_createVNode(MenuItems, {
+        "class": ['z-10 absolute w-56 mt-2 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none', props.right ? 'origin-top-right right-0' : 'origin-top-left left-0']
+      }, {
+        default: () => [slots.default?.() || _createVNode("div", {
+          "class": "divide-y divide-default-200"
+        }, [items.value.map((group, index) => _createVNode("div", {
+          "key": `group-${index}`,
+          "class": "py-1"
+        }, [group.map((item, index) => _createVNode(MenuItem, {
+          "key": `item-${index}`,
+          "disabled": item.disabled
+        }, {
+          default: ({
+            active
+          }) => {
+            let _slot;
+            return item.disabled ? _createVNode("div", {
+              "class": "block px-4 py-2 text-sm text-default-300"
+            }, [itemWithIcon(item)]) : item.route ? _createVNode(RouterLink, {
+              "to": item.route,
+              "class": ['block px-4 py-2 text-sm', active ? 'bg-default-100 text-default-900' : 'text-default-700']
+            }, _isSlot(_slot = itemWithIcon(item)) ? _slot : {
+              default: () => [_slot]
+            }) : _createVNode("button", {
+              "type": "button",
+              "onClick": item.onClick,
+              "class": ['w-full text-left px-4 py-2 text-sm', active ? 'bg-default-100 text-default-900' : 'text-default-700']
+            }, [itemWithIcon(item)]);
+          }
+        }))]))])]
+      })]
+    })]
+  });
+});

package/components/NDropzone.js

@@ -0,0 +1,210 @@
+import { isVNode as _isVNode, createTextVNode as _createTextVNode, Fragment as _Fragment, createVNode as _createVNode } from "vue";
+import { trslc } from '../i18n';
+import { createComponent, createProps } from '../utils/component';
+import { maxLengthSplitCenter } from '../utils/stringMaxLength';
+import { notNullish } from '../utils/utils';
+import { XMarkIcon } from '@heroicons/vue/24/solid';
+import { computed, ref } from 'vue';
+import NBadge from './NBadge';
+import NIconButton from './NIconButton';
+import NLink from './NLink';
+import { vModelProps } from '../utils/vModel';
+function _isSlot(s) {
+  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !_isVNode(s);
+}
+export const nDropzoneProps = createProps({
+  ...vModelProps(Array),
+  /**
+   * A description which files are allowed for this dropzone.
+   * This should include everything the user needs to know about
+   * the file type / the extensions and the maximum size of the file.
+   * @see {@link nDropzoneProps.accept}
+   * @see {@link nDropzoneProps.maxFileSize}
+   */
+  description: String,
+  /**
+   * The maximum amount of files which can be added to the dropzone.
+   */
+  maxFiles: {
+    type: Number,
+    default: 1
+  },
+  /**
+   * Specifies which file types are accepted. The same syntax as with inputs of type file is used.
+   * Make sure to explain the requirements to the user in the {@link nDropzoneProps.description}.
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers
+   */
+  accept: String,
+  /**
+   * Specifies the maximum size of an individual file in bytes.
+   * Make sure to explain the max size to the user in the {@link nDropzoneProps.description}.
+   */
+  maxFileSize: {
+    type: Number,
+    default: 100 * 1024 * 1024
+  },
+  /**
+   * The maximum length of the file names.
+   * Files names longer than the specified amount of characters will be shortened.
+   * @see {@link maxLengthSplitCenter}
+   */
+  maxLengthFileNames: {
+    type: Number,
+    default: 35
+  },
+  /**
+   * A tailwind height class, which is applied to the dropzone area.
+   * It is recommended to use `min-h-*` classes,
+   * so the box is always large enough to display it's text.
+   */
+  height: {
+    type: String,
+    default: 'min-h-36'
+  }
+});
+/**
+ * The `NDropzone` is an area where files can be added by the user by drag & drop.
+ * Files can also be selected with a file chooser by clicking on the dropzone.
+ */
+export default createComponent('NDropzone', nDropzoneProps, props => {
+  const fileError = ref();
+  const filterAndUpdateFiles = files => {
+    // filter for mime type and max size
+    const fileTypeFilteredFiles = files.filter(file => !props.accept || testFileWithAcceptString(props.accept, file));
+    const filteredFiles = fileTypeFilteredFiles.filter(file => file.size <= props.maxFileSize);
+    // filter for already existing files
+    const currentFiles = props.value || [];
+    filteredFiles.forEach(file => {
+      if (currentFiles.filter(currFile => currFile.name == file.name).length == 0) currentFiles.push(file);
+    });
+    // slice down to max amount of files
+    const newFiles = currentFiles.slice(0, props.maxFiles);
+    // error handling
+    const fileTypeFilterDiff = files.length - fileTypeFilteredFiles.length;
+    const fileSizeFilterDiff = fileTypeFilteredFiles.length - filteredFiles.length;
+    if (newFiles.length < currentFiles.length) fileError.value = trslc('vue-collection.error.too-many-files', props.maxFiles, {
+      max: props.maxFiles
+    });else if (fileSizeFilterDiff > 0) {
+      fileError.value = trslc('vue-collection.error.file-size', fileSizeFilterDiff, {
+        n: fileSizeFilterDiff
+      });
+    } else if (fileTypeFilterDiff > 0) fileError.value = trslc('vue-collection.error.file-type', fileTypeFilterDiff, {
+      n: fileTypeFilterDiff
+    });else fileError.value = undefined;
+    // update new value
+    props.onUpdateValue?.(newFiles);
+  };
+  const files = computed(() => props.value?.map((file, index) => ({
+    index,
+    name: maxLengthSplitCenter(file.name, props.maxLengthFileNames)
+  })) || []);
+  const removeFile = index => {
+    const newFiles = [...(props.value || [])];
+    newFiles.splice(index, 1);
+    fileError.value = undefined;
+    props.onUpdateValue?.(newFiles);
+  };
+  const clearFiles = () => {
+    fileError.value = undefined;
+    props.onUpdateValue?.([]);
+  };
+  const isDragOver = ref(false);
+  const onDrop = event => {
+    event.preventDefault();
+    isDragOver.value = false;
+    const transfer = event.dataTransfer;
+    if (transfer == null) return;
+    if (transfer.items.length > 0) {
+      const items = [...transfer.items];
+      const files = items.map(item => item.kind === 'file' ? item.getAsFile() : null).filter(notNullish);
+      filterAndUpdateFiles(files);
+    } else {
+      filterAndUpdateFiles([...transfer.files]);
+    }
+  };
+  const onDragOver = event => {
+    event.preventDefault();
+    isDragOver.value = true;
+  };
+  const onDragLeave = () => {
+    isDragOver.value = false;
+  };
+  const onClick = () => {
+    fileInput.value?.click();
+  };
+  const fileInput = ref();
+  const onInputFilesChanged = () => {
+    const input = fileInput.value;
+    if (input != null) {
+      if (input.files != null) filterAndUpdateFiles([...input.files]);
+      input.value = '';
+    }
+  };
+  return () => {
+    let _slot;
+    return _createVNode("div", null, [_createVNode("button", {
+      "class": ['block w-full rounded-md border-dashed border-2 hover:border-primary-300 hover:bg-primary-50 focus-visible:border-primary-500 focus:outline-none ', 'flex flex-col items-center justify-center text-center text-sm select-none hover:text-primary-700 p-4', isDragOver.value ? 'border-primary-300 bg-primary-50 text-primary-700' : 'border-default-300 bg-default-50 text-default-500', props.height],
+      "onDrop": onDrop,
+      "onDragover": onDragOver,
+      "onDragleave": onDragLeave,
+      "onClick": onClick
+    }, [_createVNode("input", {
+      "type": "file",
+      "class": "hidden",
+      "ref": fileInput,
+      "multiple": props.maxFiles > 1,
+      "accept": props.accept,
+      "onChange": onInputFilesChanged,
+      "onClick": event => event.stopPropagation()
+    }, null), _createVNode("div", {
+      "class": "flex-grow mb-2"
+    }, null), _createVNode("span", {
+      "class": "font-medium"
+    }, [trslc('vue-collection.text.drag-n-drop-files', props.maxFiles, {
+      n: props.maxFiles
+    })]), _createVNode("span", null, [props.description]), _createVNode("div", {
+      "class": "flex-grow mt-2 flex items-end justify-center text-red-500 font-medium"
+    }, [_createVNode("span", null, [fileError.value])])]), _createVNode("div", {
+      "class": "mt-2 space-y-1"
+    }, [_createVNode("div", {
+      "class": "flex flex-wrap gap-2 "
+    }, [files.value.map(file => _createVNode(NBadge, {
+      "key": file.index,
+      "color": "default",
+      "allCaps": false,
+      "textSize": "text-xs"
+    }, {
+      default: () => [_createVNode("div", {
+        "class": "flex items-center space-x-2"
+      }, [_createVNode("span", null, [file.name]), _createVNode(NIconButton, {
+        "icon": XMarkIcon,
+        "shade": 900,
+        "size": 3,
+        "onClick": () => removeFile(file.index)
+      }, null)])]
+    })), _createVNode("div", {
+      "class": "flex-grow text-sm text-default-500 flex items-end justify-end text-right"
+    }, [_createVNode("span", null, [_createVNode("span", null, [trslc('vue-collection.text.files-selected', files.value.length, {
+      n: files.value.length
+    })]), files.value.length > 0 && _createVNode(_Fragment, null, [_createVNode("span", null, [_createTextVNode(" ")]), _createVNode(NLink, {
+      "color": "default",
+      "onClick": clearFiles
+    }, _isSlot(_slot = trslc('vue-collection.action.clear-files', files.value.length)) ? _slot : {
+      default: () => [_slot]
+    })])])])])])]);
+  };
+});
+// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers
+const MIME_FORMAT = /^(image|audio|application|video|text)\/\*$/;
+const EXTENSION_FORMAT = /^\.\w{2,20}$/;
+function testFileWithAcceptString(accept, file) {
+  const splitted = accept.split(',').map(pattern => pattern.trim());
+  for (const pattern of splitted) {
+    if (MIME_FORMAT.test(pattern)) {
+      if (RegExp(`^${pattern.substring(0, pattern.length - 2)}\\/.{2,}$`).test(file.type)) return true;
+    } else if (EXTENSION_FORMAT.test(pattern)) {
+      if (RegExp(`^.*${pattern}$`).test(file.name)) return true;
+    }
+  }
+  return false;
+}

package/components/NForm.js

@@ -0,0 +1,28 @@
+import { createVNode as _createVNode } from "vue";
+import { createComponent, createProps } from '../utils/component';
+export const nFormProps = createProps({
+  /**
+   * The {@link ValidatedForm} which will be used to validate the inputs.
+   * All inputs in this forms hierarchy should be added to the {@link ValidatedForm}.
+   */
+  form: Object,
+  /**
+   * This is called, when a button of type `submit` in the hierarchy of this view is clicked
+   * and when the validation of the `form` was successful.
+   */
+  onSubmit: Function
+});
+/**
+ * The `NForm` should be used to wrap multiple inputs.
+ * If it contains a button of type `submit` in it's hierarchy,
+ * it catches the submit event and passes it to the {@link ValidatedForm} in its `form` prop.
+ */
+export default createComponent('NForm', nFormProps, (props, context) => {
+  const onSubmit = event => {
+    event.preventDefault();
+    if (!props.form || props.form.validate().isValid) props.onSubmit?.();
+  };
+  return () => _createVNode("form", {
+    "onSubmit": onSubmit
+  }, [context.slots.default?.()]);
+});

package/components/NFormModal.js

@@ -0,0 +1,54 @@
+import { createVNode as _createVNode } from "vue";
+import { createComponent, createProps } from '../utils/component';
+import { reactive, toRefs } from 'vue';
+import NForm from './NForm';
+import NModal, { nModalProps } from './NModal';
+export const nFormModalProps = createProps({
+  ...nModalProps,
+  /**
+   * The maximum width of the modal. A regular tailwind class.
+   */
+  maxWidth: {
+    type: String,
+    default: 'max-w-lg'
+  },
+  /**
+   * If set to `true` the modal closes when clicking on the background.
+   * Default is `false` as the accidental reseting of the whole form is very annoying.
+   */
+  closeOnBackground: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * The {@link ValidatedForm} to validate the inputs.
+   * All inputs should be added to the form.
+   */
+  form: Object
+});
+/**
+ * The `NFormModal` is a {@link NModal} with an integrated form.
+ * When submitting a `NFormModal` the form is first validated and
+ * only if the validation is succesful the `onOk` event is called.
+ */
+export default createComponent('NFormModal', nFormModalProps, (props, {
+  slots
+}) => {
+  const childProps = reactive({
+    ...toRefs(props),
+    onOk: () => {
+      if (!props.form || props.form.validate().isValid) {
+        props.onOk?.();
+        if (props.closeOnOk) props.onUpdateValue?.(false);
+      }
+    },
+    closeOnOk: false
+  });
+  return () => _createVNode(NModal, childProps, {
+    default: () => [_createVNode(NForm, {
+      "form": props.form
+    }, {
+      default: () => [slots.default?.()]
+    })]
+  });
+});

package/components/NIconButton.js

@@ -0,0 +1,81 @@
+import { isVNode as _isVNode, createVNode as _createVNode } from "vue";
+import { createComponent, createProps } from '../utils/component';
+import { RouterLink } from 'vue-router';
+import { nButtonProps } from './NButton';
+import NTooltip, { mapTooltipProps, nToolTipPropsForImplementor } from './NTooltip';
+function _isSlot(s) {
+  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !_isVNode(s);
+}
+export const nIconButtonProps = createProps({
+  /**
+   * The icon of the icon-button.
+   */
+  icon: {
+    type: Function,
+    required: true
+  },
+  /**
+   * The route of the icon-button. If this is set, the icon-button becomes a {@link RouterLink}.
+   */
+  route: [String, Object],
+  /**
+   * The color of the icon-button.
+   */
+  color: {
+    type: String,
+    default: 'default'
+  },
+  /**
+   * The shade of the icon-button.
+   */
+  shade: {
+    type: Number,
+    default: 500
+  },
+  /**
+   * The size of the icon in tailwind-units.
+   */
+  size: {
+    type: Number,
+    default: 5
+  },
+  /**
+   * The html attribute, which indicates the type of the button.
+   */
+  type: nButtonProps.type,
+  /**
+   * If set to `true` the icon-button is disabled and no interaction is possible.
+   */
+  disabled: Boolean,
+  /**
+   * This is called when the icon-button is clicked.
+   * It is only called when the `route` prop is not set on the icon-button.
+   */
+  onClick: Function,
+  ...nToolTipPropsForImplementor
+});
+/**
+ * The `NIconButton` is a regular button which does not have any text but an icon instead.
+ */
+export default createComponent('NIconButton', nIconButtonProps, props => {
+  const classes = () => ['block p-0.5 rounded-md focus:outline-none focus-visible:ring-2 -m-1', props.disabled ? `text-${props.color}-200 cursor-default` : `hover:bg-${props.color}-${props.shade} hover:bg-opacity-10 text-${props.color}-${props.shade} focus-visible:ring-${props.color}-${props.shade} cursor-pointer`];
+  const content = () => _createVNode(props.icon, {
+    "class": `w-${props.size} h-${props.size}`
+  }, null);
+  return () => {
+    let _slot;
+    return _createVNode(NTooltip, mapTooltipProps(props), {
+      default: () => [props.route ? _createVNode(RouterLink, {
+        "to": props.route,
+        "class": classes()
+      }, _isSlot(_slot = content()) ? _slot : {
+        default: () => [_slot]
+      }) : _createVNode("button", {
+        "type": props.type,
+        "disabled": props.disabled,
+        "class": classes(),
+        "onClick": props.onClick
+      }, [content()])]
+    });
+  };
+});

package/components/NIconCircle.js

@@ -0,0 +1,66 @@
+import { createVNode as _createVNode } from "vue";
+import { createComponent, createProps } from '../utils/component';
+export const nIconCircleProps = createProps({
+  /**
+   * The icon of the icon-circle.
+   */
+  icon: {
+    type: Function,
+    required: true
+  },
+  /**
+   * The color of the icon-circle.
+   */
+  color: {
+    type: String,
+    default: 'primary'
+  },
+  /**
+   * The size of the circle in "tailwind units" (4 px).
+   * Tailwind classes are used for the size, so any number can be passed.
+   * If the `iconSize` is not set, it will be adjusted automatically.
+   */
+  circleSize: Number,
+  /**
+   * The size of the icon in "tailwind units" (4 px).
+   * No tailwind classes are used for the size, so any number can be passed.
+   * If the `circleSize` is not set, it will be adjusted automatically.
+   */
+  iconSize: Number,
+  /**
+   * The shade of the icon.
+   */
+  iconShade: {
+    type: Number,
+    default: 600
+  },
+  /**
+   * The shade of the background.
+   */
+  bgShade: {
+    type: Number,
+    default: 100
+  }
+});
+const DEFAULT_CIRCLE_SIZE = 16;
+const SCALING_FACTOR = 0.55;
+/**
+ * The `NIconCircle` is an icon with a colored circle around it.
+ */
+export default createComponent('NIconCircle', nIconCircleProps, props => {
+  let circleSize = props.circleSize;
+  let iconSize = props.iconSize;
+  if (circleSize == null) {
+    if (iconSize == null) circleSize = DEFAULT_CIRCLE_SIZE;else circleSize = iconSize / SCALING_FACTOR;
+  }
+  if (iconSize == null) iconSize = circleSize * SCALING_FACTOR;
+  circleSize *= 4;
+  iconSize *= 4;
+  return () => _createVNode("div", {
+    "class": ['flex items-center justify-center rounded-full', `bg-${props.color}-${props.bgShade}`],
+    "style": `width: ${circleSize}px; height: ${circleSize}px`
+  }, [_createVNode("div", {
+    "class": `text-${props.color}-${props.iconShade}`,
+    "style": `width: ${iconSize}px; height: ${iconSize}px`
+  }, [_createVNode(props.icon, null, null)])]);
+});

package/components/NInput.js

@@ -0,0 +1,105 @@
+import { mergeProps as _mergeProps, withDirectives as _withDirectives, vShow as _vShow, createVNode as _createVNode } from "vue";
+import { createComponent, createProps } from '../utils/component';
+import { ref } from 'vue';
+import { ExclamationCircleIcon } from '@heroicons/vue/24/solid';
+import NTooltip, { mapTooltipProps, nToolTipPropsForImplementor } from './NTooltip';
+import './NInput.css';
+import { vModelProps } from '../utils/vModel';
+export const nInputProps = createProps({
+  ...vModelProps(String),
+  /**
+   * The name of the input. Is displayed as a label above the input.
+   */
+  name: String,
+  /**
+   * The placeholder of the input.
+   */
+  placeholder: String,
+  /**
+   * The html autocomplete attribute of the input.
+   */
+  autocomplete: {
+    type: String,
+    default: 'off'
+  },
+  /**
+   * The html type attribute of the input.
+   */
+  type: {
+    type: String,
+    default: 'text'
+  },
+  /**
+   * The maximum value of the input.
+   */
+  max: String,
+  /**
+   * The minimum value of the input.
+   */
+  min: String,
+  /**
+   * If set to `true` the input is displayed with a red border.
+   */
+  error: Boolean,
+  /**
+   * If set to `true` the input is disabled and no interaction is possible.
+   */
+  disabled: Boolean,
+  /**
+   * If set to `true` the input is displayed smaller.
+   */
+  small: Boolean,
+  /**
+   * If set to `true` the input's label is hidden.
+   */
+  hideLabel: Boolean,
+  /**
+   * This is called when the input reveices focus.
+   */
+  onFocus: Function,
+  /**
+   * This is called when the input looses focus.
+   */
+  onBlur: Function,
+  ...nToolTipPropsForImplementor
+});
+/**
+ * The base class of inputs. A styled input with a lot of configuration possibilities but no validation.
+ */
+export default createComponent('NInput', nInputProps, (props, context) => {
+  const inputRef = ref();
+  const exposed = {
+    focus: () => inputRef.value?.focus()
+  };
+  context.expose(exposed);
+  return () => _createVNode("div", null, [props.name && !props.hideLabel && _createVNode("label", {
+    "for": props.name,
+    "class": ['block text-sm font-medium mb-1', props.disabled ? 'text-default-300' : 'text-default-700']
+  }, [props.name]), _createVNode(NTooltip, _mergeProps({
+    "block": true
+  }, mapTooltipProps(props)), {
+    default: () => [_createVNode("div", {
+      "class": "relative"
+    }, [_createVNode("input", {
+      "ref": inputRef,
+      "name": props.name,
+      "value": props.value,
+      "onInput": event => props.onUpdateValue?.(event.target.value),
+      "placeholder": props.placeholder,
+      "autocomplete": props.autocomplete,
+      "type": props.type,
+      "min": props.min,
+      "max": props.max,
+      "disabled": props.disabled,
+      "onFocus": () => props.onFocus?.(),
+      "onBlur": () => props.onBlur?.(),
+      "onInvalid": event => event.preventDefault(),
+      "class": ['block w-full rounded-md border focus:outline-none focus:ring-1 ', props.small ? 'text-xs py-0.5 px-2' : 'py-2 px-4', props.disabled ? 'text-default-500 placeholder-default-300 bg-default-50' : 'text-default-900 placeholder-default-400 ', props.error ? 'border-red-500 focus:border-red-500 focus:ring-red-500 pr-10' : 'border-default-300 focus:border-primary-500 focus:ring-primary-500']
+    }, null), _withDirectives(_createVNode("div", {
+      "class": "absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none"
+    }, [_createVNode(ExclamationCircleIcon, {
+      "class": "h-5 w-5 text-red-700",
+      "aria-hidden": "true"
+    }, null)]), [[_vShow, props.error && !props.small]])])]
+  })]);
+});