{"version":3,"file":"FormSelect-Upx1p2eP.js","sources":["../../Vue/src/components/Common/FormSelect.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { SelectOption } from \"@/models/frontend-only/SelectOption\";\r\n\r\nconst props = withDefaults(\r\n  defineProps<{\r\n    label?: string;\r\n    options?: (SelectOption | string)[];\r\n    modelValue?: string;\r\n    id?: string;\r\n    hideLabel?: boolean;\r\n    inline?: boolean;\r\n    disabled?: boolean;\r\n    disabledPlaceholder?: string;\r\n    smIcon?: string;\r\n    small?: boolean;\r\n    placeholder?: boolean;\r\n  }>(),\r\n  {\r\n    label: \"\",\r\n    modelValue: \"\",\r\n    options: () => [],\r\n    id: () => uniqueId(\"form-select\"),\r\n    hideLabel: false,\r\n    inline: false,\r\n    disabled: false,\r\n    small: false,\r\n  },\r\n);\r\n\r\nconst emit = defineEmits<{\r\n  (e: \"update:modelValue\", value: string): void;\r\n}>();\r\n\r\nconst value = computed({\r\n  get() {\r\n    return props.modelValue;\r\n  },\r\n  set(newValue) {\r\n    emit(\"update:modelValue\", newValue);\r\n  },\r\n});\r\n\r\nconst fullOptions = computed<SelectOption[]>(() => {\r\n  return props.options.map((o) => {\r\n    if (typeof o !== \"string\") {\r\n      return o;\r\n    } else {\r\n      return {\r\n        value: o,\r\n        label: o,\r\n      };\r\n    }\r\n  });\r\n});\r\n</script>\r\n\r\n<template>\r\n  <div\r\n    v-if=\"!placeholder\"\r\n    class=\"form-control\"\r\n    :class=\"{ inline: inline }\"\r\n  >\r\n    <label\r\n      :for=\"id\"\r\n      class=\"label\"\r\n      :class=\"{ 'sr-only': hideLabel }\"\r\n    >\r\n      <span\r\n        class=\"label-text\"\r\n        :class=\"{ 'd-none d-lg-block': smIcon }\"\r\n        >{{ label }}</span\r\n      >\r\n      <FAIcon\r\n        v-if=\"smIcon\"\r\n        :class=\"`${smIcon} fa-fw fa-light d-lg-none`\"\r\n      />\r\n    </label>\r\n    <select\r\n      :id=\"id\"\r\n      v-model=\"value\"\r\n      class=\"select\"\r\n      :class=\"{ 'form-select-sm': small }\"\r\n      :disabled=\"disabled\"\r\n    >\r\n      <option\r\n        v-if=\"disabledPlaceholder\"\r\n        selected\r\n        value=\"\"\r\n      >\r\n        {{ disabledPlaceholder }}\r\n      </option>\r\n      <option\r\n        v-for=\"(o, i) of fullOptions\"\r\n        :key=\"i\"\r\n        :value=\"o.value\"\r\n      >\r\n        {{ o.label }}\r\n      </option>\r\n    </select>\r\n    <slot name=\"footer\"></slot>\r\n  </div>\r\n  <div\r\n    v-else\r\n    class=\"form-control\"\r\n    :class=\"{ inline: inline }\"\r\n  >\r\n    <label\r\n      :for=\"id\"\r\n      class=\"label\"\r\n      :class=\"{ 'sr-only': hideLabel }\"\r\n    >\r\n      <span\r\n        class=\"label-text\"\r\n        :class=\"{ 'd-none d-lg-block': smIcon }\"\r\n        ><span\r\n          class=\"placeholder\"\r\n          style=\"width: 75px\"\r\n      /></span>\r\n    </label>\r\n    <span\r\n      :id=\"id\"\r\n      class=\"select\"\r\n      :class=\"{ 'form-select-sm': small }\"\r\n    >\r\n      <span style=\"width: 100%; height: 1em\" />\r\n    </span>\r\n    <slot name=\"footer\"></slot>\r\n  </div>\r\n</template>\r\n\r\n<style scoped lang=\"postcss\">\r\nlabel {\r\n  @apply whitespace-nowrap text-gray-500;\r\n}\r\n.form-control.inline {\r\n  @apply flex flex-row flex-nowrap gap-1;\r\n}\r\n</style>\r\n"],"names":["props","__props","emit","__emit","value","computed","newValue","fullOptions","o"],"mappings":"qpBAGA,MAAMA,EAAQC,EA0BRC,EAAOC,EAIPC,EAAQC,EAAS,CACrB,KAAM,CACJ,OAAOL,EAAM,UACf,EACA,IAAIM,EAAU,CACZJ,EAAK,oBAAqBI,CAAQ,CACpC,CAAA,CACD,EAEKC,EAAcF,EAAyB,IACpCL,EAAM,QAAQ,IAAKQ,GACpB,OAAOA,GAAM,SACRA,EAEA,CACL,MAAOA,EACP,MAAOA,CAAA,CAGZ,CACF"}