File size: 10,087 Bytes
c6535db | 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 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 | <template>
<div class="easyuse-multiselect">
<MultiSelect
v-model="selectedItems"
:options="options"
:optionLabel="optionLabel"
:optionValue="optionValue"
appendTo="self"
filter
:placeholder="placeholder"
:max-selected-labels="maxItems"
:display="display"
class="w-full easyuse-multiselect-container"
/>
</div>
</template>
<script setup>
import MultiSelect from 'primevue/multiselect'
import {$t} from "@/composable/i18n.js";
import {onMounted, watch, ref} from "vue";
import {getWidgetByName} from "@/composable/node.js";
import {HUMAN_SEGMENTATION} from "@/constants/index.js";
const human_segmentation = Object.keys(HUMAN_SEGMENTATION).reduce((acc, key) => {
if (Array.isArray(HUMAN_SEGMENTATION[key])) {
acc[key] = HUMAN_SEGMENTATION[key].map((item, index) => ({
label: item,
value: index
}));
} else if (typeof HUMAN_SEGMENTATION[key] === 'object') {
acc[key] = Object.entries(HUMAN_SEGMENTATION[key]).map(([key, value]) => ({
label: key,
value: value
}));
} else {
acc[key] = [];
}
return acc;
}, {});
const selectedItems = ref([])
const { widget } = defineProps(['widget'])
const inputSpec = widget.inputSpec
const maxItems = inputSpec?.multi_select?.max_selected_labels ?? 3
const optionLabel = inputSpec?.optionLabel ?? 'label'
const optionValue = inputSpec?.optionValue ?? 'value'
const placeholder = inputSpec?.multi_select?.placeholder ? $t(inputSpec.multi_select?.placeholder) : $t('select items')
const display = inputSpec?.multi_select?.chip ? 'chip' : 'comma'
const options = ref(inputSpec?.options ?? [])
const changeOptions = (method) => {
if (method && human_segmentation[method]) {
options.value = human_segmentation[method].map((item, index) => ({
label: $t(item.label),
value: item.value
}));
} else {
options.value = [];
}
};
watch(_=>widget.value, (newValue) => {
selectedItems.value = newValue.split(',').map(v => v && parseInt(v.trim()))
})
onMounted(_=>{
// watch method widget value change
setTimeout(_=>{
const method_widget = getWidgetByName(widget.node, 'method')
changeOptions(method_widget.value)
method_widget.callback = (value) => {
selectedItems.value = []
changeOptions(value)
}
},1)
// selected styles from node value
widget.serializeValue = async({node}, index) => {
try {
let value = selectedItems.value || []
value = value.join(',')
if(node?.widgets_values){
node.widgets_values[index] = value
node.widgets[index].value = value
}
return value
} catch (error) {
console.error('Vue Component: Error in serializeValue:', error)
return []
}
}
})
</script>
<style>
.easyuse-multiselect {
font-size: 12px;
padding: 0 15px;
--p-chip-remove-icon-size: .75rem;
--p-chip-remove-icon-focus-ring-width: var(--p-focus-ring-width);
--p-chip-remove-icon-focus-ring-style: var(--p-focus-ring-style);
--p-chip-remove-icon-focus-ring-color: var(--p-focus-ring-color);
--p-chip-remove-icon-focus-ring-offset: var(--p-focus-ring-offset);
--p-chip-remove-icon-focus-ring-shadow: var(--p-form-field-focus-ring-shadow);
--p-chip-icon-size: .75rem;
--p-chip-image-width: 2rem;
--p-chip-image-height: 2rem;
--p-chip-border-radius: 16px;
--p-chip-padding-x: 0.25rem;
--p-chip-padding-y: 0.5rem;
--p-chip-gap: 0.25rem;
--p-chip-transition-duration: var(--p-transition-duration);
--p-chip-remove-icon-color: var(--input-text);
--p-chip-icon-color: var(--input-text);
--p-chip-background: var(--content-bg);
--p-chip-color: var(--input-text);
--p-checkbox-icon-size: 0.875rem;
--p-checkbox-icon-color: var(--p-form-field-color);
--p-checkbox-icon-checked-color: var(--p-primary-contrast-color);
--p-checkbox-icon-checked-hover-color: var(--p-primary-contrast-color);
--p-checkbox-icon-disabled-color: var(--p-form-field-disabled-color);
--p-checkbox-icon-lg-size: 1rem;
--p-checkbox-icon-sm-size: 0.75rem;
--p-checkbox-border-radius: var(--p-border-radius-sm);
--p-checkbox-width: 1rem;
--p-checkbox-height: 1rem;
--p-checkbox-background: var(--p-form-field-background);
--p-checkbox-checked-background: var(--p-primary-color);
--p-checkbox-checked-hover-background: var(--p-primary-hover-color);
--p-checkbox-disabled-background: var(--p-form-field-disabled-background);
--p-checkbox-filled-background: var(--p-form-field-filled-background);
--p-checkbox-border-color: var(--p-form-field-border-color);
--p-checkbox-hover-border-color: var(--p-form-field-hover-border-color);
--p-checkbox-focus-border-color: var(--p-form-field-border-color);
--p-checkbox-checked-border-color: var(--p-primary-color);
--p-checkbox-checked-hover-border-color: var(--p-primary-hover-color);
--p-checkbox-checked-focus-border-color: var(--p-primary-color);
--p-checkbox-checked-disabled-border-color: var(--p-form-field-border-color);
--p-checkbox-invalid-border-color: var(--p-form-field-invalid-border-color);
--p-checkbox-shadow: var(--p-form-field-shadow);
--p-checkbox-transition-duration: var(--p-form-field-transition-duration);
--p-checkbox-lg-width: 1.5rem;
--p-checkbox-lg-height: 1.5rem;
--p-checkbox-sm-width: 1rem;
--p-checkbox-sm-height: 1rem;
--p-checkbox-focus-ring-width: var(--p-focus-ring-width);
--p-checkbox-focus-ring-style: var(--p-focus-ring-style);
--p-checkbox-focus-ring-color: var(--p-focus-ring-color);
--p-checkbox-focus-ring-offset: var(--p-focus-ring-offset);
--p-checkbox-focus-ring-shadow: var(--p-focus-ring-shadow);
--p-multiselect-empty-message-padding: var(--p-list-option-padding);
--p-multiselect-clear-icon-color: var(--p-form-field-icon-color);
--p-multiselect-chip-border-radius: var(--p-border-radius-sm);
--p-multiselect-option-group-background: var(--p-list-option-group-background);
--p-multiselect-option-group-color: var(--p-list-option-group-color);
--p-multiselect-option-group-font-weight: var(--p-list-option-group-font-weight);
--p-multiselect-option-group-padding: var(--p-list-option-group-padding);
--p-multiselect-option-focus-background: var(--p-list-option-focus-background);
--p-multiselect-option-selected-background: var(--p-list-option-selected-background);
--p-multiselect-option-selected-focus-background: var(--p-list-option-selected-focus-background);
--p-multiselect-option-color: var(--p-list-option-color);
--p-multiselect-option-focus-color: var(--p-list-option-focus-color);
--p-multiselect-option-selected-color: var(--p-list-option-selected-color);
--p-multiselect-option-selected-focus-color: var(--p-list-option-selected-focus-color);
--p-multiselect-option-padding: 0.25rem;
--p-multiselect-option-border-radius: var(--p-list-option-border-radius);
--p-multiselect-option-gap: 0.5rem;
--p-multiselect-list-padding: var(--p-list-padding);
--p-multiselect-list-gap: var(--p-list-gap);
--p-multiselect-list-header-padding: .25rem;
--p-multiselect-overlay-background: var(--p-overlay-select-background);
--p-multiselect-overlay-border-color: var(--p-overlay-select-border-color);
--p-multiselect-overlay-border-radius: var(--p-overlay-select-border-radius);
--p-multiselect-overlay-color: var(--p-overlay-select-color);
--p-multiselect-overlay-shadow: var(--p-overlay-select-shadow);
--p-multiselect-dropdown-width: 1.25rem;
--p-multiselect-dropdown-color: var(--input-text);
--p-multiselect-background: var(--comfy-input-bg);
--p-multiselect-disabled-background: var(--p-form-field-disabled-background);
--p-multiselect-filled-background: var(--p-form-field-filled-background);
--p-multiselect-filled-hover-background: var(--p-form-field-filled-hover-background);
--p-multiselect-filled-focus-background: var(--p-form-field-filled-focus-background);
--p-multiselect-border-color: var(--border-color);
--p-multiselect-hover-border-color: var(--border-color);
--p-multiselect-focus-border-color: var(--border-color);
--p-multiselect-invalid-border-color: var(--p-form-field-invalid-border-color);
--p-multiselect-color: var(--p-form-field-color);
--p-multiselect-disabled-color: var(--p-form-field-disabled-color);
--p-multiselect-placeholder-color:var(--descrip-text);
--p-multiselect-invalid-placeholder-color: var(--p-form-field-invalid-placeholder-color);
--p-multiselect-shadow: var(--p-form-field-shadow);
--p-multiselect-padding-x: 8px;
--p-multiselect-padding-y: 2px;
--p-multiselect-border-radius: 10px;
--p-multiselect-transition-duration: var(--p-form-field-transition-duration);
--p-multiselect-lg-font-size: var(--p-form-field-lg-font-size);
--p-multiselect-lg-padding-x: var(--p-form-field-lg-padding-x);
--p-multiselect-lg-padding-y: var(--p-form-field-lg-padding-y);
--p-multiselect-sm-font-size: var(--p-form-field-sm-font-size);
--p-multiselect-sm-padding-x: var(--p-form-field-sm-padding-x);
--p-multiselect-sm-padding-y: var(--p-form-field-sm-padding-y);
--p-multiselect-focus-ring-width: var(--p-form-field-focus-ring-width);
--p-multiselect-focus-ring-style: var(--p-form-field-focus-ring-style);
--p-multiselect-focus-ring-color: var(--p-form-field-focus-ring-color);
--p-multiselect-focus-ring-offset: var(--p-form-field-focus-ring-offset);
--p-multiselect-focus-ring-shadow: var(--p-form-field-focus-ring-shadow);
--p-icon-size: .7rem;
--p-inputtext-padding-y: .15rem;
--p-inputtext-padding-x: .25rem;
.p-multiselect-list{
flex-wrap: wrap;
flex-direction: row;
}
}
.comfyui-easyuse .easyuse-multiselect{
font-size: 11px;
--p-multiselect-padding-y: 2px;
padding:0 10px;
--p-multiselect-border-radius: var(--p-form-field-border-radius);
--p-multiselect-placeholder-color: #d4d4d8;
--p-multiselect-dropdown-color: var(--input-text);
--p-multiselect-border-color: var(--p-form-field-border-color);
--p-multiselect-hover-border-color: var(--p-form-field-hover-border-color);
--p-multiselect-focus-border-color: var(--p-form-field-focus-border-color);
}
</style> |