mirror of
https://github.com/lucide-icons/lucide.git
synced 2025-12-16 06:07:40 +01:00
3b0d158ea1
* Small adjustments * Format code * format code * Remove default value * format code * update yml file * Format code * Update docs/.vitepress/theme/components/base/Input.vue Co-authored-by: Karsa <contact@karsa.org> * Add extra check if null or undefined --------- Co-authored-by: Karsa <contact@karsa.org>
79 lines
1.3 KiB
Vue
79 lines
1.3 KiB
Vue
<script lang="ts">
|
|
export default {
|
|
inheritAttrs: false,
|
|
};
|
|
</script>
|
|
|
|
<script setup lang="ts">
|
|
import { computed, ref } from 'vue';
|
|
import Input from './Input.vue';
|
|
import Icon from 'lucide-vue-next/src/Icon';
|
|
import { search } from '../../../data/iconNodes';
|
|
|
|
interface Props {
|
|
modelValue: string;
|
|
shortcut?: string;
|
|
}
|
|
|
|
const props = defineProps<Props>();
|
|
|
|
const input = ref();
|
|
|
|
const emit = defineEmits(['update:modelValue']);
|
|
|
|
defineExpose({
|
|
focus: () => {
|
|
input.value.focus();
|
|
},
|
|
});
|
|
|
|
const value = computed({
|
|
get: () => props.modelValue,
|
|
set: (val) => emit('update:modelValue', val),
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<Input
|
|
ref="input"
|
|
type="search"
|
|
autofocus
|
|
:shortcut="shortcut"
|
|
v-bind="$attrs"
|
|
v-model="value"
|
|
class="input-wrapper"
|
|
>
|
|
<template #icon>
|
|
<Icon
|
|
:iconNode="search"
|
|
class="search-icon"
|
|
/>
|
|
</template>
|
|
</Input>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.input {
|
|
justify-content: flex-start;
|
|
border: 1px solid transparent;
|
|
border-radius: 8px;
|
|
padding: 0 10px 0 12px;
|
|
width: 100%;
|
|
height: 40px;
|
|
background-color: var(--vp-c-bg-alt);
|
|
}
|
|
|
|
.input:hover,
|
|
.input:focus {
|
|
border-color: var(--vp-c-brand);
|
|
background: var(--vp-c-bg-alt);
|
|
}
|
|
|
|
.input-wrapper:deep(.input) {
|
|
/* padding: 12px 24px; */
|
|
padding-block: 12px;
|
|
font-size: 14px;
|
|
height: 48px;
|
|
}
|
|
</style>
|