@proj-airi/ui 0.4.25 → 0.4.26-beta.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Form/Select/Select.vue +98 -0
- package/dist/components/Form/Select/index.d.ts +1 -0
- package/dist/components/Form/Select/index.mjs +1 -0
- package/dist/components/Form/index.d.ts +1 -0
- package/dist/components/Form/index.mjs +1 -0
- package/package.json +2 -1
- package/src/components/Form/Select/Select.vue +102 -0
- package/src/components/Form/Select/index.ts +1 -0
- package/src/components/Form/index.ts +1 -0
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
<script setup>
|
|
2
|
+
import { Dropdown as VDropdown } from "floating-vue";
|
|
3
|
+
import { computed } from "vue";
|
|
4
|
+
const props = defineProps({
|
|
5
|
+
options: { type: Array, required: true },
|
|
6
|
+
placeholder: { type: String, required: false },
|
|
7
|
+
disabled: { type: Boolean, required: false },
|
|
8
|
+
title: { type: String, required: false }
|
|
9
|
+
});
|
|
10
|
+
const modelValue = defineModel({ type: [String, Number], ...{ required: true } });
|
|
11
|
+
const selectedLabel = computed(() => {
|
|
12
|
+
const selected = props.options.find((opt) => opt.value === modelValue.value);
|
|
13
|
+
return selected ? selected.label : props.placeholder;
|
|
14
|
+
});
|
|
15
|
+
function selectOption(value) {
|
|
16
|
+
modelValue.value = value;
|
|
17
|
+
}
|
|
18
|
+
</script>
|
|
19
|
+
|
|
20
|
+
<template>
|
|
21
|
+
<VDropdown
|
|
22
|
+
auto-size
|
|
23
|
+
auto-boundary-max-size
|
|
24
|
+
>
|
|
25
|
+
<div
|
|
26
|
+
class="min-w-[160px] flex cursor-pointer items-center justify-between gap-2 border rounded-lg bg-white p-2.5 text-xs text-neutral-700 shadow-sm outline-none transition-colors disabled:cursor-not-allowed dark:border-neutral-800 dark:bg-neutral-900 disabled:bg-neutral-100 hover:bg-neutral-50 dark:text-neutral-200 disabled:text-neutral-400 focus:ring-2 focus:ring-black/10 dark:disabled:bg-neutral-800 dark:hover:bg-neutral-800 dark:disabled:text-neutral-600"
|
|
27
|
+
:class="{ 'pointer-events-none': props.disabled }"
|
|
28
|
+
>
|
|
29
|
+
<div class="flex-1 truncate">
|
|
30
|
+
<slot :label="selectedLabel">
|
|
31
|
+
{{ selectedLabel }}
|
|
32
|
+
</slot>
|
|
33
|
+
</div>
|
|
34
|
+
<div i-solar:alt-arrow-down-bold-duotone class="h-3.5 w-3.5 text-neutral-500 dark:text-neutral-400" />
|
|
35
|
+
</div>
|
|
36
|
+
|
|
37
|
+
<template #popper="{ hide }">
|
|
38
|
+
<div class="min-w-[160px] flex flex-col gap-0.5 border border-neutral-200 rounded-lg bg-white p-1 shadow-lg dark:border-neutral-800 dark:bg-neutral-900">
|
|
39
|
+
<div
|
|
40
|
+
v-for="option of props.options"
|
|
41
|
+
v-bind="{ ...$attrs, class: null, style: null }"
|
|
42
|
+
:key="option.value"
|
|
43
|
+
class="cursor-pointer rounded px-2 py-1.5 text-sm text-neutral-700 hover:bg-neutral-100 dark:text-neutral-200 dark:hover:bg-neutral-800"
|
|
44
|
+
:class="{
|
|
45
|
+
'bg-neutral-100 dark:bg-neutral-800': modelValue === option.value,
|
|
46
|
+
}"
|
|
47
|
+
@click="selectOption(option.value); hide()"
|
|
48
|
+
>
|
|
49
|
+
{{ option.label }}
|
|
50
|
+
</div>
|
|
51
|
+
</div>
|
|
52
|
+
</template>
|
|
53
|
+
</VDropdown>
|
|
54
|
+
</template>
|
|
55
|
+
|
|
56
|
+
<style>
|
|
57
|
+
.resize-observer[data-v-b329ee4c] {
|
|
58
|
+
position: absolute;
|
|
59
|
+
top: 0;
|
|
60
|
+
left: 0;
|
|
61
|
+
z-index: -1;
|
|
62
|
+
width: 100%;
|
|
63
|
+
height: 100%;
|
|
64
|
+
border: none;
|
|
65
|
+
background-color: transparent;
|
|
66
|
+
pointer-events: none;
|
|
67
|
+
display: block;
|
|
68
|
+
overflow: hidden;
|
|
69
|
+
opacity: 0;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.resize-observer[data-v-b329ee4c] object {
|
|
73
|
+
display: block;
|
|
74
|
+
position: absolute;
|
|
75
|
+
top: 0;
|
|
76
|
+
left: 0;
|
|
77
|
+
height: 100%;
|
|
78
|
+
width: 100%;
|
|
79
|
+
overflow: hidden;
|
|
80
|
+
pointer-events: none;
|
|
81
|
+
z-index: -1;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.v-popper__popper {
|
|
85
|
+
z-index: 10000;
|
|
86
|
+
top: 0;
|
|
87
|
+
left: 0;
|
|
88
|
+
outline: none;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
.v-popper__arrow-container {
|
|
92
|
+
display: none;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
.v-popper__inner {
|
|
96
|
+
border: none !important;
|
|
97
|
+
}
|
|
98
|
+
</style>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as Select } from './Select.vue';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as Select } from "./Select.vue";
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@proj-airi/ui",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "0.4.
|
|
4
|
+
"version": "0.4.26-beta.2",
|
|
5
5
|
"description": "A collection of UI components that used by Project AIRI",
|
|
6
6
|
"author": {
|
|
7
7
|
"name": "Neko Ayaka",
|
|
@@ -30,6 +30,7 @@
|
|
|
30
30
|
},
|
|
31
31
|
"dependencies": {
|
|
32
32
|
"@vueuse/core": "^13.1.0",
|
|
33
|
+
"floating-vue": "^5.2.2",
|
|
33
34
|
"reka-ui": "^2.2.0",
|
|
34
35
|
"vue": "^3.5.13"
|
|
35
36
|
},
|
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
<script setup lang="ts">
|
|
2
|
+
import { Dropdown as VDropdown } from 'floating-vue'
|
|
3
|
+
import { computed } from 'vue'
|
|
4
|
+
|
|
5
|
+
const props = defineProps<{
|
|
6
|
+
options: { label: string, value: string | number }[]
|
|
7
|
+
placeholder?: string
|
|
8
|
+
disabled?: boolean
|
|
9
|
+
title?: string
|
|
10
|
+
}>()
|
|
11
|
+
|
|
12
|
+
const modelValue = defineModel<string | number>({ required: true })
|
|
13
|
+
|
|
14
|
+
const selectedLabel = computed(() => {
|
|
15
|
+
const selected = props.options.find(opt => opt.value === modelValue.value)
|
|
16
|
+
return selected ? selected.label : props.placeholder
|
|
17
|
+
})
|
|
18
|
+
|
|
19
|
+
function selectOption(value: string | number) {
|
|
20
|
+
modelValue.value = value
|
|
21
|
+
}
|
|
22
|
+
</script>
|
|
23
|
+
|
|
24
|
+
<template>
|
|
25
|
+
<VDropdown
|
|
26
|
+
auto-size
|
|
27
|
+
auto-boundary-max-size
|
|
28
|
+
>
|
|
29
|
+
<div
|
|
30
|
+
class="min-w-[160px] flex cursor-pointer items-center justify-between gap-2 border rounded-lg bg-white p-2.5 text-xs text-neutral-700 shadow-sm outline-none transition-colors disabled:cursor-not-allowed dark:border-neutral-800 dark:bg-neutral-900 disabled:bg-neutral-100 hover:bg-neutral-50 dark:text-neutral-200 disabled:text-neutral-400 focus:ring-2 focus:ring-black/10 dark:disabled:bg-neutral-800 dark:hover:bg-neutral-800 dark:disabled:text-neutral-600"
|
|
31
|
+
:class="{ 'pointer-events-none': props.disabled }"
|
|
32
|
+
>
|
|
33
|
+
<div class="flex-1 truncate">
|
|
34
|
+
<slot :label="selectedLabel">
|
|
35
|
+
{{ selectedLabel }}
|
|
36
|
+
</slot>
|
|
37
|
+
</div>
|
|
38
|
+
<div i-solar:alt-arrow-down-bold-duotone class="h-3.5 w-3.5 text-neutral-500 dark:text-neutral-400" />
|
|
39
|
+
</div>
|
|
40
|
+
|
|
41
|
+
<template #popper="{ hide }">
|
|
42
|
+
<div class="min-w-[160px] flex flex-col gap-0.5 border border-neutral-200 rounded-lg bg-white p-1 shadow-lg dark:border-neutral-800 dark:bg-neutral-900">
|
|
43
|
+
<div
|
|
44
|
+
v-for="option of props.options"
|
|
45
|
+
v-bind="{ ...$attrs, class: null, style: null }"
|
|
46
|
+
:key="option.value"
|
|
47
|
+
class="cursor-pointer rounded px-2 py-1.5 text-sm text-neutral-700 hover:bg-neutral-100 dark:text-neutral-200 dark:hover:bg-neutral-800"
|
|
48
|
+
:class="{
|
|
49
|
+
'bg-neutral-100 dark:bg-neutral-800': modelValue === option.value,
|
|
50
|
+
}"
|
|
51
|
+
@click="selectOption(option.value); hide()"
|
|
52
|
+
>
|
|
53
|
+
{{ option.label }}
|
|
54
|
+
</div>
|
|
55
|
+
</div>
|
|
56
|
+
</template>
|
|
57
|
+
</VDropdown>
|
|
58
|
+
</template>
|
|
59
|
+
|
|
60
|
+
<style>
|
|
61
|
+
.resize-observer[data-v-b329ee4c] {
|
|
62
|
+
position: absolute;
|
|
63
|
+
top: 0;
|
|
64
|
+
left: 0;
|
|
65
|
+
z-index: -1;
|
|
66
|
+
width: 100%;
|
|
67
|
+
height: 100%;
|
|
68
|
+
border: none;
|
|
69
|
+
background-color: transparent;
|
|
70
|
+
pointer-events: none;
|
|
71
|
+
display: block;
|
|
72
|
+
overflow: hidden;
|
|
73
|
+
opacity: 0;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.resize-observer[data-v-b329ee4c] object {
|
|
77
|
+
display: block;
|
|
78
|
+
position: absolute;
|
|
79
|
+
top: 0;
|
|
80
|
+
left: 0;
|
|
81
|
+
height: 100%;
|
|
82
|
+
width: 100%;
|
|
83
|
+
overflow: hidden;
|
|
84
|
+
pointer-events: none;
|
|
85
|
+
z-index: -1;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.v-popper__popper {
|
|
89
|
+
z-index: 10000;
|
|
90
|
+
top: 0;
|
|
91
|
+
left: 0;
|
|
92
|
+
outline: none;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
.v-popper__arrow-container {
|
|
96
|
+
display: none;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.v-popper__inner {
|
|
100
|
+
border: none !important;
|
|
101
|
+
}
|
|
102
|
+
</style>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as Select } from './Select.vue'
|