@naptics/vue-collection 0.0.3 → 0.0.4

package/components/NSearchbar.js

@@ -0,0 +1,66 @@
+import { createVNode as _createVNode } from "vue";
+import { trsl } from '../i18n';
+import { createComponent, createProps } from '../utils/component';
+import { MagnifyingGlassIcon } from '@heroicons/vue/24/solid';
+import { ref } from 'vue';
+import { vModelProps } from '../utils/vModel';
+export const nSearchbarProps = createProps({
+  ...vModelProps(String),
+  /**
+   * The placeholder of the search-bar.
+   */
+  placeholder: {
+    type: String,
+    default: trsl('vue-collection.action.search')
+  },
+  /**
+   * If set to `true` the search-bar is displayed smaller.
+   */
+  small: Boolean,
+  /**
+   * The classes are directly added to the input (e.g. for shadow).
+   */
+  inputClass: String,
+  /**
+   * This is called when the search-bar receives focus.
+   */
+  onFocus: Function,
+  /**
+   * This is called when the search-bar looses focus.
+   */
+  onBlur: Function
+});
+/**
+ * The `NSearchbar` is a styled input with a search icon.
+ */
+export default createComponent('NSearchbar', nSearchbarProps, (props, context) => {
+  const inputRef = ref();
+  const exposed = {
+    focus: () => {
+      inputRef.value?.focus();
+    }
+  };
+  context.expose(exposed);
+  return () => _createVNode("div", null, [_createVNode("label", {
+    "for": "search",
+    "class": "sr-only"
+  }, [props.placeholder]), _createVNode("div", {
+    "class": "relative"
+  }, [_createVNode("div", {
+    "class": "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"
+  }, [_createVNode(MagnifyingGlassIcon, {
+    "class": "h-5 w-5 text-default-400",
+    "aria-hidden": "true"
+  }, null)]), _createVNode("input", {
+    "ref": inputRef,
+    "value": props.value,
+    "onInput": event => props.onUpdateValue?.(event.target.value),
+    "type": "text",
+    "name": "search",
+    "placeholder": props.placeholder,
+    "autocomplete": "off",
+    "class": ['block w-full pl-10 pr-4 rounded-md border focus:outline-none focus:ring-1 transition placeholder-default-400 border-default-300 focus:border-primary-500 focus:ring-primary-500', props.small ? 'py-1' : 'py-2', props.inputClass],
+    "onFocus": props.onFocus,
+    "onBlur": props.onBlur
+  }, null)])]);
+});

package/components/NSearchbarList.js

@@ -0,0 +1,36 @@
+import { mergeProps as _mergeProps, createVNode as _createVNode } from "vue";
+import { createComponent, createProps } from '../utils/component';
+import { ref } from 'vue';
+import { vModelProps } from '../utils/vModel';
+import NSearchbar, { nSearchbarProps } from './NSearchbar';
+import NSuggestionList, { nSuggestionListPropsForConfig } from './NSuggestionList';
+export const nSearchbarListProps = createProps({
+  ...nSuggestionListPropsForConfig,
+  ...vModelProps(String),
+  /**
+   * @see {@link nSearchbarProps.placeholder}
+   */
+  placeholder: nSearchbarProps.placeholder
+});
+/**
+ * The `NSearchbarList` is a {@link NSearchbar} with a {@link NSuggestionList}.
+ */
+export default createComponent('NSearchbarList', nSearchbarListProps, props => {
+  const searchbarRef = ref();
+  return () => _createVNode(NSuggestionList, _mergeProps(props, {
+    "inputValue": props.value || '',
+    "input": ({
+      onFocus,
+      onBlur
+    }) => _createVNode(NSearchbar, {
+      "ref": searchbarRef,
+      "value": props.value,
+      "onUpdateValue": props.onUpdateValue,
+      "placeholder": props.placeholder,
+      "inputClass": "shadow-lg",
+      "onFocus": onFocus,
+      "onBlur": onBlur
+    }, null),
+    "onRequestInputFocus": () => searchbarRef.value?.focus()
+  }), null);
+});

package/components/NSelect.js

@@ -0,0 +1,84 @@
+import { mergeProps as _mergeProps, createVNode as _createVNode, Fragment as _Fragment } from "vue";
+import { trsl } from '../i18n';
+import { createComponent, createProps } from '../utils/component';
+import { ref } from 'vue';
+import NTooltip, { mapTooltipProps, nToolTipPropsForImplementor } from './NTooltip';
+import NValInput, { nValInputProps } from './NValInput';
+export const nSelectProps = createProps({
+  /**
+   * The id of the currently selected option of this input.
+   */
+  value: String,
+  /**
+   * This is called with the newly selected id when the selection has changed.
+   * If no id is selected, the empty string is passed, in order to
+   * match the API of all other inputs who never pass `undefined`.
+   */
+  onUpdateValue: Function,
+  /**
+   * The different options which can be selected.
+   */
+  options: {
+    type: Array,
+    default: () => []
+  },
+  /**
+   * @see {@link nValInputProps.name}
+   */
+  name: nValInputProps.name,
+  /**
+   * @see {@link nValInputProps.optional}
+   */
+  optional: nValInputProps.optional,
+  /**
+   * @see {@link nValInputProps.disabled}
+   */
+  disabled: nValInputProps.disabled,
+  /**
+   * @see {@link nValInputProps.form}
+   */
+  form: nValInputProps.form,
+  ...nToolTipPropsForImplementor
+});
+/**
+ * The `NSelect` is a styled html select-input.
+ */
+export default createComponent('NSelect', nSelectProps, (props, context) => {
+  const inputRef = ref();
+  const exposed = {
+    focus: () => inputRef.value?.focus(),
+    validate: () => {
+      if (inputRef.value == null) throw new Error('Can not validate NSelect as its input was undefined');
+      return inputRef.value.validate();
+    },
+    reset: () => inputRef.value?.reset()
+  };
+  context.expose(exposed);
+  return () => _createVNode(NValInput, _mergeProps({
+    "ref": inputRef
+  }, props, {
+    "input": slotProps => _createVNode(_Fragment, null, [_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("select", {
+        "name": props.name,
+        "disabled": props.disabled,
+        "value": props.value,
+        "onChange": event => slotProps.onUpdateValue(event.target.value),
+        "onBlur": slotProps.onBlur,
+        "class": ['block w-full py-2 pl-4 pr-10 rounded-md border focus:outline-none focus:ring-1', props.disabled ? 'text-default-300 ' : 'text-default-900 ', slotProps.error ? 'border-red-500 focus:border-red-500 focus:ring-red-500' : 'border-default-300 focus:border-primary-500 focus:ring-primary-500']
+      }, [_createVNode("option", {
+        "disabled": !props.optional,
+        "selected": !props.value,
+        "value": ""
+      }, [trsl('vue-collection.action.select')]), props.options.map(option => _createVNode("option", {
+        "key": option.id,
+        "value": option.id,
+        "selected": props.value == option.id
+      }, [option.label]))])]
+    })])
+  }), null);
+});

package/components/NSuggestionList.js

@@ -0,0 +1,156 @@
+import { createTextVNode as _createTextVNode, createVNode as _createVNode } from "vue";
+import { trsl } from '../i18n';
+import { createComponent, createProps } from '../utils/component';
+import { computed, ref } from 'vue';
+import NLoadingIndicator from './NLoadingIndicator';
+export const nSuggestionListPropsForConfig = createProps({
+  /**
+   * The items which are available to show in the list. The first `maxItems` will be displayed.
+   */
+  items: {
+    type: Array,
+    default: () => []
+  },
+  /**
+   * The maximum items which are displayed in the list.
+   */
+  maxItems: {
+    type: Number,
+    default: () => 8
+  },
+  /**
+   * If set to `true` the list is hidden.
+   */
+  hideList: Boolean,
+  /**
+   * If set to `true` the list shows a loading indicator when the `items` array is empty.
+   */
+  loading: Boolean,
+  /**
+   * This is called with the id of the selected item.
+   */
+  onSelect: Function,
+  /**
+   * The slot for every item of the list.
+   */
+  listItem: Function,
+  /**
+   * This function is called, when the input and the suggestion list are really blurred.
+   * This means, it's not just the input temporarly beeing blurred because the user clicks on the item list,
+   * but the focus has completely disappeared from the input and the list.
+   */
+  onRealBlur: Function
+});
+export const nSuggestionListPropsForInput = createProps({
+  /**
+   * The slot for the input, which will be enhanced with the suggestion list.
+   */
+  input: {
+    type: Function,
+    required: true
+  },
+  /**
+   * When this function is called, the parent is required to call focus() on the input element.
+   * It won't work properly if the parent does not request focus on the input.
+   */
+  onRequestInputFocus: {
+    type: Function,
+    required: true
+  },
+  /**
+   * The current value of the input. This is just needed to display the «No results found for {value}» message.
+   */
+  inputValue: {
+    type: String,
+    required: true
+  }
+});
+export const nSuggestionListProps = createProps({
+  ...nSuggestionListPropsForConfig,
+  ...nSuggestionListPropsForInput
+});
+/**
+ * The `NSuggestionList` can be added to an input and adds a list below it which is shown when the input is focused.
+ */
+export default createComponent('NSuggestionList', nSuggestionListProps, props => {
+  const selectedIndex = ref(null);
+  const displayItems = computed(() => props.items.slice(0, props.maxItems));
+  const isInFocus = ref(false);
+  const showList = computed(() => isInFocus.value && !props.hideList);
+  let listButtonClicked = false;
+  const onFocus = () => isInFocus.value = true;
+  const onListMouseDown = () => listButtonClicked = true;
+  const onListMouseLeave = () => props.onRequestInputFocus();
+  const onBlur = () => {
+    if (!listButtonClicked) {
+      isInFocus.value = false;
+      props.onRealBlur?.();
+    }
+    listButtonClicked = false;
+  };
+  const onSelect = id => {
+    props.onSelect?.(id);
+    props.onRequestInputFocus();
+  };
+  const keydown = event => {
+    if (event.key == 'ArrowDown') {
+      event.preventDefault();
+      nextItem();
+    } else if (event.key == 'ArrowUp') {
+      event.preventDefault();
+      previoiusItem();
+    } else if (event.key == 'Enter') {
+      event.preventDefault();
+      const index = selectedIndex.value;
+      if (index != null && index < displayItems.value.length) {
+        onSelect(displayItems.value[index].id);
+      }
+    }
+  };
+  const nextItem = () => {
+    adjustIndexToSize();
+    const currentIndex = selectedIndex.value;
+    let nextIndex = currentIndex == null ? 0 : currentIndex + 1;
+    if (nextIndex >= displayItems.value.length) nextIndex = null;
+    selectedIndex.value = nextIndex;
+  };
+  const previoiusItem = () => {
+    adjustIndexToSize();
+    const currentIndex = selectedIndex.value;
+    let previousIndex = currentIndex == null ? displayItems.value.length - 1 : currentIndex - 1;
+    if (previousIndex < 0) previousIndex = null;
+    selectedIndex.value = previousIndex;
+  };
+  const adjustIndexToSize = () => {
+    if (selectedIndex.value != null && selectedIndex.value >= displayItems.value.length) {
+      selectedIndex.value = null;
+    }
+  };
+  return () => _createVNode("div", {
+    "onKeydown": keydown
+  }, [props.input({
+    onFocus,
+    onBlur
+  }), _createVNode("div", {
+    "class": "relative"
+  }, [showList.value && _createVNode("div", {
+    "class": "bg-white rounded-md shadow-lg p-2 absolute top-2 left-0 min-w-full z-10"
+  }, [_createVNode("ul", null, [displayItems.value.map((item, index) => _createVNode("li", {
+    "key": item.id,
+    "class": ['focus:outline-none hover:bg-default-50 rounded-md select-none p-2 cursor-pointer', selectedIndex.value === index ? 'bg-default-50' : ''],
+    "onMousedown": onListMouseDown,
+    "onMouseleave": onListMouseLeave,
+    "onClick": () => onSelect(item.id)
+  }, [props.listItem?.({
+    item,
+    highlighted: selectedIndex.value === index
+  }) || item.label])), displayItems.value.length == 0 && _createVNode("div", {
+    "class": "p-2 text-sm font-medium text-default-700"
+  }, [props.loading ? _createVNode("div", {
+    "class": "flex items-center space-x-2"
+  }, [_createVNode(NLoadingIndicator, {
+    "size": 6
+  }, null), _createVNode("span", null, [_createTextVNode(" "), trsl('vue-collection.text.loading-search-results')])]) : _createVNode("div", null, [trsl('vue-collection.text.no-search-results', {
+    input: props.inputValue
+  })])])])])])]);
+});

package/components/NTable.js

@@ -0,0 +1,126 @@
+import { Fragment as _Fragment, createVNode as _createVNode } from "vue";
+import { isWidthBreakpoint } from '../utils/breakpoints';
+import { createComponent, createProps } from '../utils/component';
+import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/vue/24/solid';
+import { computed, Fragment, ref, watch } from 'vue';
+import NIconButton from './NIconButton';
+import './NTable.css';
+const N_TABLE_ACTION_KEY = 'action';
+export const nTableProps = createProps({
+  /**
+   * The headings of the table. These define which columns are shown in the table and in which order.
+   */
+  headings: {
+    type: Array,
+    required: true
+  },
+  /**
+   * Details can be added additionally to headings.
+   * If details are set a little chevron icon is displayed at the end of each table row
+   * and if clicked on it the data is displayed in a key-value fashion.
+   * The values of the entries should be passed via the `items` prop
+   * in the same way as if the details were normal headings.
+   * Note that details can be added dynamically by adding the `breakpoint` property to the headings.
+   */
+  details: {
+    type: Array,
+    default: () => []
+  },
+  /**
+   * The items of the table. They consist of an array of table rows.
+   * Every tablerow is an object containing elements for the heading keys.
+   * The elements can either be a primitive value or a function which returns a {@link JSX.Element}.
+   * If the item should be treated as an action (e.g. icon-button to display at the end of the row)
+   * the dedicated key 'action' can be used.
+   * @see TableRow
+   * @example
+   * // These headings are defined
+   * const headings: TableHeading[] = [
+   *    { key: 'id', label: 'ID' },
+   *    { key: 'name', label: 'Name' },
+   *    { key: 'status', label: 'Status' }
+   * ]
+   *
+   * // Appropriate rows for these headings
+   * const items: TableRow[] = [
+   *      { id: 1, name: 'Hubert', status: () => <NBadge ... />, action: ... },   // Row 1
+   *      { id: 2, name: 'Franzi', status: () => <NBadge ... />, action: ... }    // Row 2
+   * ]
+   */
+  items: {
+    type: Array,
+    default: () => []
+  }
+});
+/**
+ * The `NTable` is a styled html table which accepts data and displays it appropriately.
+ */
+export default createComponent('NTable', nTableProps, props => {
+  const headings = computed(() => {
+    // remove all headings which are below the breakpoint
+    const headings = props.headings.filter(heading => !heading.breakpoint || isWidthBreakpoint(heading.breakpoint).value);
+    // The column for actions is shown if there are details
+    // or if any of the items contain an element with the action-key.
+    if (showDetails.value || props.items.filter(row => row.action != null).length != 0) {
+      headings.push({
+        key: N_TABLE_ACTION_KEY
+      });
+    }
+    return headings;
+  });
+  const details = computed(() => {
+    // take all headings which are below the breakpoint
+    const details = props.headings.filter(heading => heading.breakpoint && !isWidthBreakpoint(heading.breakpoint).value);
+    details.push(...props.details);
+    return details;
+  });
+  const showDetails = computed(() => details.value.length > 0);
+  const detailsOpen = ref([]);
+  const isDetailsOpen = index => detailsOpen.value[index] || false;
+  const toggleDetailsOpen = index => detailsOpen.value[index] = !detailsOpen.value[index];
+  // if the items change, reset all open details to closed
+  // and create correct amount of booleans for all items
+  watch(() => props.items, newItems => detailsOpen.value = Array({
+    length: newItems.length
+  }).map(() => false), {
+    immediate: true
+  });
+  return () => _createVNode("div", {
+    "class": "overflow-x-auto"
+  }, [_createVNode("table", {
+    "class": "min-w-full text-default-500 text-sm"
+  }, [_createVNode("thead", {
+    "class": "bg-default-50 "
+  }, [_createVNode("tr", null, [headings.value.map(heading => _createVNode("th", {
+    "key": heading.key,
+    "scope": "col",
+    "class": "p-4 table-heading"
+  }, [heading.label]))])]), props.items.length > 0 && props.items.map((item, itemIndex) => _createVNode(_Fragment, {
+    "key": itemIndex
+  }, [_createVNode("tbody", {
+    "class": ['border-default-200 border-t', itemIndex % 2 === 0 ? 'bg-white' : 'bg-default-50']
+  }, [_createVNode("tr", null, [headings.value.map(heading => _createVNode("td", {
+    "key": itemIndex + '-' + heading.key,
+    "class": "p-4"
+  }, [_createVNode("div", {
+    "class": ['flex', heading.emph ? 'font-medium text-default-900' : '', heading.cellClass, heading.key == N_TABLE_ACTION_KEY ? 'justify-end items-center space-x-3' : '']
+  }, [item[heading.key] && buildItem(item[heading.key]), heading.key == N_TABLE_ACTION_KEY && showDetails.value && _createVNode(NIconButton, {
+    "icon": isDetailsOpen(itemIndex) ? ChevronDownIcon : ChevronUpIcon,
+    "onClick": () => toggleDetailsOpen(itemIndex)
+  }, null)])]))])]), showDetails.value && isDetailsOpen(itemIndex) && _createVNode("tbody", {
+    "class": itemIndex % 2 === 0 ? 'bg-white' : 'bg-default-50'
+  }, [details.value.map((detail, detailIndex) => _createVNode("tr", {
+    "key": `detail-${detailIndex}`
+  }, [_createVNode("td", {
+    "class": ['table-heading px-4 py-1', details.value.length - 1 == detailIndex ? 'pb-4' : '']
+  }, [detail.label]), _createVNode("td", {
+    "class": ['px-4 py-1', details.value.length - 1 == detailIndex ? 'pb-4' : ''],
+    "colspan": headings.value.length - 1
+  }, [item[detail.key] && buildItem(item[detail.key])])]))])]))])]);
+});
+/**
+ * Builds a JSX-Element out of the item
+ */
+function buildItem(item) {
+  if (typeof item == 'string' || typeof item == 'number') return _createVNode(_Fragment, null, [item]);else return item();
+}

package/components/NTableAction.js

@@ -0,0 +1,49 @@
+import { isVNode as _isVNode, createVNode as _createVNode, Fragment as _Fragment } from "vue";
+import { createComponent, createProps } from '../utils/component';
+import { RouterLink } from 'vue-router';
+import { nButtonProps } from './NButton';
+function _isSlot(s) {
+  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !_isVNode(s);
+}
+export const nTableActionProps = createProps({
+  /**
+   * The route of the action. If set the component will be a {@link RouterLink}.
+   */
+  route: [String, Object],
+  /**
+   * The text of the action.
+   */
+  text: String,
+  /**
+   * The html attribute, which indicates the type of the button.
+   */
+  type: nButtonProps.type,
+  /**
+   * This is called when the action is clicked.
+   * It is only called when the `route` prop is not set on the action.
+   */
+  onClick: Function
+});
+/**
+ * The `NTableAction` is a button or {@link RouterLink} which is styled to fit into a table.
+ * It is basically styled as an emphasized text in the table.
+ */
+export default createComponent('NTableAction', nTableActionProps, (props, {
+  slots
+}) => {
+  const content = () => slots.default?.() || _createVNode(_Fragment, null, [props.text]);
+  const classes = 'text-left font-medium focus:outline-none focus-visible:ring-2 focus-visible:ring-default-900 rounded-sm ring-offset-2 text-default-900 hover:underline hover:text-default-700';
+  return () => {
+    let _slot;
+    return props.route ? _createVNode(RouterLink, {
+      "to": props.route,
+      "class": classes
+    }, _isSlot(_slot = content()) ? _slot : {
+      default: () => [_slot]
+    }) : _createVNode("button", {
+      "type": props.type,
+      "class": classes,
+      "onClick": props.onClick
+    }, [content()]);
+  };
+});

package/components/NTextArea.js

@@ -0,0 +1,128 @@
+import { withDirectives as _withDirectives, vShow as _vShow, createVNode as _createVNode, mergeProps as _mergeProps } 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 { vModelProps } from '../utils/vModel';
+import NValInput, { validationProps } from './NValInput';
+const nTextAreaBaseProps = createProps({
+  ...vModelProps(String),
+  /**
+   * The name of the text area. Is displayed as a label above the text area.
+   */
+  name: String,
+  /**
+   * The placeholder of the text area.
+   */
+  placeholder: String,
+  /**
+   * The html autocomplete attribute of the text area.
+   */
+  autocomplete: {
+    type: String,
+    default: 'off'
+  },
+  /**
+   * If set to `true`, the text area is resizable in y-direction.
+   */
+  resizable: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * The initial height of the text area in terms of
+   * how many text rows fit inside the text area.
+   * The height can be change if {@link nTextAreaProps.resizable} is `true`
+   */
+  rows: Number,
+  /**
+   * The maximum length of the input string. Entering longer strings are simply
+   * prevented, but no error message is shown to the user.
+   */
+  maxLength: Number,
+  /**
+   * If set to `true` the text area is displayed with a red border.
+   */
+  error: Boolean,
+  /**
+   * If set to `true` the text area is disabled and no interaction is possible.
+   */
+  disabled: Boolean,
+  /**
+   * If set to `true` the text area's label is hidden.
+   */
+  hideLabel: Boolean,
+  /**
+   * This is called when the text area reveices focus.
+   */
+  onFocus: Function,
+  /**
+   * This is called when the text area looses focus.
+   */
+  onBlur: Function,
+  ...nToolTipPropsForImplementor
+});
+export const nTextAreaProps = createProps({
+  ...nTextAreaBaseProps,
+  ...validationProps
+});
+export default createComponent('NTextArea', nTextAreaProps, (props, context) => {
+  const textAreaRef = ref();
+  const exposed = {
+    focus: () => textAreaRef.value?.focus()
+  };
+  context.expose(exposed);
+  return () => _createVNode(NValInput, _mergeProps(props, {
+    "input": ({
+      error,
+      onBlur,
+      onUpdateValue
+    }) => _createVNode(NTextAreaBase, _mergeProps({
+      "ref": textAreaRef
+    }, {
+      ...props,
+      error,
+      onBlur,
+      onUpdateValue
+    }), null)
+  }), null);
+});
+/**
+ * The `NTextArea` wraps the html text area with all the features from {@link NInput} and {@link NValInput}.
+ */
+const NTextAreaBase = createComponent('NTextAreaBase', nTextAreaBaseProps, (props, context) => {
+  const textAreaRef = ref();
+  const exposed = {
+    focus: () => textAreaRef.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("textarea", {
+      "ref": textAreaRef,
+      "name": props.name,
+      "value": props.value,
+      "onInput": event => props.onUpdateValue?.(event.target.value),
+      "placeholder": props.placeholder,
+      "autocomplete": props.autocomplete,
+      "disabled": props.disabled,
+      "rows": props.rows,
+      "maxlength": props.maxLength,
+      "onFocus": () => props.onFocus?.(),
+      "onBlur": () => props.onBlur?.(),
+      "onInvalid": event => event.preventDefault(),
+      "class": ['block w-full rounded-md border focus:outline-none focus:ring-1 ', 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', props.resizable ? 'resize-y' : 'resize-none']
+    }, 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]])])]
+  })]);
+});