@gits-id/form-select/dist/form-select.es.js

GITS Form Select Component

import { defineComponent, toRefs, ref, computed, watch, openBlock, createElementBlock, Fragment, withDirectives, createElementVNode, mergeProps, unref, renderList, toDisplayString, vModelSelect, createBlock, createCommentVNode } from 'vue';
import { ErrorMessage } from 'vee-validate';
import { useTextSize, useInputClasses } from '@gits-id/utils';

const _hoisted_1 = ["disabled"];
const _hoisted_2 = ["value"];
const _sfc_main = /* @__PURE__ */ defineComponent({
  props: {
    modelValue: {
      type: String,
      default: ""
    },
    value: {
      type: String,
      default: ""
    },
    items: {
      type: Array,
      default: () => []
    },
    itemText: {
      type: String,
      default: "text"
    },
    itemValue: {
      type: String,
      default: "value"
    },
    name: {
      type: String,
      default: ""
    },
    error: {
      type: Boolean,
      default: false
    },
    errorMessages: {
      type: Array,
      default: () => []
    },
    size: {
      type: String,
      default: ""
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  emits: ["update:modelValue"],
  setup(__props, { emit }) {
    const props = __props;
    const {
      modelValue,
      value,
      itemText,
      itemValue,
      error,
      errorMessages,
      name,
      disabled
    } = toRefs(props);
    const inputValue = ref(modelValue.value);
    const { class: sizeClass } = useTextSize(props.size);
    const inputClass = computed(() => useInputClasses(error.value));
    const classes = computed(() => {
      return [inputClass.value, sizeClass.value];
    });
    watch(inputValue, (val) => {
      emit("update:modelValue", val);
    });
    watch(modelValue, (val) => {
      inputValue.value = val;
    }, { immediate: true });
    watch(value, (val) => {
      inputValue.value = val;
    });
    const getValue = (option) => {
      return typeof option === "string" ? option : option[itemValue.value];
    };
    const getText = (option) => {
      return typeof option === "string" ? option : option[itemText.value];
    };
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock(Fragment, null, [
        withDirectives(createElementVNode("select", mergeProps({
          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => inputValue.value = $event),
          class: ["w-full block transition duration-300", unref(classes)],
          disabled: unref(disabled)
        }, _ctx.$attrs), [
          (openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (option, index) => {
            return openBlock(), createElementBlock("option", mergeProps({
              key: index,
              value: getValue(option)
            }, option), toDisplayString(getText(option)), 17, _hoisted_2);
          }), 128))
        ], 16, _hoisted_1), [
          [vModelSelect, inputValue.value]
        ]),
        unref(errorMessages).length ? (openBlock(), createBlock(unref(ErrorMessage), {
          key: 0,
          class: "text-error text-sm",
          name: unref(name)
        }, null, 8, ["name"])) : createCommentVNode("", true)
      ], 64);
    };
  }
});

export { _sfc_main as VFormSelect, _sfc_main as default };