Blame view

Yi.Vben5.Vue3/packages/effects/layouts/src/widgets/preferences/blocks/input-item.vue 1.08 KB
515fceeb   “wangming”   框架初始化
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
  <script setup lang="ts">
  import type { SelectOption } from '@vben/types';
  
  import { CircleHelp } from '@vben/icons';
  import { Input, VbenTooltip } from '@vben-core/shadcn-ui';
  import { useSlots } from 'vue';
  
  defineOptions({
    name: 'PreferenceSelectItem',
  });
  
  withDefaults(
    defineProps<{
      disabled?: boolean;
      items?: SelectOption[];
      placeholder?: string;
    }>(),
    {
      disabled: false,
      placeholder: '',
      items: () => [],
    },
  );
  
  const inputValue = defineModel<string>();
  
  const slots = useSlots();
  </script>
  
  <template>
    <div
      :class="{
        'hover:bg-accent': !slots.tip,
        'pointer-events-none opacity-50': disabled,
      }"
      class="my-1 flex w-full items-center justify-between rounded-md px-2 py-1"
    >
      <span class="flex items-center text-sm">
        <slot></slot>
  
        <VbenTooltip v-if="slots.tip" side="bottom">
          <template #trigger>
            <CircleHelp class="ml-1 size-3 cursor-help" />
          </template>
          <slot name="tip"></slot>
        </VbenTooltip>
      </span>
      <Input v-model="inputValue" class="h-8 w-[165px]" />
    </div>
  </template>