{"version":3,"file":"index.mjs","sources":["../../../../src/components/InputWrapper/index.vue"],"sourcesContent":["<script lang=\"ts\">\nconst uid = 0;\n</script>\n\n<script lang=\"ts\" setup>\nimport { computed, PropType, ref, useAttrs } from 'vue';\n\ndefineOptions({\n  inheritAttrs: false,\n});\n\nconst emit = defineEmits(['click', 'blur', 'focus']);\n\ndefineProps({\n  tag: {\n    type: String,\n    default: 'div',\n  },\n  title: {\n    type: String,\n    default: undefined,\n  },\n  class: {\n    type: String as PropType<string | string[] | object>,\n    default: undefined,\n  },\n  boxClass: {\n    type: String as PropType<string | string[] | object>,\n    default: undefined,\n  },\n  hint: {\n    type: String,\n    default: undefined,\n  },\n  error: {\n    type: String,\n    default: undefined,\n  },\n  fixedHeight: {\n    type: Boolean,\n    default: true,\n  },\n  readonly: {\n    type: Boolean,\n    default: false,\n  },\n  condensed: {\n    type: Boolean,\n    default: false,\n  },\n  disabled: {\n    type: Boolean,\n    default: false,\n  },\n  onClick: {\n    type: Function as PropType<(e: MouseEvent) => void>,\n    default: undefined,\n  },\n  onFocus: {\n    type: Function as PropType<(e: MouseEvent) => void>,\n    default: undefined,\n  },\n  onBlur: {\n    type: Function as PropType<(e: MouseEvent) => void>,\n    default: undefined,\n  },\n});\nconst attrs = useAttrs();\n\nconst listeners = computed(() => {\n  return Object.fromEntries(\n    Object.entries(attrs).filter((entry) => /^on[^a-z]/.test(entry[0]))\n  );\n});\n\nconst wrapperRef = ref<HTMLElement>();\n\ndefineExpose({\n  wrapperRef,\n});\n</script>\n\n<template>\n  <!-- We can't use label as a wrapper since it causes events not to trigger when e.g. using it in a select component -->\n  <div\n    @click=\"onClick\"\n    @focus=\"onFocus\"\n    @blur=\"onBlur\"\n    class=\"inline-block\"\n    :class=\"[$props.class]\"\n  >\n    <label\n      v-if=\"title\"\n      class=\"mb-1 block select-none text-sm font-medium text-gray-500 dark:text-gray-400\"\n    >\n      {{ title }}\n    </label>\n    <Component\n      :is=\"tag\"\n      ref=\"wrapperRef\"\n      class=\"relative flex w-full rounded-md border border-black/[.15] border-gray-200 text-left ring-primary-500 ring-opacity-30 focus-within:border-primary-500 focus-within:outline-none focus-within:ring dark:border-white/[.15] dark:border-gray-600 focus-within:dark:border-primary-500 overflow-hidden\"\n      :class=\"[\n        $props.boxClass,\n        fixedHeight ? (condensed ? 'h-8' : 'h-10') : undefined,\n        disabled ? 'text-gray-500' : '',\n      ]\"\n    >\n      <slot :wrapper-ref=\"wrapperRef\" />\n    </Component>\n    <div v-if=\"hint !== undefined || error !== undefined\" class=\"mt-2\">\n      <div v-if=\"hint !== undefined\" class=\"select-none text-xs text-gray-400\">\n        {{ hint }}\n      </div>\n      <div\n        v-if=\"error !== undefined\"\n        class=\"select-none text-xs text-red-400 dark:text-red-400\"\n      >\n        {{ error }}\n      </div>\n    </div>\n  </div>\n</template>\n"],"names":["attrs","useAttrs","computed","entry","wrapperRef","ref","__expose"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmEA,UAAMA,IAAQC;AAEI,IAAAC,EAAS,MAClB,OAAO;AAAA,MACZ,OAAO,QAAQF,CAAK,EAAE,OAAO,CAACG,MAAU,YAAY,KAAKA,EAAM,CAAC,CAAC,CAAC;AAAA,IAAA,CAErE;AAED,UAAMC,IAAaC;AAEN,WAAAC,EAAA;AAAA,MACX,YAAAF;AAAA,IAAA,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}