@vue-interface/input-field/dist/input-field.umd.cjs.map

A Vue input field component.

{"version":3,"file":"input-field.umd.cjs","sources":["../../../node_modules/.pnpm/@heroicons+vue@2.2.0_vue@3.5.27_typescript@5.9.3_/node_modules/@heroicons/vue/24/outline/esm/XMarkIcon.js","../src/InputField.vue"],"sourcesContent":["import { createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from \"vue\"\n\nexport default function render(_ctx, _cache) {\n  return (_openBlock(), _createElementBlock(\"svg\", {\n    xmlns: \"http://www.w3.org/2000/svg\",\n    fill: \"none\",\n    viewBox: \"0 0 24 24\",\n    \"stroke-width\": \"1.5\",\n    stroke: \"currentColor\",\n    \"aria-hidden\": \"true\",\n    \"data-slot\": \"icon\"\n  }, [\n    _createElementVNode(\"path\", {\n      \"stroke-linecap\": \"round\",\n      \"stroke-linejoin\": \"round\",\n      d: \"M6 18 18 6M6 6l12 12\"\n    })\n  ]))\n}","<script setup lang=\"ts\" generic=\"ModelValue, Value\">\nimport { XMarkIcon } from '@heroicons/vue/24/outline';\nimport { ActivityIndicator } from '@vue-interface/activity-indicator';\nimport type { FormControlEvents, FormControlProps, FormControlSlots } from '@vue-interface/form-control';\nimport { FormControlErrors, FormControlFeedback, useFormControl } from '@vue-interface/form-control';\nimport { type HTMLAttributes, computed, useTemplateRef, ref } from 'vue';\n\nconst props = withDefaults(defineProps<InputFieldProps<ModelValue,Value>>(), {\n    formControlClass: 'form-control',\n    labelClass: 'form-label',\n    size: 'form-control-md',\n    clearable: false\n});\n\ndefineOptions({\n    inheritAttrs: false\n});\n\nconst input = ref<string>();\nconst model = defineModel<ModelValue>();\n\ndefineSlots<FormControlSlots<InputFieldControlSizePrefix,ModelValue>>();\n\nconst emit = defineEmits<FormControlEvents>();\n\nconst {\n    controlAttributes,\n    formGroupClasses,\n    listeners\n} = useFormControl<HTMLAttributes, InputFieldControlSizePrefix, ModelValue|undefined, Value>({ model, props, emit });\n\nconst isInteractive = computed(() => !props.disabled && !props.readonly);\n\nconst canClear = computed(() => {\n    return props.clearable && (!!input.value || !!model.value) && isInteractive.value;\n});\n\nfunction clear() {\n    if (!isInteractive.value) return;\n    model.value = undefined;\n}\n\nconst activity = useTemplateRef<InstanceType<typeof ActivityIndicator>>('activity');\nconst help = useTemplateRef<HTMLElement>('help');\nconst label = useTemplateRef<HTMLLabelElement>('label');\nconst field = useTemplateRef<HTMLInputElement>('field');\nconst wrapper = useTemplateRef<HTMLDivElement>('wrapper');\n\ndefineExpose({\n    activity,\n    help,\n    field,\n    label,\n    wrapper,\n    focus: () => field.value?.focus(),\n    blur: () => field.value?.blur(),\n})\n</script>\n\n<script lang=\"ts\">\nexport type InputFieldControlSizePrefix = 'form-control';\n\nexport type InputFieldProps<ModelValue, Value> = FormControlProps<\n    HTMLAttributes,\n    InputFieldControlSizePrefix,\n    ModelValue,\n    Value\n> & {\n    clearable?: boolean;\n}\n</script>\n\n<template>\n    <div\n        ref=\"wrapper\"\n        class=\"input-field\"\n        :class=\"[formGroupClasses, { 'has-clear-button': canClear }]\">\n        <slot name=\"label\">\n            <label\n                v-if=\"props.label\"\n                ref=\"label\"\n                :class=\"labelClass\"\n                :for=\"controlAttributes.id\">\n                {{ props.label }}\n            </label>\n        </slot>\n        \n        <div class=\"form-control-inner\">\n            <slot\n                name=\"control\"\n                v-bind=\"{ controlAttributes, listeners }\">\n                <div\n                    v-if=\"$slots.icon\"\n                    class=\"form-control-inner-icon\"\n                    @click=\"field?.focus()\">\n                    <slot name=\"icon\" />\n                </div>\n                <input\n                    ref=\"field\"\n                    v-model=\"model\"\n                    v-bind=\"{...controlAttributes, ...listeners}\">\n            </slot>\n            \n            <div class=\"form-control-activity-indicator\">\n                <slot name=\"activity\" v-bind=\"{ canClear, clear, isInteractive }\">\n                    <button\n                        v-if=\"canClear\"\n                        type=\"button\"\n                        class=\"input-field-close-button\"\n                        @click.stop=\"clear\">\n                        <XMarkIcon class=\"size-[1.25em]\" />\n                    </button>\n                    <Transition name=\"input-field-fade\" v-else>\n                        <ActivityIndicator\n                            v-if=\"props.activity && indicator\"\n                            key=\"activity\"\n                            ref=\"activity\"\n                            :type=\"indicator\"\n                            :size=\"indicatorSize\" />\n                    </Transition>\n                </slot>\n            </div>\n        </div>\n\n        <slot\n            name=\"errors\"\n            v-bind=\"{ error, errors, id: $attrs.id, name: $attrs.name }\">  \n            <FormControlErrors\n                v-if=\"!!(error || errors)\"\n                :id=\"id\"\n                v-slot=\"{ error }\"\n                :name=\"name\"\n                :error=\"error\"\n                :errors=\"errors\">\n                <div\n                    invalid\n                    class=\"invalid-feedback\">\n                    {{ error }}<br>\n                </div>\n            </FormControlErrors>\n        </slot>\n        \n        <slot\n            name=\"feedback\"\n            v-bind=\"{ feedback }\">\n            <FormControlFeedback\n                v-slot=\"{ feedback }\"\n                :feedback=\"feedback\">\n                <div\n                    valid\n                    class=\"valid-feedback\">\n                    {{ feedback }}\n                </div>\n            </FormControlFeedback>\n        </slot>\n\n        <slot\n            name=\"help\"\n            v-bind=\"{ helpText }\">\n            <small\n                v-if=\"helpText\"\n                ref=\"help\"\n                class=\"form-help\">\n                {{ helpText }}\n            </small>\n        </slot>\n    </div>\n</template>"],"names":["render","_ctx","_cache","_openBlock","_createElementBlock","_createElementVNode","props","__props","input","ref","model","_useModel","emit","__emit","controlAttributes","formGroupClasses","listeners","useFormControl","isInteractive","computed","canClear","clear","activity","useTemplateRef","help","label","field","wrapper","__expose","_normalizeClass","_unref","_renderSlot","_toDisplayString","_hoisted_1","_hoisted_2","_normalizeProps","_guardReactiveProps","$slots","$event","_withDirectives","_mergeProps","_hoisted_3","_createVNode","XMarkIcon","_createBlock","_Transition","ActivityIndicator","$attrs","FormControlErrors","_withCtx","error","_hoisted_4","FormControlFeedback","feedback","_hoisted_5"],"mappings":"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","x_google_ignoreList":[0]}